diff --git a/shyftBlockExplorerUI/src/components/table/accounts/accountRows.js b/shyftBlockExplorerUI/src/components/table/accounts/accountRows.js
index 66a88bc362..286d8fa1bc 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/accountRows.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/accountRows.js
@@ -47,11 +47,11 @@ class AccountTable extends Component {
             <table className={combinedClasses.join(' ')}>
                 <thead>
                     <tr>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Rank</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Address</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Balance</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Percentage</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxCount</th>
+                        <th scope="col" className={classes.thItem}>Rank</th>
+                        <th scope="col" className={classes.thItem}>Address</th>
+                        <th scope="col" className={classes.thItem}>Balance</th>
+                        <th scope="col" className={classes.thItem}>Percentage</th>
+                        <th scope="col" className={classes.thItem}>TxCount</th>
                     </tr>
                 </thead>
                 {table}
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
index 84a814e173..1010e1a54a 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
@@ -35,14 +35,14 @@ class AccountTransactionTable extends Component {
             <table key={this.props.data.TxHash} className={combinedClasses.join(' ')}>
                 <thead className={classes.tHead}>
                 <tr>
-                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th>
-                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th>
-                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th>
-                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th>
-                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}> </th>
-                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th>
-                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th>
-                    <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxFee</th>
+                    <th scope="col" className={classes.thItem}>TxHash</th>
+                    <th scope="col" className={classes.thItem}>Block</th>
+                    <th scope="col" className={classes.thItem}>Age</th>
+                    <th scope="col" className={classes.thItem}>From</th>
+                    <th scope="col" className={classes.thItem}> </th>
+                    <th scope="col" className={classes.thItem}>To</th>
+                    <th scope="col" className={classes.thItem}>Value</th>
+                    <th scope="col" className={classes.thItem}>TxFee</th>
                 </tr>
                 </thead>
                 {table}
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
index d8ee77b005..b051a28cec 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
@@ -16,21 +16,26 @@ const DetailAccountsTable = (props) => {
         genFlag = true
     }
     return (
-          <tbody>
-            <tr style={{ borderTop: '1px solid #e0defb' }}>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.addressTag}>
-                    <Link to="/block/transactions" className={genFlag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
-                        {props.txHash}</Link>
+        <tbody>
+            <tr className={classes.border}>
+                <td className={classes.tdItem}>
+                    <div className={[genFlag ? "" : classes.disabled, classes.tdLink]} onClick={() => props.detailTransactionHandler(props.txHash)}>
+                        {props.txHash}
+                    </div>
                 </td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.blockNumber}</td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.age}</td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.fromTag}>{props.from}</td>
-                <td><div className={ flag ? classes.incoming : classes.out }>{ flag ? "IN" : "OUT" }</div></td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.to}</td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.value}</td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.cost}</td>
+                <td className={classes.tdItem}> {props.blockNumber} </td>
+                <td className={classes.tdItem}> {props.age} </td>
+                <td className={classes.tdItem}> {props.from} </td>
+                <td>
+                    <div className={ [flag ? classes.incoming : classes.out, classes.tdItem ]}>
+                        { flag ? "IN" : "OUT" }
+                    </div>
+                </td>
+                <td className={classes.tdItem}> {props.to} </td>
+                <td className={classes.tdItem}> {props.value} </td>
+                <td className={classes.tdItem}> {props.cost} </td>
             </tr>
-            </tbody>
+        </tbody>
     )
 };
 
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/table.css b/shyftBlockExplorerUI/src/components/table/accounts/table.css
index 01d7360aa6..231c950c0b 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/table.css
+++ b/shyftBlockExplorerUI/src/components/table/accounts/table.css
@@ -47,3 +47,4 @@ td {
     pointer-events: none;
     color: black;
 } 
+
diff --git a/shyftBlockExplorerUI/src/containers/App.js b/shyftBlockExplorerUI/src/containers/App.js
index 0b43126790..740cf74581 100644
--- a/shyftBlockExplorerUI/src/containers/App.js
+++ b/shyftBlockExplorerUI/src/containers/App.js
@@ -49,6 +49,7 @@ class App extends Component {
         internalDetailData: [],
         blocksMined: [],
         blockTransactions: [],
+        accounts: [],
         reqAccount: '',
         overlayTriggered: false,
         overlayContent: "",
@@ -76,10 +77,11 @@ class App extends Component {
         }
     };
 
+
     detailAccountHandler = async(addr) => {
         try {
             const response = await axios.get(`http://localhost:8080/api/get_account_txs/${addr}`)
-            await this.setState({ accountDetailData: response.data, reqAccount: addr, overlayTriggered: false })
+            await this.setState({ accountDetailData: response.data, reqAccount: addr, overlayTriggered: false, overlayContent: "account"  })
         }
         catch(error) {
             console.log(error)
@@ -107,6 +109,18 @@ class App extends Component {
             console.log(error)
         }
     };
+
+
+    getAccounts = async() => {
+        try {
+            const response = await axios.get(`http://localhost:8080/api/get_all_accounts`)
+            await this.setState({ accounts: response.data,  overlayTriggered: false })
+        }
+        catch(error) {
+            console.log(error)
+        }
+    };
+    
     
 
     getBlockTransactions = async(blockNumber) => {