diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index 9b27137ac..0039bb318 100644
--- a/src/app/clients/clients.component.html
+++ b/src/app/clients/clients.component.html
@@ -30,7 +30,11 @@
       <!-- Status Column -->
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef mat-sort-header='active'> Status </th>
-        <td mat-cell *matCellDef="let row"> {{row.active}} </td>
+        <td mat-cell *matCellDef="let row"> 
+          <div [className]="row.active === true ? 'active' : 'inactive'">
+            <i class="fa fa-circle fa-2x"> </i>
+          </div>
+       </td> 
       </ng-container>
 
       <!-- Color Column -->
diff --git a/src/app/clients/clients.component.scss b/src/app/clients/clients.component.scss
index f633a10bd..18b291765 100644
--- a/src/app/clients/clients.component.scss
+++ b/src/app/clients/clients.component.scss
@@ -17,7 +17,7 @@ td, th {
 }
 
 .inactive {
-  color: grey;
+  color: red;
 }
 
 .active {
diff --git a/src/app/clients/clients.component.ts b/src/app/clients/clients.component.ts
index d8b3dcc0c..014d6137b 100644
--- a/src/app/clients/clients.component.ts
+++ b/src/app/clients/clients.component.ts
@@ -32,6 +32,7 @@ export class ClientsComponent implements OnInit {
     .subscribe(
       (res => {
         console.log(res);
+        res.active = !!res.active;
       this.dataSource = new MatTableDataSource(res);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;