diff --git a/scan/src/components/Header.re b/scan/src/components/Header.re
index d1dd20eb83..ce3f51d39b 100644
--- a/scan/src/components/Header.re
+++ b/scan/src/components/Header.re
@@ -6,7 +6,6 @@ module Styles = {
       paddingTop(Spacing.lg),
       backgroundColor(Colors.white),
       borderBottom(`px(2), `solid, Colors.blueGray1),
-      marginBottom(`px(24)),
       zIndex(3),
       Media.mobile([
         padding(Spacing.md),
@@ -23,14 +22,7 @@ module Styles = {
   let telegramLogo = style([width(`px(15))]);
   let cmcLogo = style([width(`px(17))]);
 
-  let socialLink =
-    style([
-      display(`flex),
-      flexDirection(`row),
-      justifyContent(`center),
-      alignItems(`center),
-      marginLeft(`px(10)),
-    ]);
+  let socialLink = style([marginLeft(`px(10))]);
 
   let link = style([cursor(`pointer)]);
 };
@@ -78,24 +70,27 @@ module DesktopRender = {
                   </LinkToHome>
                   <HSpacing size=Spacing.xs />
                   <ChainIDBadge />
-                  <div className=Styles.socialLink>
-                    <a href="https://twitter.com/bandprotocol" target="_blank" rel="noopener">
-                      <img src=Images.twitterLogo className=Styles.twitterLogo />
-                    </a>
-                  </div>
-                  <div className=Styles.socialLink>
-                    <a href="https://t.me/bandprotocol" target="_blank" rel="noopener">
-                      <img src=Images.telegramLogo className=Styles.telegramLogo />
-                    </a>
-                  </div>
-                  <div className=Styles.socialLink>
-                    <a
-                      href="https://coinmarketcap.com/currencies/band-protocol/"
-                      target="_blank"
-                      rel="noopener">
-                      <img src=Images.cmcLogo className=Styles.telegramLogo />
-                    </a>
-                  </div>
+                  <a
+                    href="https://twitter.com/bandprotocol"
+                    target="_blank"
+                    rel="noopener"
+                    className=Styles.socialLink>
+                    <img src=Images.twitterLogo className=Styles.twitterLogo />
+                  </a>
+                  <a
+                    href="https://t.me/bandprotocol"
+                    target="_blank"
+                    rel="noopener"
+                    className=Styles.socialLink>
+                    <img src=Images.telegramLogo className=Styles.telegramLogo />
+                  </a>
+                  <a
+                    href="https://coinmarketcap.com/currencies/band-protocol/"
+                    target="_blank"
+                    rel="noopener"
+                    className=Styles.socialLink>
+                    <img src=Images.cmcLogo className=Styles.telegramLogo />
+                  </a>
                 </div>
               </div>
             </div>
diff --git a/scan/src/components/NavBar.re b/scan/src/components/NavBar.re
index 65f2e79fc5..9c8a5c9e19 100644
--- a/scan/src/components/NavBar.re
+++ b/scan/src/components/NavBar.re
@@ -2,8 +2,6 @@ module RenderDesktop = {
   module Styles = {
     open Css;
 
-    let flexBox = style([display(`flex), justifyContent(`spaceBetween)]);
-
     let nav = isActive =>
       style([
         padding2(~v=`px(16), ~h=`zero),
@@ -21,10 +19,10 @@ module RenderDesktop = {
   let make = (~routes) => {
     let currentRoute = ReasonReactRouter.useUrl() |> Route.fromUrl;
 
-    <div className=Styles.flexBox>
+    <div className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
       {routes
        ->Belt.List.map(((v, route)) =>
-           <div className=Styles.flexBox>
+           <div className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
              <Link className={Styles.nav(currentRoute == route)} route>
                {v |> React.string}
              </Link>
diff --git a/scan/src/pages/HomePage.re b/scan/src/pages/HomePage.re
index 316341f9f5..7c61140101 100644
--- a/scan/src/pages/HomePage.re
+++ b/scan/src/pages/HomePage.re
@@ -61,7 +61,8 @@ let make = () => {
   let lastest11BlocksSub = BlockSub.getList(~pageSize, ~page=1, ());
   let latestBlockSub = lastest11BlocksSub->Sub.map(blocks => blocks->Belt_Array.getExn(0));
 
-  <Section>
+  // TODO: fix it later
+  <Section ptSm=0>
     <div className=CssHelper.container>
       <div className=Styles.highlightsContainer>
         <ChainInfoHighlights latestBlockSub />
diff --git a/scan/src/reusable/Section.re b/scan/src/reusable/Section.re
index 384606ffa2..c00407698b 100644
--- a/scan/src/reusable/Section.re
+++ b/scan/src/reusable/Section.re
@@ -3,12 +3,20 @@ module Styles = {
 
   let base = (~pt, ~pb, ()) => style([paddingTop(`px(pt)), paddingBottom(`px(pb))]);
 
+  let mobile = (~ptSm, ~pbSm, ()) =>
+    style([Media.mobile([paddingTop(`px(ptSm)), paddingBottom(`px(pbSm))])]);
+
   let bgColor = color => style([backgroundColor(color)]);
 };
 
 [@react.component]
-let make = (~children, ~pt=0, ~pb=0, ~bg=Colors.white) => {
-  let css = Css.merge([Styles.bgColor(bg), Styles.base(~pt, ~pb, ())]);
+let make = (~children, ~pt=24, ~pb=24, ~ptSm=pt, ~pbSm=pb, ~bg=Colors.white) => {
+  let css =
+    Css.merge([
+      Styles.bgColor(bg),
+      Styles.base(~pt, ~pb, ()),
+      Styles.mobile(~ptSm, ~pbSm, ()),
+    ]);
 
   <section className=css> children </section>;
 };