diff --git a/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js b/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
index a273875d80..977c4ee7dc 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
@@ -1,18 +1,20 @@
 import React from 'react';
-import classes from './accounts.css';
+import classes from './table.css';
 import { Link } from 'react-router-dom'
 
 const AccountsTable = (props) => {
     return (
         <tbody>
-            <tr style={{ borderTop: '1px solid #e0defb' }}>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} >{props.Rank}</td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}  className={classes.addressTag}><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.Addr)}>
+            <tr className={classes.border}>
+                <td className={classes.tdItem}>{props.Rank}</td>
+                <td className={classes.tdItem}>
+                    <Link className={classes.tdLink} to="/account/detail" onClick={() => props.detailAccountHandler(props.Addr)}>
                     {props.Addr}
-                </Link></td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} >{props.Balance}</td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} >{props.Percentage}%</td>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} >{props.AccountNonce}</td>
+                    </Link>
+                </td>
+                <td className={classes.tdItem}> {props.Balance} </td>
+                <td className={classes.tdItem}> {props.Percentage}% </td>
+                <td className={classes.tdItem}> {props.AccountNonce} </td>
             </tr>
         </tbody>
     )
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/table.css b/shyftBlockExplorerUI/src/components/table/accounts/table.css
index 5f7c847b1f..01d7360aa6 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/table.css
+++ b/shyftBlockExplorerUI/src/components/table/accounts/table.css
@@ -1,52 +1,49 @@
 .table {
-    border-spacing: 100rem;
     width: 95%;
     margin: 0 auto;  
     background-color: white;
     top: 107pt;
     left: 2.5%;
     position: absolute;
+    table-layout:fixed;
 }
 
 th {
-    background-color: aliceblue;
-    padding-right: 10px;
+    background-color: white;
+    padding: 15pt 30pt ;
+    color: #593c83;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.thItem { 
+    font-size: 8pt;
+    background-color: white; 
+    color: #4f2e7e;
 }
 
 td {
     font-size: 6pt;
     background-color: white;
     font-family: 'Open Sans', sans-serif;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.tdItem { 
+    padding-left: 30pt;
+    padding-bottom: 7.5pt; 
+    padding-top: 7.5pt;  
+}
+
+.tdLink { 
+    color: #8f67c9;
+}
+
+.border { 
+    border-top: 1px solid #e0defb;
 }
 
 .disabled {
     pointer-events: none;
     color: black;
-}
-
-.incoming {
-    height: 25px;
-    width: 35px;
-    border: 1px forestgreen;
-    border-radius: 5px;
-    background-color: #4f2e7e;
-    color: white;
-    font-size: 1rem;
-    text-transform: uppercase;
-    text-align: center;
-    vertical-align: middle;
-}
-
-.out {
-    height: 25px;
-    width: 35px;
-    border: 1px orangered;
-    border-radius: 5px;
-    background-color: orangered;
-    color: white;
-    font-size: .8rem;
-    text-transform: uppercase;
-    text-align: center;
-    vertical-align: middle;
-}
-
+} 
diff --git a/shyftBlockExplorerUI/src/components/table/blocks/blockRows.js b/shyftBlockExplorerUI/src/components/table/blocks/blockRows.js
index 741b1668e4..1648390287 100644
--- a/shyftBlockExplorerUI/src/components/table/blocks/blockRows.js
+++ b/shyftBlockExplorerUI/src/components/table/blocks/blockRows.js
@@ -45,18 +45,18 @@ class BlocksTable extends Component {
             <div>
                 <table className={combinedClasses.join(' ')}>
                     <thead>
-                    <tr>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Height</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Block Hash</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Age</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Txn</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Uncles</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}} >Coinbase</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>GasUsed</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>GasLimit</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Avg.GasPrice</th>
-                        <th scope="col" style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Reward</th>
-                    </tr>
+                        <tr>
+                            <th scope="col" className={classes.thItem}> Height </th>
+                            <th scope="col" className={classes.thItem}> Block Hash </th>
+                            <th scope="col" className={classes.thItem}> Age </th>
+                            <th scope="col" className={classes.thItem}> Txn </th>
+                            <th scope="col" className={classes.thItem}> Uncles </th>
+                            <th scope="col" className={classes.thItem}> Coinbase </th>
+                            <th scope="col" className={classes.thItem}> GasUsed </th>
+                            <th scope="col" className={classes.thItem}> GasLimit </th>
+                            <th scope="col" className={classes.thItem}> Avg.GasPrice </th>
+                            <th scope="col" className={classes.thItem}> Reward </th>
+                        </tr>
                     </thead>
                     {table}
                 </table>
