diff --git a/src/App.jsx b/src/App.jsx
index 83a8543..ef2383a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,73 +3,40 @@ import MyHeader from './component/MyHeader';
 import Footer from './component/Footer';
 import MySidebar from './component/MySidebar';
 import MainContent from './component/MainContent';
+import AppContextProvider from './component/AppContextProvider';
+import AppContext from './component/AppContext';
 import './component/fontLibrary';
-import * as utils from './component/Utils'
 
 class App extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      portfolioName: "Retirement",
-      startDate: utils.yesterdayDate(),
-      endDate: utils.todayDate(),
-      data: null
+      portfolioName: "Retirement"
     }
-    this.portfolioChange = this.handlePortfolioChange.bind(this);
-    this.handlePeriodChange = this.handlePeriodChange.bind(this);
-  }
-
-  handlePortfolioChange(name) {
-    this.setState({
-      portfolioName: name
-    });
-  }
-
-  handlePeriodChange(startDate, endDate) {
-    this.setState({
-      startDate: startDate,
-      endDate: endDate
-    },
-      () => this.fetchServiceData());
-
-  } 
-
-  fetchServiceData() {
-    // const data = JSON.parse(utils.mockAssetzService());
-    // console.log(data)
-    // this.setState({
-    //   data: data
-    // });
-    //uncomment below in production.
-    fetch('http://192.168.0.112:8080/assets?startDate=' + this.state.startDate + "&endDate=" + this.state.endDate)
-      .then(res => res.json())
-      .then((data) => {
-        this.setState({ data: data })
-      })
-      .catch(console.log)
-  }
-
-  componentDidMount() {
-    this.fetchServiceData();
   }
 
   render() {
-    const { portfolioName, data } = this.state;
     return (
-      <div className="App container-fluid">
-        <div>
-          <div className="row">
-            <MyHeader data={data} />
-          </div>
-          <div className="row">
-            <MySidebar portfolioName={portfolioName} data={data} handlePortfolioChange={this.portfolioChange.bind(this)} />
-            <MainContent portfolioName={portfolioName} data={data} handlePeriodChange={this.handlePeriodChange.bind(this)} />
-          </div>
-        </div>
-        <Footer />
+      <AppContextProvider>
+        <div className="App container-fluid">
+          <AppContext.Consumer>
+            {context => (
+              <div>
+                <div className="row">
+                  <MyHeader data={context.assetzSummaryData} />
+                </div>
+                <div className="row">
+                  <MySidebar portfolioName={context.portfolioName} data={context.assetzSummaryData}  />
+                  <MainContent portfolioName={context.portfolioName} data={context.assetzSummaryData} />
+                </div>
+              </div>
+            )}
+          </AppContext.Consumer>
+          <Footer />
 
-      </div>
+        </div>
+      </AppContextProvider>
     );
   }
 }
diff --git a/src/component/AppContext.jsx b/src/component/AppContext.jsx
new file mode 100644
index 0000000..51adf17
--- /dev/null
+++ b/src/component/AppContext.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+// this is the equivalent to the createStore method of Redux
+// https://redux.js.org/api/createstore
+
+const AppContext = React.createContext();
+
+export default AppContext;
\ No newline at end of file
diff --git a/src/component/AppContextProvider.jsx b/src/component/AppContextProvider.jsx
new file mode 100644
index 0000000..70f2951
--- /dev/null
+++ b/src/component/AppContextProvider.jsx
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import AppContext from './AppContext';
+import * as utils from './Utils'
+
+class AppContextProvider extends Component {
+    state = {
+        startDate: utils.yesterdayDate(),
+        endDate: utils.todayDate(),
+        assetzSummaryData: {},
+        portfolioName: "Retirement"
+    };
+
+    componentDidMount() {
+        console.log("App.js componentDidMount called");
+        this.fetchServiceData();
+    }
+
+    fetchServiceData() {
+        // const data = JSON.parse(utils.mockAssetzService());
+        // console.log(data)
+        // this.setState({
+        //   data: data
+        // });
+        //uncomment below in production.
+        debugger
+        console.log("fetch assetz summary data service called");
+        fetch('http://192.168.0.112:8080/assets?startDate=' + this.state.startDate + "&endDate=" + this.state.endDate)
+            .then(res => res.json())
+            .then((data) => {
+                this.setState({ assetzSummaryData: data })
+            })
+            .catch(console.log)
+    }
+
+    render() {
+        return (
+            <AppContext.Provider
+                value={{
+                    startDate: this.state.startDate,
+                    assetzSummaryData: this.state.assetzSummaryData,
+                    portfolioName: this.state.portfolioName,
+                    endDate: this.state.endDate,
+
+                    setStartDate: startDate => {
+                        console.log("startDate changed to:" + startDate)
+                        this.setState({
+                            startDate: startDate
+                        }, () => { this.fetchServiceData() });
+                    },
+
+                    setEndDate: endDate => {
+                        console.log("endDate changed to:" + endDate)
+                        this.setState({
+                            endDate: endDate
+                        }, () => { this.fetchServiceData() });
+                    },
+
+                    setPortfolioName: portfolioName => {
+                        console.log("portfolioName changed to:" + portfolioName)
+                        this.setState({
+                            portfolioName: portfolioName
+                        });
+                    },
+                }}
+            >
+                {this.props.children}
+            </AppContext.Provider>
+        );
+    }
+}
+
+export default AppContextProvider;
\ No newline at end of file
diff --git a/src/component/AssetsDetails.jsx b/src/component/AssetsDetails.jsx
index de746c4..045bb3e 100644
--- a/src/component/AssetsDetails.jsx
+++ b/src/component/AssetsDetails.jsx
@@ -37,16 +37,13 @@ function percentFormatter(cell, row) {
     );
 }
 
