diff --git a/library-list.js b/library-list.js
index 81a10856..1e8f7c2d 100644
--- a/library-list.js
+++ b/library-list.js
@@ -1,4 +1,69 @@
-(function () {
+(function() {
+
+  var list = [
+    { type: 'todo', id: 'aurelia', label: 'DBMON Aurelia', url: '#' },
+    { type: 'naive', id: 'cycle', label: 'DBMON Cycle.js', url: './cycle'},
+    { type: 'odajs', id: 'odajs', url: './odajs', label: 'ODAJS'},
+    { type: 'naive', id: 'ember', url: './ember', label: 'DBMON Ember' },
+    { type: 'naive', id: 'angular', url: './angular', label: 'DBMON Angular' },
+    { type: 'naive', id: 'angular-light', url: './angular-light', label: 'DBMON Angular Light' },
+    { type: 'naive', id: 'angular2', url: './angular2', label: 'DBMON Angular 2.0 Alpha' },
+    { type: 'naive', id: 'react', url: './react', label: 'DBMON React' },
+    { type: 'naive', id: 'magjs', url: './magjs', label: 'DBMON MagJS' },
+    { type: 'naive', id: 'elem', url: './elem', label: 'DBMON elem' },
+    { type: 'naive', id: 'elem-vdom', url: './elem-vdom', label: 'DBMON elem-vdom' },
+    { type: 'naive', id: 'elm', url: './elm', label: 'DBMON elm' },
+    { type: 'naive', id: 'ractive', url: './ractive', label: 'DBMON Ractive' },
+    { type: 'naive', id: 'mithril', url: './mithril', label: 'DBMON Mithril' },
+    { type: 'naive', id: 'citot7', url: './cito+t7-precompiled', label: 'DBMON Cito+t7' },
+    { type: 'naive', id: 'inferno', url: './inferno', label: 'DBMON Inferno' },
+    { type: 'naive', id: 'riot', url: './riot', label: 'DBMON Riot.js' },
+    { type: 'optimized', id: 'riot', url: './riot/no-reorder.html', label: 'DBMON Riot.js ( no-reorder )' },
+    { type: 'naive', id: 'polymer', url: './polymer', label: 'DBMON Polymer 1.4' },
+    { type: 'naive', id: 'vanilla', url: './vanilla-simple', label: 'DBMON vanilla' },
+    { type: 'naive', id: 'dott', url: './dotT', label: 'DBMON dotT' },
+    { type: 'naive', id: 'canvas', url: './canvas', label: 'DBMON canvas' },
+    { type: 'naive', id: 'react-canvas', url: './react-canvas', label: 'DBMON react-canvas' },
+    { type: 'naive', id: 'sammy', url: './sammy', label: 'DBMON sammy' },
+    { type: 'naive', id: 'vue', url: './vue', label: 'DBMON Vue.js' },
+    { type: 'naive', id: 'backbone', url: './backbone', label: 'DBMON Backbone' },
+    { type: 'naive', id: 'backbone-marionette', url: './marionette', label: 'DBMON Backbone Marionette' },
+    { type: 'optimized', id: 'backbone-marionette', url: './marionette/opt.html', label: 'DBMON Backbone Marionette' },
+    { type: 'naive', id: 'knockout', url: './knockout', label: 'DBMON Knockout' },
+    { type: 'naive', id: 'regularjs', url: './regularjs', label: 'DBMON Regularjs' },
+    { type: 'naive', id: 'maskjs', url: './mask/index.html', label: 'DBMON MaskJS' },
+    { type: 'naive', id: 'matreshkajs', url: './matreshka/index.html', label: 'DBMON Matreshka.js' },
+    { type: 'naive', id: 'rotorjs', url: './rotorjs/index.html', label: 'DBMON RotorJS' },
+    { type: 'optimized', id: "cycle + snabbdom", label: "DBMON Cycle.js + Snabbdom", url: "./cycle-snabbdom"},
+    { type: 'optimized', id: 'motorcycle', label: 'DBMON Motorcycle.js', url: './motorcycle'},
+    { type: 'naive', id: 'domvm', url: './domvm/index.html', label: 'DBMON domvm' },
+    { type: 'naive', id: 'once', url: './once/index.html', label: 'DBMON once' },
+    { type: 'naive', id: 'ripple', url: './ripple/index.html', label: 'DBMON ripple' },
+    { type: 'naive', id: 'diffhtml', url: './diffhtml/index.html', label: 'DBMON diffHTML' },
+    { type: 'optimized', id: 'react', url: './react/opt.html', label: 'DBMON React' },
+    { type: 'optimized', id: 'preact', url: './preact', label: 'DBMON Preact' },
+    { type: 'naive', id: 'preact-functional', url: './preact/functional.html', label: 'DBMON Preact (Functional)' },
+    { type: 'optimized', id: 'angular', url: './angular/opt.html', label: 'DBMON Angular' },
+    { type: 'optimized', id: 'angular-light', url: './angular-light/opt.html', label: 'DBMON Angular Light' },
+    { type: 'optimized', id: 'angular2', url: './angular2/opt.html', label: 'DBMON Angular 2.0 Alpha' },
+    { type: 'optimized', id: 'angular-track-by', url: './angular-track-by', label: 'DBMON Angular (track by $index)' },
+    { type: 'optimized', id: 'elem', url: './elm/opt.html', label: 'DBMON elm' },
+    { type: 'optimized', id: 'vanilla', url: './vanilla-optimized', label: 'DBMON vanilla' },
+    { type: 'optimized', id: 'maskjs', url: './mask/index_opt.html', label: 'DBMON MaskJS' },
+    { type: 'optimized', id: 'vue', url: './vue/opt.html', label: 'DBMON Vue.js' },
+    { type: 'optimized', id: 'rotorjs', url: './rotorjs/with_thunks.html', label: 'DBMON RotorJS (with using VnodeImmutableThunk)' },
+    { type: 'naive', id: 're-frame', url: './re-frame/index.html', label: 're-frame (Reagent)' },
+    { type: 'naive', id: 'd3', url: './d3/index.html', label: 'DBMON D3' },
+    { type: 'naive', id: 'morphdom', url: './morphdom/index.html', label: 'DBMON Morphdom' },
+    { type: 'optimized', id: 'frzr', url: './frzr/index.html', label: 'DBMON FRZR' },
+    { type: 'naive', id: 'vidom', url: './vidom/index.html', label: 'DBMON vidom' },
+    { type: 'optimized', id: 'cycle + xstream', label: 'DBMON Cycle.js + xstream', url: './cycle-xstream' },
+    { type: 'naive', id: 'rionite', url: './rionite', label: 'DBMON Rionite' },
+    { type: 'naive', id: 'monkberry', url: './monkberry/index.html', label: 'DBMON Monkberry' },
+    { type: 'naive', id: 'simulacra', url: './simulacra/index.html', label: 'DBMON Simulacra' },
+    { type: 'optimized', id: 'simulacra', url: './simulacra/opt.html', label: 'DBMON Simulacra' },
+    { type: 'optimized', id: 'dio', url: './dio/index.html', label: 'DBMON DIO.js' }
+  ];
 
   function Library() {
     var url = this.props.lib.url;
@@ -13,5 +78,5 @@
     }));
   }
 
-  Elem.render(LibraryList, '#list', { array: List, name: '' });
-})();
+  Elem.render(LibraryList, '#list', { array: list, name: '' });
+})();
\ No newline at end of file
diff --git a/odajs/index.html b/odajs/index.html
new file mode 100644
index 00000000..2513b27b
--- /dev/null
+++ b/odajs/index.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+    <head>
+        <meta name="description" content="dbmon oda" />
+        <title>dbmon (ODA)</title>
+        <style>
+            body {
+                flex-direction: column;
+                color: #333;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                font-size: 14px;
+                line-height: 1.42857143;
+                margin: 0;
+            }
+            label {
+                display: inline-block;
+                font-weight: 700;
+                margin-bottom: 5px;
+            }
+            input[type=range] {
+                display: block;
+                width: 100%;
+            }
+
+        </style>
+    </head>
+    <body>
+        <oda-pref style="visibility: visible"></oda-pref>
+        <script src="../ENV.js"></script>
+        <script src="../lib/memory-stats.js"></script>
+        <script src="../lib/monitor.js"></script>
+        <!-- <script src="/lib/ga.js"></script>-->
+    </body>
+
+<script type="module">
+        import 'https://odajs.github.io/oda/oda.js';
+        ODA({
+            is: 'oda-pref',
+            template: `
+                <style>
+                    table {
+                        border-collapse: collapse;
+                        border-spacing: 0;
+                    }
+
+                    :before,
+                    :after {
+                        box-sizing: border-box;
+                    }
+
+                    .table>thead>tr>th,
+                    .table>tbody>tr>th,
+                    .table>tfoot>tr>th,
+                    .table>thead>tr>td,
+                    .table>tbody>tr>td,
+                    .table>tfoot>tr>td {
+                        border-top: 1px solid #ddd;
+                        line-height: 1.42857143;
+                        padding: 8px;
+                        vertical-align: top;
+                    }
+
+                    .table {
+                        width: 100%;
+                    }
+
+                    .table-striped>tbody>tr:nth-child(odd)>td,
+                    .table-striped>tbody>tr:nth-child(odd)>th {
+                        background: #f9f9f9;
+                    }
+
+                    .label {
+                        border-radius: .25em;
+                        color: #fff;
+                        display: inline;
+                        font-size: 75%;
+                        font-weight: 700;
+                        line-height: 1;
+                        padding: .2em .6em .3em;
+                        text-align: center;
+                        vertical-align: baseline;
+                        white-space: nowrap;
+                    }
+
+                    .label-success {
+                        background-color: #5cb85c;
+                    }
+
+                    .label-warning {
+                        background-color: #f0ad4e;
+                    }
+
+                    .popover {
+                        background-color: #fff;
+                        background-clip: padding-box;
+                        border: 1px solid #ccc;
+                        border: 1px solid rgba(0, 0, 0, .2);
+                        border-radius: 6px;
+                        box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+                        display: none;
+                        left: 0;
+                        max-width: 276px;
+                        padding: 1px;
+                        position: absolute;
+                        text-align: left;
+                        top: 0;
+                        white-space: normal;
+                        z-index: 1010;
+                    }
+
+                    .popover>.arrow:after {
+                        border-width: 10px;
+                        content: "";
+                    }
+
+                    .popover.left {
+                        margin-left: -10px;
+                    }
+
+                    .popover.left>.arrow {
+                        border-right-width: 0;
+                        border-left-color: rgba(0, 0, 0, .25);
+                        margin-top: -11px;
+                        right: -11px;
+                        top: 50%;
+                    }
+
+                    .popover.left>.arrow:after {
+                        border-left-color: #fff;
+                        border-right-width: 0;
+                        bottom: -10px;
+                        content: " ";
+                        right: 1px;
+                    }
+
+                    .popover>.arrow {
+                        border-width: 11px;
+                    }
+
+                    .popover>.arrow,
+                    .popover>.arrow:after {
+                        border-color: transparent;
+                        border-style: solid;
+                        display: block;
+                        height: 0;
+                        position: absolute;
+                        width: 0;
+                    }
+
+                    .popover-content {
+                        padding: 9px 14px;
+                    }
+
+                    .Query {
+                        position: relative;
+                    }
+
+                    .Query:hover .popover {
+                        display: block;
+                        left: -100%;
+                        width: 100%;
+                    }
+
+                </style>
+                <table class="table table-striped lastest-data">
+                    <tbody>
+                        <tr oda-for="(db, $index) in databases">
+                            <td class="dbname">{{db.dbname}}</td>
+                            <td class="query-count">
+                                <span :class="db.lastSample.countClassName">{{db.lastSample.nbQueries}} </span>
+                            </td>
+                            <td :for="(q, $index1) in db.lastSample.topFiveQueries" :class="q.elapsedClassName">
+                                {{q.formatElapsed}}
+                                <div class="popover left">
+                                    <div class="popover-content">{{q.query}}</div>
+                                    <div class="arrow"></div>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            `,
+            databases: [],
+            attached() {
+                setInterval(() => this.databases = ENV.generateData(Monitoring.renderRate.ping()).toArray(), ENV.timeout);
+            }
+        })
+    </script>
+</html>