diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html
new file mode 100644
index 00000000..42e18aa3
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html
@@ -0,0 +1,5 @@
+<ngx-traffic-bar-chart
+  [data]="trafficBarData.data"
+  [labels]="trafficBarData.labels"
+  [formatter]="trafficBarData.formatter"
+></ngx-traffic-bar-chart>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
new file mode 100644
index 00000000..390503e0
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
@@ -0,0 +1,25 @@
+@import '../../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+
+  ngx-traffic-bar-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 {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
index 9ee7a987..630e0564 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
@@ -1,6 +1,4 @@
-<nb-card-header>
-  <span>Traffic</span>
-  <nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
-    <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
-  </nb-select>
-</nb-card-header>
+<span>Traffic</span>
+<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
+  <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
+</nb-select>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
new file mode 100644
index 00000000..958c42bc
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
new file mode 100644
index 00000000..ac231abe
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
@@ -0,0 +1,26 @@
+<nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
+  <nb-card-front>
+    <nb-card size="small">
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
+        <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
+      </nb-card-body>
+      <nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
+    </nb-card>
+  </nb-card-front>
+  <nb-card-back>
+    <nb-card size="small">
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
+        <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+      </nb-card-body>
+      <nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
+    </nb-card>
+  </nb-card-back>
+</nb-reveal-card>
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
new file mode 100644
index 00000000..ccf47060
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
@@ -0,0 +1,19 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  .toggle-icon {
+    position: absolute;
+    top: 1rem;
+    right: 1.25rem;
+    @include nb-rtl(right, auto);
+    @include nb-rtl(left, 1.25rem);
+    cursor: pointer;
+  }
+
+  nb-card-header {
+    padding-top: nb-theme(card-header-with-select-padding-top);
+    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
+    @include nb-ltr(padding-right, 4rem);
+    @include nb-rtl(padding-left, 4rem);
+  }
+}