diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index f43da984..1f3207b3 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -17,6 +17,7 @@ $nb-themes: nb-register-theme((
   font-family-secondary: Exo,
 
   card-height-tiny: 13.5rem,
+  select-min-width: 6rem,
 
   //
   //switcher-background: #ebeff5,
diff --git a/src/app/pages/e-commerce/e-commerce.module.ts b/src/app/pages/e-commerce/e-commerce.module.ts
index ca256bf6..dd832bf9 100644
--- a/src/app/pages/e-commerce/e-commerce.module.ts
+++ b/src/app/pages/e-commerce/e-commerce.module.ts
@@ -6,6 +6,7 @@ import {
   NbTabsetModule,
   NbUserModule,
   NbIconModule,
+  NbSelectModule,
 } from '@nebular/theme';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
@@ -62,6 +63,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
     NbButtonModule,
     NbIconModule,
     NbTabsetModule,
+    NbSelectModule,
     ChartModule,
     NbProgressBarModule,
     NgxEchartsModule,
diff --git a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html
index c9479fcf..182dcc36 100644
--- a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html
+++ b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html
@@ -3,9 +3,9 @@
 </nb-card-header>
 <nb-card-body>
   <div class="chart-info">
-    <div class="title" [style.color]="color">{{ name }}</div>
-    <div class="time-period">Last week</div>
-    <div class="value">{{ value }}%</div>
+    <div [style.color]="color">{{ name }}</div>
+    <div class="time-period caption">Last week:</div>
+    <div class="h6">{{ value }}%</div>
   </div>
   <ngx-earning-pie-chart [values]="earningPieChartData"
                          (selectPie)="changeChartInfo($event)"
diff --git a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
index d835e209..231576c8 100644
--- a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
+++ b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
@@ -3,11 +3,8 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  nb-card-header {
-    flex-direction: row;
-  }
-
-  ngx-earning-pie-chart, .chart-info {
+  ngx-earning-pie-chart,
+  .chart-info {
     flex: 1;
   }
 
@@ -15,26 +12,18 @@
     padding-top: 0.7rem;
   }
 
-  .title {
-    font-size: nb-theme(font-size-xlg);
-  }
-
   .time-period {
     margin-top: 1.5rem;
-    color: nb-theme(color-fg);
   }
 
   .value {
     margin-top: 0.2rem;
-    font-size: 1.5rem;
-    font-weight: nb-theme(font-weight-bold);
-    color: nb-theme(color-fg-heading);
   }
 
   .echart {
     position: absolute;
-    width: calc(50% - #{nb-theme(card-padding)});
-    height: calc(100% - 2 * #{nb-theme(card-padding)});
+    width: calc(50% - 1.25rem);
+    height: calc(100% - 2rem);
   }
 
   @include media-breakpoint-between(xl, xl) {
diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.html b/src/app/pages/e-commerce/earning-card/earning-card.component.html
index d3ff8337..af143d4d 100644
--- a/src/app/pages/e-commerce/earning-card/earning-card.component.html
+++ b/src/app/pages/e-commerce/earning-card/earning-card.component.html
@@ -1,14 +1,14 @@
 <nb-flip-card [showToggleButton]="false" [flipped]="flipped">
   <nb-card-front>
-    <nb-card size="xsmall">
+    <nb-card size="tiny">
       <ngx-earning-card-front></ngx-earning-card-front>
-      <i class="nb-arrow-right" (click)="toggleFlipView()"></i>
+      <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-front>
   <nb-card-back>
-    <nb-card size="xsmall">
+    <nb-card size="tiny">
       <ngx-earning-card-back></ngx-earning-card-back>
-      <i class="nb-arrow-right" (click)="toggleFlipView()"></i>
+      <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-back>
 </nb-flip-card>
diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.scss b/src/app/pages/e-commerce/earning-card/earning-card.component.scss
index 2916c494..293d2717 100644
--- a/src/app/pages/e-commerce/earning-card/earning-card.component.scss
+++ b/src/app/pages/e-commerce/earning-card/earning-card.component.scss
@@ -5,43 +5,36 @@
     position: relative;
   }
 
-  .nb-arrow-right {
+  .flip-icon {
     position: absolute;
-    top: 0;
-    right: 0;
+    right: 0.625rem;
+    top: 1rem;
     @include nb-rtl(right, auto);
-    @include nb-rtl(left, 0);
-    padding: 1.5rem;
+    @include nb-rtl(left, 0.625rem);
     cursor: pointer;
   }
 
   ::ng-deep .flipped {
     .back-container {
-      .nb-arrow-right {
+      .flip-icon {
         transform: scaleX(-1);
       }
     }
 
     .front-container {
-      .nb-arrow-right {
+      .flip-icon {
         display: none;
       }
     }
   }
 
-  ngx-earning-card-back, ngx-earning-card-front {
+  ngx-earning-card-back,
+  ngx-earning-card-front {
     display: flex;
     flex-direction: column;
     flex: 1;
   }
 
-  ::ng-deep nb-card-header {
-    display: flex;
-    justify-content: space-between;
-    @include nb-rtl(flex-direction, row-reverse);
-    padding-left: 1rem;
-  }
-
   ::ng-deep nb-card-body {
     overflow: hidden;
     display: flex;
diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.ts b/src/app/pages/e-commerce/earning-card/earning-card.component.ts
index fbe4f52f..ec1c8b85 100644
--- a/src/app/pages/e-commerce/earning-card/earning-card.component.ts
+++ b/src/app/pages/e-commerce/earning-card/earning-card.component.ts
@@ -9,7 +9,7 @@ export class EarningCardComponent {
 
   flipped = false;
 
-  toggleFlipView() {
+  toggleView() {
     this.flipped = !this.flipped;
   }
 }
diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
index ea1db0d5..0f932318 100644
--- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
+++ b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
@@ -1,23 +1,19 @@
 <nb-card-header>
-  <div class="dropdown ghost-dropdown" ngbDropdown>
-    <button type="button" ngbDropdownToggle class="btn"
-            [ngClass]="{
-              'btn-success': currentTheme === 'default',
-              'btn-primary': currentTheme !== 'default'}">
-      {{ selectedCurrency }}
-    </button>
-    <ul class="dropdown-menu" ngbDropdownMenu>
-      <li class="dropdown-item" *ngFor="let currency of currencies" (click)="changeCurrency(currency)">{{ currency }}</li>
-    </ul>
-  </div>
+  <nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
+    <nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
+  </nb-select>
 </nb-card-header>
 <nb-card-body>
   <div class="chart-info">
-    <div class="title">Daily Income</div>
-    <div class="value">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div>
+    <div>Daily Income</div>
+    <div class="h6">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div>
     <div class="delta"
          [class.up]="earningLiveUpdateCardData.delta.up"
          [class.down]="!earningLiveUpdateCardData.delta.up">
+      <nb-icon [icon]="earningLiveUpdateCardData.delta.up ? 'arrow-up' : 'arrow-down'"
+               pack="eva"
+               class="direction">
+      </nb-icon>
       {{ earningLiveUpdateCardData.delta.value }}%
     </div>
   </div>
diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
index f4fb77f7..9616b759 100644
--- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
+++ b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
@@ -12,10 +12,6 @@
     padding-bottom: 0.45rem;
   }
 
-  .dropdown {
-    min-width: 8.125rem;
-  }
-
   nb-card-body {
     padding: 1rem 0 0;
     flex-direction: column;
@@ -29,87 +25,37 @@
     margin: 0 nb-theme(card-padding);
   }
 
-  .title {
-    color: nb-theme(color-fg-heading);
-  }
-
-  .value {
-    color: nb-theme(color-success);
-    font-size: 1.5rem;
-
-    @include nb-for-theme(corporate) {
-      color: nb-theme(color-primary);
+  .delta {
+    &.up .direction {
+      color: nb-theme(color-success-default);
+    }
+    &.down .direction {
+      color: nb-theme(color-danger-default);
     }
   }
 
   .delta {
     position: absolute;
     display: inline-block;
-    color: nb-theme(color-fg-heading);
-    padding-left: 0.5rem;
-    font-size: 1rem;
     top: 0;
     right: 0;
-    @include nb-rtl(left, 1.25rem);
-    @include nb-rtl(right, inherit);
-
-    &::before {
-      position: absolute;
-      content: '';
-      right: 100%;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-    }
-
-    &.down {
-      &::before {
-        bottom: 4px;
-        border-top: 7px solid text-danger();
-      }
-    }
-
-    &.up {
-      &::before {
-        top: 4px;
-        border-bottom: 7px solid text-success();
-      }
-    }
+    @include nb-rtl(left, 0);
+    @include nb-rtl(right, auto);
   }
 
   ngx-earning-live-update-chart {
     flex: 1;
     position: relative;
-  }
 
-  ::ng-deep canvas {
-    border-bottom-left-radius: nb-theme(card-border-radius);
-    border-bottom-right-radius: nb-theme(card-border-radius);
-  }
-
-  .echart {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-  }
-
-  @include nb-for-theme(corporate) {
-    .delta {
-      &.down {
-        color: text-danger();
-
-        &::before {
-          bottom: 4px;
-          border-top: 7px solid text-danger();
-        }
+    ::ng-deep {
+      canvas {
+        border-bottom-left-radius: nb-theme(card-border-radius);
+        border-bottom-right-radius: nb-theme(card-border-radius);
       }
-
-      &.up {
-        color: text-primary();
-
-        &::before {
-          top: 4px;
-          border-bottom: 7px solid text-primary();
-        }
+      .echart {
+        position: absolute;
+        height: 100%;
+        width: 100%;
       }
     }
   }