diff --git a/src/app/components/blurPanel/_blurPanel.scss b/src/app/components/blurPanel/_blurPanel.scss
index 0b05ba4..1c14442 100644
--- a/src/app/components/blurPanel/_blurPanel.scss
+++ b/src/app/components/blurPanel/_blurPanel.scss
@@ -25,6 +25,10 @@ $panel-title-height: 35px;
   &.large-panel {
     height: $large-panel-height;
   }
+  &.viewport100 {
+    height: calc(100vh - 212px);
+  }
+
   &.with-scroll {
     .panel-body {
       height: calc(100% - #{$panel-title-height});
diff --git a/src/app/components/contentTop/contentTop.js b/src/app/components/contentTop/contentTop.js
index 7d90684..9d33adf 100644
--- a/src/app/components/contentTop/contentTop.js
+++ b/src/app/components/contentTop/contentTop.js
@@ -23,7 +23,11 @@ blurAdminApp.directive('contentTop', ['$location', function ($location) {
         '/tables': 'Tables',
         '/typography': 'Typography',
         '/form-layouts': 'Form Layouts',
-        '/form-inputs': 'Form Inputs'
+        '/form-inputs': 'Form Inputs',
+        '/maps/gmap': 'Google Map',
+        '/maps/leaflet': 'Leaflet Map',
+        '/maps/line': 'Line Map',
+        '/maps/bubble': 'Bubble Map'
       };
 
       $scope.$watch(function () {
diff --git a/src/app/components/sidebar/sidebar.js b/src/app/components/sidebar/sidebar.js
index c77819d..0d64a5e 100644
--- a/src/app/components/sidebar/sidebar.js
+++ b/src/app/components/sidebar/sidebar.js
@@ -63,7 +63,24 @@ blurAdminApp.directive('sidebar', function () {
         {
           title: 'Maps',
           icon: 'ion-ios-location-outline',
-          root: '#/maps'
+          subMenu: [
+            {
+              title: 'Google Maps',
+              root: '#/maps/gmap'
+            },
+            {
+              title: 'Leaflet',
+              root: '#/maps/leaflet'
+            },
+            {
+              title: 'Bubble Map',
+              root: '#/maps/bubble'
+            },
+            {
+              title: 'Line Map',
+              root: '#/maps/line'
+            }
+          ]
         },
         {
           title: 'User Profile',
diff --git a/src/app/components/widgets/widgets.html b/src/app/components/widgets/widgets.html
index edf5632..99efde8 100644
--- a/src/app/components/widgets/widgets.html
+++ b/src/app/components/widgets/widgets.html
@@ -1,7 +1,7 @@
 <div class="widgets">
   <div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
     <div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
-      <blur-panel title="{{::widget.title}}" ng-repeat="widget in widgetCol" class-container="with-scroll">
+      <blur-panel title="{{::widget.title}}" ng-repeat="widget in widgetCol" class-container="with-scroll {{widget.panelClass}}">
         <div ng-include="widget.url"></div>
       </blur-panel>
     </div>
diff --git a/src/app/pages/maps/maps.js b/src/app/pages/maps/maps.js
index fbc1e04..6d5d59b 100644
--- a/src/app/pages/maps/maps.js
+++ b/src/app/pages/maps/maps.js
@@ -3,33 +3,77 @@
 angular.module('BlurAdmin.mapsPage', ['ngRoute'])
 
     .config(['$routeProvider', function ($routeProvider) {
-      $routeProvider.when('/maps', {
+      $routeProvider.when('/maps/gmap', {
         templateUrl: 'app/pages/maps/maps.html',
-        controller: 'mapsPageCtrl'
+        controller: 'gmapPageCtrl'
+      });
+      $routeProvider.when('/maps/leaflet', {
+        templateUrl: 'app/pages/maps/maps.html',
+        controller: 'leafletPageCtrl'
+      });
+      $routeProvider.when('/maps/bubble', {
+        templateUrl: 'app/pages/maps/maps.html',
+        controller: 'mapBubblePageCtrl'
+      });
+      $routeProvider.when('/maps/line', {
+        templateUrl: 'app/pages/maps/maps.html',
+        controller: 'mapLinePageCtrl'
       });
     }])
-    .controller('mapsPageCtrl', ['$scope', function ($scope) {
+    .controller('gmapPageCtrl', ['$scope', function ($scope) {
       $scope.widgetBlocks = [
         {
           widgets: [
             [
               {
                 title: 'Google Maps',
-                url: 'app/pages/maps/widgets/google-maps/google-maps.html'
-              },
-              {
-                title: 'Map with Lines',
-                url: 'app/pages/maps/widgets/map-lines/map-lines.html'
+                url: 'app/pages/maps/widgets/google-maps/google-maps.html',
+                panelClass: 'viewport100'
               }
-            ],
+            ]
+          ]
+        }
+      ];
+    }])
+    .controller('leafletPageCtrl', ['$scope', function ($scope) {
+      $scope.widgetBlocks = [
+        {
+          widgets: [
+            [
+              {
+                title: 'Leaflet',
+                url: 'app/pages/maps/widgets/leaflet/leaflet.html',
+                panelClass: 'viewport100'
+              }
+            ]
+          ]
+        }
+      ];
+    }])
+    .controller('mapBubblePageCtrl', ['$scope', function ($scope) {
+      $scope.widgetBlocks = [
+        {
+          widgets: [
             [
               {
                 title: 'Map with Bubbles',
-                url: 'app/pages/maps/widgets/map-bubbles/map-bubbles.html'
-              },
+                url: 'app/pages/maps/widgets/map-bubbles/map-bubbles.html',
+                panelClass: 'viewport100'
+              }
+            ]
+          ]
+        }
+      ];
+    }])
+    .controller('mapLinePageCtrl', ['$scope', function ($scope) {
+      $scope.widgetBlocks = [
+        {
+          widgets: [
+            [
               {
-                title: 'Leaflet',
-                url: 'app/pages/maps/widgets/leaflet/leaflet.html'
+                title: 'Map with Lines',
+                url: 'app/pages/maps/widgets/map-lines/map-lines.html',
+                panelClass: 'viewport100'
               }
             ]
           ]
diff --git a/src/app/pages/maps/widgets/google-maps/_google-maps.scss b/src/app/pages/maps/widgets/google-maps/_google-maps.scss
index d674f48..cea7e86 100644
--- a/src/app/pages/maps/widgets/google-maps/_google-maps.scss
+++ b/src/app/pages/maps/widgets/google-maps/_google-maps.scss
@@ -1,5 +1,4 @@
 #google-maps {
   width: 100%;
-  height: 400px;
-
+  height: calc(100vh - 277px);
 }
\ No newline at end of file
diff --git a/src/app/pages/maps/widgets/leaflet/_leaflet.scss b/src/app/pages/maps/widgets/leaflet/_leaflet.scss
index 485ae55..f20fd91 100644
--- a/src/app/pages/maps/widgets/leaflet/_leaflet.scss
+++ b/src/app/pages/maps/widgets/leaflet/_leaflet.scss
@@ -1,5 +1,5 @@
 #leaflet-map {
-  height: 400px;
+  height: calc(100vh - 277px);
 }
 
 /* required styles */
diff --git a/src/app/pages/maps/widgets/map-bubbles/_map-bubbles.scss b/src/app/pages/maps/widgets/map-bubbles/_map-bubbles.scss
index b6e5417..5b39a8e 100644
--- a/src/app/pages/maps/widgets/map-bubbles/_map-bubbles.scss
+++ b/src/app/pages/maps/widgets/map-bubbles/_map-bubbles.scss
@@ -1,6 +1,6 @@
 #map-bubbles {
   width: 100%;
-  height: 400px;
+  height: calc(100vh - 277px);
   font-size	: 11px;
 }
 
diff --git a/src/app/pages/maps/widgets/map-lines/_map-lines.scss b/src/app/pages/maps/widgets/map-lines/_map-lines.scss
index 22f083d..f61ea57 100644
--- a/src/app/pages/maps/widgets/map-lines/_map-lines.scss
+++ b/src/app/pages/maps/widgets/map-lines/_map-lines.scss
@@ -1,4 +1,4 @@
 #map-lines {
   width: 100%;
-  height: 400px;
+  height: calc(100vh - 277px);
 }
\ No newline at end of file