diff --git a/src/app/@theme/styles/_overrides.scss b/src/app/@theme/styles/_overrides.scss
index 8ba44121..7fa53aaa 100644
--- a/src/app/@theme/styles/_overrides.scss
+++ b/src/app/@theme/styles/_overrides.scss
@@ -9,6 +9,13 @@
     }
   }
 
+  nb-card nb-list {
+    @include nb-scrollbars(
+      nb-theme(card-scrollbar-color),
+      nb-theme(card-scrollbar-background-color),
+      nb-theme(card-scrollbar-width));
+  }
+
   .table {
     color: nb-theme(text-basic-color) !important;
   }
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
index 8c483a7e..42e18aa3 100644
--- 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
@@ -1,6 +1,5 @@
-<nb-card-body>
-  <ngx-traffic-bar-chart [data]="trafficBarData.data"
-                         [labels]="trafficBarData.labels"
-                         [formatter]="trafficBarData.formatter">
-  </ngx-traffic-bar-chart>
-</nb-card-body>
+<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
index 00e2406e..0663243a 100644
--- 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
@@ -1,19 +1,7 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  nb-card-body {
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-
   ngx-traffic-bar-chart {
-    flex: 1;
     position: relative;
 
     ::ng-deep {
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
new file mode 100644
index 00000000..128c6745
--- /dev/null
+++ b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
@@ -0,0 +1,44 @@
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '../../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  overflow: hidden;
+
+  nb-list {
+    height: 100%;
+  }
+
+  .item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > * {
+      flex: 1;
+    }
+
+    &:first-child {
+      border-top: none;
+    }
+  }
+
+  .delta {
+    display: flex;
+    align-items: center;
+
+    &.down {
+      color: nb-theme(color-danger-default);
+    }
+
+    &.up {
+      color: nb-theme(color-success-default);
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    ngx-traffic-bar {
+      display: none;
+    }
+  }
+}
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
index b92c1db3..958c42bc 100644
--- 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
@@ -1,14 +1,5 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  nb-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    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);
-  }
+: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
index 1b11ab71..1a8faa00 100644
--- 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
@@ -1,15 +1,23 @@
 <nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
   <nb-card-front>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
       <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
       <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">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
-      <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+      <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>
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
index 42f55746..ccf47060 100644
--- 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
@@ -9,4 +9,11 @@
     @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);
+  }
 }
diff --git a/src/app/pages/layout/list/list.component.html b/src/app/pages/layout/list/list.component.html
new file mode 100644
index 00000000..9be4c3bb
--- /dev/null
+++ b/src/app/pages/layout/list/list.component.html
@@ -0,0 +1,28 @@
+<div class="lists row">
+  <div class="col-md-12 col-lg-6 col-xxxl-6">
+    <nb-card class="list-card">
+      <nb-card-header>Some Fruits</nb-card-header>
+      <nb-card-body>
+        <nb-list>
+          <nb-list-item *ngFor="let fruit of fruits">
+            {{ fruit }}
+          </nb-list-item>
+        </nb-list>
+      </nb-card-body>
+    </nb-card>
+  </div>
+
+  <div class="col-md-12 col-lg-6 col-xxxl-6">
+    <nb-card class="list-card" size="small">
+      <nb-card-header>Users</nb-card-header>
+      <nb-card-body>
+        <nb-list>
+          <nb-list-item *ngFor="let user of users">
+            <nb-user [name]="user.name" [title]="user.title">
+            </nb-user>
+          </nb-list-item>
+        </nb-list>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>