diff --git a/shyftBlockExplorerUI/public/index.html b/shyftBlockExplorerUI/public/index.html
index 53eae41e2f..44ae755944 100644
--- a/shyftBlockExplorerUI/public/index.html
+++ b/shyftBlockExplorerUI/public/index.html
@@ -36,6 +36,11 @@
         border: 1px solid #ccc;
         background-color: white;
       }
+
+      html {
+        background-color: #f7f8f9;
+      }
+      
     </style>
 
   </head>
diff --git a/shyftBlockExplorerUI/src/components/nav/nav.js b/shyftBlockExplorerUI/src/components/nav/nav.js
index efc2b89b7c..5b8fc34ee5 100644
--- a/shyftBlockExplorerUI/src/components/nav/nav.js
+++ b/shyftBlockExplorerUI/src/components/nav/nav.js
@@ -7,7 +7,7 @@ class navBar extends React.Component  {
   constructor(props) {
     super(props);
     this.state = {
-      active: "blocks"
+      active: ""
     };
   }
 
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js b/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
index a273875d80..910bc0918e 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/accountsTable.js
@@ -3,11 +3,14 @@ import classes from './accounts.css';
 import { Link } from 'react-router-dom'
 
 const AccountsTable = (props) => {
+
+    console.log(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)}>
+                <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}  className={classes.addressTag}><Link style={{ color: '#8f67c9' }} to="/account" onClick={() => props.detailAccountHandler(props.Addr)}>
                     {props.Addr}
                 </Link></td>
                 <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} >{props.Balance}</td>
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
index 3e9e532980..22f7655aca 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsRow.js
@@ -4,12 +4,19 @@ import ErrorHandler from "./errorMessage";
 import classes from './table.css';
 
 class AccountTransactionTable extends Component {
+
+  
     render() {
+
+        console.log("inr");
+
+
         let table;
         if(this.props.data.length <= 1) {
            return <ErrorHandler />
         }else {
             table = this.props.data.map((data, i) => {
+                console.log("DATA FROM MAP [AccountTransactionTable]", data)
                 const costConversion = data.Cost / 10000000000000000000;
                 const amountConversion = data.Amount / 10000000000000000000;
                 return <DetailAccountsTable
diff --git a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
index 3164b7c164..7017b444b5 100644
--- a/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
+++ b/shyftBlockExplorerUI/src/components/table/accounts/detailAccountsTable.js
@@ -2,7 +2,7 @@ import React from 'react';
 import classes from './table.css';
 import { Link } from 'react-router-dom'
 
-const DetailAccountsTable = (props) => {
+const DetailAccountsTable = (props) => {    
     let flag;
         if(props.addr === props.to) {
             flag = true
diff --git a/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js b/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
index 93363fe81e..44411718bd 100644
--- a/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
+++ b/shyftBlockExplorerUI/src/components/table/transactions/transactionTable.js
@@ -15,7 +15,7 @@ const TransactionTable = (props) => {
         <tbody>
             <tr style={{ borderTop: '1px solid #e0defb' }}>
                 <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }} className={classes.addressTag}>
-                    <Link to="/transaction/details" style={{ color: '#8f67c9' }} className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
+                    <Link to="/transactions" style={{ color: '#8f67c9' }} className={flag ? "" : classes.disabled} onClick={() => props.detailTransactionHandler(props.txHash)}>
                         {props.txHash}</Link>
                 </td>
                 <td style={{ paddingLeft: '30pt', paddingBottom: '7.5pt', paddingTop: '7.5pt'  }}><Link  style={{ color: '#8f67c9' }}  to="/block/transactions" onClick={() => props.getBlockTransactions(props.blockNumber)}>{props.blockNumber}</Link></td>
diff --git a/shyftBlockExplorerUI/src/containers/App.js b/shyftBlockExplorerUI/src/containers/App.js
index 58b414e937..36f41137e7 100644
--- a/shyftBlockExplorerUI/src/containers/App.js
+++ b/shyftBlockExplorerUI/src/containers/App.js
@@ -63,7 +63,7 @@ class App extends Component {
     detailTransactionHandler = async(txHash) => {
         try {
             const response = await axios.get(`http://localhost:8080/api/get_transaction/${txHash}`);
-            await this.setState({ transactionDetailData: response.data })
+            await this.setState({ transactionDetailData: response.data, overlayTriggered: true, overlayContent: "transaction" })
         }
         catch(error) {
             console.log(error)
@@ -71,9 +71,12 @@ class App extends Component {
     };
 
     detailAccountHandler = async(addr) => {
+
+        console.log("[DETAIL ACCOUNT Handler]");
+
         try {
             const response = await axios.get(`http://localhost:8080/api/get_account_txs/${addr}`)
-            await this.setState({ accountDetailData: response.data, reqAccount: addr })
+            await this.setState({ accountDetailData: response.data, reqAccount: addr, overlayTriggered: true, overlayContent: "account" })
         }
         catch(error) {
             console.log(error)
@@ -104,33 +107,31 @@ class App extends Component {
         this.setState({overlayTriggered: false})
     };
 
-    getBlockData = (data) => {
-        let components = [];    
-        for (let key in data) {
-            let value =data[key]
-            console.log(key, value)            
+    getBlockData = (data, page) => {
+        let components = [];
+        console.log("ACCOUNT DATA", data)   
+        let dataEntry;
+        
+        if(page === "account") {
+            dataEntry = data[0];
+        } else { 
+            dataEntry = data;
+        }
+        
+        for (let key in dataEntry) {
+            let value = dataEntry[key]
+            // console.log(key, value)            
             components.push( 
-
                 <Grid>
                     <Row className="show-grid">
-                        <Col xs={3} md={3}  style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
+                        <Col xs={3}  md={3}  style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
                             {key}
                         </Col>
-                        <Col xs={9} md={9}  style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
+                        <Col xs={9}  md={9}  style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}>
                             {value}
                         </Col>
                     </Row>
                 </Grid>
-
-
-
-                // <li style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}}> 
-                //     <font>{key}: </font>  
-                //     <font style={{marginLeft: '30pt'}} > {value}  </font>                     
-                // </li>
-            // <div style={{fontSize:'6.5pt', color: '#565656', paddingTop: '10pt', fontFamily: 'Open Sans, sans-serif'}} >
-            //     <div>{key}: </div>  <div style={{left: '2%'}}>{value} </div> 
-            // </div>
             );          
         }
 
@@ -149,47 +150,46 @@ class App extends Component {
                 title = "BLOCK OVERVIEW";
                 data = this.state.blockDetailData;
             break; 
-
+            case "transaction" :
+                title = "TRANSACTION OVERVIEW";
+                data =  this.state.transactionDetailData;
+            break;
+            case "account" : 
+                title = "ACCOUNT OVERVIEW";
+                data =  this.state.accountDetailData;
+            break;
             default: console.log("error");
         }
 
-      
         return ( 
             <div className="static-modal">
                 <Modal.Dialog>
                     <Modal.Header>
                         <Modal.Title style={{color: '#593c83', fontSize: '8pt', letterSpacing: '2pt',  fontFamily: 'Open Sans, sans-serif' }}> {title} </Modal.Title>
                     </Modal.Header>
-
                     <Modal.Body>
                         <ul>
-                        {this.getBlockData(data)}         
+                        {this.getBlockData(data, page)}         
                         </ul>       
                     </Modal.Body>
-
                     <Modal.Footer>
                     <Button onClick={this.hideOverlay}>Close</Button>                   
                     </Modal.Footer>
                 </Modal.Dialog>
             </div>
         );
-       
     };
 
-
   render() {
-
     return (
         <BrowserRouter>
             <div>
-
                 
                 {
                     this.state.overlayTriggered ? this.renderOverlay() : null
                 }
-
         
-                <div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000}  : {backgroundColor:"#f7f8f9", paddingBottom:"5%" }  }>
+                <div style={ this.state.overlayTriggered ? {backgroundColor:"#f7f8f9", paddingBottom:"5%", opacity:0.5, zIndex: -10000, height: '100%'}  : {backgroundColor:"#f7f8f9", paddingBottom:"5%", height: '100%' }  }>
                     <Nav />
         
                     <Route path="/" exact render={({ match }) =>
@@ -269,9 +269,9 @@ class App extends Component {
 
                     <Route path="/account/detail" exact render={({match}) =>
                     <div>
-                        <AccountDetailHeader
+                        {/* <AccountDetailHeader
                             addr={this.state.reqAccount}
-                            data={this.state.accountDetailData}/>
+                            data={this.state.accountDetailData}/> */}
                         <DetailAccountsTable
                             transactionDetailHandler={this.detailTransactionHandler}
                             addr={this.state.reqAccount}