diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js
index 417ff82c9..3f38a18f2 100644
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/client/src/containers/Accounts/AccountsDataTable.js
@@ -206,6 +206,12 @@ function AccountsDataTable({
     [onSelectedRowsChange],
   );
 
+  const rowClassNames = (row) => {
+    return {
+      'inactive': !row.original.active,
+    };
+  };
+
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
       <DataTable
@@ -219,6 +225,7 @@ function AccountsDataTable({
         onSelectedRowsChange={handleSelectedRowsChange}
         loading={accountsLoading && !isMounted}
         rowContextMenu={rowContextMenu}
+        rowClassNames={rowClassNames}
         expandColumnSpace={1}
         autoResetExpanded={false}
         selectionColumnWidth={50}
diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss
index 5247c5bdb..d59705583 100644
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -4,7 +4,7 @@
   .bigcapital-datatable{
     .normal{
       .#{$ns}-icon{
-        color: #6E8091;
+        color: #7f91a2;
         padding-left: 15px;
       }
     }
@@ -15,6 +15,14 @@
           padding-top: 0.3rem;
           padding-bottom: 0.3rem;
         }
+
+        .tr.inactive .td{
+          color: #646b82;
+
+          &.normal .#{$ns}-icon{
+            color: #9eaab6;
+          }
+        }
         .account_name{
           .bp3-popover-wrapper--inactive-semafro{
             margin-left: 8px;