diff --git a/client/src/components/Lists/Channels.js b/client/src/components/Lists/Channels.js
index 84d5bb34f..6747d4ca6 100644
--- a/client/src/components/Lists/Channels.js
+++ b/client/src/components/Lists/Channels.js
@@ -1,21 +1,76 @@
 /**
  *    SPDX-License-Identifier: Apache-2.0
  */
-
+import { withStyles } from '@material-ui/core/styles';
 import React, { Component } from 'react';
 import matchSorter from 'match-sorter';
 import ReactTable from '../Styled/Table';
-import { channelsType } from '../types';
-import {
-	E006,
-	E007,
-	E008
-} from './constants';
+import { channelPeerDataType, channelsType } from '../types';
+import ChannelEndorserView from '../View/ChannelEndorserView';
+import ChannelCommitterView from '../View/ChannelCommitterView';
+import Dialog from '@material-ui/core/Dialog';
+import { E006, E007, E008 } from './constants';
 import { Info } from '@material-ui/icons';
 import moment from 'moment';
-
+const styles = theme => {
+	const { type } = theme.palette;
+	const dark = type === 'dark';
+	return {
+		partialHash: {
+			textAlign: 'center',
+			position: 'relative !important',
+			'&:hover $fullHash': {
+				display: 'block',
+				position: 'absolute !important',
+				padding: '4px 4px',
+				backgroundColor: dark ? '#5e558e' : '#000000',
+				marginTop: -30,
+				marginLeft: -215,
+				borderRadius: 8,
+				color: '#ffffff',
+				opacity: dark ? 1 : undefined
+			},
+			'&:hover $lastFullHash': {
+				display: 'block',
+				position: 'absolute !important',
+				padding: '4px 4px',
+				backgroundColor: dark ? '#5e558e' : '#000000',
+				marginTop: -30,
+				marginLeft: -415,
+				borderRadius: 8,
+				color: '#ffffff',
+				opacity: dark ? 1 : undefined
+			}
+		}
+	};
+};
 class Channels extends Component {
-	reactTableSetup = () => [
+	constructor(props) {
+		super(props);
+		this.state = {
+			dialogOpen: false,
+			dialogOpenEndorser: false,
+			sourceDialog: false
+		};
+	}
+
+	handleDialogOpenCommitter = async currentChannel => {
+		await this.props.getChannelPeerData(currentChannel);
+		this.setState({ dialogOpen: true });
+	};
+
+	handleDialogOpen = async currentChannel => {
+		await this.props.getChannelPeerData(currentChannel);
+		this.setState({ dialogOpenEndorser: true });
+	};
+	handleDialogCloseCommitter = () => {
+		this.setState({ dialogOpen: false });
+	};
+	handleDialogClose = () => {
+		this.setState({ dialogOpenEndorser: false });
+	};
+
+	reactTableSetup = classes => [
 		{
 			Header: 'ID',
 			accessor: 'id',
@@ -42,12 +97,14 @@ class Channels extends Component {
 			filterAll: true
 		},
 		{
-			Header: <span>
-			Total Blocks
-			<sup title={E006} style={{ padding: '3px' }}>
-				<Info style={{ fontSize: 'medium',marginTop:'5px' }} />
-			</sup>
-		</span>,
+			Header: (
+				<span>
+					Total Blocks
+					<sup title={E006} style={{ padding: '3px' }}>
+						<Info style={{ fontSize: 'medium', marginTop: '5px' }} />
+					</sup>
+				</span>
+			),
 			accessor: 'totalBlocks',
 			filterMethod: (filter, rows) =>
 				matchSorter(
@@ -59,12 +116,14 @@ class Channels extends Component {
 			filterAll: true
 		},
 		{
-			Header: <span>
-			Blocks
-			<sup title={E007} style={{ padding: '3px' }}>
-				<Info style={{ fontSize: 'medium',marginTop:'5px' }} />
-			</sup>
-		</span>,
+			Header: (
+				<span>
+					Blocks
+					<sup title={E007} style={{ padding: '3px' }}>
+						<Info style={{ fontSize: 'medium', marginTop: '5px' }} />
+					</sup>
+				</span>
+			),
 			accessor: 'blocks',
 			filterMethod: (filter, rows) =>
 				matchSorter(
@@ -77,12 +136,14 @@ class Channels extends Component {
 			width: 125
 		},
 		{
-			Header: <span>
-			Transactions
-			<sup title={E008} style={{ padding: '3px' }}>
-				<Info style={{ fontSize: 'medium',marginTop:'5px' }} />
-			</sup>
-		</span>,
+			Header: (
+				<span>
+					Transactions
+					<sup title={E008} style={{ padding: '3px' }}>
+						<Info style={{ fontSize: 'medium', marginTop: '5px' }} />
+					</sup>
+				</span>
+			),
 			accessor: 'transactions',
 			filterMethod: (filter, rows) =>
 				matchSorter(
@@ -94,41 +155,151 @@ class Channels extends Component {
 			filterAll: true,
 			width: 125
 		},
+		{
+			Header: <span>Committers</span>,
+			accessor: 'channel_members.committers',
+			filterMethod: (filter, rows) =>
+				matchSorter(
+					rows,
+					filter.value,
+					{ keys: ['channel_members.committers'] },
+					{ threshold: matchSorter.rankings.SIMPLEMATCH }
+				),
+			filterAll: true,
+			Cell: ({ value }) => {
+				const cts = value.slice(0, 5);
+				const rcc = value.length - cts.length;
+
+				return (
+					<span>
+						{cts.map((committer, i) => (
+							<>
+								{value.length > 1 && `${i + 1}. `}
+								{i > 0 && ' '}
+								{committer}
+								<br />
+							</>
+						))}
+						{rcc > 0 && (
+							<span>
+								<br />
+								<a
+									data-command="committer"
+									onClick={() =>
+										this.handleDialogOpenCommitter(this.props.currentChannel, rcc)
+									}
+									className={classes.partialHash}
+									href="#/channels"
+								>
+									See All
+								</a>
+							</span>
+						)}
+					</span>
+				);
+			}
+		},
+		{
+			Header: <span>Endorsers</span>,
+			accessor: 'channel_members.endorsers',
+			filterMethod: (filter, rows) =>
+				matchSorter(
+					rows,
+					filter.value,
+					{ keys: ['channel_members.endorsers'] },
+					{ threshold: matchSorter.rankings.SIMPLEMATCH }
+				),
+			Cell: ({ value }) => {
+				const etc = value.slice(0, 5);
+				const rec = value.length - etc.length;
+
+				return (
+					<span>
+						{etc.map((endorser, i) => (
+							<>
+								{i > 0 && ' '}
+								{i + 1}. {endorser}
+								<br />
+							</>
+						))}
+						{rec > 0 && (
+							<span>
+								<br />
+								<a
+									data-command="endorsers"
+									onClick={() => this.handleDialogOpen(this.props.currentChannel, rec)}
+									className={classes.partialHash}
+									href="#/channels"
+								>
+									See All
+								</a>
+							</span>
+						)}
+					</span>
+				);
+			}
+		},
 		{
 			Header: 'Timestamp',
 			accessor: 'createdat',
 			filterMethod: (filter, rows) =>
-			  matchSorter(
-				rows,
-				filter.value,
-				{ keys: ['createdat'] },
-				{ threshold: matchSorter.rankings.SIMPLEMATCH }
-			  ),
+				matchSorter(
+					rows,
+					filter.value,
+					{ keys: ['createdat'] },
+					{ threshold: matchSorter.rankings.SIMPLEMATCH }
+				),
 			filterAll: true,
-			Cell: ({ value }) =>
-			moment.utc(value).format('YYYY-MM-DD, HH:mm:ss UTC')
+			Cell: ({ value }) => moment.utc(value).format('YYYY-MM-DD, HH:mm:ss UTC')
 		}
 	];
 
 	render() {
-		const { channels } = this.props;
+		const { channels, channelPeerData, classes } = this.props;
+		const { dialogOpen, dialogOpenEndorser } = this.state;
 		return (
 			<div>
 				<ReactTable
 					data={channels}
-					columns={this.reactTableSetup()}
+					columns={this.reactTableSetup(classes)}
 					defaultPageSize={5}
 					filterable
 					minRows={0}
 					showPagination={channels.length >= 5}
 				/>
+				<Dialog
+					open={dialogOpenEndorser}
+					onClose={this.handleDialogClose}
+					fullWidth
+					maxWidth="md"
+				>
+					<ChannelEndorserView
+						channelPeerData={channelPeerData}
+						onClose={this.handleDialogClose}
+					/>
+				</Dialog>
+
+				<Dialog
+					open={dialogOpen}
+					onClose={this.handleDialogCloseCommitter}
+					fullWidth
+					maxWidth="md"
+				>
+					<ChannelCommitterView
+						channelPeerData={channelPeerData}
+						onClose={this.handleDialogCloseCommitter}
+					/>
+				</Dialog>
 			</div>
 		);
 	}
 }
 
 Channels.propTypes = {
-	channels: channelsType.isRequired
+	channels: channelsType.isRequired,
+	channelPeerData: channelPeerDataType
 };
-
-export default Channels;
+Channels.defaultProps = {
+	channelPeerData: null
+};
+export default withStyles(styles)(Channels);
diff --git a/client/src/components/Lists/SearchByQuery.js b/client/src/components/Lists/SearchByQuery.js
index a38b65372..8d8b31f77 100644
--- a/client/src/components/Lists/SearchByQuery.js
+++ b/client/src/components/Lists/SearchByQuery.js
@@ -4,6 +4,8 @@
 
 import React, { useEffect, useState } from 'react';
 import { txnListType } from '../types';
+import { blockHashTypee } from '../types';
+import { blockTxnIdType } from '../types';
 import {
 	IconButton,
 	TextField,
@@ -17,6 +19,8 @@ import { withRouter } from 'react-router-dom';
 import Dialog from '@material-ui/core/Dialog';
 import TransactionView from '../View/TransactionView';
 import BlockView from '../View/BlockView';
+import BlockHashView from '../View/BlockHashView';
+import BlockTxIdView from '../View/BlockTxIdView';
 
 const useStyles = makeStyles(theme => ({
 	searchField: {
@@ -51,11 +55,13 @@ const useStyles = makeStyles(theme => ({
 
 const SearchByQuery = props => {
 	let { txnList } = props;
+	let { blockHashList } = props;
+	let { blockTxnIdList } = props;
 	let { blockSearch } = props;
 	const classes = useStyles();
-	const options = ['Txn Hash', 'Block No'];
+	const options = ['Txn Hash', 'Block No', 'Block Hash', 'Block By Txn ID'];
 	const [search, setSearch] = useState('');
-	const [selectedOption, setSelectedOption] = useState('Txn Hash');
+	const [selectedOp, setSelectedOp] = useState('Txn Hash');
 	const [dialogOpen, setDialogOpen] = useState(false);
 	const [error, setError] = useState('');
 	const [searchClick, setSearchClick] = useState(false);
@@ -69,21 +75,25 @@ const SearchByQuery = props => {
 	}, [searchClick]);
 
 	const searchData = async () => {
-		if (selectedOption === 'Txn Hash') {
+		if (selectedOp === 'Txn Hash') {
 			await props.getTxnList(props.currentChannel, search);
-		} else if (selectedOption === 'Block No') {
+		} else if (selectedOp === 'Block No') {
 			await props.getBlockSearch(props.currentChannel, search);
+		} else if (selectedOp === 'Block Hash') {
+			await props.getBlockHash(props.currentChannel, search);
+		} else if (selectedOp === 'Block By Txn ID') {
+			console.log('entered');
+			await props.getBlockByTxnId(props.currentChannel, search);
 		}
 		setSearchClick(true);
 	};
-
 	const handleSubmit = async e => {
 		e.preventDefault();
 		if (
 			!search ||
-			(selectedOption === 'Block No' && (isNaN(search) || search.length > 9))
+			(selectedOp === 'Block No' && (isNaN(search) || search.length > 9))
 		) {
-			setError('Please enter valid txn hash/block no');
+			setError('Please enter valid txn hash/block no/block hash/block by txn Id');
 			return;
 		}
 		searchData();
@@ -112,7 +122,7 @@ const SearchByQuery = props => {
 					}
 				}}
 				onKeyPress={e => e.key === 'Enter' && handleSubmit(e)}
-				label=" Search by Txn Hash / Block"
+				label=" Search by Txn Hash / Block no / BlockHash / Block by Txn Id"
 				variant="outlined"
 				fullWidth
 				error={error}
@@ -122,10 +132,10 @@ const SearchByQuery = props => {
 					startAdornment: (
 						<InputAdornment position="start">
 							<Select
-								value={selectedOption}
+								value={selectedOp}
 								className={classes.selectInput}
 								onChange={e => {
-									setSelectedOption(e.target.value);
+									setSelectedOp(e.target.value);
 									if (error) {
 										setDialogOpen(false);
 										setError('');
@@ -163,17 +173,26 @@ const SearchByQuery = props => {
 				fullWidth
 				maxWidth="md"
 			>
-				{!error && selectedOption === 'Block No' ? (
+				{!error && selectedOp === 'Block No' ? (
 					<BlockView blockHash={blockSearch} onClose={handleDialogClose} />
-				) : (
+				) : !error && selectedOp === 'Txn Hash' ? (
 					<TransactionView transaction={txnList} onClose={handleDialogClose} />
+				) : !error && selectedOp === 'Block By Txn ID' ? (
+					<BlockTxIdView blockByTxId={blockTxnIdList} onClose={handleDialogClose} />
+				) : (
+					<BlockHashView
+						blockByBlockHash={blockHashList}
+						onClose={handleDialogClose}
+					/>
 				)}
 			</Dialog>
 		</div>
 	);
 };
 SearchByQuery.propTypes = {
-	txnList: txnListType.isRequired
+	txnList: txnListType.isRequired,
+	blockHashList: blockHashTypee.isRequired,
+	blockTxnIdList: blockTxnIdType.isRequired
 };
 
 export default withRouter(SearchByQuery);
diff --git a/client/src/components/Main.js b/client/src/components/Main.js
index 0b9e72ea6..59dad9cb4 100644
--- a/client/src/components/Main.js
+++ b/client/src/components/Main.js
@@ -10,6 +10,7 @@ import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import BlocksView from './View/BlocksView';
 import NetworkView from './View/NetworkView';
 import TransactionsView from './View/TransactionsView';
+import ChannelView from './View/ChannelView';
 import ChaincodeView from './View/ChaincodeView';
 import DashboardView from './View/DashboardView';
 import ChannelsView from './View/ChannelsView';
@@ -23,10 +24,13 @@ import {
 	getTransactionType,
 	peerListType,
 	txnListType,
+	blockHashTypee,
+	blockTxnIdType,
 	blockSearchType,
 	blockRangeSearchType,
 	blockListSearchType,
 	chaincodeMetaDataType,
+	channelPeerDataType,
 	transactionType,
 	transactionByOrgType,
 	transactionListType
@@ -48,8 +52,11 @@ const {
 	channelsSelector,
 	peerListSelector,
 	txnListSelector,
+	blockHashSelector,
+	blockTxnIdSelector,
 	blockSearchSelector,
 	chaincodeMetaDataSelector,
+	channelPeerDataSelector,
 	transactionSelector,
 	transactionListSelector,
 	blockRangeSearchSelector,
@@ -86,9 +93,13 @@ export const Main = props => {
 		getTransaction,
 		peerList,
 		txnList,
+		blockHashList,
+		blockTxnIdList,
 		blockSearch,
 		chaincodeMetaData,
+		channelPeerData,
 		getChaincodeMetaData,
+		getChannelPeerData,
 		transaction,
 		transactionByOrg,
 		transactionList,
@@ -106,7 +117,9 @@ export const Main = props => {
 		transactionListTotalPages,
 		transactionListSearchQuery,
 		transactionListSearchPageParam,
-		getTxnList
+		getTxnList,
+		getBlockHash,
+		getBlockByTxnId
 	} = props;
 
 	const blocksViewProps = {
@@ -119,7 +132,11 @@ export const Main = props => {
 		blockListSearchQuery,
 		blockRangeSearch,
 		txnList,
+		blockHashList,
+		blockTxnIdList,
 		getTxnList,
+		getBlockHash,
+		getBlockByTxnId,
 		transactionByOrg,
 		currentChannel,
 		getTransaction,
@@ -133,14 +150,24 @@ export const Main = props => {
 	};
 
 	const channelsViewProps = {
-		channels
+		channels,
+		getChannelPeerData,
+		channelPeerData,
+		currentChannel
+	};
+	const channelViewProps = {
+		channels,
+		getChannelPeerData,
+		channelPeerData,
+		currentChannel
 	};
-
 	const dashboardViewProps = {
 		blockListSearch,
 		dashStats,
 		peerList,
 		txnList,
+		blockHashList,
+		blockTxnIdList,
 		blockSearch,
 		transactionByOrg,
 		blockActivity
@@ -212,6 +239,13 @@ export const Main = props => {
 							<ChaincodeView {...{ ...chaincodeViewProps, ...routeprops }} />
 						)}
 					/>
+					<Private
+						exact
+						path="/channels"
+						render={routeprops => (
+							<ChannelView {...{ ...channelViewProps, ...routeprops }} />
+						)}
+					/>
 					<Private
 						exact
 						path="/channels"
@@ -254,8 +288,11 @@ Main.propTypes = {
 	getTransaction: getTransactionType.isRequired,
 	peerList: peerListType.isRequired,
 	txnList: txnListType.isRequired,
+	blockHashList: blockHashTypee.isRequired,
+	blockTxnIdList: blockTxnIdType.isRequired,
 	blockSearch: blockSearchType.isRequired,
 	chaincodeMetaData: chaincodeMetaDataType.isRequired,
+	channelPeerData: channelPeerDataType.isRequired,
 	transaction: transactionType.isRequired,
 	transactionByOrg: transactionByOrgType.isRequired,
 	transactionList: transactionListType.isRequired
@@ -270,8 +307,11 @@ const connectedComponent = connect(
 		dashStats: dashStatsSelector(state),
 		peerList: peerListSelector(state),
 		txnList: txnListSelector(state),
+		blockHashList: blockHashSelector(state),
+		blockTxnIdList: blockTxnIdSelector(state),
 		blockSearch: blockSearchSelector(state),
 		chaincodeMetaData: chaincodeMetaDataSelector(state),
+		channelPeerData: channelPeerDataSelector(state),
 		transaction: transactionSelector(state),
 		transactionByOrg: transactionByOrgSelector(state),
 		transactionList: transactionListSelector(state),
@@ -283,7 +323,9 @@ const connectedComponent = connect(
 		blockRangeLoaded: blockRangeLoadedSelector(state),
 		transactionListSearch: transactionListSearchSelector(state),
 		transactionListTotalPages: transactionListTotalPagesSelector(state),
-		transactionListSearchTotalPages: transactionListSearchTotalPagesSelector(state),
+		transactionListSearchTotalPages: transactionListSearchTotalPagesSelector(
+			state
+		),
 		transactionListSearchPageParam: transactionListSearchPageParamSelector(state),
 		transactionListSearchQuery: transactionListSearchQuerySelector(state),
 		blockActivity: blockActivitySelector(state)
@@ -294,7 +336,10 @@ const connectedComponent = connect(
 		getBlockRangeSearch: tableOperations.blockRangeSearch,
 		getTransactionListSearch: tableOperations.transactionListSearch,
 		getTxnList: tableOperations.txnList,
+		getBlockHash: tableOperations.blockHashList,
+		getBlockByTxnId: tableOperations.blockTxnIdList,
 		getChaincodeMetaData: tableOperations.chaincodeMetaData,
+		getChannelPeerData: tableOperations.channelPeerData
 	}
 )(Main);
 export default withStyles(styles)(connectedComponent);
diff --git a/client/src/components/View/BlockHashView.js b/client/src/components/View/BlockHashView.js
new file mode 100644
index 000000000..e715591a1
--- /dev/null
+++ b/client/src/components/View/BlockHashView.js
@@ -0,0 +1,139 @@
+/**
+ *    SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import FontAwesome from 'react-fontawesome';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Table, Card, CardBody, CardTitle } from 'reactstrap';
+import { blockbyBlockHashType, onCloseType } from '../types';
+import Modal from '../Styled/Modal';
+
+const styles = theme => ({
+	cubeIcon: {
+		color: '#ffffff',
+		marginRight: 20
+	}
+});
+
+export class BlockHashView extends Component {
+	handleClose = () => {
+		const { onClose } = this.props;
+		onClose();
+	};
+
+	render() {
+		const { blockByBlockHash, classes } = this.props;
+		if (!blockByBlockHash) {
+			return (
+				<Modal>
+					{modalClasses => (
+						<Card className={modalClasses.card}>
+							<CardTitle className={modalClasses.title}>
+								<FontAwesome name="cube" />
+								Block Details
+							</CardTitle>
+							<CardBody className={modalClasses.body}>
+								<span>
+									{' '}
+									<FontAwesome name="circle-o-notch" size="3x" spin />
+								</span>
+							</CardBody>
+						</Card>
+					)}
+				</Modal>
+			);
+		}
+		return (
+			<Modal>
+				{modalClasses => (
+					<div className={modalClasses.dialog}>
+						<Card className={modalClasses.card}>
+							<CardTitle className={modalClasses.title}>
+								<FontAwesome name="cube" className={classes.cubeIcon} />
+								Block Details
+								<button
+									type="button"
+									onClick={this.handleClose}
+									className={modalClasses.closeBtn}
+								>
+									<FontAwesome name="close" />
+								</button>
+							</CardTitle>
+							<CardBody className={modalClasses.body}>
+								<Table striped hover responsive className="table-striped">
+									<tbody>
+										<tr>
+											<th>Channel name:</th>
+											<td>{blockByBlockHash.channelname}</td>
+										</tr>
+										<tr>
+											<th>Block Number</th>
+											<td>{blockByBlockHash.blocknum}</td>
+										</tr>
+										<tr>
+											<th>Created at</th>
+											<td>{blockByBlockHash.createdt}</td>
+										</tr>
+
+										<tr>
+											<th>Number of Transactions</th>
+											<td>{blockByBlockHash.txcount}</td>
+										</tr>
+										<tr>
+											<th>Block Hash</th>
+											<td>
+												{blockByBlockHash.blockhash}
+												<button type="button" className={modalClasses.copyBtn}>
+													<div className={modalClasses.copy}>Copy</div>
+													<div className={modalClasses.copied}>Copied</div>
+													<CopyToClipboard text={blockByBlockHash.blockhash}>
+														<FontAwesome name="copy" />
+													</CopyToClipboard>
+												</button>
+											</td>
+										</tr>
+										<tr>
+											<th>Data Hash</th>
+											<td>
+												{blockByBlockHash.datahash}
+												<button type="button" className={modalClasses.copyBtn}>
+													<div className={modalClasses.copy}>Copy</div>
+													<div className={modalClasses.copied}>Copied</div>
+													<CopyToClipboard text={blockByBlockHash.datahash}>
+														<FontAwesome name="copy" />
+													</CopyToClipboard>
+												</button>
+											</td>
+										</tr>
+										<tr>
+											<th>Prehash</th>
+											<td>
+												{blockByBlockHash.prehash}
+												<button type="button" className={modalClasses.copyBtn}>
+													<div className={modalClasses.copy}>Copy</div>
+													<div className={modalClasses.copied}>Copied</div>
+													<CopyToClipboard text={blockByBlockHash.prehash}>
+														<FontAwesome name="copy" />
+													</CopyToClipboard>
+												</button>
+											</td>
+										</tr>
+									</tbody>
+								</Table>
+							</CardBody>
+						</Card>
+					</div>
+				)}
+			</Modal>
+		);
+	}
+}
+
+BlockHashView.propTypes = {
+	blockByBlockHash: blockbyBlockHashType.isRequired,
+	onClose: onCloseType.isRequired
+};
+
+export default withStyles(styles)(BlockHashView);
diff --git a/client/src/components/View/BlockTxIdView.js b/client/src/components/View/BlockTxIdView.js
new file mode 100644
index 000000000..b4b5bec2a
--- /dev/null
+++ b/client/src/components/View/BlockTxIdView.js
@@ -0,0 +1,139 @@
+/**
+ *    SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import FontAwesome from 'react-fontawesome';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Table, Card, CardBody, CardTitle } from 'reactstrap';
+import { blockbyTxIdType, onCloseType } from '../types';
+import Modal from '../Styled/Modal';
+
+const styles = theme => ({
+	cubeIcon: {
+		color: '#ffffff',
+		marginRight: 20
+	}
+});
+
+export class BlockTxIdView extends Component {
+	handleClose = () => {
+		const { onClose } = this.props;
+		onClose();
+	};
+
+	render() {
+		const { blockByTxId, classes } = this.props;
+		if (!blockByTxId) {
+			return (
+				<Modal>
+					{modalClasses => (
+						<Card className={modalClasses.card}>
+							<CardTitle className={modalClasses.title}>
+								<FontAwesome name="cube" />
+								Block Details
+							</CardTitle>
+							<CardBody className={modalClasses.body}>
+								<span>
+									{' '}
+									<FontAwesome name="circle-o-notch" size="3x" spin />
+								</span>
+							</CardBody>
+						</Card>
+					)}
+				</Modal>
+			);
+		}
+		return (
+			<Modal>
+				{modalClasses => (
+					<div className={modalClasses.dialog}>
+						<Card className={modalClasses.card}>
+							<CardTitle className={modalClasses.title}>
+								<FontAwesome name="cube" className={classes.cubeIcon} />
+								Block Details
+								<button
+									type="button"
+									onClick={this.handleClose}
+									className={modalClasses.closeBtn}
+								>
+									<FontAwesome name="close" />
+								</button>
+							</CardTitle>
+							<CardBody className={modalClasses.body}>
+								<Table striped hover responsive className="table-striped">
+									<tbody>
+										<tr>
+											<th>Channel name:</th>
+											<td>{blockByTxId.channelname}</td>
+										</tr>
+										<tr>
+											<th>Block Number</th>
+											<td>{blockByTxId.blocknum}</td>
+										</tr>
+										<tr>
+											<th>Created at</th>
+											<td>{blockByTxId.createdt}</td>
+										</tr>
+
+										<tr>
+											<th>Number of Transactions</th>
+											<td>{blockByTxId.txcount}</td>
+										</tr>
+										<tr>
+											<th>Block Hash</th>
+											<td>
+												{blockByTxId.blockhash}
+												<button type="button" className={modalClasses.copyBtn}>
+													<div className={modalClasses.copy}>Copy</div>
+													<div className={modalClasses.copied}>Copied</div>
+													<CopyToClipboard text={blockByTxId.blockhash}>
+														<FontAwesome name="copy" />
+													</CopyToClipboard>
+												</button>
+											</td>
+										</tr>
+										<tr>
+											<th>Data Hash</th>
+											<td>
+												{blockByTxId.datahash}
+												<button type="button" className={modalClasses.copyBtn}>
+													<div className={modalClasses.copy}>Copy</div>
+													<div className={modalClasses.copied}>Copied</div>
+													<CopyToClipboard text={blockByTxId.datahash}>
+														<FontAwesome name="copy" />
+													</CopyToClipboard>
+												</button>
+											</td>
+										</tr>
+										<tr>
+											<th>Prehash</th>
+											<td>
+												{blockByTxId.prehash}
+												<button type="button" className={modalClasses.copyBtn}>
+													<div className={modalClasses.copy}>Copy</div>
+													<div className={modalClasses.copied}>Copied</div>
+													<CopyToClipboard text={blockByTxId.prehash}>
+														<FontAwesome name="copy" />
+													</CopyToClipboard>
+												</button>
+											</td>
+										</tr>
+									</tbody>
+								</Table>
+							</CardBody>
+						</Card>
+					</div>
+				)}
+			</Modal>
+		);
+	}
+}
+
+BlockTxIdView.propTypes = {
+	blockByTxId: blockbyTxIdType.isRequired,
+	onClose: onCloseType.isRequired
+};
+
+export default withStyles(styles)(BlockTxIdView);
diff --git a/client/src/components/View/ChannelCommitterView.js b/client/src/components/View/ChannelCommitterView.js
new file mode 100644
index 000000000..c9b2fa7c0
--- /dev/null
+++ b/client/src/components/View/ChannelCommitterView.js
@@ -0,0 +1,157 @@
+/**
+ *    SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import FontAwesome from 'react-fontawesome';
+import { Table, Card, CardBody, CardTitle } from 'reactstrap';
+import { channelPeerDataType, onCloseType } from '../types';
+import Modal from '../Styled/Modal';
+
+const styles = theme => {
+	const { type } = theme.palette;
+	const dark = type === 'dark';
+	return {
+		listIcon: {
+			color: '#ffffff',
+			marginRight: 20
+		},
+		colHe: {
+			fontWeight: 'bold',
+			color: dark ? 'white' : 'black'
+		},
+		bodyCon: {
+			maxHeight: '550px',
+			overflowY: 'auto',
+			display: 'flex',
+			justifyContent: 'space-between'
+		},
+		tableWrap: {
+			flex: '1',
+			margin: '0 10px'
+		},
+		text: {
+			color: dark ? 'white' : 'black'
+		},
+		scroll: {
+			zIndex: 1,
+			maxHeight: 600,
+			overflowY: 'auto',
+			borderRadius: '2px',
+			'&::-webkit-scrollbar:horizontal': {
+				height: '4px'
+			},
+			'&::-webkit-scrollbar-thumb:horizontal': {
+				background: theme.palette.type === 'dark' ? 'gray' : 'lightgray',
+				borderRadius: '4px'
+			}
+		}
+	};
+};
+
+export class ChannelCommitterView extends Component {
+	handleClose = () => {
+		const { onClose } = this.props;
+		onClose();
+	};
+
+	renCol = (committers, starti, endi) => {
+		const col = [];
+		for (let i = starti; i < endi; i++) {
+			col.push(
+				<tr key={i}>
+					<td className={this.props.classes.text}>{i + 1}</td>
+					<td className={this.props.classes.text}>{committers[i]}</td>
+				</tr>
+			);
+		}
+		return col;
+	};
+
+	render() {
+		const { channelPeerData, classes } = this.props;
+		if (channelPeerData) {
+			const { committers } = channelPeerData;
+			const noCol = Math.ceil(committers.length / 10);
+			const col = [];
+			for (let i = 0; i < noCol; i++) {
+				const starti = i * 10;
+				const endi = Math.min((i + 1) * 10, committers.length);
+				col.push(
+					<div key={i} className={classes.tableWrap}>
+						<Table
+							striped
+							hover
+							responsive
+							className="table-striped"
+							style={{ width: '100%' }}
+						>
+							<tbody>
+								<tr>
+									<th className={classes.colHe}>ID</th>
+									<th className={classes.colHe}>Committers List</th>
+								</tr>
+								{this.renCol(committers, starti, endi)}
+							</tbody>
+						</Table>
+					</div>
+				);
+			}
+			return (
+				<Modal>
+					{modalClasses => (
+						<div className={modalClasses.dialog}>
+							<Card className={modalClasses.card}>
+								<CardTitle className={modalClasses.title}>
+									<FontAwesome name="list-alt" className={classes.listIcon} />
+									Channel Committers List
+									<button
+										type="button"
+										onClick={this.handleClose}
+										className={modalClasses.closeBtn}
+									>
+										<FontAwesome name="close" />
+									</button>
+								</CardTitle>
+								<CardBody
+									className={`${modalClasses.body} ${classes.bodyCon} ${classes.scroll}`}
+								>
+									{col}
+								</CardBody>
+							</Card>
+						</div>
+					)}
+				</Modal>
+			);
+		}
+		return (
+			<Modal>
+				{modalClasses => (
+					<Card className={modalClasses.card}>
+						<CardTitle className={modalClasses.title}>
+							<FontAwesome name="cube" />
+							Channel Committers List
+						</CardTitle>
+						<CardBody className={modalClasses.body}>
+							<span>
+								{' '}
+								<FontAwesome name="circle-o-notch" size="3x" spin />
+							</span>
+						</CardBody>
+					</Card>
+				)}
+			</Modal>
+		);
+	}
+}
+
+ChannelCommitterView.propTypes = {
+	channelPeerData: channelPeerDataType.isRequired,
+	onClose: onCloseType.isRequired
+};
+ChannelCommitterView.defaultProps = {
+	channelPeerData: null
+};
+
+export default withStyles(styles)(ChannelCommitterView);
diff --git a/client/src/components/View/ChannelEndorserView.js b/client/src/components/View/ChannelEndorserView.js
new file mode 100644
index 000000000..c1f36b3c4
--- /dev/null
+++ b/client/src/components/View/ChannelEndorserView.js
@@ -0,0 +1,159 @@
+/**
+ *    SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import FontAwesome from 'react-fontawesome';
+import { Table, Card, CardBody, CardTitle } from 'reactstrap';
+import { channelPeerDataType, onCloseType } from '../types';
+import Modal from '../Styled/Modal';
+
+const styles = theme => {
+	const { type } = theme.palette;
+	const dark = type === 'dark';
+	return {
+		listIcon: {
+			color: '#ffffff',
+			marginRight: 20
+		},
+		colHead: {
+			fontWeight: 'bold',
+			color: dark ? 'white' : 'black'
+		},
+		bodyContains: {
+			maxHeight: '550px',
+			overflowY: 'auto',
+			display: 'flex',
+			justifyContent: 'space-between'
+		},
+		tbleWraps: {
+			flex: '1',
+			margin: '0 10px'
+		},
+		text: {
+			color: dark ? 'white' : 'black'
+		},
+		scroll: {
+			zIndex: 1,
+			maxHeight: 600,
+			overflowY: 'auto',
+			borderRadius: '2px',
+			'&::-webkit-scrollbar:horizontal': {
+				height: '4px'
+			},
+			'&::-webkit-scrollbar-thumb:horizontal': {
+				background: theme.palette.type === 'dark' ? 'gray' : 'lightgray',
+				borderRadius: '4px'
+			}
+		}
+	};
+};
+
+export class ChannelEndorserView extends Component {
+	handleClose = () => {
+		const { onClose } = this.props;
+		onClose();
+	};
+
+	rendCol = (endorsers, starti, endi) => {
+		const cols = [];
+		for (let i = starti; i < endi; i++) {
+			cols.push(
+				<tr key={i}>
+					<td className={this.props.classes.text}>{i + 1}</td>
+					<td className={this.props.classes.text}>{endorsers[i]}</td>
+				</tr>
+			);
+		}
+		return cols;
+	};
+
+	render() {
+		const { channelPeerData, classes } = this.props;
+		if (channelPeerData) {
+			const { endorsers } = channelPeerData;
+			const nocol = Math.ceil(endorsers.length / 10);
+			const cols = [];
+			for (let i = 0; i < nocol; i++) {
+				const starti = i * 10;
+				const endi = Math.min((i + 1) * 10, endorsers.length);
+				cols.push(
+					<div key={i} className={classes.tbleWraps}>
+						<Table
+							striped
+							hover
+							responsive
+							className="table-striped"
+							style={{ width: '100%' }}
+						>
+							<tbody>
+								<tr>
+									<th className={classes.colHead}>ID</th>
+									<th className={classes.colHead}>Peers List</th>
+								</tr>
+								{this.rendCol(endorsers, starti, endi)}
+							</tbody>
+						</Table>
+					</div>
+				);
+			}
+
+			return (
+				<Modal>
+					{modalClasses => (
+						<div className={modalClasses.dialog}>
+							<Card className={modalClasses.card}>
+								<CardTitle className={modalClasses.title}>
+									<FontAwesome name="list-alt" className={classes.listIcon} />
+									Channel Peers List
+									<button
+										type="button"
+										onClick={this.handleClose}
+										className={modalClasses.closeBtn}
+									>
+										<FontAwesome name="close" />
+									</button>
+								</CardTitle>
+								<CardBody
+									className={`${modalClasses.body} ${classes.bodyContains} ${classes.scroll}`}
+								>
+									{cols}
+								</CardBody>
+							</Card>
+						</div>
+					)}
+				</Modal>
+			);
+		}
+		return (
+			<Modal>
+				{modalClasses => (
+					<Card className={modalClasses.card}>
+						<CardTitle className={modalClasses.title}>
+							<FontAwesome name="cube" />
+							Channel Peers List
+						</CardTitle>
+						<CardBody className={modalClasses.body}>
+							<span>
+								{' '}
+								<FontAwesome name="circle-o-notch" size="3x" spin />
+							</span>
+						</CardBody>
+					</Card>
+				)}
+			</Modal>
+		);
+	}
+}
+
+ChannelEndorserView.propTypes = {
+	channelPeerData: channelPeerDataType.isRequired,
+	onClose: onCloseType.isRequired
+};
+
+ChannelEndorserView.defaultProps = {
+	channelPeerData: null
+};
+
+export default withStyles(styles)(ChannelEndorserView);
diff --git a/client/src/components/View/ChannelView.js b/client/src/components/View/ChannelView.js
new file mode 100644
index 000000000..7ac74140d
--- /dev/null
+++ b/client/src/components/View/ChannelView.js
@@ -0,0 +1,31 @@
+/**
+ *    SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import View from '../Styled/View';
+import Channels from '../Lists/Channels';
+import { channelPeerDataType, channelsType } from '../types';
+
+export const ChannelView = ({
+	currentChannel,
+	getChannelPeerData,
+	channels,
+	channelPeerData
+}) => (
+	<View>
+		<Channels
+			currentChannel={currentChannel}
+			channels={channels}
+			channelPeerData={channelPeerData}
+			getChannelPeerData={getChannelPeerData}
+		/>
+	</View>
+);
+
+ChannelView.propTypes = {
+	channels: channelsType.isRequired,
+	channelPeerData: channelPeerDataType.isRequired
+};
+
+export default ChannelView;
diff --git a/client/src/components/View/DashboardView.js b/client/src/components/View/DashboardView.js
index c4d587f49..9bce4331b 100644
--- a/client/src/components/View/DashboardView.js
+++ b/client/src/components/View/DashboardView.js
@@ -18,6 +18,8 @@ import {
 	peerListType,
 	txnListType,
 	blockSearchType,
+	blockHashTypee,
+	blockTxnIdType,
 	transactionByOrgType
 } from '../types';
 import SearchByQuery from '../Lists/SearchByQuery';
@@ -25,7 +27,7 @@ import { connect } from 'react-redux';
 import { currentChannelSelector } from '../../state/redux/charts/selectors';
 import { tableOperations } from '../../state/redux/tables';
 
-const { txnList, blockSearch } = tableOperations;
+const { txnList, blockSearch, blockHashList, blockTxnIdList } = tableOperations;
 
 /* istanbul ignore next */
 const styles = theme => {
@@ -215,6 +217,8 @@ export class DashboardView extends Component {
 			peerList,
 			txnList,
 			blockSearch,
+			blockHashList,
+			blockTxnIdList,
 			blockActivity,
 			transactionByOrg
 		} = this.props;
@@ -224,6 +228,10 @@ export class DashboardView extends Component {
 			searchError = 'Txn not found';
 		} else if (typeof blockSearch === 'string') {
 			searchError = 'Block not found';
+		} else if (typeof blockHashList === 'string') {
+			searchError = 'Block not found';
+		} else if (typeof blockTxnIdList === 'string') {
+			searchError = 'Block not found';
 		}
 		if (hasDbError) {
 			return (
@@ -251,9 +259,13 @@ export class DashboardView extends Component {
 							<SearchByQuery
 								getTxnList={this.props.getTxnList}
 								getBlockSearch={this.props.getBlockSearch}
+								getBlockHash={this.props.getBlockHash}
+								getBlockByTxnId={this.props.getBlockByTxnId}
 								currentChannel={this.props.currentChannel}
 								txnList={txnList}
 								blockSearch={blockSearch}
+								blockHashList={blockHashList}
+								blockTxnIdList={blockTxnIdList}
 								searchError={searchError}
 							/>
 						</Col>
@@ -353,6 +365,8 @@ DashboardView.propTypes = {
 	peerList: peerListType.isRequired,
 	txnList: txnListType.isRequired,
 	blockSearch: blockSearchType.isRequired,
+	blockHashList: blockHashTypee.isRequired,
+	blockTxnIdList: blockTxnIdType.isRequired,
 	transactionByOrg: transactionByOrgType.isRequired
 };
 
@@ -363,7 +377,9 @@ const mapStateToProps = state => {
 };
 const mapDispatchToProps = {
 	getTxnList: txnList,
-	getBlockSearch: blockSearch
+	getBlockSearch: blockSearch,
+	getBlockHash: blockHashList,
+	getBlockByTxnId: blockTxnIdList
 };
 const connectedComponent = connect(
 	mapStateToProps,
diff --git a/client/src/components/types/index.js b/client/src/components/types/index.js
index ff691d960..4569713c7 100644
--- a/client/src/components/types/index.js
+++ b/client/src/components/types/index.js
@@ -4,6 +4,27 @@
 
 import { arrayOf, shape, number, string, func, any } from 'prop-types';
 
+export const blockbyTxIdType = shape({
+	blockhash: string,
+	blocknum: number,
+	channelname: string,
+	creatdt: string,
+	datahash: string,
+	prehash: string,
+	txcount: number,
+	txhash: arrayOf(string)
+});
+
+export const blockbyBlockHashType = shape({
+	blockhash: string,
+	blocknum: number,
+	channelname: string,
+	creatdt: string,
+	datahash: string,
+	prehash: string,
+	txcount: number,
+	txhash: arrayOf(string)
+});
 export const blockHashType = shape({
 	blockhash: string,
 	blocknum: number,
@@ -157,6 +178,8 @@ export const peerListType = arrayOf(
 );
 
 export const txnListType = any;
+export const blockHashTypee = any;
+export const blockTxnIdType = any;
 
 export const blockSearchType = any;
 
@@ -170,6 +193,11 @@ export const chaincodeMetaDataType = any;
 
 export const refreshType = func;
 
+export const channelPeerDataType = shape({
+	committers: arrayOf(string),
+	endorsers: arrayOf(string)
+});
+
 export const transactionType = shape({
 	chaincodename: string,
 	channelname: string,
diff --git a/client/src/state/redux/tables/actions.js b/client/src/state/redux/tables/actions.js
index 08a6e5085..0ef03c4cc 100644
--- a/client/src/state/redux/tables/actions.js
+++ b/client/src/state/redux/tables/actions.js
@@ -5,8 +5,8 @@
 import types from './types';
 
 const getBlockListSearch = blockList => ({
-  type: types.BLOCK_LIST_SEARCH,
-  payload: blockList,
+	type: types.BLOCK_LIST_SEARCH,
+	payload: blockList
 });
 
 const getLoaded = loaded => ({
@@ -15,18 +15,18 @@ const getLoaded = loaded => ({
 });
 
 const getChaincodeList = chaincodeList => ({
-  type: types.CHAINCODE_LIST,
-  payload: chaincodeList,
+	type: types.CHAINCODE_LIST,
+	payload: chaincodeList
 });
 
 const getChannels = channels => ({
-  type: types.CHANNELS,
-  payload: channels,
+	type: types.CHANNELS,
+	payload: channels
 });
 
 const getPeerList = peerList => ({
-  type: types.PEER_LIST,
-  payload: peerList,
+	type: types.PEER_LIST,
+	payload: peerList
 });
 
 const getBlockRangeSearch = resp => ({
@@ -34,14 +34,22 @@ const getBlockRangeSearch = resp => ({
 	payload: resp.data
 });
 
-const getTxnList = resp =>  ({
-  type: types.TXN_LIST,
-  payload: resp.data,
+const getTxnList = resp => ({
+	type: types.TXN_LIST,
+	payload: resp.data
 });
 
-const getBlockSearch = resp =>  ({
-  type: types.BLOCK_SEARCH,
-  payload: resp.data,
+const getBlockHash = resp => ({
+	type: types.BLOCK_HASH,
+	payload: resp.data
+});
+const getBlockByTxnId = resp => ({
+	type: types.BLOCK_TXN,
+	payload: resp.data
+});
+const getBlockSearch = resp => ({
+	type: types.BLOCK_SEARCH,
+	payload: resp.data
 });
 
 const getChaincodeMetaData = resp => ({
@@ -49,31 +57,39 @@ const getChaincodeMetaData = resp => ({
 	payload: resp.data
 });
 
+const getChannelPeerData = resp => ({
+	type: types.CHANNEL_PEER_DATA,
+	payload: resp.data
+});
+
 const getTransaction = transaction => ({
-  type: types.TRANSACTION,
-  payload: transaction,
+	type: types.TRANSACTION,
+	payload: transaction
 });
 
 const getTransactionList = transactionList => ({
-  type: types.TRANSACTION_LIST,
-  payload: transactionList,
+	type: types.TRANSACTION_LIST,
+	payload: transactionList
 });
 const getTransactionListSearch = transactionList => ({
-  type: types.TRANSACTION_LIST_SEARCH,
-  payload: transactionList,
+	type: types.TRANSACTION_LIST_SEARCH,
+	payload: transactionList
 });
 
 export default {
-  getChaincodeList,
-  getChannels,
-  getPeerList,
-  getBlockRangeSearch,
-  getTxnList,
-  getBlockSearch,
-  getChaincodeMetaData,
-  getTransaction,
-  getTransactionList,
-  getBlockListSearch,
-  getLoaded,
-  getTransactionListSearch,
+	getChaincodeList,
+	getChannels,
+	getPeerList,
+	getBlockRangeSearch,
+	getTxnList,
+	getBlockHash,
+	getBlockByTxnId,
+	getBlockSearch,
+	getChaincodeMetaData,
+	getChannelPeerData,
+	getTransaction,
+	getTransactionList,
+	getBlockListSearch,
+	getLoaded,
+	getTransactionListSearch
 };
diff --git a/client/src/state/redux/tables/operations.js b/client/src/state/redux/tables/operations.js
index 63114118f..68a568f85 100644
--- a/client/src/state/redux/tables/operations.js
+++ b/client/src/state/redux/tables/operations.js
@@ -7,7 +7,8 @@ import { get } from '../../../services/request';
 /* istanbul ignore next */
 const blockListSearch = (channel, query, pageParams) => dispatch =>
 	get(
-		`/api/blockAndTxList/${channel}/0?${query ? query : ''
+		`/api/blockAndTxList/${channel}/0?${
+			query ? query : ''
 		}&page=${pageParams?.page || 1}&size=${pageParams?.size || 10}`
 	)
 		.then(resp => {
@@ -21,12 +22,14 @@ const blockListSearch = (channel, query, pageParams) => dispatch =>
 				dispatch(actions.getErroMessage(resp.error));
 			} else {
 				let params = { page: pageParams?.page || 1, size: pageParams?.size || 10 };
-				dispatch( actions.getBlockListSearch({ ...resp, query, pageParams: params }) );
+				dispatch(
+					actions.getBlockListSearch({ ...resp, query, pageParams: params })
+				);
 			}
 		})
 		.catch(error => {
 			console.error(error);
-		})
+		});
 
 /* istanbul ignore next */
 const chaincodeList = channel => dispatch =>
@@ -89,6 +92,51 @@ const peerList = channel => dispatch =>
 		.catch(error => {
 			console.error(error);
 		});
+const blockTxnIdList = (channel, query) => dispatch =>
+	get(`/api/fetchBlockByTxId/${channel}/${query}`)
+		.then(resp => {
+			if (resp.status === 500) {
+				dispatch(
+					actions.getErroMessage(
+						'500 Internal Server Error: The server has encountered an internal error and unable to complete your request'
+					)
+				);
+			} else if (resp.status === 400) {
+				dispatch(actions.getErroMessage(resp.error));
+			} else {
+				dispatch(actions.getBlockByTxnId(resp));
+				console.log(resp);
+			}
+			dispatch(actions.getBlockSearch({ data: {} }));
+			dispatch(actions.getTxnList({ data: {} }));
+			dispatch(actions.getBlockHash({ data: {} }));
+		})
+		.catch(error => {
+			console.error(error);
+		});
+
+const blockHashList = (channel, query) => dispatch =>
+	get(`/api/fetchBlockByHash/${channel}/${query}`)
+		.then(resp => {
+			if (resp.status === 500) {
+				dispatch(
+					actions.getErroMessage(
+						'500 Internal Server Error: The server has encountered an internal error and unable to complete your request'
+					)
+				);
+			} else if (resp.status === 400) {
+				dispatch(actions.getErroMessage(resp.error));
+			} else {
+				dispatch(actions.getBlockHash(resp));
+				console.log(resp);
+			}
+			dispatch(actions.getBlockSearch({ data: {} }));
+			dispatch(actions.getTxnList({ data: {} }));
+			dispatch(actions.getBlockByTxnId({ data: {} }));
+		})
+		.catch(error => {
+			console.error(error);
+		});
 
 const txnList = (channel, query) => dispatch =>
 	get(`/api/fetchDataByTxnId/${channel}/${query}`)
@@ -105,6 +153,8 @@ const txnList = (channel, query) => dispatch =>
 				dispatch(actions.getTxnList(resp));
 			}
 			dispatch(actions.getBlockSearch({ data: {} }));
+			dispatch(actions.getBlockHash({ data: {} }));
+			dispatch(actions.getBlockByTxnId({ data: {} }));
 		})
 		.catch(error => {
 			console.error(error);
@@ -125,6 +175,8 @@ const blockSearch = (channel, query) => dispatch =>
 				dispatch(actions.getBlockSearch(resp));
 			}
 			dispatch(actions.getTxnList({ data: {} }));
+			dispatch(actions.getBlockHash({ data: {} }));
+			dispatch(actions.getBlockByTxnId({ data: {} }));
 		})
 		.catch(error => {
 			console.error(error);
@@ -151,38 +203,45 @@ const transaction = (channel, transactionId) => dispatch =>
 		});
 
 const transactionListSearch = (channel, query, pageParams) => dispatch =>
-	get(`/api/txList/${channel}/0/0?${query?query:''}&page=${pageParams?.page||1}&size=${pageParams?.size||10}`)
+	get(
+		`/api/txList/${channel}/0/0?${query ? query : ''}&page=${pageParams?.page ||
+			1}&size=${pageParams?.size || 10}`
+	)
 		.then(resp => {
-			let params={page:pageParams?.page||1,size:pageParams?.size ||10}
-			dispatch(actions.getTransactionListSearch({...resp,query,pageParams:params}));
+			let params = { page: pageParams?.page || 1, size: pageParams?.size || 10 };
+			dispatch(
+				actions.getTransactionListSearch({ ...resp, query, pageParams: params })
+			);
 		})
 		.catch(error => {
 			console.error(error);
 		});
-const blockRangeSearch = (channel, query1, query2) => dispatch =>
-		{
-			dispatch(actions.getLoaded(false));
-			get(`/api/fetchDataByBlockRange/${channel}/${query1}/${query2}`)
-			.then(resp => {
-				console.log('response-got', resp);
-				if (resp.status === 500) {
-					dispatch(
-						actions.getErroMessage(
-							'500 Internal Server Error: The server has encountered an internal error and unable to complete your request'
-						)
-					);
-				} else if (resp.status === 400) {
-					dispatch(actions.getErroMessage(resp.error));
-				} else {
-					dispatch(actions.getBlockRangeSearch(resp));
-				}
-			})
-			.catch(error => {
-				console.error(error);
-			}).finally(()=>{actions.getLoaded(true);})
-	}
+const blockRangeSearch = (channel, query1, query2) => dispatch => {
+	dispatch(actions.getLoaded(false));
+	get(`/api/fetchDataByBlockRange/${channel}/${query1}/${query2}`)
+		.then(resp => {
+			console.log('response-got', resp);
+			if (resp.status === 500) {
+				dispatch(
+					actions.getErroMessage(
+						'500 Internal Server Error: The server has encountered an internal error and unable to complete your request'
+					)
+				);
+			} else if (resp.status === 400) {
+				dispatch(actions.getErroMessage(resp.error));
+			} else {
+				dispatch(actions.getBlockRangeSearch(resp));
+			}
+		})
+		.catch(error => {
+			console.error(error);
+		})
+		.finally(() => {
+			actions.getLoaded(true);
+		});
+};
 /* istanbul ignore next */
-const transactionList = (channel,params) => dispatch =>
+const transactionList = (channel, params) => dispatch =>
 	get(`/api/txList/${channel}/0/0/?page=${params.page}&size=${params.size}`)
 		.then(resp => {
 			if (resp.status === 500) {
@@ -201,7 +260,7 @@ const transactionList = (channel,params) => dispatch =>
 			console.error(error);
 		});
 
-const chaincodeMetaData = (channel,query) => dispatch =>
+const chaincodeMetaData = (channel, query) => dispatch =>
 	get(`/api/metadata/${channel}/${query}`)
 		.then(resp => {
 			if (resp.status === 500) {
@@ -219,14 +278,35 @@ const chaincodeMetaData = (channel,query) => dispatch =>
 		.catch(error => {
 			console.error(error);
 		});
-	
+
+const channelPeerData = channel => dispatch =>
+	get(`/api/fetchEndorsersCommitter/${channel}`)
+		.then(resp => {
+			if (resp.status === 500) {
+				dispatch(
+					actions.getErroMessage(
+						'500 Internal Server Error: The server has encountered an internal error and unable to complete your request'
+					)
+				);
+			} else if (resp.status === 400) {
+				dispatch(actions.getErroMessage(resp.error));
+			} else {
+				dispatch(actions.getChannelPeerData(resp));
+			}
+		})
+		.catch(error => {
+			console.error(error);
+		});
 export default {
 	chaincodeList,
 	channels,
 	peerList,
-	txnList, 
-	blockSearch, 
+	txnList,
+	blockHashList,
+	blockTxnIdList,
+	blockSearch,
 	chaincodeMetaData,
+	channelPeerData,
 	transaction,
 	transactionList,
 	transactionListSearch,
diff --git a/client/src/state/redux/tables/reducers.js b/client/src/state/redux/tables/reducers.js
index 2cb0b3678..0fdc2414f 100644
--- a/client/src/state/redux/tables/reducers.js
+++ b/client/src/state/redux/tables/reducers.js
@@ -23,40 +23,39 @@ const blockListSearchReducer = (state = initialState, action = {}) => {
 };
 
 const chaincodeListReducer = (state = initialState, action = {}) => {
-  if (action.type === types.CHAINCODE_LIST) {
-    return {
-      rows: action.payload.chaincode,
-      loaded: true,
-      errors: action.error,
-    };
-  } else {
-    return state;
-  }
+	if (action.type === types.CHAINCODE_LIST) {
+		return {
+			rows: action.payload.chaincode,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
 };
 
 const channelsReducer = (state = initialState, action = {}) => {
-  if (action.type === types.CHANNELS) {
-    return {
-      rows: action.payload.channels,
-      loaded: true,
-      errors: action.error,
-    };
-  } else {
-    return state;
-  }
-
+	if (action.type === types.CHANNELS) {
+		return {
+			rows: action.payload.channels,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
 };
 
 const peerListReducer = (state = initialState, action = {}) => {
-  if (action.type === types.PEER_LIST) {
-    return {
-      rows: action.payload.peers,
-      loaded: true,
-      errors: action.error,
-    };
-  } else {
-    return state;
-  }
+	if (action.type === types.PEER_LIST) {
+		return {
+			rows: action.payload.peers,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
 };
 const blockRangeSearchReducer = (state = initialState, action = {}) => {
 	if (action.type === types.BLOCK_RANGE_SEARCH) {
@@ -65,37 +64,59 @@ const blockRangeSearchReducer = (state = initialState, action = {}) => {
 			loaded: true,
 			errors: action.error
 		};
-	} else if(action.type === types.BLOCK_RANGE_LOADED) {
+	} else if (action.type === types.BLOCK_RANGE_LOADED) {
 		return {
 			loaded: action.payload
-		}
+		};
 	} else {
 		return state;
 	}
 };
 
 const txnListReducer = (state = initialState, action = {}) => {
-  if (action.type === types.TXN_LIST) {
-    return {
-      rows: action.payload,
-      loaded: true,
-      errors: action.error,
-    };
-  } else {
-    return state;
-  }
+	if (action.type === types.TXN_LIST) {
+		return {
+			rows: action.payload,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
 };
 
+const blockHashReducer = (state = initialState, action = {}) => {
+	if (action.type === types.BLOCK_HASH) {
+		return {
+			rows: action.payload,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
+};
+const blockTxnIdReducer = (state = initialState, action = {}) => {
+	if (action.type === types.BLOCK_TXN) {
+		return {
+			rows: action.payload,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
+};
 const blockSearchReducer = (state = initialState, action = {}) => {
-  if (action.type === types.BLOCK_SEARCH) {
-    return {
-      rows: action.payload,
-      loaded: true,
-      errors: action.error,
-    };
-  } else {
-    return state;
-  }
+	if (action.type === types.BLOCK_SEARCH) {
+		return {
+			rows: action.payload,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
 };
 
 const chaincodeMetaDataReducer = (state = initialState, action = {}) => {
@@ -109,59 +130,73 @@ const chaincodeMetaDataReducer = (state = initialState, action = {}) => {
 		return state;
 	}
 };
+const channelPeerDataReducer = (state = initialState, action = {}) => {
+	if (action.type === types.CHANNEL_PEER_DATA) {
+		return {
+			rows: action.payload,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
+};
 
 const transactionReducer = (state = initialState, action = {}) => {
-  if (action.type === types.TRANSACTION) {
-    return {
-      transaction: action.payload.row,
-      loaded: true,
-      errors: action.error,
-    };
-  } else {
-    return state;
-  }
+	if (action.type === types.TRANSACTION) {
+		return {
+			transaction: action.payload.row,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
 };
 
 const transactionListReducer = (state = initialState, action = {}) => {
-  if (action.type === types.TRANSACTION_LIST) {
-    return {
-      rows: action.payload.rows?.txnsData,
-      noOfpages: action.payload.rows?.noOfpages || state.noOfpages,
-      loaded: true,
-      errors: action.error,
-    };
-  } else {
-    return state;
-  }
+	if (action.type === types.TRANSACTION_LIST) {
+		return {
+			rows: action.payload.rows?.txnsData,
+			noOfpages: action.payload.rows?.noOfpages || state.noOfpages,
+			loaded: true,
+			errors: action.error
+		};
+	} else {
+		return state;
+	}
 };
 
 const transactionListSearchReducer = (state = initialState, action = {}) => {
-  if (action.type === types.TRANSACTION_LIST_SEARCH) {
-    return {
-      rows: action.payload.rows?.txnsData,
-      noOfpages: action.payload.rows?.noOfpages || state.noOfpages,
-      loaded: true,
-      errors: action.error,
-      query: action.payload.query,
-      pageParams: action.payload.pageParams
-    };
-  } else {
-    return state;
-  }
+	if (action.type === types.TRANSACTION_LIST_SEARCH) {
+		return {
+			rows: action.payload.rows?.txnsData,
+			noOfpages: action.payload.rows?.noOfpages || state.noOfpages,
+			loaded: true,
+			errors: action.error,
+			query: action.payload.query,
+			pageParams: action.payload.pageParams
+		};
+	} else {
+		return state;
+	}
 };
 
 const reducer = combineReducers({
-  chaincodeList: chaincodeListReducer,
-  channels: channelsReducer,
-  peerList: peerListReducer,
+	chaincodeList: chaincodeListReducer,
+	channels: channelsReducer,
+	peerList: peerListReducer,
 	blockRangeSearch: blockRangeSearchReducer,
-  txnList: txnListReducer,
-  blockSearch: blockSearchReducer,
-  chaincodeMetaData: chaincodeMetaDataReducer,
-  transaction: transactionReducer,
-  transactionList: transactionListReducer,
-  blockListSearch: blockListSearchReducer,
-  transactionListSearch: transactionListSearchReducer,
+	txnList: txnListReducer,
+	blockHashList: blockHashReducer,
+	blockTxnIdList: blockTxnIdReducer,
+	blockSearch: blockSearchReducer,
+	chaincodeMetaData: chaincodeMetaDataReducer,
+	channelPeerData: channelPeerDataReducer,
+	transaction: transactionReducer,
+	transactionList: transactionListReducer,
+	blockListSearch: blockListSearchReducer,
+	transactionListSearch: transactionListSearchReducer
 });
 
 export default reducer;
diff --git a/client/src/state/redux/tables/selectors.js b/client/src/state/redux/tables/selectors.js
index 7aebcb708..22595f1bc 100644
--- a/client/src/state/redux/tables/selectors.js
+++ b/client/src/state/redux/tables/selectors.js
@@ -6,18 +6,36 @@ export const chaincodeListSelector = state => state.tables.chaincodeList.rows;
 export const channelsSelector = state => state.tables.channels.rows;
 export const peerListSelector = state => state.tables.peerList.rows;
 export const txnListSelector = state => state.tables.txnList.rows;
-export const blockSearchSelector = state => state.tables.blockSearch.rows; 
-export const chaincodeMetaDataSelector = state =>state.tables.chaincodeMetaData.rows;
-export const transactionSelector = state => state.tables.transaction.transaction;
-export const transactionListSelector = state => state.tables.transactionList.rows;
-export const transactionListSearchSelector = state => state.tables.transactionListSearch.rows;
-export const transactionListTotalPagesSelector = state =>state.tables.transactionList.noOfpages;
-export const transactionListSearchTotalPagesSelector = state => state.tables.transactionListSearch.noOfpages;
-export const transactionListSearchPageParamSelector = state => state.tables.transactionListSearch.pageParams;
-export const transactionListSearchQuerySelector = state => state.tables.transactionListSearch.query;
-export const blockListSearchSelector = state => state.tables.blockListSearch.rows;
-export const blockRangeSearchSelector = state =>state.tables.blockRangeSearch.rows;
-export const blockListSearchTotalPagesSelector = state =>state.tables.blockListSearch.noOfpages;
-export const blockListSearchPageParamSelector = state =>state.tables.blockListSearch.pageParams;
-export const blockListSearchQuerySelector = state =>state.tables.blockListSearch.query;
-export const blockRangeLoadedSelector = state =>state.tables.blockRangeSearch.loaded;
+export const blockHashSelector = state => state.tables.blockHashList.rows;
+export const blockTxnIdSelector = state => state.tables.blockTxnIdList.rows;
+export const blockSearchSelector = state => state.tables.blockSearch.rows;
+export const chaincodeMetaDataSelector = state =>
+	state.tables.chaincodeMetaData.rows;
+export const channelPeerDataSelector = state =>
+	state.tables.channelPeerData.rows;
+export const transactionSelector = state =>
+	state.tables.transaction.transaction;
+export const transactionListSelector = state =>
+	state.tables.transactionList.rows;
+export const transactionListSearchSelector = state =>
+	state.tables.transactionListSearch.rows;
+export const transactionListTotalPagesSelector = state =>
+	state.tables.transactionList.noOfpages;
+export const transactionListSearchTotalPagesSelector = state =>
+	state.tables.transactionListSearch.noOfpages;
+export const transactionListSearchPageParamSelector = state =>
+	state.tables.transactionListSearch.pageParams;
+export const transactionListSearchQuerySelector = state =>
+	state.tables.transactionListSearch.query;
+export const blockListSearchSelector = state =>
+	state.tables.blockListSearch.rows;
+export const blockRangeSearchSelector = state =>
+	state.tables.blockRangeSearch.rows;
+export const blockListSearchTotalPagesSelector = state =>
+	state.tables.blockListSearch.noOfpages;
+export const blockListSearchPageParamSelector = state =>
+	state.tables.blockListSearch.pageParams;
+export const blockListSearchQuerySelector = state =>
+	state.tables.blockListSearch.query;
+export const blockRangeLoadedSelector = state =>
+	state.tables.blockRangeSearch.loaded;
diff --git a/client/src/state/redux/tables/types.js b/client/src/state/redux/tables/types.js
index 7d4f6c5e1..a7638dcfa 100644
--- a/client/src/state/redux/tables/types.js
+++ b/client/src/state/redux/tables/types.js
@@ -8,9 +8,12 @@ const BLOCK_LIST = `${namespaces}/BLOCK_LIST`;
 const CHAINCODE_LIST = `${namespaces}/CHAINCODE_LIST`;
 const CHANNELS = `${namespaces}/CHANNELS`;
 const PEER_LIST = `${namespaces}/PEER_LIST`;
-const TXN_LIST = "TXN_LIST";
-const BLOCK_SEARCH = "BLOCK_SEARCH";
+const TXN_LIST = 'TXN_LIST';
+const BLOCK_HASH = 'BLOCK_HASH';
+const BLOCK_TXN = 'BLOCK_TXN';
+const BLOCK_SEARCH = 'BLOCK_SEARCH';
 const CHAINCODE_META_DATA = 'CHAINCODE_META_DATA';
+const CHANNEL_PEER_DATA = 'CHANNEL_PEER_DATA';
 const TRANSACTION = `${namespaces}/TRANSACTION`;
 const TRANSACTION_LIST = `${namespaces}/TRANSACTION_LIST`;
 const BLOCK_LIST_SEARCH = `${namespaces}/BLOCK_LIST_SEARCH`;
@@ -20,18 +23,21 @@ const TRANSACTION_LIST_SEARCH = `${namespaces}/TRANSACTION_LIST_SEARCH`;
 const ORGS = `${namespaces}/ORGS`;
 
 export default {
-  BLOCK_LIST,
-  CHAINCODE_LIST,
-  CHANNELS,
-  PEER_LIST,
-  TXN_LIST, 
-  BLOCK_SEARCH,
-  CHAINCODE_META_DATA,
-  TRANSACTION,
-  TRANSACTION_LIST,
-  BLOCK_LIST_SEARCH,
-  BLOCK_RANGE_SEARCH,
-  BLOCK_RANGE_LOADED,
-  TRANSACTION_LIST_SEARCH,
-  ORGS,
+	BLOCK_LIST,
+	CHAINCODE_LIST,
+	CHANNELS,
+	PEER_LIST,
+	TXN_LIST,
+	BLOCK_HASH,
+	BLOCK_TXN,
+	BLOCK_SEARCH,
+	CHAINCODE_META_DATA,
+	CHANNEL_PEER_DATA,
+	TRANSACTION,
+	TRANSACTION_LIST,
+	BLOCK_LIST_SEARCH,
+	BLOCK_RANGE_SEARCH,
+	BLOCK_RANGE_LOADED,
+	TRANSACTION_LIST_SEARCH,
+	ORGS
 };