diff --git a/shyftBlockExplorerUI/src/components/table/blocks/blockTable.js b/shyftBlockExplorerUI/src/components/table/blocks/blockTable.js
index c6df7862eb..b3ab4d5081 100644
--- a/shyftBlockExplorerUI/src/components/table/blocks/blockTable.js
+++ b/shyftBlockExplorerUI/src/components/table/blocks/blockTable.js
@@ -5,17 +5,23 @@ import { Link } from 'react-router-dom'
 const BlockTable = (props) => {
     return (
         <tbody>
-            <tr style={{ borderTop: '1px solid #e0defb' }}>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.height} ><Link to="/blocks" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
-                    {props.Number}
-                </Link></td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }} className={classes.hash}>{props.Hash}</td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }}>{props.AgeGet}</td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.TxCount}</td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }}>{props.UncleCount}</td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.addressTag}><Link to="/mined/blocks" style={{ color: '#8f67c9' }} onClick={() => props.getBlocksMined(props.Coinbase)}>{props.Coinbase}</Link></td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.GasUsed}</td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.GasLimit}</td>
+            <tr className={classes.border}>
+                <td className={classes.tdItem}>
+                    <Link to="/blocks" style={{ color: '#8f67c9' }} onClick={() => props.detailBlockHandler(props.Number)}>
+                        {props.Number}
+                    </Link>
+                </td>
+                <td className={classes.tdItem}> {props.Hash} </td>
+                <td className={classes.tdItem}> {props.AgeGet} </td>
+                <td className={classes.tdItem}> {props.TxCount} </td>
+                <td className={classes.tdItem}> {props.UncleCount} </td>
+                <td className={classes.tdItem}>
+                    <Link to="/mined/blocks" style={{ color: '#8f67c9' }} onClick={() => props.getBlocksMined(props.Coinbase)}>
+                        {props.Coinbase}
+                    </Link>
+                </td>
+                <td className={classes.tdItem}> {props.GasUsed} </td>
+                <td className={classes.tdItem}> {props.GasLimit} </td>
                 <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }}>TBD</td>
                 <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.Reward}</td>
             </tr>
