diff --git a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
index 9cb1b3bb..25a7ecf6 100644
--- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
+++ b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
@@ -17,13 +17,8 @@
     margin-left: 1rem;
   }
 
-  .title {
-    font-family: nb-theme(card-header-font-family);
-    color: nb-theme(color-fg);
-  }
-
   .echart {
-    height: 85%;
+    height: 75%;
   }
 
   @include media-breakpoint-down(sm) {
@@ -32,9 +27,5 @@
       nb-theme(card-border-width)
       nb-theme(card-header-border-type)
       nb-theme(card-header-border-color);
-
-    .echart {
-      height: 75%;
-    }
   }
 }
diff --git a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts
index 53c00251..c55a7390 100644
--- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts
+++ b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts
@@ -9,8 +9,8 @@ import { LayoutService } from '../../../../@core/utils/layout.service';
   styleUrls: ['./country-orders-chart.component.scss'],
   template: `
     <div class="header">
-      <span class="title">Selected Country/Region</span>
-      <h2>{{countryName}}</h2>
+      <span class="caption">Selected Country/Region</span>
+      <h2 class="h4">{{ countryName }}</h2>
     </div>
     <div echarts
          [options]="option"
diff --git a/src/app/pages/e-commerce/country-orders/country-orders.component.ts b/src/app/pages/e-commerce/country-orders/country-orders.component.ts
index a61a3138..21a1f39d 100644
--- a/src/app/pages/e-commerce/country-orders/country-orders.component.ts
+++ b/src/app/pages/e-commerce/country-orders/country-orders.component.ts
@@ -7,7 +7,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
   selector: 'ngx-country-orders',
   styleUrls: ['./country-orders.component.scss'],
   template: `
-    <nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'xxlarge'">
+    <nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'giant'">
       <nb-card-header>Country Orders Statistics</nb-card-header>
       <nb-card-body>
         <ngx-country-orders-map (select)="selectCountryById($event)"
diff --git a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
index 878e0fb1..72025fda 100644
--- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
+++ b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
@@ -10,15 +10,7 @@
 
   .leaflet-container {
     height: 100%;
-    background-color: nb-theme(layout-bg);
-
-    @include nb-for-theme(default) {
-      background-color: nb-theme(color-white);
-    }
-
-    @include nb-for-theme(corporate) {
-      background-color: nb-theme(color-white);
-    }
+    background-color: nb-theme(layout-background-color);
   }
 
   ::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
@@ -33,38 +25,25 @@
     border: none;
 
     a {
-      background-color: nb-theme(color-success);
-      color: nb-theme(color-white);
+      background-color: nb-theme(color-success-default);
+      color: nb-theme(text-alternate-color);
       border-bottom: none;
-      height: 2.5rem;
-
-      @include nb-for-theme(cosmic) {
-        background-color: nb-theme(color-primary);
-      }
-
-      @include nb-for-theme(corporate) {
-        background-color: nb-theme(color-primary);
-      }
     }
 
     .leaflet-control-zoom-in {
-      border-top-left-radius: nb-theme(btn-border-radius);
-      border-top-right-radius: nb-theme(btn-border-radius);
+      border-top-left-radius: nb-theme(button-rectangle-border-radius);
+      border-top-right-radius: nb-theme(button-rectangle-border-radius);
     }
 
     .leaflet-control-zoom-out {
       margin-top: 1px;
-      border-bottom-left-radius: nb-theme(btn-border-radius);
-      border-bottom-right-radius: nb-theme(btn-border-radius);
+      border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
+      border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
     }
   }
 
   ::ng-deep .leaflet-control-attribution {
     background: transparent;
-
-    a {
-      color: nb-theme(color-fg);
-    }
   }
 
   @include media-breakpoint-down(sm) {