diff --git a/src/components/HeaderSection.jsx b/src/components/HeaderSection.jsx
new file mode 100644
index 0000000..bdde79c
--- /dev/null
+++ b/src/components/HeaderSection.jsx
@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+class HeaderSection extends Component {
+  constructor(props){
+    super(props);
+  }
+  
+  componentDidMount(){
+  }
+  
+  render(){
+    let imgPath = `../static/images/${this.props.icon}`;
+    return(
+      <div className="col-sm-3">
+        <div className={this.props.classId}>
+          <div className="row">
+            <div className="col-xs-8">
+              <h4>{this.props.title}</h4>
+              {this.props.value}
+            </div>
+            <div className="col-xs-4">
+              <img src={imgPath}/>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+HeaderSection.propTypes = {
+  classId: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSection;
diff --git a/src/components/HeaderSectionLastBlock.jsx b/src/components/HeaderSectionLastBlock.jsx
new file mode 100644
index 0000000..d60401a
--- /dev/null
+++ b/src/components/HeaderSectionLastBlock.jsx
@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import HeaderSection from './HeaderSection.jsx';
+import PropTypes from 'prop-types';
+
+class HeaderSectionLastBlock extends Component {
+  constructor(props){
+    super(props);
+  }
+  
+  render(){
+    return (<HeaderSection key={0} action={this.props.action} title={this.props.title} classId={this.props.class} icon={this.props.icon} value={this.props.value}/>);
+  }
+}
+
+HeaderSectionLastBlock.propTypes = {
+  action: PropTypes.string,
+  class: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSectionLastBlock;
\ No newline at end of file
diff --git a/src/components/HeaderSectionMiningStatus.jsx b/src/components/HeaderSectionMiningStatus.jsx
new file mode 100644
index 0000000..c889e0f
--- /dev/null
+++ b/src/components/HeaderSectionMiningStatus.jsx
@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import HeaderSection from './HeaderSection.jsx';
+import PropTypes from 'prop-types';
+
+class HeaderSectionMiningStatus extends Component {
+  constructor(props){
+    super(props);
+  }
+  
+  render(){
+    return (<HeaderSection key={0} action={this.props.action} title={this.props.title} classId={this.props.class} icon={this.props.icon} value={this.props.value}/>);
+  }
+}
+
+HeaderSectionMiningStatus.propTypes = {
+  action: PropTypes.string,
+  class: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSectionMiningStatus;
\ No newline at end of file
diff --git a/src/components/HeaderSectionRPCServer.jsx b/src/components/HeaderSectionRPCServer.jsx
new file mode 100644
index 0000000..83420c1
--- /dev/null
+++ b/src/components/HeaderSectionRPCServer.jsx
@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import HeaderSection from './HeaderSection.jsx';
+import PropTypes from 'prop-types';
+
+class HeaderSectionRPCServer extends Component {
+  constructor(props){
+    super(props);
+  }
+  
+  render(){
+    return (<HeaderSection key={0} action={this.props.action} title={this.props.title} classId={this.props.class} icon={this.props.icon} value={this.props.value}/>);
+  }
+}
+
+HeaderSectionRPCServer.propTypes = {
+  action: PropTypes.string,
+  class: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSectionRPCServer;
\ No newline at end of file
diff --git a/src/components/HeaderSectionTransactions.jsx b/src/components/HeaderSectionTransactions.jsx
new file mode 100644
index 0000000..f04df0d
--- /dev/null
+++ b/src/components/HeaderSectionTransactions.jsx
@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import HeaderSection from './HeaderSection.jsx';
+import PropTypes from 'prop-types';
+
+class HeaderSectionTransactions extends Component {
+  constructor(props){
+    super(props);
+  }
+  
+  render(){
+    return (<HeaderSection key={0} action={this.props.action} title={this.props.title} classId={this.props.class} icon={this.props.icon} value={this.props.value}/>);
+  }
+}
+
+HeaderSectionTransactions.propTypes = {
+  action: PropTypes.string,
+  class: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default HeaderSectionTransactions;
\ No newline at end of file
diff --git a/src/components/HeaderSections.jsx b/src/components/HeaderSections.jsx
index 3ca3c76..3616d69 100644
--- a/src/components/HeaderSections.jsx
+++ b/src/components/HeaderSections.jsx
@@ -1,5 +1,8 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+import HeaderSectionLastBlock from './HeaderSectionLastBlock.jsx';
+import HeaderSectionRPCServer from './HeaderSectionRPCServer.jsx';
+import HeaderSectionTransactions from './HeaderSectionTransactions.jsx';
+import HeaderSectionMiningStatus from './HeaderSectionMiningStatus.jsx';
 
 class HeaderSections extends Component {
   constructor(props){
@@ -7,55 +10,15 @@ class HeaderSections extends Component {
   }
 
   render(){
-    var headerList = this.props.sectionList.map((section, index) => {
-      return (<SectionItem key={index} action={section.action} title={section.title} classId={section.class} icon={section.icon} value={section.value}/>);
-    });
     return(
       <div className="row">
-        {headerList}
+        <HeaderSectionLastBlock />
+        <HeaderSectionRPCServer />
+        <HeaderSectionTransactions />
+        <HeaderSectionMiningStatus />
       </div>
     );
   }
 }
 
-class SectionItem extends Component {
-  constructor(props){
-    super(props);
-  }
-
-  componentDidMount(){
-
-  }
-
-  render(){
-    let imgPath = `../static/images/${this.props.icon}`;
-    return(
-      <div className="col-sm-3">
-        <div className={this.props.classId}>
-          <div className="row">
-            <div className="col-xs-8">
-              <h4>{this.props.title}</h4>
-              {this.props.value}
-            </div>
-            <div className="col-xs-4">
-              <img src={imgPath}/>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-HeaderSections.propTypes = {
-  sectionList: PropTypes.array
-};
-
-SectionItem.propTypes = {
-  classId: PropTypes.string,
-  title: PropTypes.string,
-  icon: PropTypes.string,
-  value: PropTypes.string
-};
-
 export default HeaderSections;
diff --git a/src/containers/HeaderSectionLastBlockContainer.jsx b/src/containers/HeaderSectionLastBlockContainer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/containers/HeaderSectionMiningStatusContainer.jsx b/src/containers/HeaderSectionMiningStatusContainer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/containers/HeaderSectionRPCServerContainer.jsx b/src/containers/HeaderSectionRPCServerContainer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/containers/HeaderSectionTransactionContainer.jsx b/src/containers/HeaderSectionTransactionContainer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/reducers/headerSectionLastBlock.js b/src/reducers/headerSectionLastBlock.js
new file mode 100644
index 0000000..e668756
--- /dev/null
+++ b/src/reducers/headerSectionLastBlock.js
@@ -0,0 +1,21 @@
+import { handleActions } from 'redux-actions';
+import { getLatestBlockFulfilled } from '../actions';
+
+const initialState = {
+  title: 'Last Block',
+  action: 'getLatestBlockNumber',
+  class: 'last-block',
+  icon: 'last-block.png',
+  tag: 'lastBlock',
+  value: '',
+};
+
+const updateState = (state, {payload}) => ({ value: payload.toString() });
+
+export default handleActions(
+  {
+    [getLatestBlockFulfilled]: updateState,
+  },
+  initialState,
+);
+
diff --git a/src/reducers/headerSectionMiningStatus.js b/src/reducers/headerSectionMiningStatus.js
new file mode 100644
index 0000000..b2f7ca4
--- /dev/null
+++ b/src/reducers/headerSectionMiningStatus.js
@@ -0,0 +1,16 @@
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  title: 'Mining Status',
+  action: 'getMiningStatus',
+  class: 'mining-status',
+  icon: 'mining-status.png',
+  tag: 'miningStatus',
+  value: '',
+};
+
+export default handleActions(
+  {},
+  initialState,
+);
+
diff --git a/src/reducers/headerSectionRPCServer.js b/src/reducers/headerSectionRPCServer.js
new file mode 100644
index 0000000..65f7398
--- /dev/null
+++ b/src/reducers/headerSectionRPCServer.js
@@ -0,0 +1,17 @@
+import { handleActions } from 'redux-actions';
+import { getRpcServer } from '../actions';
+
+const initialState = {
+  title: 'RPC Server',
+  action: 'getRpcServer',
+  class: 'rpc-server',
+  icon: 'rpc-server.png',
+  tag: 'rpcServer',
+  value: getRpcServer().payload,
+};
+
+export default handleActions(
+  {},
+  initialState,
+);
+
diff --git a/src/reducers/headerSectionTransactions.js b/src/reducers/headerSectionTransactions.js
new file mode 100644
index 0000000..e80bca3
--- /dev/null
+++ b/src/reducers/headerSectionTransactions.js
@@ -0,0 +1,36 @@
+import { handleActions } from 'redux-actions';
+import { getLatestTransactionFulfilled } from '../actions';
+
+const initialState = {
+  title: 'Transactions',
+  action: 'getTransactionCount',
+  class: 'transactions',
+  icon: 'transactions.png',
+  tag: 'transactions',
+  value: '',
+};
+
+const updateState = (state, { payload }) => {
+  let newState = { value: state.value };
+  for (let key in payload) {
+    if (key === 'ethValue') {
+      const newkey = key.charAt(0).toUpperCase() + key.substr(1);
+      newState.value += `${newkey}: ${payload[key]}
+    `;
+    }
+    if (key === 'from') {
+      const newkey = key.charAt(0).toUpperCase() + key.substr(1);
+      newState.value += `${newkey}: ${payload[key].substring(0, 12)}...\
+    `;
+    }
+  }
+  return newState;
+};
+
+export default handleActions(
+  {
+    [getLatestTransactionFulfilled]: updateState,
+  },
+  initialState,
+);
+
diff --git a/src/reducers/headerSections.js b/src/reducers/headerSections.js
deleted file mode 100644
index 1b04bc1..0000000
--- a/src/reducers/headerSections.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { handleActions } from 'redux-actions';
-import { getRpcServer, getLatestTransactionFulfilled, getLatestBlockFulfilled} from '../actions';
-import { deepCopyState } from '../lib/utils';
-
-const initialState = {
-  sectionList: [
-    {
-      title: 'Last Block',
-      action: 'getLatestBlockNumber',
-      class: 'last-block',
-      icon: 'last-block.png',
-      tag: 'lastBlock',
-      value: '',
-    },
-    {
-      title: 'RPC Server',
-      action: 'getRpcServer',
-      class: 'rpc-server',
-      icon: 'rpc-server.png',
-      tag: 'rpcServer',
-      value: getRpcServer().payload,
-    },
-    {
-      title: 'Transactions',
-      action: 'getTransactionCount',
-      class: 'transactions',
-      icon: 'transactions.png',
-      tag: 'transactions',
-      value: '',
-    },
-    {
-      title: 'Mining Status',
-      action: 'getMiningStatus',
-      class: 'mining-status',
-      icon: 'mining-status.png',
-      tag: 'miningStatus',
-      value: '',
-    },
-  ],
-};
-
-export default handleActions(
-  {
-    [getLatestTransactionFulfilled]: (state, { payload }) => {
-      const newState = deepCopyState(state);
-      newState.sectionList.map(section => {
-        if (section.tag === 'transactions') {
-          for (let key in payload) {
-            if (key === 'ethValue') {
-              const newkey = key.charAt(0).toUpperCase() + key.substr(1);
-              section.value += `${newkey}: ${payload[key]}
-            `;
-            }
-            if (key === 'from') {
-              const newkey = key.charAt(0).toUpperCase() + key.substr(1);
-              section.value += `${newkey}: ${payload[key].substring(0, 12)}...\
-            `;
-            }
-          }
-        }
-      });
-      return newState;
-    },
-    [getLatestBlockFulfilled]: (state, {payload}) => {
-      const newState = deepCopyState(state);
-      newState.sectionList.map((section) => {
-        if (section.tag === 'lastBlock') section.value = payload.toString();
-      });
-      return newState; 
-    },
-  },
-  initialState,
-);
-
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 80ef345..a7f51bd 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -2,13 +2,19 @@ import { combineReducers } from 'redux';
 import accounts from './accounts';
 import transactions from './transactions';
 import blocks from './blocks';
-import headerSections from './headerSections';
+import headerSectionLastBlock from './headerSectionLastBlock';
+import headerSectionMiningStatus from './headerSectionMiningStatus';
+import headerSectionRPCServer from './headerSectionRPCServer';
+import headerSectionTransactions from './headerSectionTransactions';
 import events from './events';
 
 export default combineReducers({
   accounts,
   transactions,
   blocks,
-  headerSections,
+  headerSectionLastBlock,
+  headerSectionTransactions,
+  headerSectionRPCServer,
+  headerSectionMiningStatus,
   events,
 });