diff --git a/src/app/pages/dashboard/contacts/contacts.component.html b/src/app/pages/dashboard/contacts/contacts.component.html
index 2d060f96..5b23ab7e 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.html
+++ b/src/app/pages/dashboard/contacts/contacts.component.html
@@ -1,16 +1,23 @@
-<nb-card [size]="breakpoint.width >= breakpoints.xxxl || breakpoint.width < breakpoints.md ? 'large' : 'xlarge'">
+<nb-card size="large">
   <nb-tabset fullWidth>
+
     <nb-tab tabTitle="Contacts">
-      <div class="contact" *ngFor="let c of contacts">
-        <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
-        <i class="i-contact nb-phone"></i>
-      </div>
+      <nb-list>
+        <nb-list-item class="contact" *ngFor="let c of contacts">
+          <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
+          <nb-icon icon="phone-outline" pack="eva"></nb-icon>
+        </nb-list-item>
+      </nb-list>
     </nb-tab>
+
     <nb-tab tabTitle="Recent">
-      <div class="contact" *ngFor="let c of recent">
-        <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
-        <span class="time">{{ c.time | date: 'shortTime' }}</span>
-      </div>
+      <nb-list>
+        <nb-list-item class="contact" *ngFor="let c of recent">
+          <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
+          <span class="caption">{{ c.time | date: 'shortTime' }}</span>
+        </nb-list-item>
+      </nb-list>
     </nb-tab>
+
   </nb-tabset>
 </nb-card>
diff --git a/src/app/pages/dashboard/contacts/contacts.component.scss b/src/app/pages/dashboard/contacts/contacts.component.scss
index 511df243..7ca60923 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.scss
+++ b/src/app/pages/dashboard/contacts/contacts.component.scss
@@ -1,16 +1,19 @@
 @import '../../../@theme/styles/themes';
-//@import '~@nebular/bootstrap/styles/hero-buttons';
 
 @include nb-install-component() {
+  nb-card {
+    overflow: hidden;
+  }
+
   nb-tabset {
     height: 100%;
-    display: flex;
-    flex-direction: column;
+
+    ::ng-deep .tab-link {
+      padding: 1.25rem 2rem;
+    }
   }
 
   nb-tab {
-    flex: 1;
-    overflow-y: auto;
     padding: 0;
   }
 
@@ -18,50 +21,5 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: nb-theme(color-fg);
-    padding: 1rem;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid nb-theme(separator);
-
-      @include nb-for-theme(corporate) {
-        border-bottom-color: nb-theme(tabs-separator);
-      }
-    }
-  }
-
-  .i-contact {
-    font-size: 2rem;
-    cursor: pointer;
-  }
-
-  .time {
-    font-size: 0.875rem;
-    font-weight: nb-theme(font-weight-light);
-    text-transform: uppercase;
-  }
-
-  nb-user ::ng-deep {
-    .info-container {
-      @include nb-ltr(margin-left, 0.875rem);
-      @include nb-rtl(margin-right, 0.875rem);
-    }
-
-    .user-name {
-      font-family: nb-theme(font-secondary);
-      font-weight: nb-theme(font-weight-bold);
-      color: nb-theme(color-fg-heading);
-      font-size: 1.25rem;
-
-      @include nb-for-theme(cosmic) {
-        font-weight: nb-theme(font-weight-bolder);
-      }
-    }
-
-    .user-title {
-      font-size: 0.875rem;
-      font-weight: nb-theme(font-weight-light);
-      text-transform: uppercase;
-    }
   }
 }