diff --git a/package.json b/package.json
index 0d2dd69..6fb586d 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,12 @@
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.0",
     "gulp-license": "^1.1.0",
-    "gulp-riot": "^0.5.2",
+    "gulp-riot": "^1.1.1",
     "gulp-uglify": "^2.1.2",
     "gulp-useref": "^3.0.0",
     "material-design-lite": "^1.1",
     "pump": "^1.0.2",
-    "riot": "^2.3",
+    "riot": "^3.7.0",
     "riotgear-router": "^1.3.1",
     "uglify-js": "^3.0.28",
     "uglify-js-harmony": "^2.7.7"
diff --git a/src/scripts/script.js b/src/scripts/script.js
index 933bab4..cd6cb8b 100644
--- a/src/scripts/script.js
+++ b/src/scripts/script.js
@@ -107,8 +107,4 @@ registryUI.isImageRemoveActivated = true;
 registryUI.catalog = {};
 registryUI.taglist = {};
 
-riot.mount('add');
-riot.mount('change');
-riot.mount('remove');
-riot.mount('menu');
-riot.mount('app');
+riot.mount('*');
diff --git a/src/tags/add.tag b/src/tags/add.tag
index 07d3eb1..46ff0bd 100644
--- a/src/tags/add.tag
+++ b/src/tags/add.tag
@@ -15,11 +15,11 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <add>
-  <dialog id="add-server-dialog" class="mdl-dialog">
+  <dialog ref="add-server-dialog" class="mdl-dialog">
     <h4 class="mdl-dialog__title">Add your Server ?</h4>
     <div class="mdl-dialog__content">
       <div class="mdl-textfield mdl-js-textfield">
-        <input class="mdl-textfield__input" type="text" id="add-server-input">
+        <input class="mdl-textfield__input" type="text" ref="add-server-input">
         <label class="mdl-textfield__label" for="add-server-input">Server url</label>
       </div>
     </div>
