diff --git a/components/legend/legend.component.js b/components/legend/legend.component.js
index dc8f356233..98b5116a82 100644
--- a/components/legend/legend.component.js
+++ b/components/legend/legend.component.js
@@ -20,6 +20,18 @@ export default {
                     layer.on('change:visible', layerVisibilityChanged);
                 }
             },
+             /**
+             * Check if there is any visible layer
+             * @memberof hs.legend.controller
+             * @function noLayerExists
+             */
+            noLayerExists: function () {
+                var visibleLayers = $scope.layerDescriptors.filter(function(check){
+                    return check.visible == true;
+                });
+                console.log(visibleLayers);
+                return (visibleLayers.length == 0)
+            },
 
             /**
              * Remove selected layer from legend items
diff --git a/components/legend/partials/legend.html b/components/legend/partials/legend.html
index 1c139cd679..2c701e86fb 100755
--- a/components/legend/partials/legend.html
+++ b/components/legend/partials/legend.html
@@ -2,6 +2,9 @@
     <hs.layout.panel-header panel-name="legend" panel-title="'Legend'||translate"></hs.layout.panel-header>
     <div class="card-body">
         <p><input type="text" class="form-control" placeholder="Filter:" ng-model="query.title"></p>
+        <span ng-if="noLayerExists()">
+            <p style="text-align: center">No layer with legend exists!</p>
+        </span>
         <ul class="list-group">
             <li ng-repeat="layer in layerDescriptors | filter:query" class="list-group-item" ng-show="isLegendable(layer)">
                 {{layer.title}}
diff --git a/components/legend/partials/legendmd.html b/components/legend/partials/legendmd.html
index fa199bc8ce..2e940b08c1 100755
--- a/components/legend/partials/legendmd.html
+++ b/components/legend/partials/legendmd.html
@@ -10,7 +10,7 @@ <h3>{{layer.title}}</h3>
             <md-list-item ng-repeat="layer in layers | filter:query" class="list-group-item" ng-show="hasLegend(layer, 'vector')">
                 <div class="md-list-item-text" layout="column">
                     {{layer.title}}
-                    <p ng-repeat="category in layer.lyr.getSource().legend_categories | orderBy:'name'"><span style="background-color: {{category.color}};">&nbsp;&nbsp;&nbsp;</span>&nbsp;{{category.name}}</p>
+                    <p ng-repeat="category in layer.lyr.getSource().legend_categories | orderBy:'name'"><span style="background-color: '{{category.color}}';">&nbsp;&nbsp;&nbsp;</span>&nbsp;{{category.name}}</p>
                 </div>
             </md-list-item>
         </md-list>