diff --git a/src/components/ChainIDBadge.re b/src/components/ChainIDBadge.re
index c2283500..5c224fe4 100644
--- a/src/components/ChainIDBadge.re
+++ b/src/components/ChainIDBadge.re
@@ -5,11 +5,11 @@ module Styles = {
     style([
       display(`flex),
       borderRadius(`px(8)),
-      border(`px(1), `solid, isDarkMode ? theme.neutral_100 : theme.neutral_600),
+      // border(`px(1), `solid, isDarkMode ? theme.neutral_100 : theme.neutral_600),
       backgroundColor(theme.neutral_000),
-      padding2(~v=`px(8), ~h=`px(10)),
+      padding2(~v=`px(8), ~h=`px(16)),
       minWidth(`px(153)),
-      justifyContent(`spaceBetween),
+      // justifyContent(`spaceBetween),
       alignItems(`center),
       position(`relative),
       cursor(`pointer),
@@ -43,8 +43,40 @@ module Styles = {
       padding2(~v=`px(5), ~h=`px(10)),
       hover([backgroundColor(theme.neutral_100)]),
     ]);
+  let buttonContainer = style([Media.mobile([width(`percent(100.))])]);
+  let baseBtn =
+    style([
+      textAlign(`center),
+      Media.mobile([flexGrow(0.), flexShrink(0.), flexBasis(`percent(50.))]),
+    ]);
+
+  let leftBtn = (state, theme: Theme.t, isDarkMode) => {
+    style([
+      borderTopRightRadius(`zero),
+      borderBottomRightRadius(`zero),
+      backgroundColor(state ? theme.neutral_900 : theme.neutral_000),
+      color(state ? theme.neutral_100 : theme.neutral_900),
+      hover([
+        backgroundColor(state ? theme.neutral_900 : theme.neutral_100),
+        color(state ? theme.neutral_100 : theme.neutral_900),
+      ]),
+    ]);
+  };
+  let rightBtn = (state, theme: Theme.t, isDarkMode) => {
+    style([
+      borderTopLeftRadius(`zero),
+      borderBottomLeftRadius(`zero),
+      color(state ? theme.neutral_900 : theme.neutral_100),
+      backgroundColor(state ? theme.neutral_000 : theme.neutral_900),
+      hover([
+        backgroundColor(state ? theme.neutral_100 : theme.neutral_900),
+        color(state ? theme.neutral_900 : theme.neutral_100),
+      ]),
+    ]);
+  };
 };
 
+
 type chainID =
   | WenchangTestnet
   | WenchangMainnet
@@ -109,7 +141,7 @@ let getName =
   | Unknown => "unknown";
 
 [@react.component]