-
-
 class AssetsDetails extends Component {
     constructor(props) {
         super(props);
         this.state = {
             data: null,
-            startDate: utils.yesterdayDate(),
-            endDate: utils.todayDate()
-        }
+            activePortfolioName: null
+        };
     }
 
     fetchServiceData() {
@@ -57,24 +54,21 @@ class AssetsDetails extends Component {
         // });
         //uncomment below in production.
         console.log("fetch service in assets details called");
-        const { assetType, portfolioName } = this.props;
+        const { assetType, portfolioName, startDate, endDate } = this.props;
+        debugger
         if (assetType && assetType != null && portfolioName && portfolioName != null) {
-            fetch('http://192.168.0.112:8080/assets/types/' + assetType + '/portfolios/' + portfolioName + '?startDate=' + this.state.startDate + "&endDate=" + this.state.endDate)
+            fetch('http://192.168.0.112:8080/assets/types/' + assetType + '/portfolios/' + portfolioName + '?startDate=' + startDate + "&endDate=" + endDate)
                 .then(res => res.json())
                 .then((data) => {
                     this.setState({ data: data })
                 })
                 .catch(console.log)
         }
-
     }
 
     componentDidMount() {
         console.log("inside componentDidMount for assets details");
-        debugger
-        if (this.props.reloadAssetDetails && this.props.reloadAssetDetails === true) {
-            this.fetchServiceData();
-        }
+        this.fetchServiceData();
     }
 
     render() {
@@ -147,7 +141,6 @@ class AssetsDetails extends Component {
                 text: 'Gain/Loss',
                 sort: true,
                 formatter: lossGainFormatter,
-                sort: true,
                 align: "left"
             },
             {
diff --git a/src/component/AssetsSummary.jsx b/src/component/AssetsSummary.jsx
index 15ad18b..842236c 100644
--- a/src/component/AssetsSummary.jsx
+++ b/src/component/AssetsSummary.jsx
@@ -107,7 +107,7 @@ class AssetsSummary extends Component {
     return (
       <div>
         <h2 className="text-left">Assets Summary</h2>
-        <BootstrapTable keyField="assetType" wrapperClasses="table-responsive text-nowrap" keyField='assetType' data={details} columns={columns} rowEvents={ rowEvents } />
+        <BootstrapTable keyField="assetType" wrapperClasses="table-responsive text-nowrap" data={details} columns={columns} rowEvents={ rowEvents } />
       </div>
     );
   }
diff --git a/src/component/MainContent.jsx b/src/component/MainContent.jsx
index 2dcf969..1403553 100644
--- a/src/component/MainContent.jsx
+++ b/src/component/MainContent.jsx
@@ -6,6 +6,7 @@ import AssetsSummary from './AssetsSummary';
 import * as utils from './Utils';
 import GoalsContainer from './GoalsContainer';
 import AssetsDetails from './AssetsDetails';
+import AppContext from './AppContext';
 
 class MainContent extends Component {
     constructor(props) {
@@ -14,25 +15,12 @@ class MainContent extends Component {
             fromDate: utils.yesterdayDate(),
             toDate: utils.todayDate(),
             assetType: null,
-            activeTab: "valuation",
-            reloadAssetDetails: false
+            activeTab: "valuation"
         }
         this.selectAssetType = this.selectAssetType.bind(this);
     }
 
-    handlePeriodChange(fromDate, toDate) {
-        const startDate = fromDate != null ? fromDate : this.state.fromDate;
-        const endDate = toDate != null ? toDate : this.state.toDate;
-        this.setState({
-            fromDate: startDate,
-            toDate: endDate
-        });
-        if (startDate != null && startDate != "" && endDate != null && endDate != "") {
-            this.props.handlePeriodChange(startDate, endDate);
-        }
-    }
-
-    handleTabChange(eventKey){
+    handleTabChange(eventKey) {
         console.log("tab is changed")
         this.setState({
             activeTab: eventKey
@@ -42,10 +30,9 @@ class MainContent extends Component {
     selectAssetType(assetType) {
         console.log("selectAssetType is called")
         this.setState({
-            assetType: assetType,
-            reloadAssetDetails: true
+            assetType: assetType
         }, () => this.handleTabChange("details"));
-      }
+    }
 
     // componentDidMount(){
     //     console.log("inside componentDidMount for mainContent");
@@ -75,42 +62,46 @@ class MainContent extends Component {
         }
 
         return (
-            <main role="main" className="col-md-10 ml-sm-auto col-lg-10 pt-auto px-auto">
-                <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-                    <h1 className="h2">{this.props.portfolioName}</h1>
-                    <div className="form-group mb-md-0">
-                        <label >From Date:</label>
-                        <input type="date" name="fromDate" max="2099-12-31" value={this.state.fromDate}
-                            min="2020-01-01" onChange={(val) => this.handlePeriodChange(val.target.value, null)} />
-                    </div>
-                    <div className="form-group mb-md-0">
-                        <label>To Date:
-                            <input className="border border-grey" type="date" name="toDate" min="2020-01-01" value={this.state.toDate}
-                                max="2099-12-31" onChange={(val) => this.handlePeriodChange(null, val.target.value)} />
-                        </label>
-                    </div>
-                    <div className="btn-toolbar mb-2 mb-md-0">
-                        <div className="btn-group mr-2">
-                            <button className="btn btn-sm btn-outline-secondary">Share</button>
-                            <button className="btn btn-sm btn-outline-secondary">Export</button>
-                        </div>
-                    </div>
-                </div>
-                <Tabs activeKey={this.state.activeTab} id="main-tabs" onSelect={(k) => this.handleTabChange(k)} unmountOnExit="true">
-                    <Tab eventKey="valuation" title="Valuation">
-                        <div className="card-columns">
-                            {cards}
+            <AppContext.Consumer>
+                {context => (
+                    <main role="main" className="col-md-10 ml-sm-auto col-lg-10 pt-auto px-auto">
+                        <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+                            <h1 className="h2">{this.props.portfolioName}</h1>
+                            <div className="form-group mb-md-0">
+                                <label >From Date:</label>
+                                <input type="date" name="fromDate" max="2099-12-31" value={context.startDate}
+                                    min="2020-01-01" onChange={(val) => context.setStartDate(val.target.value)} />
+                            </div>
+                            <div className="form-group mb-md-0">
+                                <label>To Date:
+                            <input className="border border-grey" type="date" name="toDate" min="2020-01-01" value={context.endDate}
+                                        max="2099-12-31" onChange={(val) => context.setEndDate(val.target.value)} />
+                                </label>
+                            </div>
+                            <div className="btn-toolbar mb-2 mb-md-0">
+                                <div className="btn-group mr-2">
+                                    <button className="btn btn-sm btn-outline-secondary">Share</button>
+                                    <button className="btn btn-sm btn-outline-secondary">Export</button>
+                                </div>
+                            </div>
                         </div>
-                        <AssetsSummary assets={assets} selectAssetType={this.selectAssetType.bind(this)}/>
-                    </Tab>
-                    <Tab eventKey="details" title="Details">
-                        <AssetsDetails portfolioName={this.props.portfolioName} assetType={this.state.assetType} reloadAssetDetails={this.state.reloadAssetDetails}/>
-                    </Tab>
-                    <Tab eventKey="goal" title="Goal">
-                        <GoalsContainer />
-                    </Tab>
-                </Tabs>
-            </main>
+                        <Tabs activeKey={this.state.activeTab} id="main-tabs" onSelect={(k) => this.handleTabChange(k)} unmountOnExit={true}>
+                            <Tab eventKey="valuation" title="Valuation">
+                                <div className="card-columns">
+                                    {cards}
+                                </div>
+                                <AssetsSummary assets={assets} selectAssetType={this.selectAssetType.bind(this)} />
+                            </Tab>
+                            <Tab eventKey="details" title="Details">
+                                <AssetsDetails portfolioName={context.portfolioName} assetType={this.state.assetType} startDate={context.startDate} endDate={context.endDate} />
+                            </Tab>
+                            <Tab eventKey="goal" title="Goal">
+                                <GoalsContainer />
+                            </Tab>
+                        </Tabs>
+                    </main>
+                )}
+            </AppContext.Consumer>
         );
     }
 }
diff --git a/src/component/MyHeader.jsx b/src/component/MyHeader.jsx
index 998c231..1a1d4d3 100644
--- a/src/component/MyHeader.jsx
+++ b/src/component/MyHeader.jsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as utils from './Utils'
 import Button from 'react-bootstrap/Button'
 import AppDashboard from './AppDashboard';
+import AppContext from './AppContext';
 
 class MyHeader extends Component {
 
@@ -52,32 +53,36 @@ class MyHeader extends Component {
     const formattedTotalNetworthChange = utils.formatMoneyInShortFormat(totalNetworthChange)
 
     return (
-      <nav className="navbar navbar-dark sticky-top bg-dark col-md-12">
-        <div className="row">
-          <div className="col">
-            <FontAwesomeIcon icon="hand-holding-usd" color="yellow" size="3x" />
-            <span className="navbar-brand ">My Assetz</span >
-          </div>
-          <div className="col">
-            <span className="navbar-brand  text-white">
-              My Networth: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
-              <span className="label label-default ml-1">{formattedTotalNetworth}</span>
-            </span>
-          </div>
-          <div className="col">
-            <span className="navbar-brand  text-white">
-              Today's Change: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
-              <span className="label label-default ml-1">{formattedTotalNetworthChange}</span>
-              {icon}
-            </span>
-          </div>
-          <div className="col">
-            <Button onClick={() => this.showAppStatus()} variant="outline-success">App Status!</Button>
-            <AppDashboard show={show} closeAppStatus={this.closeAppStatus.bind(this)}/>
-          </div>
-        </div>
+      <AppContext.Consumer>
+        {context => (
+          <nav className="navbar navbar-dark sticky-top bg-dark col-md-12">
+            <div className="row">
+              <div className="col">
+                <FontAwesomeIcon icon="hand-holding-usd" color="yellow" size="3x" />
+                <span className="navbar-brand ">My Assetz</span >
+              </div>
+              <div className="col">
+                <span className="navbar-brand  text-white">
+                  My Networth: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
+                  <span className="label label-default ml-1">{formattedTotalNetworth}</span>
+                </span>
+              </div>
+              <div className="col">
+                <span className="navbar-brand  text-white">
+                  Today's Change: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
+                  <span className="label label-default ml-1">{formattedTotalNetworthChange}</span>
+                  {icon}
+                </span>
+              </div>
+              <div className="col">
+                <Button onClick={() => this.showAppStatus()} variant="outline-success">App Status!</Button>
+                <AppDashboard show={show} closeAppStatus={this.closeAppStatus.bind(this)} />
+              </div>
+            </div>
 
-      </nav>
+          </nav>
+        )}
+      </AppContext.Consumer>
     );
   }
 }
diff --git a/src/component/MySidebar.jsx b/src/component/MySidebar.jsx
index bdb267e..352fdaa 100644
--- a/src/component/MySidebar.jsx
+++ b/src/component/MySidebar.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import NavLink from './NavLink';
+import AppContext from './AppContext';
 
 class MySidebar extends Component {
 
@@ -38,26 +39,31 @@ class MySidebar extends Component {
         this.setState({
             links: links,
         });
-        this.props.handlePortfolioChange(portfolioName);
+        //this.props.handlePortfolioChange(portfolioName);
+        return portfolioName;
     }
 
     render() {
         const { links } = this.state;
         return (
-            <nav className="col-md-2 bg-light sidebar">
-                <div>
-                    <ul className="nav flex-column">
-                        {links.map((link, i) =>
-                            <NavLink
-                                text={link.text}
-                                isActive={link.isActive}
-                                key={link.index}
-                                onClick={() => this.handleClick(i)}
-                            />
-                        )}
-                    </ul>
-                </div>
-            </nav>
+            <AppContext.Consumer>
+                {context => (
+                    <nav className="col-md-2 bg-light sidebar">
+                        <div>
+                            <ul className="nav flex-column">
+                                {links.map((link, i) =>
+                                    <NavLink
+                                        text={link.text}
+                                        isActive={link.isActive}
+                                        key={link.index}
+                                        onClick={() => context.setPortfolioName(this.handleClick(i))}
+                                    />
+                                )}
+                            </ul>
+                        </div>
+                    </nav>
+                )}
+            </AppContext.Consumer>
         );
     }
 }