diff --git a/public/imgs/ecosystem/ecosystem-bg-mobile.webp b/public/imgs/ecosystem/ecosystem-bg-mobile.webp
index 1cdb6582..c624f28e 100644
Binary files a/public/imgs/ecosystem/ecosystem-bg-mobile.webp and b/public/imgs/ecosystem/ecosystem-bg-mobile.webp differ
diff --git a/src/pages/ecosystem/Header/Statistic.tsx b/src/pages/ecosystem/Header/Statistic.tsx
index e53ebc04..99dc7fbe 100644
--- a/src/pages/ecosystem/Header/Statistic.tsx
+++ b/src/pages/ecosystem/Header/Statistic.tsx
@@ -20,7 +20,8 @@ const Statistic = props => {
       sx={{
         flex: 1,
         borderRadius: ["0.8rem", "1.6rem"],
-        p: ["0.8rem 1.2rem", "1.6rem 2.4rem"],
+        p: ["0.8rem 1.2rem", "1.6rem 1.6rem"],
+        minWidth: ["auto", "20rem"],
         backgroundColor: theme => theme.palette.themeBackground.normal,
       }}
     >
@@ -30,6 +31,7 @@ const Statistic = props => {
           lineHeight: ["2rem", "2.8rem"],
           fontWeight: 600,
           textAlign: "center",
+          whiteSpace: ["pre-wrap", "pre-wrap", "nowrap"],
           [theme.breakpoints.down("md")]: {
             flex: 1,
             display: "inline-flex",
@@ -41,7 +43,7 @@ const Statistic = props => {
         {label}
       </Typography>
       <NumberTypography
-        sx={{ fontSize: ["2rem", "4.8rem"], lineHeight: ["3.2rem", "5.6rem"], fontWeight: 600, textAlign: "center", whiteSpace: "nowrap" }}
+        sx={{ fontSize: ["2rem", "3.2rem"], lineHeight: ["3.2rem", "4rem"], fontWeight: 600, textAlign: "center", whiteSpace: "nowrap" }}
       >
         {loading ? <StatisticSkeleton></StatisticSkeleton> : <>{children}</>}
       </NumberTypography>
diff --git a/src/pages/ecosystem/Header/index.tsx b/src/pages/ecosystem/Header/index.tsx
index b5cbe39a..d33021c0 100644
--- a/src/pages/ecosystem/Header/index.tsx
+++ b/src/pages/ecosystem/Header/index.tsx
@@ -4,13 +4,15 @@ import { Box, Container, Stack, Typography } from "@mui/material"
 
 import { fetchEcosystemMetricsData } from "@/apis/ecosystem"
 import { fetchLastBatchIndexesUrl } from "@/apis/rollupscan"
-// import useCheckViewport from "@/hooks/useCheckViewport"
+import Button from "@/components/Button"
+import { GET_IN_TOUCH_LINK } from "@/constants"
+import useCheckViewport from "@/hooks/useCheckViewport"
 import { formatLargeNumber } from "@/utils"
 
 import Statistic from "./Statistic"
 
 const Header = () => {
-  // const { isLandscape } = useCheckViewport()
+  const { isPortrait } = useCheckViewport()
   const { data, isLoading } = useSWR(fetchEcosystemMetricsData, () => scrollRequest(fetchEcosystemMetricsData), { refreshInterval: 18e4 })
 
   const { data: totalBatches, isLoading: isBatchesLoading } = useSWR(
@@ -27,7 +29,7 @@ const Header = () => {
       sx={[
         {
           position: "relative",
-          height: ["42.8rem", "72rem", "auto"],
+          height: ["calc(100vh - 6.2rem)", "72rem", "auto"],
         },
         theme => ({
           [theme.breakpoints.up("md")]: {
@@ -52,26 +54,46 @@ const Header = () => {
       )} */}
 
       <Container
-        sx={{ position: "absolute", top: ["5.8rem", "5.8rem", "calc(100vw*0.05 + 6.5rem)"], left: "50%", transform: "translateX(-50%)", zIndex: 1 }}
+        sx={{
+          position: "absolute",
+          top: ["calc(24% - 5rem)", "5.8rem", "calc(100vw*0.05 + 6.5rem)"],
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 1,
+        }}
       >
-        <Stack direction="column" alignItems="center">
+        <Stack direction="column" alignItems="center" gap="4rem">
           <Typography
-            sx={{ fontSize: ["3.6rem", "6.4rem"], lineHeight: ["5rem", "8.8rem"], fontWeight: 600, maxWidth: "66rem", textAlign: "center" }}
+            sx={{ fontSize: ["4rem", "6.4rem"], lineHeight: ["5rem", "8.8rem"], fontWeight: 600, maxWidth: ["30rem", "unset"], textAlign: "center" }}
           >
-            An Ecosystem <br />
-            Forever in Motion
+            Ecosystem projects
           </Typography>
-          <Stack direction="row" gap="2.4rem" sx={{ width: "94.8rem", maxWidth: "100%", mt: "4rem", mb: "5.2rem" }}>
-            <Statistic label="Total value locked" loading={isLoading}>
-              {data?.tvl}
+          <Stack
+            direction="row"
+            gap={["0.8rem", "2.4rem"]}
+            sx={{
+              maxWidth: "100%",
+            }}
+          >
+            <Statistic label={isPortrait ? "TVL" : "Total value locked"} loading={isLoading}>
+              {data?.tvl ?? "--"}
             </Statistic>
             <Statistic label="Transaction count" loading={isLoading}>
-              {data?.txAll}
+              {data?.txAll ?? "--"}
             </Statistic>
             <Statistic label="Batches settled to L1" loading={isBatchesLoading}>
-              {totalBatches}
+              {totalBatches ?? "--"}
             </Statistic>
           </Stack>
+          <Button
+            width={isPortrait ? "18.5rem" : "25rem"}
+            sx={{ backgroundColor: "#FFF8F3 !important" }}
+            href={GET_IN_TOUCH_LINK}
+            target="_blank"
+            color="primary"
+          >
+            Get in touch
+          </Button>
         </Stack>
       </Container>
     </Box>
diff --git a/src/pages/ecosystem/Protocols/index.tsx b/src/pages/ecosystem/Protocols/index.tsx
index 7381e712..bb63cefa 100644
--- a/src/pages/ecosystem/Protocols/index.tsx
+++ b/src/pages/ecosystem/Protocols/index.tsx
@@ -5,9 +5,8 @@ import { withStyles } from "tss-react/mui"
 import { Box, Stack, Typography } from "@mui/material"
 import useScrollTrigger from "@mui/material/useScrollTrigger"
 
-import Button from "@/components/Button"
 import SectionWrapper from "@/components/SectionWrapper"
-import { ECOSYSTEM_NETWORK_LIST, ECOSYSTEM_PAGE_SYMBOL, GET_IN_TOUCH_LINK, NORMAL_HEADER_HEIGHT } from "@/constants"
+import { ECOSYSTEM_NETWORK_LIST, ECOSYSTEM_PAGE_SYMBOL, NORMAL_HEADER_HEIGHT } from "@/constants"
 import useCheckViewport from "@/hooks/useCheckViewport"
 
 import Category from "./Category"
@@ -35,7 +34,7 @@ const Grid = withStyles(Box, theme => ({
 
 const Protocols = () => {
   const trigger = useScrollTrigger()
-  const { isMobile, isTablet, isLandscape } = useCheckViewport()
+  const { isLandscape } = useCheckViewport()
   const [searchInput, setSearchInput] = useState("")
   const [searchParams, setSearchParams] = useState({
     category: "All categories",
@@ -107,12 +106,6 @@ const Protocols = () => {
         >
           Browse all protocols
         </Typography>
-
-        {isMobile ? null : (
-          <Button width={isTablet ? "21.5rem" : "25rem"} href={GET_IN_TOUCH_LINK} target="_blank" color="primary">
-            Get in touch
-          </Button>
-        )}
       </Stack>
       <Grid id={`${ECOSYSTEM_PAGE_SYMBOL}-protocols`}>
         <Category top={stickyTop} value={searchParams.category} onChange={handleChangeCategory}></Category>