diff --git a/src/app/pages/maps/gmaps/gmaps.component.html b/src/app/pages/maps/gmaps/gmaps.component.html
deleted file mode 100644
index 06448bab..00000000
--- a/src/app/pages/maps/gmaps/gmaps.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="row">
-  <div class="col-md-12">
-    <nga-card size="large">
-      <nga-card-header>Gmaps</nga-card-header>
-      <nga-card-body>
-        <agm-map [latitude]="lat" [longitude]="lng">
-          <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
-        </agm-map>
-      </nga-card-body>
-    </nga-card>
-  </div>
-</div>
diff --git a/src/app/pages/maps/gmaps/gmaps.component.scss b/src/app/pages/maps/gmaps/gmaps.component.scss
index 93100117..43cceb85 100644
--- a/src/app/pages/maps/gmaps/gmaps.component.scss
+++ b/src/app/pages/maps/gmaps/gmaps.component.scss
@@ -1,7 +1,21 @@
 @import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
-  /deep/ agm-map .agm-map-container-inner {
-    height: calc(#{nga-theme(card-height-xmedium)} - 50px);
+  nga-card-header {
+    border: none;
+  }
+
+  nga-card-body {
+    padding: 0;
+  }
+
+  agm-map {
+    width: 100%;
+    height: 100%;
+
+    /deep/ .agm-map-container-inner {
+      border-bottom-left-radius: nga-theme(card-border-radius);
+      border-bottom-right-radius: nga-theme(card-border-radius);
+    }
   }
 }
diff --git a/src/app/pages/maps/gmaps/gmaps.component.ts b/src/app/pages/maps/gmaps/gmaps.component.ts
index e1020761..25028a2d 100644
--- a/src/app/pages/maps/gmaps/gmaps.component.ts
+++ b/src/app/pages/maps/gmaps/gmaps.component.ts
@@ -3,11 +3,18 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-gmaps',
   styleUrls: ['./gmaps.component.scss'],
-  templateUrl: './gmaps.component.html',
+  template: `
+    <nga-card size="large">
+      <nga-card-header>Gmaps</nga-card-header>
+      <nga-card-body>
+        <agm-map [latitude]="lat" [longitude]="lng">
+          <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+        </agm-map>
+      </nga-card-body>
+    </nga-card>
+  `,
 })
 export class GmapsComponent {
-
   lat: number = 51.678418;
   lng: number = 7.809007;
-
 }
diff --git a/src/app/pages/maps/leaflet/leaflet.component.html b/src/app/pages/maps/leaflet/leaflet.component.html
deleted file mode 100644
index c4b7d194..00000000
--- a/src/app/pages/maps/leaflet/leaflet.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="row">
-  <div class="col-md-12">
-    <nga-card size="large">
-      <nga-card-header>Leaflet</nga-card-header>
-      <nga-card-body>
-        <div leaflet [leafletOptions]="options">
-        </div>
-      </nga-card-body>
-    </nga-card>
-  </div>
-</div>
diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss
index b0aaa762..54cbcfbf 100644
--- a/src/app/pages/maps/leaflet/leaflet.component.scss
+++ b/src/app/pages/maps/leaflet/leaflet.component.scss
@@ -1,9 +1,16 @@
 @import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
-  display: block;
+  nga-card-header {
+    border: none;
+  }
+
+  nga-card-body {
+    padding: 0;
+  }
 
   /deep/ .leaflet-container {
-    height: calc(#{nga-theme(card-height-xmedium)} - 50px);
+    width: 100%;
+    height: 500px;
   }
 }
diff --git a/src/app/pages/maps/leaflet/leaflet.component.ts b/src/app/pages/maps/leaflet/leaflet.component.ts
index 39644892..e8ecbfc6 100644
--- a/src/app/pages/maps/leaflet/leaflet.component.ts
+++ b/src/app/pages/maps/leaflet/leaflet.component.ts
@@ -6,7 +6,14 @@ import 'style-loader!leaflet/dist/leaflet.css';
 @Component({
   selector: 'ngx-leaflet',
   styleUrls: ['./leaflet.component.scss'],
-  templateUrl: './leaflet.component.html',
+  template: `
+    <nga-card>
+      <nga-card-header>Leaflet</nga-card-header>
+      <nga-card-body>
+        <div leaflet [leafletOptions]="options"></div>
+      </nga-card-body>
+    </nga-card>
+  `,
 })
 export class LeafletComponent {
 
@@ -17,5 +24,4 @@ export class LeafletComponent {
     zoom: 5,
     center: L.latLng({ lat: 38.991709, lng: -76.886109 }),
   };
-
 }