-let make = () =>
+let make = (~dropdown=false) =>
   {
     let (show, setShow) = React.useState(_ => false);
     let trackingSub = TrackingSub.use();
@@ -118,7 +150,18 @@ let make = () =>
     let%Sub tracking = trackingSub;
     let currentChainID = tracking.chainID->parseChainID;
 
-    <div
+    let networkNames = [|LaoziMainnet, LaoziTestnet|] -> Belt.Array.map(chainID => chainID->getName);
+    
+    let isMainnet = (currentChainID->getName) == "laozi-mainnet"
+    let handleToggle = (value) => {
+      Js.log(value)
+      Js.log(currentChainID->getName)
+      if(!value && isMainnet){
+        ReasonReactRouter.push(LaoziMainnet |> getLink)
+      }
+    };
+
+    {dropdown ? <div
       className={Styles.version(theme, isDarkMode)}
       onClick={event => {
         setShow(oldVal => !oldVal);
@@ -130,22 +173,43 @@ let make = () =>
         nowrap=true
         weight=Text.Semibold
       />
-      <HSpacing size=Spacing.sm />
-      {show
-         ? <Icon name="far fa-angle-up" color={theme.neutral_600} />
-         : <Icon name="far fa-angle-down" color={theme.neutral_600} />}
+      <div className={Css.style([Css.paddingLeft(`px(4))])}>
+        {show
+          ? <Icon name="far fa-angle-up" color={theme.neutral_900} />
+          : <Icon name="far fa-angle-down" color={theme.neutral_900} />}
+      </div>
       <div className={Styles.dropdown(show, theme, isDarkMode)}>
         {[|LaoziMainnet, LaoziTestnet|]
          ->Belt.Array.keep(chainID => chainID != currentChainID)
          ->Belt.Array.map(chainID => {
              let name = chainID->getName;
              <AbsoluteLink href={getLink(chainID)} key=name className={Styles.link(theme)}>
-               <Text value=name color={theme.neutral_600} nowrap=true weight=Text.Semibold />
+               <Text value=name color={theme.neutral_900} nowrap=true weight=Text.Semibold />
              </AbsoluteLink>;
            })
          ->React.array}
       </div>
-    </div>
+    </div> : <div className={Css.merge([CssHelper.flexBox(), Styles.buttonContainer])}>
+      <AbsoluteLink href={isMainnet ? "" : getLink(LaoziMainnet)} >
+        <Button
+          px=16
+          py=8
+          variant=Button.Outline
+          style={Css.merge([Styles.baseBtn, Styles.leftBtn(isMainnet, theme, isDarkMode)])}>
+          {networkNames[0]  |> React.string}
+        </Button>
+      </AbsoluteLink>
+      <AbsoluteLink href={isMainnet ? getLink(LaoziTestnet) : ""} >
+        <Button
+          px=16
+          py=8
+          variant=Button.Outline
+          style={Css.merge([Styles.baseBtn, Styles.rightBtn(isMainnet, theme, isDarkMode)])}>
+          {networkNames[1] |> React.string}
+        </Button>
+      </AbsoluteLink>
+    </div>}
+
     |> Sub.resolve;
   }
   |> Sub.default(
diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index 0aa8a70d..185f09e6 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -1,7 +1,7 @@
 module Styles = {
   open Css;
 
-  let card = (theme: Theme.t) =>
+  let card =
     style([
       position(`relative),
       Media.smallMobile([margin2(~v=`zero, ~h=`px(-5))]),
@@ -11,7 +11,7 @@ module Styles = {
     style([
       position(`relative),
       zIndex(2),
-      minHeight(`px(177)),
+      minHeight(`px(152)),
       padding2(~v=`px(24), ~h=`px(32)),
       Media.mobile([padding2(~v=`px(10), ~h=`px(12)), minHeight(`px(146))]),
     ]);
@@ -30,7 +30,37 @@ module Styles = {
 
   let bandToken =
     style([position(`absolute), width(`percent(60.)), top(`percent(-40.)), right(`zero)]);
-};
+  
+  let longCard = 
+    style([
+      width(`percent(100.)),
+      marginTop(`px(24)),
+      padding2(~v=`px(4), ~h=`px(24)),
+    ]);
+
+  let innerLongCard =
+    style([
+      minHeight(`px(106)),
+      padding2(~v=`px(24), ~h=`px(12)),
+      Media.mobile([padding2(~v=`px(10), ~h=`px(12)), minHeight(`px(50))]),
+    ]);
+
+  let halfWidth =
+    style([
+      width(`calc((`sub, `percent(50.), `px(17)))),
+      Media.mobile([width(`percent(100.))]),
+    ]);
+
+  let mr2 =
+    style([
+      marginRight(`px(16)),
+    ]);
+
+  let pb = 
+    style([
+      Media.mobile([paddingBottom(`px(4))]),
+    ]);
+  };
 
 module HighlightCard = {
   [@react.component]
@@ -39,7 +69,7 @@ module HighlightCard = {
     let (ThemeContext.{theme,isDarkMode}, _) = React.useContext(ThemeContext.context);
     let isMobile = Media.isMobile();
 
-    <div className={Css.merge([Styles.card(theme), special ? Styles.specialBg : "",CommonStyles.card(theme,isDarkMode)])}>
+    <div className={Css.merge([Styles.card, special ? Styles.specialBg : "",CommonStyles.card(theme,isDarkMode)])}>
       {special && !isMobile
          ? <img alt="Band Token" src=Images.bandToken className=Styles.bandToken /> : React.null}
       <div
@@ -50,7 +80,7 @@ module HighlightCard = {
         ])}>
         {switch (valueAndExtraComponentSub) {
          | Data((valueComponent, extraComponent)) =>
-           <> <Text value=label size=Text.Lg /> valueComponent extraComponent </>
+           <> <Text value=label size=Text.Xl weight=Text.Regular /> valueComponent extraComponent </>
          | _ =>
            <>
              <LoadingCensorBar width=90 height=18 />
@@ -63,116 +93,374 @@ module HighlightCard = {
   };
 };
 
+let getPrevDay = _ => {
+  MomentRe.momentNow()
+  |> MomentRe.Moment.defaultUtc
+  |> MomentRe.Moment.subtract(~duration=MomentRe.duration(1., `days))
+  |> MomentRe.Moment.format(Config.timestampUseFormat);
+};
+
+let getUnixTime = _ => {
+  MomentRe.momentNow()
+  |> MomentRe.Moment.defaultUtc
+  |> MomentRe.Moment.subtract(~duration=MomentRe.duration(1., `days))
+  |> MomentRe.Moment.toUnix;
+};
+
 [@react.component]
 let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
+  let isMobile = Media.isMobile();
+  let currentTime =
+    React.useContext(TimeContext.context) |> MomentRe.Moment.format(Config.timestampUseFormat);
+  let (prevDayTime, setPrevDayTime) = React.useState(getPrevDay);
+  let (prevUnixTime, setPrevUnixTime) = React.useState(getUnixTime);
+
   let infoSub = React.useContext(GlobalContext.context);
-  let (ThemeContext.{theme}, _) = React.useContext(ThemeContext.context);
+  let (ThemeContext.{theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
+
   let activeValidatorCountSub = ValidatorSub.countByActive(true);
   let bondedTokenCountSub = ValidatorSub.getTotalBondedAmount();
-
-  let validatorInfoSub = Sub.all2(activeValidatorCountSub, bondedTokenCountSub);
+  let latestTxsSub = TxSub.getList(~pageSize=1, ~page=1, ());
+  let last24txsCountSub = TxQuery.countOffset(prevDayTime);
+  let latestRequestSub = RequestSub.getList(~pageSize=1, ~page=1, ());
+  let last24RequestCountSub = RequestQuery.countOffset(prevUnixTime);
+  let latestBlock = BlockSub.getLatest();
+  let avgBlockTimeSub = BlockSub.getAvgBlockTime(prevDayTime, currentTime);
+  let avgCommissionSub = ValidatorSub.avgCommission(~isActive=true, ());
+  
+  let validatorInfoSub = Sub.all3(activeValidatorCountSub, bondedTokenCountSub, avgBlockTimeSub);
   let allSub = Sub.all3(latestBlockSub, infoSub, validatorInfoSub);
 
-  <Row justify=Row.Between>
-    <Col col=Col.Three colSm=Col.Six mbSm=16>
-      <HighlightCard
-        label="Band Price"
-        special=true
-        valueAndExtraComponentSub={
-          let%Sub (_, {financial}, _) = allSub;
-          (
-            {
-              let bandPriceInUSD = "$" ++ (financial.usdPrice |> Format.fPretty(~digits=2));
-              <Text
-                value=bandPriceInUSD
-                size=Text.Xxxl
-                weight=Text.Semibold
-                color={theme.white}
-              />;
-            },
-            {
-              let bandPriceInBTC = financial.btcPrice;
+  React.useEffect0(() => {
+    let timeOutID = Js.Global.setInterval(() => {
+      setPrevDayTime(getPrevDay)
+      setPrevUnixTime(getUnixTime)
+    }, 600_000);
+    Some(() => {Js.Global.clearInterval(timeOutID)});
+  });
+
+  <>
+    <Row justify=Row.Between>
+      <Col col=Col.Three colSm=Col.Six mbSm=16>
+        <HighlightCard
+          label="BAND Price"
+          special=true
+          valueAndExtraComponentSub={
+            let%Sub (_, {financial}, _) = allSub;
+            (
+              {
+                let bandPriceInUSD = "$" ++ (financial.usdPrice |> Format.fPretty(~digits=2));
+                <div className=CssHelper.flexBox()>
+                  <div className=Styles.mr2>
+                    <Text 
+                      value=bandPriceInUSD
+                      size=Text.Xxxl 
+                      weight=Text.Bold 
+                      color=theme.white
+                    />
+                  </div>
+                  <Text 
+                    value={
+                      (financial.usd24HrChange > 0. ? "+" : "") 
+                      ++ (financial.usd24HrChange |> Format.fPretty(~digits=2)) 
+                      ++ "%"
+                    }
+                    size=Text.Md 
+                    weight=Text.Regular 
+                    color=(financial.usd24HrChange > 0. ? theme.successColor : theme.failColor)
+                  />
+                </div>
+              },
+              {
+                let bandPriceInBTC = financial.btcPrice;
 
+                <div
+                  className={Css.merge([
+                    CssHelper.flexBox(~justify=`spaceBetween, ()),
+                    Styles.fullWidth,
+                  ])}>
+                  <Text value={bandPriceInBTC->Format.fPretty ++ " BTC"} />
+                </div>;
+              },
+            )
+            |> Sub.resolve;
+          }
+        />
+      </Col>
+      <Col col=Col.Three colSm=Col.Six mbSm=16>
+        <HighlightCard
+          label="Market Cap"
+          valueAndExtraComponentSub={
+            let%Sub (_, {financial}, _) = allSub;
+            (
+              {
+                <Text
+                  value={"$" ++ (financial.usdMarketCap |> Format.fCurrency)}
+                  size=Text.Xxxl
+                  color={theme.neutral_900}
+                  weight=Text.Semibold
+                />;
+              },
+              {
+                let marketcap = financial.btcMarketCap;
+                <Text value={(marketcap |> Format.fPretty) ++ " BTC"} />;
+              },
+            )
+            |> Sub.resolve;
+          }
+        />
+      </Col>
+      <Col col=Col.Three colSm=Col.Six>
+        <HighlightCard
+          label="Latest Block"
+          valueAndExtraComponentSub={
+            let%Sub ({height, validator: {moniker, identity, operatorAddress}}, _, _) = allSub;
+            (
+              <TypeID.Block id=height position=TypeID.Landing weight=Text.Semibold />,
+              <ValidatorMonikerLink
+                validatorAddress=operatorAddress
+                moniker
+                identity
+                width={`percent(100.)}
+                avatarWidth=20
+              />,
+            )
+            |> Sub.resolve;
+          }
+        />
+      </Col>
+      <Col col=Col.Three colSm=Col.Six>
+        <HighlightCard
+          label="Active Validators"
+          valueAndExtraComponentSub={
+            let%Sub (_, {financial}, (activeValidatorCount, bondedTokenCount, avgBlockTime)) = allSub;
+            (
+              {
+                let activeValidators = activeValidatorCount->Format.iPretty;
+                <Text
+                  value=activeValidators
+                  size=Text.Xxxl
+                  color={theme.primary_600}
+                  weight=Text.Semibold
+                />;
+              },
+              <Text
+                value={"block time " ++ (avgBlockTime |> Format.fPretty(~digits=2)) ++ " secs"}
+                size=Text.Lg 
+                weight=Text.Regular 
+              />,
+            )
+            |> Sub.resolve;
+          }
+        />
+      </Col>
+    </Row>
+    <div className={Css.merge([CssHelper.flexBox(), Styles.longCard, CommonStyles.card(theme, isDarkMode)])}>
+      <div className=Styles.halfWidth>
+        <Row justify=Row.Between >
+            <Col col=Col.Six colSm=Col.Twelve>
               <div
                 className={Css.merge([
-                  CssHelper.flexBox(~justify=`spaceBetween, ()),
-                  Styles.fullWidth,
+                  Styles.innerLongCard,
+                  CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
-                <Text value={bandPriceInBTC->Format.fPretty ++ " BTC"} />
-              </div>;
-            },
-          )
-          |> Sub.resolve;
-        }
-      />
-    </Col>
-    <Col col=Col.Three colSm=Col.Six mbSm=16>
-      <HighlightCard
-        label="Market Cap"
-        valueAndExtraComponentSub={
-          let%Sub (_, {financial}, _) = allSub;
-          (
-            {
-              <Text
-                value={"$" ++ (financial.usdMarketCap |> Format.fCurrency)}
-                size=Text.Xxxl
-                color={theme.neutral_900}
-                weight=Text.Semibold
-              />;
-            },
-            {
-              let marketcap = financial.btcMarketCap;
-              <Text value={(marketcap |> Format.fPretty) ++ " BTC"} />;
-            },
-          )
-          |> Sub.resolve;
-        }
-      />
-    </Col>
-    <Col col=Col.Three colSm=Col.Six>
-      <HighlightCard
-        label="Latest Block"
-        valueAndExtraComponentSub={
-          let%Sub ({height, validator: {moniker, identity, operatorAddress}}, _, _) = allSub;
-          (
-            <TypeID.Block id=height position=TypeID.Landing />,
-            <ValidatorMonikerLink
-              validatorAddress=operatorAddress
-              moniker
-              identity
-              width={`percent(100.)}
-              avatarWidth=20
-            />,
-          )
-          |> Sub.resolve;
-        }
-      />
-    </Col>
-    <Col col=Col.Three colSm=Col.Six>
-      <HighlightCard
-        label="Active Validators"
-        valueAndExtraComponentSub={
-          let%Sub (_, _, (activeValidatorCount, bondedTokenCount)) = allSub;
-          (
-            {
-              let activeValidators = activeValidatorCount->Format.iPretty ++ " Nodes";
-              <Text
-                value=activeValidators
-                size=Text.Xxxl
-                color={theme.neutral_900}
-                weight=Text.Semibold
-              />;
-            },
-            <Text
-              value={
-                (bondedTokenCount |> Coin.getBandAmountFromCoin |> Format.fPretty)
-                ++ " BAND Bonded"
-              }
-            />,
-          )
-          |> Sub.resolve;
-        }
-      />
-    </Col>
-  </Row>;
+                  <div className=Styles.pb>
+                    <Text value="Total Transactions" size=Text.Lg weight=Text.Regular />
+                  </div>
+                  <div className=CssHelper.flexBox()>
+                    {switch (latestTxsSub) {
+                    | Data((latestTx)) =>
+                      <div className=Styles.mr2>
+                        <Text 
+                          value={
+                            latestTx
+                            ->Belt.Array.get(0)
+                            ->Belt.Option.mapWithDefault(0, ({id}) => id )
+                            ->float_of_int
+                            ->Format.fCurrency
+                          }
+                          size=Text.Xxl 
+                          weight=Text.Bold 
+                          height={Text.Px(20)}
+                          color=theme.neutral_900
+                        />
+                      </div>
+                    | _ =>
+                      <LoadingCensorBar width=90 height=18 />
+                    }}
+                    {switch (last24txsCountSub) {
+                    | Data((last24Tx)) =>
+                      <div className=Styles.mr2>
+                        <Text 
+                          value={"( " ++ (last24Tx |> float_of_int |> Format.fCurrency ) ++ " last 24 hr)"}
+                          size=Text.Md 
+                          weight=Text.Regular 
+                          color=theme.neutral_900
+                        />
+                      </div>
+                    | _ =>
+                      <LoadingCensorBar width=120 height=20 />
+                    }}
+                  </div>
+              </div>
+            </Col>
+            <Col col=Col.Six colSm=Col.Twelve>
+              <div
+                className={Css.merge([
+                  Styles.innerLongCard,
+                  CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
+                ])}>
+                  <div className=Styles.pb>
+                    <Text value="Total Requests" size=Text.Lg weight=Text.Regular />
+                  </div>
+                  <div className=CssHelper.flexBox()>
+                    {switch (latestRequestSub) {
+                    | Data((latestRequest)) =>
+                      <div className=Styles.mr2>
+                        <Text 
+                          value={
+                            latestRequest
+                            ->Belt.Array.get(0)
+                            ->Belt.Option.mapWithDefault(0, ({id}) => id |> ID.Request.toInt)
+                            ->float_of_int
+                            ->Format.fCurrency
+                          }
+                          size=Text.Xxl 
+                          weight=Text.Bold 
+                          height={Text.Px(20)}
+                          color=theme.neutral_900
+                        />
+                      </div>
+                    | _ =>
+                      <LoadingCensorBar width=90 height=18 />
+                    }}
+                    {switch (last24RequestCountSub) {
+                    | Data((last24Request)) =>
+                      <div className=Styles.mr2>
+                        <Text 
+                          value={"( " ++ (last24Request |> float_of_int |> Format.fCurrency ) ++ " last 24 hr)"}
+                          size=Text.Md 
+                          weight=Text.Regular 
+                          color=theme.neutral_900
+                        />
+                      </div>
+                    | _ =>
+                      <LoadingCensorBar width=120 height=20 />
+                    }}
+                  </div>
+              </div>
+            </Col>
+        </Row>
+      </div>
+      {isMobile ? React.null : <Divider ml=16 mr=16 h=58 />}
+      <div className=Styles.halfWidth>
+        <Row justify=Row.Between >
+          <Col col=Col.Three colSm=Col.Twelve>
+            <div
+              className={Css.merge([
+                Styles.innerLongCard,
+                CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
+              ])}>
+              {switch (latestBlock) {
+              | Data({inflation}) =>
+                <>
+                  <div className=Styles.pb>
+                    <Text value="Inflation Rate" size=Text.Lg weight=Text.Regular />
+                  </div>
+                  <Text 
+                     value={(inflation *. 100. |> Format.fPretty(~digits=2)) ++ "%"}
+                    size=Text.Xxl 
+                    weight=Text.Bold 
+                    height={Text.Px(20)}
+                    color=theme.neutral_900
+                  />
+                </>
+              | _ =>
+                <>
+                  <LoadingCensorBar width=90 height=18 />
+                  <LoadingCensorBar width=120 height=20 />
+                </>
+              }}
+            </div>
+          </Col>
+          <Col col=Col.Three colSm=Col.Twelve>
+            <div
+              className={Css.merge([
+                Styles.innerLongCard,
+                CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
+              ])}>
+              {switch (avgCommissionSub) {
+              | Data(avgCommission) =>
+                <>
+                  <div className=Styles.pb>
+                    <Text value="Staking APR" size=Text.Lg weight=Text.Regular />
+                  </div>
+                  <Text 
+                    value={(avgCommission |> Format.fPretty(~digits=2)) ++ "%"} 
+                    size=Text.Xxl 
+                    weight=Text.Bold 
+                      height={Text.Px(20)}
+                    color=theme.neutral_900
+                  />
+                </>
+              | _ =>
+                <>
+                  <LoadingCensorBar width=90 height=18 />
+                  <LoadingCensorBar width=120 height=20 />
+                </>
+              }}
+            </div>
+          </Col>
+          <Col col=Col.Six colSm=Col.Twelve>
+            <div
+              className={Css.merge([
+                Styles.innerLongCard,
+                CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
+              ])}>
+              {switch (allSub) {
+              | Data((_, {financial}, (_, bondedTokenCount, _))) =>
+                <>
+                  <div className=Styles.pb>
+                    <Text value="BAND Bonded" size=Text.Lg weight=Text.Regular />
+                  </div>
+                  <div className=CssHelper.flexBox()>
+                    <div className=Styles.mr2>
+                      <Text 
+                        value={
+                          (
+                            ((bondedTokenCount |> Coin.getBandAmountFromCoin) /. financial.circulatingSupply *. 100.) 
+                            |> Format.fPretty(~digits=2)
+                          )
+                          ++ "%"
+                        }
+                        size=Text.Xxl 
+                        weight=Text.Bold 
+                        color=theme.neutral_900
+                      />
+                    </div>
+                    <Text 
+                      value={
+                        (bondedTokenCount |> Coin.getBandAmountFromCoin |> Format.fCurrency)
+                        ++ "/" ++ (financial.circulatingSupply |> Format.fCurrency)
+                        ++ " BAND"
+                      }
+                      size=Text.Md 
+                      weight=Text.Regular 
+                      height={Text.Px(20)}
+                      color=theme.neutral_900
+                    />
+                  </div>
+                </>
+              | _ =>
+                <>
+                  <LoadingCensorBar width=90 height=18 />
+                  <LoadingCensorBar width=120 height=20 />
+                </>
+              }}
+            </div>
+          </Col>
+        </Row>
+      </div>
+    </div>
+  </>
 };
diff --git a/src/components/Footer.re b/src/components/Footer.re
index 517c054d..fe0d7c13 100644
--- a/src/components/Footer.re
+++ b/src/components/Footer.re
@@ -28,7 +28,7 @@ let make = () => {
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   let isMobile = Media.isMobile();
 
-  <Section bg={theme.primary_600} pt=24 pb=24 ptSm=24 pbSm=24 style=Styles.footerBg>
+  <Section bg={theme.footer} pt=24 pb=24 ptSm=24 pbSm=24 style=Styles.footerBg>
     <div className=CssHelper.container>
       <Row alignItems=Row.Center>
         <Col col=Col.Six mbSm=24>
diff --git a/src/components/Header.re b/src/components/Header.re
index 223b7242..785b088c 100644
--- a/src/components/Header.re
+++ b/src/components/Header.re
@@ -75,7 +75,9 @@ module DesktopRender = {
                   </div>
                 </div>
               </LinkToHome>
-              <div className=Styles.chainIDContainer> <ChainIDBadge /> </div>
+              <div className=Styles.chainIDContainer> 
+                <ChainIDBadge />
+              </div>
             </div>
           </Col>
           <Col col=Col.Six>
@@ -144,11 +146,19 @@ module MobileRender = {
         </Col>
         <Col colSm=Col.Six>
           <div className={CssHelper.flexBox(~justify=`flexEnd, ~wrap=`nowrap, ())}>
-            <ChainIDBadge />
+            <ToggleThemeButton />
             <NavBar />
           </div>
         </Col>
       </Row>
+      <Row marginTop=20>
+        <Col colSm=Col.Six>
+          <ChainIDBadge dropdown=true />
+        </Col>
+        <Col colSm=Col.Six>
+          <UserAccount />
+        </Col>
+      </Row>
     </header>;
   };
 };
diff --git a/src/components/HistoricalBondedGraph.re b/src/components/HistoricalBondedGraph.re
index 500bfd9d..89472467 100644
--- a/src/components/HistoricalBondedGraph.re
+++ b/src/components/HistoricalBondedGraph.re
@@ -135,7 +135,7 @@ function(data, isDarkMode) {
 [@react.component]
 let make = (~operatorAddress) => {
   let dataQuery = HistoricalBondedQuery.get(operatorAddress);
-  let (ThemeContext.{isDarkMode}, _) = React.useContext(ThemeContext.context);
+  let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
   React.useEffect2(
     () => {
@@ -156,7 +156,7 @@ let make = (~operatorAddress) => {
     <div className=Styles.container>
       <canvas id="historicalBonded" className={Styles.chart(show)} />
       <EmptyContainer height={`percent(100.)} display={!show}>
-        <Icon name="fal fa-clock" size=40 color=Theme.primary_600 />
+        <Icon name="fal fa-clock" size=40 color=theme.primary_600 />
         <VSpacing size={`px(16)} />
         <Heading
           size=Heading.H4
diff --git a/src/components/LatestRequests.re b/src/components/LatestRequests.re
index a3185f08..da297f45 100644
--- a/src/components/LatestRequests.re
+++ b/src/components/LatestRequests.re
@@ -12,21 +12,14 @@ module Styles = {
     style([
       boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(4), Css.rgba(0, 0, 0, `num(0.2)))),
     ]);
