diff --git a/.gitignore b/.gitignore
index b2406ac..fdff369 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 *.rbc
 .bundle
 .config
+.vscode
 Gemfile.lock
 .bundle/
 log/*.log
diff --git a/.travis.yml b/.travis.yml
index bd3388f..b7bbb78 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,18 +6,18 @@ rvm:
 - 2.3.7
 - 2.4.4
 - 2.5.1
-env:
-  global:
-  - QMAKE=/usr/lib/x86_64-linux-gnu/qt5/bin/qmake
-addons:
-  apt:
-    sources:
-    - ubuntu-sdk-team
-    packages:
-    - libqt5webkit5-dev
-    - qtdeclarative5-dev
+addons: # get google-chrome-stable
+  chrome: stable
+install: # Install ChromeDriver (64bits; replace 64 with 32 for 32bits).
+  - wget -N https://chromedriver.storage.googleapis.com/2.43/chromedriver_linux64.zip -P ~/
+  - unzip ~/chromedriver_linux64.zip -d ~/
+  - rm ~/chromedriver_linux64.zip
+  - sudo mv -f ~/chromedriver /usr/local/share/
+  - sudo chmod +x /usr/local/share/chromedriver
+  - sudo ln -s /usr/local/share/chromedriver /usr/local/bin/chromedriver
 before_install:
 - gem update --system
+- bundle install
 script:
 - bin/rails db:migrate
 - bundle exec rubocop && xvfb-run bundle exec rspec spec
diff --git a/app/assets/javascripts/rosetta/application.js b/app/assets/javascripts/rosetta/application.js
index 40a99f3..cc97af3 100644
--- a/app/assets/javascripts/rosetta/application.js
+++ b/app/assets/javascripts/rosetta/application.js
@@ -1,13 +1,17 @@
 //= require ./vendor/vue.min
 //= require ./vendor/lunr
+//= require ./vendor/autosize.min
 
 function initPhrasesList(selector, phrases) {
   new Vue({
     el: selector,
+
     data: {
       phrases: phrases,
-      query: ''
+      query: '',
+      menuOpened: false,
     },
+
     computed: {
       searchIndex: function() {
         var that = this;
@@ -17,14 +21,14 @@ function initPhrasesList(selector, phrases) {
           this.field('text');
 
           that.phrases.forEach(function (phrase) {
-            this.add(phrase)
+            this.add(phrase);
           }, this);
         });
       },
+
       filteredPhrases: function () {
         if (this.query) {
           var results = this.searchIndex.search(this.query);
-
           return this.phrases.filter(function (phrase) {
             return results.some(function (result) {
               return result.ref === phrase.code;
@@ -34,6 +38,19 @@ function initPhrasesList(selector, phrases) {
           return this.phrases;
         }
       }
+    },
+
+    updated: function () {
+      this.$nextTick(function () {
+        autosize(document.querySelectorAll('.database__field'));
+      });
+    },
+
+    methods: {
+      toggleNav: function() {
+        this.menuOpened = this.menuOpened ? false : true;
+        console.log('toggleNav', this.menuOpened);
+      }
     }
   });
 }
diff --git a/app/assets/javascripts/rosetta/vendor/autosize.min.js b/app/assets/javascripts/rosetta/vendor/autosize.min.js
new file mode 100755
index 0000000..4d9b4e9
--- /dev/null
+++ b/app/assets/javascripts/rosetta/vendor/autosize.min.js
@@ -0,0 +1,6 @@
+/*!
+	autosize 4.0.2
+	license: MIT
+	http://www.jacklmoore.com/autosize
+*/
+!function(e,t){if("function"==typeof define&&define.amd)define(["module","exports"],t);else if("undefined"!=typeof exports)t(module,exports);else{var n={exports:{}};t(n,n.exports),e.autosize=n.exports}}(this,function(e,t){"use strict";var n,o,p="function"==typeof Map?new Map:(n=[],o=[],{has:function(e){return-1<n.indexOf(e)},get:function(e){return o[n.indexOf(e)]},set:function(e,t){-1===n.indexOf(e)&&(n.push(e),o.push(t))},delete:function(e){var t=n.indexOf(e);-1<t&&(n.splice(t,1),o.splice(t,1))}}),c=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){c=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(r){if(r&&r.nodeName&&"TEXTAREA"===r.nodeName&&!p.has(r)){var e,n=null,o=null,i=null,d=function(){r.clientWidth!==o&&a()},l=function(t){window.removeEventListener("resize",d,!1),r.removeEventListener("input",a,!1),r.removeEventListener("keyup",a,!1),r.removeEventListener("autosize:destroy",l,!1),r.removeEventListener("autosize:update",a,!1),Object.keys(t).forEach(function(e){r.style[e]=t[e]}),p.delete(r)}.bind(r,{height:r.style.height,resize:r.style.resize,overflowY:r.style.overflowY,overflowX:r.style.overflowX,wordWrap:r.style.wordWrap});r.addEventListener("autosize:destroy",l,!1),"onpropertychange"in r&&"oninput"in r&&r.addEventListener("keyup",a,!1),window.addEventListener("resize",d,!1),r.addEventListener("input",a,!1),r.addEventListener("autosize:update",a,!1),r.style.overflowX="hidden",r.style.wordWrap="break-word",p.set(r,{destroy:l,update:a}),"vertical"===(e=window.getComputedStyle(r,null)).resize?r.style.resize="none":"both"===e.resize&&(r.style.resize="horizontal"),n="content-box"===e.boxSizing?-(parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)):parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth),isNaN(n)&&(n=0),a()}function s(e){var t=r.style.width;r.style.width="0px",r.offsetWidth,r.style.width=t,r.style.overflowY=e}function u(){if(0!==r.scrollHeight){var e=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(r),t=document.documentElement&&document.documentElement.scrollTop;r.style.height="",r.style.height=r.scrollHeight+n+"px",o=r.clientWidth,e.forEach(function(e){e.node.scrollTop=e.scrollTop}),t&&(document.documentElement.scrollTop=t)}}function a(){u();var e=Math.round(parseFloat(r.style.height)),t=window.getComputedStyle(r,null),n="content-box"===t.boxSizing?Math.round(parseFloat(t.height)):r.offsetHeight;if(n<e?"hidden"===t.overflowY&&(s("scroll"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight):"hidden"!==t.overflowY&&(s("hidden"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight),i!==n){i=n;var o=c("autosize:resized");try{r.dispatchEvent(o)}catch(e){}}}}function i(e){var t=p.get(e);t&&t.destroy()}function d(e){var t=p.get(e);t&&t.update()}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return r(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],d),e}),t.default=l,e.exports=t.default});
\ No newline at end of file
diff --git a/app/assets/stylesheets/rosetta/application.css b/app/assets/stylesheets/rosetta/application.css
deleted file mode 100644
index 94c3194..0000000
--- a/app/assets/stylesheets/rosetta/application.css
+++ /dev/null
@@ -1,205 +0,0 @@
-.phrases-menu {
-    height: 100%;
-    width: 350px;
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    font-family: Arial, Helvetica, sans-serif;
-    left: -350px;
-    background-color: #F5F5F5;
-    transition: 0.2s;
-    -webkit-box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0.2);
-    box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0.2);
-}
-
-.phrases-menu.match-phrase,
-.phrases-menu.match-phrase .open-phrases-menu-btn {
-    background-color: #eaffdd;
-}
-
-.phrases-menu.match-phrase .phrases-menu__block {
-    background-color: #f7fff3;
-}
-
-.phrases-menu.unmatch-phrase,
-.phrases-menu.unmatch-phrase .open-phrases-menu-btn {
-    background-color: #fae0dd;
-}
-
-.phrases-menu.open {
-    left: 0px;
-}
-
-.phrases-menu__header {
-    height: 45px;
-    position: relative;
-}
-
-.phrases-menu__content {
-    height: calc(100% - 46px);
-    padding: 2px 0 12px 0;
-    overflow: auto;
-    box-sizing: border-box;
-}
-
-.phrases-menu__title {
-    margin: 0;
-    padding: 12px 9px;
-    font-size: 18px;
-    text-transform: uppercase;
-    border-bottom: 1px solid #dedede;
-}
-
-.phrases-menu__list {
-    margin-left: 10px;
-    margin-right: 10px;
-}
-
-.phrases-menu__block {
-    color: #000000;
-    display: block;
-    text-decoration: none;
-    padding: 10px 10px;
-    transition: 0.3s;
-    font-size: 12px;
-    margin-top: 10px;
-    border-radius: 3px;
-    background: #ffffff;
-    border: 1px solid #dedede;
-}
-
-.phrases-menu__block.hide {
-    display: none;
-}
-
-.phrases-menu:not(.local) .phrases-menu__block:hover {
-    color: #e81d08;
-    cursor: pointer;
-    border: 1px solid #e81d08;
-    text-decoration: none;
-}
-
-.phrases-menu__key {
-    font-size: 12px;
-    font-weight: 900;
-    margin-bottom: 11px;
-}
-
-.phrases-menu__phrase {
-    font-size: 13px;
-    margin-bottom: 11px;
-}
-
-.phrases-menu__phrase:last-child {
-    margin-bottom: 0;
-}
-
-.phrases-menu__path {
-    font-size: 12px;
-    color: #9a9a9a;
-    transition: 0.3s;
-}
-
-.phrases-menu:not(.local) .phrases-menu__block:hover .phrases-menu__path {
-    color: #e81d08;
-}
-
-.phrases-menu__footer {
-    text-align: center;
-    max-width: 75%;
-    margin: 25px auto 0;
-}
-
-.phrases-menu__footer h1 {
-    font-size: 18px;
-    color: #7b7b7b;
-}
-
-.phrases-menu__footer p {
-    font-size: 12px;
-    color: #9a9a9a;
-    line-height: 1.4;
-}
-
-.phrases-menu__footer a {
-    color: inherit;
-}
-
-.phrases-menu__footer a:hover {
-    color: #e81d08;
-}
-
-.open-phrases-menu-btn {
-    background-color: #F5F5F5;
-    color: #686866;
-    -webkit-box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.2);
-    box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.2);
-    display: block;
-    position: absolute;
-    right: -55px;
-    height: 45px;
-    width: 55px;
-    border-radius: 0 0 3px 0;
-    top: 0px;
-    cursor: pointer;
-}
-
-.phrases-menu__closebtn {
-    transition: 0.3s;
-    display: none;
-}
-
-.phrases-menu.open .phrases-menu__closebtn {
-    display: block;
-}
-
-.phrases-menu.open .phrases-menu__openbtn {
-    display: none;
-}
-
-.phrases-menu__closebtn img {
-    height: 20px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-.phrases-menu__intro {
-    padding-left: 16px;
-    margin-bottom: 0;
-    font-size: 14px
-}
-
-.phrases-menu__search {
-    font-size: 14px;
-    padding: 9px 16px;
-    color: #807e7e;
-}
-
-.phrases-list__search {
-    max-width: 100%;
-    padding: 16px;
-}
-
-.phrases-list__search input {
-    width: 100%;
-    font-size: 24px;
-}
-
-.phrases-menu__openbtn img {
-    height: 30px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-.database__field {
-    min-width: 100%;
-    max-height: 150px important !;
-}
diff --git a/app/assets/stylesheets/rosetta/application.scss b/app/assets/stylesheets/rosetta/application.scss
new file mode 100644
index 0000000..2373155
--- /dev/null
+++ b/app/assets/stylesheets/rosetta/application.scss
@@ -0,0 +1,2 @@
+@import 'blocks/pharses-menu';
+@import 'blocks/phrases-list';
\ No newline at end of file
diff --git a/app/assets/stylesheets/rosetta/blocks/_pharses-menu.scss b/app/assets/stylesheets/rosetta/blocks/_pharses-menu.scss
new file mode 100644
index 0000000..ab8368b
--- /dev/null
+++ b/app/assets/stylesheets/rosetta/blocks/_pharses-menu.scss
@@ -0,0 +1,209 @@
+.phrases-menu {
+  height: 100%;
+  width: 350px;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  left: -350px;
+  background-color: #F5F5F5;
+  transition: 0.2s;
+  -webkit-box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0.2);
+
+  &__header {
+    height: 45px;
+    position: relative;
+  }
+
+  &__title {
+    margin: 0;
+    padding: 12px 9px;
+    font-size: 18px;
+    text-transform: uppercase;
+    border-bottom: 1px solid #dedede;
+  }
+
+  &__intro {
+    padding-left: 16px;
+    margin-bottom: 0;
+    font-size: 14px
+  }
+
+  &__search {
+    font-size: 14px;
+    padding: 9px 16px;
+    color: #807e7e;
+  }
+
+  &__block {
+    background-color: #f7fff3;
+    color: #000000;
+    display: block;
+    text-decoration: none;
+    padding: 10px 10px;
+    transition: 0.3s;
+    font-size: 12px;
+    margin-top: 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    border: 1px solid #dedede;
+
+    &.hide {
+        display: none;
+    }
+  }
+
+  &__content {
+    height: calc(100% - 46px);
+    padding: 2px 0 12px 0;
+    overflow: auto;
+    box-sizing: border-box;
+  }
+
+  &__list {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  &__key {
+    font-size: 12px;
+    font-weight: 900;
+    margin-bottom: 11px;
+  }
+
+  &__phrase {
+    font-size: 13px;
+    margin-bottom: 11px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+  }
+
+  &__path {
+    font-size: 12px;
+    color: #9a9a9a;
+    transition: 0.3s;
+  }
+
+  &__footer {
+    text-align: center;
+    max-width: 75%;
+    margin: 25px auto 0;
+
+    h1 {
+        font-size: 18px;
+        color: #7b7b7b;
+    }
+
+    p {
+        font-size: 12px;
+        color: #9a9a9a;
+        line-height: 1.4;
+    }
+
+    a {
+        color: inherit;
+        &:hover {
+            color: #e81d08;
+        }
+    }
+  }
+
+  &__openbtn {
+    img {
+        height: 30px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    }
+  }
+
+  &__closebtn {
+    transition: 0.3s;
+    display: none;
+
+    img {
+        height: 20px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+    }
+  }
+
+
+
+  &.match-phrase {
+    background-color: #eaffdd;
+
+    .phrases-menu__block {
+        background-color: #eaffdd;
+    }
+
+    .open-phrases-menu-btn {
+        background-color: #eaffdd;
+    }
+  }
+
+  &.unmatch-phrase {
+    background-color: #fae0dd;
+
+    .phrases-menu__block {
+        background-color: #fae0dd;
+    }
+
+    .open-phrases-menu-btn {
+        background-color: #fae0dd;
+    }
+  }
+
+  &.open {
+    left: 0px;
+
+    .phrases-menu__closebtn {
+        display: block;
+    }
+
+    .phrases-menu__openbtn {
+        display: none;
+    }
+  }
+
+}
+
+// Extras
+.open-phrases-menu-btn {
+    background-color: #F5F5F5;
+    color: #686866;
+    -webkit-box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.2);
+    display: block;
+    position: absolute;
+    right: -55px;
+    height: 45px;
+    width: 55px;
+    border-radius: 0 0 3px 0;
+    top: 0px;
+    cursor: pointer;
+}
+
+.phrases-menu:not(.local) .phrases-menu__block:hover {
+  color: #e81d08;
+  cursor: pointer;
+  border: 1px solid #e81d08;
+  text-decoration: none;
+}
+
+.phrases-menu:not(.local) .phrases-menu__block:hover .phrases-menu__path {
+  color: #e81d08;
+}
+
+
+
diff --git a/app/assets/stylesheets/rosetta/blocks/_phrases-list.scss b/app/assets/stylesheets/rosetta/blocks/_phrases-list.scss
new file mode 100644
index 0000000..be2ea1a
--- /dev/null
+++ b/app/assets/stylesheets/rosetta/blocks/_phrases-list.scss
@@ -0,0 +1,9 @@
+.phrases-list__search {
+  max-width: 100%;
+  padding: 16px;
+}
+
+.phrases-list__search input {
+  width: 100%;
+  font-size: 24px;
+}
diff --git a/app/views/rosetta/_footer.html.erb b/app/views/rosetta/_footer.html.erb
new file mode 100644
index 0000000..aed03e3
--- /dev/null
+++ b/app/views/rosetta/_footer.html.erb
@@ -0,0 +1,5 @@
+<div class="phrases-menu__footer">
+  <h1>Rosetta</h1>
+  <p>Rosetta is available as open source under the terms of the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a>.</p>
+  <p><a href="https://github.com/MarsBased/rosetta" target="_blank">View in Github</a></p>
+</div>
\ No newline at end of file
diff --git a/app/views/rosetta/_phrases_list.html.erb b/app/views/rosetta/_phrases_list.html.erb
new file mode 100644
index 0000000..77448e4
--- /dev/null
+++ b/app/views/rosetta/_phrases_list.html.erb
@@ -0,0 +1,9 @@
+<div id="phrases-list">
+  <div class="phrases-list__search">
+    <input v-model="query" type="text" id="search" placeholder="Search (examples: hello, he*)">
+  </div>
+
+  <div v-for="phrase in filteredPhrases">
+    <%= render "rosetta/#{repository_id}/actions_vue" %>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/views/rosetta/_translate_menu.html.erb b/app/views/rosetta/_translate_menu.html.erb
index 11743ab..e56a58d 100644
--- a/app/views/rosetta/_translate_menu.html.erb
+++ b/app/views/rosetta/_translate_menu.html.erb
@@ -1,86 +1,34 @@
 <% if rosetta? %>
   <%= stylesheet_link_tag 'rosetta/application' %>
+  <%= javascript_include_tag 'rosetta/application' %>
 
-  <div id="phrasesMenu" class="phrases-menu <%= Rosetta.repository.id %>">
-    <div class="open-phrases-menu-btn" onclick="toggleNav()">
+  <div id="phrasesMenu" v-bind:class="{ open: menuOpened }" class="phrases-menu <%= Rosetta.repository.id %>">
+    <div class="open-phrases-menu-btn" v-on:click="toggleNav">
       <div class="phrases-menu__openbtn">
         <%= image_tag('rosetta/language_icon.svg') %>
       </div>
+
       <div class="phrases-menu__closebtn">
         <%= image_tag('rosetta/close.svg') %>
       </div>
     </div>
+
     <div class="phrases-menu__header">
       <h1 class="phrases-menu__title">
         <%= Rosetta.repository.label %> <b>[<%= Rosetta.locale %>]</b>
       </h1>
+      <%= link_to 'All Phrases', rosetta.phrases_path %>
     </div>
+
     <div class="phrases-menu__content">
-      <p class="phrases-menu__intro">
-        Select any text in the page to search the corresponding translation.
-      </p>
-      <div class="phrases-menu__search"></div>
-      <div class="phrases-menu__list">
-        <p><%= link_to 'View all phrases', rosetta.phrases_path, target: :blank %></p>
+      <%= render 'rosetta/phrases_list', repository_id: Rosetta.repository.id %>
 
-        <% Rosetta.phrases.each do |phrase| %>
-          <%= render "rosetta/#{Rosetta.repository.id}/actions",
-                     phrase: phrase %>
-        <% end %>
-      </div>
-      <div class="phrases-menu__footer">
-        <h1>Rosetta</h1>
-        <p>Rosetta is available as open source under the terms of the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a>.</p>
-        <p><a href="https://github.com/MarsBased/rosetta" target="_blank">View in Github</a></p>
-      </div>
+      <%= render 'rosetta/footer' %>
     </div>
   </div>
 
-  <script type="text/javascript">
-    /* Toggle the Translate menu */
-    $( document ).ready(function() {
-      var outPhrasesMenu = true;
-
-      var searchSelectedText = function(){
-        var text = window.getSelection().toString();
-        if (text != ''){
-          var $matches = $( "div:contains('"+text+"')" ).parent('.phrases-menu__block');
-
-          $('.phrases-menu__block').addClass('hide');
-          $matches.removeClass('hide');
-          $('.phrases-menu__search').html('<u>Search</u>: ' + text);
-
-          if($matches.length > 0){
-            $('.phrases-menu').addClass('match-phrase');
-          }else{
-            $('.phrases-menu').addClass('unmatch-phrase');
-            $('.phrases-menu').removeClass('match-phrase');
-          }
-        }else{
-          $('.phrases-menu__block').removeClass('hide');
-          $('.phrases-menu__search').html('');
-          $('.phrases-menu').removeClass('unmatch-phrase');
-          $('.phrases-menu').removeClass('match-phrase');
-        }
-      }
-      $('*').mouseup(function() {
-        if(outPhrasesMenu){
-          searchSelectedText();
-        }
-      });
-
-      $('#phrasesMenu').on('mouseenter', function(e){
-        console.log('#phrasesMenu', 'mouseenter');
-        outPhrasesMenu = false;
-      })
-
-      $('#phrasesMenu').on('mouseleave', function(e){
-        console.log('#phrasesMenu', 'mouseleave');
-        outPhrasesMenu = true;
-      })
-    });
-    function toggleNav() {
-      document.getElementById("phrasesMenu").classList.toggle("open");
-    }
+  <script type="application/javascript">
+    var phrases = <%= Rosetta.phrases.map(&:serialize).to_json.html_safe %>;
+    initPhrasesList('#phrasesMenu', phrases);
   </script>
 <% end %>
diff --git a/app/views/rosetta/database/_actions.html.erb b/app/views/rosetta/database/_actions.html.erb
deleted file mode 100644
index b4f8111..0000000
--- a/app/views/rosetta/database/_actions.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="phrases-menu__block">
-  <div class="phrases-menu__key">
-    <%= phrase.code %>
-  </div>
-  <div class="phrases-menu__phrase">
-    <%= form_tag(rosetta.database_repository_phrase_path(id: phrase.code), method: :put, id: phrase.code) do %>
-      <%= hidden_field_tag(:current_path, url_for) %>
-      <%= text_area_tag(:value, phrase.text, id: "#{phrase.code}_value", class: 'database__field') %>
-      <%= submit_tag("Update", id: "#{phrase.code}_submit") %>
-    <% end %>
-  </div>
-</div>
diff --git a/app/views/rosetta/database/_actions_vue.html b/app/views/rosetta/database/_actions_vue.html
deleted file mode 100644
index cc9826b..0000000
--- a/app/views/rosetta/database/_actions_vue.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="phrases-menu__block">
-  <div class="phrases-menu__key">
-    {{ phrase.code }}
-  </div>
-  <div class="phrases-menu__phrase">
-    TODO
-  </div>
-</div>
diff --git a/app/views/rosetta/database/_actions_vue.html.erb b/app/views/rosetta/database/_actions_vue.html.erb
new file mode 100644
index 0000000..e3a1d86
--- /dev/null
+++ b/app/views/rosetta/database/_actions_vue.html.erb
@@ -0,0 +1,20 @@
+<div v-bind:id="phrase.code" class="phrases-menu__block">
+  <div class="phrases-menu__key">
+    {{ phrase.code }}
+  </div>
+
+  <div class="phrases-menu__phrase">
+    <form v-bind:id="phrase.code" v-bind:action="<%= database_repository_phrase_vue_path %>" accept-charset="UTF-8" method="post">
+      <input name="utf8" type="hidden" value="✓">
+      <input type="hidden" name="_method" value="put">
+      <%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
+      <input type="hidden" name="current_path" id="current_path" v-bind:value="'<%= url_for %>#' + phrase.code">
+      <textarea name="value" v-bind:id="phrase.code + '_value'" class="database__field">{{ phrase.text }}</textarea>
+      <input type="submit" name="commit" value="Update" v-bind:id="phrase.code + '_submit'" data-disable-with="Update">
+    </form>
+  </div>
+
+  <div class="phrases-menu__phrase_additional_actions">
+    <%= render 'rosetta/database/additional_actions' %>
+  </div>
+</div>
diff --git a/app/views/rosetta/database/_additional_actions.html.erb b/app/views/rosetta/database/_additional_actions.html.erb
new file mode 100644
index 0000000..9d697a4
--- /dev/null
+++ b/app/views/rosetta/database/_additional_actions.html.erb
@@ -0,0 +1 @@
+<!-- Overwrite this file in your project to add your custom actions -->
\ No newline at end of file
diff --git a/app/views/rosetta/local/_actions.html.erb b/app/views/rosetta/local/_actions.html.erb
deleted file mode 100644
index 3f0bcec..0000000
--- a/app/views/rosetta/local/_actions.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="phrases-menu__block">
-  <div class="phrases-menu__key">
-    <%= phrase.code %>
-  </div>
-
-  <div class="phrases-menu__phrase">
-    <%= phrase.text %>
-  </div>
-
-  <div class="phrases-menu__path">
-    <%= phrase.repository_link %>
-  </div>
-</div>
diff --git a/app/views/rosetta/onesky/_actions.html.erb b/app/views/rosetta/onesky/_actions.html.erb
deleted file mode 100644
index 92e24b2..0000000
--- a/app/views/rosetta/onesky/_actions.html.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-<%= link_to(phrase.repository_link, target: '_blank', class: 'phrases-menu__block')  do %>
-  <div class="phrases-menu__actions">
-    <div class="phrases-menu__key">
-      <%= phrase.code %>
-    </div>
-
-    <div class="phrases-menu__phrase">
-      <%= phrase.text %>
-    </div>
-  </div>
-<% end %>
diff --git a/app/views/rosetta/phrases/index.html.erb b/app/views/rosetta/phrases/index.html.erb
index e314ea0..dc53296 100644
--- a/app/views/rosetta/phrases/index.html.erb
+++ b/app/views/rosetta/phrases/index.html.erb
@@ -4,15 +4,9 @@
   </h1>
 </div>
 
-<div id="phrases-list">
-  <div class="phrases-list__search">
-    <input v-model="query" type="text" id="search" placeholder="Search (examples: hello, he*)">
-  </div>
+<%= render 'rosetta/phrases_list', repository_id: Rosetta.repository.id %>
 
-  <div v-for="phrase in filteredPhrases">
-    <%= render "rosetta/#{Rosetta.repository.id}/actions_vue" %>
-  </div>
-</div>
+<%= render 'rosetta/footer' %>
 
 <script type="application/javascript">
   var phrases = <%= @phrases.map(&:serialize).to_json.html_safe %>;
diff --git a/bin/rspec b/bin/rspec
new file mode 100755
index 0000000..a6c7852
--- /dev/null
+++ b/bin/rspec
@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'rspec' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+bundle_binstub = File.expand_path("../bundle", __FILE__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("rspec-core", "rspec")
diff --git a/lib/rosetta.rb b/lib/rosetta.rb
index e26c185..01356ee 100644
--- a/lib/rosetta.rb
+++ b/lib/rosetta.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require 'i18n'
+require 'sass-rails'
 require 'request_store'
 
 require 'rosetta/core_ext/dig'
@@ -12,6 +13,8 @@
 require 'rosetta/repository'
 require 'rosetta/controller_additions'
 
+require 'rosetta/backend_extras'
+
 require 'rosetta/repositories/database'
 require 'rosetta/repositories/local'
 require 'rosetta/repositories/onesky'
@@ -30,11 +33,14 @@ def add_phrase(**args)
     end
 
     def fetch_all_phrases(locale: I18n.default_locale)
-      translations = I18n.backend.translations(do_init: true).fetch(locale.to_sym, {})
+      backend_extra = backend_extras
 
-      I18n.with_locale(locale.to_sym) do
-        [].tap { |phrases| build_phrases_from_translations(translations, phrases) }
+      output = []
+      backend_extra.translates_list(locale: locale).each do |key, value|
+        repository_link = config.repository.build_link(key.split('.'), locale: locale)
+        output << Phrase.new(key.split('.'), value, repository_link)
       end
+      output
     end
 
     def phrases
@@ -59,18 +65,6 @@ def disable
 
     private
 
-    def build_phrases_from_translations(translations, phrases, current_key = [])
-      translations.each do |key, value|
-        if value.is_a? Hash
-          build_phrases_from_translations(value, phrases, current_key + [key])
-        else
-          next if value.blank?
-
-          phrases << build_phrase(keys: current_key + [key], phrase: value)
-        end
-      end
-    end
-
     def build_phrase(**args)
       fail ArgumentError, 'missing keys argument' if args[:keys].blank?
       fail ArgumentError, 'missing phrase argument' if args[:phrase].blank?
@@ -91,6 +85,18 @@ def request
       RequestStore.store[:rosetta] ||= {}
     end
 
+    def backend_extras
+      backend = I18n.backend
+
+      if backend.class == I18n::Backend::ActiveRecord
+        BackendExtras::ActiveRecord.new
+      elsif backend.class == I18n::Backend::Simple
+        BackendExtras::Simple.new
+      elsif backend.class == I18n::Backend::Chain
+        BackendExtras::Chain.new
+      end
+    end
+
   end
 end
 
diff --git a/lib/rosetta/backend_extras.rb b/lib/rosetta/backend_extras.rb
new file mode 100644
index 0000000..c733df3
--- /dev/null
+++ b/lib/rosetta/backend_extras.rb
@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Rosetta
+  module BackendExtras
+    class Base
+
+      attr_reader :backend
+
+      def initialize(backend: I18n.backend)
+        @backend = backend
+      end
+
+    end
+
+    class Simple < Base
+
+      def translates_list(locale: I18n.default_locale)
+        translations = backend.translations(do_init: true).fetch(locale.to_sym, {})
+
+        {}.tap { |phrases| build_phrases_from_translations(translations, phrases) }
+      end
+
+      private
+
+      def build_phrases_from_translations(translations, phrases, current_key = [])
+        translations.each do |key, value|
+          if value.is_a? Hash
+            build_phrases_from_translations(value, phrases, current_key + [key])
+          else
+            next if value.blank?
+
+            phrases[(current_key + [key]).join('.')] = value
+          end
+        end
+      end
+
+    end
+
+    class ActiveRecord < Base
+
+      def translates_list(locale: I18n.default_locale)
+        {}.tap do |phrases|
+          translation_klass.where(locale: locale).find_each do |translation|
+            phrases[translation.key] = translation.value
+          end
+        end
+      end
+
+      private
+
+      def translation_klass
+        I18n::Backend::ActiveRecord::Translation
+      end
+
+    end
+
+    class Chain < Base
+
+      def translates_list(locale: I18n.default_locale)
+        output = {}
+        backend.backends.reverse_each do |chained_backend|
+          output = output.merge(backend_factory(chained_backend)
+                         .translates_list(locale: locale))
+        end
+        output
+      end
+
+      private
+
+      def backend_factory(backend_to_factory)
+        if backend_to_factory.class == I18n::Backend::ActiveRecord
+          ActiveRecord.new(backend: backend_to_factory)
+        elsif backend_to_factory.class == I18n::Backend::Simple
+          Simple.new(backend: backend_to_factory)
+        end
+      end
+
+    end
+  end
+end
diff --git a/lib/rosetta/controller_additions.rb b/lib/rosetta/controller_additions.rb
index 61c9166..0514cc8 100644
--- a/lib/rosetta/controller_additions.rb
+++ b/lib/rosetta/controller_additions.rb
@@ -7,6 +7,7 @@ module ControllerAdditions
     included do
       helper_method :rosetta?
       helper_method :rosetta_menu
+      helper_method :database_repository_phrase_vue_path
     end
 
     def enable_rosetta
@@ -20,6 +21,11 @@ def rosetta?
     def rosetta_menu
       'rosetta/translate_menu'
     end
+
+    def database_repository_phrase_vue_path
+      base_path = rosetta.database_repository_phrase_path('__').gsub('__', '')
+      "'#{base_path}' + phrase.code "
+    end
   end
 end
 
diff --git a/rosetta.gemspec b/rosetta.gemspec
index adf2ab3..8a0ea44 100644
--- a/rosetta.gemspec
+++ b/rosetta.gemspec
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 $:.push File.expand_path('lib', __dir__)
 
 require 'rosetta/version'
@@ -15,16 +17,17 @@ Gem::Specification.new do |s|
   s.files = Dir['{app,config,db,lib}/**/*', 'MIT-LICENSE', 'Rakefile', 'README.md']
 
   s.add_dependency 'rails'
+  s.add_dependency 'sass-rails'
   s.add_dependency 'request_store'
 
-  # Development/Test dependencies
-  s.add_development_dependency 'capybara'
-  s.add_development_dependency 'capybara-webkit'
-  s.add_development_dependency 'figaro'
+  # Development dependencies
   s.add_development_dependency 'pry-rails'
-  s.add_development_dependency 'rspec-its'
-  s.add_development_dependency 'rspec-rails'
   s.add_development_dependency 'rubocop'
   s.add_development_dependency 'sqlite3'
-  s.add_development_dependency 'database_cleaner'
+
+  # Test dependencies
+  s.add_development_dependency 'capybara'
+  s.add_development_dependency 'rspec-its'
+  s.add_development_dependency 'rspec-rails'
+  s.add_development_dependency 'selenium-webdriver'
 end
diff --git a/spec/dummy/config/application.rb b/spec/dummy/config/application.rb
index ca53ee9..14eeae1 100644
--- a/spec/dummy/config/application.rb
+++ b/spec/dummy/config/application.rb
@@ -13,9 +13,8 @@ class Application < Rails::Application
     config.load_defaults 5.1
     config.i18n.load_path += Dir["#{Rails.root}/config/locales/**/*.{rb,yml}"]
 
-    # Settings in config/environments/* take precedence over those specified here.
-    # Application configuration should go into files in config/initializers
-    # -- all .rb files in that directory are automatically loaded.
-
+    config.active_record.sqlite3.represent_boolean_as_integer = true
   end
 end
+
+
diff --git a/spec/dummy/config/initializers/rosetta.rb b/spec/dummy/config/initializers/rosetta.rb
index bc3a897..4e02df7 100644
--- a/spec/dummy/config/initializers/rosetta.rb
+++ b/spec/dummy/config/initializers/rosetta.rb
@@ -1,24 +1,25 @@
+# frozen_string_literal: true
+
 require 'i18n/backend/active_record'
 
 # Use this hook to configure the repository and other Rosetta options.
-Rosetta.setup do |_config|
+Rosetta.setup do |config|
   # Uncomment the following lines to use the OneSky repository.
   # config.repository = Rosetta::Repositories::Onesky
   # config.onesky.project_id = ENV['ONESKY_PROJECT_ID']
   # config.onesky.subdomain = ENV['ONESKY_SUBDOMAIN']
 
   # Uncomment the following lines to use the Local repository.
-  # config.repository = Rosetta::Repositories::Local
-end
-
-Translation = I18n::Backend::ActiveRecord::Translation
+  config.repository = Rosetta::Repositories::Database.new
+  Translation = I18n::Backend::ActiveRecord::Translation
 
-if Translation.table_exists?
-  I18n.backend = I18n::Backend::ActiveRecord.new
+  if Translation.table_exists?
+    I18n.backend = I18n::Backend::ActiveRecord.new
 
-  I18n::Backend::ActiveRecord.send(:include, I18n::Backend::Memoize)
-  I18n::Backend::Simple.send(:include, I18n::Backend::Memoize)
-  I18n::Backend::Simple.send(:include, I18n::Backend::Pluralization)
+    I18n::Backend::ActiveRecord.send(:include, I18n::Backend::Memoize)
+    I18n::Backend::Simple.send(:include, I18n::Backend::Memoize)
+    I18n::Backend::Simple.send(:include, I18n::Backend::Pluralization)
 
-  I18n.backend = I18n::Backend::Chain.new(I18n.backend, I18n::Backend::Simple.new)
+    I18n.backend = I18n::Backend::Chain.new(I18n.backend, I18n::Backend::Simple.new)
+  end
 end
diff --git a/spec/rosetta/backend_extras_spec.rb b/spec/rosetta/backend_extras_spec.rb
new file mode 100644
index 0000000..262ce77
--- /dev/null
+++ b/spec/rosetta/backend_extras_spec.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Rosetta::BackendExtras::Simple do
+  describe '.translates_list' do
+    it do
+      expect(described_class.new(backend: I18n::Backend::Simple.new).translates_list['samples.index.hello']).to eq 'Hello world!!'
+    end
+  end
+end
+
+RSpec.describe Rosetta::BackendExtras::ActiveRecord do
+  describe '.translates_list' do
+    it do
+      I18n::Backend::ActiveRecord::Translation.create(locale: 'en', key: 'samples.goodbye', value: 'Goodbye!!')
+      expect(described_class.new(backend: I18n::Backend::ActiveRecord.new).translates_list['samples.goodbye']).to eq 'Goodbye!!'
+    end
+  end
+end
+
+RSpec.describe Rosetta::BackendExtras::Chain do
+  describe '.translates_list' do
+    it do
+      I18n::Backend::ActiveRecord::Translation.create(locale: 'en', key: 'samples.goodbye', value: 'Goodbye!!')
+      I18n::Backend::ActiveRecord::Translation.create(locale: 'en', key: 'samples.index.hello', value: 'Hi!!')
+      backend = I18n::Backend::Chain.new(I18n::Backend::ActiveRecord.new, I18n::Backend::Simple.new)
+
+      expect(described_class.new(backend: backend).translates_list['samples.index.hello']).to eq 'Hi!!'
+      expect(described_class.new(backend: backend).translates_list['samples.goodbye']).to eq 'Goodbye!!'
+    end
+  end
+end
diff --git a/spec/rosetta/repository/local_spec.rb b/spec/rosetta/repository/local_spec.rb
index 461f433..9906058 100644
--- a/spec/rosetta/repository/local_spec.rb
+++ b/spec/rosetta/repository/local_spec.rb
@@ -16,6 +16,10 @@ module Repositories
             I18n.load_path << file_fixture('invalid.yml')
           end
 
+          after(:each) do
+            I18n.load_path.delete(file_fixture('invalid.yml'))
+          end
+
           it 'raises an exception' do
             expect do
               subject.build_link(%w[not_found])
diff --git a/spec/rosetta/features/database_repository_spec.rb b/spec/rosetta/system/database_repository_spec.rb
similarity index 95%
rename from spec/rosetta/features/database_repository_spec.rb
rename to spec/rosetta/system/database_repository_spec.rb
index a7e2c1c..b15e43d 100644
--- a/spec/rosetta/features/database_repository_spec.rb
+++ b/spec/rosetta/system/database_repository_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-feature 'Onesky repository' do
+describe 'Onesky repository', type: :system do
   before { visit database_samples_path }
 
   scenario 'show the translations in yml file', js: true do
diff --git a/spec/rosetta/features/local_repository_spec.rb b/spec/rosetta/system/local_repository_spec.rb
similarity index 89%
rename from spec/rosetta/features/local_repository_spec.rb
rename to spec/rosetta/system/local_repository_spec.rb
index 6776d0b..d6f2a02 100644
--- a/spec/rosetta/features/local_repository_spec.rb
+++ b/spec/rosetta/system/local_repository_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-feature 'Local repository' do
+describe 'Local repository', type: :system do
   before { visit local_samples_path }
 
   scenario 'show the translations', js: true do
diff --git a/spec/rosetta/features/menu_spec.rb b/spec/rosetta/system/menu_spec.rb
similarity index 79%
rename from spec/rosetta/features/menu_spec.rb
rename to spec/rosetta/system/menu_spec.rb
index 72c934f..35b3d12 100644
--- a/spec/rosetta/features/menu_spec.rb
+++ b/spec/rosetta/system/menu_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-feature 'Translations menu' do
+describe 'Translations menu', type: :system do
   before { visit local_samples_path }
 
   scenario 'open the menu', js: true do
diff --git a/spec/rosetta/features/onesky_repository_spec.rb b/spec/rosetta/system/onesky_repository_spec.rb
similarity index 92%
rename from spec/rosetta/features/onesky_repository_spec.rb
rename to spec/rosetta/system/onesky_repository_spec.rb
index 3eec560..62b1e54 100644
--- a/spec/rosetta/features/onesky_repository_spec.rb
+++ b/spec/rosetta/system/onesky_repository_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-feature 'Onesky repository' do
+describe 'Onesky repository', type: :system do
   before do
     ENV['ONESKY_PROJECT_ID'] = '123'
     ENV['ONESKY_SUBDOMAIN'] = 'foo'
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
index b04385a..0282269 100644
--- a/spec/spec_helper.rb
+++ b/spec/spec_helper.rb
@@ -1,33 +1,27 @@
 # frozen_string_literal: true
 
+ENV['RAILS_ENV'] ||= 'test'
 require File.expand_path('../dummy/config/environment', __FILE__)
+
 require 'rspec/rails'
 require 'rspec/its'
-require 'capybara/rspec'
-require 'capybara/webkit'
-require 'database_cleaner'
-
-Capybara.javascript_driver = :webkit
 
 RSpec.configure do |config|
-  config.include Capybara::DSL
-  config.include Capybara::RSpecMatchers
-
   config.before(:each) do
+    Translation.delete_all
+
     Rosetta.config.set_defaults!
     Rosetta.enable
   end
 
-  config.before(:each) do |example|
-    DatabaseCleaner.strategy = example.metadata[:js] ? :truncation : :transaction
-    DatabaseCleaner.start
+  config.before(:each, type: :system) do
+    driven_by :rack_test
   end
 
-  config.append_after(:each) do
-    DatabaseCleaner.clean
-  end
-end
+  config.before(:each, type: :system, js: true) do
+    # Silent puma messages when execute :js tests (rspec 3.7)
+    Capybara.server = :puma, { Silent: true }
 
-Capybara.configure do |config|
-  config.ignore_hidden_elements = false
+    driven_by :selenium_chrome_headless
+  end
 end