diff --git a/shyftBlockExplorerUI/src/components/table/blocks/table.css b/shyftBlockExplorerUI/src/components/table/blocks/table.css
index 1fb7111b91..105222dc24 100644
--- a/shyftBlockExplorerUI/src/components/table/blocks/table.css
+++ b/shyftBlockExplorerUI/src/components/table/blocks/table.css
@@ -1,11 +1,11 @@
 .table {
-    border-spacing: 100rem;
     width: 95%;
     margin: 0 auto;  
     background-color: white;
     top: 107pt;
     left: 2.5%;
     position: absolute;
+    table-layout:fixed;
 }
 
 th {
@@ -15,8 +15,35 @@ th {
     font-family: 'Open Sans', sans-serif;
 }
 
+.thItem { 
+    font-size: 8pt;
+    background-color: white; 
+    color: #4f2e7e;
+}
+
 td {
     font-size: 6pt;
     background-color: white;
     font-family: 'Open Sans', sans-serif;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
+
+.tdItem { 
+    padding-left: 30pt;
+    padding-bottom: 7.5pt; 
+    padding-top: 7.5pt;  
+}
+
+.tdLink { 
+    color: #8f67c9;
+}
+
+.border { 
+    border-top: 1px solid #e0defb;
+}
+
+.disabled {
+    pointer-events: none;
+    color: black;
+} 
\ No newline at end of file
diff --git a/shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js b/shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js
index bc7dac8533..bb3f41ae27 100644
--- a/shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js
+++ b/shyftBlockExplorerUI/src/components/table/internalTransactions/internalRow.js
@@ -13,9 +13,6 @@ class InternalTransactionsTable extends Component {
     }
 
     async componentDidMount() {
-
-        console.log("in table row component");
-
         try {
             const response = await axios.get("http://localhost:8080/api/get_internal_transactions/");
             await this.setState({data: response.data});
@@ -50,17 +47,17 @@ class InternalTransactionsTable extends Component {
                 <table className={combinedClasses.join(' ')}>
                     <thead>
                     <tr>                    
-                        <th scope="col" className={classes.blockHash} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Block Hash</th>
-                        <th scope="col" className={classes.action} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Action</th>
-                        <th scope="col" className={classes.to} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >To</th>
-                        <th scope="col" className={classes.from} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >From</th>
-                        <th scope="col" className={classes.gas} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Gas</th>
-                        <th scope="col" className={classes.gasUsed} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }} >Gas Used</th>
-                        <th scope="col" className={classes.id} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>ID</th>
-                        <th scope="col" className={classes.input} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Input</th>
-                        <th scope="col" className={classes.output} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Output</th>
-                        <th scope="col" className={classes.time} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Time</th>
-                        <th scope="col" className={classes.value} style={{fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e" }}>Value</th>
+                        <th scope="col" className={classes.thItem}> Block Hash </th>
+                        <th scope="col" className={classes.thItem}> Action </th>
+                        <th scope="col" className={classes.thItem}> To </th>
+                        <th scope="col" className={classes.thItem}> From </th>
+                        <th scope="col" className={classes.thItem}> Gas </th>
+                        <th scope="col" className={classes.thItem}> Gas Used</th>
+                        <th scope="col" className={classes.thItem}> ID </th>
+                        <th scope="col" className={classes.thItem}> Input </th>
+                        <th scope="col" className={classes.thItem}> Output </th>
+                        <th scope="col" className={classes.thItem}> Time </th>
+                        <th scope="col" className={classes.thItem}> Value </th>
                     </tr>
                     </thead>
                     {table}
diff --git a/shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js b/shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js
index 8959a749fe..9bb65a3928 100644
--- a/shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js
+++ b/shyftBlockExplorerUI/src/components/table/internalTransactions/internalTable.js
@@ -6,28 +6,28 @@ import Button from 'react-bootstrap/lib/Button';
 const InternalTable = (props) => {
     return (
         <tbody>
-            <tr style={{ borderTop: '1px solid #e0defb' }}>
-                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} >
-                    <div style={{ color: '#8f67c9' }} onClick={() => props.detailInternalHandler(props.Hash)}>
+            <tr className={classes.border}>
+                <td className={classes.tdItem}>
+                    <div className={classes.tdLink} onClick={() => props.detailInternalHandler(props.Hash)}>
                         {props.Hash}
                     </div>
                 </td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }} >{props.Action}</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.From}</td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }}>{props.Gas}</td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.GasUsed}></td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.ID}</td>
-                <td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt' }}> 
-                    <Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=>alert( props.Input )}> Show Input </Button> 
+                <td className={classes.tdItem}>{props.Action}</td>
+                <td className={classes.tdItem}>{props.To}</td>
+                <td className={classes.tdItem}>{props.From}</td>
+                <td className={classes.tdItem}>{props.Gas}</td>
+                <td className={classes.tdItem}> {props.GasUsed} </td>
+                <td className={classes.tdItem}>{props.ID}</td>
+                <td className={classes.tdItem}> 
+                    <div className={classes.tdLink} onClick={()=>alert( props.Input )}> Show Input   
+                    <input type="hidden" id={"input" + props.Hash} value={props.Input} /> </div> 
                 </td>
-                <td style={{paddingLeft: '18pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'   }}> 
-                    <Button style={{color: '#8f67c9'}} bsStyle="link" bsSize="small" onClick={()=>alert(props.Output)}> Show Output </Button> 
+                <td className={classes.tdItem}> 
+                    <div className={classes.tdLink} onClick={()=>alert(props.Output)}> Show Output 
+                    <input type="hidden" id={"output" + props.Hash} value={props.Output} /> </div> 
                 </td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.Time}</td>