-
-  let allRequestLink = (theme: Theme.t) =>
-    style([
-      backgroundColor(theme.primary_600),
-      borderRadius(`px(8)),
-      width(`px(32)),
-      height(`px(32)),
-      hover([backgroundColor(theme.darkBlue)]),
-    ]);
+  let textMRight = style([marginRight(`px(6))]);
+  let headingContainer = style([marginTop(`px(40)), marginBottom(`px(16))]);
 };
 
 module RenderBody = {
   [@react.component]
   let make = (~requestSub: ApolloHooks.Subscription.variant(RequestSub.t)) => {
-    <TBody>
+    <TBody paddingV=`px(18)>
       <Row alignItems=Row.Center>
         <Col col=Col.Three>
           {switch (requestSub) {
@@ -38,9 +31,7 @@ module RenderBody = {
           {switch (requestSub) {
            | Data({oracleScript: {oracleScriptID, name}}) =>
              <div className={CssHelper.flexBox(~wrap=`nowrap, ())}>
-               <TypeID.OracleScript id=oracleScriptID />
-               <HSpacing size=Spacing.sm />
-               <Text value=name ellipsis=true />
+               <TypeID.OracleScript id=oracleScriptID details=name />
              </div>
            | _ => <LoadingCensorBar width=150 height=15 />
            }}
