diff --git a/src/App.jsx b/src/App.jsx
index 322dfa0..5ac4e05 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { Component }  from 'react';
+import React, { Component } from 'react';
 import MyHeader from './component/MyHeader';
 import Footer from './component/Footer';
 import MySidebar from './component/MySidebar';
@@ -10,29 +10,36 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      portfolioName : "Retirement"
+      portfolioName: "Retirement"
     }
     this.portfolioChange = this.handlePortfolioChange.bind(this);
   }
 
   handlePortfolioChange(name) {
-    debugger;
     this.setState({
-        portfolioName: name
+      portfolioName: name
     });
-  } 
+  }
+
+  componentDidMount() {
+    fetch('http://www.mocky.io/v2/5e92ba183000008f0015669f')
+      .then(res => res.json())
+      .then((data) => {
+        this.setState({ data: data })
+      })
+      .catch(console.log)
+  }
 
   render() {
-    debugger
-    const { portfolioName } = this.state;
+    const { portfolioName, data } = this.state;
     return (
       <div className="App">
-        <MyHeader />
+        <MyHeader data={data} />
         <div className="container-fluid">
-        <div className="row">
-        <MySidebar handlePortfolioChange={this.portfolioChange.bind(this)} />
-        <MainContent portfolioName={portfolioName} />
-        </div>
+          <div className="row">
+            <MySidebar data={data} handlePortfolioChange={this.portfolioChange.bind(this)} />
+            <MainContent portfolioName={portfolioName} data={data} />
+          </div>
         </div>
         <Footer />
 
diff --git a/src/component/MainContent.jsx b/src/component/MainContent.jsx
index 5c40d65..9032aba 100644
--- a/src/component/MainContent.jsx
+++ b/src/component/MainContent.jsx
@@ -7,71 +7,31 @@ class MainContent extends Component {
     constructor(props) {
         super(props);
         this.state = {
-        }   
-      }
-
-    componentDidMount() {
-        //fetch('http://www.mocky.io/v2/5e90c9533300008a00e9cc7d')
-        fetch('http://www.mocky.io/v2/5e9178263300008a00e9cec5')
-        .then(res => res.json())
-        .then((data) => {
-          this.setState({ data: data })
-        })
-        .catch(console.log)
-      }
+        }
+    }
 
     render() {
-        debugger;
-        const { data } = this.state;
+        const { data } = this.props;
         let assets = {};
-        let totalNetworth="50 Lakh";
-        let totalNetworthChange="-100";
-        if(data && data.data && data.data.length>0){
-            for(let i=0; i<data.data.length; i++){
-                if(this.props.portfolioName && this.props.portfolioName===data.data[i].portfolioName){
+        if (data && data.data && data.data.length > 0) {
+            for (let i = 0; i < data.data.length; i++) {
+                if (this.props.portfolioName && this.props.portfolioName === data.data[i].portfolioName) {
                     assets = data.data[i].assets;
-                }        
+                }
             }
         }
-
-
         let cardsData = [];
         const cards = []
-        if(assets && assets.highlights){
+        if (assets && assets.highlights) {
             cardsData = assets.highlights;
         }
 
         for (const [index, value] of cardsData.entries()) {
-            cards.push(<InfoCard key={index} name={value.name} amount={value.amount} changePercentage={value.changePercentage} change={value.change}/>)
-        }
-
-        let icon;
-        if(totalNetworthChange < 0){
-            icon = <FontAwesomeIcon icon="arrow-alt-circle-down" color="red" className="ml-1"/>
-        }else if(totalNetworthChange > 0){
-            icon = <FontAwesomeIcon icon="arrow-alt-circle-up" color="green" className="ml-1"/>
+            cards.push(<InfoCard key={index} name={value.name} amount={value.amount} changePercentage={value.changePercentage} change={value.change} />)
         }
 
         return (
             <main role="main" className="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
-                <div className="container sticky-top bg-dark flex-md-nowrap p-0 text-left">
-                    <div className="row">
-                        <div className="col">
-                            <a className="navbar-brand col-sm-3 col-md-2 mr-0 text-white" href="#">
-                                My Networth: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
-                                <span className="label label-default ml-1">{totalNetworth}</span>
-                            </a>
-                        </div>
-                        <div className="col">
-                            <a className="navbar-brand col-sm-3 col-md-2 mr-0 text-white" href="#">
-                                Today's Change: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
-                                <span className="label label-default ml-1">{totalNetworthChange}</span>
-                                {icon}
-                            </a>
-                        </div>
-                    </div>
-                </div>
-
                 <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="btn-toolbar mb-2 mb-md-0">
@@ -93,7 +53,7 @@ class MainContent extends Component {
                     <InfoCard name="Mutual Funds" amount="15,000,00" changePercentage="8.0" change="10,000"/> */}
                 </div>
 
-                <AssetsSummary assets={assets}/>
+                <AssetsSummary assets={assets} />
             </main>
         );
     }
diff --git a/src/component/MyHeader.jsx b/src/component/MyHeader.jsx
index 9a5f37e..53b6b10 100644
--- a/src/component/MyHeader.jsx
+++ b/src/component/MyHeader.jsx
@@ -2,19 +2,56 @@ import React, { Component } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 class MyHeader extends Component {
+
+
+
+  static getDerivedStateFromProps(props, state) {
+    const { data } = props;
+    let totalNetworth = null;
+    let totalNetworthChange = null;
+    if (data && data.total) {
+      totalNetworth = data.total.totalNetworth;
+      totalNetworthChange = data.total.totalNetworthChange;
+    }
+    return { totalNetworth: totalNetworth, totalNetworthChange: totalNetworthChange };
+  }
+
+
   render() {
+    const { totalNetworth, totalNetworthChange } = this.state;
+    let icon;
+    if (totalNetworthChange < 0) {
+      icon = <FontAwesomeIcon icon="arrow-alt-circle-down" color="red" className="ml-1" />
+    } else if (totalNetworthChange > 0) {
+      icon = <FontAwesomeIcon icon="arrow-alt-circle-up" color="green" className="ml-1" />
+    }
     return (
       <nav className="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
         <div>
-        <FontAwesomeIcon icon="hand-holding-usd" color="yellow" size="3x"/>
-        <a className="navbar-brand col-sm-3 col-md-2 mr-0" href="#">My Assetz</a>
+          <FontAwesomeIcon icon="hand-holding-usd" color="yellow" size="3x" />
+          <a className="navbar-brand col-sm-3 col-md-2 mr-0" href="#">My Assetz</a>
+        </div>
+        <div className="row">
+          <div className="col">
+            <a className="navbar-brand col-sm-3 col-md-2 mr-0 text-white" href="#">
+              My Networth: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
+              <span className="label label-default ml-1">{totalNetworth}</span>
+            </a>
+          </div>
+          <div className="col">
+            <a className="navbar-brand col-sm-3 col-md-2 mr-0 text-white" href="#">
+              Today's Change: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
+              <span className="label label-default ml-1">{totalNetworthChange}</span>
+              {icon}
+            </a>
+          </div>
         </div>
         {/* <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"/> */}
-          <ul className="navbar-nav px-3">
-            <li className="nav-item text-nowrap">
-              <a className="nav-link" href="#">Sign out</a>
-            </li>
-          </ul>
+        <ul className="navbar-nav px-3">
+          <li className="nav-item text-nowrap">
+            <a className="nav-link" href="#">Sign out</a>
+          </li>
+        </ul>
       </nav>
     );
   }
diff --git a/src/component/MySidebar.jsx b/src/component/MySidebar.jsx
index 406dca6..b36e172 100644
--- a/src/component/MySidebar.jsx
+++ b/src/component/MySidebar.jsx
@@ -5,34 +5,37 @@ class MySidebar extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-          links: [
-            {key: "0", text: "Retirement", isActive: true},
-            {key: "1", text: "Near Future", isActive: false},
-            {key: "2", text: "Emergency Fund", isActive: false},
-          ]
+    }
+
+    static getDerivedStateFromProps(props, state) {
+        const links = [];
+        if (props && props.data && props.data.data && props.data.data.length > 0) {
+            for (let i = 0; i < props.data.data.length; i++) {
+                links.push({ key: i, text: props.data.data[i].portfolioName, isActive: false });
+            }
         }
-      }
+        return { links: links };
+    }
 
     handleClick(i) {
-        debugger;
         const links = this.state.links.slice();
         let portfolioName = "";
         for (const j in links) {
-            if(i == j){
-                links[j].isActive =  true;
+            if (i == j) {
+                links[j].isActive = true;
                 portfolioName = links[j].text;
-            }else{
-                links[j].isActive =  false;
+            } else {
+                links[j].isActive = false;
             }
         }
         this.setState({
             links: links,
         });
-        this.props.handlePortfolioChange(portfolioName);    
-      }  
+        this.props.handlePortfolioChange(portfolioName);
+    }
 
     render() {
+
         return (
             <nav className="col-md-2 d-none d-md-block bg-light sidebar">
                 <div className="sidebar-sticky">