diff --git a/src/app/pages/dashboard/contacts/contacts.component.html b/src/app/pages/dashboard/contacts/contacts.component.html
index 99d0ae21..0d7aa601 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.html
+++ b/src/app/pages/dashboard/contacts/contacts.component.html
@@ -3,11 +3,14 @@
     <nga-tab tabTitle="Contacts">
       <div class="contact" *ngFor="let c of contacts">
         <nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="xmedium"></nga-user>
-        <i class="ion-ios-telephone-outline"></i>
+        <i class="i-contact ion-ios-telephone-outline"></i>
       </div>
     </nga-tab>
     <nga-tab tabTitle="Recent">
-      <span>Content #2</span>
+      <div class="contact" *ngFor="let c of recent">
+        <nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="xmedium"></nga-user>
+        <span class="time">{{ c.time }}</span>
+      </div>
     </nga-tab>
   </nga-tabset>
 </nga-card>
diff --git a/src/app/pages/dashboard/contacts/contacts.component.scss b/src/app/pages/dashboard/contacts/contacts.component.scss
index c2246c17..d831cc31 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.scss
+++ b/src/app/pages/dashboard/contacts/contacts.component.scss
@@ -2,11 +2,19 @@
 @import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
 
 @include nga-install-component() {
-  nga-tabset /deep/ ul {
-    border-bottom: 1px solid nga-theme(separator);
+  nga-tabset {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    /deep/ ul {
+      border-bottom: 1px solid nga-theme(separator);
+    }
   }
 
   nga-tab {
+    flex: 1;
+    overflow-y: scroll;
     padding: 0;
   }
 
@@ -18,11 +26,17 @@
     border-bottom: 1px solid nga-theme(separator);
   }
 
-  i {
+  .i-contact {
     font-size: 2.5rem;
     cursor: pointer;
   }
 
+  .time {
+    font-size: 0.875rem;
+    font-weight: nga-theme(font-weight-light);
+    text-transform: uppercase;
+  }
+
   nga-user /deep/ {
     .info-container {
       margin-left: 0.875rem;
diff --git a/src/app/pages/dashboard/contacts/contacts.component.ts b/src/app/pages/dashboard/contacts/contacts.component.ts
index 9a45374f..2aad6c37 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.ts
+++ b/src/app/pages/dashboard/contacts/contacts.component.ts
@@ -8,8 +8,11 @@ import { UserService } from '../../../@core/data/users.service';
   templateUrl: './contacts.component.html',
 })
 export class ContactsComponent {
+
   contacts: any[];
 
+  recent: any[];
+
   constructor(private userService: UserService) {
     const users = this.userService.getUsers();
 
@@ -21,5 +24,16 @@ export class ContactsComponent {
       { user: users.alan, type: 'home' },
       { user: users.kate, type: 'work' },
     ];
+
+    this.recent = [
+      { user: users.alan, type: 'home', time: '9:12 pm' },
+      { user: users.eva, type: 'home', time: '7:45 pm' },
+      { user: users.nick, type: 'mobile', time: '5:29 pm' },
+      { user: users.lee, type: 'mobile', time: '11:24 am' },
+      { user: users.jack, type: 'mobile', time: '10:45 am' },
+      { user: users.kate, type: 'work', time: '9:42 am' },
+      { user: users.kate, type: 'work', time: '9:31 am' },
+      { user: users.jack, type: 'mobile', time: '8:01 am' },
+    ];
   }
 }