diff --git a/Gruntfile.js b/Gruntfile.js
index f79e9567e..6c30bc28e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -181,6 +181,7 @@ module.exports = function(grunt) {
                     "d3.js": "d3/d3.js",
                     "underscore.js": "underscore/underscore.js",
                     "jquery.js": "jquery/dist/jquery.js",
+                    "modernizer.js": "modernizer/modernizr.js",
                     "js-schema.js": "js-schema/js-schema.debug.js",
                     "es5-shim.js": "es5-shim/es5-shim.js"
                 }
diff --git a/bower.json b/bower.json
index 78c8d0eb8..4d81b8d8e 100644
--- a/bower.json
+++ b/bower.json
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "jquery": "2.1.1",
+    "modernizer": "2.8.2",
     "js-schema": "0.7.0",
     "es5-shim": "latest"
   }
diff --git a/config/karma.conf.js b/config/karma.conf.js
index 799219119..281ec0e96 100644
--- a/config/karma.conf.js
+++ b/config/karma.conf.js
@@ -18,7 +18,8 @@ module.exports = function (config) {
             //'build/tauCharts.js',
             {pattern: 'test/utils/*.js', included: false},
             {pattern: 'css/tooltip.css', included: true},
-            {pattern: 'libs/**/*.js', included: false},
+            {pattern: 'css/layout.css', included: true},
+            {pattern: 'libs/**', included: false},
             {pattern: 'node_modules/chai/*.js', included: false},
             {pattern: 'tau_modules/**/*.js', included: false},
             {pattern: 'test/*test.js', included: false},
diff --git a/plugins/legend.js b/plugins/legend.js
index 1fe603fb6..ebdeef8a5 100644
--- a/plugins/legend.js
+++ b/plugins/legend.js
@@ -44,10 +44,11 @@
                 var color = this._unit.options.color;
                 var colorDimension = color.dimension;
                 var data = chart.getData();
-                var groups = _.groupBy(data, function (item) {
+                var keys = _.map(data, function (item) {
                     return item[colorDimension];
                 });
-                return _.keys(groups).reduce(function (colorMap, item) {
+            //    debugger
+                return _.unique(keys).reduce(function (colorMap, item) {
                     colorMap[item] = color.get(item);
                     return colorMap;
                 }, {});
diff --git a/prototype/dsl.html b/prototype/dsl.html
index b0ca1f30e..662fb8567 100644
--- a/prototype/dsl.html
+++ b/prototype/dsl.html
@@ -17,7 +17,8 @@
     <script src="dataTp.js"></script>
 
     <!-- css -->
-    <link href="../css/default.css" rel="stylesheet"/>
+    <link href="../css/layout.css" rel="stylesheet"/>
+    <link href="../css/legend.css" rel="stylesheet"/>
     <link href="../css/graphic-elements.css" rel="stylesheet"/>
     <link href="../css/tooltip.css" rel="stylesheet"/>
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css">
@@ -100,63 +101,51 @@
 <body>
 
 <div id="datetime-container" class="cc" style="width: 1605px">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="chart-container-extract" class="cc">
-    <div class="cc-empty"></div>
+    
 </div>
 
 <div id="chart-container-default" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="chart-priority-container-default" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="chart-priority-container-extract" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="parallel-container" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="facet-of-facets-container" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="scatter-fit-container" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="scatter-auto-scale-container" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="complex-container-default" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="complex-container-extract" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="bars-container" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="null-complex-object-container" class="cc">
-    <div class="cc-empty"></div>
 </div>
 
 <div id="no-data-container" class="cc">
-    <div class="cc-empty"></div>
 </div>
 <script src="../build/tauCharts.js"></script>
 <script src="../plugins/tooltip.js"></script>
 <script src="../plugins/highlighter.js"></script>
+<script src="../plugins/legend.js"></script>
 <script>
     var facet2x2 = {
         dimensions: {
@@ -313,8 +302,7 @@
                 {
                     type: 'ELEMENT.POINT',
                     color: 'effort',
-                    size: 'cycleTime',
-                    shape: null
+                    size: 'cycleTime'
                 }
             ]
         }
@@ -545,7 +533,8 @@
                 data: rawData,
                 spec: scatter,
                 plugins: [
-                    tauCharts.api.plugins.get('tooltip')({fields:['team', 'project', 'cycleTime', 'effort']})
+                    tauCharts.api.plugins.get('tooltip')({fields:['team', 'project', 'cycleTime', 'effort']}),
+                    tauCharts.api.plugins.get('legend')()
                 ]
             }).renderTo('#scatter-auto-scale-container');
 
diff --git a/src/elements/interval.js b/src/elements/interval.js
index 173daeb89..49b543840 100644
--- a/src/elements/interval.js
+++ b/src/elements/interval.js
@@ -31,7 +31,7 @@ var interval = function (node) {
     var options = node.options;
 
     var color = utilsDraw.generateColor(node);
-
+    node.options.color = color;
     var partition = node.partition();
 
     var categories = d3
diff --git a/src/elements/point.js b/src/elements/point.js
index fed430165..f3612d516 100644
--- a/src/elements/point.js
+++ b/src/elements/point.js
@@ -9,7 +9,7 @@ var point = function (node) {
     var yScale = options.yScale;
 
     var color = utilsDraw.generateColor(node);
-
+    node.options.color = color;
     var maxAxisSize = _.max([node.guide.x.tickFontHeight, node.guide.y.tickFontHeight].filter((x) => x !== 0)) / 2;
     var size = sizeScale(node.domain(node.size.scaleDim), 1, maxAxisSize);
 
diff --git a/test/plot.test.js b/test/plot.test.js
index 7eacb0f49..fd5674e00 100644
--- a/test/plot.test.js
+++ b/test/plot.test.js
@@ -1,6 +1,7 @@
 define(function (require) {
     var expect = require('chai').expect;
     var schemes = require('schemes');
+    var modernizer = require('modernizer');
     var tauChart = require('tau_modules/tau.newCharts');
     describe("tauChart.Plot", function () {
 
@@ -8,7 +9,7 @@ define(function (require) {
         var div;
         beforeEach(function () {
             div = document.createElement('div');
-            div.innerHTML = '<div id="test-div" style="width: 800px; height: 600px">NODATA</div>';
+            div.innerHTML = '<div id="test-div" style="width: 800px; height: 600px"></div>';
             document.body.appendChild(div);
 
             spec = {
@@ -48,7 +49,7 @@ define(function (require) {
             new tauChart.Plot(spec)
                 .renderTo(testDiv);
 
-            expect(testDiv.innerHTML).to.equal('NODATA');
+            expect(testDiv.querySelector('.graphical-report__layout__content div').innerHTML).to.equal('NODATA');
         });
 
         it("should auto-detect dimension types", function () {
@@ -89,9 +90,6 @@ define(function (require) {
             new tauChart.Plot(spec).renderTo(testDiv);
 
             var svg = d3.select(div).selectAll('svg');
-
-            expect(svg.attr('width')).to.equal('800');
-            expect(svg.attr('height')).to.equal('600');
         });
 
         it("should throw exception if target not found", function () {
@@ -128,9 +126,18 @@ define(function (require) {
                 .renderTo(document.getElementById('test-div'));
 
             var svg = d3.select(div).selectAll('svg');
-
-            expect(svg.attr('width')).to.equal('800');
-            expect(svg.attr('height')).to.equal('600');
+            var width = parseInt(svg.attr('width'),10);
+            var height = parseInt(svg.attr('height'),10);
+            var expectedWidth = 800;
+            var expectedHeight = 600;
+            if(!modernizer.flexbox) {
+                expectedWidth = 279;
+                expectedHeight = 133;
+            }
+
+            expect(width).to.equal(expectedWidth);
+
+            expect(height).to.equal(expectedHeight);
         });
 
         it("should infer size from target (where target = ID selector)", function () {
@@ -139,9 +146,18 @@ define(function (require) {
                 .renderTo('#test-div');
 
             var svg = d3.select(div).selectAll('svg');
-
-            expect(svg.attr('width')).to.equal('800');
-            expect(svg.attr('height')).to.equal('600');
+            var width = parseInt(svg.attr('width'),10);
+            var height = parseInt(svg.attr('height'),10);
+            var expectedWidth = 800;
+            var expectedHeight = 600;
+            if(!modernizer.flexbox) {
+                expectedWidth = 279;
+                expectedHeight = 133;
+            }
+
+            expect(width).to.equal(expectedWidth);
+
+            expect(height).to.equal(expectedHeight);
         });
 
         it("should auto exclude null values", function () {
diff --git a/test/tests-main.js b/test/tests-main.js
index 06e2a6602..ba3f124cb 100644
--- a/test/tests-main.js
+++ b/test/tests-main.js
@@ -12,6 +12,7 @@ requirejs.config({
         'd3':'libs/d3',
         'jquery':'libs/jquery',
         'js-schema':'libs/js-schema',
+        'modernizer':'libs/modernizer',
         'underscore':'libs/underscore',
         'schemes':'test/utils/schemes',
         'testUtils':'test/utils/utils',
@@ -27,6 +28,9 @@ requirejs.config({
       'js-schema':{
           deps:['libs/es5-shim'],
           exports:'schema'
+      },
+      'modernizer':{
+          exports:'Modernizr'
       }
     },
     // ask Require.js to load these files (all our tests)