-                <td style={{paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.Value}</td>
-                <input type="hidden" id={"input" + props.Hash} value={props.Input} />
-                <input type="hidden" id={"output" + props.Hash} value={props.Output} /> 
+                <td className={classes.tdItem}>{props.Time}</td>
+                <td className={classes.tdItem}>{props.Value}</td>  
             </tr>
         </tbody>
     )
diff --git a/shyftBlockExplorerUI/src/components/table/internalTransactions/table.css b/shyftBlockExplorerUI/src/components/table/internalTransactions/table.css
index f66aa76930..231c950c0b 100644
--- a/shyftBlockExplorerUI/src/components/table/internalTransactions/table.css
+++ b/shyftBlockExplorerUI/src/components/table/internalTransactions/table.css
@@ -1,11 +1,11 @@
 .table {
-    border-spacing: 100rem;
     width: 95%;
     margin: 0 auto;  
     background-color: white;
     top: 107pt;
     left: 2.5%;
     position: absolute;
+    table-layout:fixed;
 }
 
 th {
@@ -15,10 +15,32 @@ th {
     font-family: 'Open Sans', sans-serif;
 }
 
+.thItem { 
+    font-size: 8pt;
+    background-color: white; 
+    color: #4f2e7e;
+}
+
 td {
     font-size: 6pt;
     background-color: white;
     font-family: 'Open Sans', sans-serif;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.tdItem { 
+    padding-left: 30pt;
+    padding-bottom: 7.5pt; 
+    padding-top: 7.5pt;  
+}
+
+.tdLink { 
+    color: #8f67c9;
+}
+
+.border { 
+    border-top: 1px solid #e0defb;
 }
 
 .disabled {
diff --git a/shyftBlockExplorerUI/src/components/table/transactions/table.css b/shyftBlockExplorerUI/src/components/table/transactions/table.css
index 782c63a445..231c950c0b 100644
--- a/shyftBlockExplorerUI/src/components/table/transactions/table.css
+++ b/shyftBlockExplorerUI/src/components/table/transactions/table.css
@@ -1,14 +1,13 @@
- .table {
-    border-spacing: 100rem;
+.table {
     width: 95%;
     margin: 0 auto;  
     background-color: white;
     top: 107pt;
     left: 2.5%;
     position: absolute;
+    table-layout:fixed;
 }
 
-
 th {
     background-color: white;
     padding: 15pt 30pt ;
@@ -16,10 +15,32 @@ th {
     font-family: 'Open Sans', sans-serif;
 }
 
+.thItem { 
+    font-size: 8pt;
+    background-color: white; 
+    color: #4f2e7e;
+}
+
 td {
     font-size: 6pt;
     background-color: white;
     font-family: 'Open Sans', sans-serif;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.tdItem { 
+    padding-left: 30pt;
+    padding-bottom: 7.5pt; 
+    padding-top: 7.5pt;  
+}
+
+.tdLink { 
+    color: #8f67c9;
+}
+
+.border { 
+    border-top: 1px solid #e0defb;
 }
 
 .disabled {
diff --git a/shyftBlockExplorerUI/src/components/table/transactions/transactionRow.js b/shyftBlockExplorerUI/src/components/table/transactions/transactionRow.js
index 19c3ca1bc3..bd4068cc60 100644
--- a/shyftBlockExplorerUI/src/components/table/transactions/transactionRow.js
+++ b/shyftBlockExplorerUI/src/components/table/transactions/transactionRow.js
@@ -45,13 +45,13 @@ class TransactionTable extends Component {
             <table key={this.state.data.TxHash} className={combinedClasses.join(' ')}>
                 <thead>
                     <tr>
-                        <th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>TxHash</th>
-                        <th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Block</th>
-                        <th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Age</th>
-                        <th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>From</th>                      
-                        <th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>To</th>
-                        <th scope="col" style={{paddingLeft: '15pt', fontSize: "8pt", backgroundColor: "white", color: "#4f2e7e"}}>Value</th>
-                        <th scope="col" style={{paddingLeft: '15pt', 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}> 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/transactions/transactionTable.js b/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
index bb62a01cff..baeafe849d 100644
--- a/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
+++ b/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import classes from './table.css';
-import arrow from '../../assets/arrow_right_black.png';
 import { Link } from 'react-router-dom'
 
 const TransactionTable = (props) => {
@@ -16,17 +15,30 @@ const TransactionTable = (props) => {
 
     return (
         <tbody>
-            <tr style={{ borderTop: '1px solid #e0defb' }}>
-                <td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'}} className={classes.addressTag}>
+            <tr className={classes.border}>
+                <td className={classes.tdItem}>
                     <Link to="/transactions" style={{ color: '#8f67c9' }} className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
-                        {props.txHash}</Link>
+                        {props.txHash}
+                    </Link>
                 </td>
-                <td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}><Link  style={{ color: '#8f67c9' }}  to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>{props.blockNumber}</Link></td>
-                <td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.age}</td>
-                <td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={flag ? classes.fromTag : classes.disabled }><Link  style={{ color: '#8f67c9' }}  to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>{props.from}</Link></td>             
-                <td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.toTag}><Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>{props.to}</Link></td>
-                <td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.value}</td>
-                <td style={{ paddingLeft: '15pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}>{props.cost}</td>
+                <td className={classes.tdItem}>
+                    <Link  style={{ color: '#8f67c9' }}  to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>
+                    {props.blockNumber}
+                    </Link>
+                </td>
+                <td className={classes.tdItem}>{props.age}</td>
+                <td className={[flag ? classes.fromTag : classes.disabled, classes.tdItem ]}>
+                    <Link  style={{ color: '#8f67c9' }}  to="/account/detail" onClick={() => props.detailAccountHandler(props.from)}>
+                        {props.from}
+                    </Link>
+                </td>             
+                <td className={classes.tdItem}>
+                    <Link style={{ color: '#8f67c9' }} to="/account/detail" onClick={() => props.detailAccountHandler(props.to)}>
+                        {props.to}
+                    </Link>
+                </td>
+                <td className={classes.tdItem}> {props.value} </td>
+                <td className={classes.tdItem}> {props.cost} </td>
             </tr>
         </tbody>
     )
diff --git a/shyftBlockExplorerUI/src/containers/App.js b/shyftBlockExplorerUI/src/containers/App.js
index 59a61c56c7..0b43126790 100644
--- a/shyftBlockExplorerUI/src/containers/App.js
+++ b/shyftBlockExplorerUI/src/containers/App.js
@@ -147,7 +147,7 @@ class App extends Component {
             if (dataEntry["To"] === null) {
                 delete dataEntry["To"]
             }
-            if( key === "Input" || key === "Output") {
+            if( key === "Input" || key === "Output" || key === "Data") {
                 components.push( 
                     <Grid>
                         <Row className="show-grid">
@@ -179,12 +179,10 @@ class App extends Component {
     }
 
     renderOverlay = () => {
-
         const page = this.state.overlayContent;
         let data, title;
         let keys = [];
         let values = [];
-
         switch (page) {
             case "block" : 
                 title = "BLOCK OVERVIEW";
@@ -204,7 +202,6 @@ class App extends Component {
             break;
             default: console.log("error");
         }
-
         return ( 
             <div className="static-modal">
                 <Modal.Dialog>
@@ -233,11 +230,11 @@ class App extends Component {
                     this.state.overlayTriggered ? this.renderOverlay() : null
                 }
         
-                <div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000, height: '100%'}  : {backgroundColor:"#f7f8f9", paddingBottom:"5%", height: '100%' }  }>
+                <div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000, height: '100%', width: '100%'}  : {backgroundColor:"#f7f8f9", paddingBottom:"5%", height: '100%', width: '100%' }  }>
                     <Nav />
         
                     <Route path="/" exact render={({ match }) =>
-                        <Home/> 
+                        <Home style={{width: '100%'}}/> 
                         }
                     />
 
@@ -323,9 +320,9 @@ class App extends Component {
                             data={this.state.accountDetailData}/>
                     </div>}
                     />
+                </div>
             </div>
-        </div>
-    </BrowserRouter>
+        </BrowserRouter>
     );
   }
 }