@@ -32,13 +32,13 @@
     registryUI.addTag = registryUI.addTag || {};
     registryUI.addTag.update = this.update;
     this.on('updated', function () {
-      componentHandler.upgradeElements(this['add-server-dialog']);
-      registryUI.addTag.dialog = registryUI.addTag.dialog || document.querySelector('#add-server-dialog');
-      registryUI.addTag.addServer = registryUI.addTag.tileServerList || registryUI.addTag.dialog.querySelector('#add-server-input');
+      registryUI.addTag.dialog = this.refs['add-server-dialog'];
+      registryUI.addTag.addServer = this.refs['add-server-input'];
+      componentHandler.upgradeElements(registryUI.addTag.dialog);
       if (!registryUI.addTag.dialog.showModal) {
         dialogPolyfill.registerDialog(registryUI.addTag.dialog);
       }
-      this['add-server-input'].onkeyup = function (e) {
+      this.refs['add-server-input'].onkeyup = function (e) {
         // if keyCode is Enter
         if (e.keyCode == 13) {
           registryUI.addTag.add();
diff --git a/src/tags/app.tag b/src/tags/app.tag
index 500d135..b373d1c 100644
--- a/src/tags/app.tag
+++ b/src/tags/app.tag
@@ -16,7 +16,7 @@
 -->
 <app>
   <catalog if="{!rg.router.current || rg.router.current.name == 'home'}"></catalog>
-  <taglist if="{rg.router.current.name == 'taglist'}"></taglist>
+  <taglist if="{rg.router.current && rg.router.current.name == 'taglist'}"></taglist>
   <script>
 
     this.mixin('rg.router');
diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag
index 0f0c86c..29110a0 100644
--- a/src/tags/catalog.tag
+++ b/src/tags/catalog.tag
@@ -16,12 +16,12 @@
 -->
 <catalog>
   <!-- Begin of tag -->
-  <div id="catalog-tag" class="catalog">
+  <div ref="catalog-tag" class="catalog">
     <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
       <div class="mdl-card__title">
         <h2 class="mdl-card__title-text">Repositories of { registryUI.url() }</h2>
       </div>
-      <div id="catalog-spinner" hide="{ registryUI.catalog.loadend }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
+      <div ref="catalog-spinner" hide="{ registryUI.catalog.loadend }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
       <ul class="mdl-list" show="{ registryUI.catalog.loadend }">
         <li class="mdl-list__item mdl-menu__item" style="opacity: 1;" each="{ item in registryUI.catalog.repositories }" onclick="registryUI.catalog.go('{item}');">
           <span class="mdl-list__item-primary-content">
@@ -31,7 +31,7 @@
         </li>
       </ul>
     </div>
-    <div id="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar">
+    <div ref="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar">
       <div class="mdl-snackbar__text"></div>
       <button class="mdl-snackbar__action" type="button"></button>
     </div>
@@ -43,7 +43,7 @@
     registryUI.catalog.display = function () {
       var oReq = new Http();
       registryUI.catalog.createSnackbar = function (msg) {
-        var snackbar = document.querySelector('#error-snackbar');
+        var snackbar = registryUI.catalog.instance.refs['error-snackbar'];
         registryUI.catalog.error = msg;
         var data = {
           message: registryUI.catalog.error,
@@ -76,7 +76,7 @@
       oReq.send();
     };
     this.on('updated', function () {
-      componentHandler.upgradeElements(this['catalog-tag']);
+      componentHandler.upgradeElements(this.refs['catalog-tag']);
     });
     registryUI.catalog.go = function (image) {
       rg.router.go('taglist', {
diff --git a/src/tags/change.tag b/src/tags/change.tag
index 7829f23..5614a91 100644
--- a/src/tags/change.tag
+++ b/src/tags/change.tag
@@ -15,11 +15,11 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <change>
-  <dialog id="change-server-dialog" class="mdl-dialog">
+  <dialog ref="change-server-dialog" class="mdl-dialog">
     <h4 class="mdl-dialog__title">Change your Server ?</h4>
     <div class="mdl-dialog__content">
       <div class="mdl-textfield mdl-js-textfield">
-        <select class="mdl-textfield__input mdl-textfield__select" name="server-list" id="server-list">
+        <select class="mdl-textfield__input mdl-textfield__select" name="server-list" ref="server-list">
           <option each="{ url in registryUI.getRegistryServer() }" value={url}>{url}</option>
         </select>
       </div>
@@ -33,13 +33,13 @@
     registryUI.changeTag = registryUI.changeTag || {};
     registryUI.changeTag.update = this.update;
     this.on('updated', function () {
-      componentHandler.upgradeElements(this['change-server-dialog']);
-      registryUI.changeTag.dialog = registryUI.changeTag.dialog || document.querySelector('#change-server-dialog');
-      registryUI.changeTag.serverList = registryUI.changeTag.serverList || registryUI.changeTag.dialog.querySelector('#server-list');
+      componentHandler.upgradeElements(this.refs['change-server-dialog']);
+      registryUI.changeTag.dialog = registryUI.changeTag.dialog || this.refs['change-server-dialog'];
+      registryUI.changeTag.serverList = registryUI.changeTag.serverList || this.refs['server-list'];
       if (!registryUI.changeTag.dialog.showModal) {
         dialogPolyfill.registerDialog(registryUI.changeTag.dialog);
       }
-      this['server-list'].onkeyup = function (e) {
+      this.refs['server-list'].onkeyup = function (e) {
         // if keyCode is Enter
         if (e.keyCode == 13) {
           registryUI.changeTag.change();
diff --git a/src/tags/menu.tag b/src/tags/menu.tag
index e90b82a..e68bda0 100644
--- a/src/tags/menu.tag
+++ b/src/tags/menu.tag
@@ -15,8 +15,8 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <menu>
-  <div id="card-menu" class="mdl-card__menu">
-    <button id="registry-menu" name="registry-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+  <div ref="card-menu" id="card-menu" class="mdl-card__menu">
+    <button ref="registry-menu" name="registry-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
       <i class="material-icons">more_vert</i>
     </button>
     <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="registry-menu">
@@ -30,7 +30,7 @@
     registryUI.menuTag = registryUI.menuTag || {};
     registryUI.menuTag.update = this.update;
     this.on('updated', function () {
-      componentHandler.upgradeElements(this['card-menu']);
+      componentHandler.upgradeElements(this.refs['card-menu']);
     });
     registryUI.menuTag.update();
   </script>
diff --git a/src/tags/remove.tag b/src/tags/remove.tag
index dda3040..f9433bb 100644
--- a/src/tags/remove.tag
+++ b/src/tags/remove.tag
@@ -15,7 +15,7 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <remove>
-  <dialog id="remove-server-dialog" class="mdl-dialog">
+  <dialog ref="remove-server-dialog" class="mdl-dialog">
     <h4 class="mdl-dialog__title">Remove your Registry Server ?</h4>
     <div class="mdl-dialog__content">
       <div class="mdl-textfield mdl-js-textfield">
@@ -55,7 +55,7 @@
     };
 
     this.on('updated', function () {
-      registryUI.removeTag.dialog = this['remove-server-dialog'];
+      registryUI.removeTag.dialog = this.refs['remove-server-dialog'];
       if (!registryUI.removeTag.dialog.showModal) {
         dialogPolyfill.registerDialog(registryUI.removeTag.dialog);
       }
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 0a3513a..18904c9 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -16,7 +16,7 @@
 -->
 <taglist>
   <!-- Begin of tag -->
-  <div id="taglist-tag" class="taglist">
+  <div ref="taglist-tag" class="taglist">
     <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
       <div class="mdl-card__title">
         <a href="#" onclick="registryUI.taglist.back();">
@@ -24,7 +24,7 @@
         </a>
         <h2 class="mdl-card__title-text">Tags of { registryUI.url() + '/' + registryUI.taglist.name }</h2>
       </div>
-      <div id="taglist-spinner" hide="{ registryUI.taglist.loadend }" class="mdl-spinner mdl-js-spinner section-centerd is-active"></div>
+      <div ref="taglist-spinner" hide="{ registryUI.taglist.loadend }" class="mdl-spinner mdl-js-spinner section-centerd is-active"></div>
       <table class="mdl-data-table mdl-js-data-table full-table" show="{ registryUI.taglist.loadend }" style="border: none;">
         <thead>
           <tr>
@@ -44,7 +44,7 @@
         </tbody>
       </table>
     </div>
-    <div id="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar">
+    <div ref="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar">
       <div class="mdl-snackbar__text"></div>
       <button class="mdl-snackbar__action" type="button"></button>
     </div>
@@ -61,7 +61,7 @@
         registryUI.taglist.name = name;
         registryUI.taglist.instance.update();
         registryUI.taglist.createSnackbar = function (msg) {
-          var snackbar = document.querySelector('#error-snackbar');
+          var snackbar = registryUI.taglist.instance['error-snackbar'];
           registryUI.taglist.error = msg;
           var data = {
             message: registryUI.taglist.error,
@@ -98,7 +98,7 @@
     registryUI.taglist.display();
     registryUI.taglist.instance.update();
     this.on('updated', function () {
-      componentHandler.upgradeElements(this['taglist-tag']);
+      componentHandler.upgradeElements(this.refs['taglist-tag']);
     });
 
     registryUI.taglist.reverse = function () {