diff --git a/js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js b/js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js
index 01880cf89b..0903bc0683 100644
--- a/js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js
+++ b/js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js
@@ -69,6 +69,7 @@ arangoDatabase, btoa, _*/
     initialize: function () {
       var self = this;
       this.dygraphConfig = window.dygraphConfig;
+      window.modalView = new window.ModalView();
       this.initial = this.planScenario;
       this.isCheckingUser = false;
       this.bind('all', function(trigger, args) {
@@ -164,23 +165,10 @@ arangoDatabase, btoa, _*/
         return;
       }
 
-      var statisticsDescriptionCollection = new window.StatisticsDescriptionCollection();
-      statisticsDescriptionCollection.fetch({
-        async: false,
-        beforeSend: this.addAuth.bind(this)
-      });
-      var statisticsCollection = new window.StatisticsCollection();
-      if (this.dashboardView) {
-        this.dashboardView.stopUpdating();
-      }
-      this.dashboardView = null;
       server.addAuth = this.addAuth.bind(this);
       this.dashboardView = new window.ServerDashboardView({
-        collection: statisticsCollection,
-        description: statisticsDescriptionCollection,
-        documentStore: new window.arangoDocuments(),
-        server : server,
-        dygraphConfig : this.dygraphConfig
+          dygraphConfig: window.newDygraphConfig,
+          serverToShow : this.serverToShow
       });
       this.dashboardView.render();
     }
diff --git a/js/apps/system/aardvark/clusterFrontend/js/views/dbServerDashboardView.js b/js/apps/system/aardvark/clusterFrontend/js/views/dbServerDashboardView.js
index 650d13542b..88103c270a 100644
--- a/js/apps/system/aardvark/clusterFrontend/js/views/dbServerDashboardView.js
+++ b/js/apps/system/aardvark/clusterFrontend/js/views/dbServerDashboardView.js
@@ -5,8 +5,7 @@
 (function() {
   "use strict";
 
-  window.ServerDashboardView = window.dashboardView.extend({
-    el: "#dbServerModal",
+  window.ServerDashboardView = window.newDashboardView.extend({
     modal : true,
 
     hide: function() {
@@ -15,9 +14,26 @@
     },
 
     render: function() {
-      window.dashboardView.prototype.render.bind(this)();
-      $(this.el).modal("show");
-      $(this.el).on("hidden", this.hide.bind(this));
+      var self = this;
+      window.modalView.hideFooter = true;
+      window.modalView.show(
+            "newDashboardView.ejs",
+            "",
+            undefined,
+            undefined,
+            undefined,
+            this.events
+
+      );
+      window.newDashboardView.prototype.render.bind(this)(true);
+      window.modalView.hideFooter = false;
+
+
+      $('#modal-dialog').on('hidden', function () {
+            self.hide();
+      });
+      $('.modal-body').css({"max-height": "90%" });
+      $('#modal-dialog').toggleClass("modalChartDetail", true);
     }
   });
 
diff --git a/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js b/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
index 80747a4e8a..efcd1b412c 100644
--- a/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
+++ b/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
@@ -540,7 +540,7 @@
         var serv = {};
         var cur;
         var coord;
-        $("#modalPlaceholder").html(this.modalDummy.render({}));
+        $("#waitModalLayer").remove();
         var ip_port = tar.attr("id");
         ip_port = ip_port.replace(/\-/g,'.');
         ip_port = ip_port.replace(/\_/g,':');
diff --git a/js/apps/system/aardvark/frontend/js/config/newDygraphConfig.js b/js/apps/system/aardvark/frontend/js/config/newDygraphConfig.js
index 24df6061e4..eeab9048c1 100644
--- a/js/apps/system/aardvark/frontend/js/config/newDygraphConfig.js
+++ b/js/apps/system/aardvark/frontend/js/config/newDygraphConfig.js
@@ -77,10 +77,10 @@
                     y: {
                         labelsKMG2: false,
                         axisLabelFormatter: function (y) {
-                            return y.toPrecision(2) + "%";
+                            return parseFloat(y.toPrecision(3) * 100) + "%";
                         },
                         valueFormatter: function (y) {
-                            return y.toPrecision(2) + "%";
+                            return parseFloat(y.toPrecision(3) * 100) + "%";
                         }
                     }
                 }
diff --git a/js/apps/system/aardvark/frontend/js/routers/router.js b/js/apps/system/aardvark/frontend/js/routers/router.js
index abed3171e7..1555cdc941 100644
--- a/js/apps/system/aardvark/frontend/js/routers/router.js
+++ b/js/apps/system/aardvark/frontend/js/routers/router.js
@@ -253,31 +253,6 @@
       this.dashboardView.render();
     },
 
-    /*
-     dashboard: function () {
-       this.naviView.selectMenuItem('dashboard-menu');
-       if (this.statisticsDescriptionCollection === undefined) {
-         this.statisticsDescriptionCollection = new window.StatisticsDescriptionCollection();
-         this.statisticsDescriptionCollection.fetch({
-           async: false
-         });
-       }
-       if (this.statistics === undefined) {
-         this.statisticsCollection = new window.StatisticsCollection();
-       }
-       if (this.dashboardView === undefined) {
-         this.dashboardView = new dashboardView({
-           collection: this.statisticsCollection,
-           description: this.statisticsDescriptionCollection,
-           documentStore: window.arangoDocumentsStore,
-           dygraphConfig: window.dygraphConfig
-         });
-       }
-       this.dashboardView.render();
-     },
-     */
-
-
     graph: function () {
       var self = this;
       window.arangoCollectionsStore.fetch({
diff --git a/js/apps/system/aardvark/frontend/js/views/newDashboardView.js b/js/apps/system/aardvark/frontend/js/views/newDashboardView.js
index c052caeffa..2c8730bcf8 100644
--- a/js/apps/system/aardvark/frontend/js/views/newDashboardView.js
+++ b/js/apps/system/aardvark/frontend/js/views/newDashboardView.js
@@ -139,7 +139,7 @@
 
         initialize: function () {
             this.dygraphConfig = this.options.dygraphConfig;
-
+            this.server = this.options.serverToShow;
         },
 
         updateCharts: function () {
@@ -234,7 +234,6 @@
             Object.keys(this.barCharts).forEach(function (a) {
                 self.history[a] = self.mergeBarChartData(self.barCharts[a], newData);
             });
-            console.log(newData.residentSizePercent, newData.residentSize);
             self.history.residentSizeChart =
                 [
                     {
@@ -313,7 +312,9 @@
                 url += "&filter=" + this.dygraphConfig.mapStatToFigure[figure].join();
                 this.alreadyCalledDetailChart.push(figure);
             }
-            console.log(url);
+            if (this.server) {
+                url += "&server=" + this.server.target;
+            }
             $.ajax(
                 url,
                 {async: false}
@@ -476,12 +477,10 @@
         },
 
         stopUpdating: function () {
-            console.log("stoping any update");
             this.isUpdating = false;
         },
 
         startUpdating: function () {
-            console.log("starting update");
             var self = this;
             if (self.isUpdating) {
                 return;
@@ -490,10 +489,8 @@
             self.timer = window.setInterval(function () {
                     self.getStatistics();
                     if (self.isUpdating === false) {
-                        console.log("no chart rendering");
                         return;
                     }
-                    console.log("chart rendering");
                     self.updateCharts();
                 },
                 self.interval
@@ -514,8 +511,10 @@
 
         template: templateEngine.createTemplate("newDashboardView.ejs"),
 
-        render: function () {
-            $(this.el).html(this.template.render());
+        render: function (modalView) {
+            if (!modalView)  {
+                $(this.el).html(this.template.render());
+            }
             this.getStatistics();
             this.prepareDygraphs();
             this.prepareD3Charts();
diff --git a/js/apps/system/aardvark/frontend/scss/_alert.scss b/js/apps/system/aardvark/frontend/scss/_alert.scss
index 15cc4af16f..058121d304 100644
--- a/js/apps/system/aardvark/frontend/scss/_alert.scss
+++ b/js/apps/system/aardvark/frontend/scss/_alert.scss
@@ -5,4 +5,4 @@
 textarea,
 .alert {
   border-radius: 0 !important;
-}
\ No newline at end of file
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_api.scss b/js/apps/system/aardvark/frontend/scss/_api.scss
index 1cceee6a69..acfcafd7d4 100644
--- a/js/apps/system/aardvark/frontend/scss/_api.scss
+++ b/js/apps/system/aardvark/frontend/scss/_api.scss
@@ -95,4 +95,4 @@
 
 .form-actions:after {
   clear: both;
-}
\ No newline at end of file
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_checkbox.scss b/js/apps/system/aardvark/frontend/scss/_checkbox.scss
index 014d43c218..5921dfa318 100644
--- a/js/apps/system/aardvark/frontend/scss/_checkbox.scss
+++ b/js/apps/system/aardvark/frontend/scss/_checkbox.scss
@@ -9,4 +9,4 @@
 
 .css-label-round {
   background-image: url('../img/dark-check-green-round.png');
-}
\ No newline at end of file
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_clusterStates.scss b/js/apps/system/aardvark/frontend/scss/_clusterStates.scss
index baa145a02d..019e05981a 100644
--- a/js/apps/system/aardvark/frontend/scss/_clusterStates.scss
+++ b/js/apps/system/aardvark/frontend/scss/_clusterStates.scss
@@ -67,4 +67,4 @@ a.dbserver {
 .cluster-connection-check-fail {
   color: $c-negative;
   margin-left: 20px;
-}
\ No newline at end of file
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_colors.scss b/js/apps/system/aardvark/frontend/scss/_colors.scss
index 5ebf2896ee..cd04b95940 100644
--- a/js/apps/system/aardvark/frontend/scss/_colors.scss
+++ b/js/apps/system/aardvark/frontend/scss/_colors.scss
@@ -121,4 +121,4 @@ $c-viewer-border: rgba(0, 0, 0, .125);
 
 $c-modal-header: #fff;
 $c-modal-table-border-bottom: #f7f3f2;
-$c-collection-tab-border-bottom: #888;
\ No newline at end of file
+$c-collection-tab-border-bottom: #888;
diff --git a/js/apps/system/aardvark/frontend/scss/_footer.scss b/js/apps/system/aardvark/frontend/scss/_footer.scss
index e7682e4447..945f9fcb21 100644
--- a/js/apps/system/aardvark/frontend/scss/_footer.scss
+++ b/js/apps/system/aardvark/frontend/scss/_footer.scss
@@ -42,4 +42,4 @@ div.footer-right {
     @extend %pull-right;
     color: $c-white;
   }
-}
\ No newline at end of file
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_modals.scss b/js/apps/system/aardvark/frontend/scss/_modals.scss
index f02a881a52..406579fa86 100644
--- a/js/apps/system/aardvark/frontend/scss/_modals.scss
+++ b/js/apps/system/aardvark/frontend/scss/_modals.scss
@@ -117,8 +117,8 @@
 
 .modalChartDetail {
   height: 500px;
-  position: fixed;
   padding-left: 10px;
+  position: fixed;
   width: 90%;
 }
 
@@ -268,4 +268,4 @@ pre.gv-object-view {
   }
 
 
-}
\ No newline at end of file
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_newDashboard.scss b/js/apps/system/aardvark/frontend/scss/_newDashboard.scss
index 27002b1d0c..683ea96697 100644
--- a/js/apps/system/aardvark/frontend/scss/_newDashboard.scss
+++ b/js/apps/system/aardvark/frontend/scss/_newDashboard.scss
@@ -4,8 +4,8 @@ $dashboard-padding: 28px;
 %dashboard-chart-box {
   @extend %pull-left;
   border-left: 1px solid $c-black;
+  cursor: pointer;
   margin-left: -1px;
-  cursor:pointer;
 
   &:first-child {
     border-left: 0;
@@ -16,6 +16,7 @@ $dashboard-padding: 28px;
 .detailChart {
   @extend %pull-left;
 }
+
 .dashboard-interior-chart {
   @extend %pull-left;
   height: $dashboard-height - $dashboard-padding;
@@ -26,6 +27,14 @@ $dashboard-padding: 28px;
   @extend %pull-left;
   height: $dashboard-height;
   padding-top: $dashboard-padding;
+
+}
+
+.modal-body {
+
+  .dashboard-large-chart {
+    width: 66.66666666%;
+  }
 }
 
 .dashboard-medium-chart {
@@ -35,6 +44,12 @@ $dashboard-padding: 28px;
   padding-top: $dashboard-padding;
 }
 
+.modal-body {
+  .dashboard-medium-chart {
+    width: 66.666666666%;
+  }
+}
+
 .dashboard-small-chart {
   @extend %dashboard-chart-box;
   @extend %pull-left;
@@ -42,34 +57,48 @@ $dashboard-padding: 28px;
   padding-top: $dashboard-padding;
 }
 
+.modal-body {
+  .dashboard-small-chart {
+    width: 33.33333333%;
+  }
+}
+
+
 .dashboard-tendency-chart {
   @extend %dashboard-chart-box;
   @extend %pull-left;
   height: $dashboard-height + $dashboard-padding;
 }
 
+.modal-body {
+  .dashboard-tendency-chart {
+    width: 33.33333%;
+  }
+}
+
+
 .dashboard-legend {
   @extend %pull-left;
   height: $dashboard-height;
   width: $legend-width;
 
   .dashboard-legend-inner {
-    padding-top: 20px;
     padding-left: 20px;
+    padding-top: 20px;
   }
 }
 
 .dashboard-detailLegend {
   @extend %pull-left;
   height: $dashboard-height;
-  width: $legend-width;
-  position: fixed;
   left: 90%;
+  position: fixed;
   top: 40%;
+  width: $legend-width;
 
   .dashboard-legend-inner {
-    padding-top: 20px;
     padding-left: 20px;
+    padding-top: 20px;
   }
 
 }
@@ -140,8 +169,8 @@ $dashboard-padding: 28px;
   @extend %dashboard-chart-box;
   font-size: 25px;
   height: ($dashboard-height + $dashboard-padding) / 2 - 36px - 36px - 2px;
-  top: 15%;
   text-align: center;
+  top: 15%;
   width: 50%;
 }
 
@@ -156,7 +185,8 @@ $dashboard-padding: 28px;
 .dashboard-figure {
   @extend %pull-left;
   margin-bottom: 10%;
-  margin-top: 7%;
   margin-left: 19%;
+  margin-top: 7%;
   text-align: center;
 }
+
diff --git a/js/apps/system/aardvark/frontend/scss/_statisticBar.scss b/js/apps/system/aardvark/frontend/scss/_statisticBar.scss
index 1083d4c449..34cce216eb 100644
--- a/js/apps/system/aardvark/frontend/scss/_statisticBar.scss
+++ b/js/apps/system/aardvark/frontend/scss/_statisticBar.scss
@@ -26,4 +26,4 @@
       fill: $c-state-ok;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_tooltips.scss b/js/apps/system/aardvark/frontend/scss/_tooltips.scss
index a7a6598538..df196b8193 100644
--- a/js/apps/system/aardvark/frontend/scss/_tooltips.scss
+++ b/js/apps/system/aardvark/frontend/scss/_tooltips.scss
@@ -18,4 +18,4 @@
 
 .tooltipInfoTh {
   width: 10%;
-}
\ No newline at end of file
+}
diff --git a/js/apps/system/aardvark/frontend/scss/cluster.css b/js/apps/system/aardvark/frontend/scss/cluster.css
index 4266f6a0b5..ea56d101dc 100644
--- a/js/apps/system/aardvark/frontend/scss/cluster.css
+++ b/js/apps/system/aardvark/frontend/scss/cluster.css
@@ -2753,9 +2753,10 @@ div.breadcrumb a.disabledBread {
   opacity: .4; }
 
 .modalChartDetail {
-  height: 570px;
-  margin-left: 0;
-  width: 70%; }
+  height: 500px;
+  padding-left: 10px;
+  position: fixed;
+  width: 90%; }
 
 .modal {
   border-radius: 0 !important; }
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index b9c94ef2ff..f671d2249d 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -2734,8 +2734,8 @@ div.breadcrumb a.disabledBread {
 
 .modalChartDetail {
   height: 500px;
-  position: fixed;
   padding-left: 10px;
+  position: fixed;
   width: 90%; }
 
 .modal {
@@ -3007,8 +3007,8 @@ pre.gv-object-view {
 
 .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency {
   border-left: 1px solid black;
-  margin-left: -1px;
-  cursor: pointer; }
+  cursor: pointer;
+  margin-left: -1px; }
   .dashboard-large-chart:first-child, .dashboard-medium-chart:first-child, .dashboard-small-chart:first-child, .dashboard-tendency-chart:first-child, .dashboard-subtitle-bar:first-child, .dashboard-tendency:first-child {
     border-left: 0;
     margin-left: 0; }
@@ -3020,33 +3020,45 @@ pre.gv-object-view {
   height: 250px;
   padding-top: 28px; }
 
+.modal-body .dashboard-large-chart {
+  width: 66.66666666%; }
+
 .dashboard-medium-chart {
   height: 250px;
   padding-top: 28px; }
 
+.modal-body .dashboard-medium-chart {
+  width: 66.666666666%; }
+
 .dashboard-small-chart {
   height: 250px;
   padding-top: 28px; }
 
+.modal-body .dashboard-small-chart {
+  width: 33.33333333%; }
+
 .dashboard-tendency-chart {
   height: 278px; }
 
+.modal-body .dashboard-tendency-chart {
+  width: 33.33333%; }
+
 .dashboard-legend {
   height: 250px;
   width: 200px; }
   .dashboard-legend .dashboard-legend-inner {
-    padding-top: 20px;
-    padding-left: 20px; }
+    padding-left: 20px;
+    padding-top: 20px; }
 
 .dashboard-detailLegend {
   height: 250px;
-  width: 200px;
-  position: fixed;
   left: 90%;
-  top: 40%; }
+  position: fixed;
+  top: 40%;
+  width: 200px; }
   .dashboard-detailLegend .dashboard-legend-inner {
-    padding-top: 20px;
-    padding-left: 20px; }
+    padding-left: 20px;
+    padding-top: 20px; }
 
 .dashboard-half-height-legend {
   height: 125px;
@@ -3095,8 +3107,8 @@ pre.gv-object-view {
 .dashboard-tendency {
   font-size: 25px;
   height: 65px;
-  top: 15%;
   text-align: center;
+  top: 15%;
   width: 50%; }
 
 .dashboard-row {
@@ -3107,8 +3119,8 @@ pre.gv-object-view {
 
 .dashboard-figure {
   margin-bottom: 10%;
-  margin-top: 7%;
   margin-left: 19%;
+  margin-top: 7%;
   text-align: center; }
 
 .dashboardModal {
diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json
index 7747380841..5f386a10b1 100644
--- a/js/apps/system/aardvark/manifest.json
+++ b/js/apps/system/aardvark/manifest.json
@@ -245,6 +245,9 @@
         "clusterFrontend/html/head.html.part",
         "frontend/js/templates/footerView.ejs",
         "frontend/js/templates/dashboardView.ejs",
+        "frontend/js/templates/newDashboardView.ejs",
+        "frontend/js/templates/modalBase.ejs",
+        "frontend/js/templates/modalGraph.ejs",
         "frontend/js/templates/dashboardDistributed.ejs",
         "frontend/js/templates/dashboardHttpGroup.ejs",
         "frontend/js/templates/lineChartDetailView.ejs",
@@ -275,7 +278,10 @@
         "frontend/js/arango/templateEngine.js",
         "frontend/js/views/footerView.js",
         "frontend/js/views/dashboardView.js",
+        "frontend/js/views/newDashboardView.js",
+        "frontend/js/views/modalView.js",
         "frontend/js/config/dygraphConfig.js",
+        "frontend/js/config/newDygraphConfig.js",
         "frontend/js/collections/arangoStatisticsDescriptionCollection.js",
         "clusterFrontend/js/views/**",
         "clusterFrontend/js/routers/**"
diff --git a/js/apps/system/aardvark/statistics.js b/js/apps/system/aardvark/statistics.js
index 920aee4bee..426067300b 100644
--- a/js/apps/system/aardvark/statistics.js
+++ b/js/apps/system/aardvark/statistics.js
@@ -824,6 +824,7 @@ function computeStatisticsSeries (start, attrs) {
 controller.get("full", function (req, res) {
   var start = req.params("start");
   var filter = req.params("filter");
+  var server = req.params("server");
   var attrs = null;
 
   if (start !== null && start !== undefined) {