diff --git a/src/assets/Logo.svg b/src/assets/Logo.svg
index 0534c55..2961583 100644
--- a/src/assets/Logo.svg
+++ b/src/assets/Logo.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0 0 34 34" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="32" viewBox="0 0 34 34" fill="none">
 <path d="M26.232 0C22.292 0 19.0778 3.2142 18.9741 7.15419V15.1378C18.2484 15.1378 17.5226 15.2415 16.6931 15.2415C15.8636 15.2415 15.1378 15.2415 14.4121 15.3452V7.15419C14.4121 3.2142 11.0942 0 7.0505 0.103684C3.2142 0.103684 0.103684 3.31788 0 7.15419V26.232C0.103684 30.172 3.31788 33.3862 7.36155 33.2825C11.3015 33.1788 14.4121 30.0683 14.4121 26.232V18.2484C15.1378 18.2484 15.8636 18.1447 16.6931 18.1447C17.5226 18.1447 18.2484 18.1447 18.9741 18.041V26.1283C19.0778 30.0683 22.292 33.2825 26.3357 33.1788C30.2757 33.0751 33.3862 29.9646 33.3862 26.1283V7.15419C33.3862 3.2142 30.172 0 26.232 0ZM7.25787 2.90315C9.6426 2.90315 11.5089 4.76946 11.5089 7.15419V15.5526C9.43523 15.8636 7.36155 16.4857 5.39156 17.3152C4.56209 17.7299 3.73262 18.1447 3.00683 18.7668V7.15419C3.00683 4.87314 4.87314 2.90315 7.25787 2.90315ZM11.5089 26.232C11.5089 28.6167 9.6426 30.483 7.25787 30.483C4.87314 30.483 3.00683 28.6167 3.00683 26.232V24.3657C3.00683 22.7068 4.35472 21.0478 6.63577 20.1147C8.19102 19.3889 9.84997 18.9741 11.6126 18.6631L11.5089 26.232ZM26.232 30.483C23.8473 30.483 21.981 28.6167 21.981 26.232V17.8336C24.0547 17.5226 26.1283 16.9005 28.0983 16.071C28.9278 15.6563 29.7573 15.2415 30.4831 14.6194V26.232C30.4831 28.6167 28.5131 30.483 26.232 30.483ZM26.8541 13.3752C25.2989 14.101 23.6399 14.5157 21.8773 14.8268V7.15419C21.8773 4.76946 23.7436 2.90315 26.1283 2.90315C28.5131 2.90315 30.3794 4.76946 30.3794 7.15419V9.02049C30.4831 10.7831 29.1352 12.3384 26.8541 13.3752Z" fill="#fff"/>
 <defs>  
 </defs>