@@ -83,7 +74,7 @@ module RenderBodyMobile = {
         values=InfoMobileCard.[
           ("Request ID", RequestID(id)),
           ("Oracle Script", OracleScript(oracleScriptID, name)),
-          ("Report Status", Text({j|$reportedCount of $requestedCount|j})),
+          ("Report Status", RequestStatus(resolveStatus, {j|$reportedCount of $requestedCount|j})),
         ]
         key={id |> ID.Request.toString}
         idx={id |> ID.Request.toString}
@@ -108,110 +99,110 @@ let make = (~latest5RequestSub: Sub.t(array(RequestSub.t))) => {
   let isMobile = Media.isMobile();
   let (ThemeContext.{theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
-  <Table>
-    <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0 alignItems=Row.Center>
-      <Col col=Col.Six colSm=Col.Six>
-        {isMobile
-           ? <>
-               <Heading value="Total Request" size=Heading.H4 />
-               <VSpacing size={`px(4)} />
-               {switch (latest5RequestSub) {
-                | ApolloHooks.Subscription.Data(requests) =>
-                  <Text
-                    value={
-                      requests
-                      ->Belt.Array.get(0)
-                      ->Belt.Option.mapWithDefault(0, ({id}) => id |> ID.Request.toInt)
-                      ->Format.iPretty
-                    }
-                    size=Text.Lg
-                    weight=Text.Medium
+  <>
+    {isMobile ? <div className={Css.merge([CssHelper.flexBox(~justify=`spaceBetween, ()), Styles.headingContainer])}>
+      <Heading value="Latest Request" size=Heading.H4 />
+      <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
+        <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.RequestHomePage>
+          <div className=Styles.textMRight>
+            <Text 
+              value="View All" 
+              size=Text.Md 
+              weight=Text.Semibold 
+              underline=true 
+              color=theme.neutral_900 
+            />
+          </div>
+          <Icon name="far fa-arrow-right" color=theme.neutral_900 />
+        </Link>
+      </div>
+    </div> : React.null }
+    <Table>
+      {isMobile
+        ? React.null
+        : <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0>
+          <Col col=Col.Six colSm=Col.Six>
+            <Heading value="Latest Requests" size=Heading.H4 />
+          </Col>
+          <Col col=Col.Six colSm=Col.Six>
+            <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
+              <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.RequestHomePage>
+                <div className=Styles.textMRight>
+                  <Text 
+                    value="All Requests" 
+                    size=Text.Md 
+                    weight=Text.Semibold 
+                    underline=true 
+                    color=theme.neutral_900 
                   />
-                | _ => <LoadingCensorBar width=90 height=18 />
-                }}
-             </>
-           : <Heading value="Latest Requests" size=Heading.H4 />}
-      </Col>
-      <Col col=Col.Six colSm=Col.Six>
-        <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
-          {isMobile ? React.null : <Heading value="More Requests" size=Heading.H4 />}
-          <HSpacing size=Spacing.md />
-          <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.RequestHomePage>
-            <div
-              className={Css.merge([
-                Styles.allRequestLink(theme),
-                CssHelper.flexBox(~justify=`center, ()),
-              ])}>
-              <Icon name="far fa-arrow-right" color={theme.white} />
+                </div>
+                <Icon name="far fa-arrow-right" color=theme.neutral_900 />
+              </Link>
             </div>
-          </Link>
-        </div>
-      </Col>
-    </Row>
-    {isMobile
-       ? React.null
-       : <THead height=30>
-           <Row alignItems=Row.Center>
-             <Col col=Col.Three>
-               <Text
-                 block=true
-                 value="Request ID"
-                 size=Text.Sm
-                 weight=Text.Semibold
-                 transform=Text.Uppercase
-               />
-             </Col>
-             <Col col=Col.Six>
-               <Text
-                 block=true
-                 value="Oracle Script"
-                 size=Text.Sm
-                 weight=Text.Semibold
-                 transform=Text.Uppercase
-               />
-             </Col>
-             <Col col=Col.Three>
-               <Text
-                 block=true
-                 value="Report Status"
-                 size=Text.Sm
-                 weight=Text.Semibold
-                 align=Text.Right
-                 transform=Text.Uppercase
-               />
-             </Col>
-           </Row>
-         </THead>}
-    {switch (latest5RequestSub) {
-     | Data(requests) when requests->Belt.Array.length === 0 =>
-       <EmptyContainer height={`calc((`sub, `percent(100.), `px(86)))} boxShadow=true>
-         <img
-           src={isDarkMode ? Images.noDataDark : Images.noDataLight}
-           className=Styles.noDataImage
-           alt="No Request"
-         />
-         <Heading size=Heading.H4 value="No Request" align=Heading.Center weight=Heading.Regular />
-       </EmptyContainer>
-     | Data(requests) =>
-       requests
-       ->Belt_Array.mapWithIndex((i, e) =>
-           isMobile
-             ? <RenderBodyMobile
-                 key={e.id |> ID.Request.toString}
-                 reserveIndex=i
-                 requestSub={Sub.resolve(e)}
-               />
-             : <RenderBody key={e.id |> ID.Request.toString} requestSub={Sub.resolve(e)} />
-         )
-       ->React.array
-     | _ =>
-       Belt_Array.make(5, ApolloHooks.Subscription.NoData)
-       ->Belt_Array.mapWithIndex((i, noData) =>
-           isMobile
-             ? <RenderBodyMobile key={i |> string_of_int} reserveIndex=i requestSub=noData />
-             : <RenderBody key={i |> string_of_int} requestSub=noData />
-         )
-       ->React.array
-     }}
-  </Table>;
+          </Col>
+        </Row>}
+      {isMobile
+        ? React.null
+        : <THead height=30>
+            <Row alignItems=Row.Center>
+              <Col col=Col.Three>
+                <Text
+                  block=true
+                  value="Request ID"
+                  size=Text.Sm
+                  weight=Text.Semibold
+                />
+              </Col>
+              <Col col=Col.Six>
+                <Text
+                  block=true
+                  value="Oracle Script"
+                  size=Text.Sm
+                  weight=Text.Semibold
+                />
+              </Col>
+              <Col col=Col.Three>
+                <Text
+                  block=true
+                  value="Report Status"
+                  size=Text.Sm
+                  weight=Text.Semibold
+                  align=Text.Right
+                />
+              </Col>
+            </Row>
+          </THead>}
+      {switch (latest5RequestSub) {
+      | Data(requests) when requests->Belt.Array.length === 0 =>
+        <EmptyContainer height={`calc((`sub, `percent(100.), `px(86)))} boxShadow=true>
+          <img
+            src={isDarkMode ? Images.noDataDark : Images.noDataLight}
+            className=Styles.noDataImage
+            alt="No Request"
+          />
+          <Heading size=Heading.H4 value="No Request" align=Heading.Center weight=Heading.Regular />
+        </EmptyContainer>
+      | Data(requests) =>
+        requests
+        ->Belt_Array.mapWithIndex((i, e) =>
+            isMobile
+              ? <RenderBodyMobile
+                  key={e.id |> ID.Request.toString}
+                  reserveIndex=i
+                  requestSub={Sub.resolve(e)}
+                />
+              : <RenderBody key={e.id |> ID.Request.toString} requestSub={Sub.resolve(e)} />
+          )
+        ->React.array
+      | _ =>
+        Belt_Array.make(5, ApolloHooks.Subscription.NoData)
+        ->Belt_Array.mapWithIndex((i, noData) =>
+            isMobile
+              ? <RenderBodyMobile key={i |> string_of_int} reserveIndex=i requestSub=noData />
+              : <RenderBody key={i |> string_of_int} requestSub=noData />
+          )
+        ->React.array
+      }}
+    </Table>
+  </>;
 };
diff --git a/src/components/LatestTxTable.re b/src/components/LatestTxTable.re
index f5814343..c735e37c 100644
--- a/src/components/LatestTxTable.re
+++ b/src/components/LatestTxTable.re
@@ -2,34 +2,35 @@ module Styles = {
   open Css;
 
   let statusImg = style([width(`px(20)), marginTop(`px(-3))]);
-  let allTxLink = (theme: Theme.t) =>
-    style([
-      backgroundColor(theme.primary_600),
-      borderRadius(`px(8)),
-      width(`px(32)),
-      height(`px(32)),
-      hover([backgroundColor(theme.darkBlue)]),
-    ]);
+  let textMRight = style([marginRight(`px(6))]);
+  let headingContainer = style([marginBottom(`px(16))]);
 };
 
 module RenderBody = {
   [@react.component]
   let make = (~txSub: ApolloHooks.Subscription.variant(TxSub.t)) => {
-    <TBody>
-      <Row alignItems=Row.Start>
-        <Col col=Col.Two>
+    <TBody paddingV=`px(17)>
+      <Row alignItems=Row.Center>
+        <Col col=Col.Four>
           {switch (txSub) {
-           | Data({txHash}) => <TxLink txHash width=110 />
+           | Data({txHash}) => <TxLink txHash width=110 weight=Text.Regular />
            | _ => <LoadingCensorBar width=60 height=15 />
            }}
         </Col>
-        <Col col=Col.Two>
+        <Col col=Col.Three>
           {switch (txSub) {
            | Data({blockHeight}) => <TypeID.Block id=blockHeight />
            | _ => <LoadingCensorBar width=50 height=15 />
            }}
         </Col>
-        <Col col=Col.One>
+        <Col col=Col.Three>
+          {switch (txSub) {
+           | Data({messages, txHash, success, errMsg}) =>
+             <MsgBadgeGroup txHash messages/>
+           | _ => <LoadingCensorBar width=320 height=15 />
+           }}
+        </Col>
+        <Col col=Col.Two>
           <div className={CssHelper.flexBox(~justify=`center, ~align=`center, ())}>
             {switch (txSub) {
              | Data({success}) =>
@@ -42,13 +43,6 @@ module RenderBody = {
              }}
           </div>
         </Col>
-        <Col col=Col.Seven>
-          {switch (txSub) {
-           | Data({messages, txHash, success, errMsg}) =>
-             <TxMessages txHash messages success errMsg />
-           | _ => <LoadingCensorBar width=320 height=15 />
-           }}
-        </Col>
       </Row>
     </TBody>;
   };
@@ -65,7 +59,8 @@ module RenderBodyMobile = {
         values=InfoMobileCard.[
           ("Tx Hash", TxHash(txHash, isSmallMobile ? 170 : 200)),
           ("Block", Height(blockHeight)),
-          ("Actions", Messages(txHash, messages, success, errMsg)),
+          ("Actions", MsgBadgeGroup(txHash, messages)),
+          ("Status", Status(success)),
         ]
         key={txHash |> Hash.toHex}
         idx={txHash |> Hash.toHex}
@@ -84,6 +79,7 @@ module RenderBodyMobile = {
               },
             ),
           ),
+          ("Status", Loading(70)),
         ]
         key={reserveIndex |> string_of_int}
         idx={reserveIndex |> string_of_int}
@@ -95,93 +91,92 @@ module RenderBodyMobile = {
 [@react.component]
 let make = () => {
   let isMobile = Media.isMobile();
-  let txCount = 5;
+  let txCount = 10;
   let txsSub = TxSub.getList(~page=1, ~pageSize=txCount, ());
   let (ThemeContext.{theme}, _) = React.useContext(ThemeContext.context);
 
-  <Table>
-    <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0>
-      <Col col=Col.Six colSm=Col.Six>
-        <Heading value="Latest Transactions" size=Heading.H4 />
-        <VSpacing size={`px(4)} />
-        {switch (txsSub) {
-         | ApolloHooks.Subscription.Data(txs) =>
-           <Text
-             value={
-               txs
-               ->Belt.Array.get(0)
-               ->Belt.Option.mapWithDefault(0, ({id}) => id)
-               ->Format.iPretty
-             }
-             size=Text.Lg
-             weight=Text.Medium
-           />
-         | _ => <LoadingCensorBar width=90 height=18 />
-         }}
-      </Col>
-      <Col col=Col.Six colSm=Col.Six>
-        <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
-          {isMobile ? React.null : <Heading value="More Transactions" size=Heading.H4 />}
-          <HSpacing size=Spacing.md />
-          <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.TxHomePage>
-            <div
-              className={Css.merge([
-                Styles.allTxLink(theme),
-                CssHelper.flexBox(~justify=`center, ()),
-              ])}>
-              <Icon name="far fa-arrow-right" color={theme.white} />
+  <>
+    {isMobile ? <div className={Css.merge([CssHelper.flexBox(~justify=`spaceBetween, ()), Styles.headingContainer])}>
+      <Heading value="Latest Transactions" size=Heading.H4 />
+      <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
+        <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.TxHomePage>
+          <div className=Styles.textMRight>
+            <Text 
+              value="View All" 
+              size=Text.Md 
+              weight=Text.Semibold 
+              underline=true 
+              color=theme.neutral_900 
+            />
+          </div>
+          <Icon name="far fa-arrow-right" color=theme.neutral_900 />
+        </Link>
+      </div>
+    </div> : React.null }
+    <Table>
+      {isMobile
+        ? React.null
+        : <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0>
+          <Col col=Col.Six colSm=Col.Six>
+            <Heading value="Latest Transactions" size=Heading.H4 />
+          </Col>
+          <Col col=Col.Six colSm=Col.Six>
+            <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
+              <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.TxHomePage>
+                <div className=Styles.textMRight>
+                  <Text 
+                    value="All Transactions" 
+                    size=Text.Md 
+                    weight=Text.Semibold 
+                    underline=true 
+                    color=theme.neutral_900 
+                  />
+                </div>
+                <Icon name="far fa-arrow-right" color=theme.neutral_900 />
+              </Link>
             </div>
-          </Link>
-        </div>
-      </Col>
-    </Row>
-    {isMobile
-       ? React.null
-       : <THead height=30>
-           <Row alignItems=Row.Center>
-             <Col col=Col.Two>
-               <div className={CssHelper.flexBox()}>
-                 <Text value="Tx Hash" size=Text.Sm transform=Text.Uppercase />
-               </div>
-             </Col>
-             <Col col=Col.Two>
-               <div className={CssHelper.flexBox()}>
-                 <Text value="Block" size=Text.Sm transform=Text.Uppercase />
-               </div>
-             </Col>
-             <Col col=Col.One>
-               <div className={CssHelper.flexBox(~justify=`center, ~align=`center, ())}>
-                 <Text value="Status" size=Text.Sm transform=Text.Uppercase />
-               </div>
-             </Col>
-             <Col col=Col.Seven>
-               <div className={CssHelper.flexBox()}>
-                 <Text value="Actions" size=Text.Sm transform=Text.Uppercase />
-               </div>
-             </Col>
-           </Row>
-         </THead>}
-    {switch (txsSub) {
-     | Data(txs) =>
-       txs
-       ->Belt_Array.mapWithIndex((i, e) =>
-           isMobile
-             ? <RenderBodyMobile
-                 key={e.txHash |> Hash.toHex}
-                 reserveIndex=i
-                 txSub={Sub.resolve(e)}
-               />
-             : <RenderBody key={e.txHash |> Hash.toHex} txSub={Sub.resolve(e)} />
-         )
-       ->React.array
-     | _ =>
-       Belt_Array.make(txCount, ApolloHooks.Subscription.NoData)
-       ->Belt_Array.mapWithIndex((i, noData) =>
-           isMobile
-             ? <RenderBodyMobile key={string_of_int(i)} reserveIndex=i txSub=noData />
-             : <RenderBody key={string_of_int(i)} txSub=noData />
-         )
-       ->React.array
-     }}
-  </Table>;
+          </Col>
+        </Row>}
+      {isMobile
+        ? React.null
+        : <THead height=30>
+            <Row alignItems=Row.Center>
+              <Col col=Col.Four>
+                  <Text value="Tx Hash" size=Text.Sm />
+              </Col>
+              <Col col=Col.Three>
+                  <Text value="Block" size=Text.Sm />
+              </Col>
+              <Col col=Col.Three>
+                  <Text value="Message" size=Text.Sm />
+              </Col>
+              <Col col=Col.Two>
+                  <Text value="Status" size=Text.Sm />
+              </Col>
+            </Row>
+          </THead>}
+      {switch (txsSub) {
+      | Data(txs) =>
+        txs
+        ->Belt_Array.mapWithIndex((i, e) =>
+            isMobile
+              ? <RenderBodyMobile
+                  key={e.txHash |> Hash.toHex}
+                  reserveIndex=i
+                  txSub={Sub.resolve(e)}
+                />
+              : <RenderBody key={e.txHash |> Hash.toHex} txSub={Sub.resolve(e)} />
+          )
+        ->React.array
+      | _ =>
+        Belt_Array.make(txCount, ApolloHooks.Subscription.NoData)
+        ->Belt_Array.mapWithIndex((i, noData) =>
+            isMobile
+              ? <RenderBodyMobile key={string_of_int(i)} reserveIndex=i txSub=noData />
+              : <RenderBody key={string_of_int(i)} txSub=noData />
+          )
+        ->React.array
+      }}
+    </Table>
+  </>;
 };
diff --git a/src/components/MsgBadgeGroup.re b/src/components/MsgBadgeGroup.re
new file mode 100644
index 00000000..bf1b6355
--- /dev/null
+++ b/src/components/MsgBadgeGroup.re
@@ -0,0 +1,16 @@
+[@react.component]
+  let make = (~txHash, ~messages) => {
+    let theme = List.nth(messages, 0) |> MsgDecoder.getBadgeTheme;
+    let length = List.length(messages);
+
+    <div className={CssHelper.flexBox(~direction=`row, ())}>
+      <MsgBadge name=theme.name />
+      {
+        length > 1 ? <Text 
+        value={"+" ++ ((length - 1) |> string_of_int)}
+        size=Text.Md
+        transform=Text.Uppercase /> : React.null
+      }
+    </div>;
+    
+  }
diff --git a/src/components/NavBar.re b/src/components/NavBar.re
index 33b08a7f..782acf13 100644
--- a/src/components/NavBar.re
+++ b/src/components/NavBar.re
@@ -7,6 +7,7 @@ module RenderDesktop = {
         padding3(~top=`px(16), ~h=`zero, ~bottom=`px(12)),
         cursor(`pointer),
         fontSize(`px(12)),
+        fontWeight(`num(600)),
         hover([color(theme.neutral_900)]),
         active([color(theme.neutral_900)]),
         transition(~duration=400, "all"),
@@ -24,11 +25,14 @@ module RenderDesktop = {
     <div className={CssHelper.flexBox(~justify=`spaceBetween, ())} id="navigationBar">
       {routes
        ->Belt.List.map(((v, route)) =>
-           <div key=v className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
-             <Link className={Styles.nav(currentRoute == route, theme)} route>
+          <div key=v className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
+            { 
+              !Js.String2.includes(v, "Divider") ? <Link className={Styles.nav(currentRoute == route, theme)} route>
                {v |> React.string}
              </Link>
-           </div>
+            : <Divider />
+            }
+          </div> 
          )
        ->Array.of_list
        ->React.array}
@@ -79,7 +83,7 @@ module RenderMobile = {
 
     let menuContainer =
       style([
-        marginLeft(`px(10)),
+        marginLeft(`px(16)),
         flexBasis(`px(24)),
         flexGrow(0.),
         flexShrink(0.),
@@ -120,9 +124,9 @@ module RenderMobile = {
       <div className={Styles.navContainer(show, theme)}>
         {routes
          ->Belt.List.map(((v, route)) =>
-             <Link key=v className={Styles.nav(theme)} route onClick={_ => setShow(_ => false)}>
-               <Text value=v weight=Text.Semibold color={theme.neutral_900} />
-             </Link>
+            <Link key=v className={Styles.nav(theme)} route onClick={_ => setShow(_ => false)}>
+              <Text value=v weight=Text.Bold color={theme.neutral_900} />
+            </Link>
            )
          ->Array.of_list
          ->React.array}
@@ -141,15 +145,18 @@ module RenderMobile = {
 let make = () => {
   let routes = [
     ("Home", Route.HomePage),
-    ("Validators", ValidatorHomePage),
+    ("Divider_1", NotFound),
     ("Blocks", BlockHomePage),
     ("Transactions", TxHomePage),
+    ("Validators", ValidatorHomePage),
     ("Proposals", ProposalHomePage),
+    ("Divider_2", NotFound),
+    ("Requests", RequestHomePage),
     ("Data Sources", DataSourceHomePage),
     ("Oracle Scripts", OracleScriptHomePage),
-    ("Requests", RequestHomePage),
+    ("Divider_3", NotFound),
     ("IBCs", IBCHomePage),
   ];
 
-  Media.isMobile() ? <RenderMobile routes /> : <RenderDesktop routes />;
+  Media.isMobile() ? <RenderMobile routes /> : <RenderDesktop routes />; 
 };
diff --git a/src/components/ProgressBar.re b/src/components/ProgressBar.re
index db6cf0a6..f2728982 100644
--- a/src/components/ProgressBar.re
+++ b/src/components/ProgressBar.re
@@ -102,16 +102,16 @@ let make = (~reportedValidators, ~minimumValidators, ~requestValidators) => {
 module Uptime = {
   [@react.component]
   let make = (~percent) => {
+    let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
     let color =
       if (percent == 100.) {
-        Theme.primary_600;
+        theme.primary_600;
       } else if (percent < 100. && percent >= 79.) {
-        Theme.primary_500;
+        theme.primary_500;
       } else {
-        Theme.failColor;
+        theme.failColor;
       };
 
-    let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
     <div className={Styles.progressOuter(theme, isDarkMode)}>
       <div className={Styles.progressUptimeInner(percent, color)} />
     </div>;
diff --git a/src/components/RequestStatus.re b/src/components/RequestStatus.re
index 2c54cc64..73508b28 100644
--- a/src/components/RequestStatus.re
+++ b/src/components/RequestStatus.re
@@ -1,3 +1,8 @@
+module Styles = {
+  open Css;
+
+  let ml2 = style([marginLeft(`px(16))]);
+};
 type display_t =
   | Full
   | Mini;
@@ -11,15 +16,19 @@ let toString =
   | Unknown => "Unknown";
 
 [@react.component]
-let make = (~resolveStatus, ~display=Mini, ~style="", ~size=Text.Lg) => {
+let make = (~resolveStatus, ~display=Mini, ~style="", ~size=Text.Lg, ~text="") => {
   <div className={CssHelper.flexBox(~align=`center, ())}>
-    {switch (resolveStatus) {
+      {switch (resolveStatus) {
      | RequestSub.Success => <img alt="Success Icon" src=Images.success className=style />
      | Failure => <img alt="Fail Icon" src=Images.fail className=style />
      | Pending => <img alt="Pending Icon" src=Images.pending className=style />
      | Expired => <img alt="Expired Icon" src=Images.expired className=style />
      | Unknown => <img alt="Unknown Icon" src=Images.unknown className=style />
      }}
+     {text != ""
+       ? <div className={Styles.ml2}>
+        <Text value={text} spacing={Text.Em(0.02)} nowrap=true block=true size />
+       </div> : React.null}
     {display == Full
        ? <> <HSpacing size=Spacing.sm /> <Text value={resolveStatus |> toString} size /> </>
        : React.null}
diff --git a/src/components/StatusIcon.re b/src/components/StatusIcon.re
new file mode 100644
index 00000000..87bc0b8f
--- /dev/null
+++ b/src/components/StatusIcon.re
@@ -0,0 +1,33 @@
+module Styles = {
+  open Css;
+
+  let statusImg = style([
+    width(`px(20)),
+    // marginTop(`px(-3)),
+    marginRight(`px(8))
+  ]);
+};
+
+[@react.component]
+  let make = (~status) => {
+    let isMobile = Media.isMobile();
+    let (ThemeContext.{theme}, _) = React.useContext(ThemeContext.context);
+          
+    <div className={CssHelper.flexBox( ~align=`center, ())}>
+      <img
+        alt="Status Icon"
+        src={status ? Images.success : Images.fail}
+        className=Styles.statusImg
+      />
+      {
+        isMobile ? 
+        <Text 
+          value={status ? "Success" : "Fail"} 
+          size=Text.Md
+          color={status ? theme.successColor : theme.failColor}
+        /> 
+        : React.null
+      }
+    </div>
+  }
+
diff --git a/src/components/ToggleButton.re b/src/components/ToggleButton.re
index b387ee70..986f2477 100644
--- a/src/components/ToggleButton.re
+++ b/src/components/ToggleButton.re
@@ -7,52 +7,52 @@ module Styles = {
       Media.mobile([flexGrow(0.), flexShrink(0.), flexBasis(`percent(50.))]),
     ]);
 
-  let activeBtn = (isActive, theme: Theme.t, isDarkMode) => {
+  let leftBtn = (state, theme: Theme.t, isDarkMode) => {
     style([
       borderTopRightRadius(`zero),
       borderBottomRightRadius(`zero),
-      backgroundColor(isActive ? theme.neutral_800 : theme.neutral_000),
-      color(isActive ? theme.neutral_100 : theme.neutral_900),
+      backgroundColor(state ? theme.neutral_900 : theme.neutral_000),
+      color(state ? theme.neutral_100 : theme.neutral_900),
       hover([
-        backgroundColor(isActive ? theme.neutral_800 : theme.neutral_000),
-        color(isActive ? theme.neutral_100 : theme.neutral_900),
+        backgroundColor(state ? theme.neutral_900 : theme.neutral_100),
+        color(state ? theme.neutral_100 : theme.neutral_900),
       ]),
     ]);
   };
-  let inActiveBtn = (isActive, theme: Theme.t, isDarkMode) => {
+  let rightBtn = (state, theme: Theme.t, isDarkMode) => {
     style([
       borderTopLeftRadius(`zero),
       borderBottomLeftRadius(`zero),
-      color(isActive ? theme.neutral_900 : theme.neutral_100),
-      backgroundColor(isActive ? theme.neutral_000 : theme.neutral_800),
+      color(state ? theme.neutral_900 : theme.neutral_100),
+      backgroundColor(state ? theme.neutral_000 : theme.neutral_900),
       hover([
-        backgroundColor(isActive ? theme.neutral_000 : theme.neutral_800),
-        color(isActive ? theme.neutral_900 : theme.neutral_100),
+        backgroundColor(state ? theme.neutral_100 : theme.neutral_900),
+        color(state ? theme.neutral_900 : theme.neutral_100),
       ]),
     ]);
   };
 };
 
 [@react.component]
-let make = (~isActive, ~setIsActive) => {
+let make = (~state, ~setState, ~nameArray) => {
   let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
   <div className={Css.merge([CssHelper.flexBox(), Styles.buttonContainer])}>
     <Button
-      px=30
+      px=16
       py=8
       variant=Button.Outline
-      onClick={_ => setIsActive(_ => true)}
-      style={Css.merge([Styles.baseBtn, Styles.activeBtn(isActive, theme, isDarkMode)])}>
-      {"Active" |> React.string}
+      onClick={_ => setState(_ => true)}
+      style={Css.merge([Styles.baseBtn, Styles.leftBtn(state, theme, isDarkMode)])}>
+      {nameArray[0]  |> React.string}
     </Button>
     <Button
-      px=30
+      px=16
       py=8
       variant=Button.Outline
-      onClick={_ => setIsActive(_ => false)}
-      style={Css.merge([Styles.baseBtn, Styles.inActiveBtn(isActive, theme, isDarkMode)])}>
-      {"Inactive" |> React.string}
+      onClick={_ => setState(_ => false)}
+      style={Css.merge([Styles.baseBtn, Styles.rightBtn(state, theme, isDarkMode)])}>
+      {nameArray[1] |> React.string}
     </Button>
   </div>;
 };
diff --git a/src/components/ToggleThemeButton.re b/src/components/ToggleThemeButton.re
index 9203e2af..8f9c5a85 100644
--- a/src/components/ToggleThemeButton.re
+++ b/src/components/ToggleThemeButton.re
@@ -1,12 +1,12 @@
 module Styles = {
   open Css;
 
-  let button = (isDarkMode, theme: Theme.t) =>
+  let button = (theme: Theme.t, isDarkMode) =>
     style([
-      backgroundColor(isDarkMode ? theme.white : theme.black),
+      backgroundColor(isDarkMode ? theme.neutral_900 : theme.neutral_800),
       position(`relative),
       borderRadius(`px(8)),
-      border(`px(1), `solid, isDarkMode ? theme.white : theme.black),
+      border(`px(1), `solid, isDarkMode ? theme.neutral_900 : theme.neutral_800),
       cursor(`pointer),
       outlineStyle(`none),
       width(`px(32)),
@@ -27,9 +27,9 @@ module Styles = {
 
 [@react.component]
 let make = () => {
-  let ({ThemeContext.isDarkMode, theme}, toggle) = React.useContext(ThemeContext.context);
+  let ({ThemeContext.theme, isDarkMode}, toggle) = React.useContext(ThemeContext.context);
 
-  <button className={Styles.button(isDarkMode, theme)} onClick={_ => toggle()}>
+  <button className={Styles.button(theme, isDarkMode)} onClick={_ => toggle()}>
     {isDarkMode
        ? <img alt="Sun Icon" src=Images.sunIcon className=Styles.icon />
        : <Icon name="fal fa-moon" size=14 color={theme.white} />}
diff --git a/src/components/TxLink.re b/src/components/TxLink.re
index 4acaf812..599b897f 100644
--- a/src/components/TxLink.re
+++ b/src/components/TxLink.re
@@ -1,9 +1,9 @@
 module Styles = {
   open Css;
-  let withWidth = (w, theme: Theme.t) =>
+  let txLink = (theme: Theme.t) =>
     style([
       display(`flex),
-      maxWidth(`px(w)),
+      maxWidth(`percent(100.)),
       cursor(`pointer),
       selector("> span:hover", [color(theme.primary_600)]),
       selector("> span", [transition(~duration=200, "all")]),
@@ -13,7 +13,7 @@ module Styles = {
 [@react.component]
 let make = (~txHash: Hash.t, ~width: int, ~size=Text.Md, ~weight=Text.Medium) => {
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
-  <Link className={Styles.withWidth(width, theme)} route={Route.TxIndexPage(txHash)}>
+  <Link className={Styles.txLink(theme)} route={Route.TxIndexPage(txHash)}>
     <Text
       block=true
       code=true
@@ -22,7 +22,7 @@ let make = (~txHash: Hash.t, ~width: int, ~size=Text.Md, ~weight=Text.Medium) =>
       weight
       ellipsis=true
       size
-      color={theme.neutral_900}
+      color={theme.primary_600}
     />
   </Link>;
 };
diff --git a/src/components/TypeID.re b/src/components/TypeID.re
index 87dafd27..da2cabae 100644
--- a/src/components/TypeID.re
+++ b/src/components/TypeID.re
@@ -26,6 +26,7 @@ module Styles = {
 
   let link = (theme: Theme.t) =>
     style([
+      width(`percent(100.)),
       cursor(`pointer),
       selector("&:hover > span", [color(theme.primary_600)]),
       selector("> span", [transition(~duration=200, "all")]),
@@ -42,22 +43,30 @@ module Styles = {
 
 module ComponentCreator = (RawID: ID.IDSig) => {
   [@react.component]
-  let make = (~id, ~position=Text) => {
-    let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
+  let make = (~id, ~position=Text, ~primary=false, ~weight=Text.Regular, ~details="") => {
+    let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
     <Link
       className={Css.merge([Styles.link(theme), Styles.pointerEvents(position)])}
       route={id |> RawID.getRoute}>
-      <Text
-        value={id |> RawID.toString}
-        size={position |> fontSize}
-        weight=Text.Semibold
-        height={position |> lineHeight}
-        nowrap=true
-        code=true
-        block=true
-        color={theme.neutral_900}
-      />
+      <div className={CssHelper.flexBox(~wrap=`nowrap, ())}>
+        <Text
+          value={id |> RawID.toString}
+          size={position |> fontSize}
+          weight
+          height={position |> lineHeight}
+          nowrap=true
+          code=true
+          block=true
+          color=theme.primary_600
+        />
+        {
+          details != "" ? <>
+            <HSpacing size=Spacing.sm />
+            <Text value=details ellipsis=true />
+          </> : React.null
+        }
+      </div>
     </Link>;
   };
 };
diff --git a/src/components/UserAccount.re b/src/components/UserAccount.re
index d0a78296..0411fc5b 100644
--- a/src/components/UserAccount.re
+++ b/src/components/UserAccount.re
@@ -16,6 +16,7 @@ module Styles = {
     ]);
 
   let logo = style([width(`px(12))]);
+  let fullWidth = style([width(`percent(100.))]);
 
   let profileCard = (show, theme: Theme.t) =>
     style([
@@ -46,8 +47,8 @@ module Styles = {
 module ConnectBtn = {
   [@react.component]
   let make = (~connect) => {
-    <div id="connectButton">
-      <Button variant=Button.Outline px=24 py=8 onClick={_ => connect()}>
+    <div id="connectButton" className={Styles.fullWidth}>
+      <Button variant=Button.Outline px=24 py=8 fullWidth=true onClick={_ => connect()}>
         {"Connect Wallet" |> React.string}
       </Button>
     </div>;
@@ -57,6 +58,7 @@ module ConnectBtn = {
 module DisconnectBtn = {
   [@react.component]
   let make = (~disconnect) => {
+    let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
     <div
       className={Css.merge([
         CssHelper.flexBox(~justify=`center, ~align=`center, ()),
@@ -64,7 +66,7 @@ module DisconnectBtn = {
         Styles.disconnect,
       ])}
       onClick={_ => disconnect()}>
-      <Text value="Disconnect" weight=Text.Medium color=Theme.primary_600 nowrap=true block=true />
+      <Text value="Disconnect" weight=Text.Medium color=theme.primary_600 nowrap=true block=true />
     </div>;
   };
 };
diff --git a/src/components/buttons/Button.re b/src/components/buttons/Button.re
index 46355f68..a79ec846 100644
--- a/src/components/buttons/Button.re
+++ b/src/components/buttons/Button.re
@@ -13,6 +13,7 @@ module Styles = {
         ~py=13,
         ~pxSm=px,
         ~pySm=py,
+        ~fullWidth,
         theme: Theme.t,
         isDarkMode,
         (),
@@ -20,6 +21,7 @@ module Styles = {
     let base =
       style([
         display(`block),
+        width(fullWidth ? `percent(100.) : `auto),
         padding2(~v=`px(py), ~h=`px(px)),
         transition(~duration=200, "all"),
         borderRadius(`px(8)),
@@ -87,15 +89,16 @@ let make =
       ~fsize=12,
       ~pySm=py,
       ~pxSm=px,
-      ~onClick,
+      ~onClick=_=>(),
       ~style="",
       ~disabled=false,
+      ~fullWidth=false,
     ) => {
   let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
   <button
     className={Css.merge([
-      Styles.btn(~variant, ~px, ~py, ~pxSm, ~pySm, ~fsize, theme, isDarkMode, ()),
+      Styles.btn(~variant, ~px, ~py, ~pxSm, ~pySm, ~fsize, ~fullWidth=fullWidth, theme, isDarkMode, ()),
       CssHelper.flexBox(~align=`center, ~justify=`center, ()),
       style,
     ])}
diff --git a/src/components/charts/AccountBarChart.re b/src/components/charts/AccountBarChart.re
index 03d175a1..d90976a4 100644
--- a/src/components/charts/AccountBarChart.re
+++ b/src/components/charts/AccountBarChart.re
@@ -22,10 +22,10 @@ let make = (~availableBalance, ~balanceAtStake, ~reward, ~unbonding, ~commission
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
 
   <div className={Css.merge([Styles.barChart, CssHelper.flexBox()])}>
-    <div className={Styles.barItem(availableBalancePercent, Theme.primary_600)} />
-    <div className={Styles.barItem(balanceAtStakePercent, Theme.primary_500)} />
-    <div className={Styles.barItem(unbondingPercent, Theme.primary_200)} />
-    <div className={Styles.barItem(rewardPercent, Theme.primary_800)} />
+    <div className={Styles.barItem(availableBalancePercent, theme.primary_600)} />
+    <div className={Styles.barItem(balanceAtStakePercent, theme.primary_500)} />
+    <div className={Styles.barItem(unbondingPercent, theme.primary_200)} />
+    <div className={Styles.barItem(rewardPercent, theme.primary_800)} />
     {commission == 0.
        ? React.null : <div className={Styles.barItem(commissionPercent, theme.neutral_600)} />}
   </div>;
diff --git a/src/components/data-source/DataSourceExecute.re b/src/components/data-source/DataSourceExecute.re
index bee23825..c3381a10 100644
--- a/src/components/data-source/DataSourceExecute.re
+++ b/src/components/data-source/DataSourceExecute.re
@@ -27,9 +27,9 @@ module Styles = {
       fontFamilies([`custom("Montserrat"), `custom("sans-serif")]),
     ]);
 
-  let button = isLoading =>
+  let button = (theme: Theme.t, isLoading) =>
     style([
-      backgroundColor(isLoading ? Theme.primary_200 : Theme.primary_600),
+      backgroundColor(isLoading ? theme.primary_200 : theme.primary_600),
       fontWeight(`num(600)),
       opacity(isLoading ? 0.8 : 1.),
       cursor(isLoading ? `auto : `pointer),
@@ -150,6 +150,7 @@ module ResultRender = {
 
 [@react.component]
 let make = (~executable: JsBuffer.t) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   let params =
     ExecutableParser.parseExecutableScript(executable)->Belt_Option.getWithDefault([]);
   let numParams = params->Belt_List.length;
@@ -198,7 +199,7 @@ let make = (~executable: JsBuffer.t) => {
           </div>
           <Button
             fsize=14
-            style={Styles.button(result == Loading)}
+            style={Styles.button(theme, result == Loading)}
             px=25
             py=13
             onClick={_ =>
diff --git a/src/components/modal/connect/ConnectModal.re b/src/components/modal/connect/ConnectModal.re
index 2c028f7c..b983d696 100644
--- a/src/components/modal/connect/ConnectModal.re
+++ b/src/components/modal/connect/ConnectModal.re
@@ -41,13 +41,13 @@ module Styles = {
       color(active ? theme.neutral_900 : theme.neutral_600),
     ]);
 
-  let loginList = active =>
+  let loginList = (theme: Theme.t, active) =>
     style([
       display(`flex),
       width(`percent(100.)),
       height(`px(50)),
       borderRadius(`px(8)),
-      border(`px(2), `solid, active ? Theme.primary_600 : `transparent),
+      border(`px(2), `solid, active ? theme.primary_600 : `transparent),
       cursor(`pointer),
       overflow(`hidden),
     ]);
@@ -77,7 +77,7 @@ module LoginMethod = {
   let make = (~name, ~active, ~onClick) => {
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
-    <div className={Styles.loginList(active)} onClick>
+    <div className={Styles.loginList(theme, active)} onClick>
       <div className={Styles.header(active, theme)}>
         {switch (name) {
          | LedgerWithCosmos =>
diff --git a/src/components/msgs/MsgBadge.re b/src/components/msgs/MsgBadge.re
index 38381293..d5b228fd 100644
--- a/src/components/msgs/MsgBadge.re
+++ b/src/components/msgs/MsgBadge.re
@@ -1,11 +1,13 @@
 module Styles = {
   open Css;
-  let msgBadge =
+  let msgBadge = (theme: Theme.t) =>
     style([
-      backgroundColor(Theme.primary_600),
+      maxWidth(`px(80)),
+      backgroundColor(theme.neutral_700),
+      border(`px(1), `solid, theme.neutral_600),
       borderRadius(`px(50)),
       margin2(~v=`zero, ~h=`px(5)),
-      padding2(~v=`px(3), ~h=`px(8)),
+      padding2(~v=`px(3), ~h=`px(12)),
       whiteSpace(`pre),
       display(`inlineFlex),
     ]);
@@ -13,11 +15,19 @@ module Styles = {
 
 [@react.component]
 let make = (~name) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   <div
     className={Css.merge([
       CssHelper.flexBox(~wrap=`nowrap, ~justify=`center, ()),
-      Styles.msgBadge,
+      Styles.msgBadge(theme),
     ])}>
-    <Text value=name size=Text.Sm color=Theme.white transform=Text.Uppercase align=Text.Center />
+    <Text 
+      value=name
+      size=Text.Md
+      weight=Text.Semibold
+      color=theme.neutral_000
+      align=Text.Center
+      ellipsis=true
+    />
   </div>;
 };
diff --git a/src/components/oracle-script/OracleScriptExecute.re b/src/components/oracle-script/OracleScriptExecute.re
index 67d26313..bd4154e8 100644
--- a/src/components/oracle-script/OracleScriptExecute.re
+++ b/src/components/oracle-script/OracleScriptExecute.re
@@ -27,9 +27,9 @@ module Styles = {
       fontFamilies([`custom("Montserrat"), `custom("sans-serif")]),
     ]);
 
-  let button = isLoading =>
+  let button = (theme: Theme.t, isLoading) =>
     style([
-      backgroundColor(isLoading ? Theme.primary_200 : Theme.primary_600),
+      backgroundColor(isLoading ? theme.primary_200 : theme.primary_600),
       fontWeight(`num(600)),
       opacity(isLoading ? 0.8 : 1.),
       cursor(isLoading ? `auto : `pointer),
@@ -432,7 +432,7 @@ module ExecutionPart = {
                      fsize=14
                      px=25
                      py=13
-                     style={Styles.button(result == Loading)}
+                     style={Styles.button(theme, result == Loading)}
                      onClick={_ =>
                        if (result !== Loading) {
                          switch (
diff --git a/src/components/proposal/VoteBreakdownTable.re b/src/components/proposal/VoteBreakdownTable.re
index 60524869..9b06c53b 100644
--- a/src/components/proposal/VoteBreakdownTable.re
+++ b/src/components/proposal/VoteBreakdownTable.re
@@ -10,14 +10,14 @@ module Styles = {
       Media.mobile([overflow(`auto), padding2(~v=`px(1), ~h=`px(15))]),
     ]);
 
-  let buttonContainer = active =>
+  let buttonContainer = (theme: Theme.t, active) =>
     style([
       display(`inlineFlex),
       justifyContent(`center),
       alignItems(`center),
       cursor(`pointer),
       padding2(~v=`px(32), ~h=`zero),
-      borderBottom(`px(4), `solid, active ? Theme.primary_600 : `transparent),
+      borderBottom(`px(4), `solid, active ? theme.primary_600 : `transparent),
       Media.mobile([whiteSpace(`nowrap), padding2(~v=`px(24), ~h=`zero)]),
     ]);
 
@@ -129,9 +129,10 @@ module RenderBodyMobile = {
 module TabButton = {
   [@react.component]
   let make = (~tab, ~active, ~setTab) => {
+    let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
     let tabString = tab |> VoteSub.toString(~withSpace=true);
 
-    <div className={Styles.buttonContainer(active)} onClick={_ => setTab(_ => tab)}>
+    <div className={Styles.buttonContainer(theme, active)} onClick={_ => setTab(_ => tab)}>
       <Text value=tabString weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
     </div>;
   };
diff --git a/src/components/tx-index/IndexMsgIcon.re b/src/components/tx-index/IndexMsgIcon.re
index 9ec3ac27..fb73bd03 100644
--- a/src/components/tx-index/IndexMsgIcon.re
+++ b/src/components/tx-index/IndexMsgIcon.re
@@ -1,9 +1,9 @@
 module Styles = {
   open Css;
 
-  let iconWrapper =
+  let iconWrapper = (theme: Theme.t) =>
     style([
-      backgroundColor(Theme.primary_600),
+      backgroundColor(theme.primary_600),
       width(`px(24)),
       height(`px(24)),
       borderRadius(`percent(50.)),
@@ -22,7 +22,9 @@ module Styles = {
 
 [@react.component]
 let make = (~category: MsgDecoder.msg_cat_t) => {
-  <div className=Styles.iconWrapper>
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
+  
+  <div className=Styles.iconWrapper(theme)>
     {switch (category) {
      | TokenMsg => <Icon name="far fa-wallet" color=Theme.white size=14 />
      | FeeGrantMsg
diff --git a/src/images/fail.svg b/src/images/fail.svg
index 0b8d02c4..3fb57754 100644
--- a/src/images/fail.svg
+++ b/src/images/fail.svg
@@ -1,5 +1,14 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 20C4.48593 20 0 15.5141 0 10C0 4.48593 4.48593 0 10 0C15.5141 0 20 4.48593 20 10C20 15.5141 15.5141 20 10 20ZM10 1.42853C5.27374 1.42853 1.42853 5.27374 1.42853 10C1.42853 14.7263 5.27374 18.5715 10 18.5715C14.7263 18.5715 18.5715 14.7263 18.5715 10C18.5715 5.27374 14.7263 1.42853 10 1.42853Z" fill="#E84A4B"/>
-<path d="M13.5715 14.2857C13.3887 14.2857 13.2059 14.216 13.0664 14.0764L5.92361 6.93359C5.64452 6.65451 5.64452 6.20254 5.92361 5.92361C6.20254 5.64468 6.65466 5.64453 6.93359 5.92361L14.0764 13.0664C14.3555 13.3455 14.3555 13.7975 14.0764 14.0764C13.9369 14.216 13.7543 14.2857 13.5715 14.2857Z" fill="#E84A4B"/>
-<path d="M6.42852 14.2857C6.24572 14.2857 6.06307 14.216 5.92361 14.0764C5.64452 13.7974 5.64452 13.3453 5.92361 13.0664L13.0664 5.92361C13.3455 5.64452 13.7974 5.64452 14.0764 5.92361C14.3553 6.20254 14.3555 6.65466 14.0764 6.93359L6.93359 14.0764C6.79412 14.216 6.61132 14.2857 6.42852 14.2857Z" fill="#E84A4B"/>
+  <path
+    d="M10 20C4.48593 20 0 15.5141 0 10C0 4.48593 4.48593 0 10 0C15.5141 0 20 4.48593 20 10C20 15.5141 15.5141 20 10 20ZM10 1.42853C5.27374 1.42853 1.42853 5.27374 1.42853 10C1.42853 14.7263 5.27374 18.5715 10 18.5715C14.7263 18.5715 18.5715 14.7263 18.5715 10C18.5715 5.27374 14.7263 1.42853 10 1.42853Z"
+    fill="#E22E1D"
+  />
+  <path
+    d="M13.5715 14.2857C13.3887 14.2857 13.2059 14.216 13.0664 14.0764L5.92361 6.93359C5.64452 6.65451 5.64452 6.20254 5.92361 5.92361C6.20254 5.64468 6.65466 5.64453 6.93359 5.92361L14.0764 13.0664C14.3555 13.3455 14.3555 13.7975 14.0764 14.0764C13.9369 14.216 13.7543 14.2857 13.5715 14.2857Z"
+    fill="#E22E1D"
+  />
+  <path
+    d="M6.42852 14.2857C6.24572 14.2857 6.06307 14.216 5.92361 14.0764C5.64452 13.7974 5.64452 13.3453 5.92361 13.0664L13.0664 5.92361C13.3455 5.64452 13.7974 5.64452 14.0764 5.92361C14.3553 6.20254 14.3555 6.65466 14.0764 6.93359L6.93359 14.0764C6.79412 14.216 6.61132 14.2857 6.42852 14.2857Z"
+    fill="#E22E1D"
+  />
 </svg>
diff --git a/src/images/success.svg b/src/images/success.svg
index a9ac5c47..1438037b 100644
--- a/src/images/success.svg
+++ b/src/images/success.svg
@@ -1,4 +1,10 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.3392 7.32756C14.0142 7.00214 13.4858 7.00214 13.1608 7.32756L9.58333 10.9047L8.08916 9.4109C7.76416 9.08548 7.23583 9.08548 6.91083 9.4109C6.58541 9.73632 6.58541 10.2638 6.91083 10.5892L8.99416 12.6726C9.15666 12.8355 9.36999 12.9167 9.58333 12.9167C9.79666 12.9167 10.01 12.8355 10.1725 12.6726L14.3392 8.5059C14.6646 8.18048 14.6646 7.65298 14.3392 7.32756Z" fill="#5FD3C8"/>
-<path d="M19.1667 9.16667C18.7067 9.16667 18.3333 9.54 18.3333 10C18.3333 14.595 14.595 18.3333 10 18.3333C5.405 18.3333 1.66667 14.595 1.66667 10C1.66667 5.405 5.405 1.66667 10 1.66667C12.2371 1.66667 14.3371 2.54083 15.9137 4.12833C16.2375 4.45542 16.7654 4.45708 17.0921 4.1325C17.4187 3.80833 17.4204 3.28083 17.0962 2.95417C15.2046 1.04917 12.6842 0 10 0C4.48583 0 0 4.48583 0 10C0 15.5142 4.48583 20 10 20C15.5142 20 20 15.5142 20 10C20 9.54 19.6267 9.16667 19.1667 9.16667Z" fill="#5FD3C8"/>
+  <path
+    d="M14.3392 7.32756C14.0142 7.00214 13.4858 7.00214 13.1608 7.32756L9.58333 10.9047L8.08916 9.4109C7.76416 9.08548 7.23583 9.08548 6.91083 9.4109C6.58541 9.73632 6.58541 10.2638 6.91083 10.5892L8.99416 12.6726C9.15666 12.8355 9.36999 12.9167 9.58333 12.9167C9.79666 12.9167 10.01 12.8355 10.1725 12.6726L14.3392 8.5059C14.6646 8.18048 14.6646 7.65298 14.3392 7.32756Z"
+    fill="#3FCA7E"
+  />
+  <path
+    d="M19.1667 9.16667C18.7067 9.16667 18.3333 9.54 18.3333 10C18.3333 14.595 14.595 18.3333 10 18.3333C5.405 18.3333 1.66667 14.595 1.66667 10C1.66667 5.405 5.405 1.66667 10 1.66667C12.2371 1.66667 14.3371 2.54083 15.9137 4.12833C16.2375 4.45542 16.7654 4.45708 17.0921 4.1325C17.4187 3.80833 17.4204 3.28083 17.0962 2.95417C15.2046 1.04917 12.6842 0 10 0C4.48583 0 0 4.48583 0 10C0 15.5142 4.48583 20 10 20C15.5142 20 20 15.5142 20 10C20 9.54 19.6267 9.16667 19.1667 9.16667Z"
+    fill="#3FCA7E"
+  />
 </svg>
diff --git a/src/pages/AccountIndexPage.re b/src/pages/AccountIndexPage.re
index ef0a8254..6be003b2 100644
--- a/src/pages/AccountIndexPage.re
+++ b/src/pages/AccountIndexPage.re
@@ -175,6 +175,7 @@ module TotalBalanceRender = {
 
 [@react.component]
 let make = (~address, ~hashtag: Route.account_tab_t) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   let currentTime =
     React.useContext(TimeContext.context) |> MomentRe.Moment.format(Config.timestampUseFormat);
   let isMobile = Media.isMobile();
@@ -361,7 +362,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                      description="Balance available to send, delegate, etc"
                      amount={balance->Coin.getBandAmountFromCoins}
                      usdPrice={financial.usdPrice}
-                     color=Theme.primary_600
+                     color=theme.primary_600
                    />
                  | _ => <BalanceDetailLoading />
                  }}
@@ -374,7 +375,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                      description="Balance currently delegated to validators"
                      amount={amount->Coin.getBandAmountFromCoin}
                      usdPrice={financial.usdPrice}
-                     color=Theme.primary_500
+                     color=theme.primary_500
                    />
                  | _ => <BalanceDetailLoading />
                  }}
@@ -387,7 +388,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                      description="Amount undelegated from validators awaiting 21 days lockup period"
                      amount={unbonding->Coin.getBandAmountFromCoin}
                      usdPrice={financial.usdPrice}
-                     color=Theme.primary_200
+                     color=theme.primary_200
                    />
                  | _ => <BalanceDetailLoading />
                  }}
@@ -400,7 +401,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                      description="Reward from staking to validators"
                      amount={reward->Coin.getBandAmountFromCoin}
                      usdPrice={financial.usdPrice}
-                     color=Theme.primary_800
+                     color=theme.primary_800
                      isCountup=true
                    />
                  | _ => <BalanceDetailLoading />
@@ -418,7 +419,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                          amount=commissionAmount
                          usdPrice={financial.usdPrice}
                          isCountup=true
-                         color=Theme.primary_800
+                         color=theme.primary_800
                        />
                      </div>;
 
diff --git a/src/pages/HomePage.re b/src/pages/HomePage.re
index a37be3b6..bd716517 100644
--- a/src/pages/HomePage.re
+++ b/src/pages/HomePage.re
@@ -12,7 +12,7 @@ module Styles = {
 let make = () => {
   // Subscribe for latest 5 blocks here so both "LatestBlocks" and "ChainInfoHighLights"
   // share the same infomation.
-  let pageSize = 5;
+  let pageSize = 10;
   let latest5BlocksSub = BlockSub.getList(~pageSize, ~page=1, ());
   let latestBlockSub = latest5BlocksSub->Sub.map(blocks => blocks->Belt_Array.getExn(0));
   let latest5RequestSub = RequestSub.getList(~pageSize, ~page=1, ());
@@ -37,13 +37,9 @@ let make = () => {
     <div className={Css.merge([CssHelper.container, Styles.content])} id="homePageContainer">
       <ChainInfoHighlights latestBlockSub />
       <Row marginTop=24>
-        <Col col=Col.Six mbSm=24> <TotalRequestsGraph latest5RequestSub /> </Col>
+        <Col col=Col.Six> <LatestTxTable /> </Col>
         <Col col=Col.Six> <LatestRequests latest5RequestSub /> </Col>
       </Row>
-      <Row marginTop=24>
-        <Col col=Col.Four> <LatestBlocks blocksSub=latest5BlocksSub /> </Col>
-        <Col col=Col.Eight> <LatestTxTable /> </Col>
-      </Row>
     </div>
   </Section>;
 };
diff --git a/src/pages/RequestIndexPage.re b/src/pages/RequestIndexPage.re
index 6a9aaca5..2d8a216d 100644
--- a/src/pages/RequestIndexPage.re
+++ b/src/pages/RequestIndexPage.re
@@ -23,11 +23,11 @@ module Styles = {
   let addressContainer = style([Media.mobile([width(`px(260))])]);
   let validatorReportStatus = style([marginBottom(`px(13))]);
   let noPaddingBottom = style([paddingBottom(`zero), Media.mobile([paddingBottom(`zero)])]);
-  let ibcBadge =
+  let ibcBadge = (theme: Theme.t) =>
     style([
       display(`flex),
       padding2(~v=`px(4), ~h=`px(16)),
-      background(Theme.primary_600),
+      background(theme.primary_600),
       borderRadius(`px(10)),
       marginLeft(`px(8)),
     ]);
@@ -236,7 +236,7 @@ let make = (~reqID) => {
                <div className={CssHelper.flexBox()}>
                  <TypeID.Request id position=TypeID.Title />
                  {isIBC
-                    ? <div className=Styles.ibcBadge>
+                    ? <div className=Styles.ibcBadge(theme)>
                         <Text value="IBC" color={theme.white} weight=Text.Semibold />
                       </div>
                     : React.null}
diff --git a/src/pages/ValidatorHomePage.re b/src/pages/ValidatorHomePage.re
index 008f25d6..3a410096 100644
--- a/src/pages/ValidatorHomePage.re
+++ b/src/pages/ValidatorHomePage.re
@@ -197,7 +197,7 @@ let make = () => {
              : React.null}
           <Col col=Col.Six>
             <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
-              <ToggleButton isActive setIsActive />
+              <ToggleButton state=isActive setState=setIsActive nameArray=[|"Active","inActive"|] />
             </div>
           </Col>
         </Row>
diff --git a/src/pages/ValidatorIndexPage.re b/src/pages/ValidatorIndexPage.re
index 0e66664a..0e331160 100644
--- a/src/pages/ValidatorIndexPage.re
+++ b/src/pages/ValidatorIndexPage.re
@@ -11,9 +11,9 @@ module Styles = {
       marginRight(`px(24)),
       Media.mobile([marginRight(`zero), marginBottom(`px(16))]),
     ]);
-  let rankContainer =
+  let rankContainer = (theme: Theme.t) =>
     style([
-      backgroundColor(Theme.primary_600),
+      backgroundColor(theme.primary_600),
       borderRadius(`percent(50.)),
       position(`absolute),
       right(`zero),
@@ -101,7 +101,7 @@ let make = (~address, ~hashtag: Route.validator_tab_t) => {
                     | Some(rank) =>
                       <div
                         className={Css.merge([
-                          Styles.rankContainer,
+                          Styles.rankContainer(theme),
                           CssHelper.flexBox(~justify=`center, ()),
                         ])}>
                         <Text value={rank |> string_of_int} color={theme.white} />
diff --git a/src/query/RequestQuery.re b/src/query/RequestQuery.re
new file mode 100644
index 00000000..94dc56e2
--- /dev/null
+++ b/src/query/RequestQuery.re
@@ -0,0 +1,23 @@
+open RequestSub
+
+module RequestCountWithOffsetConfig = [%graphql
+  {|
+  query RequestCount($request_time: Int) {
+    requests_aggregate(where: {request_time: {_gte: $request_time}}) {
+      aggregate {
+        count
+      }
+    }
+  }
+|}
+];
+
+let countOffset = (~timestamp) => {
+  let (result, _) = 
+    ApolloHooks.useQuery(
+      RequestCountWithOffsetConfig.definition,
+      ~variables=RequestCountWithOffsetConfig.makeVariables(~request_time=timestamp, ()),
+    );
+  result
+  |> Query.map(_, x => x##requests_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
+};
diff --git a/src/query/TxQuery.re b/src/query/TxQuery.re
new file mode 100644
index 00000000..9e2f8b4b
--- /dev/null
+++ b/src/query/TxQuery.re
@@ -0,0 +1,23 @@
+open TxSub
+
+module TxCountWithOffsetConfig = [%graphql
+  {|
+  query TransactionsCount($greater: timestamp) {
+    transactions_aggregate(where: {block: {timestamp: {_gt: $greater }}}) {
+      aggregate {
+        count
+      }
+    }
+  }
+|}
+];
+
+let countOffset = (~timestamp) => {
+  let (result, _) = 
+    ApolloHooks.useQuery(
+      TxCountWithOffsetConfig.definition,
+      ~variables=TxCountWithOffsetConfig.makeVariables(~greater=timestamp |> Js.Json.string, ()),
+    );
+  result
+  |> Query.map(_, x => x##transactions_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
+};
diff --git a/src/reusable/AbsoluteLink.re b/src/reusable/AbsoluteLink.re
index eddf7f1c..4c7f2bfb 100644
--- a/src/reusable/AbsoluteLink.re
+++ b/src/reusable/AbsoluteLink.re
@@ -8,7 +8,10 @@ module Styles = {
 [@react.component]
 let make = (~href, ~className="", ~children) => {
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
-  <a href className={Css.merge([Styles.a(theme), className])} target="_blank" rel="noopener">
-    children
-  </a>;
+  switch(href){
+    | "" => children
+    | _ =>  <a href className={Css.merge([Styles.a(theme), className])} target="_blank" rel="noopener">
+            children
+          </a>
+  }
 };
diff --git a/src/reusable/Divider.re b/src/reusable/Divider.re
new file mode 100644
index 00000000..afa57f9d
--- /dev/null
+++ b/src/reusable/Divider.re
@@ -0,0 +1,20 @@
+module Styles = {
+  open Css;
+
+  let container = (theme: Theme.t, ml, mr, h) => {
+    style([
+      height(`px(h)),
+      width(`px(1)),
+      marginLeft(`px(ml)),
+      marginRight(`px(mr)),
+      backgroundColor(theme.neutral_300),
+      Media.mobile([marginTop(`px(15))]),
+    ]);
+  };
+};
+
+[@react.component]
+let make = (~ml=0, ~mr=0, ~h=32) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
+  <div className={Styles.container(theme, ml, mr, h)} />;
+};
diff --git a/src/reusable/InfoMobileCard.re b/src/reusable/InfoMobileCard.re
index 704532f5..16add9b2 100644
--- a/src/reusable/InfoMobileCard.re
+++ b/src/reusable/InfoMobileCard.re
@@ -23,6 +23,7 @@ type t =
   | OracleScript(ID.OracleScript.t, string)
   | RequestID(ID.Request.t)
   | RequestResponse(request_response_t)
+  | RequestStatus(RequestSub.resolve_status_t, string)
   | ProgressBar(request_count_t)
   | Float(float, option(int))
   | KVTableReport(list(string), list(MsgDecoder.RawDataReport.t))
@@ -34,6 +35,7 @@ type t =
   | BlockHash(Hash.t)
   | Validator(Address.t, string, string)
   | Messages(Hash.t, list(MsgDecoder.t), bool, string)
+  | MsgBadgeGroup(Hash.t, list(MsgDecoder.t))
   | PubKey(PubKey.t)
   | Badge(MsgDecoder.badge_theme_t)
   | VotingPower(Coin.t, float)
@@ -79,12 +81,7 @@ let make = (~info) => {
       <HSpacing size=Spacing.sm />
       <Text value=name ellipsis=true />
     </div>
-  | OracleScript(id, name) =>
-    <div className=Styles.vFlex>
-      <TypeID.OracleScript id />
-      <HSpacing size=Spacing.sm />
-      <Text value=name ellipsis=true />
-    </div>
+  | OracleScript(id, name) => <TypeID.OracleScript id details=name/>
   | RequestID(id) => <TypeID.Request id />
   | RequestResponse({requestCount, responseTime: responseTimeOpt}) =>
     <div className={CssHelper.flexBox()}>
@@ -100,6 +97,7 @@ let make = (~info) => {
         block=true
       />
     </div>
+  | RequestStatus(resolveStatus, text) => <RequestStatus resolveStatus text />
   | ProgressBar({reportedValidators, minimumValidators, requestValidators}) =>
     <ProgressBar reportedValidators minimumValidators requestValidators />
   | Float(value, digits) => <Text value={value |> Format.fPretty(~digits?)} />
@@ -168,6 +166,7 @@ let make = (~info) => {
       color={theme.neutral_900}
     />
   | Messages(txHash, messages, success, errMsg) => <TxMessages txHash messages success errMsg />
+  | MsgBadgeGroup(txHash, messages) => <MsgBadgeGroup txHash messages />
   | Badge({name, category}) => <MsgBadge name />
   | VotingPower(tokens, votingPercent) =>
     <div className=Styles.vFlex>
@@ -182,8 +181,7 @@ let make = (~info) => {
         block=true
       />
     </div>
-  | Status(status) =>
-    <img alt="Status Icon" src={status ? Images.success : Images.fail} className=Styles.logo />
+  | Status(status) => <StatusIcon status />
 
   // Special case for uptime to have loading state inside.
   | Uptime(uptimeOpt) =>
diff --git a/src/reusable/MobileCard.re b/src/reusable/MobileCard.re
index 2e4bebff..d63601ff 100644
--- a/src/reusable/MobileCard.re
+++ b/src/reusable/MobileCard.re
@@ -6,7 +6,7 @@ module Styles = {
       padding2(~v=`px(22), ~h=`zero),
       selector(
         "+ div",
-        [marginTop(`px(10)), borderTop(`px(1), `solid, theme.neutral_100)],
+        [marginTop(`px(10)), borderTop(`px(1), `solid, theme.neutral_300)],
       ),
     ]);
   let cardItem = (alignItems_, isOneColumn) =>
@@ -33,7 +33,7 @@ module Styles = {
     ]);
   let toggle = (theme: Theme.t) =>
     style([
-      borderTop(`px(1), `solid, theme.neutral_100),
+      borderTop(`px(1), `solid, theme.neutral_300),
       paddingTop(`px(10)),
       marginTop(`px(10)),
       cursor(`pointer),
@@ -91,7 +91,6 @@ module InnerPanel = {
                      value=each
                      size=Text.Sm
                      weight=Text.Semibold
-                     transform=Text.Uppercase
                    />
                  }
                })
@@ -111,14 +110,6 @@ let make = (~values, ~idx, ~status=?, ~requestStatus=?, ~styles="", ~panels=[])
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
 
   <div className={Css.merge([Styles.cardContainer(theme), styles])}>
-    {switch (status) {
-     | Some(success) => <img src={success ? Images.success : Images.fail} className=Styles.logo />
-     | None => React.null
-     }}
-    {switch (requestStatus) {
-     | Some(resolveStatus) => <RequestStatus resolveStatus style=Styles.logo />
-     | None => React.null
-     }}
     <InnerPanel values idx />
     {panels->Belt.List.size > 0
        ? <>
diff --git a/src/reusable/ProposalBadge.re b/src/reusable/ProposalBadge.re
index 53c550b0..25387afb 100644
--- a/src/reusable/ProposalBadge.re
+++ b/src/reusable/ProposalBadge.re
@@ -13,19 +13,20 @@ let getBadgeText =
   | Rejected => "Rejected"
   | Failed => "Failed";
 
-let getBadgeColor =
+let getBadgeColor = (theme: Theme.t) =>
   fun
   | ProposalSub.Deposit
-  | Voting => Theme.primary_600
-  | Passed => Theme.successColor
+  | Voting => theme.primary_600
+  | Passed => theme.successColor
   | Rejected
-  | Failed => Theme.failColor;
+  | Failed => theme.failColor;
 
 [@react.component]
 let make = (~status) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   <div
     className={Css.merge([
-      Styles.badge(getBadgeColor(status)),
+      Styles.badge(getBadgeColor(theme)(status)),
       CssHelper.flexBox(~justify=`center, ()),
     ])}>
     <Text value={getBadgeText(status)} size=Text.Sm transform=Text.Uppercase color=Theme.white />
diff --git a/src/reusable/Tab.re b/src/reusable/Tab.re
index 05abd7ba..5ae8c543 100644
--- a/src/reusable/Tab.re
+++ b/src/reusable/Tab.re
@@ -13,14 +13,14 @@ module Styles = {
       ]),
     ]);
 
-  let buttonContainer = active =>
+  let buttonContainer = (theme: Theme.t, active) =>
     style([
       display(`inlineFlex),
       justifyContent(`center),
       alignItems(`center),
       cursor(`pointer),
       padding2(~v=`px(32), ~h=`zero),
-      borderBottom(`px(4), `solid, active ? Theme.primary_600 : `transparent),
+      borderBottom(`px(4), `solid, active ? theme.primary_600 : `transparent),
       Media.mobile([whiteSpace(`nowrap), padding2(~v=`px(24), ~h=`zero)]),
     ]);
 
@@ -33,16 +33,17 @@ module Route = {
     route: Route.t,
   };
 
-  let button = (~name, ~route, ~active) => {
-    <Link key=name isTab=true className={Styles.buttonContainer(active)} route>
-      <Text value=name weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
-    </Link>;
-  };
 
   [@react.component]
   let make = (~tabs: array(t), ~currentRoute, ~children) => {
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
+    let button = (~name, ~route, ~active) => {
+      <Link key=name isTab=true className={Styles.buttonContainer(theme, active)} route>
+        <Text value=name weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
+      </Link>;
+    };
+
     <div className=Styles.container>
       <div className={Css.merge([Styles.header(theme, isDarkMode), CssHelper.flexBox(~wrap=`nowrap, ())])}>
         {tabs
@@ -57,15 +58,16 @@ module Route = {
 };
 
 module State = {
-  let button = (~name, ~active, ~setTab) => {
-    <div key=name className={Styles.buttonContainer(active)} onClick={_ => setTab()}>
-      <Text value=name weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
-    </div>;
-  };
 
   [@react.component]
   let make = (~tabs: array(string), ~tabIndex, ~setTab, ~children) => {
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
+    
+    let button = (~name, ~active, ~setTab) => {
+      <div key=name className={Styles.buttonContainer(theme, active)} onClick={_ => setTab()}>
+        <Text value=name weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
+      </div>;
+    };
 
     <div className=Styles.container>
       <div className={Css.merge([Styles.header(theme, isDarkMode), CssHelper.flexBox(~wrap=`nowrap, ())])}>
diff --git a/src/reusable/Text.re b/src/reusable/Text.re
index 34dd0092..be79ef1a 100644
--- a/src/reusable/Text.re
+++ b/src/reusable/Text.re
@@ -103,7 +103,7 @@ module Styles = {
       | Xl =>
         style([
           fontSize(`px(16)),
-          lineHeight(`em(1.41)),
+          lineHeight(`px(26)),
           Media.smallMobile([fontSize(`px(14))]),
         ])
       | Xxl => style([fontSize(`px(18)), Media.smallMobile([fontSize(`px(16))])])
diff --git a/src/rpc/PriceHook.re b/src/rpc/PriceHook.re
index aca89bc2..784d1560 100644
--- a/src/rpc/PriceHook.re
+++ b/src/rpc/PriceHook.re
@@ -5,6 +5,8 @@ type t = {
   btcPrice: float,
   btcMarketCap: float,
   circulatingSupply: float,
+  totalSupply: float
+
 };
 
 let getBandUsd24Change = () => {
@@ -52,6 +54,16 @@ let getCirculatingSupply = () => {
      });
 };
 
+let getTotalSupply = () => {
+  Axios.get("https://api.bandchain.org/supply/total")
+  |> Js.Promise.then_(result => Promise.ret(result##data |> JsonUtils.Decode.float))
+  |> Js.Promise.catch(e => {
+      Js.Console.log("can't get totalsupply");
+      Js.Console.log(e);
+      Js.Promise.resolve(0.);
+     });
+};
+
 module Price = {
   type t = {
     multiplier: float,
@@ -93,10 +105,11 @@ let getBandInfo = client => {
   // let ratesPromise = client->BandChainJS.getReferenceData([|"BAND/USD", "BAND/BTC"|]);
   let ratesPromise = getPrices();
   let supplyPromise = getCirculatingSupply();
+  let totalPromise = getTotalSupply();
   let usd24HrChangePromise = getBandUsd24Change();
 
-  let%Promise (rates, usd24HrChange, supply) =
-    Js.Promise.all3((ratesPromise, usd24HrChangePromise, supplyPromise));
+  let%Promise (rates, usd24HrChange, supply, totalSupply) =
+    Js.Promise.all4((ratesPromise, usd24HrChangePromise, supplyPromise, totalPromise));
 
   let bandInfoOpt = {
     let%Opt (bandUsd, bandBtc) = rates;
@@ -107,6 +120,7 @@ let getBandInfo = client => {
       btcPrice: bandBtc,
       btcMarketCap: bandBtc *. supply,
       circulatingSupply: supply,
+      totalSupply
     });
   };
 
diff --git a/src/subscriptions/BlockSub.re b/src/subscriptions/BlockSub.re
index d4eabbe8..97751de7 100644
--- a/src/subscriptions/BlockSub.re
+++ b/src/subscriptions/BlockSub.re
@@ -3,6 +3,7 @@ open ValidatorSub.Mini;
 type aggregate_t = {count: int};
 
 type transactions_aggregate_t = {aggregate: option(aggregate_t)};
+type transaction_t = {id: option(int)};
 
 type resolve_request_t = {
   id: ID.Request.t,
@@ -60,6 +61,10 @@ type block_t = {
   requests: array(resolve_request_t),
 };
 
+type block_with_tx_t = {
+  transactions: array(transaction_t),
+};
+
 let toExternalBlock =
     ({height, hash, inflation, timestamp, validator, transactions_aggregate, requests}) => {
   height,
diff --git a/src/subscriptions/ValidatorSub.re b/src/subscriptions/ValidatorSub.re
index b744b3e0..1709226c 100644
--- a/src/subscriptions/ValidatorSub.re
+++ b/src/subscriptions/ValidatorSub.re
@@ -263,6 +263,24 @@ let getList = (~isActive, ()) => {
      );
 };
 
+let avgCommission = (~isActive, ()) => {
+  let (result, _) =
+    ApolloHooks.useSubscription(
+      MultiConfig.definition,
+      ~variables=MultiConfig.makeVariables(~jailed=!isActive, ()),
+    );
+  result
+  |> Sub.map(_, x => {
+    let exclude100percent = x##validators ->Belt_Array.keep(({commissionRate} )=> commissionRate != 1.)
+    let length = Belt_Array.length(exclude100percent) |> float_of_int
+
+    exclude100percent
+    ->Belt_Array.reduce(0., (acc, {commissionRate}) => acc +. commissionRate)
+    ->(sum => sum /. length *. 100. )
+    }
+  );
+};
+
 let count = () => {
   let (result, _) = ApolloHooks.useSubscription(ValidatorCountConfig.definition);
   result
diff --git a/src/theme/Theme.re b/src/theme/Theme.re
index f82b1152..9c481022 100644
--- a/src/theme/Theme.re
+++ b/src/theme/Theme.re
@@ -19,6 +19,7 @@ type t = {
   failColor: color_t,
   activeColor: color_t,
   warningColor: color_t,
+  footer: color_t,
   // new theme
   neutral_000: color_t,
   neutral_100: color_t,
@@ -36,7 +37,7 @@ type t = {
 // Default Colors
 let primary_200 = hex("DAD1FE");
 let primary_500 = hex("6547EB");
-let primary_600 = hex("4520E6");
+let primary = hex("4520E6");
 let darkBlue = hex("3719B8");
 let primary_800 = hex("210D77");
 
@@ -53,7 +54,7 @@ let warningColor = hex("F2CC21");
 let get: mode_t => t =
   fun
   | Day => {
-      primary_600,
+      primary_600: hex("4520E6"),
       primary_200,
       primary_500,
       darkBlue,
@@ -65,6 +66,7 @@ let get: mode_t => t =
       activeColor,
       failColor,
       warningColor,
+      footer: hex("4520E6"),
       // new theme
       neutral_000: hex("FFFFFF"),
       neutral_100: hex("F3F4F6"),
@@ -78,7 +80,7 @@ let get: mode_t => t =
       neutral_900: hex("202327"),
     }
   | Dark => {
-      primary_600,
+      primary_600: hex("8871EF"),
       primary_200,
       primary_500,
       darkBlue,
@@ -90,6 +92,7 @@ let get: mode_t => t =
       activeColor,
       failColor,
       warningColor,
+      footer: hex("21262C"),
 
        // new theme
       neutral_000: hex("101214"),
diff --git a/src/utils/ID.re b/src/utils/ID.re
index 3edaab6e..5f5cc940 100644
--- a/src/utils/ID.re
+++ b/src/utils/ID.re
@@ -1,7 +1,6 @@
 module type RawIDSig = {
   type tab_t;
   let prefix: string;
-  let color: Css.Types.Color.t;
   let route: (int, tab_t) => Route.t;
   let defaultTab: tab_t;
 };
@@ -9,7 +8,6 @@ module type RawIDSig = {
 module RawDataSourceID = {
   type tab_t = Route.data_source_tab_t;
   let prefix = "#D";
-  let color = Theme.primary_600;
   let route = (id, tab) => Route.DataSourceIndexPage(id, tab);
   let defaultTab = Route.DataSourceRequests;
 };
@@ -17,7 +15,6 @@ module RawDataSourceID = {
 module RawOracleScriptID = {
   type tab_t = Route.oracle_script_tab_t;
   let prefix = "#O";
-  let color = Theme.primary_600;
   let route = (id, tab) => Route.OracleScriptIndexPage(id, tab);
   let defaultTab = Route.OracleScriptRequests;
 };
@@ -25,7 +22,6 @@ module RawOracleScriptID = {
 module RawRequestID = {
   type tab_t = unit;
   let prefix = "#R";
-  let color = Theme.primary_600;
   let route = (id, _) => Route.RequestIndexPage(id);
   let defaultTab = ();
 };
@@ -33,7 +29,6 @@ module RawRequestID = {
 module RawProposalID = {
   type tab_t = unit;
   let prefix = "#P";
-  let color = Theme.primary_600;
   let route = (id, _) => Route.ProposalIndexPage(id);
   let defaultTab = ();
 };
@@ -41,7 +36,6 @@ module RawProposalID = {
 module RawBlock = {
   type tab_t = unit;
   let prefix = "#B";
-  let color = Theme.primary_600;
   let route = (height, _) => Route.BlockIndexPage(height);
   let defaultTab = ();
 };