diff --git a/src/components/appHeader/InfoButton.tsx b/src/components/appHeader/InfoButton.tsx
index ecc2d3e..930cc86 100644
--- a/src/components/appHeader/InfoButton.tsx
+++ b/src/components/appHeader/InfoButton.tsx
@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import { CaretDownFill } from "grommet-icons";
 import { Box, DropButton, Anchor, Text } from "grommet";
 import { useHistory } from "react-router-dom";
 
 export function InfoButton() {
   const history = useHistory();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   return (
     <DropButton
@@ -16,6 +17,10 @@ export function InfoButton() {
           <CaretDownFill color="white" />
         </Box>
       }
+      onClick={() => {
+        setIsOpen(true);
+      }}
+      open={isOpen}
       dropAlign={{ top: "bottom", right: "right" }}
       dropContent={
         <Box
@@ -27,9 +32,8 @@ export function InfoButton() {
         >
           <Anchor
             style={{ textDecoration: "underline" }}
-            href={"/hrc20"}
             onClick={(e) => {
-              e.preventDefault();
+              setIsOpen(false);
               history.push("/hrc20");
             }}
           >
@@ -37,9 +41,8 @@ export function InfoButton() {
           </Anchor>
           <Anchor
             style={{ textDecoration: "underline" }}
-            href={"/hrc721"}
             onClick={(e) => {
-              e.preventDefault();
+              setIsOpen(false);
               history.push("/hrc721");
             }}
           >
@@ -47,9 +50,8 @@ export function InfoButton() {
           </Anchor>
           <Anchor
             style={{ textDecoration: "underline" }}
-            href={"/hrc1155"}
             onClick={(e) => {
-              e.preventDefault();
+              setIsOpen(false);
               history.push("/hrc1155");
             }}
           >
diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx
index 58805cd..d04f155 100644
--- a/src/components/appHeader/index.tsx
+++ b/src/components/appHeader/index.tsx
@@ -27,7 +27,10 @@ const HeaderLine = (props: any) => {
 };
 
 const ProjectName = styled(Box)`
-  margin-left: 3px;
+  margin-top: 7px;
+  margin-left: 7px;
+  font-size: 1.2em;
+  line-height: 0.7em;
 `;
 
 export function AppHeader(props: { style: CSSProperties }) {
@@ -50,17 +53,11 @@ export function AppHeader(props: { style: CSSProperties }) {
         >
           <Box direction={"row"} align={"center"}>
             <img src={require("../../assets/Logo.svg").default} />
-            <ProjectName direction={"row"} align={'center'}>
-              Harmony Block Explorer{" "}
-              <Box
-                background={"mintGreen"}
-                style={{ borderRadius: "8px", height: "20px", marginLeft: '5px', padding: '1px 7px' }}
-              >
-                <Text size={"xsmall"}>beta</Text>
-              </Box>
+            <ProjectName direction={"column"} align={"start"}>
+              Harmony
+              <Text size={"small"}>Block Explorer</Text>
             </ProjectName>
           </Box>
-          <FiatPrice />
         </Heading>
         <Box direction="row">
           <InfoButton />
diff --git a/src/components/metrics/index.tsx b/src/components/metrics/index.tsx
index 8e9395c..6c8ff40 100644
--- a/src/components/metrics/index.tsx
+++ b/src/components/metrics/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Box, Text, DataChart, Spinner } from "grommet";
-import { BasePage } from "src/components/ui";
+import { Box, Text, DataChart, Spinner, Tip } from "grommet";
+import { BasePage, TipContent } from "src/components/ui";
 import { formatNumber } from "src/components/ui/utils";
 import { LatencyIcon } from "src/components/ui/icons";
 import dayjs from "dayjs";
@@ -13,7 +13,10 @@ import { getTransactionCountLast14Days } from "src/api/client";
 
 import { getCount } from "src/api/client";
 
-export const Metrics = (params: { latency: number }) => {
+export const Metrics = (params: {
+  latency: number;
+  latencyPerBlock: number[];
+}) => {
   const isLessLaptop = useMediaQuery({ maxDeviceWidth: "852px" });
   const isLessTablet = useMediaQuery({ maxDeviceWidth: breakpoints.tablet });
   const isLessMobileM = useMediaQuery({ maxDeviceWidth: "468px" });
@@ -58,7 +61,10 @@ export const Metrics = (params: { latency: number }) => {
       >
         <ShardCount />
         {!isLessMobileM && <Line horizontal />}
-        <BlockLatency latency={params.latency} />
+        <BlockLatency
+          latency={params.latency}
+          latencyPerBlock={params.latencyPerBlock}
+        />
       </Box>
       {isLessLaptop && (
         <Line
@@ -98,7 +104,7 @@ function ONEPrice() {
         </Text>
         <Box direction="row" gap="xsmall" align="baseline">
           <Text size="small" weight="bold">
-            $ {(+lastPrice).toFixed(2)}
+            $ {(+lastPrice).toFixed(4)}
           </Text>
           <Text
             size="11px"
@@ -117,12 +123,27 @@ function ONEPrice() {
 function TransactionsCount() {
   const [count, setCount] = useState<string>("");
 
+  const availableShards = (process.env.REACT_APP_AVAILABLE_SHARDS as string)
+    .split(",")
+    .map((t) => +t);
+
   useEffect(() => {
     let tId = 0;
     const getRes = async () => {
       try {
-        let res = await getCount([0, "transactions"]);
-        setCount(res.count);
+        let res = await Promise.all(
+          availableShards.map((shardNumber) =>
+            getCount([shardNumber, "transactions"])
+          )
+        );
+        setCount(
+          res
+            .reduce((prev, cur) => {
+              prev = prev + +cur.count;
+              return prev;
+            }, 0)
+            .toString()
+        );
       } catch (err) {
         console.log(err);
       }
@@ -146,7 +167,7 @@ function TransactionsCount() {
       </Box>
       <Box align="start">
         <Text size="small" color="minorText">
-          {"TRANSACTIONS COUNT"}
+          {"TRANSACTIONS VOLUME"}
         </Text>
         <Text size="small" weight="bold">
           {formatNumber(+count)}
@@ -180,7 +201,7 @@ function ShardCount() {
   );
 }
 
-function BlockLatency(params: { latency: number }) {
+function BlockLatency(params: { latency: number; latencyPerBlock: number[] }) {
   return (
     <Box direction="row" align="stretch">
       <Box
@@ -194,9 +215,34 @@ function BlockLatency(params: { latency: number }) {
         <Text size="small" color="minorText">
           {"BLOCK LATENCY"}
         </Text>
-        <Text size="small" weight="bold">
-          {params.latency.toFixed(2)}s
-        </Text>
+        <Tip
+          // dropProps={{ align: { left: "right" }, margin: { left: "small" } }}
+          content={
+            <TipContent
+              message={
+                <Box direction={"row"}>
+                  {params.latencyPerBlock.map((item, index) => (
+                    <Box
+                      key={`${index}`}
+                      direction={"column"}
+                      align={"start"}
+                      justify={"center"}
+                      margin={'small'}
+                    >
+                      <Text size={"small"}>Shard {index}</Text>
+                      <Text size="small" weight="bold">{item.toFixed(2)}s</Text>
+                    </Box>
+                  ))}
+                </Box>
+              }
+            />
+          }
+          plain
+        >
+          <Text size="small" weight="bold">
+            {params.latency.toFixed(2)}s
+          </Text>
+        </Tip>
       </Box>
     </Box>
   );
diff --git a/src/components/ui/Address.tsx b/src/components/ui/Address.tsx
index c8ebda6..309f53c 100644
--- a/src/components/ui/Address.tsx
+++ b/src/components/ui/Address.tsx
@@ -24,6 +24,7 @@ interface IAddress {
   color?: string;
   displayHash?: boolean;
   noHistoryPush?: boolean;
+  hideCopyBtn?: boolean;
 }
 
 export const Address = (props: IAddress) => {
@@ -34,6 +35,7 @@ export const Address = (props: IAddress) => {
     type = "address",
     color = "brand",
     displayHash,
+    hideCopyBtn = false,
   } = props;
   const history = useHistory();
   const ERC20Map = useERC20Pool();
@@ -77,26 +79,28 @@ export const Address = (props: IAddress) => {
   return (
     <div style={{ display: "inline-block" }}>
       <Box direction={"row"} align={"center"} justify={"start"}>
-        <CopyBtn
-          value={outPutAddress}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            toaster.show({
-              message: () => (
-                <Box direction={"row"} align={"center"} pad={"small"}>
-                  <Icon size={"small"} color={"headerText"} />
-                  <Text size={"small"}>Copied to clipboard</Text>
-                </Box>
-              ),
-            });
-          }}
-        />
+        {hideCopyBtn ? null : (
+          <CopyBtn
+            value={outPutAddress}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              toaster.show({
+                message: () => (
+                  <Box direction={"row"} align={"center"} pad={"small"}>
+                    <Icon size={"small"} color={"headerText"} />
+                    <Text size={"small"}>Copied to clipboard</Text>
+                  </Box>
+                ),
+              });
+            }}
+          />
+        )}
         <Text
           size="small"
           color={color}
           style={{
-            marginLeft: "7px",
+            marginLeft: hideCopyBtn ? "0px" : "7px",
             cursor: "pointer",
             textDecoration:
               address === EMPTY_ADDRESS
diff --git a/src/components/ui/FiatPrice.tsx b/src/components/ui/FiatPrice.tsx
index 4dd8e56..6625249 100644
--- a/src/components/ui/FiatPrice.tsx
+++ b/src/components/ui/FiatPrice.tsx
@@ -10,8 +10,8 @@ export const FiatPrice = () => {
   }
 
   const price = parseFloat(lastPrice).toLocaleString("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
+    minimumFractionDigits: 4,
+    maximumFractionDigits: 4,
     currency: "USD",
   });
   const change = (+priceChangePercent).toFixed(2);
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
index 3a7785b..65b2ddb 100644
--- a/src/components/ui/Tooltip.tsx
+++ b/src/components/ui/Tooltip.tsx
@@ -6,7 +6,7 @@ import { Trash } from 'grommet-icons'
 // @ts-ignore
 export const TipContent = ({ message }) => (
   <Box direction="row" align="center">
-    <Box background="background" direction="row" pad="small" round="xsmall" border={{color: 'border' }}>
+    <Box background="background" direction="row" pad="small" border={{color: 'border', size: '0px' }}>
       <div>{message}</div>
     </Box>
   </Box>
diff --git a/src/pages/MainPage/LatestTransactionsTable.tsx b/src/pages/MainPage/LatestTransactionsTable.tsx
index 8ea1fdc..30e5fe2 100644
--- a/src/pages/MainPage/LatestTransactionsTable.tsx
+++ b/src/pages/MainPage/LatestTransactionsTable.tsx
@@ -45,7 +45,7 @@ function getColumns(props: any) {
           }}
           color="brand"
         >
-          <Address address={data.hash} isShort noHistoryPush />
+          <Address address={data.hash} isShort noHistoryPush hideCopyBtn />
         </Text>
       ),
     },
@@ -57,7 +57,7 @@ function getColumns(props: any) {
         </Text>
       ),
       render: (data: RPCTransactionHarmony) => (
-        <Address address={data.from} isShort />
+        <Address address={data.from} isShort hideCopyBtn />
       ),
     },
     {
@@ -68,7 +68,7 @@ function getColumns(props: any) {
         </Text>
       ),
       render: (data: RPCTransactionHarmony) => (
-        <Address address={data.to} isShort />
+        <Address address={data.to} isShort hideCopyBtn />
       ),
     },
     {
diff --git a/src/pages/MainPage/helpers.ts b/src/pages/MainPage/helpers.ts
index 4eca882..57b9382 100644
--- a/src/pages/MainPage/helpers.ts
+++ b/src/pages/MainPage/helpers.ts
@@ -22,3 +22,9 @@ export const calculateSecondPerBlocks = (
     all_blocks.length
   );
 };
+
+export const calculateSecondsPerBlock = (
+  all_blocks: Array<Block[]>
+): number[] => {
+  return all_blocks.map(getLatency);
+};
diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
index 2e250cc..9432b8e 100644
--- a/src/pages/MainPage/index.tsx
+++ b/src/pages/MainPage/index.tsx
@@ -10,7 +10,7 @@ import { LatestBlocksTable } from "./LatestBlocksTable";
 import { LatestTransactionsTable } from "./LatestTransactionsTable";
 import { Block } from "src/types";
 import { getBlocks } from "src/api/client";
-import { calculateSecondPerBlocks } from "./helpers";
+import { calculateSecondPerBlocks, calculateSecondsPerBlock } from "./helpers";
 
 const filter = {
   offset: 0,
@@ -27,8 +27,11 @@ export function MainPage() {
 
   const [blocks, setBlocks] = useState<Block[]>([]);
   const [blockLatency, setBlockLatency] = useState<number>(2.01);
-  const availableShards = (process.env
-    .REACT_APP_AVAILABLE_SHARDS as string).split(",");
+
+  const [blockLatencyMap, setBlockLatencyMap] = useState<number[]>([2.01]);
+  const availableShards = (
+    process.env.REACT_APP_AVAILABLE_SHARDS as string
+  ).split(",");
 
   useEffect(() => {
     let tId = 0 as any;
@@ -58,6 +61,7 @@ export function MainPage() {
         );
 
         setBlockLatency(calculateSecondPerBlocks(blocks));
+        setBlockLatencyMap(calculateSecondsPerBlock(blocks))
       } catch (err) {
         console.log(err);
       }
@@ -73,7 +77,7 @@ export function MainPage() {
 
   return (
     <BaseContainer pad="0">
-      <Metrics latency={blockLatency} />
+      <Metrics latency={blockLatency} latencyPerBlock={blockLatencyMap} />
       <Box direction={isLessDesktop ? "column" : "row"} gap="medium">
         <BasePage style={{ flex: "1 1 100%" }}>
           <Box
diff --git a/src/theme.ts b/src/theme.ts
index a2bdeb4..72d4236 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -18,6 +18,7 @@ export const theme = {
     },
 
     colors: {
+      text: '#55626d',
       brand: palette.Purple,
       background: "white",
       backgroundBack: "#f3f3f3",
@@ -43,9 +44,11 @@ export const theme = {
         color: "brand",
       },
     },
+ 
+
     font: {
-      // family: 'Nunito',
-      family: "Fira Sans",
+      family: "Nunito",
+      // family: "Fira Sans",
       size: "14px",
       height: "20px",
     },
@@ -127,8 +130,8 @@ export const darkTheme = {
     },
     palette,
     font: {
-      // family: 'Nunito',
-      family: "Fira Sans",
+      family: "Nunito",
+      // family: "Fira Sans",
       size: "14px",
       height: "20px",
     },