From c7288002ca36cab1235b9c57e1e34785b8c3d623 Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 20:49:38 +0800
Subject: [PATCH 1/9] fix: hydration issues

---
 .eslintrc.cjs                                 |   3 +-
 src/components/background.module.scss         |  29 ++
 src/components/background.tsx                 |  35 +-
 .../footer/components/social_media/index.tsx  |   1 +
 src/components/footer/index.tsx               |   8 +-
 src/components/header-card/index.module.scss  |  10 +-
 .../product-panel/index.module.scss           |  17 +
 src/components/product-panel/index.tsx        |  27 +-
 src/components/selection-tab/index.tsx        |   3 +-
 src/screens/products/index.module.scss        |  12 +
 src/screens/products/index.tsx                | 319 ++++++++----------
 src/styles/sass.scss                          |   6 +-
 12 files changed, 251 insertions(+), 219 deletions(-)
 create mode 100644 src/components/product-panel/index.module.scss

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 90da43a5..543e7480 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -52,7 +52,6 @@ module.exports = {
     // @TODO: These should be removed when fixed
     "@typescript-eslint/no-explicit-any": "off",
     "@next/next/no-img-element": "off",
-    "jsx-a11y/alt-text": "off",
     "react/display-name": "off",
 
     "arrow-body-style": "error",
@@ -80,8 +79,10 @@ module.exports = {
       "always",
       { destructureInSignature: "always" },
     ],
+
     "react/function-component-definition": "off",
     "react/jsx-boolean-value": "error",
+    "react/jsx-curly-brace-presence": "error",
     "react/jsx-filename-extension": "off",
     "react/jsx-fragments": "error",
     "react/jsx-key": ["error", { warnOnDuplicates: true }],
diff --git a/src/components/background.module.scss b/src/components/background.module.scss
index 7bd99bd3..a5be255c 100644
--- a/src/components/background.module.scss
+++ b/src/components/background.module.scss
@@ -11,3 +11,32 @@
     display: none;
   }
 }
+
+.horseWrapperDesktop {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 50vw;
+  position: absolute;
+
+  @media (max-width: 550px) {
+    img {
+      display: none;
+    }
+  }
+}
+
+.horseWrapperMobile {
+  height: 120vw;
+  left: 0;
+  margin-top: 100px;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  @media (min-width: 550px) {
+    img {
+      display: none;
+    }
+  }
+}
diff --git a/src/components/background.tsx b/src/components/background.tsx
index 81676ef4..b05ae9e8 100644
--- a/src/components/background.tsx
+++ b/src/components/background.tsx
@@ -39,49 +39,22 @@ const Background = ({ displayHorse }: { displayHorse?: boolean }) => {
       </Box>
       {displayHorse && (
         <>
-          <Box
-            sx={{
-              "top": 0,
-              "right": 0,
-              "left": 0,
-              "height": "50vw",
-              "position": "absolute",
-
-              "& img": {
-                [theme.breakpoints.down(550)]: {
-                  display: "none",
-                },
-              },
-            }}
-          >
+          <Box className={styles.horseWrapperDesktop}>
             <Image
               alt="Forbole Horse Logo"
               fill
               loading="eager"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 70vw"
               src={require("@src/../public/images/assets/bg_desktop_horse.webp")}
               style={{ objectFit: "contain" }}
             />
           </Box>
-          <Box
-            sx={{
-              "marginTop": "100px",
-              "height": "120vw",
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-
-              "& img": {
-                [theme.breakpoints.up(550)]: {
-                  display: "none",
-                },
-              },
-            }}
-          >
+          <Box className={styles.horseWrapperMobile}>
             <Image
               alt="Forbole Horse Logo"
               fill
               priority
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 70vw"
               src={require("@src/../public/images/assets/bg_mobile_horse.webp")}
               style={{ objectFit: "cover" }}
             />
diff --git a/src/components/footer/components/social_media/index.tsx b/src/components/footer/components/social_media/index.tsx
index 7f695f75..6ee6a140 100644
--- a/src/components/footer/components/social_media/index.tsx
+++ b/src/components/footer/components/social_media/index.tsx
@@ -106,6 +106,7 @@ const SocialMedia = () => {
       </Box>
       <Stack className={styles.inpboxItem}>
         <Input
+          autoComplete="email"
           className={styles.input}
           disableUnderline
           name="email"
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 1aaf343f..23309ce9 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -19,9 +19,11 @@ const Footer = ({ red, itemColor }: FooterProps) => {
   const { t } = useTranslation("common");
 
   const wrapperStyle = {
-    style: {
-      color: itemColor,
-    },
+    style: itemColor
+      ? {
+          color: itemColor,
+        }
+      : {},
   };
 
   return (
diff --git a/src/components/header-card/index.module.scss b/src/components/header-card/index.module.scss
index 6d2f3917..f1dd244b 100644
--- a/src/components/header-card/index.module.scss
+++ b/src/components/header-card/index.module.scss
@@ -87,18 +87,20 @@ $card-box-shadow:
   }
 }
 
-.image2 {
+.image2 img {
   display: none;
 
-  @include down-laptop {
+  @include down-tablet {
     display: block;
+    object-fit: cover;
   }
 }
 
-.image3 {
+.image3 img {
   display: none;
 
-  @include up-laptop {
+  @include up-tablet {
     display: block;
+    object-fit: cover;
   }
 }
diff --git a/src/components/product-panel/index.module.scss b/src/components/product-panel/index.module.scss
new file mode 100644
index 00000000..23fe6374
--- /dev/null
+++ b/src/components/product-panel/index.module.scss
@@ -0,0 +1,17 @@
+@import "src/styles/sass.scss";
+
+body .imgMobile {
+  display: none;
+
+  @include down-tablet {
+    display: block;
+  }
+}
+
+body .imgDesktop {
+  display: none;
+
+  @include up-tablet {
+    display: block;
+  }
+}
diff --git a/src/components/product-panel/index.tsx b/src/components/product-panel/index.tsx
index 17350edf..7d5ee8f2 100644
--- a/src/components/product-panel/index.tsx
+++ b/src/components/product-panel/index.tsx
@@ -1,9 +1,13 @@
 import { Box, Stack, Typography, useTheme } from "@mui/material";
 import { forwardRef } from "react";
 
+import * as styles from "./index.module.scss";
+
 type Props = {
   title?: string;
-  imageHref: string;
+  // @deprecated
+  imageHref?: string;
+  imageHrefs?: string[];
   children?: React.ReactNode;
   index: number;
   value: number;
@@ -11,7 +15,7 @@ type Props = {
 };
 
 const productPanel = forwardRef<HTMLDivElement, Props>(
-  ({ title, imageHref, children, index, value, imgFull }, ref) => {
+  ({ title, imageHref, children, index, value, imgFull, imageHrefs }, ref) => {
     const theme = useTheme();
 
     // eslint-disable-next-line eqeqeq
@@ -85,7 +89,24 @@ const productPanel = forwardRef<HTMLDivElement, Props>(
               },
             }}
           >
-            <img alt="" loading="lazy" src={imageHref} />
+            {imageHrefs ? (
+              <>
+                <img
+                  alt=""
+                  className={styles.imgMobile}
+                  loading="lazy"
+                  src={imageHrefs[0]}
+                />
+                <img
+                  alt=""
+                  className={styles.imgDesktop}
+                  loading="lazy"
+                  src={imageHrefs[1]}
+                />
+              </>
+            ) : (
+              <img alt="" loading="lazy" src={imageHref} />
+            )}
           </Box>
           <Stack
             sx={{
diff --git a/src/components/selection-tab/index.tsx b/src/components/selection-tab/index.tsx
index 867f2f0a..3f718197 100644
--- a/src/components/selection-tab/index.tsx
+++ b/src/components/selection-tab/index.tsx
@@ -5,8 +5,9 @@ import type { ReactElement, ReactNode, SyntheticEvent } from "react";
 
 interface StyledTabsProps {
   children?: ReactNode;
-  value: number;
+  className?: string;
   onChange: (event: SyntheticEvent, newValue: number) => void;
+  value: number;
 }
 
 export const StyledTabs = styled((props: StyledTabsProps) => (
diff --git a/src/screens/products/index.module.scss b/src/screens/products/index.module.scss
index 646d32cc..105f0390 100644
--- a/src/screens/products/index.module.scss
+++ b/src/screens/products/index.module.scss
@@ -274,3 +274,15 @@
   min-width: 0;
   padding: 0;
 }
+
+.mobileOnly {
+  @include up-tablet {
+    display: none;
+  }
+}
+
+.notMobile {
+  @include down-tablet {
+    display: none;
+  }
+}
diff --git a/src/screens/products/index.tsx b/src/screens/products/index.tsx
index b8edb03d..12723f21 100644
--- a/src/screens/products/index.tsx
+++ b/src/screens/products/index.tsx
@@ -1,10 +1,4 @@
-import {
-  Container,
-  Stack,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Container, Stack, Typography } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
@@ -118,12 +112,6 @@ const Products = () => {
     [t],
   );
 
-  const theme = useTheme();
-
-  const isMobile = useMediaQuery(theme.breakpoints.down("tablet"), {
-    noSsr: true,
-  });
-
   const [v1, setV1] = useState(0);
   const [v2, setV2] = useState(0);
   const topRef = useRef(null);
@@ -157,18 +145,14 @@ const Products = () => {
         <HeaderCard
           desc_1st={t("desc")}
           desc_2nd={t("customized")}
-          head_bg={
-            !isMobile
-              ? "/products/head_bg@2x.png"
-              : "/products/head_bg_m@2x.png"
-          }
+          head_bgs={["/products/head_bg_m@2x.png", "/products/head_bg@2x.png"]}
           title={t("product")}
         />
         <Stack className={styles.why}>
           <Typography className={styles.whyText}>{t("why")}</Typography>
           <Trans
             components={[
-              <Typography className={styles.tr0} key="0" />,
+              <Typography className={styles.tr0} key="0" variant="h2" />,
               <Typography className={styles.tr1} component="span" key="1" />,
             ]}
             i18nKey="bridging"
@@ -201,7 +185,7 @@ const Products = () => {
           </Typography>
           <Trans
             components={[
-              <Typography className={styles.tr2} key="0" />,
+              <Typography className={styles.tr2} key="0" variant="h2" />,
               <Typography className={styles.tr3} component="span" key="1" />,
             ]}
             i18nKey="safe-path"
@@ -212,70 +196,67 @@ const Products = () => {
             direction="column"
             spacing={{ mobile: 1, desktop: 2 }}
           >
-            {!isMobile && (
-              <StyledTabs
-                aria-label="basic tabs example"
-                onChange={handleChange}
-                value={v1}
+            <StyledTabs
+              aria-label="basic tabs example"
+              className={styles.notMobile}
+              onChange={handleChange}
+              value={v1}
+            >
+              <StyledTab
+                icon={<img className={styles.icon} src="/products/p3.svg" />}
+                label={t("staking")}
+              />
+              <StyledTab
+                icon={<img className={styles.icon} src="/products/p4.svg" />}
+                label={t("analytics")}
+              />
+              <StyledTab
+                icon={<img className={styles.icon} src="/products/p5.svg" />}
+                label={t("developer")}
+              />
+            </StyledTabs>
+            <Box className={styles.mobileOnly}>
+              <CtaButton
+                className={styles.response36}
+                onClick={(e) => {
+                  handleChange(e, 0);
+                  scrollBottom(e, PanelRef1);
+                }}
+                startIcon={
+                  <img className={styles.icon} src="/products/p3.svg" />
+                }
               >
-                <StyledTab
-                  icon={<img className={styles.icon} src="/products/p3.svg" />}
-                  label={t("staking")}
-                />
-                <StyledTab
-                  icon={<img className={styles.icon} src="/products/p4.svg" />}
-                  label={t("analytics")}
-                />
-                <StyledTab
-                  icon={<img className={styles.icon} src="/products/p5.svg" />}
-                  label={t("developer")}
-                />
-              </StyledTabs>
-            )}
-            {isMobile && (
-              <>
-                <CtaButton
-                  className={styles.response36}
-                  onClick={(e) => {
-                    handleChange(e, 0);
-                    scrollBottom(e, PanelRef1);
-                  }}
-                  startIcon={
-                    <img className={styles.icon} src="/products/p3.svg" />
-                  }
-                >
-                  {t("staking")}
-                </CtaButton>
-                <CtaButton
-                  className={styles.response36}
-                  onClick={(e) => {
-                    handleChange(e, 1);
-                    scrollBottom(e, PanelRef1);
-                  }}
-                  startIcon={
-                    <img className={styles.icon} src="/products/p4.svg" />
-                  }
-                >
-                  {t("analytics")}
-                </CtaButton>
-                <CtaButton
-                  className={styles.response36}
-                  onClick={(e) => {
-                    handleChange(e, 2);
-                    scrollBottom(e, PanelRef1);
-                  }}
-                  startIcon={
-                    <img className={styles.icon} src="/products/p5.svg" />
-                  }
-                >
-                  {t("developer")}
-                </CtaButton>
-              </>
-            )}
+                {t("staking")}
+              </CtaButton>
+              <CtaButton
+                className={styles.response36}
+                onClick={(e) => {
+                  handleChange(e, 1);
+                  scrollBottom(e, PanelRef1);
+                }}
+                startIcon={
+                  <img className={styles.icon} src="/products/p4.svg" />
+                }
+              >
+                {t("analytics")}
+              </CtaButton>
+              <CtaButton
+                className={styles.response36}
+                onClick={(e) => {
+                  handleChange(e, 2);
+                  scrollBottom(e, PanelRef1);
+                }}
+                startIcon={
+                  <img className={styles.icon} src="/products/p5.svg" />
+                }
+              >
+                {t("developer")}
+              </CtaButton>
+            </Box>
           </Stack>
           {individuals.map((item, index) => (
             <ProductPanel
-              imageHref={isMobile ? item.imageHref_m : item.imageHref}
+              imageHrefs={[item.imageHref_m, item.imageHref]}
               index={index}
               key={index}
               ref={PanelRef1}
@@ -314,7 +295,7 @@ const Products = () => {
           </Typography>
           <Trans
             components={[
-              <Typography className={styles.tr4} key="0" />,
+              <Typography className={styles.tr4} key="0" variant="h2" />,
               <Typography className={styles.tr5} component="span" key="1" />,
             ]}
             i18nKey="trusted"
@@ -326,119 +307,111 @@ const Products = () => {
             direction="column"
             spacing={{ mobile: 1, desktop: 2 }}
           >
-            {!isMobile && (
-              <>
-                <StyledTabs onChange={handleChange2} value={v2}>
-                  <StyledTab
-                    icon={
-                      <img className={styles.icon} src="/products/p3.svg" />
-                    }
-                    label={t("validator-infrastructure")}
-                  />
-                  <StyledTab
-                    icon={
-                      <img className={styles.icon} src="/products/p6.svg" />
-                    }
-                    label={t("staking")}
-                  />
-                  <StyledTab
-                    icon={
-                      <img className={styles.icon} src="/products/p4.svg" />
-                    }
-                    label={t("analytics")}
-                  />
-                  <StyledTab className={styles.tab} label="" />
-                  <StyledTab className={styles.tab} label="" />
-                </StyledTabs>
-                <StyledTabs onChange={handleChange2} value={v2}>
-                  <StyledTab className={styles.tab} label="" />
-                  <StyledTab className={styles.tab} label="" />
-                  <StyledTab className={styles.tab} label="" />
-                  <StyledTab
-                    icon={
-                      <img className={styles.icon} src="/products/p5.svg" />
-                    }
-                    label={t("developer")}
-                  />
-                  <StyledTab
-                    icon={
-                      <img className={styles.icon} src="/products/p7.svg" />
-                    }
-                    label={t("enterprise-solution")}
-                  />
-                </StyledTabs>
-              </>
-            )}
-            {isMobile && (
-              <>
-                <CtaButton
-                  className={styles.response}
-                  onClick={(e) => {
-                    handleChange2(e, 0);
-                    scrollBottom(e, PanelRef2);
-                  }}
-                  startIcon={
-                    <img className={styles.icon} src="/products/p3.svg" />
-                  }
-                >
-                  {t("validator-infrastructure")}
-                </CtaButton>
+            <StyledTabs
+              className={styles.notMobile}
+              onChange={handleChange2}
+              value={v2}
+            >
+              <StyledTab
+                icon={<img className={styles.icon} src="/products/p3.svg" />}
+                label={t("validator-infrastructure")}
+              />
+              <StyledTab
+                icon={<img className={styles.icon} src="/products/p6.svg" />}
+                label={t("staking")}
+              />
+              <StyledTab
+                icon={<img className={styles.icon} src="/products/p4.svg" />}
+                label={t("analytics")}
+              />
+              <StyledTab className={styles.tab} label="" />
+              <StyledTab className={styles.tab} label="" />
+            </StyledTabs>
+            <StyledTabs
+              className={styles.notMobile}
+              onChange={handleChange2}
+              value={v2}
+            >
+              <StyledTab className={styles.tab} label="" />
+              <StyledTab className={styles.tab} label="" />
+              <StyledTab className={styles.tab} label="" />
+              <StyledTab
+                icon={<img className={styles.icon} src="/products/p5.svg" />}
+                label={t("developer")}
+              />
+              <StyledTab
+                icon={<img className={styles.icon} src="/products/p7.svg" />}
+                label={t("enterprise-solution")}
+              />
+            </StyledTabs>
+            <Box className={styles.mobileOnly}>
+              <CtaButton
+                className={styles.response}
+                onClick={(e) => {
+                  handleChange2(e, 0);
+                  scrollBottom(e, PanelRef2);
+                }}
+                startIcon={
+                  <img className={styles.icon} src="/products/p3.svg" />
+                }
+              >
+                {t("validator-infrastructure")}
+              </CtaButton>
+              <CtaButton
+                className={styles.response}
+                onClick={(e) => {
+                  handleChange2(e, 1);
+                  scrollBottom(e, PanelRef2);
+                }}
+                startIcon={
+                  <img className={styles.icon} src="/products/p6.svg" />
+                }
+              >
+                {t("staking")}
+              </CtaButton>
+              <CtaButton
+                className={styles.response}
+                onClick={(e) => {
+                  handleChange2(e, 2);
+                  scrollBottom(e, PanelRef2);
+                }}
+                startIcon={
+                  <img className={styles.icon} src="/products/p4.svg" />
+                }
+              >
+                {t("analytics")}
+              </CtaButton>
+              <Stack direction="row" spacing={1}>
                 <CtaButton
                   className={styles.response}
                   onClick={(e) => {
-                    handleChange2(e, 1);
+                    handleChange2(e, 3);
                     scrollBottom(e, PanelRef2);
                   }}
                   startIcon={
-                    <img className={styles.icon} src="/products/p6.svg" />
+                    <img className={styles.icon} src="/products/p5.svg" />
                   }
                 >
-                  {t("staking")}
+                  {t("developer")}
                 </CtaButton>
                 <CtaButton
                   className={styles.response}
                   onClick={(e) => {
-                    handleChange2(e, 2);
+                    handleChange2(e, 4);
                     scrollBottom(e, PanelRef2);
                   }}
                   startIcon={
-                    <img className={styles.icon} src="/products/p4.svg" />
+                    <img className={styles.icon} src="/products/p7.svg" />
                   }
                 >
-                  {t("analytics")}
+                  {t("enterprise-solution")}
                 </CtaButton>
-                <Stack direction="row" spacing={1}>
-                  <CtaButton
-                    className={styles.response}
-                    onClick={(e) => {
-                      handleChange2(e, 3);
-                      scrollBottom(e, PanelRef2);
-                    }}
-                    startIcon={
-                      <img className={styles.icon} src="/products/p5.svg" />
-                    }
-                  >
-                    {t("developer")}
-                  </CtaButton>
-                  <CtaButton
-                    className={styles.response}
-                    onClick={(e) => {
-                      handleChange2(e, 4);
-                      scrollBottom(e, PanelRef2);
-                    }}
-                    startIcon={
-                      <img className={styles.icon} src="/products/p7.svg" />
-                    }
-                  >
-                    {t("enterprise-solution")}
-                  </CtaButton>
-                </Stack>
-              </>
-            )}
+              </Stack>
+            </Box>
           </Stack>
           {businesses.map((item, index) => (
             <ProductPanel
-              imageHref={isMobile ? item.imageHref_m : item.imageHref}
+              imageHrefs={[item.imageHref_m, item.imageHref]}
               index={index}
               key={index}
               ref={PanelRef2}
diff --git a/src/styles/sass.scss b/src/styles/sass.scss
index 5690c4ef..0178d3a2 100644
--- a/src/styles/sass.scss
+++ b/src/styles/sass.scss
@@ -17,7 +17,7 @@ $breakpoint-laptop: 1025px;
 $breakpoint-desktop: 1208px;
 
 @mixin down-mobile {
-  @media (max-width: $breakpoint-mobile) {
+  @media (max-width: $breakpoint-mobile - 1) {
     @content;
   }
 }
@@ -29,7 +29,7 @@ $breakpoint-desktop: 1208px;
 }
 
 @mixin down-tablet {
-  @media (max-width: $breakpoint-tablet) {
+  @media (max-width: $breakpoint-tablet - 1) {
     @content;
   }
 }
@@ -41,7 +41,7 @@ $breakpoint-desktop: 1208px;
 }
 
 @mixin down-laptop {
-  @media (max-width: $breakpoint-laptop) {
+  @media (max-width: $breakpoint-laptop - 1) {
     @content;
   }
 }

From cf8da13874de58c5d2295ea60ec321da0cbbd208 Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 20:52:38 +0800
Subject: [PATCH 2/9] fix: add empty tags

---
 src/screens/Infrastructure/index.tsx |  2 +
 src/screens/products/index.tsx       | 64 ++++++++++++++++++++--------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/screens/Infrastructure/index.tsx b/src/screens/Infrastructure/index.tsx
index 71048ca4..dd7b01c8 100644
--- a/src/screens/Infrastructure/index.tsx
+++ b/src/screens/Infrastructure/index.tsx
@@ -230,6 +230,7 @@ const Infrastructure = () => {
               <StyledTab
                 icon={
                   <img
+                    alt=""
                     className={style.icon}
                     src="/validator_infastructure/tab1.svg"
                   />
@@ -242,6 +243,7 @@ const Infrastructure = () => {
               <StyledTab
                 icon={
                   <img
+                    alt=""
                     className={style.icon}
                     src="/validator_infastructure/tab2.svg"
                   />
diff --git a/src/screens/products/index.tsx b/src/screens/products/index.tsx
index 12723f21..d5ebb070 100644
--- a/src/screens/products/index.tsx
+++ b/src/screens/products/index.tsx
@@ -166,14 +166,18 @@ const Products = () => {
             <CtaButton
               className={styles.response}
               onClick={(e) => scrollToRef(e, individualsRef)}
-              startIcon={<img className={styles.icon} src="/products/p1.svg" />}
+              startIcon={
+                <img alt="" className={styles.icon} src="/products/p1.svg" />
+              }
             >
               {t("for-individuals")}
             </CtaButton>
             <CtaButton
               className={styles.response}
               onClick={(e) => scrollToRef(e, businessesRef)}
-              startIcon={<img className={styles.icon} src="/products/p2.svg" />}
+              startIcon={
+                <img alt="" className={styles.icon} src="/products/p2.svg" />
+              }
             >
               {t("for-businesses")}
             </CtaButton>
@@ -203,15 +207,21 @@ const Products = () => {
               value={v1}
             >
               <StyledTab
-                icon={<img className={styles.icon} src="/products/p3.svg" />}
+                icon={
+                  <img alt="" className={styles.icon} src="/products/p3.svg" />
+                }
                 label={t("staking")}
               />
               <StyledTab
-                icon={<img className={styles.icon} src="/products/p4.svg" />}
+                icon={
+                  <img alt="" className={styles.icon} src="/products/p4.svg" />
+                }
                 label={t("analytics")}
               />
               <StyledTab
-                icon={<img className={styles.icon} src="/products/p5.svg" />}
+                icon={
+                  <img alt="" className={styles.icon} src="/products/p5.svg" />
+                }
                 label={t("developer")}
               />
             </StyledTabs>
@@ -223,7 +233,7 @@ const Products = () => {
                   scrollBottom(e, PanelRef1);
                 }}
                 startIcon={
-                  <img className={styles.icon} src="/products/p3.svg" />
+                  <img alt="" className={styles.icon} src="/products/p3.svg" />
                 }
               >
                 {t("staking")}
@@ -235,7 +245,7 @@ const Products = () => {
                   scrollBottom(e, PanelRef1);
                 }}
                 startIcon={
-                  <img className={styles.icon} src="/products/p4.svg" />
+                  <img alt="" className={styles.icon} src="/products/p4.svg" />
                 }
               >
                 {t("analytics")}
@@ -247,7 +257,7 @@ const Products = () => {
                   scrollBottom(e, PanelRef1);
                 }}
                 startIcon={
-                  <img className={styles.icon} src="/products/p5.svg" />
+                  <img alt="" className={styles.icon} src="/products/p5.svg" />
                 }
               >
                 {t("developer")}
@@ -313,15 +323,21 @@ const Products = () => {
               value={v2}
             >
               <StyledTab
-                icon={<img className={styles.icon} src="/products/p3.svg" />}
+                icon={
+                  <img alt="" className={styles.icon} src="/products/p3.svg" />
+                }
                 label={t("validator-infrastructure")}
               />
               <StyledTab
-                icon={<img className={styles.icon} src="/products/p6.svg" />}
+                icon={
+                  <img alt="" className={styles.icon} src="/products/p6.svg" />
+                }
                 label={t("staking")}
               />
               <StyledTab
-                icon={<img className={styles.icon} src="/products/p4.svg" />}
+                icon={
+                  <img alt="" className={styles.icon} src="/products/p4.svg" />
+                }
                 label={t("analytics")}
               />
               <StyledTab className={styles.tab} label="" />
@@ -336,11 +352,15 @@ const Products = () => {
               <StyledTab className={styles.tab} label="" />
               <StyledTab className={styles.tab} label="" />
               <StyledTab
-                icon={<img className={styles.icon} src="/products/p5.svg" />}
+                icon={
+                  <img alt="" className={styles.icon} src="/products/p5.svg" />
+                }
                 label={t("developer")}
               />
               <StyledTab
-                icon={<img className={styles.icon} src="/products/p7.svg" />}
+                icon={
+                  <img alt="" className={styles.icon} src="/products/p7.svg" />
+                }
                 label={t("enterprise-solution")}
               />
             </StyledTabs>
@@ -352,7 +372,7 @@ const Products = () => {
                   scrollBottom(e, PanelRef2);
                 }}
                 startIcon={
-                  <img className={styles.icon} src="/products/p3.svg" />
+                  <img alt="" className={styles.icon} src="/products/p3.svg" />
                 }
               >
                 {t("validator-infrastructure")}
@@ -364,7 +384,7 @@ const Products = () => {
                   scrollBottom(e, PanelRef2);
                 }}
                 startIcon={
-                  <img className={styles.icon} src="/products/p6.svg" />
+                  <img alt="" className={styles.icon} src="/products/p6.svg" />
                 }
               >
                 {t("staking")}
@@ -376,7 +396,7 @@ const Products = () => {
                   scrollBottom(e, PanelRef2);
                 }}
                 startIcon={
-                  <img className={styles.icon} src="/products/p4.svg" />
+                  <img alt="" className={styles.icon} src="/products/p4.svg" />
                 }
               >
                 {t("analytics")}
@@ -389,7 +409,11 @@ const Products = () => {
                     scrollBottom(e, PanelRef2);
                   }}
                   startIcon={
-                    <img className={styles.icon} src="/products/p5.svg" />
+                    <img
+                      alt=""
+                      className={styles.icon}
+                      src="/products/p5.svg"
+                    />
                   }
                 >
                   {t("developer")}
@@ -401,7 +425,11 @@ const Products = () => {
                     scrollBottom(e, PanelRef2);
                   }}
                   startIcon={
-                    <img className={styles.icon} src="/products/p7.svg" />
+                    <img
+                      alt=""
+                      className={styles.icon}
+                      src="/products/p7.svg"
+                    />
                   }
                 >
                   {t("enterprise-solution")}

From 8cc71d82e6925e1fed266fb686972d2b94e3194a Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 21:09:38 +0800
Subject: [PATCH 3/9] chore: fix a11n issues

---
 .eslintrc.cjs                                 |  2 ++
 package.json                                  |  1 +
 src/components/background.module.scss         |  6 +++---
 .../mobile_nav_menu/index.module.scss         | 11 ++++++++++
 .../nav/components/mobile_nav_menu/index.tsx  | 13 ++++++------
 .../components/social_media/index.module.scss |  6 ++++++
 .../components/social_media/index.tsx         | 20 ++++++++-----------
 src/screens/terms_and_conditions/index.tsx    |  1 +
 yarn.lock                                     |  3 ++-
 9 files changed, 41 insertions(+), 22 deletions(-)
 create mode 100644 src/components/nav/components/mobile_nav_menu/index.module.scss

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 543e7480..533dff7b 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -42,6 +42,7 @@ module.exports = {
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -53,6 +54,7 @@ module.exports = {
     "@typescript-eslint/no-explicit-any": "off",
     "@next/next/no-img-element": "off",
     "react/display-name": "off",
+    "jsx-a11y/anchor-is-valid": "off",
 
     "arrow-body-style": "error",
     "camelcase": "off",
diff --git a/package.json b/package.json
index e2d67ddf..56aa7000 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-playwright": "^0.20.0",
     "husky": "^8.0.3",
     "i18next-parser": "^8.9.0",
diff --git a/src/components/background.module.scss b/src/components/background.module.scss
index a5be255c..8ee7979f 100644
--- a/src/components/background.module.scss
+++ b/src/components/background.module.scss
@@ -13,11 +13,11 @@
 }
 
 .horseWrapperDesktop {
-  top: 0;
-  right: 0;
-  left: 0;
   height: 50vw;
+  left: 0;
   position: absolute;
+  right: 0;
+  top: 0;
 
   @media (max-width: 550px) {
     img {
diff --git a/src/components/nav/components/mobile_nav_menu/index.module.scss b/src/components/nav/components/mobile_nav_menu/index.module.scss
new file mode 100644
index 00000000..bae1481d
--- /dev/null
+++ b/src/components/nav/components/mobile_nav_menu/index.module.scss
@@ -0,0 +1,11 @@
+@import "src/styles/sass.scss";
+
+.button {
+  background: transparent;
+  border: none;
+  color: inherit;
+  display: inline-block;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
diff --git a/src/components/nav/components/mobile_nav_menu/index.tsx b/src/components/nav/components/mobile_nav_menu/index.tsx
index ca0c2887..5c68711e 100644
--- a/src/components/nav/components/mobile_nav_menu/index.tsx
+++ b/src/components/nav/components/mobile_nav_menu/index.tsx
@@ -20,6 +20,7 @@ import { anchorElContext } from "@src/utils/menu";
 import CompanyMenuButton from "../company_menu_button";
 import LangMenuButton from "../lang_menu_button";
 import ProductsMenuButton from "../products_menu_button";
+import * as styles from "./index.module.scss";
 
 const MobileNavMenu = () => {
   const router = useRouter();
@@ -157,26 +158,26 @@ const MobileNavMenu = () => {
               : theme.palette.custom.forbole.indigo,
           }}
         >
-          <div
+          <button
+            className={styles.button}
             onClick={() => {
               router.push("/products").finally(handleClose);
             }}
-            role="button"
           >
             {t("Products")}
-          </div>
-          <div
+          </button>
+          <button
+            className={styles.button}
             onClick={() => {
               handlerCLickShowProducts();
             }}
-            role="button"
           >
             {openShowProducts ? (
               <KeyboardArrowUpIcon />
             ) : (
               <KeyboardArrowDownIcon />
             )}
-          </div>
+          </button>
         </ListItem>
         <Collapse in={openShowProducts} timeout="auto" unmountOnExit>
           <ProductsMenuButton />
diff --git a/src/screens/blog_details/components/social_media/index.module.scss b/src/screens/blog_details/components/social_media/index.module.scss
index 751d5db1..403f50cc 100644
--- a/src/screens/blog_details/components/social_media/index.module.scss
+++ b/src/screens/blog_details/components/social_media/index.module.scss
@@ -3,6 +3,12 @@
 .wrapper {
   padding-bottom: spacing(3);
 
+  button {
+    background: transparent;
+    border: none;
+    display: inline-block;
+  }
+
   svg {
     margin-right: spacing(2);
     transition: transform 0.2s ease-in-out;
diff --git a/src/screens/blog_details/components/social_media/index.tsx b/src/screens/blog_details/components/social_media/index.tsx
index 991fc5b4..0c762e6f 100644
--- a/src/screens/blog_details/components/social_media/index.tsx
+++ b/src/screens/blog_details/components/social_media/index.tsx
@@ -36,50 +36,46 @@ const SocialMedia = ({ title = "Forbole " }: any) => {
 
   return (
     <Box className={styles.wrapper}>
-      <span
+      <button
         aria-label="Share on Telegram"
         onClick={() =>
           handleClick(
             `https://telegram.me/share/?url=${shareUrl}&text=${title}`,
           )
         }
-        role="button"
       >
         <Telegram />
-      </span>
-      <span
+      </button>
+      <button
         aria-label="Share on Facebook"
         onClick={() =>
           handleClick(
             `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&quote=${title}`,
           )
         }
-        role="button"
       >
         <Facebook />
-      </span>
-      <span
+      </button>
+      <button
         aria-label="Share on Twitter"
         onClick={() =>
           handleClick(
             `https://twitter.com/intent/tweet?url=${shareUrl}&text=${title}`,
           )
         }
-        role="button"
       >
         <Twitter />
-      </span>
-      <span
+      </button>
+      <button
         aria-label="Share on LinkedIn"
         onClick={() =>
           handleClick(
             `https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}&text=${title}`,
           )
         }
-        role="button"
       >
         <LinkedIn />
-      </span>
+      </button>
     </Box>
   );
 };
diff --git a/src/screens/terms_and_conditions/index.tsx b/src/screens/terms_and_conditions/index.tsx
index 5393cfb0..831e0bbd 100644
--- a/src/screens/terms_and_conditions/index.tsx
+++ b/src/screens/terms_and_conditions/index.tsx
@@ -75,6 +75,7 @@ const TermsAndConditions = () => {
                     className={styles.link}
                     href=""
                     onClick={(e) => scrollToRef(e, ref2)}
+                    role="button"
                   >
                     Section 2 Additional Terms for Staking Service
                   </a>
diff --git a/yarn.lock b/yarn.lock
index 693709e5..4dc7dea7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5844,7 +5844,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-jsx-a11y@npm:^6.7.1":
+"eslint-plugin-jsx-a11y@npm:^6.7.1, eslint-plugin-jsx-a11y@npm:^6.8.0":
   version: 6.8.0
   resolution: "eslint-plugin-jsx-a11y@npm:6.8.0"
   dependencies:
@@ -6237,6 +6237,7 @@ __metadata:
     dotenv-defaults: "npm:^5.0.2"
     eslint: "npm:^8.56.0"
     eslint-config-next: "npm:^14.0.4"
+    eslint-plugin-jsx-a11y: "npm:^6.8.0"
     eslint-plugin-playwright: "npm:^0.20.0"
     framer-motion: "npm:^10.16.16"
     graphql: "npm:^16.8.1"

From 17227197895ad30507191bb6f003e9fa9a878c39 Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 21:45:42 +0800
Subject: [PATCH 4/9] feat: improve internal links

---
 src/components/Intro_panel/index.tsx          | 19 ++++---
 src/components/background.tsx                 |  2 +-
 .../{styles.module.css => index.module.scss}  | 51 +++++++++++++------
 src/components/four-table/index.tsx           | 26 ++++------
 src/components/intro_card/index.tsx           | 17 +++----
 .../nav/components/mobile_nav_menu/index.tsx  | 24 +++------
 src/screens/analytics_tools/index.tsx         | 12 ++---
 .../author/components/author_posts/hooks.tsx  |  2 +-
 .../blog/components/blog_posts/hooks.tsx      |  2 +-
 src/screens/contact/index.tsx                 | 30 ++++-------
 src/screens/home/index.tsx                    | 24 +++------
 src/screens/products/index.tsx                | 15 +++---
 src/screens/staking_service/index.tsx         | 16 ++----
 .../tag/components/tag_posts/hooks.tsx        | 15 ------
 .../tag/components/tag_posts/index.tsx        | 10 +++-
 15 files changed, 115 insertions(+), 150 deletions(-)
 rename src/components/four-table/{styles.module.css => index.module.scss} (79%)
 delete mode 100644 src/screens/tag/components/tag_posts/hooks.tsx

diff --git a/src/components/Intro_panel/index.tsx b/src/components/Intro_panel/index.tsx
index 8911dacf..9e639a5d 100644
--- a/src/components/Intro_panel/index.tsx
+++ b/src/components/Intro_panel/index.tsx
@@ -2,12 +2,13 @@ import { Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
 import Box from "@mui/material/Box";
 import type { StaticImageData } from "next/image";
 import Image from "next/legacy/image";
+import Link from "next/link";
 
 import CtaButton from "../cta-button";
 
 type Props = {
+  btnLink?: string;
   btnName?: string;
-  btn_Click?: () => void;
   desc?: string;
   disabled?: boolean;
   imageAlt?: string;
@@ -18,8 +19,8 @@ type Props = {
 };
 
 const IntroPanel = ({
+  btnLink,
   btnName,
-  btn_Click,
   desc,
   disabled,
   imageAlt,
@@ -72,14 +73,12 @@ const IntroPanel = ({
           >
             {title}
           </Typography>
-          {btnName && (
-            <CtaButton
-              disabled={disabled}
-              onClick={btn_Click}
-              variant="contained"
-            >
-              {btnName}
-            </CtaButton>
+          {btnName && btnLink && (
+            <Link href={btnLink}>
+              <CtaButton disabled={disabled} variant="contained">
+                {btnName}
+              </CtaButton>
+            </Link>
           )}
         </Stack>
         <Box>
diff --git a/src/components/background.tsx b/src/components/background.tsx
index b05ae9e8..2909da98 100644
--- a/src/components/background.tsx
+++ b/src/components/background.tsx
@@ -17,7 +17,7 @@ const Background = ({ displayHorse }: { displayHorse?: boolean }) => {
       </Box>
       <Box
         sx={{
-          "height": "260vw",
+          "height": displayHorse ? "260vw" : "190vw",
           "left": 0,
           "position": "absolute",
           "right": 0,
diff --git a/src/components/four-table/styles.module.css b/src/components/four-table/index.module.scss
similarity index 79%
rename from src/components/four-table/styles.module.css
rename to src/components/four-table/index.module.scss
index 819d8c8e..b5525adc 100644
--- a/src/components/four-table/styles.module.css
+++ b/src/components/four-table/index.module.scss
@@ -1,51 +1,72 @@
+@import "src/styles/sass.scss";
+
+.cta {
+  bottom: 24px;
+  left: 24px;
+  position: absolute;
+  right: 24px;
+
+  @include down-laptop {
+    display: none;
+  }
+
+  button {
+    width: 100%;
+  }
+}
+
 .active {
-  flex-grow: 0;
-  flex-shrink: 1;
-  flex-basis: 346px;
-  height: 536px;
-  border: 3px solid rgb(253, 63, 97);
   background-image: linear-gradient(
     315deg,
     rgba(212, 49, 238, 0.24) 0%,
     rgba(255, 66, 107, 0.24) 100%
   );
+  border: 3px solid rgb(253, 63, 97);
+  flex: 0 1 346px;
+  height: 536px;
 }
 
 .money {
   font-size: 64px;
 }
+
 .popular {
-  position: absolute;
-  top: -18px;
-  right: 0;
-  gap: 8px;
-  box-sizing: border-box;
-  padding: 0 11px;
-  width: 126px;
-  height: 32px;
   align-items: center;
-  border-radius: 32px;
   background: linear-gradient(315deg, #ee3131 0%, #ff426b 100%);
+  border-radius: 32px;
+  box-sizing: border-box;
   color: #fff;
+  gap: 8px;
+  height: 32px;
+  padding: 0 11px;
+  position: absolute;
+  right: 0;
   text-align: center;
+  top: -18px;
+  width: 126px;
 }
+
 .popular > span {
-  font-weight: 590;
   font-size: 18px;
   font-style: normal;
+  font-weight: 590;
   line-height: normal;
 }
+
 .none {
   display: none;
 }
+
 @media (max-width: 1024.95px) {
   .active {
     flex-basis: max-content;
     width: 100%;
   }
+
   .money {
     font-size: 48px;
   }
+
   .active .money span {
     font-size: 48px;
   }
diff --git a/src/components/four-table/index.tsx b/src/components/four-table/index.tsx
index d0b26f53..65be1e91 100644
--- a/src/components/four-table/index.tsx
+++ b/src/components/four-table/index.tsx
@@ -1,11 +1,11 @@
 import { Box, Divider, Stack, Typography, useTheme } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
-import { useRouter } from "next/router";
+import Link from "next/link";
 
 import CtaButton from "@src/components/cta-button";
 
 import usePlans from "./config";
-import styles from "./styles.module.css";
+import * as styles from "./index.module.scss";
 
 const clickItem = 2;
 
@@ -14,7 +14,6 @@ type Props = { btnHref: () => void };
 const FourTable = ({ btnHref }: Props) => {
   const { t } = useTranslation("developer_tools");
   const theme = useTheme();
-  const router = useRouter();
   const plans = usePlans();
 
   return (
@@ -175,18 +174,15 @@ const FourTable = ({ btnHref }: Props) => {
               </Box>
             )}
           </Box>
-          <CtaButton
-            onClick={Plan.btnHref ? () => router.push(Plan.btnHref) : btnHref}
-            sx={{
-              position: "absolute",
-              left: "24px",
-              right: "24px",
-              bottom: "24px",
-              [theme.breakpoints.down("laptop")]: { display: "none" },
-            }}
-          >
-            {Plan.btnName}
-          </CtaButton>
+          {Plan.btnHref ? (
+            <Link className={styles.cta} href={Plan.btnHref}>
+              <CtaButton>{Plan.btnName}</CtaButton>
+            </Link>
+          ) : (
+            <CtaButton className={styles.cta} onClick={btnHref}>
+              {Plan.btnName}
+            </CtaButton>
+          )}
         </Box>
       ))}
     </Stack>
diff --git a/src/components/intro_card/index.tsx b/src/components/intro_card/index.tsx
index 08aea0ca..09a5d713 100644
--- a/src/components/intro_card/index.tsx
+++ b/src/components/intro_card/index.tsx
@@ -1,6 +1,7 @@
 import { Typography } from "@mui/material";
 import Box from "@mui/material/Box";
 import Image from "next/image";
+import Link from "next/link";
 
 import CtaButton from "../cta-button";
 import * as styles from "./index.module.scss";
@@ -11,7 +12,7 @@ type Props = {
   list?: string[];
   imageHref?: string;
   btnName?: string;
-  btnClick?: () => void;
+  btnLink?: string;
   disabled?: boolean;
 };
 
@@ -22,7 +23,7 @@ const IntroCard = ({
   imageHref = "",
   btnName,
   disabled,
-  btnClick,
+  btnLink,
 }: Props) => (
   <Box className={styles.wrapper} component="div">
     <Box className={styles.imageWrapper}>
@@ -48,13 +49,11 @@ const IntroCard = ({
           ))}
         </ul>
       </Box>
-      <CtaButton
-        className={styles.ctaButton}
-        disabled={disabled}
-        onClick={btnClick}
-      >
-        {btnName}
-      </CtaButton>
+      <Link href={btnLink || ""}>
+        <CtaButton className={styles.ctaButton} disabled={disabled}>
+          {btnName}
+        </CtaButton>
+      </Link>
     </Box>
   </Box>
 );
diff --git a/src/components/nav/components/mobile_nav_menu/index.tsx b/src/components/nav/components/mobile_nav_menu/index.tsx
index 5c68711e..8bd61126 100644
--- a/src/components/nav/components/mobile_nav_menu/index.tsx
+++ b/src/components/nav/components/mobile_nav_menu/index.tsx
@@ -4,7 +4,7 @@ import { Collapse, ListItem, Stack, useTheme } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
 import useTranslation from "next-translate/useTranslation";
-import { useRouter } from "next/router";
+import Link from "next/link";
 import type { MouseEvent } from "react";
 import { useContext, useEffect, useState } from "react";
 
@@ -23,7 +23,6 @@ import ProductsMenuButton from "../products_menu_button";
 import * as styles from "./index.module.scss";
 
 const MobileNavMenu = () => {
-  const router = useRouter();
   const { t, lang } = useTranslation("common");
   const theme = useTheme();
   const { windowDimensions } = useWindowDimensions();
@@ -129,13 +128,9 @@ const MobileNavMenu = () => {
           py="16px"
         >
           <ForboleLogo color="#BD081C" height="20px" width="106px" />
-          <CtaButton
-            onClick={() => {
-              router.push("/staking");
-            }}
-          >
-            {t("StakeNow")}
-          </CtaButton>
+          <Link href="/staking">
+            <CtaButton>{t("StakeNow")}</CtaButton>
+          </Link>
         </Stack>
         <ListItem
           sx={{
@@ -158,14 +153,9 @@ const MobileNavMenu = () => {
               : theme.palette.custom.forbole.indigo,
           }}
         >
-          <button
-            className={styles.button}
-            onClick={() => {
-              router.push("/products").finally(handleClose);
-            }}
-          >
-            {t("Products")}
-          </button>
+          <Link href="/products" style={{ color: "inherit" }}>
+            <button className={styles.button}>{t("Products")}</button>
+          </Link>
           <button
             className={styles.button}
             onClick={() => {
diff --git a/src/screens/analytics_tools/index.tsx b/src/screens/analytics_tools/index.tsx
index 3993cd06..e185ff5c 100644
--- a/src/screens/analytics_tools/index.tsx
+++ b/src/screens/analytics_tools/index.tsx
@@ -1,6 +1,6 @@
 import { Container, Grid, Stack, useMediaQuery, useTheme } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
-import { useRouter } from "next/router";
+import Link from "next/link";
 import { useMemo, useRef } from "react";
 
 import IntroPanel from "@src/components/Intro_panel";
@@ -16,7 +16,6 @@ import * as styles from "./index.module.scss";
 const AnalyticsTools = () => {
   const topRef = useRef(null);
   const theme = useTheme();
-  const router = useRouter();
   const { t } = useTranslation("analytics_tools");
 
   const isMobile = useMediaQuery(theme.breakpoints.down("tablet"), {
@@ -73,12 +72,9 @@ const AnalyticsTools = () => {
             title={t("data_visualization")}
             title_large_trans={t("free")}
           />
-          <CtaButton
-            className={styles.ctaButton}
-            onClick={() => router.push("https://bigdipper.live/")}
-          >
-            {t("try_now")}
-          </CtaButton>
+          <Link href="https://bigdipper.live/">
+            <CtaButton className={styles.ctaButton}>{t("try_now")}</CtaButton>
+          </Link>
           <Grid container spacing={theme.spacing(2)}>
             <Grid item laptop={4} mobile={12}>
               <IntroPanel
diff --git a/src/screens/author/components/author_posts/hooks.tsx b/src/screens/author/components/author_posts/hooks.tsx
index 2923f225..188a3a20 100644
--- a/src/screens/author/components/author_posts/hooks.tsx
+++ b/src/screens/author/components/author_posts/hooks.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 export const useBlogPostsHook = () => {
   const router: any = useRouter();
 
-  const handleAuthorPageChange = (e: any, value: any) => {
+  const handleAuthorPageChange = (_e: any, value: any) => {
     router.push({
       pathname: `/author/${router.query.author}`,
       query: { page: value },
diff --git a/src/screens/blog/components/blog_posts/hooks.tsx b/src/screens/blog/components/blog_posts/hooks.tsx
index 9e439cce..cd91ec0e 100644
--- a/src/screens/blog/components/blog_posts/hooks.tsx
+++ b/src/screens/blog/components/blog_posts/hooks.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 export const useBlogPostsHook = () => {
   const router = useRouter();
 
-  const handlePageChange = (e: any, value: any) => {
+  const handlePageChange = (_e: any, value: any) => {
     router.push({
       pathname: router.pathname,
       query: { page: value },
diff --git a/src/screens/contact/index.tsx b/src/screens/contact/index.tsx
index 771e40a3..ba037a28 100644
--- a/src/screens/contact/index.tsx
+++ b/src/screens/contact/index.tsx
@@ -13,7 +13,7 @@ import {
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import useTranslation from "next-translate/useTranslation";
-import { useRouter } from "next/router";
+import Link from "next/link";
 import { useRef } from "react";
 
 import CtaButton from "@src/components/cta-button";
@@ -40,7 +40,6 @@ const Contact = () => {
   } = useContactForm();
 
   const theme = useTheme();
-  const router = useRouter();
 
   const selectList = [
     { label: t("item_1"), name: "collaboration" },
@@ -77,23 +76,16 @@ const Contact = () => {
 
             <Stack className={styles.contact}>
               <Stack direction="row">
-                <Box
-                  className={styles.icon}
-                  mr="8px"
-                  onClick={() => {
-                    router.push("mailto:info@forbole.com");
-                  }}
-                >
-                  <img alt="" src="/icons/email.svg" />
-                </Box>
-                <Box
-                  className={styles.icon}
-                  onClick={() => {
-                    router.push("https://t.me/forbole");
-                  }}
-                >
-                  <img alt="" src="/icons/Telegram.svg" />
-                </Box>
+                <Link href="mailto:info@forbole.com">
+                  <Box className={styles.icon} mr="8px">
+                    <img alt="" src="/icons/email.svg" />
+                  </Box>
+                </Link>
+                <Link href="https://t.me/forbole">
+                  <Box className={styles.icon}>
+                    <img alt="" src="/icons/Telegram.svg" />
+                  </Box>
+                </Link>
               </Stack>
               <Typography className={styles.method}>{t("method")}</Typography>
             </Stack>
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
index 07123ff4..fe9d7920 100644
--- a/src/screens/home/index.tsx
+++ b/src/screens/home/index.tsx
@@ -1,7 +1,6 @@
 import { Box, Container, Grid, Stack, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import useTranslation from "next-translate/useTranslation";
-import { useRouter } from "next/router";
 import type { FC } from "react";
 import { useRef } from "react";
 
@@ -31,7 +30,6 @@ const Home: FC<Props> = ({ pages }) => {
   const theme = useTheme();
   const topRef = useRef(null);
   const bottomRef = useRef(null);
-  const router = useRouter();
   const { isMobile, isTablet } = useWindowDimensions();
 
   const filteredPages = pages.reduce((pageList: Page[], current) => {
@@ -77,10 +75,8 @@ const Home: FC<Props> = ({ pages }) => {
           >
             <Grid item laptop={8} mobile={12}>
               <IntroPanel
+                btnLink="/infrastructure"
                 btnName={t("see_more")}
-                btn_Click={() => {
-                  router.push("infrastructure");
-                }}
                 desc={t("Validator_Infrastructure_desc")}
                 imageHref={
                   isMobile
@@ -93,10 +89,8 @@ const Home: FC<Props> = ({ pages }) => {
             </Grid>
             <Grid item laptop={4} mobile={12}>
               <IntroPanel
+                btnLink="/staking-service"
                 btnName={t("see_more")}
-                btn_Click={() => {
-                  router.push("staking-service");
-                }}
                 desc={t("Native_Staking_Service_desc")}
                 imageHref={
                   isMobile
@@ -109,10 +103,8 @@ const Home: FC<Props> = ({ pages }) => {
             </Grid>
             <Grid item laptop={4} mobile={12}>
               <IntroPanel
+                btnLink="/analytics-tools"
                 btnName={t("see_more")}
-                btn_Click={() => {
-                  router.push("analytics-tools");
-                }}
                 desc={t("Blockchain_Data_Analytics_Tools_desc")}
                 imageHref={
                   isMobile
@@ -125,10 +117,8 @@ const Home: FC<Props> = ({ pages }) => {
             </Grid>
             <Grid item laptop={8} mobile={12}>
               <IntroPanel
+                btnLink="/developer-tools"
                 btnName={t("see_more")}
-                btn_Click={() => {
-                  router.push("developer-tools");
-                }}
                 desc={t("Developer_Tools_desc")}
                 imageHref={
                   isMobile
@@ -141,10 +131,8 @@ const Home: FC<Props> = ({ pages }) => {
             </Grid>
             <Grid item laptop={8} mobile={12}>
               <IntroPanel
+                btnLink="/enterprise-solution"
                 btnName={t("see_more")}
-                btn_Click={() => {
-                  router.push("enterprise-solution");
-                }}
                 desc={t("Enterprise_Solution_desc")}
                 imageHref={
                   isMobile
@@ -168,7 +156,7 @@ const Home: FC<Props> = ({ pages }) => {
               ({ title, list, imageHref, btnName, btnClick, id }, idx) => (
                 <Grid item key={`${id}_${idx}`} laptop={4} mobile={12}>
                   <IntroCard
-                    btnClick={() => router.push(btnClick)}
+                    btnLink={btnClick}
                     btnName={btnName}
                     disabled={!btnClick || false}
                     imageHref={imageHref}
diff --git a/src/screens/products/index.tsx b/src/screens/products/index.tsx
index d5ebb070..ec0b1dab 100644
--- a/src/screens/products/index.tsx
+++ b/src/screens/products/index.tsx
@@ -1,7 +1,7 @@
 import { Box, Container, Stack, Typography } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import dynamic from "next/dynamic";
-import { useRouter } from "next/router";
+import Link from "next/link";
 import { useMemo, useRef, useState } from "react";
 
 import CtaButton from "@src/components/cta-button";
@@ -119,7 +119,6 @@ const Products = () => {
   const businessesRef = useRef(null);
   const PanelRef1 = useRef(null);
   const PanelRef2 = useRef(null);
-  const router = useRouter();
 
   const scrollToRef = (e: any, ref: any) => {
     e.preventDefault();
@@ -293,9 +292,9 @@ const Products = () => {
                   </Typography>
                 ))}
               </Stack>
-              <CtaButton onClick={() => router.push(item.btnHref)}>
-                {item.btnName}
-              </CtaButton>
+              <Link href={item.btnHref}>
+                <CtaButton>{item.btnName}</CtaButton>
+              </Link>
             </ProductPanel>
           ))}
         </Stack>
@@ -466,9 +465,9 @@ const Products = () => {
                   </Typography>
                 ))}
               </Stack>
-              <CtaButton onClick={() => router.push(item.btnHref)}>
-                {item.btnName}
-              </CtaButton>
+              <Link href={item.btnHref}>
+                <CtaButton>{item.btnName}</CtaButton>
+              </Link>
             </ProductPanel>
           ))}
         </Stack>
diff --git a/src/screens/staking_service/index.tsx b/src/screens/staking_service/index.tsx
index 99a7915e..e222f6ab 100644
--- a/src/screens/staking_service/index.tsx
+++ b/src/screens/staking_service/index.tsx
@@ -1,7 +1,6 @@
 import { Container, Grid, Stack, useMediaQuery, useTheme } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { useRef } from "react";
 
 import IntroPanel from "@src/components/Intro_panel";
@@ -25,8 +24,6 @@ const StakingService = () => {
     noSsr: true,
   });
 
-  const router = useRouter();
-
   const horseStyle = {
     style: { display: "block", margin: "0 auto" },
   };
@@ -61,14 +58,11 @@ const StakingService = () => {
               title={t("section_2nd_title")}
               title_large_trans={t("section_2nd_large_title")}
             />
-            <CtaButton
-              className={styles.stakingCta}
-              onClick={() => {
-                router.push("/staking");
-              }}
-            >
-              {t("stake_now")}
-            </CtaButton>
+            <Link href="/staking">
+              <CtaButton className={styles.stakingCta}>
+                {t("stake_now")}
+              </CtaButton>
+            </Link>
             <Grid container spacing={theme.spacing(2)}>
               <Grid item laptop={4} mobile={12}>
                 <IntroPanel
diff --git a/src/screens/tag/components/tag_posts/hooks.tsx b/src/screens/tag/components/tag_posts/hooks.tsx
deleted file mode 100644
index a3da89bd..00000000
--- a/src/screens/tag/components/tag_posts/hooks.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useRouter } from "next/router";
-
-export const useBlogPostsHook = () => {
-  const router: any = useRouter();
-
-  const handleTagPageChange = (e: any, value: any) => {
-    router.push({
-      pathname: `/tag/${router.query.tag}/${value === 1 ? "" : value}`,
-    });
-  };
-
-  return {
-    handleTagPageChange,
-  };
-};
diff --git a/src/screens/tag/components/tag_posts/index.tsx b/src/screens/tag/components/tag_posts/index.tsx
index 0a1d615b..a4a865a1 100644
--- a/src/screens/tag/components/tag_posts/index.tsx
+++ b/src/screens/tag/components/tag_posts/index.tsx
@@ -1,9 +1,9 @@
 import { Box, Pagination } from "@mui/material";
+import { useRouter } from "next/router";
 import { pathOr } from "ramda";
 
 import Post from "@src/screens/blog/components/blog_posts/components/post";
 
-import { useBlogPostsHook } from "./hooks";
 import * as styles from "./index.module.scss";
 import type { IProps } from "./interface";
 
@@ -11,7 +11,13 @@ const TagPosts = ({ main, blogs, meta }: IProps) => {
   const currentPage = pathOr(0, ["pagination", "page"], meta);
   const totalPages = pathOr(0, ["pagination", "pages"], meta);
 
-  const { handleTagPageChange } = useBlogPostsHook();
+  const router: any = useRouter();
+
+  const handleTagPageChange = (_e: any, value: any) => {
+    router.push({
+      pathname: `/tag/${router.query.tag}/${value === 1 ? "" : value}`,
+    });
+  };
 
   return (
     <Box className={styles.wrapper}>

From ff77c657e2851dc468d902fd80e617a7051f1403 Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 21:49:55 +0800
Subject: [PATCH 5/9] chore: upgrade dependencies

---
 package.json |  22 +--
 yarn.lock    | 429 +++++++++++++++++++++++++++++----------------------
 2 files changed, 256 insertions(+), 195 deletions(-)

diff --git a/package.json b/package.json
index 56aa7000..89eb19dd 100644
--- a/package.json
+++ b/package.json
@@ -22,27 +22,27 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.8",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.1",
-    "@mui/lab": "^5.0.0-alpha.157",
-    "@mui/material": "^5.15.1",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/lab": "^5.0.0-alpha.158",
+    "@mui/material": "^5.15.2",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@next/bundle-analyzer": "^14.0.4",
     "@socialgouv/matomo-next": "^1.8.0",
     "@tryghost/admin-api": "^1.13.11",
     "@tryghost/content-api": "^1.11.20",
-    "axios": "^1.6.2",
+    "axios": "^1.6.3",
     "dotenv": "^16.3.1",
     "dotenv-defaults": "^5.0.2",
     "framer-motion": "^10.16.16",
     "graphql": "^16.8.1",
-    "isomorphic-dompurify": "^1.13.0",
+    "isomorphic-dompurify": "^2.0.0",
     "jsdom": "^23.0.1",
     "markdown-to-jsx": "^7.3.2",
     "million": "^2.6.4",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
     "moment-timezone": "^0.5.43",
     "next": "^14.0.4",
     "next-sitemap": "^4.2.3",
@@ -71,20 +71,20 @@
     "@types/react-dom": "^18.2.18",
     "@types/rss": "^0.0.32",
     "@types/validator": "^13.11.7",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-playwright": "^0.20.0",
     "husky": "^8.0.3",
-    "i18next-parser": "^8.9.0",
+    "i18next-parser": "^8.11.0",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
     "rss": "^1.2.2",
     "sass": "^1.69.5",
-    "stylelint": "^16.0.2",
+    "stylelint": "^16.1.0",
     "stylelint-config-standard-scss": "^12.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
index 4dc7dea7..908de2d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1451,7 +1451,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.5, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.6, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
   version: 7.23.6
   resolution: "@babel/runtime@npm:7.23.6"
   dependencies:
@@ -1730,38 +1730,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-parser-algorithms@npm:^2.3.2":
-  version: 2.3.2
-  resolution: "@csstools/css-parser-algorithms@npm:2.3.2"
+"@csstools/css-parser-algorithms@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@csstools/css-parser-algorithms@npm:2.4.0"
   peerDependencies:
-    "@csstools/css-tokenizer": ^2.2.1
-  checksum: ccae373a3ab5c10716418b69ce1f6db10a26d3a2d60b65df5fe69099afe4fb1d3192925f3c0f93c3b17c3ab1964b0f39ad2b0e97312ec4a51caa55d6b6a31672
+    "@csstools/css-tokenizer": ^2.2.2
+  checksum: bcfc067b9d1bd5e0bc6044bfbf6450a4a6837d88c5ffd081e2159d4e442c28f018b58c7c2b3ce176ba0bf76cbbce0fd3c65468a40b9867ad9b3e3ef90b9b2655
   languageName: node
   linkType: hard
 
-"@csstools/css-tokenizer@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "@csstools/css-tokenizer@npm:2.2.1"
-  checksum: 0c6901d291e99c567893846a47068057c2a28b3edc4219b6da589a530f55f51ddd4675f906f707b393bfe7a508ab2604bf3f75708f064db857bb277636bd5a44
+"@csstools/css-tokenizer@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "@csstools/css-tokenizer@npm:2.2.2"
+  checksum: 9e7374aab06a811f868a85127af1ff07ad7a56e22e8c46930e789a907098bdd4e6eec82e0cb0d4b8ac1cd5cd054c1f0e329ec50d8548f57d660aeee7cf9b3167
   languageName: node
   linkType: hard
 
-"@csstools/media-query-list-parser@npm:^2.1.5":
-  version: 2.1.5
-  resolution: "@csstools/media-query-list-parser@npm:2.1.5"
+"@csstools/media-query-list-parser@npm:^2.1.6":
+  version: 2.1.6
+  resolution: "@csstools/media-query-list-parser@npm:2.1.6"
   peerDependencies:
-    "@csstools/css-parser-algorithms": ^2.3.2
-    "@csstools/css-tokenizer": ^2.2.1
-  checksum: ae0692c6f92cdc82053291c7a50028b692094dfed795f0259571c5eb40f4b3fa580182ac3701e56c2834e40a62a122ea6639299e43ae88b3a835ae4c869a1a12
+    "@csstools/css-parser-algorithms": ^2.4.0
+    "@csstools/css-tokenizer": ^2.2.2
+  checksum: 06da3e5c01e4785963b821ee2eb31f4fcec622f3b0e4e0748113f287c876f241be211ba11d435d0cc1f0e9f2e26baf5fbf6f8563dc88a49709c3d49e79490b76
   languageName: node
   linkType: hard
 
-"@csstools/selector-specificity@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "@csstools/selector-specificity@npm:3.0.0"
+"@csstools/selector-specificity@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "@csstools/selector-specificity@npm:3.0.1"
   peerDependencies:
     postcss-selector-parser: ^6.0.13
-  checksum: 6f0e2fa9a3c5dcbc7a446fd827d3eb85ca775cc884f73f0bbb119ab49b4f5f0af8763dd23a37d423f4e7989069c09bb977e7e5f017db296e1417abb1fba75c30
+  checksum: 4280f494726d5e38de74e28dee2ff74ec86244560dff4edeec3ddff3ac73c774c19535bd1bb70cad77949bfb359cf87e977d0ec3264591e3b7260342a20dd84f
   languageName: node
   linkType: hard
 
@@ -1845,14 +1845,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.11.1":
-  version: 11.11.1
-  resolution: "@emotion/react@npm:11.11.1"
+"@emotion/react@npm:^11.11.3":
+  version: 11.11.3
+  resolution: "@emotion/react@npm:11.11.3"
   dependencies:
     "@babel/runtime": "npm:^7.18.3"
     "@emotion/babel-plugin": "npm:^11.11.0"
     "@emotion/cache": "npm:^11.11.0"
-    "@emotion/serialize": "npm:^1.1.2"
+    "@emotion/serialize": "npm:^1.1.3"
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1"
     "@emotion/utils": "npm:^1.2.1"
     "@emotion/weak-memoize": "npm:^0.3.1"
@@ -1862,7 +1862,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 1aea4d735b537fbfbeda828bbf929488a7e1b5b7d131f14aeede8737e92bb3b611e15fec353e97f85aed7a65a1c86a695a04ba6e9be905231beef6bd624cb705
+  checksum: ce995395b8714343715284beb8478afdfa72b89ed83981a15a170ca0f4a2f77d7a4a198fd50c1f9c6efcd0535768d168ff88c5921dc5f90bb33134c7a75f9455
   languageName: node
   linkType: hard
 
@@ -1879,6 +1879,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/serialize@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "@emotion/serialize@npm:1.1.3"
+  dependencies:
+    "@emotion/hash": "npm:^0.9.1"
+    "@emotion/memoize": "npm:^0.8.1"
+    "@emotion/unitless": "npm:^0.8.1"
+    "@emotion/utils": "npm:^1.2.1"
+    csstype: "npm:^3.0.2"
+  checksum: 875241eafaa30e7d3b7cf9b585d8c1f224cbf627a674e87eb1d7662dafa76a8c8d67f14a79dbf7d1eaa017e9f68389962990fbcc699d5ad65035a1a047432a3f
+  languageName: node
+  linkType: hard
+
 "@emotion/server@npm:^11.11.0":
   version: 11.11.0
   resolution: "@emotion/server@npm:11.11.0"
@@ -2629,14 +2642,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:5.0.0-beta.28":
-  version: 5.0.0-beta.28
-  resolution: "@mui/base@npm:5.0.0-beta.28"
+"@mui/base@npm:5.0.0-beta.29":
+  version: 5.0.0-beta.29
+  resolution: "@mui/base@npm:5.0.0-beta.29"
   dependencies:
-    "@babel/runtime": "npm:^7.23.5"
+    "@babel/runtime": "npm:^7.23.6"
     "@floating-ui/react-dom": "npm:^2.0.4"
     "@mui/types": "npm:^7.2.11"
-    "@mui/utils": "npm:^5.15.1"
+    "@mui/utils": "npm:^5.15.2"
     "@popperjs/core": "npm:^2.11.8"
     clsx: "npm:^2.0.0"
     prop-types: "npm:^15.8.1"
@@ -2647,22 +2660,22 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 31479d9548e1b29150e3b94bcb88edce409339ac047e78a8a70173a0fa2c7730b38f28c6b366e2b3dda3964f28e883153cae0dc2957218b1711bb58004ddc2d1
+  checksum: 683837bc355778fc6cf3ba96cbac735f83166b7b238bff727d9a47cb2e11bb059bb7a89be371bf565dfc54981843d45932d5f5a115905e77b0c0b20af9d20a2a
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^5.15.1":
-  version: 5.15.1
-  resolution: "@mui/core-downloads-tracker@npm:5.15.1"
-  checksum: 81e3afca19135336c1122aaa8bd69e411df95389c2654c03ce8a8787f4ee4b14403f58acfbf4eef1b9267685569ee9a0bee4b08cf15782d866e9277792d84657
+"@mui/core-downloads-tracker@npm:^5.15.2":
+  version: 5.15.2
+  resolution: "@mui/core-downloads-tracker@npm:5.15.2"
+  checksum: bee88bdc7568c6bc564be6489035e86e1d89a8bab6e607fb1145d0f450693289ea7a3f216e1e30136ae0125a80da7d4729b0533160b9e50190bdc9bb1aafed22
   languageName: node
   linkType: hard
 
-"@mui/icons-material@npm:^5.15.1":
-  version: 5.15.1
-  resolution: "@mui/icons-material@npm:5.15.1"
+"@mui/icons-material@npm:^5.15.2":
+  version: 5.15.2
+  resolution: "@mui/icons-material@npm:5.15.2"
   dependencies:
-    "@babel/runtime": "npm:^7.23.5"
+    "@babel/runtime": "npm:^7.23.6"
   peerDependencies:
     "@mui/material": ^5.0.0
     "@types/react": ^17.0.0 || ^18.0.0
@@ -2670,19 +2683,19 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 9ae975f7534094f6e80ffeb3946338a22b9656bb02544fa76e427daeff050c7db0ce83b261bca73a1aab17789d87cc19cc92749d0dc40501f889a9dbfb35709d
+  checksum: dc3cc687faed7905822e388168f6e73f6597f37f58aeebca981f85dacbe513f82a97c7366d09fd9da9bd53a90e11739c12a4b4f9c2d96b64b816a5e0f039971e
   languageName: node
   linkType: hard
 
-"@mui/lab@npm:^5.0.0-alpha.157":
-  version: 5.0.0-alpha.157
-  resolution: "@mui/lab@npm:5.0.0-alpha.157"
+"@mui/lab@npm:^5.0.0-alpha.158":
+  version: 5.0.0-alpha.158
+  resolution: "@mui/lab@npm:5.0.0-alpha.158"
   dependencies:
-    "@babel/runtime": "npm:^7.23.5"
-    "@mui/base": "npm:5.0.0-beta.28"
-    "@mui/system": "npm:^5.15.1"
+    "@babel/runtime": "npm:^7.23.6"
+    "@mui/base": "npm:5.0.0-beta.29"
+    "@mui/system": "npm:^5.15.2"
     "@mui/types": "npm:^7.2.11"
-    "@mui/utils": "npm:^5.15.1"
+    "@mui/utils": "npm:^5.15.2"
     clsx: "npm:^2.0.0"
     prop-types: "npm:^15.8.1"
   peerDependencies:
@@ -2699,20 +2712,20 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: f4cdd88ab544c5b30c465205a13706e7ce0b720eef61e84b983e215b742929384559e8abd842727e7ad3f545279262d6338cf3192167029c55fd1e418902af05
+  checksum: 3458a201a12b354e01adeaa165825339fc5c0900eca4580eab8ab8d891b9b8e33ff1be4760b40fc5219dc8635c632d98b4b7956a22d53dd3bd5bd08afb223904
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^5.15.1":
-  version: 5.15.1
-  resolution: "@mui/material@npm:5.15.1"
+"@mui/material@npm:^5.15.2":
+  version: 5.15.2
+  resolution: "@mui/material@npm:5.15.2"
   dependencies:
-    "@babel/runtime": "npm:^7.23.5"
-    "@mui/base": "npm:5.0.0-beta.28"
-    "@mui/core-downloads-tracker": "npm:^5.15.1"
-    "@mui/system": "npm:^5.15.1"
+    "@babel/runtime": "npm:^7.23.6"
+    "@mui/base": "npm:5.0.0-beta.29"
+    "@mui/core-downloads-tracker": "npm:^5.15.2"
+    "@mui/system": "npm:^5.15.2"
     "@mui/types": "npm:^7.2.11"
-    "@mui/utils": "npm:^5.15.1"
+    "@mui/utils": "npm:^5.15.2"
     "@types/react-transition-group": "npm:^4.4.10"
     clsx: "npm:^2.0.0"
     csstype: "npm:^3.1.2"
@@ -2732,16 +2745,16 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: d5fc5cba599a691d84424bfa8d8a3dc18ecbf85ea1bd4fc92292b716a4df9facf391d3c164743f83ae8c69905f92c0061cd311d2c6c3a051a277614940b87b1b
+  checksum: c6ca6e4e25999b946d9d34052a67d9d29c2efec0da98e749c6f131f8f818d1c408f7dbc1a88a523c020cb6cf9b3ee00ec1ddafc2cc4a0f0a7b7a8b93bfd7c572
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^5.15.1":
-  version: 5.15.1
-  resolution: "@mui/private-theming@npm:5.15.1"
+"@mui/private-theming@npm:^5.15.2":
+  version: 5.15.2
+  resolution: "@mui/private-theming@npm:5.15.2"
   dependencies:
-    "@babel/runtime": "npm:^7.23.5"
-    "@mui/utils": "npm:^5.15.1"
+    "@babel/runtime": "npm:^7.23.6"
+    "@mui/utils": "npm:^5.15.2"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
@@ -2749,15 +2762,15 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 1d5e334601eac1e1f153c91094cd513e98ccb8fef2fcbcf8c048723d171ceda59b8231dcc3daa665e5e5ee7e39aae1b653040efb64320ef89d4ec1ad88eea4de
+  checksum: 1a507f5ba8d257af1d3e375d7eebaf1562127ea7995bc92249fdba386b835dfb70d14378c38b832e0a92fbf0a9ac3295483fd11f338916f97ec2ffabe09dacbf
   languageName: node
   linkType: hard
 
-"@mui/styled-engine@npm:^5.15.1":
-  version: 5.15.1
-  resolution: "@mui/styled-engine@npm:5.15.1"
+"@mui/styled-engine@npm:^5.15.2":
+  version: 5.15.2
+  resolution: "@mui/styled-engine@npm:5.15.2"
   dependencies:
-    "@babel/runtime": "npm:^7.23.5"
+    "@babel/runtime": "npm:^7.23.6"
     "@emotion/cache": "npm:^11.11.0"
     csstype: "npm:^3.1.2"
     prop-types: "npm:^15.8.1"
@@ -2770,19 +2783,19 @@ __metadata:
       optional: true
     "@emotion/styled":
       optional: true
-  checksum: fcfa7cd3ba9ab24ad557ac9e980b46ff4d4dfddab41b1cdd57257a5ad57bf13e3891d771218dca1b1f405609c6e1e9895b80fcd90211a8877279f7774bb70e70
+  checksum: 918580193afd32f35d60099bac67c67f00aa72c1bb76132bceebb6a9e4b8f46de080a598e0ea6677c900d9409afaa9ff91572e05482d3a4609b0e7faa39004e2
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^5.15.1":
-  version: 5.15.1
-  resolution: "@mui/system@npm:5.15.1"
+"@mui/system@npm:^5.15.2":
+  version: 5.15.2
+  resolution: "@mui/system@npm:5.15.2"
   dependencies:
-    "@babel/runtime": "npm:^7.23.5"
-    "@mui/private-theming": "npm:^5.15.1"
-    "@mui/styled-engine": "npm:^5.15.1"
+    "@babel/runtime": "npm:^7.23.6"
+    "@mui/private-theming": "npm:^5.15.2"
+    "@mui/styled-engine": "npm:^5.15.2"
     "@mui/types": "npm:^7.2.11"
-    "@mui/utils": "npm:^5.15.1"
+    "@mui/utils": "npm:^5.15.2"
     clsx: "npm:^2.0.0"
     csstype: "npm:^3.1.2"
     prop-types: "npm:^15.8.1"
@@ -2798,7 +2811,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: c8abf92fde14031b0e6af6ef2d947bde9e98ce08bb81550bb08fa56793adf1da086066299a7c09d7f26c6e3a6a780679064ed8e54914ae5d775bb87c44632dc5
+  checksum: b57b9080b942c0149f882aa64094491696ce8d2cfd537ed5b14dad76b17978b1435a3f357342f283ae4c3d2b5f214c2beda02942fb3eff77dc0eb2c786cd64a0
   languageName: node
   linkType: hard
 
@@ -2814,11 +2827,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^5.15.1":
-  version: 5.15.1
-  resolution: "@mui/utils@npm:5.15.1"
+"@mui/utils@npm:^5.15.2":
+  version: 5.15.2
+  resolution: "@mui/utils@npm:5.15.2"
   dependencies:
-    "@babel/runtime": "npm:^7.23.5"
+    "@babel/runtime": "npm:^7.23.6"
     "@types/prop-types": "npm:^15.7.11"
     prop-types: "npm:^15.8.1"
     react-is: "npm:^18.2.0"
@@ -2828,7 +2841,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 46a66c488ece0d5be5f179316495220ff95d5276f452ea1cf48836ed6aade63ceb5dd3cd0d3970eb958272eb4455deb657effcf52b7eb2355d9b99bef9d61909
+  checksum: 4268b2685eb602024c0c21a43bc7b0fafa417a0b936750899988076d7cc582acc38568ddf65d50e76b02a136f7c69fa782ccd1d22d732fdac61d7f359eb7d369
   languageName: node
   linkType: hard
 
@@ -3483,15 +3496,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:6.15.0"
+"@typescript-eslint/eslint-plugin@npm:^6.16.0":
+  version: 6.16.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:6.16.0"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.5.1"
-    "@typescript-eslint/scope-manager": "npm:6.15.0"
-    "@typescript-eslint/type-utils": "npm:6.15.0"
-    "@typescript-eslint/utils": "npm:6.15.0"
-    "@typescript-eslint/visitor-keys": "npm:6.15.0"
+    "@typescript-eslint/scope-manager": "npm:6.16.0"
+    "@typescript-eslint/type-utils": "npm:6.16.0"
+    "@typescript-eslint/utils": "npm:6.16.0"
+    "@typescript-eslint/visitor-keys": "npm:6.16.0"
     debug: "npm:^4.3.4"
     graphemer: "npm:^1.4.0"
     ignore: "npm:^5.2.4"
@@ -3504,7 +3517,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 78054afb0d4ab12d82db7a9cb005dfa2be42962341728abf4a81802e1f4c0f5b23de4870287f4b7e32aa4a4bc900bbc218f2d4d0c02aa77452e8e8e0b71fe3de
+  checksum: c8a68e0953d8b94f6b85d3a82090e61e670bcb0945cbee4d741321c56db727429ad47c48b8403ad1dab3b0842689bd2d4b85c99b76c51ac4f5be7f5f61c4c314
   languageName: node
   linkType: hard
 
@@ -3526,21 +3539,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/parser@npm:6.15.0"
+"@typescript-eslint/parser@npm:^6.16.0":
+  version: 6.16.0
+  resolution: "@typescript-eslint/parser@npm:6.16.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:6.15.0"
-    "@typescript-eslint/types": "npm:6.15.0"
-    "@typescript-eslint/typescript-estree": "npm:6.15.0"
-    "@typescript-eslint/visitor-keys": "npm:6.15.0"
+    "@typescript-eslint/scope-manager": "npm:6.16.0"
+    "@typescript-eslint/types": "npm:6.16.0"
+    "@typescript-eslint/typescript-estree": "npm:6.16.0"
+    "@typescript-eslint/visitor-keys": "npm:6.16.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: e7f265fd4abd3bc49fa5b304cd4b9c22801ac5a9da4ee342bbab0c117d629ac4aad6998555b61a8c5a0b279c443a44ae99f16669e24e3ef17ccec20c8b7019e7
+  checksum: 9d573d14df4ec661dccaca785223a8a330d64f50a9279ff9170b1da22198ff91b9afa3ee7d3d7127c0cbc148c86831e76b33fc5b47d630799e98940ef666bfe0
   languageName: node
   linkType: hard
 
@@ -3554,22 +3567,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/scope-manager@npm:6.15.0"
+"@typescript-eslint/scope-manager@npm:6.16.0":
+  version: 6.16.0
+  resolution: "@typescript-eslint/scope-manager@npm:6.16.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.15.0"
-    "@typescript-eslint/visitor-keys": "npm:6.15.0"
-  checksum: 3428d99de440f227cbc2afb44cdcb25e44c4b49c5f490392f83e21d2048210a6ec2f2f68133376c842034f5b5ba4ec9721da7caa18e631e23b57e20927b5b6f0
+    "@typescript-eslint/types": "npm:6.16.0"
+    "@typescript-eslint/visitor-keys": "npm:6.16.0"
+  checksum: 3b275e528d19f4f36c4acd6cb872b5f004175512dce30cef0ac7a9121bb23d21e5e0f4b62658dbfea2b15851e7fa930372696f25a6c87492f863171ab56f5364
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/type-utils@npm:6.15.0"
+"@typescript-eslint/type-utils@npm:6.16.0":
+  version: 6.16.0
+  resolution: "@typescript-eslint/type-utils@npm:6.16.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:6.15.0"
-    "@typescript-eslint/utils": "npm:6.15.0"
+    "@typescript-eslint/typescript-estree": "npm:6.16.0"
+    "@typescript-eslint/utils": "npm:6.16.0"
     debug: "npm:^4.3.4"
     ts-api-utils: "npm:^1.0.1"
   peerDependencies:
@@ -3577,7 +3590,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 32cb531a4b5e0ccd431cba553ec73b87d4453b48af288a33e359ba4f5278126390d82799b61d3f0fbf135cfde1ac6c2275c2cf37a676e8a2a2811e774e660f16
+  checksum: a5339cc1375d12411fcb242249143b28401fb18890bb2a1cff5275ba946affb4a2066cd8203e83ac383bd9d791a79ea6ee1cbf7a30deed5c832ed002897bbf82
   languageName: node
   linkType: hard
 
@@ -3588,10 +3601,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/types@npm:6.15.0"
-  checksum: 6e33529ea301c8c4b8c1f589dadd5d2a66c1b24ec87a577524fbc996d4c7b65d4f4fdfa4a3937b691efee6a10a6b16f7bfcabe98a15e0fc0c0c57aa0d80dcc25
+"@typescript-eslint/types@npm:6.16.0":
+  version: 6.16.0
+  resolution: "@typescript-eslint/types@npm:6.16.0"
+  checksum: 74d9a8b7fd1b85fd1824295c92bc2f506148e450c9897f65ddaa089091017df4e25676c5b098b75c8f00529b84492f303a6b1870bb0ffee83997081325891d53
   languageName: node
   linkType: hard
 
@@ -3613,38 +3626,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/typescript-estree@npm:6.15.0"
+"@typescript-eslint/typescript-estree@npm:6.16.0":
+  version: 6.16.0
+  resolution: "@typescript-eslint/typescript-estree@npm:6.16.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.15.0"
-    "@typescript-eslint/visitor-keys": "npm:6.15.0"
+    "@typescript-eslint/types": "npm:6.16.0"
+    "@typescript-eslint/visitor-keys": "npm:6.16.0"
     debug: "npm:^4.3.4"
     globby: "npm:^11.1.0"
     is-glob: "npm:^4.0.3"
+    minimatch: "npm:9.0.3"
     semver: "npm:^7.5.4"
     ts-api-utils: "npm:^1.0.1"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 08955f6e84b8edb855a6769671e85889e52b15b82e00a64f595da867b21ad060e5342787c436d77702b2a1f39d411ac79b81a8d2e2006e9b1886eadb08b626df
+  checksum: c7109e90b40b3c8f1042beb7f1a7a97eeba3b6a903acd82df4947900d68bd31d04b530a190c099666c5ca4886efc162de7b42de754a44b189e41237210797d9e
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/utils@npm:6.15.0"
+"@typescript-eslint/utils@npm:6.16.0":
+  version: 6.16.0
+  resolution: "@typescript-eslint/utils@npm:6.16.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.4.0"
     "@types/json-schema": "npm:^7.0.12"
     "@types/semver": "npm:^7.5.0"
-    "@typescript-eslint/scope-manager": "npm:6.15.0"
-    "@typescript-eslint/types": "npm:6.15.0"
-    "@typescript-eslint/typescript-estree": "npm:6.15.0"
+    "@typescript-eslint/scope-manager": "npm:6.16.0"
+    "@typescript-eslint/types": "npm:6.16.0"
+    "@typescript-eslint/typescript-estree": "npm:6.16.0"
     semver: "npm:^7.5.4"
   peerDependencies:
     eslint: ^7.0.0 || ^8.0.0
-  checksum: 53519a2027681bdc8f028f9421c65f193f91b5bb1659465fedb8043376c693c2391211f1c01d8ba25bfaa7f7b3a102263d7123f9dfade12032159f4b4490f0fb
+  checksum: 586c4c0e1ca249daf9958f0d88df3af010a7592a19db1a7dc198754542b584314896536fe56ea9c93dd0ddd531154e7697002643d46e24a8d3a459721a626e91
   languageName: node
   linkType: hard
 
@@ -3675,13 +3689,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:6.15.0":
-  version: 6.15.0
-  resolution: "@typescript-eslint/visitor-keys@npm:6.15.0"
+"@typescript-eslint/visitor-keys@npm:6.16.0":
+  version: 6.16.0
+  resolution: "@typescript-eslint/visitor-keys@npm:6.16.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.15.0"
+    "@typescript-eslint/types": "npm:6.16.0"
     eslint-visitor-keys: "npm:^3.4.1"
-  checksum: bf9f71af60bd63d1073900e75c5a0aa6eddd672f6c3ac6092c765d67deb7a0c32d2a5f6f3aee9e95f93a93d58563a76da209bd8487aadafd4d013100ffe38520
+  checksum: 13c4d90355e288eac432d2845e37bb2acc03dab6d8568564558c1914a9aa44352f2a7ff29d0f50e0b3e68d66cca5f27b2732af5ff193b82571b4366309842880
   languageName: node
   linkType: hard
 
@@ -4060,7 +4074,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.0.0, axios@npm:^1.6.2":
+"axios@npm:^1.0.0":
   version: 1.6.2
   resolution: "axios@npm:1.6.2"
   dependencies:
@@ -4071,6 +4085,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.6.3":
+  version: 1.6.3
+  resolution: "axios@npm:1.6.3"
+  dependencies:
+    follow-redirects: "npm:^1.15.0"
+    form-data: "npm:^4.0.0"
+    proxy-from-env: "npm:^1.1.0"
+  checksum: dcc6d982353db33e6893ef01cdf81d0a0548dbd8fba0cb046dc4aee1a6a16226721faa4c2a13b2673d47130509629cdb93bb991b3a2bd4ef17a5ac27a8bba0da
+  languageName: node
+  linkType: hard
+
 "axobject-query@npm:^3.2.1":
   version: 3.2.1
   resolution: "axobject-query@npm:3.2.1"
@@ -4621,10 +4646,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:~11.0.0":
-  version: 11.0.0
-  resolution: "commander@npm:11.0.0"
-  checksum: 471c44cd2d31dee556753df6ceb5ef52ccded0ba6308d3ba7a76251aa0edeedf5ac66ca86cb6096cc8fe20997064233c476983d346265f85180e86312724de0c
+"commander@npm:~11.1.0":
+  version: 11.1.0
+  resolution: "commander@npm:11.1.0"
+  checksum: 13cc6ac875e48780250f723fb81c1c1178d35c5decb1abb1b628b3177af08a8554e76b2c0f29de72d69eef7c864d12613272a71fabef8047922bc622ab75a179
   languageName: node
   linkType: hard
 
@@ -6118,12 +6143,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-entry-cache@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "file-entry-cache@npm:7.0.2"
+"file-entry-cache@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "file-entry-cache@npm:8.0.0"
   dependencies:
-    flat-cache: "npm:^3.2.0"
-  checksum: 822664e35c3e295e6a8ca7ec490d8d8077017607f41f94b29922f1f49c6dd07025048e3ed528e2909a1439eba66d60f802c0774aa612cf6ee053ee4ecc16c8c5
+    flat-cache: "npm:^4.0.0"
+  checksum: 9e2b5938b1cd9b6d7e3612bdc533afd4ac17b2fc646569e9a8abbf2eb48e5eb8e316bc38815a3ef6a1b456f4107f0d0f055a614ca613e75db6bf9ff4d72c1638
   languageName: node
   linkType: hard
 
@@ -6163,7 +6188,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat-cache@npm:^3.0.4, flat-cache@npm:^3.2.0":
+"flat-cache@npm:^3.0.4":
   version: 3.2.0
   resolution: "flat-cache@npm:3.2.0"
   dependencies:
@@ -6174,6 +6199,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flat-cache@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "flat-cache@npm:4.0.0"
+  dependencies:
+    flatted: "npm:^3.2.9"
+    keyv: "npm:^4.5.4"
+    rimraf: "npm:^5.0.5"
+  checksum: 8f99e27bb3de94e91e7b4ca5120488cdc2b7f8cd952a538f1a566101963057eb42ca318e9fac0d36987dcca34316ff04b61c1dc3dcc8084f6f5e801a52a8e547
+  languageName: node
+  linkType: hard
+
 "flatted@npm:^3.2.9":
   version: 3.2.9
   resolution: "flatted@npm:3.2.9"
@@ -6207,12 +6243,12 @@ __metadata:
     "@apollo/client": "npm:^3.8.8"
     "@commitlint/cli": "npm:^18.4.3"
     "@commitlint/config-conventional": "npm:^18.4.3"
-    "@emotion/react": "npm:^11.11.1"
+    "@emotion/react": "npm:^11.11.3"
     "@emotion/server": "npm:^11.11.0"
     "@emotion/styled": "npm:^11.11.0"
-    "@mui/icons-material": "npm:^5.15.1"
-    "@mui/lab": "npm:^5.0.0-alpha.157"
-    "@mui/material": "npm:^5.15.1"
+    "@mui/icons-material": "npm:^5.15.2"
+    "@mui/lab": "npm:^5.0.0-alpha.158"
+    "@mui/material": "npm:^5.15.2"
     "@n8tb1t/use-scroll-position": "npm:^2.0.3"
     "@next/bundle-analyzer": "npm:^14.0.4"
     "@playwright/test": "npm:^1.40.1"
@@ -6229,10 +6265,10 @@ __metadata:
     "@types/react-dom": "npm:^18.2.18"
     "@types/rss": "npm:^0.0.32"
     "@types/validator": "npm:^13.11.7"
-    "@typescript-eslint/eslint-plugin": "npm:^6.15.0"
-    "@typescript-eslint/parser": "npm:^6.15.0"
+    "@typescript-eslint/eslint-plugin": "npm:^6.16.0"
+    "@typescript-eslint/parser": "npm:^6.16.0"
     autoprefixer: "npm:^10.4.16"
-    axios: "npm:^1.6.2"
+    axios: "npm:^1.6.3"
     dotenv: "npm:^16.3.1"
     dotenv-defaults: "npm:^5.0.2"
     eslint: "npm:^8.56.0"
@@ -6242,12 +6278,12 @@ __metadata:
     framer-motion: "npm:^10.16.16"
     graphql: "npm:^16.8.1"
     husky: "npm:^8.0.3"
-    i18next-parser: "npm:^8.9.0"
-    isomorphic-dompurify: "npm:^1.13.0"
+    i18next-parser: "npm:^8.11.0"
+    isomorphic-dompurify: "npm:^2.0.0"
     jsdom: "npm:^23.0.1"
     markdown-to-jsx: "npm:^7.3.2"
     million: "npm:^2.6.4"
-    moment: "npm:^2.29.4"
+    moment: "npm:^2.30.1"
     moment-timezone: "npm:^0.5.43"
     next: "npm:^14.0.4"
     next-sitemap: "npm:^4.2.3"
@@ -6263,7 +6299,7 @@ __metadata:
     rss: "npm:^1.2.2"
     sass: "npm:^1.69.5"
     sharp: "npm:^0.33.1"
-    stylelint: "npm:^16.0.2"
+    stylelint: "npm:^16.1.0"
     stylelint-config-standard-scss: "npm:^12.0.0"
     stylelint-order: "npm:^6.0.4"
     stylelint-scss: "npm:^6.0.0"
@@ -6603,7 +6639,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^10.2.2, glob@npm:^10.3.10":
+"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7":
   version: 10.3.10
   resolution: "glob@npm:10.3.10"
   dependencies:
@@ -6984,14 +7020,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next-parser@npm:^8.9.0":
-  version: 8.9.0
-  resolution: "i18next-parser@npm:8.9.0"
+"i18next-parser@npm:^8.11.0":
+  version: 8.11.0
+  resolution: "i18next-parser@npm:8.11.0"
   dependencies:
     broccoli-plugin: "npm:^4.0.7"
     cheerio: "npm:^1.0.0-rc.2"
     colors: "npm:1.4.0"
-    commander: "npm:~11.0.0"
+    commander: "npm:~11.1.0"
     eol: "npm:^0.9.1"
     esbuild: "npm:^0.19.0"
     fs-extra: "npm:^11.1.0"
@@ -7007,7 +7043,7 @@ __metadata:
     vue-template-compiler: "npm:^2.6.11"
   bin:
     i18next: bin/cli.js
-  checksum: c8c650cfa672afc673daed92ecf6bfb28947c5663549f3dc4aa2e1b8d7949a9c93a09b9b1f7239576656b60b6fb9f9c86076a01d8d8c6fb967fda398653ebcda
+  checksum: 2c4d46c34a6ac54b3067faf4c1c31d4b65a8d4ac82647875edf61099fec59bbf20c977cc559067432eacc5e961de6109caa0f83d55c3638990c0b3e2eb37d044
   languageName: node
   linkType: hard
 
@@ -7476,14 +7512,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isomorphic-dompurify@npm:^1.13.0":
-  version: 1.13.0
-  resolution: "isomorphic-dompurify@npm:1.13.0"
+"isomorphic-dompurify@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "isomorphic-dompurify@npm:2.0.0"
   dependencies:
     "@types/dompurify": "npm:^3.0.3"
     dompurify: "npm:^3.0.6"
     jsdom: "npm:^23.0.0"
-  checksum: 58576f22f9e2b4c3f544c155f49a7a3d5b05bc9dc3b4d7706fd9ba8e90b1169a290a0fd1cddedb5c177c8082f6b658b468d406ad90ccfa83dc707cfd99083168
+  checksum: 87553de52e363509f077127651e53921a7b41bcb548fd03052277979c8686c625215e102e08cc3ac8571a65a187b649cc0c274e8aa8d369999dfb68249c046f6
   languageName: node
   linkType: hard
 
@@ -7744,7 +7780,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"keyv@npm:^4.5.3":
+"keyv@npm:^4.5.3, keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
   dependencies:
@@ -8104,13 +8140,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"meow@npm:^12.0.1, meow@npm:^12.1.1":
+"meow@npm:^12.0.1":
   version: 12.1.1
   resolution: "meow@npm:12.1.1"
   checksum: a125ca99a32e2306e2f4cbe651a0d27f6eb67918d43a075f6e80b35e9bf372ebf0fc3a9fbc201cbbc9516444b6265fb3c9f80c5b7ebd32f548aa93eb7c28e088
   languageName: node
   linkType: hard
 
+"meow@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "meow@npm:13.0.0"
+  checksum: fab0f91578154c048e792a81704f3f28099ffff900f364df8a85f6e770a57e1c124859a25e186186e149dad30692c7893af0dfd71517bea343bfe5d749b1fa04
+  languageName: node
+  linkType: hard
+
 "meow@npm:^8.0.0":
   version: 8.1.2
   resolution: "meow@npm:8.1.2"
@@ -8218,6 +8261,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:9.0.3, minimatch@npm:^9.0.1":
+  version: 9.0.3
+  resolution: "minimatch@npm:9.0.3"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 85f407dcd38ac3e180f425e86553911d101455ca3ad5544d6a7cec16286657e4f8a9aa6695803025c55e31e35a91a2252b5dc8e7d527211278b8b65b4dbd5eac
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -8227,15 +8279,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^9.0.1":
-  version: 9.0.3
-  resolution: "minimatch@npm:9.0.3"
-  dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 85f407dcd38ac3e180f425e86553911d101455ca3ad5544d6a7cec16286657e4f8a9aa6695803025c55e31e35a91a2252b5dc8e7d527211278b8b65b4dbd5eac
-  languageName: node
-  linkType: hard
-
 "minimist-options@npm:4.1.0":
   version: 4.1.0
   resolution: "minimist-options@npm:4.1.0"
@@ -8370,6 +8413,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"moment@npm:^2.30.1":
+  version: 2.30.1
+  resolution: "moment@npm:2.30.1"
+  checksum: 865e4279418c6de666fca7786607705fd0189d8a7b7624e2e56be99290ac846f90878a6f602e34b4e0455c549b85385b1baf9966845962b313699e7cb847543a
+  languageName: node
+  linkType: hard
+
 "mrmime@npm:^1.0.0":
   version: 1.0.1
   resolution: "mrmime@npm:1.0.1"
@@ -9679,6 +9729,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rimraf@npm:^5.0.5":
+  version: 5.0.5
+  resolution: "rimraf@npm:5.0.5"
+  dependencies:
+    glob: "npm:^10.3.7"
+  bin:
+    rimraf: dist/esm/bin.mjs
+  checksum: d50dbe724f33835decd88395b25ed35995077c60a50ae78ded06e0185418914e555817aad1b4243edbff2254548c2f6ad6f70cc850040bebb4da9e8cc016f586
+  languageName: node
+  linkType: hard
+
 "rollup@npm:^3.28.0":
   version: 3.29.4
   resolution: "rollup@npm:3.29.4"
@@ -10427,14 +10488,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylelint@npm:^16.0.2":
-  version: 16.0.2
-  resolution: "stylelint@npm:16.0.2"
+"stylelint@npm:^16.1.0":
+  version: 16.1.0
+  resolution: "stylelint@npm:16.1.0"
   dependencies:
-    "@csstools/css-parser-algorithms": "npm:^2.3.2"
-    "@csstools/css-tokenizer": "npm:^2.2.1"
-    "@csstools/media-query-list-parser": "npm:^2.1.5"
-    "@csstools/selector-specificity": "npm:^3.0.0"
+    "@csstools/css-parser-algorithms": "npm:^2.4.0"
+    "@csstools/css-tokenizer": "npm:^2.2.2"
+    "@csstools/media-query-list-parser": "npm:^2.1.6"
+    "@csstools/selector-specificity": "npm:^3.0.1"
     balanced-match: "npm:^2.0.0"
     colord: "npm:^2.9.3"
     cosmiconfig: "npm:^9.0.0"
@@ -10443,7 +10504,7 @@ __metadata:
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     fastest-levenshtein: "npm:^1.0.16"
-    file-entry-cache: "npm:^7.0.2"
+    file-entry-cache: "npm:^8.0.0"
     global-modules: "npm:^2.0.0"
     globby: "npm:^11.1.0"
     globjoin: "npm:^0.1.4"
@@ -10453,7 +10514,7 @@ __metadata:
     is-plain-object: "npm:^5.0.0"
     known-css-properties: "npm:^0.29.0"
     mathml-tag-names: "npm:^2.1.3"
-    meow: "npm:^12.1.1"
+    meow: "npm:^13.0.0"
     micromatch: "npm:^4.0.5"
     normalize-path: "npm:^3.0.0"
     picocolors: "npm:^1.0.0"
@@ -10471,7 +10532,7 @@ __metadata:
     write-file-atomic: "npm:^5.0.1"
   bin:
     stylelint: bin/stylelint.mjs
-  checksum: 5ec755e209beb1877ff40d50f18c1ebb05bf251925da1f98f28fb3911e4031195eb86adaf641ac5cdb01ba973f4c999bc0c6b0270d08c1d5c070adbdd9e734cf
+  checksum: 765eea0b07319d1e7989502c07b8b5794938e5a8542bec00990b09ec10c3f7006891689930099e948d06c9ef9982066edb98b1ea64a435138a6b0f0905eb2b87
   languageName: node
   linkType: hard
 

From b82fc6312a493dd2eac8a38dd8c9e8c4dca6554f Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 21:56:51 +0800
Subject: [PATCH 6/9] chore: add eslint plugin

---
 .eslintrc.cjs                                 |  4 +-
 package.json                                  |  1 +
 src/api/tags/index.ts                         |  2 +-
 src/api/whatsnew/index.ts                     | 10 ++---
 src/components/arrow/index.tsx                |  2 +-
 src/components/cardSwiper/index.tsx           |  2 +-
 src/components/contact-form/index.tsx         | 10 ++---
 src/components/intro_card/index.tsx           | 10 ++---
 .../nav/components/menu_list/index.tsx        |  2 +-
 src/components/product-panel/index.tsx        |  6 +--
 src/components/success-modal/index.tsx        |  6 +--
 src/components/talk-modal/index.tsx           | 10 ++---
 src/screens/home/index.tsx                    |  8 ++--
 .../components/calculate_rewards/config.ts    |  4 +-
 .../components/calculate_rewards/utils.ts     |  6 +--
 .../components/network_grid/config.ts         |  2 +-
 .../components/network_grid/index.tsx         |  2 +-
 src/utils/network_info.ts                     | 14 +++----
 yarn.lock                                     | 38 ++++++++++++++++++-
 19 files changed, 88 insertions(+), 51 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 533dff7b..6b5877e2 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -48,7 +48,7 @@ module.exports = {
   parserOptions: {
     project: path.join(__dirname, "tsconfig.json"),
   },
-  plugins: ["@typescript-eslint", "react-hooks", "@stylistic"],
+  plugins: ["@typescript-eslint", "react-hooks", "@stylistic", "perfectionist"],
   rules: {
     // @TODO: These should be removed when fixed
     "@typescript-eslint/no-explicit-any": "off",
@@ -103,5 +103,7 @@ module.exports = {
 
     "react-hooks/exhaustive-deps": "error",
     "react-hooks/rules-of-hooks": "error",
+
+    "perfectionist/sort-object-types": "error",
   },
 };
diff --git a/package.json b/package.json
index 89eb19dd..a31a1644 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-perfectionist": "^2.5.0",
     "eslint-plugin-playwright": "^0.20.0",
     "husky": "^8.0.3",
     "i18next-parser": "^8.11.0",
diff --git a/src/api/tags/index.ts b/src/api/tags/index.ts
index cc8bc172..11444791 100644
--- a/src/api/tags/index.ts
+++ b/src/api/tags/index.ts
@@ -1,6 +1,6 @@
 import { ghostApi as api } from "../index";
 
-export const getPostsByTag = async (query: { tag: string; page?: number }) => {
+export const getPostsByTag = async (query: { page?: number; tag: string }) => {
   try {
     const posts = await api.posts.browse({
       filter: `tags:${query.tag}`,
diff --git a/src/api/whatsnew/index.ts b/src/api/whatsnew/index.ts
index b68a0e8e..93244ad8 100644
--- a/src/api/whatsnew/index.ts
+++ b/src/api/whatsnew/index.ts
@@ -18,7 +18,7 @@ export const getPageByTag = async (tag: string) => {
     const pages = (await api.pages.browse({
       filter: `tag:${tag}`,
       published_at: "desc",
-    })) as { title: string; html: string; id: string }[];
+    })) as { html: string; id: string; title: string }[];
 
     const data = pages.map((res) => {
       const window = parseMd(res.html);
@@ -36,12 +36,12 @@ export const getPageByTag = async (tag: string) => {
         btnClick: window.document.querySelector("a")?.href,
       };
     }) as {
-      title: string;
-      list: string[];
-      imageHref: string;
-      btnName: string;
       btnClick: string;
+      btnName: string;
       id: string;
+      imageHref: string;
+      list: string[];
+      title: string;
     }[];
 
     return data ?? null;
diff --git a/src/components/arrow/index.tsx b/src/components/arrow/index.tsx
index bc11f63b..27db32a8 100644
--- a/src/components/arrow/index.tsx
+++ b/src/components/arrow/index.tsx
@@ -13,9 +13,9 @@ export enum Direction {
 
 type Props = {
   className: string;
-  sx?: SxProps<Theme>;
   direction?: Direction;
   role?: string;
+  sx?: SxProps<Theme>;
 };
 
 export default function Arraw({ className, sx, direction, role }: Props) {
diff --git a/src/components/cardSwiper/index.tsx b/src/components/cardSwiper/index.tsx
index 4988cc6b..c22909a9 100644
--- a/src/components/cardSwiper/index.tsx
+++ b/src/components/cardSwiper/index.tsx
@@ -11,9 +11,9 @@ import { BoxCSS } from "./BoxCSS";
 SwiperCore.use([Navigation]);
 
 type Props = {
+  className?: string;
   imagesList: string[];
   style?: CSSProperties;
-  className?: string;
 };
 
 const CardSwiper = ({ imagesList, style, className }: Props) => {
diff --git a/src/components/contact-form/index.tsx b/src/components/contact-form/index.tsx
index 870f8686..6f55a691 100644
--- a/src/components/contact-form/index.tsx
+++ b/src/components/contact-form/index.tsx
@@ -15,15 +15,15 @@ import CtaButton from "../cta-button";
 import FormInput from "../formInput";
 
 type Props = {
+  canSubmit: boolean;
+  handleInputChange: (event: any) => void;
+  handleSubmit: (event: any) => void;
   inputs: {
-    name: string;
-    email: string;
     company: string;
+    email: string;
     help: string;
+    name: string;
   };
-  handleInputChange: (event: any) => void;
-  handleSubmit: (event: any) => void;
-  canSubmit: boolean;
   isLoading: boolean;
 };
 
diff --git a/src/components/intro_card/index.tsx b/src/components/intro_card/index.tsx
index 09a5d713..3b1fd1cc 100644
--- a/src/components/intro_card/index.tsx
+++ b/src/components/intro_card/index.tsx
@@ -7,13 +7,13 @@ import CtaButton from "../cta-button";
 import * as styles from "./index.module.scss";
 
 type Props = {
-  title?: string;
-  desc?: string;
-  list?: string[];
-  imageHref?: string;
-  btnName?: string;
   btnLink?: string;
+  btnName?: string;
+  desc?: string;
   disabled?: boolean;
+  imageHref?: string;
+  list?: string[];
+  title?: string;
 };
 
 const IntroCard = ({
diff --git a/src/components/nav/components/menu_list/index.tsx b/src/components/nav/components/menu_list/index.tsx
index 565881ce..1b2a8aa5 100644
--- a/src/components/nav/components/menu_list/index.tsx
+++ b/src/components/nav/components/menu_list/index.tsx
@@ -8,13 +8,13 @@ import { anchorElContext } from "@src/utils/menu";
 import * as styles from "./index.module.scss";
 
 type Props = {
+  className?: string;
   menuList: {
     icon?: React.ReactNode;
     link: string;
     locale?: string;
     name: string;
   }[];
-  className?: string;
 };
 
 const MenuList = ({ menuList, className }: Props) => {
diff --git a/src/components/product-panel/index.tsx b/src/components/product-panel/index.tsx
index 7d5ee8f2..43330568 100644
--- a/src/components/product-panel/index.tsx
+++ b/src/components/product-panel/index.tsx
@@ -4,14 +4,14 @@ import { forwardRef } from "react";
 import * as styles from "./index.module.scss";
 
 type Props = {
-  title?: string;
+  children?: React.ReactNode;
   // @deprecated
   imageHref?: string;
   imageHrefs?: string[];
-  children?: React.ReactNode;
+  imgFull?: boolean;
   index: number;
+  title?: string;
   value: number;
-  imgFull?: boolean;
 };
 
 const productPanel = forwardRef<HTMLDivElement, Props>(
diff --git a/src/components/success-modal/index.tsx b/src/components/success-modal/index.tsx
index 9d5eb752..890d174c 100644
--- a/src/components/success-modal/index.tsx
+++ b/src/components/success-modal/index.tsx
@@ -12,12 +12,12 @@ import { forwardRef } from "react";
 import { Close } from "../icons";
 
 type Props = {
-  fixed?: any;
+  bottom_word?: string;
   close?: (b: boolean) => void;
-  up_word?: string;
+  fixed?: any;
   middle_word?: string;
-  bottom_word?: string;
   open: boolean;
+  up_word?: string;
 };
 
 const Alert = forwardRef<HTMLDivElement, Omit<Props, "open">>(
diff --git a/src/components/talk-modal/index.tsx b/src/components/talk-modal/index.tsx
index 10d6e0d7..f13b69b2 100644
--- a/src/components/talk-modal/index.tsx
+++ b/src/components/talk-modal/index.tsx
@@ -23,16 +23,16 @@ interface Props {
   staking?: any;
   open?: boolean;
   inputs: {
-    "name": string;
-    "email": string;
-    "company": string;
-    "telegram": string;
     "agree": boolean;
-    "specify": string;
+    "company": string;
     "Data API": boolean;
+    "email": string;
     "GraphQL": boolean;
+    "name": string;
     "Other": boolean;
     "RPC Endpoints": boolean;
+    "specify": string;
+    "telegram": string;
   };
   handleInputChange: (event: any) => void;
   handleCheckedChange: (event: any) => void;
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
index fe9d7920..c7441cab 100644
--- a/src/screens/home/index.tsx
+++ b/src/screens/home/index.tsx
@@ -15,12 +15,12 @@ import * as styles from "./index.module.scss";
 import { FilterBG } from "./styles";
 
 export type Page = {
-  title: string;
-  list: string[];
-  imageHref: string;
-  btnName: string;
   btnClick: string;
+  btnName: string;
   id: string;
+  imageHref: string;
+  list: string[];
+  title: string;
 };
 
 type Props = { pages: Page[] };
diff --git a/src/screens/staking/components/calculate_rewards/config.ts b/src/screens/staking/components/calculate_rewards/config.ts
index 4bd1d879..0375b8d5 100644
--- a/src/screens/staking/components/calculate_rewards/config.ts
+++ b/src/screens/staking/components/calculate_rewards/config.ts
@@ -1,8 +1,8 @@
 type ParamsProps = {
+  bondedToken?: number;
+  commissionRate: number;
   inflation: number;
   stakingRatio: number;
-  commissionRate: number;
-  bondedToken?: number;
   totalSupply?: number;
 };
 
diff --git a/src/screens/staking/components/calculate_rewards/utils.ts b/src/screens/staking/components/calculate_rewards/utils.ts
index b86a9056..43e353fa 100644
--- a/src/screens/staking/components/calculate_rewards/utils.ts
+++ b/src/screens/staking/components/calculate_rewards/utils.ts
@@ -2,11 +2,11 @@ import { clone, pathOr } from "ramda";
 
 type NetworkDataProps = {
   bonded?: (data: any) => number;
-  inflation?: (data: any) => number;
-  supply?: (data: any) => number;
   commissionRate?: (data: any) => number;
-  marketPrice: (data: any) => number;
   gecko?: any;
+  inflation?: (data: any) => number;
+  marketPrice: (data: any) => number;
+  supply?: (data: any) => number;
 };
 
 type NetworkProps = {
diff --git a/src/screens/staking/components/networks/components/network_grid/config.ts b/src/screens/staking/components/networks/components/network_grid/config.ts
index 0573cf2a..c290e7db 100644
--- a/src/screens/staking/components/networks/components/network_grid/config.ts
+++ b/src/screens/staking/components/networks/components/network_grid/config.ts
@@ -2,9 +2,9 @@ import { cosmosNetworkKeys } from "@src/utils/network_info";
 
 export type ParamsProps = {
   APY: number;
-  TVL: number;
   bonded: number;
   custom?: Record<string, string>;
+  TVL: number;
 };
 
 export type NetworkProps = {
diff --git a/src/screens/staking/components/networks/components/network_grid/index.tsx b/src/screens/staking/components/networks/components/network_grid/index.tsx
index f85ca835..973fc57e 100644
--- a/src/screens/staking/components/networks/components/network_grid/index.tsx
+++ b/src/screens/staking/components/networks/components/network_grid/index.tsx
@@ -10,8 +10,8 @@ import type { NetworkProps } from "./config";
 import useStyles from "./useStyles";
 
 type Props = {
-  sortedNetworks: Network[];
   allNetworkInfo: NetworkProps;
+  sortedNetworks: Network[];
 };
 
 const NetworkGrid = ({ sortedNetworks, allNetworkInfo }: Props) => {
diff --git a/src/utils/network_info.ts b/src/utils/network_info.ts
index 4732c65b..8df1f1eb 100644
--- a/src/utils/network_info.ts
+++ b/src/utils/network_info.ts
@@ -1,23 +1,23 @@
 export type Network = {
   address?: string;
   bigDipper?: string;
+  calculator?: {
+    bonded: string;
+    inflation: string;
+    stakingParams: string;
+    supply: string;
+  };
   color?: string;
   delegate?: string;
   denom?: string;
   graphql: string;
+  guide?: string;
   heightSocket?: string;
   image: string;
   key: string;
   label?: string;
   name: string;
   value?: string;
-  guide?: string;
-  calculator?: {
-    bonded: string;
-    inflation: string;
-    supply: string;
-    stakingParams: string;
-  };
 };
 
 interface IStringIndex extends Record<string, Network> {}
diff --git a/yarn.lock b/yarn.lock
index 908de2d9..647ab342 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3645,7 +3645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:6.16.0":
+"@typescript-eslint/utils@npm:6.16.0, @typescript-eslint/utils@npm:^6.13.0":
   version: 6.16.0
   resolution: "@typescript-eslint/utils@npm:6.16.0"
   dependencies:
@@ -5895,6 +5895,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-perfectionist@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "eslint-plugin-perfectionist@npm:2.5.0"
+  dependencies:
+    "@typescript-eslint/utils": "npm:^6.13.0"
+    minimatch: "npm:^9.0.3"
+    natural-compare-lite: "npm:^1.4.0"
+  peerDependencies:
+    astro-eslint-parser: ^0.16.0
+    eslint: ">=8.0.0"
+    svelte: ">=3.0.0"
+    svelte-eslint-parser: ^0.33.0
+    vue-eslint-parser: ">=9.0.0"
+  peerDependenciesMeta:
+    astro-eslint-parser:
+      optional: true
+    svelte:
+      optional: true
+    svelte-eslint-parser:
+      optional: true
+    vue-eslint-parser:
+      optional: true
+  checksum: 61814512b26fd856e3f0d06ad77fe502a00e3109b33f39651fbbf5e0b233caa8f8732a8363b8948107318839083f4bf87400c90bc5d0ced475d9d56ea3bb4892
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-playwright@npm:^0.20.0":
   version: 0.20.0
   resolution: "eslint-plugin-playwright@npm:0.20.0"
@@ -6274,6 +6300,7 @@ __metadata:
     eslint: "npm:^8.56.0"
     eslint-config-next: "npm:^14.0.4"
     eslint-plugin-jsx-a11y: "npm:^6.8.0"
+    eslint-plugin-perfectionist: "npm:^2.5.0"
     eslint-plugin-playwright: "npm:^0.20.0"
     framer-motion: "npm:^10.16.16"
     graphql: "npm:^16.8.1"
@@ -8261,7 +8288,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:9.0.3, minimatch@npm:^9.0.1":
+"minimatch@npm:9.0.3, minimatch@npm:^9.0.1, minimatch@npm:^9.0.3":
   version: 9.0.3
   resolution: "minimatch@npm:9.0.3"
   dependencies:
@@ -8467,6 +8494,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"natural-compare-lite@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "natural-compare-lite@npm:1.4.0"
+  checksum: f6cef26f5044515754802c0fc475d81426f3b90fe88c20fabe08771ce1f736ce46e0397c10acb569a4dd0acb84c7f1ee70676122f95d5bfdd747af3a6c6bbaa8
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"

From fa54f9a5e29d46fa65df0f2ad39a0f27e4ed1936 Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 21:58:09 +0800
Subject: [PATCH 7/9] chore: sort interfaces

---
 .eslintrc.cjs                                      |  2 ++
 src/api/networks/interface.ts                      |  2 +-
 src/api/posts/interface.ts                         |  2 +-
 src/components/footer/types.ts                     |  4 ++--
 src/components/nav/index.tsx                       |  4 ++--
 src/components/tags/index.tsx                      |  2 +-
 src/components/talk-modal/index.tsx                | 14 +++++++-------
 src/environment.d.ts                               |  4 ++--
 .../blog/components/blog_posts/interface.ts        |  2 +-
 src/screens/staking/components/faq/config.tsx      | 12 ++++++------
 .../network_grid/components/network_card/index.tsx |  2 +-
 .../networks/components/search_bar/index.tsx       |  2 +-
 src/screens/tag/components/tag_posts/interface.ts  |  2 +-
 src/utils/social_media_info.tsx                    |  2 +-
 14 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 6b5877e2..ae35213b 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -104,6 +104,8 @@ module.exports = {
     "react-hooks/exhaustive-deps": "error",
     "react-hooks/rules-of-hooks": "error",
 
+    "perfectionist/sort-exports": "error",
+    "perfectionist/sort-interfaces": "error",
     "perfectionist/sort-object-types": "error",
   },
 };
diff --git a/src/api/networks/interface.ts b/src/api/networks/interface.ts
index 3a8f7b6f..6a8e2b31 100644
--- a/src/api/networks/interface.ts
+++ b/src/api/networks/interface.ts
@@ -1,5 +1,5 @@
 export interface IPost {
+  filter?: string;
   limit?: number;
   page?: number;
-  filter?: string;
 }
diff --git a/src/api/posts/interface.ts b/src/api/posts/interface.ts
index 3a8f7b6f..6a8e2b31 100644
--- a/src/api/posts/interface.ts
+++ b/src/api/posts/interface.ts
@@ -1,5 +1,5 @@
 export interface IPost {
+  filter?: string;
   limit?: number;
   page?: number;
-  filter?: string;
 }
diff --git a/src/components/footer/types.ts b/src/components/footer/types.ts
index 3e999c7d..da46634f 100644
--- a/src/components/footer/types.ts
+++ b/src/components/footer/types.ts
@@ -1,5 +1,5 @@
 export interface FooterProps {
-  staking?: boolean;
-  red?: boolean;
   itemColor?: string;
+  red?: boolean;
+  staking?: boolean;
 }
diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx
index afbc99ac..601082aa 100644
--- a/src/components/nav/index.tsx
+++ b/src/components/nav/index.tsx
@@ -16,9 +16,9 @@ import { useNavHook } from "./hooks";
 import * as styles from "./index.module.scss";
 
 interface NavProps {
-  staking?: boolean;
-  stakeNowRef?: RefObject<HTMLElement>;
   itemColor?: string;
+  stakeNowRef?: RefObject<HTMLElement>;
+  staking?: boolean;
 }
 
 const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
diff --git a/src/components/tags/index.tsx b/src/components/tags/index.tsx
index e235b86d..72063f55 100644
--- a/src/components/tags/index.tsx
+++ b/src/components/tags/index.tsx
@@ -10,9 +10,9 @@ type BaseTag = {
 };
 
 interface TagsProps {
-  tags: BaseTag[];
   details?: boolean;
   noPadding?: boolean;
+  tags: BaseTag[];
 }
 
 const Tags = ({ tags, details, noPadding }: TagsProps) => {
diff --git a/src/components/talk-modal/index.tsx b/src/components/talk-modal/index.tsx
index f13b69b2..3df8d993 100644
--- a/src/components/talk-modal/index.tsx
+++ b/src/components/talk-modal/index.tsx
@@ -19,9 +19,12 @@ import FormInput from "../formInput";
 import { Close } from "../icons";
 
 interface Props {
+  canSubmit: boolean;
   close?: (b: boolean) => void;
-  staking?: any;
-  open?: boolean;
+  handleCheckedChange: (event: any) => void;
+  handleClear: (field: any) => void;
+  handleInputChange: (event: any) => void;
+  handleSubmit: (event: any) => void;
   inputs: {
     "agree": boolean;
     "company": string;
@@ -34,12 +37,9 @@ interface Props {
     "specify": string;
     "telegram": string;
   };
-  handleInputChange: (event: any) => void;
-  handleCheckedChange: (event: any) => void;
-  handleSubmit: (event: any) => void;
-  handleClear: (field: any) => void;
-  canSubmit: boolean;
   isLoading: boolean;
+  open?: boolean;
+  staking?: any;
 }
 
 const TalkModal = ({
diff --git a/src/environment.d.ts b/src/environment.d.ts
index 85960c73..e89594d7 100644
--- a/src/environment.d.ts
+++ b/src/environment.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable no-unused-vars */
 declare namespace NodeJS {
   interface ProcessEnv {
-    NEXT_PUBLIC_MATOMO_URL: string;
-    NEXT_PUBLIC_MATOMO_SITE_ID: string;
     NEXT_PUBLIC_COINGECKO_API: string;
+    NEXT_PUBLIC_MATOMO_SITE_ID: string;
+    NEXT_PUBLIC_MATOMO_URL: string;
   }
 }
 
diff --git a/src/screens/blog/components/blog_posts/interface.ts b/src/screens/blog/components/blog_posts/interface.ts
index f48a8080..d91f460f 100644
--- a/src/screens/blog/components/blog_posts/interface.ts
+++ b/src/screens/blog/components/blog_posts/interface.ts
@@ -1,5 +1,5 @@
 export interface IProps {
-  main: any;
   blogs: any[];
+  main: any;
   meta: any;
 }
diff --git a/src/screens/staking/components/faq/config.tsx b/src/screens/staking/components/faq/config.tsx
index f6f5d638..b9858d29 100644
--- a/src/screens/staking/components/faq/config.tsx
+++ b/src/screens/staking/components/faq/config.tsx
@@ -7,17 +7,17 @@ import { useMemo } from "react";
 import * as styles from "./config.module.scss";
 
 export interface FAQProps {
-  question: string;
-  para1?: string;
-  para2?: string;
-  trans?: string;
-  para3?: string;
-  desc?: string;
   bullet1?: string;
   bullet2?: string;
   bullet3?: string;
+  desc?: string;
   expanded?: boolean;
+  para1?: string;
+  para2?: string;
+  para3?: string;
+  question: string;
   setExpanded?: () => void;
+  trans?: string;
 }
 
 export const useFaq = (): FAQProps[] => {
diff --git a/src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx b/src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx
index 8f31c049..536e69a4 100644
--- a/src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx
+++ b/src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx
@@ -22,8 +22,8 @@ import * as styles from "./index.module.scss";
 interface CardProp {
   network: Network;
   networkSummary: ParamsProps;
-  showMobilePopover: string;
   setShowMobilePopover: Dispatch<SetStateAction<string>>;
+  showMobilePopover: string;
 }
 
 const NetworkCard = ({
diff --git a/src/screens/staking/components/networks/components/search_bar/index.tsx b/src/screens/staking/components/networks/components/search_bar/index.tsx
index 5c97e359..22024743 100644
--- a/src/screens/staking/components/networks/components/search_bar/index.tsx
+++ b/src/screens/staking/components/networks/components/search_bar/index.tsx
@@ -58,8 +58,8 @@ function useSearch(InputProps: ComponentProps<typeof TextField>["InputProps"]) {
 }
 
 interface OptionsProps {
-  props: HTMLAttributes<HTMLLIElement>;
   network: Network;
+  props: HTMLAttributes<HTMLLIElement>;
 }
 
 const Options = ({ props, network }: OptionsProps) => {
diff --git a/src/screens/tag/components/tag_posts/interface.ts b/src/screens/tag/components/tag_posts/interface.ts
index f48a8080..d91f460f 100644
--- a/src/screens/tag/components/tag_posts/interface.ts
+++ b/src/screens/tag/components/tag_posts/interface.ts
@@ -1,5 +1,5 @@
 export interface IProps {
-  main: any;
   blogs: any[];
+  main: any;
   meta: any;
 }
diff --git a/src/utils/social_media_info.tsx b/src/utils/social_media_info.tsx
index eb02f253..ce1aaeef 100644
--- a/src/utils/social_media_info.tsx
+++ b/src/utils/social_media_info.tsx
@@ -10,9 +10,9 @@ import {
 } from "@src/components/icons";
 
 interface SocialMediaProps {
+  component: FunctionComponent<{ fill?: string }>;
   key: string;
   url: string;
-  component: FunctionComponent<{ fill?: string }>;
 }
 
 interface SocialMediasProps {

From 44d5502dc0b5c9c5ec97bbb93bf46e459d1798b3 Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 21:59:23 +0800
Subject: [PATCH 8/9] chore: add eslint rule

---
 .eslintrc.cjs                                                 | 2 ++
 src/components/selection-tab/index.tsx                        | 2 +-
 src/screens/blog_details/components/social_media/index.tsx    | 2 +-
 .../calculate_rewards/components/calculator/index.tsx         | 2 +-
 .../staking/components/hero/components/stats/hooks.tsx        | 2 +-
 src/screens/staking/components/hooks.ts                       | 4 ++--
 src/screens/staking/components/networks/index.tsx             | 2 +-
 src/utils/network_info.ts                                     | 2 +-
 8 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index ae35213b..525220bf 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -104,8 +104,10 @@ module.exports = {
     "react-hooks/exhaustive-deps": "error",
     "react-hooks/rules-of-hooks": "error",
 
+    "perfectionist/sort-enums": "error",
     "perfectionist/sort-exports": "error",
     "perfectionist/sort-interfaces": "error",
     "perfectionist/sort-object-types": "error",
+    "perfectionist/sort-union-types": "error",
   },
 };
diff --git a/src/components/selection-tab/index.tsx b/src/components/selection-tab/index.tsx
index 3f718197..eae41b4c 100644
--- a/src/components/selection-tab/index.tsx
+++ b/src/components/selection-tab/index.tsx
@@ -33,7 +33,7 @@ export const StyledTabs = styled((props: StyledTabsProps) => (
 interface StyledTabProps {
   className?: string;
   disabled?: boolean;
-  icon?: string | ReactElement;
+  icon?: ReactElement | string;
   label: string;
   onClick?: (e: any) => void;
   value?: string;
diff --git a/src/screens/blog_details/components/social_media/index.tsx b/src/screens/blog_details/components/social_media/index.tsx
index 0c762e6f..233580b8 100644
--- a/src/screens/blog_details/components/social_media/index.tsx
+++ b/src/screens/blog_details/components/social_media/index.tsx
@@ -11,7 +11,7 @@ const SocialMedia = ({ title = "Forbole " }: any) => {
   const shareUrl = `${process.env.NEXT_PUBLIC_URL}${path}`;
 
   const handleClick = (url: string) => {
-    const config: { [key: string]: string | number } = {
+    const config: { [key: string]: number | string } = {
       height: 400,
       width: 550,
       location: "no",
diff --git a/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx b/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx
index 97e4c805..6751a2c1 100644
--- a/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx
+++ b/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx
@@ -47,7 +47,7 @@ const Calculator = () => {
   } = useCalculateRewardsHook();
 
   const networkData = cosmosNetworkKeys
-    .map((x: string | number) => getNetworkInfo(x))
+    .map((x: number | string) => getNetworkInfo(x))
     .filter(Boolean)
     .filter((x) => !skippedRewardsNetworks.has(x.key))
     .filter((x) => getCanClickNetwork(x));
diff --git a/src/screens/staking/components/hero/components/stats/hooks.tsx b/src/screens/staking/components/hero/components/stats/hooks.tsx
index 30c42a41..25663c07 100644
--- a/src/screens/staking/components/hero/components/stats/hooks.tsx
+++ b/src/screens/staking/components/hero/components/stats/hooks.tsx
@@ -9,7 +9,7 @@ import { networkNumber } from "@src/utils/network_info";
 const elrondNetworkFunctions = networkFunctions.elrond;
 
 type StatsItem = {
-  stats: string | number;
+  stats: number | string;
   title: string;
 };
 
diff --git a/src/screens/staking/components/hooks.ts b/src/screens/staking/components/hooks.ts
index 3786082f..29efca01 100644
--- a/src/screens/staking/components/hooks.ts
+++ b/src/screens/staking/components/hooks.ts
@@ -3,8 +3,8 @@ import { useEffect, useRef, useState } from "react";
 export const useCounter = (targetValue: unknown) => {
   const [counterValue, setCounterValue] = useState<unknown>(0);
   const counterRef = useRef(null);
-  const divisor = useRef<number | null>(null);
-  const intervalId = useRef<number | null>(null);
+  const divisor = useRef<null | number>(null);
+  const intervalId = useRef<null | number>(null);
   const hasViewed = useRef<unknown>(false);
 
   const clearInterval = () => {
diff --git a/src/screens/staking/components/networks/index.tsx b/src/screens/staking/components/networks/index.tsx
index 7ef822df..e156c5df 100644
--- a/src/screens/staking/components/networks/index.tsx
+++ b/src/screens/staking/components/networks/index.tsx
@@ -37,7 +37,7 @@ const Networks = () => {
   };
 
   const allNetworkData = allNetworkKeys
-    .map((x: string | number) => getNetworkInfo(x))
+    .map((x: number | string) => getNetworkInfo(x))
     .filter(Boolean);
 
   const sortedNetworks = [...allNetworkData].sort((a, b) =>
diff --git a/src/utils/network_info.ts b/src/utils/network_info.ts
index 8df1f1eb..d0a78869 100644
--- a/src/utils/network_info.ts
+++ b/src/utils/network_info.ts
@@ -714,7 +714,7 @@ const logos: IStringIndex = {
   },
 };
 
-export const getNetworkInfo = (key: string | number) => logos[key] || null;
+export const getNetworkInfo = (key: number | string) => logos[key] || null;
 
 export const cosmosNetworkKeys = [
   "agoric",

From c18ad9aa7d7e56a2f9c19be7de0e5e61ef6d4964 Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Dec 2023 22:03:50 +0800
Subject: [PATCH 9/9] chore: eslint rule

---
 .eslintrc.cjs                                 |  59 +-
 i18n.js                                       |  26 +-
 next-sitemap.config.js                        |  14 +-
 next.config.js                                |  20 +-
 playwright.config.ts                          |  12 +-
 scripts/rss.xml.ts                            |   4 +-
 src/api/authors/index.ts                      |   2 +-
 src/api/index.ts                              |   2 +-
 src/api/networks/index.ts                     |   8 +-
 src/api/posts/index.ts                        |  14 +-
 src/api/tags/index.ts                         |   2 +-
 src/api/whatsnew/index.ts                     |   8 +-
 src/components/Carousel/index.tsx             |  14 +-
 src/components/Intro_panel/index.tsx          |  14 +-
 src/components/arrow/index.tsx                |  28 +-
 src/components/background.tsx                 |  12 +-
 src/components/cardSwiper/index.tsx           |  18 +-
 src/components/contact-form/index.tsx         |  38 +-
 src/components/cta-button/index.tsx           |  34 +-
 src/components/footer/index.tsx               |   4 +-
 src/components/formInput/index.tsx            |  42 +-
 src/components/four-table/config.ts           |  32 +-
 src/components/four-table/index.tsx           |  34 +-
 src/components/guide_nav/index.tsx            |   2 +-
 src/components/intro_card/index.tsx           |  10 +-
 .../stats/components/stats_card/index.tsx     |   4 +-
 .../stats/components/stats_card/useStyles.ts  |  28 +-
 .../key_data/components/stats/useStyles.ts    |   4 +-
 src/components/key_data/index.tsx             |   6 +-
 src/components/layout/index.tsx               |   2 +-
 src/components/layout_val/index.tsx           |   6 +-
 .../components/company_menu_button/index.tsx  |   6 +-
 .../nav/components/lang_menu_button/index.tsx |  10 +-
 .../nav/components/menu_list/index.tsx        |   2 +-
 .../nav/components/mobile_nav_menu/index.tsx  |  64 +-
 .../components/products_menu_button/index.tsx |  10 +-
 src/components/nav/index.tsx                  |   4 +-
 src/components/product-panel/index.tsx        |  34 +-
 src/components/scroll_to_bottom/index.tsx     |   2 +-
 src/components/scroll_to_top/index.tsx        |   2 +-
 src/components/section/index.tsx              |   2 +-
 src/components/selection-tab/index.tsx        |  36 +-
 src/components/signature-card/index.tsx       |  52 +-
 src/components/success-modal/index.tsx        |  38 +-
 src/components/tags/index.tsx                 |   2 +-
 src/components/talk-modal/index.tsx           |  60 +-
 src/hooks/get_screen_size.ts                  |   8 +-
 src/models/post.ts                            |  10 +-
 src/models/tag.ts                             |   2 +-
 src/pages/api/contact.ts                      |   2 +-
 src/pages/api/subscribe.ts                    |   8 +-
 src/pages/author/[author]/index.tsx           |   6 +-
 src/pages/blog/[title]/index.tsx              |   2 +-
 src/pages/blog/index.tsx                      |   6 +-
 src/pages/staking/[title]/index.tsx           |   2 +-
 src/pages/tag/[tag]/[page].tsx                |   6 +-
 src/pages/tag/[tag]/index.tsx                 |   8 +-
 src/screens/Infrastructure/index.tsx          |  48 +-
 src/screens/about/index.tsx                   |   2 +-
 src/screens/app/index.tsx                     |   2 +-
 src/screens/app/innerApp/index.tsx            |   2 +-
 .../author/components/author_posts/index.tsx  |   2 +-
 src/screens/author/index.tsx                  |  22 +-
 .../blog_posts/components/post/index.tsx      |   6 +-
 .../blog/components/blog_posts/index.tsx      |  42 +-
 src/screens/blog/index.tsx                    |   6 +-
 .../components/social_media/index.tsx         |  14 +-
 src/screens/contact/hooks.tsx                 |  40 +-
 src/screens/contact/index.tsx                 |  16 +-
 src/screens/developer_tools/hooks.tsx         |  36 +-
 src/screens/developer_tools/index.tsx         |  12 +-
 src/screens/enterprise_solution/hook.ts       |  22 +-
 src/screens/enterprise_solution/index.tsx     |  10 +-
 src/screens/home/index.tsx                    |   6 +-
 .../network_guides/components/guide/index.tsx |   2 +-
 .../components/info_card/index.tsx            |   2 +-
 .../components/info_card/useStyles.ts         |  28 +-
 .../components/network_info/hooks.tsx         |  10 +-
 .../components/network_info/index.tsx         |   4 +-
 src/screens/network_guides/index.tsx          |   2 +-
 src/screens/policy/index.tsx                  |  42 +-
 src/screens/products/index.tsx                |  74 +-
 .../components/calculator/index.tsx           |  36 +-
 .../components/calculator/styles.tsx          | 248 ++---
 .../components/calculate_rewards/config.ts    |   8 +-
 .../components/calculate_rewards/hooks.tsx    |  30 +-
 .../components/calculate_rewards/index.tsx    |  12 +-
 .../components/calculate_rewards/utils.ts     |  34 +-
 .../components/contact_card/hooks.tsx         |  10 +-
 .../components/contact_card/index.tsx         |  16 +-
 .../components/faq/components/card/index.tsx  |  12 +-
 src/screens/staking/components/faq/config.tsx |  24 +-
 src/screens/staking/components/faq/index.tsx  |  24 +-
 .../stats/components/stats_card/index.tsx     |   4 +-
 .../hero/components/stats/hooks.tsx           |   8 +-
 .../components/how_to_card/index.tsx          |  22 +-
 .../staking/components/how_it_works/index.tsx |  14 +-
 .../components/network_card/index.tsx         |   2 +-
 .../components/network_grid/config.ts         |   2 +-
 .../networks/components/network_grid/hooks.ts |  10 +-
 .../components/network_grid/index.tsx         |   2 +-
 .../components/network_grid/useStyles.ts      |  10 +-
 .../networks/components/search_bar/index.tsx  |   4 +-
 .../components/search_bar/useStyles.ts        | 186 ++--
 .../staking/components/why_forbole/index.tsx  |   6 +-
 src/screens/staking/index.tsx                 |   2 +-
 .../tag/components/tag_posts/index.tsx        |   2 +-
 src/screens/tag/index.tsx                     |   2 +-
 src/styles/theme/index.ts                     |  26 +-
 src/styles/theme/light.ts                     |  30 +-
 src/utils/api.ts                              |  10 +-
 src/utils/apollo.tsx                          |   2 +-
 src/utils/ghost.ts                            |   6 +-
 src/utils/network_functions.ts                |   2 +-
 src/utils/network_info.ts                     | 844 +++++++++---------
 src/utils/scroll.tsx                          |   2 +-
 src/utils/social_media_info.tsx               |  46 +-
 117 files changed, 1517 insertions(+), 1520 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 525220bf..6e161bfc 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -2,7 +2,7 @@ const path = require("node:path");
 
 const paddingLineBetweenStatements = [
   "error",
-  { blankLine: "always", prev: "*", next: "return" },
+  { blankLine: "always", next: "return", prev: "*" },
 ]
   .concat(
     [
@@ -15,16 +15,16 @@ const paddingLineBetweenStatements = [
       "if",
     ]
       .map((item) => [
-        { blankLine: "always", prev: item, next: "*" },
-        { blankLine: "always", prev: "*", next: item },
+        { blankLine: "always", next: "*", prev: item },
+        { blankLine: "always", next: item, prev: "*" },
       ])
       .flat(),
   )
   .concat([
     {
       blankLine: "any",
-      prev: ["singleline-const"],
       next: ["singleline-const"],
+      prev: ["singleline-const"],
     },
   ]);
 
@@ -33,11 +33,6 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
   extends: [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
@@ -50,38 +45,46 @@ module.exports = {
   },
   plugins: ["@typescript-eslint", "react-hooks", "@stylistic", "perfectionist"],
   rules: {
-    // @TODO: These should be removed when fixed
-    "@typescript-eslint/no-explicit-any": "off",
     "@next/next/no-img-element": "off",
-    "react/display-name": "off",
-    "jsx-a11y/anchor-is-valid": "off",
+    "@stylistic/padding-line-between-statements": paddingLineBetweenStatements,
+
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-shadow": "error",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-use-before-define": "error",
+    "@typescript-eslint/no-var-requires": "off",
 
     "arrow-body-style": "error",
     "camelcase": "off",
     "global-require": "off",
+    "jsx-a11y/anchor-is-valid": "off",
     "no-console": ["error", { allow: ["warn", "error"] }],
     "no-shadow": "off",
     "no-unused-vars": "off",
     "no-useless-return": "error",
     "object-shorthand": "error",
+
+    "perfectionist/sort-enums": "error",
+    "perfectionist/sort-exports": "error",
+    "perfectionist/sort-interfaces": "error",
+    "perfectionist/sort-object-types": "error",
+    "perfectionist/sort-objects": "error",
+    "perfectionist/sort-union-types": "error",
+
     "prefer-const": "error",
     "prefer-template": "error",
     "quote-props": ["error", "consistent-as-needed"],
 
-    "@stylistic/padding-line-between-statements": paddingLineBetweenStatements,
-
-    "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/no-shadow": "error",
-    "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-use-before-define": "error",
-    "@typescript-eslint/no-var-requires": "off",
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
 
     "react/destructuring-assignment": [
       "error",
       "always",
       { destructureInSignature: "always" },
     ],
-
+    "react/display-name": "off",
     "react/function-component-definition": "off",
     "react/jsx-boolean-value": "error",
     "react/jsx-curly-brace-presence": "error",
@@ -100,14 +103,10 @@ module.exports = {
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
     "react/self-closing-comp": "error",
-
-    "react-hooks/exhaustive-deps": "error",
-    "react-hooks/rules-of-hooks": "error",
-
-    "perfectionist/sort-enums": "error",
-    "perfectionist/sort-exports": "error",
-    "perfectionist/sort-interfaces": "error",
-    "perfectionist/sort-object-types": "error",
-    "perfectionist/sort-union-types": "error",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
   },
 };
diff --git a/i18n.js b/i18n.js
index 34d1224b..8c8b7ff1 100644
--- a/i18n.js
+++ b/i18n.js
@@ -1,26 +1,26 @@
 module.exports = {
-  locales: ["en", "zh-HK", "zh-CN"],
   defaultLocale: "en",
+  loadLocaleFrom: (lang, ns) =>
+    import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
+  locales: ["en", "zh-HK", "zh-CN"],
   pages: {
     "*": ["common"],
     "/": ["home"],
-    "/contact": ["contact"],
     "/about": ["about"],
-    "/terms-and-conditions": ["terms_and_conditions"],
-    "/privacy-policy": ["policy"],
-    "/staking-service": ["staking_service"],
-    "/infrastructure": ["validator_infrastructure"],
-    "/developer-tools": ["developer_tools"],
-    "/products": ["products"],
     "/analytics-tools": ["analytics_tools"],
+    "/author/[author]": ["blog"],
+    "/blog": ["blog"],
+    "/blog/[title]": ["blog"],
+    "/contact": ["contact"],
+    "/developer-tools": ["developer_tools"],
     "/enterprise-solution": ["enterprise_solution"],
+    "/infrastructure": ["validator_infrastructure"],
+    "/privacy-policy": ["policy"],
+    "/products": ["products"],
     "/staking": ["staking"],
+    "/staking-service": ["staking_service"],
     "/staking/[title]": ["staking"],
-    "/blog": ["blog"],
-    "/blog/[title]": ["blog"],
     "/tag/[tag]": ["blog"],
-    "/author/[author]": ["blog"],
+    "/terms-and-conditions": ["terms_and_conditions"],
   },
-  loadLocaleFrom: (lang, ns) =>
-    import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
 };
diff --git a/next-sitemap.config.js b/next-sitemap.config.js
index fe225177..a2f40d8d 100644
--- a/next-sitemap.config.js
+++ b/next-sitemap.config.js
@@ -1,11 +1,4 @@
 module.exports = {
-  // These are not tracked for now
-  changefreq: null,
-  autoLastmod: false,
-  priority: null,
-
-  generateRobotsTxt: false,
-  siteUrl: "https://www.forbole.com",
   additionalPaths: async () => {
     if (!process.env.GHOST_PRIVATE_KEY || !process.env.NEXT_PUBLIC_GHOST_API)
       return [];
@@ -29,8 +22,8 @@ module.exports = {
 
     const getTags = () =>
       ghostAdminApi.tags.browse({
-        limit: 1000,
         fields: "slug",
+        limit: 1000,
       });
 
     const [tags, posts] = await Promise.all([getTags(), getPosts()]);
@@ -50,4 +43,9 @@ module.exports = {
         loc,
       }));
   },
+  autoLastmod: false,
+  changefreq: null,
+  generateRobotsTxt: false,
+  priority: null,
+  siteUrl: "https://www.forbole.com",
 };
diff --git a/next.config.js b/next.config.js
index 8de1d519..18aa1efd 100644
--- a/next.config.js
+++ b/next.config.js
@@ -9,7 +9,9 @@ const withBundleAnalyzer = bundleAnalyzer({
 });
 
 const baseConfig = nextTranslate({
-  poweredByHeader: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   images: {
     remotePatterns: [
       {
@@ -17,16 +19,12 @@ const baseConfig = nextTranslate({
         protocol: "https",
       },
       {
-        protocol: "https",
         hostname: "www.forbole.com",
+        protocol: "https",
       },
     ],
   },
-  rewrites: async () =>
-    ["/rss", "/rss/"].map((path) => ({
-      destination: "/rss.xml",
-      source: path,
-    })),
+  poweredByHeader: false,
   redirects: async () => [
     {
       destination: "/zh-HK/:path*",
@@ -39,6 +37,11 @@ const baseConfig = nextTranslate({
       source: `${prefix}/native-staking`,
     })),
   ],
+  rewrites: async () =>
+    ["/rss", "/rss/"].map((path) => ({
+      destination: "/rss.xml",
+      source: path,
+    })),
   webpack: (config) => {
     config.module.rules.push({
       test: /\.svg$/,
@@ -47,9 +50,6 @@ const baseConfig = nextTranslate({
 
     return config;
   },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
 });
 
 module.exports = million.next(withBundleAnalyzer(baseConfig), { auto: true });
diff --git a/playwright.config.ts b/playwright.config.ts
index edd17158..02ae55e6 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -8,27 +8,27 @@ if (process.env.E2E_MANUAL !== "true") {
 
 // https://playwright.dev/docs/test-configuration
 export default defineConfig({
-  timeout: 30000,
   globalTimeout: 600000,
+  grepInvert,
   projects: [
     {
       name: "Desktop",
       use: {
-        viewport: { width: 1024, height: 768 },
+        viewport: { height: 768, width: 1024 },
       },
     },
     {
       name: "Mobile",
+      testIgnore: [/backend.spec.ts/],
       use: {
-        viewport: { width: 375, height: 812 },
+        viewport: { height: 812, width: 375 },
       },
-      testIgnore: [/backend.spec.ts/],
     },
   ],
+  testDir: "./e2e",
+  timeout: 30000,
   use: {
     baseURL: "http://localhost:3000",
     trace: "retain-on-failure",
   },
-  testDir: "./e2e",
-  grepInvert,
 });
diff --git a/scripts/rss.xml.ts b/scripts/rss.xml.ts
index b85019b9..b4156804 100644
--- a/scripts/rss.xml.ts
+++ b/scripts/rss.xml.ts
@@ -29,10 +29,10 @@ export const main = async () => {
     .filter((p: any) => !p.title.includes(stakingGuidePrefix))
     .forEach((post: any) => {
       feed.item({
-        title: post.title,
+        date: post.created_at,
         description: post.excerpt,
+        title: post.title,
         url: `${site_url}/blog/${post.slug}`,
-        date: post.created_at,
       });
     });
 
diff --git a/src/api/authors/index.ts b/src/api/authors/index.ts
index 99bdebbe..e46f350a 100644
--- a/src/api/authors/index.ts
+++ b/src/api/authors/index.ts
@@ -22,10 +22,10 @@ export const getPostsByAuthor = async (query: {
   try {
     const posts = await api.posts.browse({
       filter: `author:${query.author}`,
+      formats: "html",
       include: "tags,authors",
       limit: 5,
       page: query?.page || 1,
-      formats: "html",
     });
 
     return posts ?? null;
diff --git a/src/api/index.ts b/src/api/index.ts
index 7859b590..579e91de 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -4,7 +4,7 @@ const GhostContentAPI = require("@tryghost/content-api/cjs/content-api");
 
 // Create API instance with site credentials
 export const ghostApi = new GhostContentAPI({
-  url: process.env.NEXT_PUBLIC_GHOST_API,
   key: process.env.NEXT_PUBLIC_GHOST_KEY,
+  url: process.env.NEXT_PUBLIC_GHOST_API,
   version: "v3.0",
 });
diff --git a/src/api/networks/index.ts b/src/api/networks/index.ts
index daf74ace..2f6a3e21 100644
--- a/src/api/networks/index.ts
+++ b/src/api/networks/index.ts
@@ -3,18 +3,18 @@ import type { IPost } from "./interface";
 
 /** Gets posts from remote */
 export const getNetworkPosts = async ({
-  limit = 11,
-  page = 1,
   // filter = "tag:-[hash-zhs,hash-zht]",
   filter = "tags:[staking]",
+  limit = 11,
+  page = 1,
 }: IPost) => {
   try {
     return await api.posts.browse({
+      filter,
+      formats: "html",
       include: "tags,authors",
       limit,
       page,
-      filter,
-      formats: "html",
     });
   } catch (err) {
     // eslint-disable-next-line no-console
diff --git a/src/api/posts/index.ts b/src/api/posts/index.ts
index 08a5f27e..8b414fae 100644
--- a/src/api/posts/index.ts
+++ b/src/api/posts/index.ts
@@ -5,17 +5,17 @@ export const stakingGuidePrefix = "how-to-stake";
 
 /** Gets posts from remote */
 export const getPosts = async ({
+  filter = "tags:-[careers]",
   limit = 11,
   page = 1,
-  filter = "tags:-[careers]",
 }: IPost) => {
   try {
     return await api.posts.browse({
+      filter,
+      formats: "html",
       include: "tags,authors",
       limit,
       page,
-      filter,
-      formats: "html",
     });
   } catch (err) {
     // eslint-disable-next-line no-console
@@ -27,15 +27,15 @@ export const getPosts = async ({
 
 /** Gets posts from remote based on See More on mobile device */
 export const getAllPosts = async ({
-  limit,
   filter = "tags:-[careers]",
+  limit,
 }: IPost) => {
   try {
     return await api.posts.browse({
-      include: "tags,authors",
-      limit,
       filter,
       formats: "html",
+      include: "tags,authors",
+      limit,
     });
   } catch (err) {
     // eslint-disable-next-line no-console
@@ -51,8 +51,8 @@ export const getSinglePost = async (slug: string) => {
     return await api.posts.read(
       { slug },
       {
-        include: "tags,authors",
         formats: "html",
+        include: "tags,authors",
       },
     );
   } catch (err) {
diff --git a/src/api/tags/index.ts b/src/api/tags/index.ts
index 11444791..62a98e11 100644
--- a/src/api/tags/index.ts
+++ b/src/api/tags/index.ts
@@ -4,10 +4,10 @@ export const getPostsByTag = async (query: { page?: number; tag: string }) => {
   try {
     const posts = await api.posts.browse({
       filter: `tags:${query.tag}`,
+      formats: "html",
       include: "tags,authors",
       limit: 10,
       page: query?.page || 1,
-      formats: "html",
     });
 
     return posts ?? null;
diff --git a/src/api/whatsnew/index.ts b/src/api/whatsnew/index.ts
index 93244ad8..0e87c6ba 100644
--- a/src/api/whatsnew/index.ts
+++ b/src/api/whatsnew/index.ts
@@ -29,11 +29,11 @@ export const getPageByTag = async (tag: string) => {
       );
 
       return {
-        title: res.title,
-        list,
-        imageHref: window.document.querySelector("img")?.src,
-        btnName: window.document.querySelector("a")?.innerHTML,
         btnClick: window.document.querySelector("a")?.href,
+        btnName: window.document.querySelector("a")?.innerHTML,
+        imageHref: window.document.querySelector("img")?.src,
+        list,
+        title: res.title,
       };
     }) as {
       btnClick: string;
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index 74f8e856..44aba7c7 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -20,7 +20,7 @@ type PersonInfo = {
   position: string;
 };
 
-const PersonCard = ({ desc, name, position, img }: PersonInfo) => (
+const PersonCard = ({ desc, img, name, position }: PersonInfo) => (
   <Card className={styles.personCard}>
     {img && <Avatar alt="Person Avatar" className={styles.avatar} src={img} />}
     <Box>
@@ -68,15 +68,15 @@ const Carousel = ({ personList }: CarouselProps) => {
       <Box className={styles.wrapper}>
         <Swiper
           breakpoints={{
-            375: {
-              slidesPerView: 1,
-              initialSlide: 0,
+            1025: {
+              initialSlide: 1,
+              slidesPerView: 3,
               spaceBetween: -16,
             },
-            1025: {
+            375: {
+              initialSlide: 0,
+              slidesPerView: 1,
               spaceBetween: -16,
-              slidesPerView: 3,
-              initialSlide: 1,
             },
           }}
           centeredSlides
diff --git a/src/components/Intro_panel/index.tsx b/src/components/Intro_panel/index.tsx
index 9e639a5d..4ee50d77 100644
--- a/src/components/Intro_panel/index.tsx
+++ b/src/components/Intro_panel/index.tsx
@@ -58,15 +58,15 @@ const IntroPanel = ({
         >
           <Typography
             sx={{
+              color: "#202A43",
               fontWeight: "590",
               pr: "10px",
-              color: "#202A43",
-              [theme.breakpoints.up("tablet")]: {
-                fontSize: "20px",
-              },
               [theme.breakpoints.down("tablet")]: {
-                width: "max-content",
                 fontSize: "18px",
+                width: "max-content",
+              },
+              [theme.breakpoints.up("tablet")]: {
+                fontSize: "20px",
               },
             }}
             variant={level ? (`h${level}` as "h1") : undefined}
@@ -84,10 +84,10 @@ const IntroPanel = ({
         <Box>
           <Typography
             sx={{
+              color: "#2A1A6A",
               fontSize: "16px",
-              lineHeight: "22px",
               fontWeight: "400",
-              color: "#2A1A6A",
+              lineHeight: "22px",
             }}
             variant={level ? (`h${level + 1}` as "h1") : undefined}
           >
diff --git a/src/components/arrow/index.tsx b/src/components/arrow/index.tsx
index 27db32a8..1eb7e209 100644
--- a/src/components/arrow/index.tsx
+++ b/src/components/arrow/index.tsx
@@ -18,7 +18,7 @@ type Props = {
   sx?: SxProps<Theme>;
 };
 
-export default function Arraw({ className, sx, direction, role }: Props) {
+export default function Arraw({ className, direction, role, sx }: Props) {
   const theme = useTheme();
   const [rotate, setRotate] = useState(0);
 
@@ -45,24 +45,24 @@ export default function Arraw({ className, sx, direction, role }: Props) {
       className={className}
       role={role}
       sx={{
-        "userSelect": "none",
-        "display": "flex",
-        "width": "48px",
-        "height": "48px",
-        [theme.breakpoints.down("laptop")]: {
-          width: "36px",
-          height: "36px",
-        },
-        "cursor": "pointer",
         "& svg": {
-          "transition": "fill 0.3s",
-          "filter":
-            "drop-shadow(0px 14px 64px rgba(2, 38, 225, 0.12)) drop-shadow(0px 8px 22px rgba(2, 38, 225, 0.12))",
-          "fill": " #FFF",
           "& path": {
             stroke: theme.palette.custom.forbole.blue,
           },
+          "fill": " #FFF",
+          "filter":
+            "drop-shadow(0px 14px 64px rgba(2, 38, 225, 0.12)) drop-shadow(0px 8px 22px rgba(2, 38, 225, 0.12))",
+          "transition": "fill 0.3s",
         },
+        "cursor": "pointer",
+        "display": "flex",
+        "height": "48px",
+        [theme.breakpoints.down("laptop")]: {
+          height: "36px",
+          width: "36px",
+        },
+        "userSelect": "none",
+        "width": "48px",
         ...sx,
       }}
       zIndex={2}
diff --git a/src/components/background.tsx b/src/components/background.tsx
index 2909da98..e167fb6c 100644
--- a/src/components/background.tsx
+++ b/src/components/background.tsx
@@ -17,17 +17,17 @@ const Background = ({ displayHorse }: { displayHorse?: boolean }) => {
       </Box>
       <Box
         sx={{
-          "height": displayHorse ? "260vw" : "190vw",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "zIndex": -1,
-
           "& img": {
             [theme.breakpoints.up(550)]: {
               display: "none",
             },
           },
+          "height": displayHorse ? "260vw" : "190vw",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+
+          "zIndex": -1,
         }}
       >
         <Image
diff --git a/src/components/cardSwiper/index.tsx b/src/components/cardSwiper/index.tsx
index c22909a9..e017871c 100644
--- a/src/components/cardSwiper/index.tsx
+++ b/src/components/cardSwiper/index.tsx
@@ -16,7 +16,7 @@ type Props = {
   style?: CSSProperties;
 };
 
-const CardSwiper = ({ imagesList, style, className }: Props) => {
+const CardSwiper = ({ className, imagesList, style }: Props) => {
   const theme = useTheme();
 
   return (
@@ -24,15 +24,15 @@ const CardSwiper = ({ imagesList, style, className }: Props) => {
       <Box position="relative">
         <Swiper
           breakpoints={{
-            375: {
-              spaceBetween: -30,
-              slidesPerView: 1,
-              initialSlide: 0,
-            },
             1025: {
-              spaceBetween: -80,
-              slidesPerView: 3,
               initialSlide: 1,
+              slidesPerView: 3,
+              spaceBetween: -80,
+            },
+            375: {
+              initialSlide: 0,
+              slidesPerView: 1,
+              spaceBetween: -30,
             },
           }}
           centeredSlides
@@ -76,8 +76,8 @@ const CardSwiper = ({ imagesList, style, className }: Props) => {
           className="c-prev"
           direction={Direction.Left}
           sx={{
-            position: "absolute",
             left: "5px",
+            position: "absolute",
             top: "50%",
             transform: "translateY(-50%)",
           }}
diff --git a/src/components/contact-form/index.tsx b/src/components/contact-form/index.tsx
index 6f55a691..7aae376c 100644
--- a/src/components/contact-form/index.tsx
+++ b/src/components/contact-form/index.tsx
@@ -31,9 +31,6 @@ const MenuProps = {
   PaperProps: {
     style: {},
     sx: {
-      "backgroundColor": "white",
-      "borderRadius": "8px",
-      "boxShadow": "4px 8px 24px 0px rgba(116, 81, 255, 0.28)",
       "& li:hover": {
         backgroundColor: "rgba(107, 97, 254, 0.24)",
       },
@@ -43,12 +40,15 @@ const MenuProps = {
       "& li.Mui-selected:hover": {
         backgroundColor: "rgba(107, 97, 254, 0.8)",
       },
+      "backgroundColor": "white",
+      "borderRadius": "8px",
+      "boxShadow": "4px 8px 24px 0px rgba(116, 81, 255, 0.28)",
     },
   },
 };
 
 const ContactFrom = forwardRef<HTMLDivElement, Props>(
-  ({ inputs, handleInputChange, handleSubmit, canSubmit, isLoading }, ref) => {
+  ({ canSubmit, handleInputChange, handleSubmit, inputs, isLoading }, ref) => {
     const theme = useTheme();
     const { t } = useTranslation("enterprise_solution");
 
@@ -69,26 +69,26 @@ const ContactFrom = forwardRef<HTMLDivElement, Props>(
         component="div"
         ref={ref}
         sx={{
-          maxWidth: "776px",
-          padding: "40px",
-          gap: "32px",
-          borderRadius: "24px",
-          margin: "40px auto",
           background:
             "linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.64) 64.58%, #FFF 100%)",
+          borderRadius: "24px",
           boxShadow:
             "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
           color: "#202A43",
+          gap: "32px",
+          margin: "40px auto",
+          maxWidth: "776px",
+          padding: "40px",
           [theme.breakpoints.down("laptop")]: {
-            padding: "24px",
             gap: "24px",
+            padding: "24px",
           },
         }}
       >
         <Grid
           columnSpacing={theme.spacing(4)}
           container
-          rowSpacing={{ mobile: theme.spacing(3), desktop: theme.spacing(4) }}
+          rowSpacing={{ desktop: theme.spacing(4), mobile: theme.spacing(3) }}
         >
           <Grid item laptop={6} mobile={12}>
             <Typography
@@ -168,23 +168,23 @@ const ContactFrom = forwardRef<HTMLDivElement, Props>(
                   return selected;
                 }}
                 sx={{
-                  "borderRadius": "8px",
-                  "&>.MuiOutlinedInput-notchedOutline": {
-                    borderWidth: "2px",
-                    borderColor:
-                      theme.palette.mode === "light" ? "#fff" : "#2D3843",
-                  },
                   "&:hover>.MuiOutlinedInput-notchedOutline": {
                     borderColor: theme.palette.custom.forbole.indigo,
                   },
                   "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                     borderColor: theme.palette.custom.forbole.indigo,
                   },
-                  "boxShadow": "4px 8px 24px 0px rgba(116, 81, 255, 0.28)",
-                  "fontSize": "16px",
+                  "&>.MuiOutlinedInput-notchedOutline": {
+                    borderColor:
+                      theme.palette.mode === "light" ? "#fff" : "#2D3843",
+                    borderWidth: "2px",
+                  },
                   "&>div": {
                     padding: "14px 18px",
                   },
+                  "borderRadius": "8px",
+                  "boxShadow": "4px 8px 24px 0px rgba(116, 81, 255, 0.28)",
+                  "fontSize": "16px",
                 }}
                 value={inputs.help}
               >
diff --git a/src/components/cta-button/index.tsx b/src/components/cta-button/index.tsx
index de7c3057..436d39ad 100644
--- a/src/components/cta-button/index.tsx
+++ b/src/components/cta-button/index.tsx
@@ -3,29 +3,29 @@ import { LoadingButton } from "@mui/lab";
 import { styled } from "@mui/material/styles";
 
 const ColorButton = styled(LoadingButton)<LoadingButtonProps>(() => ({
-  "flexShrink": 0,
-  "borderRadius": "45px",
-  "color": "rgba(235, 238, 245, 1)",
-  "background": "linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%)",
-  "whiteSpace": "nowrap",
-  "fontWeight": "590",
-  "height": "45px",
-  "fontSize": "16px",
-  "padding": " 0px 16px",
-  "transition": "transform 0.2s ease-in-out",
+  "&:disabled": {
+    background: "#EBEEF5",
+    boxShadow:
+      "0px 10px 32px -4px rgba(125, 92, 255, 0.1),0px 6px 14px -6px rgba(126, 94, 255, 0.28)",
+    color: "rgba(195, 204, 226, 1)",
+  },
   "&:hover": {
-    transform: "scale(1.02)",
     background:
       "linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%),linear-gradient(0deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32))",
     boxShadow:
       "0px 10px 32px -4px rgba(125, 92, 255, 0.1), 0px 6px 14px -6px rgba(126, 94, 255, 0.28)",
+    transform: "scale(1.02)",
   },
-  "&:disabled": {
-    background: "#EBEEF5",
-    color: "rgba(195, 204, 226, 1)",
-    boxShadow:
-      "0px 10px 32px -4px rgba(125, 92, 255, 0.1),0px 6px 14px -6px rgba(126, 94, 255, 0.28)",
-  },
+  "background": "linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%)",
+  "borderRadius": "45px",
+  "color": "rgba(235, 238, 245, 1)",
+  "flexShrink": 0,
+  "fontSize": "16px",
+  "fontWeight": "590",
+  "height": "45px",
+  "padding": " 0px 16px",
+  "transition": "transform 0.2s ease-in-out",
+  "whiteSpace": "nowrap",
 }));
 
 export default function CtaButton(props: LoadingButtonProps) {
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 23309ce9..f2f25f52 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -14,8 +14,8 @@ import { FooterItems, SocialMedia } from "./components";
 import * as styles from "./index.module.scss";
 import type { FooterProps } from "./types";
 
-const Footer = ({ red, itemColor }: FooterProps) => {
-  const { isTablet, isMobile } = useWindowDimensions();
+const Footer = ({ itemColor, red }: FooterProps) => {
+  const { isMobile, isTablet } = useWindowDimensions();
   const { t } = useTranslation("common");
 
   const wrapperStyle = {
diff --git a/src/components/formInput/index.tsx b/src/components/formInput/index.tsx
index 325c8a29..350712c4 100644
--- a/src/components/formInput/index.tsx
+++ b/src/components/formInput/index.tsx
@@ -2,29 +2,15 @@ import InputBase from "@mui/material/InputBase";
 import { styled } from "@mui/material/styles";
 
 const FormInput = styled(InputBase)(({ theme }) => ({
-  "display": "block",
-  "boxShadow": "4px 8px 24px 0px rgba(116, 81, 255, 0.28)",
-  "borderRadius": "8px",
-
-  "& .MuiInputBase-input:placeholder": {
-    color: "#878787",
-  },
   "& .MuiInputBase-input": {
-    "display": "block",
-    "width": "calc( 100% - 36px)",
-    "marginTop": theme.spacing(2),
-    "position": "relative",
+    "&:focus": {
+      borderColor: theme.palette.custom.forbole.indigo,
+    },
     "backgroundColor": theme.palette.mode === "light" ? "#FFF" : "#1A2027",
     "border": "2px solid",
     "borderColor": theme.palette.mode === "light" ? "#fff" : "#2D3843",
     "borderRadius": "8px",
-    "fontSize": "16px",
-    "padding": "12px 16px",
-    "transition": theme.transitions.create([
-      "border-color",
-      "background-color",
-      "box-shadow",
-    ]),
+    "display": "block",
     // Use the system font instead of the default Roboto font.
     "fontFamily": [
       "-apple-system",
@@ -38,10 +24,24 @@ const FormInput = styled(InputBase)(({ theme }) => ({
       '"Segoe UI Emoji"',
       '"Segoe UI Symbol"',
     ].join(","),
-    "&:focus": {
-      borderColor: theme.palette.custom.forbole.indigo,
-    },
+    "fontSize": "16px",
+    "marginTop": theme.spacing(2),
+    "padding": "12px 16px",
+    "position": "relative",
+    "transition": theme.transitions.create([
+      "border-color",
+      "background-color",
+      "box-shadow",
+    ]),
+    "width": "calc( 100% - 36px)",
+  },
+  "& .MuiInputBase-input:placeholder": {
+    color: "#878787",
   },
+  "borderRadius": "8px",
+
+  "boxShadow": "4px 8px 24px 0px rgba(116, 81, 255, 0.28)",
+  "display": "block",
 }));
 
 export default FormInput;
diff --git a/src/components/four-table/config.ts b/src/components/four-table/config.ts
index ff53c89c..e00cfd0d 100644
--- a/src/components/four-table/config.ts
+++ b/src/components/four-table/config.ts
@@ -7,28 +7,28 @@ const usePlans = () => {
   return useMemo(
     () => [
       {
-        title: t("plan_item1_title"),
-        price: "0",
+        btnHref: "https://devtools.forbole.com",
+        btnName: t("try_now"),
         currency: t("plan_item1_currency"),
         description: t("plan_item1_description"),
         features: t("plan_item1_features"),
         image: "/images/assets/24.png",
-        btnName: t("try_now"),
-        btnHref: "https://devtools.forbole.com",
+        price: "0",
+        title: t("plan_item1_title"),
       },
       {
-        title: t("plan_item2_title"),
-        price: "50",
+        btnHref: "",
+        btnName: t("contact_us"),
         currency: t("plan_item2_currency"),
         description: t("plan_item2_description"),
         features: t("plan_item2_features"),
         image: "/images/assets/24.png",
-        btnName: t("contact_us"),
-        btnHref: "",
+        price: "50",
+        title: t("plan_item2_title"),
       },
       {
-        title: t("plan_item3_title"),
-        price: "200",
+        btnHref: "",
+        btnName: t("contact_us"),
         currency: t("plan_item3_currency"),
         description: t("plan_item3_description"),
         features: [
@@ -37,12 +37,12 @@ const usePlans = () => {
           t("plan_item3_features_3"),
         ],
         image: "/images/assets/24.png",
-        btnName: t("contact_us"),
-        btnHref: "",
+        price: "200",
+        title: t("plan_item3_title"),
       },
       {
-        title: t("plan_item4_title"),
-        price: t("plan_item4_price"),
+        btnHref: "",
+        btnName: t("contact_us"),
         currency: t("plan_item4_currency"),
         description: t("plan_item4_description"),
         features: [
@@ -53,8 +53,8 @@ const usePlans = () => {
           t("plan_item4_features_5"),
         ],
         image: "/images/assets/24.png",
-        btnName: t("contact_us"),
-        btnHref: "",
+        price: t("plan_item4_price"),
+        title: t("plan_item4_title"),
       },
     ],
     [t],
diff --git a/src/components/four-table/index.tsx b/src/components/four-table/index.tsx
index 65be1e91..b005695a 100644
--- a/src/components/four-table/index.tsx
+++ b/src/components/four-table/index.tsx
@@ -21,13 +21,13 @@ const FourTable = ({ btnHref }: Props) => {
       direction="row"
       sx={{
         alignItems: "flex-end",
-        minHeight: "536px",
         gap: "16px",
+        minHeight: "536px",
         [theme.breakpoints.down("laptop")]: {
-          flexDirection: "column",
-          justifyContent: "center",
           alignItems: "center",
+          flexDirection: "column",
           gap: "24px",
+          justifyContent: "center",
         },
       }}
     >
@@ -36,20 +36,20 @@ const FourTable = ({ btnHref }: Props) => {
           className={indexTop === clickItem ? styles.active : ""}
           key={indexTop}
           sx={{
-            position: "relative",
-            height: "496px",
-            flexGrow: 1,
-            flexShrink: 1,
-            flexBasis: "270px",
-            padding: "24px",
-            borderRadius: "24px",
             backgroundColor: "#fff",
+            borderRadius: "24px",
             boxShadow:
               "0px 10px 32px -4px rgba(245, 20, 47, 0.16), 0px 6px 14px -6px rgba(249, 106, 122, 0.20)",
+            flexBasis: "270px",
+            flexGrow: 1,
+            flexShrink: 1,
+            height: "496px",
+            padding: "24px",
+            position: "relative",
             [theme.breakpoints.down("laptop")]: {
+              flexBasis: "max-content",
               flexGrow: 0,
               flexShrink: 0,
-              flexBasis: "max-content",
               width: "75%",
             },
           }}
@@ -72,9 +72,9 @@ const FourTable = ({ btnHref }: Props) => {
           </Typography>
           <Box
             sx={{
-              display: "flex",
               alignItems: "baseline",
               color: "#202A43",
+              display: "flex",
               fontSize: "12px",
               fontWeight: "590",
               mt: "20px",
@@ -87,9 +87,9 @@ const FourTable = ({ btnHref }: Props) => {
                 color: "#202A43",
                 fontSize: "32px",
                 fontWeight: "590",
+                letterSpacing: "-0.508px",
                 marginTop: "-23px",
                 pr: "7px",
-                letterSpacing: "-0.508px",
               }}
             >
               <Typography
@@ -126,14 +126,14 @@ const FourTable = ({ btnHref }: Props) => {
                 <Box
                   key={index}
                   sx={{
-                    marginTop: "20px",
                     display: "flex",
+                    marginTop: "20px",
                   }}
                 >
                   <img
                     alt=""
                     src={Plan.image}
-                    style={{ width: "25px", height: "25px" }}
+                    style={{ height: "25px", width: "25px" }}
                   />
                   <Typography
                     sx={{
@@ -150,8 +150,8 @@ const FourTable = ({ btnHref }: Props) => {
               <Box
                 key={indexTop}
                 sx={{
-                  marginTop: "20px",
                   display: "flex",
+                  marginTop: "20px",
                   [theme.breakpoints.down("laptop")]: {
                     marginTop: "16px",
                   },
@@ -160,7 +160,7 @@ const FourTable = ({ btnHref }: Props) => {
                 <img
                   alt=""
                   src={Plan.image}
-                  style={{ width: "25px", height: "25px" }}
+                  style={{ height: "25px", width: "25px" }}
                 />
                 <Typography
                   sx={{
diff --git a/src/components/guide_nav/index.tsx b/src/components/guide_nav/index.tsx
index 7faa7f1f..feb13b42 100644
--- a/src/components/guide_nav/index.tsx
+++ b/src/components/guide_nav/index.tsx
@@ -27,8 +27,8 @@ const GuideNav = ({ staking }: GuideNavProps) => {
             <Link
               href="/"
               style={{
-                display: "flex",
                 alignItems: "center",
+                display: "flex",
                 height: "100%",
               }}
             >
diff --git a/src/components/intro_card/index.tsx b/src/components/intro_card/index.tsx
index 3b1fd1cc..70a73444 100644
--- a/src/components/intro_card/index.tsx
+++ b/src/components/intro_card/index.tsx
@@ -17,13 +17,13 @@ type Props = {
 };
 
 const IntroCard = ({
-  title,
-  desc,
-  list,
-  imageHref = "",
+  btnLink,
   btnName,
+  desc,
   disabled,
-  btnLink,
+  imageHref = "",
+  list,
+  title,
 }: Props) => (
   <Box className={styles.wrapper} component="div">
     <Box className={styles.imageWrapper}>
diff --git a/src/components/key_data/components/stats/components/stats_card/index.tsx b/src/components/key_data/components/stats/components/stats_card/index.tsx
index 61c55a40..23a155ae 100644
--- a/src/components/key_data/components/stats/components/stats_card/index.tsx
+++ b/src/components/key_data/components/stats/components/stats_card/index.tsx
@@ -6,9 +6,9 @@ import { convertToMoney } from "@src/utils/convert_to_money";
 
 import useStyles from "./useStyles";
 
-const StatsCard = ({ title, stats }: any) => {
+const StatsCard = ({ stats, title }: any) => {
   const styles = useStyles();
-  const { counterValue, counterRef } = useCounter(stats);
+  const { counterRef, counterValue } = useCounter(stats);
   const { t } = useTranslation("common");
 
   return (
diff --git a/src/components/key_data/components/stats/components/stats_card/useStyles.ts b/src/components/key_data/components/stats/components/stats_card/useStyles.ts
index 79e74118..c90cffc4 100644
--- a/src/components/key_data/components/stats/components/stats_card/useStyles.ts
+++ b/src/components/key_data/components/stats/components/stats_card/useStyles.ts
@@ -5,27 +5,27 @@ const useStyles = () => {
 
   return {
     root: css({
-      "display": "flex",
-      "flexDirection": "column",
-      "alignItems": "center",
-      "padding": theme.spacing(4, 3),
-      "background": theme.palette.common.white,
-      "boxShadow":
-        "0px 6px 14px -6px rgba(2, 38, 225, 0.12), 0px 10px 32px -4px rgba(2, 38, 225, 0.1)",
-      "borderRadius": theme.spacing(3),
       "& .MuiTypography-h3": {
-        paddingTop: theme.spacing(2),
-        fontWeight: 700,
+        /* Secondary Color/Gradient/Validator/FB Validator Gradient 04 */
+        background: "linear-gradient(315deg, #EE3131 0%, #FF426B 100%)",
+        backgroundClip: "text",
         fontSize: theme.spacing(3),
+        fontWeight: 700,
+        letterSpacing: "0.0015em",
         lineHeight: "29px",
+        paddingTop: theme.spacing(2),
         /* identical to box height */
         textAlign: "center",
-        letterSpacing: "0.0015em",
-        /* Secondary Color/Gradient/Validator/FB Validator Gradient 04 */
-        background: "linear-gradient(315deg, #EE3131 0%, #FF426B 100%)",
-        backgroundClip: "text",
         textFillColor: "transparent",
       },
+      "alignItems": "center",
+      "background": theme.palette.common.white,
+      "borderRadius": theme.spacing(3),
+      "boxShadow":
+        "0px 6px 14px -6px rgba(2, 38, 225, 0.12), 0px 10px 32px -4px rgba(2, 38, 225, 0.1)",
+      "display": "flex",
+      "flexDirection": "column",
+      "padding": theme.spacing(4, 3),
     }),
   };
 };
diff --git a/src/components/key_data/components/stats/useStyles.ts b/src/components/key_data/components/stats/useStyles.ts
index 889b1572..28cbf618 100644
--- a/src/components/key_data/components/stats/useStyles.ts
+++ b/src/components/key_data/components/stats/useStyles.ts
@@ -6,13 +6,13 @@ const useStyles = () => {
   return {
     grid: css({
       display: "grid",
+      gridGap: theme.spacing(2),
       gridTemplateColumns: "repeat(1, 1fr)",
       gridTemplateRows: "repeat(3, 1fr)",
-      gridGap: theme.spacing(2),
       [theme.breakpoints.up("laptop")]: {
+        gridGap: theme.spacing(3),
         gridTemplateColumns: "repeat(3, 1fr)",
         gridTemplateRows: "repeat(1, 1fr)",
-        gridGap: theme.spacing(3),
       },
     }),
   };
diff --git a/src/components/key_data/index.tsx b/src/components/key_data/index.tsx
index 11f12af3..4eec634f 100644
--- a/src/components/key_data/index.tsx
+++ b/src/components/key_data/index.tsx
@@ -8,11 +8,11 @@ const KeyData = () => {
   return (
     <Stack
       sx={{
-        flex: "1",
-        margin: "0 auto",
-        justifyContent: "center",
         alignItems: "center",
+        flex: "1",
         flexWrap: "wrap",
+        justifyContent: "center",
+        margin: "0 auto",
         [theme.breakpoints.down("laptop")]: {
           flexDirection: "column",
           gap: "24px",
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index c4a0c12a..7ce95152 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -64,7 +64,7 @@ const Layout = ({
     metaTwitterImage = `${url}${metaTwitterImage}`;
   }
 
-  const { t, lang } = useTranslation("common");
+  const { lang, t } = useTranslation("common");
 
   useEffect(() => {
     if (blueBg) {
diff --git a/src/components/layout_val/index.tsx b/src/components/layout_val/index.tsx
index 0c2f94c7..31d47d46 100644
--- a/src/components/layout_val/index.tsx
+++ b/src/components/layout_val/index.tsx
@@ -126,14 +126,14 @@ const LayoutVal = ({
       >
         <Box
           sx={{
-            display: "flex",
-            flexDirection: "column",
-            minHeight: "100vh",
             background: stakingGuide
               ? "url(/images/assets/image_BG_FVH_guide.png)"
               : "url(/images/assets/bg_mobile.webp)",
             backgroundRepeat: "no-repeat",
             backgroundSize: "cover",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "100vh",
             [theme.breakpoints.up("laptop")]: {
               background: stakingGuide
                 ? "url(/images/assets/image_BG_FVH_guide.png)"
diff --git a/src/components/nav/components/company_menu_button/index.tsx b/src/components/nav/components/company_menu_button/index.tsx
index 014d6ff6..195bd2c1 100644
--- a/src/components/nav/components/company_menu_button/index.tsx
+++ b/src/components/nav/components/company_menu_button/index.tsx
@@ -9,16 +9,16 @@ const CompanyMenuButton = () => {
   const menuCompanyList = useMemo(
     () => [
       {
-        name: t("about"),
         link: "/about",
+        name: t("about"),
       },
       {
-        name: t("blog"),
         link: "/blog",
+        name: t("blog"),
       },
       {
-        name: t("contact"),
         link: "/contact",
+        name: t("contact"),
       },
     ],
     [t],
diff --git a/src/components/nav/components/lang_menu_button/index.tsx b/src/components/nav/components/lang_menu_button/index.tsx
index 650353c8..1cca5fa4 100644
--- a/src/components/nav/components/lang_menu_button/index.tsx
+++ b/src/components/nav/components/lang_menu_button/index.tsx
@@ -9,8 +9,8 @@ import MenuList from "../menu_list";
 import * as styles from "./index.module.scss";
 
 const LangMenuButton = () => {
-  const { t, lang } = useTranslation("common");
-  const { locales, asPath } = useRouter();
+  const { lang, t } = useTranslation("common");
+  const { asPath, locales } = useRouter();
   const [anchor, setAnchor] = useState<Element>();
   const theme = useTheme();
   const onClose = useCallback(() => setAnchor(undefined), [setAnchor]);
@@ -21,8 +21,8 @@ const LangMenuButton = () => {
 
   const localeToDisplay = {
     "en": t("en"),
-    "zh-HK": t("zh-HK"),
     "zh-CN": t("zh-CN"),
+    "zh-HK": t("zh-HK"),
   };
 
   const langText = (() => {
@@ -71,16 +71,16 @@ const LangMenuButton = () => {
           }}
           anchorEl={anchor}
           anchorOrigin={{
-            vertical: "bottom",
             horizontal: "right",
+            vertical: "bottom",
           }}
           id="basic-menu"
           keepMounted
           onClose={onClose}
           open={!!anchor}
           transformOrigin={{
-            vertical: "top",
             horizontal: "right",
+            vertical: "top",
           }}
         >
           <MenuList menuList={localesList} />
diff --git a/src/components/nav/components/menu_list/index.tsx b/src/components/nav/components/menu_list/index.tsx
index 1b2a8aa5..243de685 100644
--- a/src/components/nav/components/menu_list/index.tsx
+++ b/src/components/nav/components/menu_list/index.tsx
@@ -17,7 +17,7 @@ type Props = {
   }[];
 };
 
-const MenuList = ({ menuList, className }: Props) => {
+const MenuList = ({ className, menuList }: Props) => {
   const { setAnchorEl } = useContext(anchorElContext);
 
   const handleClose = useCallback(() => {
diff --git a/src/components/nav/components/mobile_nav_menu/index.tsx b/src/components/nav/components/mobile_nav_menu/index.tsx
index 8bd61126..6c613eca 100644
--- a/src/components/nav/components/mobile_nav_menu/index.tsx
+++ b/src/components/nav/components/mobile_nav_menu/index.tsx
@@ -23,7 +23,7 @@ import ProductsMenuButton from "../products_menu_button";
 import * as styles from "./index.module.scss";
 
 const MobileNavMenu = () => {
-  const { t, lang } = useTranslation("common");
+  const { lang, t } = useTranslation("common");
   const theme = useTheme();
   const { windowDimensions } = useWindowDimensions();
   const { width } = windowDimensions;
@@ -40,8 +40,8 @@ const MobileNavMenu = () => {
 
   const langToDisplay = {
     "en": t("en"),
-    "zh-HK": t("zh-HK"),
     "zh-CN": t("zh-CN"),
+    "zh-HK": t("zh-HK"),
   };
 
   const [openDrawer, setOpenDrawer] = useState(false);
@@ -83,8 +83,8 @@ const MobileNavMenu = () => {
         onClick={handleClick}
         sx={{
           [theme.breakpoints.up("laptop")]: {
-            width: theme.spacing(7),
             height: theme.spacing(7),
+            width: theme.spacing(7),
           },
         }}
       >
@@ -103,18 +103,18 @@ const MobileNavMenu = () => {
             sx: {
               backgroundImage: "none",
               borderRadius: theme.spacing(3),
-              width: theme.spacing(27.5),
               left: `${width - width / 4}px` as any,
               [theme.breakpoints.down("laptop")]: {
-                width: "100%",
-                top: "100px!important" as any,
-                left: "0",
-                right: "16px",
-                backgroundColor: "#FFFFFF",
                 background: "rgba(255, 255, 255)",
+                backgroundColor: "#FFFFFF",
                 boxShadow:
                   "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
+                left: "0",
+                right: "16px",
+                top: "100px!important" as any,
+                width: "100%",
               },
+              width: theme.spacing(27.5),
             },
           },
         }}
@@ -134,16 +134,10 @@ const MobileNavMenu = () => {
         </Stack>
         <ListItem
           sx={{
-            "display": "flex",
-            "justifyContent": "space-between",
-            "fontSize": theme.spacing(2),
-            "fontWeight": 700,
-            "height": theme.spacing(7),
-            "padding": theme.spacing(0, 4),
             "> a": {
-              width: "100%",
               textAlign: "left",
               textDecoration: "none",
+              width: "100%",
             },
             "background": openShowProducts
               ? "linear-gradient(139deg, #623DF5 0%, #362187 100%)"
@@ -151,6 +145,12 @@ const MobileNavMenu = () => {
             "color": openShowProducts
               ? theme.palette.common.white
               : theme.palette.custom.forbole.indigo,
+            "display": "flex",
+            "fontSize": theme.spacing(2),
+            "fontWeight": 700,
+            "height": theme.spacing(7),
+            "justifyContent": "space-between",
+            "padding": theme.spacing(0, 4),
           }}
         >
           <Link href="/products" style={{ color: "inherit" }}>
@@ -178,17 +178,10 @@ const MobileNavMenu = () => {
             handlerCLickShowCompany();
           }}
           sx={{
-            "display": "flex",
-            "justifyContent": "space-between",
-            "fontSize": theme.spacing(2),
-            "fontWeight": 700,
-
-            "height": theme.spacing(7),
-            "padding": theme.spacing(0, 4),
             "> a": {
-              width: "100%",
               textAlign: "left",
               textDecoration: "none",
+              width: "100%",
             },
             "background": openShowCompany
               ? "linear-gradient(139deg, #623DF5 0%, #362187 100%)"
@@ -196,6 +189,13 @@ const MobileNavMenu = () => {
             "color": openShowCompany
               ? theme.palette.common.white
               : theme.palette.custom.forbole.indigo,
+            "display": "flex",
+
+            "fontSize": theme.spacing(2),
+            "fontWeight": 700,
+            "height": theme.spacing(7),
+            "justifyContent": "space-between",
+            "padding": theme.spacing(0, 4),
           }}
         >
           <div>{t("Company")}</div>
@@ -212,17 +212,10 @@ const MobileNavMenu = () => {
         <ListItem
           onClick={handleDropdownClick}
           sx={{
-            "display": "flex",
-            "fontSize": theme.spacing(2),
-            "fontWeight": 700,
-            "height": theme.spacing(7),
-            "justifyContent": "space-between",
-            "padding": theme.spacing(0, 4),
-
             "> a": {
-              width: "100%",
               textAlign: "left",
               textDecoration: "none",
+              width: "100%",
             },
             "background": openDrawer
               ? "linear-gradient(139deg, #623DF5 0%, #362187 100%)"
@@ -230,6 +223,13 @@ const MobileNavMenu = () => {
             "color": openDrawer
               ? theme.palette.common.white
               : theme.palette.custom.forbole.indigo,
+            "display": "flex",
+            "fontSize": theme.spacing(2),
+            "fontWeight": 700,
+
+            "height": theme.spacing(7),
+            "justifyContent": "space-between",
+            "padding": theme.spacing(0, 4),
           }}
         >
           <Stack alignItems="center" direction="row" gap="8px">
diff --git a/src/components/nav/components/products_menu_button/index.tsx b/src/components/nav/components/products_menu_button/index.tsx
index d0d6b01e..f388bc47 100644
--- a/src/components/nav/components/products_menu_button/index.tsx
+++ b/src/components/nav/components/products_menu_button/index.tsx
@@ -9,24 +9,24 @@ const ProductsMenuButton = () => {
   const menuProductsList = useMemo(
     () => [
       {
-        name: t("validator-infrastructure"),
         link: "/infrastructure",
+        name: t("validator-infrastructure"),
       },
       {
-        name: t("native-staking-service"),
         link: "/staking-service",
+        name: t("native-staking-service"),
       },
       {
-        name: t("blockchain-data-analytics-tools"),
         link: "/analytics-tools",
+        name: t("blockchain-data-analytics-tools"),
       },
       {
-        name: t("developer-tools"),
         link: "/developer-tools",
+        name: t("developer-tools"),
       },
       {
-        name: t("enterprise-solution"),
         link: "/enterprise-solution",
+        name: t("enterprise-solution"),
       },
     ],
     [t],
diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx
index 601082aa..3b009e89 100644
--- a/src/components/nav/index.tsx
+++ b/src/components/nav/index.tsx
@@ -21,7 +21,7 @@ interface NavProps {
   staking?: boolean;
 }
 
-const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
+const Nav = ({ itemColor, stakeNowRef, staking }: NavProps) => {
   const colors = useColor();
   const { displayBackground } = useNavHook();
   const { t } = useTranslation("staking");
@@ -31,9 +31,9 @@ const Nav = ({ staking, stakeNowRef, itemColor }: NavProps) => {
 
     if (stakeNowRef !== undefined && stakeNowRef.current !== null) {
       window.scrollTo({
+        behavior: "smooth",
         left: 0,
         top: stakeNowRef.current?.offsetTop,
-        behavior: "smooth",
       });
     }
   };
diff --git a/src/components/product-panel/index.tsx b/src/components/product-panel/index.tsx
index 43330568..92eb1aef 100644
--- a/src/components/product-panel/index.tsx
+++ b/src/components/product-panel/index.tsx
@@ -15,7 +15,7 @@ type Props = {
 };
 
 const productPanel = forwardRef<HTMLDivElement, Props>(
-  ({ title, imageHref, children, index, value, imgFull, imageHrefs }, ref) => {
+  ({ children, imageHref, imageHrefs, imgFull, index, title, value }, ref) => {
     const theme = useTheme();
 
     // eslint-disable-next-line eqeqeq
@@ -29,13 +29,13 @@ const productPanel = forwardRef<HTMLDivElement, Props>(
         component="div"
         ref={ref}
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "40px",
-          borderRadius: "40px",
           background:
             "linear-gradient(179deg, #FFF 0%, rgba(255, 255, 255, 0.50) 34.90%, #FFF 100%)",
+          borderRadius: "40px",
           boxShadow: "4px 8px 24px 0px rgba(116, 81, 255, 0.16)",
+          display: "flex",
+          flexDirection: "column",
+          gap: "40px",
           [theme.breakpoints.down("laptop")]: {
             padding: "32px 24px",
           },
@@ -47,9 +47,9 @@ const productPanel = forwardRef<HTMLDivElement, Props>(
         {title && (
           <Typography
             sx={{
+              color: "#202A43",
               fontSize: "24px",
               fontWeight: 700,
-              color: "#202A43",
             }}
           >
             {title}
@@ -69,24 +69,24 @@ const productPanel = forwardRef<HTMLDivElement, Props>(
         >
           <Box
             sx={{
-              "position": "relative",
-              "width": "420px",
-              "height": "max-content",
-              "m": "16px",
-              "borderRadius": "8px",
-              "overflow": "hidden",
-              "boxShadow":
-                "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
               "& img": {
                 display: "block",
                 width: "100%",
               },
+              "borderRadius": "8px",
+              "boxShadow":
+                "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
+              "height": "max-content",
+              "m": "16px",
+              "overflow": "hidden",
+              "position": "relative",
               [theme.breakpoints.down("tablet")]: {
+                boxShadow: imgFull ? "0" : "",
                 m: "8px",
-                width: "auto",
                 mx: imgFull ? "-24px" : "",
-                boxShadow: imgFull ? "0" : "",
+                width: "auto",
               },
+              "width": "420px",
             }}
           >
             {imageHrefs ? (
@@ -110,9 +110,9 @@ const productPanel = forwardRef<HTMLDivElement, Props>(
           </Box>
           <Stack
             sx={{
+              alignItems: "flex-start",
               gap: theme.spacing(4),
               textAlign: "left",
-              alignItems: "flex-start",
             }}
           >
             {children}
diff --git a/src/components/scroll_to_bottom/index.tsx b/src/components/scroll_to_bottom/index.tsx
index f6f394f3..00c2fa8d 100644
--- a/src/components/scroll_to_bottom/index.tsx
+++ b/src/components/scroll_to_bottom/index.tsx
@@ -9,9 +9,9 @@ const ScrollToBottom = ({ bottomRef }: any) => {
     e.preventDefault();
 
     window.scrollTo({
+      behavior: "smooth",
       left: 0,
       top: ref.current.offsetTop - 100,
-      behavior: "smooth",
     });
   };
 
diff --git a/src/components/scroll_to_top/index.tsx b/src/components/scroll_to_top/index.tsx
index 3e1dab21..edb3e9fd 100644
--- a/src/components/scroll_to_top/index.tsx
+++ b/src/components/scroll_to_top/index.tsx
@@ -14,9 +14,9 @@ const ScrollToTop = ({ topRef }: TopProps) => {
       e.preventDefault();
 
       window.scrollTo({
+        behavior: "smooth",
         left: 0,
         top: topRef?.current.offsetTop - 100,
-        behavior: "smooth",
       });
     },
     [topRef],
diff --git a/src/components/section/index.tsx b/src/components/section/index.tsx
index 477fb5df..a4015005 100644
--- a/src/components/section/index.tsx
+++ b/src/components/section/index.tsx
@@ -19,9 +19,9 @@ type Props = {
 const Translate = Trans;
 
 const Section = ({
+  desc,
   maxWidth,
   title,
-  desc,
   title_large,
   title_large_trans,
 }: Props) => (
diff --git a/src/components/selection-tab/index.tsx b/src/components/selection-tab/index.tsx
index eae41b4c..dad8c0a3 100644
--- a/src/components/selection-tab/index.tsx
+++ b/src/components/selection-tab/index.tsx
@@ -16,18 +16,18 @@ export const StyledTabs = styled((props: StyledTabsProps) => (
     TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }}
   />
 ))({
-  "padding": "4px",
-  "borderRadius": "24px",
-  "background": "#1D1E22",
   "& .MuiTabs-indicator": {
+    backgroundColor: "transparent",
     display: "flex",
     justifyContent: "center",
-    backgroundColor: "transparent",
   },
   "& .MuiTabs-indicatorSpan": {
     maxWidth: 40,
     width: "100%",
   },
+  "background": "#1D1E22",
+  "borderRadius": "24px",
+  "padding": "4px",
 });
 
 interface StyledTabProps {
@@ -42,27 +42,27 @@ interface StyledTabProps {
 export const StyledTab = styled((props: StyledTabProps) => (
   <Tab disableRipple {...props} iconPosition="start" />
 ))(({ theme }) => ({
-  "textTransform": "none",
-  "minHeight": "45px",
-  "color": "#fff",
-  "borderRadius": "200px",
-  "fontSize": "16px",
-  "fontWeight": 590,
-  "textShadow": "none",
-  "&.Mui-selected": {
-    background:
-      "linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%),linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%)",
+  "&.Mui-disabled": {
+    boxShadow: "4px 8px 24px 0px rgba(42, 34, 194, 0.16)",
+    color: "#fff",
+    opacity: "0.5",
   },
   "&.Mui-hover": {
     background:
       "linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%),linear-gradient(0deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32))",
     boxShadow: "4px 8px 24px 0px rgba(42, 34, 194, 0.16)",
   },
-  "&.Mui-disabled": {
-    color: "#fff",
-    boxShadow: "4px 8px 24px 0px rgba(42, 34, 194, 0.16)",
-    opacity: "0.5",
+  "&.Mui-selected": {
+    background:
+      "linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%),linear-gradient(175.41deg, #623DF5 11.57%, #362187 173.5%)",
   },
+  "borderRadius": "200px",
+  "color": "#fff",
+  "fontSize": "16px",
+  "fontWeight": 590,
+  "minHeight": "45px",
+  "textShadow": "none",
+  "textTransform": "none",
   [theme.breakpoints.down("laptop")]: {
     fontSize: "12px",
   },
diff --git a/src/components/signature-card/index.tsx b/src/components/signature-card/index.tsx
index 782a1313..7246ba4d 100644
--- a/src/components/signature-card/index.tsx
+++ b/src/components/signature-card/index.tsx
@@ -8,19 +8,19 @@ function SignatureCard() {
   const data = useMemo(
     () => [
       {
-        title: t("websocket_service"),
-        desc: t("rpc"),
         active: true,
+        desc: t("rpc"),
+        title: t("websocket_service"),
       },
       {
-        title: t("archive_node"),
-        desc: t("rpc"),
         active: false,
+        desc: t("rpc"),
+        title: t("archive_node"),
       },
       {
-        title: t("extra_chain"),
-        desc: t("rpc_api_graphql"),
         active: false,
+        desc: t("rpc_api_graphql"),
+        title: t("extra_chain"),
       },
     ],
     [t],
@@ -36,37 +36,37 @@ function SignatureCard() {
         <Grid item key={k} laptop={4} mobile={12}>
           <Stack
             sx={{
-              position: "relative",
-              p: "12px 16px",
-              borderRadius: "16px",
+              alignItems: "center",
               background: "#FFF",
+              borderRadius: "16px",
               boxShadow: "4px 8px 24px 0px rgba(90, 117, 255, 0.24)",
-              alignItems: "center",
+              p: "12px 16px",
+              position: "relative",
             }}
           >
             <Box style={{ width: "100%" }}>
               <Typography
                 sx={{
+                  color: "#202A43",
                   fontSize: "18px",
                   fontStyle: "normal",
                   fontWeight: "590",
-                  lineHeight: "normal",
                   letterSpacing: "-0.8px",
-                  color: "#202A43",
-                  textShadow: "0px 4px 24px rgba(2, 38, 225, 0.24)",
+                  lineHeight: "normal",
                   mb: "8px",
+                  textShadow: "0px 4px 24px rgba(2, 38, 225, 0.24)",
                   whiteSpace: "nowrap",
                 }}
               >
                 {d.title}
               </Typography>
               <Stack
-                sx={{ flexDirection: "row", gap: "5px", alignItems: "center" }}
+                sx={{ alignItems: "center", flexDirection: "row", gap: "5px" }}
               >
                 <img
                   alt=""
                   src="/images/assets/25.svg"
-                  style={{ width: "20px", height: "40px" }}
+                  style={{ height: "40px", width: "20px" }}
                 />
                 <Box>
                   <Typography
@@ -75,10 +75,10 @@ function SignatureCard() {
                       fontSize: "12px",
                       fontStyle: "normal",
                       fontWeight: "400",
-                      lineHeight: "16px",
-                      whiteSpace: "nowrap",
                       letterSpacing: "-0.216px",
+                      lineHeight: "16px",
                       textWrap: "wrap",
+                      whiteSpace: "nowrap",
                     }}
                   >
                     {d.desc}
@@ -89,18 +89,18 @@ function SignatureCard() {
             {d.active && (
               <Stack
                 sx={{
-                  position: "absolute",
-                  top: "-14px",
-                  right: "0",
-                  flexDirection: "row",
-                  padding: "2px 6px",
-                  justifyContent: "center",
                   alignItems: "center",
-                  borderRadius: "28.241px",
+                  background: "#FFF",
                   border:
                     "1px solid var(--gradient-fb-red-gradient-01, #EE3131)",
-                  background: "#FFF",
+                  borderRadius: "28.241px",
+                  flexDirection: "row",
                   gap: "4px",
+                  justifyContent: "center",
+                  padding: "2px 6px",
+                  position: "absolute",
+                  right: "0",
+                  top: "-14px",
                 }}
               >
                 <img alt="√" src="/images/assets/26.svg" />
@@ -110,9 +110,9 @@ function SignatureCard() {
                     fontSize: "12px",
                     fontStyle: "normal",
                     fontWeight: "590",
+                    letterSpacing: "-0.408px",
                     lineHeight: "16px",
                     whiteSpace: "nowrap",
-                    letterSpacing: "-0.408px",
                   }}
                 >
                   {t("unlimited_usage")}
diff --git a/src/components/success-modal/index.tsx b/src/components/success-modal/index.tsx
index 890d174c..7797a253 100644
--- a/src/components/success-modal/index.tsx
+++ b/src/components/success-modal/index.tsx
@@ -21,7 +21,7 @@ type Props = {
 };
 
 const Alert = forwardRef<HTMLDivElement, Omit<Props, "open">>(
-  ({ fixed, close, up_word, middle_word, bottom_word }, ref) => {
+  ({ bottom_word, close, fixed, middle_word, up_word }, ref) => {
     const theme = useTheme();
     const matches = useMediaQuery(theme.breakpoints.down("laptop"));
 
@@ -29,22 +29,22 @@ const Alert = forwardRef<HTMLDivElement, Omit<Props, "open">>(
       <Stack
         ref={ref}
         sx={{
-          width: "823px",
-          padding: "64px",
-          gap: matches ? "24px" : "40px",
-          borderRadius: "24px",
-          margin: fixed ? "164px auto" : "0 auto",
           background:
             "linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.64) 64.58%, #FFF 100%)",
+          borderRadius: "24px",
           boxShadow:
             "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
           color: "#202A43",
+          gap: matches ? "24px" : "40px",
+          margin: fixed ? "164px auto" : "0 auto",
+          padding: "64px",
           [theme.breakpoints.down("laptop")]: {
-            padding: "24px",
-            width: "343px",
             gap: "24px",
             mt: "104px",
+            padding: "24px",
+            width: "343px",
           },
+          width: "823px",
         }}
       >
         <Stack
@@ -71,10 +71,10 @@ const Alert = forwardRef<HTMLDivElement, Omit<Props, "open">>(
             {middle_word && (
               <Typography
                 sx={{
+                  color: "#202A43",
                   fontSize: "16px",
                   fontWeight: 400,
                   lineHeight: "22px",
-                  color: "#202A43",
                   [theme.breakpoints.down("laptop")]: {
                     opacity: "0.6",
                   },
@@ -88,24 +88,24 @@ const Alert = forwardRef<HTMLDivElement, Omit<Props, "open">>(
             <Close
               onClick={() => close?.(false)}
               style={{
+                alignSelf: "flex-start",
+                boxSizing: "content-box",
                 cursor: "pointer",
                 flexShrink: "0",
-                padding: matches ? "8px" : "1em",
-                marginTop: matches ? "-4px" : "0",
                 marginRight: matches ? "-4px" : "0",
-                alignSelf: "flex-start",
-                boxSizing: "content-box",
+                marginTop: matches ? "-4px" : "0",
+                padding: matches ? "8px" : "1em",
               }}
             />
           )}
         </Stack>
         <Box
           sx={{
-            display: "flex",
             borderRadius: "24px",
-            overflow: "hidden",
             boxShadow:
               "0px 10px 32px -4px rgba(96, 60, 238, 0.10), 0px 6px 14px -6px rgba(96, 60, 238, 0.28)",
+            display: "flex",
+            overflow: "hidden",
             [theme.breakpoints.down("laptop")]: {
               borderRadius: "16px",
             },
@@ -141,12 +141,12 @@ const Alert = forwardRef<HTMLDivElement, Omit<Props, "open">>(
 );
 
 export default function SuccessModal({
-  fixed,
+  bottom_word,
   close,
+  fixed,
+  middle_word,
   open,
   up_word,
-  middle_word,
-  bottom_word,
 }: Props) {
   if (!fixed) {
     return (
@@ -169,8 +169,8 @@ export default function SuccessModal({
         backdrop: {
           sx() {
             return {
-              background: "rgba(123, 123, 123, 0.20)",
               backdropFilter: "blur(8px)",
+              background: "rgba(123, 123, 123, 0.20)",
             };
           },
         },
diff --git a/src/components/tags/index.tsx b/src/components/tags/index.tsx
index 72063f55..4468e56d 100644
--- a/src/components/tags/index.tsx
+++ b/src/components/tags/index.tsx
@@ -15,7 +15,7 @@ interface TagsProps {
   tags: BaseTag[];
 }
 
-const Tags = ({ tags, details, noPadding }: TagsProps) => {
+const Tags = ({ details, noPadding, tags }: TagsProps) => {
   const { t } = useTranslation("blog");
   const theme = useTheme();
 
diff --git a/src/components/talk-modal/index.tsx b/src/components/talk-modal/index.tsx
index 3df8d993..f9e00734 100644
--- a/src/components/talk-modal/index.tsx
+++ b/src/components/talk-modal/index.tsx
@@ -43,23 +43,23 @@ interface Props {
 }
 
 const TalkModal = ({
+  canSubmit,
   close,
-  staking,
-  open = false,
-  inputs,
+  handleCheckedChange,
+  handleClear,
   handleInputChange,
   handleSubmit,
-  handleClear,
-  canSubmit,
-  handleCheckedChange,
+  inputs,
   isLoading,
+  open = false,
+  staking,
 }: Props) => {
   const theme = useTheme();
   const { t } = useTranslation("developer_tools");
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleToggle = (e: any) => {
-    const { name, checked } = e.target;
+    const { checked, name } = e.target;
 
     if (name === "Other") {
       if (checked) {
@@ -93,8 +93,8 @@ const TalkModal = ({
         backdrop: {
           sx() {
             return {
-              background: "rgba(123, 123, 123, 0.20)",
               backdropFilter: "blur(8px)",
+              background: "rgba(123, 123, 123, 0.20)",
             };
           },
         },
@@ -105,22 +105,22 @@ const TalkModal = ({
     >
       <Stack
         sx={{
-          width: "1000px",
-          padding: "64px",
-          gap: staking ? "24px" : "40px",
-          borderRadius: "24px",
-          margin: "164px auto",
           background:
             "linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.64) 64.58%, #FFF 100%)",
+          borderRadius: "24px",
           boxShadow:
             "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
           color: "#202A43",
+          gap: staking ? "24px" : "40px",
+          margin: "164px auto",
+          padding: "64px",
           [theme.breakpoints.down("laptop")]: {
-            padding: "24px",
-            width: "343px",
             gap: "24px",
             mt: "104px",
+            padding: "24px",
+            width: "343px",
           },
+          width: "1000px",
         }}
       >
         <Stack direction="row" justifyContent="space-between">
@@ -152,16 +152,16 @@ const TalkModal = ({
             <Close
               onClick={() => close?.(false)}
               style={{
-                flexShrink: "0",
                 border: "8px solid transparent",
                 boxSizing: "content-box",
+                flexShrink: "0",
               }}
             />
           )}
         </Stack>
         <Grid
           container
-          spacing={{ mobile: theme.spacing(3), desktop: theme.spacing(4) }}
+          spacing={{ desktop: theme.spacing(4), mobile: theme.spacing(3) }}
         >
           <Grid item laptop={6} mobile={12}>
             <Typography
@@ -244,12 +244,12 @@ const TalkModal = ({
             <List
               dense
               sx={{
-                width: "100%",
                 borderRadius: "8px",
                 boxShadow:
                   "0px 10px 32px -4px rgba(96, 60, 238, 0.10), 0px 6px 14px -6px rgba(96, 60, 238, 0.28)",
                 overflow: "hidden",
                 py: 0,
+                width: "100%",
               }}
             >
               {selectList.map((value) => (
@@ -267,11 +267,11 @@ const TalkModal = ({
                         name={value.name}
                         onChange={handleToggle}
                         sx={{
-                          "py": "0",
-                          "color": "#AFAFAF",
                           "&.Mui-checked": {
                             color: "#EE3131",
                           },
+                          "color": "#AFAFAF",
+                          "py": "0",
                         }}
                         value={value.name}
                       />
@@ -280,12 +280,12 @@ const TalkModal = ({
                     label={value.label}
                     labelPlacement="start"
                     sx={{
-                      width: "100%",
+                      fontSize: "16px",
                       justifyContent: "space-between",
+                      lineHeight: "30px",
                       m: 0,
                       p: "12px 0",
-                      fontSize: "16px",
-                      lineHeight: "30px",
+                      width: "100%",
                     }}
                   />
                 </ListItem>
@@ -293,10 +293,10 @@ const TalkModal = ({
               <ListItem
                 disablePadding
                 sx={{
-                  "width": "auto",
                   "&:last-child": { borderBottom: "0" },
                   "bgcolor": "#ffffff",
                   "borderBottom": "2px solid rgba(96, 60, 238, 0.28)",
+                  "width": "auto",
                 }}
               >
                 <Input
@@ -308,10 +308,10 @@ const TalkModal = ({
                   placeholder={t("item_5")}
                   ref={inputRef}
                   sx={{
-                    p: "12px",
+                    color: "#878787",
                     fontSize: "16px",
                     lineHeight: "30px",
-                    color: "#878787",
+                    p: "12px",
                   }}
                   value={inputs.specify}
                 />
@@ -325,11 +325,11 @@ const TalkModal = ({
                 control={
                   <Checkbox
                     sx={{
-                      "py": "0",
-                      "color": "#AFAFAF",
                       "&.Mui-checked": {
                         color: "#EE3131",
                       },
+                      "color": "#AFAFAF",
+                      "py": "0",
                     }}
                   />
                 }
@@ -337,10 +337,10 @@ const TalkModal = ({
                 name="agree"
                 onChange={handleCheckedChange}
                 sx={{
+                  alignItems: "flex-start",
+                  lineHeight: "30px",
                   mr: 0,
                   verticalAlign: "top",
-                  lineHeight: "30px",
-                  alignItems: "flex-start",
                 }}
               />
             </FormGroup>
diff --git a/src/hooks/get_screen_size.ts b/src/hooks/get_screen_size.ts
index d6e2b8dc..6c904471 100644
--- a/src/hooks/get_screen_size.ts
+++ b/src/hooks/get_screen_size.ts
@@ -2,18 +2,18 @@ import { useTheme } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const getWindowDimensions = () => {
-  const { innerWidth: width, innerHeight: height } = window;
+  const { innerHeight: height, innerWidth: width } = window;
 
   return {
-    width,
     height,
+    width,
   };
 };
 
 export const useWindowDimensions = () => {
   const [windowDimensions, setWindowDimensions] = useState({
-    width: 0,
     height: 0,
+    width: 0,
   }); // <-- don't invoke the function here
 
   const theme = useTheme();
@@ -63,5 +63,5 @@ export const useWindowDimensions = () => {
     theme?.breakpoints?.values?.laptop,
   ]);
 
-  return { windowDimensions, isDesktop, isTablet, isMobile };
+  return { isDesktop, isMobile, isTablet, windowDimensions };
 };
diff --git a/src/models/post.ts b/src/models/post.ts
index 016d07e4..56783203 100644
--- a/src/models/post.ts
+++ b/src/models/post.ts
@@ -70,22 +70,22 @@ class Post {
     const { excerptLimit = 250 } = options ?? {};
 
     return new Post({
-      id: data.uuid,
-      canonicalUrl: data.canonical_url,
       author: data,
+      canonicalUrl: data.canonical_url,
       createdAt: moment(data.created_at).format("Do MMM YYYY, h:mm a"),
       customExcerpt: data.custom_excerpt,
       excerpt: this.formatExcerpt(data.excerpt, excerptLimit),
+      featured: data.featured,
       featureImage: data.feature_image,
       featureImageCaption: data.feature_image_caption,
-      featured: data.featured,
       html: data.html,
+      id: data.uuid,
+      primaryAuthor: Author.fromJson(data.primary_author),
       publishedAt: moment(data.published_at).format("Do MMM YYYY, h:mm a"),
       slug: data.slug,
+      tags: this.formatTags(data.tags),
       title: data.title,
       visibility: data.visibility,
-      primaryAuthor: Author.fromJson(data.primary_author),
-      tags: this.formatTags(data.tags),
     });
   }
 }
diff --git a/src/models/tag.ts b/src/models/tag.ts
index 4c819929..28f1d31f 100644
--- a/src/models/tag.ts
+++ b/src/models/tag.ts
@@ -18,10 +18,10 @@ class Tag {
 
   static fromJson(data: any) {
     return new Tag({
+      count: { posts: pathOr("", ["count", "posts"], data) },
       name: data.name,
       slug: data.slug ?? data.name,
       url: data.url ?? data.name,
-      count: { posts: pathOr("", ["count", "posts"], data) },
     });
   }
 }
diff --git a/src/pages/api/contact.ts b/src/pages/api/contact.ts
index 631a6d5a..e5ff1afb 100644
--- a/src/pages/api/contact.ts
+++ b/src/pages/api/contact.ts
@@ -11,9 +11,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         {
           devtools:
             "A new customer just wanted to get in touch with us via Developer Tools form",
-          staking: "Inquiry From Forbole Validator Website",
           enterprise:
             "A new customer just wanted to get in touch with us via Contact form",
+          staking: "Inquiry From Forbole Validator Website",
         }[source as string] || "A new enquiry from Forbole's website";
 
       const email =
diff --git a/src/pages/api/subscribe.ts b/src/pages/api/subscribe.ts
index 9bb25401..5f45768c 100644
--- a/src/pages/api/subscribe.ts
+++ b/src/pages/api/subscribe.ts
@@ -10,16 +10,16 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     if (process.env.NODE_ENV === "production") {
       await transporter.sendMail({
         from: inputs.email,
-        to: process.env.SEND_EMAIL_TO || "newsletter@forbole.com",
-        subject: `A new customer: ${sanitize(
-          inputs.email,
-        )} just subscribed our newsletter`,
         html: `
 <p>Dear Administrator,</p>
 <p>A new customer: ${sanitize(inputs.email)} just subscribed our newsletter.</p>
 <p>Regards,</p>
 <p>Forbole web system</p>
 `,
+        subject: `A new customer: ${sanitize(
+          inputs.email,
+        )} just subscribed our newsletter`,
+        to: process.env.SEND_EMAIL_TO || "newsletter@forbole.com",
       });
     }
 
diff --git a/src/pages/author/[author]/index.tsx b/src/pages/author/[author]/index.tsx
index c931fc49..02262669 100644
--- a/src/pages/author/[author]/index.tsx
+++ b/src/pages/author/[author]/index.tsx
@@ -54,11 +54,11 @@ export async function getServerSideProps(context: { query: any }) {
   return {
     props: {
       author: JSON.parse(JSON.stringify(authorInfo)),
+      error,
+      meta: JSON.parse(JSON.stringify(meta)),
       post: JSON.parse(JSON.stringify(authorPosts)),
-      tags: JSON.parse(JSON.stringify(formattedTags)),
       sidePosts: JSON.parse(JSON.stringify(formattedSidePosts)),
-      meta: JSON.parse(JSON.stringify(meta)),
-      error,
+      tags: JSON.parse(JSON.stringify(formattedTags)),
     },
   };
 }
diff --git a/src/pages/blog/[title]/index.tsx b/src/pages/blog/[title]/index.tsx
index f72b165c..cee642a1 100644
--- a/src/pages/blog/[title]/index.tsx
+++ b/src/pages/blog/[title]/index.tsx
@@ -28,7 +28,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
         path.params.title && !path.params.title.startsWith(stakingGuidePrefix),
     );
 
-  return { paths, fallback: true };
+  return { fallback: true, paths };
 };
 
 export const getStaticProps: GetStaticProps<
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index ac9b8ad1..5e71934a 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -50,11 +50,11 @@ export async function getServerSideProps(context: { query: any }) {
 
   return {
     props: {
+      error,
+      meta: JSON.parse(JSON.stringify(meta)),
       posts: JSON.parse(JSON.stringify(formattedPosts)),
-      tags: JSON.parse(JSON.stringify(formattedTags)),
       sidePosts: JSON.parse(JSON.stringify(formattedSidePosts)),
-      meta: JSON.parse(JSON.stringify(meta)),
-      error,
+      tags: JSON.parse(JSON.stringify(formattedTags)),
     },
   };
 }
diff --git a/src/pages/staking/[title]/index.tsx b/src/pages/staking/[title]/index.tsx
index fcb85bc0..a4a62199 100644
--- a/src/pages/staking/[title]/index.tsx
+++ b/src/pages/staking/[title]/index.tsx
@@ -31,7 +31,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
         path.params.title && path.params.title.startsWith(stakingGuidePrefix),
     );
 
-  return { paths, fallback: true };
+  return { fallback: true, paths };
 };
 
 export const getStaticProps: GetStaticProps<
diff --git a/src/pages/tag/[tag]/[page].tsx b/src/pages/tag/[tag]/[page].tsx
index 579841b4..aa0591ae 100644
--- a/src/pages/tag/[tag]/[page].tsx
+++ b/src/pages/tag/[tag]/[page].tsx
@@ -60,11 +60,11 @@ export async function getServerSideProps(context: { query: any }) {
 
   return {
     props: {
+      error,
+      meta: JSON.parse(JSON.stringify(meta)),
       post: JSON.parse(JSON.stringify(formattedPost)),
-      tags: JSON.parse(JSON.stringify(formattedTags)),
       sidePosts: JSON.parse(JSON.stringify(formattedSidePosts)),
-      meta: JSON.parse(JSON.stringify(meta)),
-      error,
+      tags: JSON.parse(JSON.stringify(formattedTags)),
     },
   };
 }
diff --git a/src/pages/tag/[tag]/index.tsx b/src/pages/tag/[tag]/index.tsx
index e2d4f4d7..4fff29ac 100644
--- a/src/pages/tag/[tag]/index.tsx
+++ b/src/pages/tag/[tag]/index.tsx
@@ -24,7 +24,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
     )
     .flat();
 
-  return { paths, fallback: "blocking" };
+  return { fallback: "blocking", paths };
 };
 
 export const getStaticProps: GetStaticProps<any, { tag: string }> = async (
@@ -69,11 +69,11 @@ export const getStaticProps: GetStaticProps<any, { tag: string }> = async (
 
   return {
     props: {
+      error,
+      meta: JSON.parse(JSON.stringify(meta)),
       post: JSON.parse(JSON.stringify(formattedPost)),
-      tags: JSON.parse(JSON.stringify(formattedTags)),
       sidePosts: JSON.parse(JSON.stringify(formattedSidePosts)),
-      meta: JSON.parse(JSON.stringify(meta)),
-      error,
+      tags: JSON.parse(JSON.stringify(formattedTags)),
     },
   };
 };
diff --git a/src/screens/Infrastructure/index.tsx b/src/screens/Infrastructure/index.tsx
index dd7b01c8..9440e31b 100644
--- a/src/screens/Infrastructure/index.tsx
+++ b/src/screens/Infrastructure/index.tsx
@@ -46,64 +46,64 @@ const Infrastructure = () => {
     if (onlyLargeScreen) {
       return [
         {
-          name: "Michael McCaffrey",
-          position: "Lead Business Developer, Coreum",
           desc: `Forbole is an exceptional SaaS provider that offers valuable solutions, especially within the Cosmos
           ecosystem. Their expertise and commitment to delivering high-quality services have greatly benefited the
           Coreum blockchain. Their team has been responsive, knowledgeable, and efficient in addressing our
           needs and ensuring a seamless experience. I highly recommend Forbole to anyone seeking reliable and
           innovative SaaS solutions.`,
           img: "/icons/Michael McCaffrey-Coreum.png",
+          name: "Michael McCaffrey",
+          position: "Lead Business Developer, Coreum",
         },
         {
-          name: "Boz Menzalji",
-          position: "COO of Overclock Labs, creator of Akash Network",
           desc: `Forbole's team has been a reliable partner from the earliest days for Akash Network, allowing us to tap
           into deep know-how for testnets, mainnet upgrades, and more. The tools they have contributed to the
           ecosystem, such as Big Dipper's Explorer, has been a great value-add to our growing ecosystem. We are
           fortunate to have a great partner with Forbole.`,
           img: "/icons/person_avatar.png",
+          name: "Boz Menzalji",
+          position: "COO of Overclock Labs, creator of Akash Network",
         },
         {
-          name: "Calin Pasat",
-          position: "Node Foundation Director, Humans.ai",
           desc: `Working with Forbole has been an enlightening experience. As validators, they are reliably efficient, but
           it's their commitment to contributing to the broader ecosystem that truly sets them apart with open-source
           tools like Big Dipper Explorer. Their forward-thinking nature is evident in their proactive involvement in
           various projects, reflecting a deep understanding and a promising vision for the blockchain industry.`,
           img: "/icons/Calin Pasat-humansai.png",
+          name: "Calin Pasat",
+          position: "Node Foundation Director, Humans.ai",
         },
       ];
     }
 
     return [
       {
-        name: "Boz Menzalji",
-        position: "COO of Overclock Labs, creator of Akash Network",
         desc: `Forbole's team has been a reliable partner from the earliest days for Akash Network, allowing us to tap
             into deep know-how for testnets, mainnet upgrades, and more. The tools they have contributed to the
             ecosystem, such as Big Dipper's Explorer, has been a great value-add to our growing ecosystem. We are
             fortunate to have a great partner with Forbole.`,
         img: "/icons/person_avatar.png",
+        name: "Boz Menzalji",
+        position: "COO of Overclock Labs, creator of Akash Network",
       },
       {
-        name: "Michael McCaffrey",
-        position: "Lead Business Developer, Coreum",
         desc: `Forbole is an exceptional SaaS provider that offers valuable solutions, especially within the Cosmos
             ecosystem. Their expertise and commitment to delivering high-quality services have greatly benefited the
             Coreum blockchain. Their team has been responsive, knowledgeable, and efficient in addressing our
             needs and ensuring a seamless experience. I highly recommend Forbole to anyone seeking reliable and
             innovative SaaS solutions.`,
         img: "/icons/Michael McCaffrey-Coreum.png",
+        name: "Michael McCaffrey",
+        position: "Lead Business Developer, Coreum",
       },
       {
-        name: "Calin Pasat",
-        position: "Node Foundation Director, Humans.ai",
         desc: `Working with Forbole has been an enlightening experience. As validators, they are reliably efficient, but
             it's their commitment to contributing to the broader ecosystem that truly sets them apart with open-source
             tools like Big Dipper Explorer. Their forward-thinking nature is evident in their proactive involvement in
             various projects, reflecting a deep understanding and a promising vision for the blockchain industry.`,
         img: "/icons/Calin Pasat-humansai.png",
+        name: "Calin Pasat",
+        position: "Node Foundation Director, Humans.ai",
       },
     ];
   }, [onlyLargeScreen]);
@@ -152,8 +152,8 @@ const Infrastructure = () => {
           <KeyData />
           <Stack
             sx={{
-              gap: "40px",
               alignItems: "center",
+              gap: "40px",
               [theme.breakpoints.down("laptop")]: {
                 gap: "32px",
               },
@@ -171,13 +171,13 @@ const Infrastructure = () => {
             </Link>
             <Grid
               columnSpacing={{
-                mobile: theme.spacing(2),
                 laptop: theme.spacing(2),
+                mobile: theme.spacing(2),
               }}
               container
               rowSpacing={{
-                mobile: theme.spacing(2),
                 laptop: theme.spacing(3),
+                mobile: theme.spacing(2),
               }}
             >
               <Grid item laptop={4} mobile={12} tablet={6}>
@@ -214,8 +214,8 @@ const Infrastructure = () => {
 
           <Stack
             sx={{
-              gap: "40px",
               alignItems: "center",
+              gap: "40px",
               [theme.breakpoints.down("laptop")]: {
                 gap: "32px",
               },
@@ -255,8 +255,8 @@ const Infrastructure = () => {
               />
             </StyledTabs>
             {[
-              { title: "infrastructure_item", img: "desk_toggle_1@2x.png" },
-              { title: "expertise_item", img: "desk_toggle_2@2x.png" },
+              { img: "desk_toggle_1@2x.png", title: "infrastructure_item" },
+              { img: "desk_toggle_2@2x.png", title: "expertise_item" },
             ].map((opt, indexUpper) => (
               <ProductPanel
                 imageHref={`/validator_infastructure/${opt.img}`}
@@ -276,8 +276,12 @@ const Infrastructure = () => {
                     <Typography
                       key={index}
                       sx={{
-                        "display": "flex",
+                        "&:before": {
+                          content: "url(/icons/outlined.svg)",
+                          marginRight: "16px",
+                        },
                         "alignItems": "baseline",
+                        "display": "flex",
                         "maxWidth": "489px",
                         [theme.breakpoints.down("laptop")]: {
                           fontSize: "16px",
@@ -285,10 +289,6 @@ const Infrastructure = () => {
                         [theme.breakpoints.up("laptop")]: {
                           fontSize: "20px",
                         },
-                        "&:before": {
-                          content: "url(/icons/outlined.svg)",
-                          marginRight: "16px",
-                        },
                       }}
                     >
                       {item}
@@ -301,8 +301,8 @@ const Infrastructure = () => {
 
           <Stack
             sx={{
-              gap: "40px",
               alignItems: "center",
+              gap: "40px",
               [theme.breakpoints.down("laptop")]: {
                 gap: "32px",
               },
diff --git a/src/screens/about/index.tsx b/src/screens/about/index.tsx
index d7436308..06074018 100644
--- a/src/screens/about/index.tsx
+++ b/src/screens/about/index.tsx
@@ -110,8 +110,8 @@ const About = () => {
                 }}
                 breakpoints={{
                   1023: {
-                    spaceBetween: 16,
                     centeredSlides: false,
+                    spaceBetween: 16,
                   },
                 }}
                 centeredSlides
diff --git a/src/screens/app/index.tsx b/src/screens/app/index.tsx
index 0de3d1f5..8ed8e9df 100644
--- a/src/screens/app/index.tsx
+++ b/src/screens/app/index.tsx
@@ -26,8 +26,8 @@ export default function MyApp({
 }: MyAppProps) {
   useEffect(() => {
     init({
-      url: MATOMO_URL,
       siteId: MATOMO_SITE_ID,
+      url: MATOMO_URL,
     });
   }, []);
 
diff --git a/src/screens/app/innerApp/index.tsx b/src/screens/app/innerApp/index.tsx
index 7d1c4505..6685be57 100644
--- a/src/screens/app/innerApp/index.tsx
+++ b/src/screens/app/innerApp/index.tsx
@@ -5,7 +5,7 @@ import "react-toastify/dist/ReactToastify.css";
 
 import { lightTemplate } from "@src/styles";
 
-const InnerApp = ({ pageProps, Component }: any) => {
+const InnerApp = ({ Component, pageProps }: any) => {
   const muiTheme = createTheme(lightTemplate);
 
   return (
diff --git a/src/screens/author/components/author_posts/index.tsx b/src/screens/author/components/author_posts/index.tsx
index 131ba712..d9d939cb 100644
--- a/src/screens/author/components/author_posts/index.tsx
+++ b/src/screens/author/components/author_posts/index.tsx
@@ -12,7 +12,7 @@ interface IProps {
   meta: AuthorMeta;
 }
 
-const AuthorPosts = ({ main, blogs, meta }: IProps) => {
+const AuthorPosts = ({ blogs, main, meta }: IProps) => {
   const currentPage = meta.pagination?.page || 0;
   const totalPages = meta.pagination?.pages || 0;
 
diff --git a/src/screens/author/index.tsx b/src/screens/author/index.tsx
index 5ff16737..b91acd26 100644
--- a/src/screens/author/index.tsx
+++ b/src/screens/author/index.tsx
@@ -16,10 +16,10 @@ type Props = {
   tags: any;
 };
 
-const AuthorTitlePosts = ({ post, tags, author, meta }: Props) => {
+const AuthorTitlePosts = ({ author, meta, post, tags }: Props) => {
   const { t } = useTranslation("blog");
 
-  const { featureImage, excerpt, error } = post;
+  const { error, excerpt, featureImage } = post;
 
   useBlogHook(error, t);
 
@@ -42,21 +42,21 @@ const AuthorTitlePosts = ({ post, tags, author, meta }: Props) => {
               "@type": "ProfilePage",
               "mainEntity": {
                 "@type": "Person",
-                "name": author.name,
+                "agentInteractionStatistic": {
+                  "@type": "InteractionCounter",
+                  "interactionType": "https://schema.org/WriteAction",
+                  "userInteractionCount": meta.pagination?.total,
+                },
                 "alternateName": author.slug,
-                "identifier": author.id,
-                "url": `https://www.forbole.com/author/${author.slug}/`,
-                "image": author.profile_image,
                 "brand": {
                   "@type": "Organization",
                   "name": "Forbole",
                   "url": "https://www.forbole.com/",
                 },
-                "agentInteractionStatistic": {
-                  "@type": "InteractionCounter",
-                  "interactionType": "https://schema.org/WriteAction",
-                  "userInteractionCount": meta.pagination?.total,
-                },
+                "identifier": author.id,
+                "image": author.profile_image,
+                "name": author.name,
+                "url": `https://www.forbole.com/author/${author.slug}/`,
               },
             }),
           }}
diff --git a/src/screens/blog/components/blog_posts/components/post/index.tsx b/src/screens/blog/components/blog_posts/components/post/index.tsx
index 01467451..19c9168e 100644
--- a/src/screens/blog/components/blog_posts/components/post/index.tsx
+++ b/src/screens/blog/components/blog_posts/components/post/index.tsx
@@ -11,13 +11,13 @@ import useHKT from "@src/hooks/useHKT";
 
 import * as styles from "./index.module.scss";
 
-const Post = ({ post, main = false, refProp }: any) => {
+const Post = ({ main = false, post, refProp }: any) => {
   const { t } = useTranslation("blog");
   const { isDesktop, isMobile } = useWindowDimensions();
 
-  const { featureImage, title, excerpt, publishedAt, slug, author } = post;
+  const { author, excerpt, featureImage, publishedAt, slug, title } = post;
 
-  const cmsLoader = ({ src, width, quality }: any) =>
+  const cmsLoader = ({ quality, src, width }: any) =>
     `${src}?w=${width}&q=${quality || 75}`;
 
   const time = useHKT(publishedAt);
diff --git a/src/screens/blog/components/blog_posts/index.tsx b/src/screens/blog/components/blog_posts/index.tsx
index 0e7ebc96..06ab7245 100644
--- a/src/screens/blog/components/blog_posts/index.tsx
+++ b/src/screens/blog/components/blog_posts/index.tsx
@@ -11,12 +11,12 @@ import { useBlogPostsHook } from "./hooks";
 import * as styles from "./index.module.scss";
 import type { IProps } from "./interface";
 
-const BlogPosts = ({ main, blogs: blogsUpper, meta }: IProps) => {
+const BlogPosts = ({ blogs: blogsUpper, main, meta }: IProps) => {
   const { t } = useTranslation("blog");
   const router = useRouter();
   const theme = useTheme();
 
-  const { windowDimensions, isMobile } = useWindowDimensions();
+  const { isMobile, windowDimensions } = useWindowDimensions();
   const { width } = windowDimensions;
 
   const currentPage = pathOr(0, ["pagination", "page"], meta);
@@ -41,7 +41,7 @@ const BlogPosts = ({ main, blogs: blogsUpper, meta }: IProps) => {
     [lastView, isMobile],
   );
 
-  const seeMorePages = (_e: any, { limit, blogs }: any) => {
+  const seeMorePages = (_e: any, { blogs, limit }: any) => {
     const lastPost = blogs.length;
 
     if (limit + 15 >= totalPosts) {
@@ -62,49 +62,49 @@ const BlogPosts = ({ main, blogs: blogsUpper, meta }: IProps) => {
     desktop: {
       breakpoint: { max: 3000, min: 1100 },
     },
-    tablet: {
-      breakpoint: { max: 1100, min: 464 },
-    },
     mobile: {
       breakpoint: { max: 464, min: 0 },
     },
+    tablet: {
+      breakpoint: { max: 1100, min: 464 },
+    },
   };
 
   const paginationStyle = {
     sx: {
+      "& .MuiPaginationItem-firstLast": {
+        background: "rgba(239, 239, 239, 1)",
+        color: "rgba(52, 56, 62, 1)",
+        opacity: 1,
+      },
+      "& .MuiPaginationItem-previousNext": {
+        background: "rgba(239, 239, 239, 1)",
+        color: "rgba(52, 56, 62, 1)",
+        opacity: 1,
+      },
       "& .MuiPaginationItem-root": {
         color: theme.palette.primary.main,
       },
       "& .MuiPaginationItem-root.Mui-disabled": {
-        opacity: 1,
         background: "rgba(239, 239, 239, 1)",
         color: "rgba(175, 175, 175, 1)",
+        opacity: 1,
       },
       "& .MuiPaginationItem-root.Mui-selected": {
         backgroundColor: theme.palette.custom.forbole.purple,
         color: theme.palette.primary.main,
       },
-      "& .MuiPaginationItem-previousNext": {
-        opacity: 1,
-        background: "rgba(239, 239, 239, 1)",
-        color: "rgba(52, 56, 62, 1)",
-      },
-      "& .MuiPaginationItem-firstLast": {
-        opacity: 1,
-        background: "rgba(239, 239, 239, 1)",
-        color: "rgba(52, 56, 62, 1)",
-      },
       [theme.breakpoints.down("tablet")]: {
         display: "none",
         margin: theme.spacing(32, 0),
       },
-      [theme.breakpoints.up("tablet")]: {
-        paddingTop: theme.spacing(7),
-      },
       [theme.breakpoints.up("laptop")]: {
         height: "366px",
         zIndex: 3,
       },
+      [theme.breakpoints.up("tablet")]: {
+        paddingTop: theme.spacing(7),
+      },
     },
   };
 
@@ -137,7 +137,7 @@ const BlogPosts = ({ main, blogs: blogsUpper, meta }: IProps) => {
         <Button
           className={styles.seeMore}
           onClick={(e) =>
-            seeMorePages(e, { limit: limitUpper, blogs: blogsUpper })
+            seeMorePages(e, { blogs: blogsUpper, limit: limitUpper })
           }
           variant="text"
         >
diff --git a/src/screens/blog/index.tsx b/src/screens/blog/index.tsx
index 9391bf69..1c46a4b0 100644
--- a/src/screens/blog/index.tsx
+++ b/src/screens/blog/index.tsx
@@ -13,11 +13,11 @@ import { useBlogHook } from "./hooks";
 import * as styles from "./index.module.scss";
 
 const Blog = ({
-  posts = [],
+  error,
   meta = {},
-  tags = [],
+  posts = [],
   sidePosts = [],
-  error,
+  tags = [],
 }: any) => {
   const { t } = useTranslation("blog");
   const topRef = useRef(null);
diff --git a/src/screens/blog_details/components/social_media/index.tsx b/src/screens/blog_details/components/social_media/index.tsx
index 233580b8..3fac91ca 100644
--- a/src/screens/blog_details/components/social_media/index.tsx
+++ b/src/screens/blog_details/components/social_media/index.tsx
@@ -12,17 +12,17 @@ const SocialMedia = ({ title = "Forbole " }: any) => {
 
   const handleClick = (url: string) => {
     const config: { [key: string]: number | string } = {
+      centerscreen: "yes",
+      chrome: "yes",
+      directories: "no",
       height: 400,
-      width: 550,
       location: "no",
-      toolbar: "no",
-      status: "no",
-      directories: "no",
       menubar: "no",
-      scrollbars: "yes",
       resizable: "no",
-      centerscreen: "yes",
-      chrome: "yes",
+      scrollbars: "yes",
+      status: "no",
+      toolbar: "no",
+      width: 550,
     };
 
     window.open(
diff --git a/src/screens/contact/hooks.tsx b/src/screens/contact/hooks.tsx
index 7c2ad41c..b9fd8aa9 100644
--- a/src/screens/contact/hooks.tsx
+++ b/src/screens/contact/hooks.tsx
@@ -8,16 +8,16 @@ import isEmail from "validator/lib/isEmail";
 
 const useContactForm = () => {
   const [inputs, setInputs] = useState({
-    name: "",
-    email: "",
-    company: "",
-    telegram: "",
     agree: false,
-    specify: "",
+    careers: false,
     collaboration: false,
+    company: "",
+    email: "",
     enterprise_solution: false,
-    careers: false,
+    name: "",
     other: false,
+    specify: "",
+    telegram: "",
   });
 
   const [canSubmit, setCanSubmit] = useState(false);
@@ -76,8 +76,6 @@ const useContactForm = () => {
       axios
         .post("/api/contact", {
           from: inputs.email,
-          subject:
-            "A new customer just wanted to get in touch with us via Enterprise form",
           html: `
           <p>Dear Administrator,</p>
           <p>A new customer: ${sanitize(
@@ -93,20 +91,22 @@ const useContactForm = () => {
           <p>Regards,</p>
           <p>Forbole web system</p>
           `,
+          subject:
+            "A new customer just wanted to get in touch with us via Enterprise form",
         })
         .then((res) => {
           if (res.status === 200) {
             setInputs({
-              name: "",
-              email: "",
-              company: "",
-              telegram: "",
               agree: false,
+              careers: false,
               collaboration: false,
+              company: "",
+              email: "",
               enterprise_solution: false,
-              careers: false,
+              name: "",
               other: false,
               specify: "",
+              telegram: "",
             });
           }
 
@@ -132,7 +132,7 @@ const useContactForm = () => {
   };
 
   const handleCheckedChange = (event: any) => {
-    const { name, checked } = event.target;
+    const { checked, name } = event.target;
 
     setInputs((input) => ({
       ...input,
@@ -148,16 +148,16 @@ const useContactForm = () => {
   };
 
   return {
-    handleSubmit,
-    handleInputChange,
+    canSubmit,
+    handleCheckedChange,
     handleClear,
+    handleInputChange,
+    handleSubmit,
     inputs,
+    isLoading,
     setInputs,
-    canSubmit,
-    handleCheckedChange,
-    success,
     setSuccess,
-    isLoading,
+    success,
   };
 };
 
diff --git a/src/screens/contact/index.tsx b/src/screens/contact/index.tsx
index ba037a28..60c5272c 100644
--- a/src/screens/contact/index.tsx
+++ b/src/screens/contact/index.tsx
@@ -28,15 +28,15 @@ const Contact = () => {
   const { t } = useTranslation("contact");
 
   const {
-    inputs,
-    handleInputChange,
-    handleSubmit,
-    handleClear,
     canSubmit,
     handleCheckedChange,
-    success,
-    setSuccess,
+    handleClear,
+    handleInputChange,
+    handleSubmit,
+    inputs,
     isLoading,
+    setSuccess,
+    success,
   } = useContactForm();
 
   const theme = useTheme();
@@ -51,7 +51,7 @@ const Contact = () => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleToggle = (e: any) => {
-    const { name, checked } = e.target;
+    const { checked, name } = e.target;
 
     if (name === "other") {
       if (checked) {
@@ -92,7 +92,7 @@ const Contact = () => {
           </Stack>
           <Grid
             container
-            spacing={{ mobile: theme.spacing(3), desktop: theme.spacing(4) }}
+            spacing={{ desktop: theme.spacing(4), mobile: theme.spacing(3) }}
           >
             <Grid item laptop={6} mobile={12}>
               <Typography className={styles.label}>
diff --git a/src/screens/developer_tools/hooks.tsx b/src/screens/developer_tools/hooks.tsx
index ec279a53..ea7c834a 100644
--- a/src/screens/developer_tools/hooks.tsx
+++ b/src/screens/developer_tools/hooks.tsx
@@ -8,16 +8,16 @@ import isEmail from "validator/lib/isEmail";
 
 const useTalkModalForm = () => {
   const [inputs, setInputs] = useState({
-    "name": "",
-    "email": "",
-    "company": "",
-    "telegram": "",
-    "specify": "",
     "agree": false,
+    "company": "",
     "Data API": false,
+    "email": "",
     "GraphQL": false,
+    "name": "",
     "Other": false,
     "RPC Endpoints": false,
+    "specify": "",
+    "telegram": "",
   });
 
   const [canSubmit, setCanSubmit] = useState(false);
@@ -71,7 +71,6 @@ const useTalkModalForm = () => {
       axios
         .post("/api/contact", {
           from: inputs.email,
-          source: "devtools",
           html: `
           <p>Dear Administrator,</p>
           <p>A new customer: ${sanitize(
@@ -87,20 +86,21 @@ const useTalkModalForm = () => {
           <p>Regards,</p>
           <p>Forbole web system</p>
           `,
+          source: "devtools",
         })
         .then((res) => {
           if (res.status === 200) {
             setInputs({
-              "name": "",
-              "email": "",
-              "company": "",
-              "telegram": "",
               "agree": false,
-              "specify": "",
+              "company": "",
               "Data API": false,
+              "email": "",
               "GraphQL": false,
+              "name": "",
               "Other": false,
               "RPC Endpoints": false,
+              "specify": "",
+              "telegram": "",
             });
           }
 
@@ -126,7 +126,7 @@ const useTalkModalForm = () => {
   };
 
   const handleCheckedChange = (event: any) => {
-    const { name, checked } = event.target;
+    const { checked, name } = event.target;
 
     setInputs((input) => ({
       ...input,
@@ -142,16 +142,16 @@ const useTalkModalForm = () => {
   };
 
   return {
-    handleSubmit,
-    handleInputChange,
+    canSubmit,
+    handleCheckedChange,
     handleClear,
+    handleInputChange,
+    handleSubmit,
     inputs,
+    isLoading,
     setInputs,
-    canSubmit,
-    handleCheckedChange,
-    success,
     setSuccess,
-    isLoading,
+    success,
   };
 };
 
diff --git a/src/screens/developer_tools/index.tsx b/src/screens/developer_tools/index.tsx
index 7871cfd8..78a3ba44 100644
--- a/src/screens/developer_tools/index.tsx
+++ b/src/screens/developer_tools/index.tsx
@@ -26,15 +26,15 @@ import * as styles from "./index.module.scss";
 
 const DeveloperTools = () => {
   const {
-    inputs,
-    handleInputChange,
-    handleSubmit,
-    handleClear,
     canSubmit,
     handleCheckedChange,
-    success,
-    setSuccess,
+    handleClear,
+    handleInputChange,
+    handleSubmit,
+    inputs,
     isLoading,
+    setSuccess,
+    success,
   } = useTalkModalForm();
 
   const { t } = useTranslation("developer_tools");
diff --git a/src/screens/enterprise_solution/hook.ts b/src/screens/enterprise_solution/hook.ts
index 4869f7f0..54269ff2 100644
--- a/src/screens/enterprise_solution/hook.ts
+++ b/src/screens/enterprise_solution/hook.ts
@@ -8,10 +8,10 @@ import isEmail from "validator/lib/isEmail";
 
 const useContactForm = () => {
   const [inputs, setInputs] = useState({
-    name: "",
-    email: "",
     company: "",
+    email: "",
     help: "",
+    name: "",
   });
 
   const [canSubmit, setCanSubmit] = useState(false);
@@ -36,7 +36,6 @@ const useContactForm = () => {
       axios
         .post("/api/contact", {
           from: inputs.email,
-          source: "enterprise",
           html: `
           <p>Dear Administrator,</p>
           <p>A new customer: ${sanitize(inputs.email)} contacted us today.</p>
@@ -48,14 +47,15 @@ const useContactForm = () => {
           <p>Regards,</p>
           <p>Forbole web system</p>
           `,
+          source: "enterprise",
         })
         .then((res) => {
           if (res.status === 200) {
             setInputs({
-              name: "",
-              email: "",
               company: "",
+              email: "",
               help: "",
+              name: "",
             });
           }
 
@@ -97,16 +97,16 @@ const useContactForm = () => {
   };
 
   return {
-    handleSubmit,
-    handleInputChange,
+    canSubmit,
+    handleCheckedChange,
     handleClear,
+    handleInputChange,
+    handleSubmit,
     inputs,
+    isLoading,
     setInputs,
-    canSubmit,
-    handleCheckedChange,
-    success,
     setSuccess,
-    isLoading,
+    success,
   };
 };
 
diff --git a/src/screens/enterprise_solution/index.tsx b/src/screens/enterprise_solution/index.tsx
index 856e9c5e..16ef2289 100644
--- a/src/screens/enterprise_solution/index.tsx
+++ b/src/screens/enterprise_solution/index.tsx
@@ -17,13 +17,13 @@ import * as styles from "./index.module.scss";
 
 const EnterpriseSolution = () => {
   const {
-    inputs,
+    canSubmit,
     handleInputChange,
     handleSubmit,
-    canSubmit,
-    success,
-    setSuccess,
+    inputs,
     isLoading,
+    setSuccess,
+    success,
   } = useContactForm();
 
   const topRef = useRef(null);
@@ -40,9 +40,9 @@ const EnterpriseSolution = () => {
     e.preventDefault();
 
     window.scrollTo({
+      behavior: "smooth",
       left: 0,
       top: ref.current.offsetTop - 100,
-      behavior: "smooth",
     });
   };
 
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
index c7441cab..4c0e1ad1 100644
--- a/src/screens/home/index.tsx
+++ b/src/screens/home/index.tsx
@@ -69,9 +69,9 @@ const Home: FC<Props> = ({ pages }) => {
         >
           <Typography className={styles.title}>{t("title")}</Typography>
           <Grid
-            columnSpacing={{ mobile: "0", laptop: theme.spacing(2) }}
+            columnSpacing={{ laptop: theme.spacing(2), mobile: "0" }}
             container
-            rowSpacing={{ mobile: theme.spacing(2), laptop: theme.spacing(3) }}
+            rowSpacing={{ laptop: theme.spacing(3), mobile: theme.spacing(2) }}
           >
             <Grid item laptop={8} mobile={12}>
               <IntroPanel
@@ -153,7 +153,7 @@ const Home: FC<Props> = ({ pages }) => {
             spacing={theme.spacing(2)}
           >
             {filteredPages.map(
-              ({ title, list, imageHref, btnName, btnClick, id }, idx) => (
+              ({ btnClick, btnName, id, imageHref, list, title }, idx) => (
                 <Grid item key={`${id}_${idx}`} laptop={4} mobile={12}>
                   <IntroCard
                     btnLink={btnClick}
diff --git a/src/screens/network_guides/components/guide/index.tsx b/src/screens/network_guides/components/guide/index.tsx
index 44f22116..0f34bb48 100644
--- a/src/screens/network_guides/components/guide/index.tsx
+++ b/src/screens/network_guides/components/guide/index.tsx
@@ -51,8 +51,8 @@ const Guide = ({ post }: { post: PostDetail }) => {
           i18nKey="staking title"
           ns="staking"
           values={{
-            title1: titleArray.slice(0, 1).join(" "),
             coloredTitle,
+            title1: titleArray.slice(0, 1).join(" "),
             title2: titleArray.slice(4).join(" "),
           }}
         />
diff --git a/src/screens/network_guides/components/network_info/components/info_card/index.tsx b/src/screens/network_guides/components/network_info/components/info_card/index.tsx
index f4b9bdb3..a8ab44f6 100644
--- a/src/screens/network_guides/components/network_info/components/info_card/index.tsx
+++ b/src/screens/network_guides/components/network_info/components/info_card/index.tsx
@@ -6,7 +6,7 @@ import { convertToMoney } from "@src/utils/convert_to_money";
 
 import useStyles from "./useStyles";
 
-const InfoCard = ({ title, stats, type }: any) => {
+const InfoCard = ({ stats, title, type }: any) => {
   const { t } = useTranslation("staking");
   const styles = useStyles();
 
diff --git a/src/screens/network_guides/components/network_info/components/info_card/useStyles.ts b/src/screens/network_guides/components/network_info/components/info_card/useStyles.ts
index 47732a70..6fe923a9 100644
--- a/src/screens/network_guides/components/network_info/components/info_card/useStyles.ts
+++ b/src/screens/network_guides/components/network_info/components/info_card/useStyles.ts
@@ -5,27 +5,27 @@ const useStyles = () => {
 
   return {
     root: css({
-      "display": "flex",
-      "flexDirection": "column",
-      "alignItems": "center",
-      "padding": theme.spacing(4, 3),
-      "background": theme.palette.common.white,
-      "boxShadow":
-        "0px 6px 14px -6px rgba(2, 38, 225, 0.12), 0px 10px 32px -4px rgba(2, 38, 225, 0.1)",
-      "borderRadius": theme.spacing(3),
       "& .MuiTypography-h3": {
-        paddingTop: theme.spacing(2),
-        fontWeight: 700,
+        /* Secondary Color/Gradient/Validator/FB Validator Gradient 04 */
+        background: "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
+        backgroundClip: "text",
         fontSize: theme.spacing(3),
+        fontWeight: 700,
+        letterSpacing: "0.0015em",
         lineHeight: "29px",
+        paddingTop: theme.spacing(2),
         /* identical to box height */
         textAlign: "center",
-        letterSpacing: "0.0015em",
-        /* Secondary Color/Gradient/Validator/FB Validator Gradient 04 */
-        background: "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
-        backgroundClip: "text",
         textFillColor: "transparent",
       },
+      "alignItems": "center",
+      "background": theme.palette.common.white,
+      "borderRadius": theme.spacing(3),
+      "boxShadow":
+        "0px 6px 14px -6px rgba(2, 38, 225, 0.12), 0px 10px 32px -4px rgba(2, 38, 225, 0.1)",
+      "display": "flex",
+      "flexDirection": "column",
+      "padding": theme.spacing(4, 3),
     }),
   };
 };
diff --git a/src/screens/network_guides/components/network_info/hooks.tsx b/src/screens/network_guides/components/network_info/hooks.tsx
index ce751047..fb1bedcd 100644
--- a/src/screens/network_guides/components/network_info/hooks.tsx
+++ b/src/screens/network_guides/components/network_info/hooks.tsx
@@ -26,7 +26,7 @@ export const useNetworkGuidesHook = () => {
     [],
   );
 
-  const { loading: networkGuideLoading, data: networkGuideData } =
+  const { data: networkGuideData, loading: networkGuideLoading } =
     useQuery(networkGuideQuery);
 
   const networkGuides: Record<string, InfoBlock[]> = useMemo(() => {
@@ -42,8 +42,8 @@ export const useNetworkGuidesHook = () => {
       const getAPYBlock = (stats: string) =>
         stats
           ? {
-              title: t("apy"),
               stats,
+              title: t("apy"),
               type: t("percentage"),
             }
           : undefined;
@@ -55,8 +55,8 @@ export const useNetworkGuidesHook = () => {
               [data.metric.instance],
               [
                 {
-                  title: t("commission"),
                   stats: data.commissionRate,
+                  title: t("commission"),
                   type: t("percentage"),
                 },
               ],
@@ -90,8 +90,8 @@ export const useNetworkGuidesHook = () => {
               [
                 ...acc[data.metric.instance],
                 {
-                  title: t("staked by forbole"),
                   stats: data.TVL,
+                  title: t("staked by forbole"),
                   type: t("money"),
                 },
               ],
@@ -107,8 +107,8 @@ export const useNetworkGuidesHook = () => {
               [
                 ...acc[data.metric.instance],
                 {
-                  title: t("unbonding period"),
                   stats: data.unbondingTime,
+                  title: t("unbonding period"),
                   type: t("string"),
                 },
               ],
diff --git a/src/screens/network_guides/components/network_info/index.tsx b/src/screens/network_guides/components/network_info/index.tsx
index 71fb5f0e..f52ce908 100644
--- a/src/screens/network_guides/components/network_info/index.tsx
+++ b/src/screens/network_guides/components/network_info/index.tsx
@@ -46,13 +46,13 @@ const mappings: Record<string, string> = {
 const NetworkInfo = ({ post }: any) => {
   const theme = useTheme();
   const { t } = useTranslation("staking");
-  const { title, tags, excerpt, featureImage } = post;
+  const { excerpt, featureImage, tags, title } = post;
   const onlyLargeScreen = useMediaQuery(theme.breakpoints.up("laptop"));
   const [isCopySuccess, setIsCopySuccess] = useState(false);
   const [readMore, setReadMore] = useState(false);
   const { sanitize } = DOMPurify;
 
-  const cmsLoader = ({ src, width, quality }: any) =>
+  const cmsLoader = ({ quality, src, width }: any) =>
     `${src}?w=${width}&q=${quality || 75}`;
 
   const networkData = (() => {
diff --git a/src/screens/network_guides/index.tsx b/src/screens/network_guides/index.tsx
index 999ee075..054c0f68 100644
--- a/src/screens/network_guides/index.tsx
+++ b/src/screens/network_guides/index.tsx
@@ -12,9 +12,9 @@ import { LaptopCSS } from "./styles";
 const NetworkGuides = ({ post }: any) => {
   useEffect(() => {
     window.scrollTo({
+      behavior: "smooth",
       left: 0,
       top: 0,
-      behavior: "smooth",
     });
   }, []);
 
diff --git a/src/screens/policy/index.tsx b/src/screens/policy/index.tsx
index 460d7bb1..d32cbb23 100644
--- a/src/screens/policy/index.tsx
+++ b/src/screens/policy/index.tsx
@@ -111,8 +111,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       orphans: 2,
                       paddingBottom: 0,
                       paddingTop: 0,
@@ -231,8 +231,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -252,9 +252,9 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       height: "11pt",
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -272,8 +272,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -294,9 +294,9 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       height: "11pt",
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -314,8 +314,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -338,9 +338,9 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       height: "11pt",
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -358,8 +358,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -381,9 +381,9 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       height: "11pt",
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -401,8 +401,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -437,8 +437,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -461,9 +461,9 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       height: "11pt",
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -481,8 +481,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -506,9 +506,9 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       height: "11pt",
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -526,8 +526,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       marginLeft: "8em",
                       orphans: 2,
                       paddingBottom: 0,
@@ -1160,8 +1160,8 @@ const Policy = () => {
                       color: "#000",
 
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
 
                       orphans: 2,
 
@@ -1205,8 +1205,8 @@ const Policy = () => {
                     style={{
                       color: "#000",
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       orphans: 2,
 
                       textAlign: "left",
@@ -1232,8 +1232,8 @@ const Policy = () => {
                     style={{
                       color: "#000",
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       orphans: 2,
 
                       textAlign: "left",
@@ -1248,8 +1248,8 @@ const Policy = () => {
                     style={{
                       color: "#000",
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
                       orphans: 2,
 
                       textAlign: "left",
@@ -1267,12 +1267,12 @@ const Policy = () => {
                     style={{
                       color: "#000",
                       fontSize: "11pt",
-                      margin: 0,
                       lineHeight: "1.15",
+                      margin: 0,
+                      marginLeft: "4em",
                       orphans: 2,
                       textAlign: "right",
                       widows: 2,
-                      marginLeft: "4em",
                     }}
                   >
                     {t("desc3")?.trim()}
diff --git a/src/screens/products/index.tsx b/src/screens/products/index.tsx
index ec0b1dab..644be1b5 100644
--- a/src/screens/products/index.tsx
+++ b/src/screens/products/index.tsx
@@ -24,31 +24,31 @@ const Products = () => {
   const individuals = useMemo(
     () => [
       {
-        title: t("staking"),
         benefits: [t("earn"), t("secure"), t("ownership")],
-        usecases: [t("stake"), t("income")],
+        btnHref: "/staking-service",
+        btnName: t("seemore"),
         imageHref: "/products/tab2@2x.png",
         imageHref_m: "/products/tab2_m@2x.png",
-        btnName: t("seemore"),
-        btnHref: "/staking-service",
+        title: t("staking"),
+        usecases: [t("stake"), t("income")],
       },
       {
-        title: t("analytics"),
         benefits: [t("real-time"), t("bird-eye-view"), t("free")],
-        usecases: [t("transactions"), t("viewandvote")],
+        btnHref: "/analytics-tools",
+        btnName: t("seemore"),
         imageHref: "/products/tab3@2x.png",
         imageHref_m: "/products/tab3_m@2x.png",
-        btnName: t("seemore"),
-        btnHref: "/analytics-tools",
+        title: t("analytics"),
+        usecases: [t("transactions"), t("viewandvote")],
       },
       {
-        title: t("developer"),
         benefits: [t("nodes"), t("free-trial"), t("pricing")],
-        usecases: [t("RPC"), t("GraphQL"), t("data-api")],
+        btnHref: "/developer-tools",
+        btnName: t("seemore"),
         imageHref: "/products/tab4@2x.png",
         imageHref_m: "/products/tab4_m@2x.png",
-        btnName: t("seemore"),
-        btnHref: "/developer-tools",
+        title: t("developer"),
+        usecases: [t("RPC"), t("GraphQL"), t("data-api")],
       },
     ],
     [t],
@@ -57,56 +57,56 @@ const Products = () => {
   const businesses = useMemo(
     () => [
       {
-        title: t("validator-infrastructure"),
         benefits: [t("security"), t("expertise"), t("record")],
-        usecases: [t("new-network"), t("strengthen-network")],
+        btnHref: "/infrastructure",
+        btnName: t("seemore"),
         imageHref: "/products/tab1@2x.png",
         imageHref_m: "/products/tab1_m@2x.png",
-        btnName: t("seemore"),
-        btnHref: "/infrastructure",
+        title: t("validator-infrastructure"),
+        usecases: [t("new-network"), t("strengthen-network")],
       },
       {
-        title: t("staking"),
         benefits: [t("100% control"), t("asset-variety"), t("balance")],
-        usecases: [t("stake-token"), t("stake-of-clients")],
+        btnHref: "/staking-service",
+        btnName: t("seemore"),
         imageHref: "/products/tab2@2x.png",
         imageHref_m: "/products/tab2_m@2x.png",
-        btnName: t("seemore"),
-        btnHref: "/staking-service",
+        title: t("staking"),
+        usecases: [t("stake-token"), t("stake-of-clients")],
       },
       {
-        title: t("analytics"),
         benefits: [
           t("custom-visualization"),
           t("modularized-development"),
           t("fast"),
         ],
-        usecases: [t("own-explorer"), t("query-data")],
+        btnHref: "/analytics-tools",
+        btnName: t("seemore"),
         imageHref: "/products/tab3@2x.png",
         imageHref_m: "/products/tab3_m@2x.png",
-        btnName: t("seemore"),
-        btnHref: "/analytics-tools",
+        title: t("analytics"),
+        usecases: [t("own-explorer"), t("query-data")],
       },
       {
-        title: t("developer"),
         benefits: [t("high"), t("custom-offering"), t("team-support")],
+        btnHref: "/developer-tools",
+        btnName: t("seemore"),
+        imageHref: "/products/tab4@2x.png",
+        imageHref_m: "/products/tab4_m@2x.png",
+        title: t("developer"),
         usecases: [
           t("run-decentralized-apps"),
           t("analyze-decentralized-apps"),
         ],
-        imageHref: "/products/tab4@2x.png",
-        imageHref_m: "/products/tab4_m@2x.png",
-        btnName: t("seemore"),
-        btnHref: "/developer-tools",
       },
       {
-        title: t("enterprise-solution"),
         benefits: [t("free-consultation"), t("iteration"), t("end-to-end")],
-        usecases: [t("staking-API"), t("Implementation")],
+        btnHref: "/enterprise-solution",
+        btnName: t("seemore"),
         imageHref: "/products/tab5@2x.png",
         imageHref_m: "/products/tab5_m@2x.png",
-        btnName: t("seemore"),
-        btnHref: "/enterprise-solution",
+        title: t("enterprise-solution"),
+        usecases: [t("staking-API"), t("Implementation")],
       },
     ],
     [t],
@@ -124,9 +124,9 @@ const Products = () => {
     e.preventDefault();
 
     window.scrollTo({
+      behavior: "smooth",
       left: 0,
       top: ref.current.offsetTop - 100,
-      behavior: "smooth",
     });
   };
 
@@ -160,7 +160,7 @@ const Products = () => {
           <Stack
             direction="row"
             justifyContent="center"
-            spacing={{ mobile: 1, desktop: 2 }}
+            spacing={{ desktop: 2, mobile: 1 }}
           >
             <CtaButton
               className={styles.response}
@@ -197,7 +197,7 @@ const Products = () => {
           <Stack
             className={styles.individualsStack}
             direction="column"
-            spacing={{ mobile: 1, desktop: 2 }}
+            spacing={{ desktop: 2, mobile: 1 }}
           >
             <StyledTabs
               aria-label="basic tabs example"
@@ -314,7 +314,7 @@ const Products = () => {
           <Stack
             className={styles.businessesStack}
             direction="column"
-            spacing={{ mobile: 1, desktop: 2 }}
+            spacing={{ desktop: 2, mobile: 1 }}
           >
             <StyledTabs
               className={styles.notMobile}
diff --git a/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx b/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx
index 6751a2c1..9e663283 100644
--- a/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx
+++ b/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx
@@ -37,13 +37,13 @@ const Calculator = () => {
   const onlyLargeScreen = useMediaQuery(theme.breakpoints.up("laptop"));
 
   const {
-    selectedToken,
-    setSelectedToken,
-    totalEarnings,
     handleChange,
-    tokens,
     monthlyPeriods,
+    selectedToken,
     setMonthlyPeriods,
+    setSelectedToken,
+    tokens,
+    totalEarnings,
   } = useCalculateRewardsHook();
 
   const networkData = cosmosNetworkKeys
@@ -100,25 +100,25 @@ const Calculator = () => {
           <Select
             IconComponent={DropDownIcon}
             MenuProps={{
-              variant: "menu",
               disableScrollLock: true,
               PaperProps: {
                 sx: {
-                  "height": "50vh",
-                  "bgcolor": theme.palette.primary.main,
-                  "marginTop": 1,
-                  "boxShadow":
-                    "0px 6px 14px -6px rgb(2 38 225 / 12%), 0px 10px 32px -4px rgb(2 38 225 / 10%)",
-                  "borderRadius": 1,
                   "& .MuiMenuItem-root": {
-                    "padding": 2,
                     "&:hover": {
                       background:
                         " linear-gradient(286.17deg, rgba(212, 49, 238, 0.24) 0%, rgba(255, 66, 107, 0.24) 100%)",
                     },
+                    "padding": 2,
                   },
+                  "bgcolor": theme.palette.primary.main,
+                  "borderRadius": 1,
+                  "boxShadow":
+                    "0px 6px 14px -6px rgb(2 38 225 / 12%), 0px 10px 32px -4px rgb(2 38 225 / 10%)",
+                  "height": "50vh",
+                  "marginTop": 1,
                 },
               },
+              variant: "menu",
             }}
             displayEmpty
             id="demo-simple-select"
@@ -151,16 +151,16 @@ const Calculator = () => {
                   </Box>
                   <Box sx={styles.networkInfo}>
                     <Typography
-                      sx={{ fontWeight: 600, fontSize: theme.spacing(2.5) }}
+                      sx={{ fontSize: theme.spacing(2.5), fontWeight: 600 }}
                       variant="h4"
                     >
                       {network?.denom?.toUpperCase() || ""}
                     </Typography>
                     <Typography
                       sx={{
-                        fontWeight: 400,
-                        fontSize: theme.spacing(1.5),
                         color: "#878787",
+                        fontSize: theme.spacing(1.5),
+                        fontWeight: 400,
                       }}
                       variant="body1"
                     >
@@ -256,11 +256,11 @@ const Calculator = () => {
                 </InputAdornment>
               }
               inputProps={{
-                "step": 1,
-                "min": 0,
+                "aria-labelledby": "input-slider",
                 "max": 12,
+                "min": 0,
+                "step": 1,
                 "type": "number",
-                "aria-labelledby": "input-slider",
               }}
               onBlur={handleBlur}
               onChange={handleInputChange}
diff --git a/src/screens/staking/components/calculate_rewards/components/calculator/styles.tsx b/src/screens/staking/components/calculate_rewards/components/calculator/styles.tsx
index 086eebfb..b5e60359 100644
--- a/src/screens/staking/components/calculate_rewards/components/calculator/styles.tsx
+++ b/src/screens/staking/components/calculate_rewards/components/calculator/styles.tsx
@@ -2,188 +2,188 @@ import type { Theme } from "@mui/material";
 import type { SxProps } from "@mui/system";
 
 export const styles = {
-  wrapper: (theme) => ({
-    background:
-      "linear-gradient(269.66deg, rgba(2, 158, 225, 0.4) -12.39%, rgba(2, 38, 225, 0.2) 99.38%), rgba(255, 255, 255, 0.8)",
-    boxShadow:
-      "10px 8px 12px -6px rgba(2, 38, 225, 0.08), 18px 14px 24px -4px rgba(2, 38, 225, 0.04), inset 6px 6px 6px rgba(255, 255, 255, 0.2)",
+  amountResult: () => ({
+    display: "flex",
+    flexDirection: "column",
+  }),
+  button: (theme) => ({
+    background: "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
     borderRadius: theme.spacing(3),
-    padding: theme.spacing(4, 2.5),
+    boxShadow:
+      "0px 8px 22px -6px rgba(2, 38, 225, 0.12), 0px 14px 64px -4px rgba(2, 38, 225, 0.12)",
+    fontSize: theme.spacing(2),
+    padding: theme.spacing(1.25, 2),
+  }),
+  buttonDiv: (theme) => ({
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: 3,
     [theme.breakpoints.up("laptop")]: {
-      padding: theme.spacing(5),
+      justifyContent: "flex-end",
+      paddingTop: 4,
     },
+    width: "100%",
   }),
-  textBase: (theme) => ({
-    fontSize: theme.spacing(2),
-    fontWeight: 600,
-    color: theme.palette.custom.forbole.blue,
+  card: (theme) => ({
+    background: theme.palette.primary.main,
+    borderRadius: theme.spacing(1),
+    boxShadow:
+      "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.spacing(2),
+    [theme.breakpoints.up("laptop")]: {
+      alignItems: "flex-start",
+      flexDirection: "row",
+      justifyContent: "space-between",
+    },
+    width: "100%",
   }),
   innerText: (theme) => ({
+    color: theme.palette.custom.forbole.blue,
     fontSize: theme.spacing(2),
     fontWeight: 600,
-    color: theme.palette.custom.forbole.blue,
     padding: theme.spacing(4, 0, 1, 0),
   }),
-  select: (theme) => ({
-    ".MuiOutlinedInput-root": {
-      "background": theme.palette.primary.main,
-      "borderRadius": theme.spacing(1),
-      "> .MuiSvgIcon-root": {
-        fill: "#878787",
-      },
-      ".MuiSelect-select": {
-        "> .MuiBox-root": {
-          "> span": {
-            borderRadius: "50%",
-            boxShadow:
-              "0px 8px 22px -6px rgba(2, 38, 225, 0.12), 0px 14px 64px -4px rgba(2, 38, 225, 0.12)",
-          },
-        },
-      },
+  input: (theme) => ({
+    ".MuiFormLabel-root": {
+      color: "#878787",
     },
-    ".MuiFormControl-root": {
-      width: "100%",
+    ".MuiOutlinedInput-root": {
+      background: theme.palette.primary.main,
+      borderRadius: theme.spacing(1),
       boxShadow:
         "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
-      borderRadius: theme.spacing(1),
-    },
-    ".MuiFormLabel-root": {
-      color: "#878787",
+      width: "100%",
     },
     "& .MuiOutlinedInput-notchedOutline": {
       border: "none",
       borderColor: "transparent",
     },
-    "& .MuiSelect-icon": {
-      margin: theme.spacing(0.5, 2.5, 0, 0),
+  }),
+  inputBase: (theme) => ({
+    "> input": {
+      padding: theme.spacing(0.5, 0, 0.5, 1.5),
+      width: "fit-content",
     },
-    [theme.breakpoints.up("laptop")]: {},
+    "background": theme.palette.primary.main,
+    "borderRadius": theme.spacing(1),
+    "boxShadow":
+      "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
+    "display": "flex",
+    "height": theme.spacing(7),
+    "justifyContent": "flex-end",
+    "paddingRight": 1,
   }),
-  input: (theme) => ({
-    ".MuiOutlinedInput-root": {
-      width: "100%",
+  network: (theme) => ({
+    "& .image": {
+      borderRadius: "100%",
       boxShadow:
         "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
+      height: `${theme.spacing(6.5)} !important`,
+      width: `${theme.spacing(6.5)} !important`,
+    },
+    "alignContent": "center",
+    "display": "flex",
+    "flexDirection": "row",
+    "justifyContent": "flex-start",
+  }),
+  networkInfo: (theme) => ({
+    alignItems: "flex-start",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    paddingLeft: theme.spacing(2),
+  }),
+  select: (theme) => ({
+    ".MuiFormControl-root": {
       borderRadius: theme.spacing(1),
-      background: theme.palette.primary.main,
+      boxShadow:
+        "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
+      width: "100%",
     },
     ".MuiFormLabel-root": {
       color: "#878787",
     },
+    ".MuiOutlinedInput-root": {
+      ".MuiSelect-select": {
+        "> .MuiBox-root": {
+          "> span": {
+            borderRadius: "50%",
+            boxShadow:
+              "0px 8px 22px -6px rgba(2, 38, 225, 0.12), 0px 14px 64px -4px rgba(2, 38, 225, 0.12)",
+          },
+        },
+      },
+      "> .MuiSvgIcon-root": {
+        fill: "#878787",
+      },
+      "background": theme.palette.primary.main,
+      "borderRadius": theme.spacing(1),
+    },
     "& .MuiOutlinedInput-notchedOutline": {
       border: "none",
       borderColor: "transparent",
     },
+    "& .MuiSelect-icon": {
+      margin: theme.spacing(0.5, 2.5, 0, 0),
+    },
+    [theme.breakpoints.up("laptop")]: {},
   }),
   slider: (theme) => ({
+    "& .MuiSlider-rail": {
+      color: "#76819B",
+      height: 2.5,
+    },
     "& .MuiSlider-thumb": {
-      "height": theme.spacing(2.25),
-      "width": theme.spacing(2.25),
-      "background": "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
-      "border":
-        "2px solid linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
-      "boxShadow": "none",
       "&:focus, &:hover, &.Mui-active": {
-        "boxShadow": "none",
         "@media (hover: none)": {
           boxShadow:
             "0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)",
         },
+        "boxShadow": "none",
       },
+      "background": "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
+      "border":
+        "2px solid linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
+      "boxShadow": "none",
+      "height": theme.spacing(2.25),
+      "width": theme.spacing(2.25),
     },
     "& .MuiSlider-track": {
-      height: 2.5,
       background: "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
-    },
-    "& .MuiSlider-rail": {
-      color: "#76819B",
       height: 2.5,
     },
   }),
-  inputBase: (theme) => ({
-    "height": theme.spacing(7),
-    "display": "flex",
-    "justifyContent": "flex-end",
-    "boxShadow":
-      "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
-    "borderRadius": theme.spacing(1),
-    "background": theme.palette.primary.main,
-    "paddingRight": 1,
-    "> input": {
-      padding: theme.spacing(0.5, 0, 0.5, 1.5),
-      width: "fit-content",
-    },
-  }),
-  card: (theme) => ({
-    width: "100%",
-    boxShadow:
-      "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
-    borderRadius: theme.spacing(1),
-    background: theme.palette.primary.main,
-    padding: theme.spacing(2),
-    display: "flex",
-    flexDirection: "column",
-    [theme.breakpoints.up("laptop")]: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "flex-start",
-    },
+  textBase: (theme) => ({
+    color: theme.palette.custom.forbole.blue,
+    fontSize: theme.spacing(2),
+    fontWeight: 600,
   }),
   tokenResult: (theme) => ({
-    "display": "flex",
-    "alignItems": "center",
-    "paddingBottom": theme.spacing(2),
     "& .image": {
-      width: `${theme.spacing(3.5)} !important`,
-      height: `${theme.spacing(3.5)} !important`,
       borderRadius: "100%",
       boxShadow:
         "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
+      height: `${theme.spacing(3.5)} !important`,
+      width: `${theme.spacing(3.5)} !important`,
     },
+    "alignItems": "center",
+    "display": "flex",
+    "paddingBottom": theme.spacing(2),
     [theme.breakpoints.up("laptop")]: {
       paddingBottom: 0,
     },
   }),
-  amountResult: () => ({
-    display: "flex",
-    flexDirection: "column",
-  }),
-  buttonDiv: (theme) => ({
-    width: "100%",
-    display: "flex",
-    paddingTop: 3,
-    justifyContent: "center",
-    [theme.breakpoints.up("laptop")]: {
-      paddingTop: 4,
-      justifyContent: "flex-end",
-    },
-  }),
-  button: (theme) => ({
-    background: "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
-    boxShadow:
-      "0px 8px 22px -6px rgba(2, 38, 225, 0.12), 0px 14px 64px -4px rgba(2, 38, 225, 0.12)",
+  wrapper: (theme) => ({
+    background:
+      "linear-gradient(269.66deg, rgba(2, 158, 225, 0.4) -12.39%, rgba(2, 38, 225, 0.2) 99.38%), rgba(255, 255, 255, 0.8)",
     borderRadius: theme.spacing(3),
-    padding: theme.spacing(1.25, 2),
-    fontSize: theme.spacing(2),
-  }),
-  network: (theme) => ({
-    "display": "flex",
-    "flexDirection": "row",
-    "alignContent": "center",
-    "justifyContent": "flex-start",
-    "& .image": {
-      width: `${theme.spacing(6.5)} !important`,
-      height: `${theme.spacing(6.5)} !important`,
-      borderRadius: "100%",
-      boxShadow:
-        "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
+    boxShadow:
+      "10px 8px 12px -6px rgba(2, 38, 225, 0.08), 18px 14px 24px -4px rgba(2, 38, 225, 0.04), inset 6px 6px 6px rgba(255, 255, 255, 0.2)",
+    padding: theme.spacing(4, 2.5),
+    [theme.breakpoints.up("laptop")]: {
+      padding: theme.spacing(5),
     },
   }),
-  networkInfo: (theme) => ({
-    alignItems: "flex-start",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    paddingLeft: theme.spacing(2),
-  }),
 } satisfies { [index: string]: SxProps<Theme> };
diff --git a/src/screens/staking/components/calculate_rewards/config.ts b/src/screens/staking/components/calculate_rewards/config.ts
index 0375b8d5..7d20669e 100644
--- a/src/screens/staking/components/calculate_rewards/config.ts
+++ b/src/screens/staking/components/calculate_rewards/config.ts
@@ -11,10 +11,10 @@ type NetworkProps = {
 };
 
 const baseState = {
+  bondedToken: 0,
+  commissionRate: 0,
   inflation: 0,
   stakingRatio: 0,
-  commissionRate: 0,
-  bondedToken: 0,
   totalSupply: 0,
 };
 
@@ -30,10 +30,10 @@ const stakingParams: NetworkProps = {
   chihuahua: baseState,
   comdex: baseState,
   cosmos: {
+    bondedToken: 197693300,
+    commissionRate: 0.095,
     inflation: 0.1273,
     stakingRatio: 0.6693,
-    commissionRate: 0.095,
-    bondedToken: 197693300,
     totalSupply: 292586164,
   },
   crescent: baseState,
diff --git a/src/screens/staking/components/calculate_rewards/hooks.tsx b/src/screens/staking/components/calculate_rewards/hooks.tsx
index 61555f95..4255dfde 100644
--- a/src/screens/staking/components/calculate_rewards/hooks.tsx
+++ b/src/screens/staking/components/calculate_rewards/hooks.tsx
@@ -15,8 +15,8 @@ import { defaultFunctions, networkFunctions, toFixed } from "./utils";
 
 export const useCalculateRewardsHook = () => {
   const [tokens, setTokens] = useState<any | null>({
-    value: "",
     display: "",
+    value: "",
   });
 
   const initialState = getNetworkInfo("cosmos");
@@ -25,16 +25,16 @@ export const useCalculateRewardsHook = () => {
 
   const [totalEarnings, setTotalEarnings] = useState({
     dailyEarnings: {
-      tokens: "0",
       amount: "0",
+      tokens: "0",
     },
     monthlyEarnings: {
-      tokens: "0",
       amount: "0",
+      tokens: "0",
     },
     yearlyEarnings: {
-      tokens: "0",
       amount: "0",
+      tokens: "0",
     },
   });
 
@@ -43,7 +43,7 @@ export const useCalculateRewardsHook = () => {
     [selectedToken.key],
   );
 
-  const { loading: rewardsQueryLoading, data: rewardsQueryData } =
+  const { data: rewardsQueryData, loading: rewardsQueryLoading } =
     useQuery(rewardsQuery);
 
   const selectedTokenGraphql = selectedToken?.graphql;
@@ -195,16 +195,16 @@ export const useCalculateRewardsHook = () => {
 
     setTotalEarnings({
       dailyEarnings: {
-        tokens: formatDailyRewards,
         amount: formatDailyPrice,
+        tokens: formatDailyRewards,
       },
       monthlyEarnings: {
-        tokens: formatMonthlyRewards,
         amount: formatMonthlyPrice,
+        tokens: formatMonthlyRewards,
       },
       yearlyEarnings: {
-        tokens: formatAnnualRewards,
         amount: formatAnnualPrice,
+        tokens: formatAnnualRewards,
       },
     });
   }, [
@@ -228,8 +228,8 @@ export const useCalculateRewardsHook = () => {
 
     if (!value) {
       setTokens({
-        value: "",
         display: "",
+        value: "",
       });
 
       return;
@@ -255,8 +255,8 @@ export const useCalculateRewardsHook = () => {
     // handles edge cases
     if (exceptions.includes(value[value.length - 1])) {
       setTokens({
-        value,
         display: value,
+        value,
       });
     } else {
       const rawNumber = value.replace(/[^\d.]/g, "")
@@ -266,19 +266,19 @@ export const useCalculateRewardsHook = () => {
       const convertedNumber = convertWithDecimal(rawNumber);
 
       setTokens({
-        value: rawNumber,
         display: convertedNumber,
+        value: rawNumber,
       });
     }
   };
 
   return {
-    selectedToken,
-    setSelectedToken,
-    totalEarnings,
     handleChange,
-    tokens,
     monthlyPeriods,
+    selectedToken,
     setMonthlyPeriods,
+    setSelectedToken,
+    tokens,
+    totalEarnings,
   };
 };
diff --git a/src/screens/staking/components/calculate_rewards/index.tsx b/src/screens/staking/components/calculate_rewards/index.tsx
index e6dce81e..d4e6963f 100644
--- a/src/screens/staking/components/calculate_rewards/index.tsx
+++ b/src/screens/staking/components/calculate_rewards/index.tsx
@@ -39,16 +39,16 @@ const CalculateRewards = () => {
         />
         <Typography
           sx={{
-            textShadow:
-              "0px 1px 8px rgba(16, 24, 40, 0.06), 0px 1px 10px rgba(16, 24, 40, 0.05)",
-            fontWeight: 400,
+            color: theme.palette.custom.forbole.blue,
             fontSize: theme.spacing(2),
-            textAlign: "center",
+            fontWeight: 400,
             padding: theme.spacing(3, 0, 3, 0),
-            color: theme.palette.custom.forbole.blue,
+            textAlign: "center",
+            textShadow:
+              "0px 1px 8px rgba(16, 24, 40, 0.06), 0px 1px 10px rgba(16, 24, 40, 0.05)",
             [theme.breakpoints.up("laptop")]: {
-              fontWeight: 400,
               fontSize: theme.spacing(3),
+              fontWeight: 400,
               paddingBottom: theme.spacing(7),
             },
           }}
diff --git a/src/screens/staking/components/calculate_rewards/utils.ts b/src/screens/staking/components/calculate_rewards/utils.ts
index 43e353fa..0bdeda0f 100644
--- a/src/screens/staking/components/calculate_rewards/utils.ts
+++ b/src/screens/staking/components/calculate_rewards/utils.ts
@@ -56,15 +56,15 @@ const uSolanaToSolana = defaultConverter(1);
 export const defaultFunctions = (converter?: any) => ({
   bonded: (data: any) =>
     converter(Number(pathOr(0, ["result", "bonded_tokens"], data))),
-  inflation: (data: any) => toFixed(Number(pathOr(0, ["result"], data))) ?? 0,
-  supply: (data: any) => converter(Number(pathOr(0, ["result"], data))),
   commissionRate: (data: any) =>
     Number(
       pathOr(0, ["result", "commission", "commission_rates", "rate"], data),
     ),
+  converter,
+  inflation: (data: any) => toFixed(Number(pathOr(0, ["result"], data))) ?? 0,
   marketPrice: (data: any) =>
     toFixed(Number(pathOr(0, ["market_data", "current_price", "usd"], data))),
-  converter,
+  supply: (data: any) => converter(Number(pathOr(0, ["result"], data))),
 });
 
 const cosmos: any = clone(defaultFunctions(uAtomToAtom));
@@ -145,24 +145,24 @@ solana.gecko = "https://api.coingecko.com/api/v3/coins/solana";
 
 // available networks for calculations
 export const networkFunctions: NetworkProps = {
-  cosmos,
-  kava,
   akash,
-  terra,
-  iov,
-  likecoin,
-  iris,
   band,
-  emoney,
-  vsys,
-  solana,
   "band-protocol": band,
+  bitsong,
+  cosmos,
   cryptoOrg,
-  sentinel,
+  emoney,
   "fetchai": fetchAI,
-  "regen-network": regen,
-  bitsong,
-  "oasis-protocol": oasis,
-  kusama,
   flow,
+  iov,
+  iris,
+  kava,
+  kusama,
+  likecoin,
+  "oasis-protocol": oasis,
+  "regen-network": regen,
+  sentinel,
+  solana,
+  terra,
+  vsys,
 };
diff --git a/src/screens/staking/components/contact_forbole/components/contact_card/hooks.tsx b/src/screens/staking/components/contact_forbole/components/contact_card/hooks.tsx
index dac0f159..916ea91d 100644
--- a/src/screens/staking/components/contact_forbole/components/contact_card/hooks.tsx
+++ b/src/screens/staking/components/contact_forbole/components/contact_card/hooks.tsx
@@ -7,8 +7,8 @@ import isEmail from "validator/lib/isEmail";
 
 const useContactCard = () => {
   const [inputs, setInputs] = useState({
-    name: "",
     email: "",
+    name: "",
     option: "",
   });
 
@@ -31,18 +31,18 @@ const useContactCard = () => {
       axios
         .post("/api/contact", {
           from: inputs.email,
+          html: `<p>${sanitize(inputs.option)}</p>`,
           source: "staking",
           text: sanitize(inputs.option),
-          html: `<p>${sanitize(inputs.option)}</p>`,
         })
         .then((res) => {
           if (res.status === 200) {
             toast.success(t("success") as string);
 
             setInputs({
+              email: "",
               name: "",
               option: "",
-              email: "",
             });
           }
         })
@@ -64,11 +64,11 @@ const useContactCard = () => {
   };
 
   return {
-    handleSubmit,
+    canSubmit,
     handleInputChange,
+    handleSubmit,
     inputs,
     setInputs,
-    canSubmit,
   };
 };
 
diff --git a/src/screens/staking/components/contact_forbole/components/contact_card/index.tsx b/src/screens/staking/components/contact_forbole/components/contact_card/index.tsx
index 51d06f07..71acae47 100644
--- a/src/screens/staking/components/contact_forbole/components/contact_card/index.tsx
+++ b/src/screens/staking/components/contact_forbole/components/contact_card/index.tsx
@@ -28,7 +28,7 @@ const ContactCard = () => {
   const theme = useTheme();
   const { t } = useTranslation("staking");
 
-  const { handleSubmit, handleInputChange, inputs, setInputs, canSubmit } =
+  const { canSubmit, handleInputChange, handleSubmit, inputs, setInputs } =
     useContactCard();
 
   const [isOpen, setIsOpen] = useState(false);
@@ -124,24 +124,24 @@ const ContactCard = () => {
               <Select
                 IconComponent={ExpandIconWrapper}
                 MenuProps={{
-                  variant: "menu",
                   disableScrollLock: true,
                   PaperProps: {
                     sx: {
-                      "bgcolor": theme.palette.primary.main,
-                      "marginTop": 1,
-                      "boxShadow":
-                        "0px 6px 14px -6px rgb(2 38 225 / 12%), 0px 10px 32px -4px rgb(2 38 225 / 10%)",
-                      "borderRadius": 1,
                       "& .MuiMenuItem-root": {
-                        "padding": 2,
                         "&:hover": {
                           background:
                             " linear-gradient(286.17deg, rgba(212, 49, 238, 0.24) 0%, rgba(255, 66, 107, 0.24) 100%)",
                         },
+                        "padding": 2,
                       },
+                      "bgcolor": theme.palette.primary.main,
+                      "borderRadius": 1,
+                      "boxShadow":
+                        "0px 6px 14px -6px rgb(2 38 225 / 12%), 0px 10px 32px -4px rgb(2 38 225 / 10%)",
+                      "marginTop": 1,
                     },
                   },
+                  variant: "menu",
                 }}
                 onChange={(e) => {
                   const { value } = e.target;
diff --git a/src/screens/staking/components/faq/components/card/index.tsx b/src/screens/staking/components/faq/components/card/index.tsx
index ab88077d..b0f31cf1 100644
--- a/src/screens/staking/components/faq/components/card/index.tsx
+++ b/src/screens/staking/components/faq/components/card/index.tsx
@@ -13,17 +13,17 @@ import type { FAQProps } from "../../config";
 import * as styles from "./index.module.scss";
 
 const Card = ({
-  question,
-  para1,
-  para2,
-  trans,
-  para3,
-  desc,
   bullet1,
   bullet2,
   bullet3,
+  desc,
   expanded,
+  para1,
+  para2,
+  para3,
+  question,
   setExpanded,
+  trans,
 }: FAQProps) => (
   <Box className={styles.wrapper}>
     <Accordion
diff --git a/src/screens/staking/components/faq/config.tsx b/src/screens/staking/components/faq/config.tsx
index b9858d29..32695099 100644
--- a/src/screens/staking/components/faq/config.tsx
+++ b/src/screens/staking/components/faq/config.tsx
@@ -27,33 +27,34 @@ export const useFaq = (): FAQProps[] => {
     () =>
       [
         {
-          question: t("staking q"),
           para1: t("staking para 1"),
           para2: t("staking para 2"),
+          question: t("staking q"),
         },
         {
-          question: t("difference q"),
           para1: t("difference para 1"),
+          question: t("difference q"),
         },
         {
-          question: t("unstaking q"),
           para1: t("unstaking para 1"),
           para2: t("unstaking para 2"),
           para3: t("unstaking para 3"),
+          question: t("unstaking q"),
         },
         {
-          question: t("risks q"),
           para1: t("risks para 1"),
+          question: t("risks q"),
         },
         {
-          question: t("benefits q"),
-          desc: t("benefits desc"),
           bullet1: t("benefits bullet 1"),
           bullet2: t("benefits bullet 2"),
+          desc: t("benefits desc"),
+          question: t("benefits q"),
         },
         {
-          question: t("reward q"),
           para1: t("reward para 1"),
+          para3: t("reward para 3"),
+          question: t("reward q"),
           trans: (
             <Trans
               components={[
@@ -84,22 +85,21 @@ export const useFaq = (): FAQProps[] => {
               ns="staking"
             />
           ),
-          para3: t("reward para 3"),
         },
         {
-          question: t("receiving q"),
           bullet1: t("receiving bullet 1"),
           bullet2: t("receiving bullet 2"),
+          question: t("receiving q"),
         },
         {
-          question: t("drop q"),
-          desc: t("drop desc"),
           bullet1: t("drop bullet 1"),
           bullet2: t("drop bullet 2"),
+          desc: t("drop desc"),
+          question: t("drop q"),
         },
         {
-          question: t("claim q"),
           para1: t("claim para 1"),
+          question: t("claim q"),
         },
       ] as FAQProps[],
     [t],
diff --git a/src/screens/staking/components/faq/index.tsx b/src/screens/staking/components/faq/index.tsx
index dacf0a14..3beebe7b 100644
--- a/src/screens/staking/components/faq/index.tsx
+++ b/src/screens/staking/components/faq/index.tsx
@@ -25,15 +25,15 @@ const FAQ = () => {
                 if (i > middleIndex) return null;
 
                 const {
-                  question,
-                  para1,
-                  para2,
-                  trans,
-                  para3,
-                  desc,
                   bullet1,
                   bullet2,
                   bullet3,
+                  desc,
+                  para1,
+                  para2,
+                  para3,
+                  question,
+                  trans,
                 } = x;
 
                 return (
@@ -63,15 +63,15 @@ const FAQ = () => {
                 if (i <= middleIndex) return null;
 
                 const {
-                  question,
-                  para1,
-                  para2,
-                  trans,
-                  para3,
-                  desc,
                   bullet1,
                   bullet2,
                   bullet3,
+                  desc,
+                  para1,
+                  para2,
+                  para3,
+                  question,
+                  trans,
                 } = x;
 
                 return (
diff --git a/src/screens/staking/components/hero/components/stats/components/stats_card/index.tsx b/src/screens/staking/components/hero/components/stats/components/stats_card/index.tsx
index 36157e58..8ca63457 100644
--- a/src/screens/staking/components/hero/components/stats/components/stats_card/index.tsx
+++ b/src/screens/staking/components/hero/components/stats/components/stats_card/index.tsx
@@ -6,9 +6,9 @@ import { convertToMoney } from "@src/utils/convert_to_money";
 
 import * as styles from "./index.module.scss";
 
-const StatsCard = ({ title, stats }: any) => {
+const StatsCard = ({ stats, title }: any) => {
   const { t } = useTranslation("common");
-  const { counterValue, counterRef } = useCounter(stats);
+  const { counterRef, counterValue } = useCounter(stats);
 
   return (
     <Box className={styles.root} ref={counterRef}>
diff --git a/src/screens/staking/components/hero/components/stats/hooks.tsx b/src/screens/staking/components/hero/components/stats/hooks.tsx
index 25663c07..c7c94749 100644
--- a/src/screens/staking/components/hero/components/stats/hooks.tsx
+++ b/src/screens/staking/components/hero/components/stats/hooks.tsx
@@ -19,22 +19,22 @@ export const useStatsHook = () => {
   const stats: StatsItem[] = useMemo(
     () => [
       {
-        title: t("full tvl"),
         stats: "-",
+        title: t("full tvl"),
       },
       {
-        title: t("users staking"),
         stats: "-",
+        title: t("users staking"),
       },
       {
-        title: t("supporting networks"),
         stats: networkNumber,
+        title: t("supporting networks"),
       },
     ],
     [t],
   );
 
-  const { loading: statsQueryLoading, data: statsQueryData } =
+  const { data: statsQueryData, loading: statsQueryLoading } =
     useQuery(statsQuery);
 
   const parsedStats = useMemo(() => {
diff --git a/src/screens/staking/components/how_it_works/components/how_to_card/index.tsx b/src/screens/staking/components/how_it_works/components/how_to_card/index.tsx
index 997e3437..f8581713 100644
--- a/src/screens/staking/components/how_it_works/components/how_to_card/index.tsx
+++ b/src/screens/staking/components/how_it_works/components/how_to_card/index.tsx
@@ -2,21 +2,13 @@
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import Image from "next/legacy/image";
 
-const HowToCard = ({ id, image, title, desc }: any) => {
+const HowToCard = ({ desc, id, image, title }: any) => {
   const theme = useTheme();
   const onlyLargeScreen = useMediaQuery(theme.breakpoints.up("laptop"));
 
   return (
     <Box
       sx={{
-        "display": "flex",
-        "flexDirection": "column",
-        "alignItems": "flex-start",
-        "padding": theme.spacing(4, 3),
-        "background": theme.palette.common.white,
-        "borderRadius": theme.spacing(3),
-        "boxShadow":
-          "0px 6px 14px -6px rgba(2, 38, 225, 0.12), 0px 10px 32px -4px rgba(2, 38, 225, 0.1)",
         "& span": {
           marginLeft:
             id <= 2
@@ -26,6 +18,14 @@ const HowToCard = ({ id, image, title, desc }: any) => {
                 : ("-5px !important" as any),
           maxWidth: "150% !important" as any,
         },
+        "alignItems": "flex-start",
+        "background": theme.palette.common.white,
+        "borderRadius": theme.spacing(3),
+        "boxShadow":
+          "0px 6px 14px -6px rgba(2, 38, 225, 0.12), 0px 10px 32px -4px rgba(2, 38, 225, 0.1)",
+        "display": "flex",
+        "flexDirection": "column",
+        "padding": theme.spacing(4, 3),
       }}
     >
       <Box
@@ -53,8 +53,8 @@ const HowToCard = ({ id, image, title, desc }: any) => {
           color={theme.palette.custom.forbole.blue}
           fontWeight={600}
           sx={{
-            padding: theme.spacing(5.75, 0, 3, 0),
             fontSize: theme.spacing(2.25),
+            padding: theme.spacing(5.75, 0, 3, 0),
             [theme.breakpoints.up("laptop")]: {
               fontSize: theme.spacing(2.5),
               padding: theme.spacing(2.5, 0),
@@ -68,8 +68,8 @@ const HowToCard = ({ id, image, title, desc }: any) => {
           color={theme.palette.custom.forbole.blue}
           fontSize={onlyLargeScreen ? theme.spacing(2) : theme.spacing(1.75)}
           sx={{
-            textAlign: "start",
             lineHeight: theme.spacing(2.5),
+            textAlign: "start",
             [theme.breakpoints.up("laptop")]: {
               lineHeight: theme.spacing(3),
             },
diff --git a/src/screens/staking/components/how_it_works/index.tsx b/src/screens/staking/components/how_it_works/index.tsx
index 7ed26aab..738cd63c 100644
--- a/src/screens/staking/components/how_it_works/index.tsx
+++ b/src/screens/staking/components/how_it_works/index.tsx
@@ -15,28 +15,28 @@ const HowItWorks = () => {
   const howTos = useMemo(
     () => [
       {
+        desc: t("trusted provider desc"),
         id: 1,
         image: "/images/assets/image_provider.png",
         title: t("trusted provider"),
-        desc: t("trusted provider desc"),
       },
       {
+        desc: t("stake desc"),
         id: 2,
         image: "/images/assets/image_stake.png",
         title: t("stake"),
-        desc: t("stake desc"),
       },
       {
+        desc: t("rewards desc"),
         id: 3,
         image: "/images/assets/image_rewards.png",
         title: t("rewards"),
-        desc: t("rewards desc"),
       },
       {
+        desc: t("non-custodial desc"),
         id: 4,
         image: "/images/assets/image_non-custodial.png",
         title: t("non-custodial"),
-        desc: t("non-custodial desc"),
       },
     ],
     [t],
@@ -75,14 +75,14 @@ const HowItWorks = () => {
         />
         <Box
           sx={{
-            padding: theme.spacing(5, 0, 0, 0),
             display: "grid",
-            gridTemplateColumns: "repeat(1, 1fr)",
             gridGap: theme.spacing(2),
+            gridTemplateColumns: "repeat(1, 1fr)",
+            padding: theme.spacing(5, 0, 0, 0),
             [theme.breakpoints.up("laptop")]: {
+              gridGap: theme.spacing(2.75),
               gridTemplateColumns: "repeat(4, 1fr)",
               padding: theme.spacing(7, 0, 0, 0),
-              gridGap: theme.spacing(2.75),
             },
           }}
         >
diff --git a/src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx b/src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx
index 536e69a4..d656c09d 100644
--- a/src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx
+++ b/src/screens/staking/components/networks/components/network_grid/components/network_card/index.tsx
@@ -173,8 +173,8 @@ const NetworkCard = ({
       ref={ref}
       transition={{ duration: 0.3 }}
       variants={{
-        initial: { opacity: 0, scale: 0.8 },
         appear: { opacity: 1, scale: 1 },
+        initial: { opacity: 0, scale: 0.8 },
       }}
       whileInView="appear"
     >
diff --git a/src/screens/staking/components/networks/components/network_grid/config.ts b/src/screens/staking/components/networks/components/network_grid/config.ts
index c290e7db..d20557b5 100644
--- a/src/screens/staking/components/networks/components/network_grid/config.ts
+++ b/src/screens/staking/components/networks/components/network_grid/config.ts
@@ -12,8 +12,8 @@ export type NetworkProps = {
 };
 
 const defaultParams: ParamsProps = {
-  bonded: 0,
   APY: 0,
+  bonded: 0,
   TVL: 0,
 };
 
diff --git a/src/screens/staking/components/networks/components/network_grid/hooks.ts b/src/screens/staking/components/networks/components/network_grid/hooks.ts
index 23fe24d4..94b74e90 100644
--- a/src/screens/staking/components/networks/components/network_grid/hooks.ts
+++ b/src/screens/staking/components/networks/components/network_grid/hooks.ts
@@ -18,7 +18,7 @@ import {
 const elrondNetworkFunctions = networkFunctions.elrond;
 
 export const useNetworkHook = () => {
-  const { loading: networkGridLoading, data: networkGridData } =
+  const { data: networkGridData, loading: networkGridLoading } =
     useQuery(networkGridQuery);
 
   const cosmosNetworks = useMemo(() => {
@@ -66,7 +66,6 @@ export const useNetworkHook = () => {
     () => ({
       ethereum: {
         APY: 0,
-        TVL: 0,
         bonded: 0,
         custom: {
           "POOL APY": "3.16%",
@@ -74,6 +73,7 @@ export const useNetworkHook = () => {
           "SOLO AVG APY": "4%",
           "SOLO MEV APY": "5,69%",
         },
+        TVL: 0,
       },
     }),
     [],
@@ -81,7 +81,7 @@ export const useNetworkHook = () => {
 
   const elrondNetwork = useMemo(() => {
     if (!networkGridLoading && networkGridData) {
-      const { elrondBondedToken, elrondAPY, elrondTVL } = networkGridData;
+      const { elrondAPY, elrondBondedToken, elrondTVL } = networkGridData;
 
       return pipe(
         reduce<any, any>(
@@ -122,7 +122,7 @@ export const useNetworkHook = () => {
 
   const solanaNetwork = useMemo(() => {
     if (!networkGridLoading && networkGridData) {
-      const { solanaTVL, solanaBondedToken } = networkGridData;
+      const { solanaBondedToken, solanaTVL } = networkGridData;
 
       return pipe(
         assocPath([solanaTVL.metric.instance, "TVL"], solanaTVL.TVL),
@@ -138,7 +138,7 @@ export const useNetworkHook = () => {
 
   const oasisNetwork = useMemo(() => {
     if (!networkGridLoading && networkGridData) {
-      const { oasisTVL, oasisBondedToken } = networkGridData;
+      const { oasisBondedToken, oasisTVL } = networkGridData;
 
       const networkWithTVL = {
         ...oasisNetworkParams,
diff --git a/src/screens/staking/components/networks/components/network_grid/index.tsx b/src/screens/staking/components/networks/components/network_grid/index.tsx
index 973fc57e..c5fbc610 100644
--- a/src/screens/staking/components/networks/components/network_grid/index.tsx
+++ b/src/screens/staking/components/networks/components/network_grid/index.tsx
@@ -14,7 +14,7 @@ type Props = {
   sortedNetworks: Network[];
 };
 
-const NetworkGrid = ({ sortedNetworks, allNetworkInfo }: Props) => {
+const NetworkGrid = ({ allNetworkInfo, sortedNetworks }: Props) => {
   const styles = useStyles();
   const [showMobilePopover, setShowMobilePopover] = useState("");
 
diff --git a/src/screens/staking/components/networks/components/network_grid/useStyles.ts b/src/screens/staking/components/networks/components/network_grid/useStyles.ts
index 910c1f54..007dcd7b 100644
--- a/src/screens/staking/components/networks/components/network_grid/useStyles.ts
+++ b/src/screens/staking/components/networks/components/network_grid/useStyles.ts
@@ -6,26 +6,26 @@ const useStyles = () => {
   return {
     grid: css({
       display: "grid",
-      gridTemplateRows: "repeat(5, 1fr)",
       gridTemplateColumns: "repeat(2, 1fr)",
+      gridTemplateRows: "repeat(5, 1fr)",
       [theme.breakpoints.up("tablet")]: {
-        gridTemplateRows: "repeat(3, 1fr)",
         gridTemplateColumns: "repeat(5, 1fr)",
+        gridTemplateRows: "repeat(3, 1fr)",
       },
     }),
     root: css({
       "& .home__networks": {
-        padding: theme.spacing(3, 0, 12, 0),
         display: "grid",
+        gridGap: theme.spacing(2),
         gridTemplateColumns: `repeat(auto-fit, minmax(${theme.spacing(
           15,
         )}, 1fr))`,
         justifyContent: "space-between",
-        gridGap: theme.spacing(2),
+        padding: theme.spacing(3, 0, 12, 0),
         [theme.breakpoints.up("laptop")]: {
+          gridGap: theme.spacing(3),
           gridTemplateColumns: `repeat(5, minmax(${theme.spacing(15)}, 1fr))`,
           padding: theme.spacing(5, 0, 12, 0),
-          gridGap: theme.spacing(3),
         },
       },
     }),
diff --git a/src/screens/staking/components/networks/components/search_bar/index.tsx b/src/screens/staking/components/networks/components/search_bar/index.tsx
index 22024743..f21c9c7f 100644
--- a/src/screens/staking/components/networks/components/search_bar/index.tsx
+++ b/src/screens/staking/components/networks/components/search_bar/index.tsx
@@ -62,7 +62,7 @@ interface OptionsProps {
   props: HTMLAttributes<HTMLLIElement>;
 }
 
-const Options = ({ props, network }: OptionsProps) => {
+const Options = ({ network, props }: OptionsProps) => {
   const styles = useStyles();
 
   return (
@@ -171,8 +171,8 @@ const SearchBar = ({ sortedNetworks }: Props) => {
     const top = elementPosition + window.pageYOffset - headerOffset;
 
     window.scrollTo({
-      top,
       behavior: "smooth",
+      top,
     });
   }, []);
 
diff --git a/src/screens/staking/components/networks/components/search_bar/useStyles.ts b/src/screens/staking/components/networks/components/search_bar/useStyles.ts
index 7937fa00..99b82144 100644
--- a/src/screens/staking/components/networks/components/search_bar/useStyles.ts
+++ b/src/screens/staking/components/networks/components/search_bar/useStyles.ts
@@ -4,113 +4,52 @@ const useStyles = () => {
   const theme = useTheme();
 
   return {
-    root: {
-      [theme.breakpoints.down("tablet")]: {
-        width: "100%",
-      },
-      "&&.searchbox__focused": {
-        [theme.breakpoints.down("tablet")]: {
-          "position": "fixed !important",
-          "top": 0,
-          "left": 0,
-          "right": 0,
-          "zIndex": 10,
-          "height": theme.spacing(8),
-          "display": "flex",
-          "gap": theme.spacing(2),
-          "alignItems": "center",
-          "padding": theme.spacing(0, 2, 0, 4),
-          "backdropFilter": "blur(16px)",
-          "background":
-            "linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)",
-          "& .searchbox__cancel-btn": {
-            display: "inline-flex",
-          },
-        },
-      },
-      "& .MuiAutocomplete-inputRoot": {
-        backgroundColor: alpha(theme.palette.common.white, 0.2),
-      },
-      "&& .searchbox__cancel-btn": {
-        color: theme.palette.custom.forbole.indigo6,
-        display: "none",
-      },
-      "& .MuiAutocomplete-root": {
-        "width": "100%",
-        [theme.breakpoints.up("tablet")]: {
-          width: theme.spacing(36.375),
-          minWidth: theme.spacing(36.375),
-          height: theme.spacing(4.75),
-          float: "right",
-        },
-        "& .MuiInputBase-root": {
-          padding: `${theme.spacing(0.5, 2.25, 0.5, 2.25)} !important`,
-          mixBlendMode: "normal",
-          backdropFilter: "blur(4px)",
-          borderRadius: theme.spacing(3),
-          background: theme.palette.common.white,
-          border: "1px solid rgba(219, 219, 219, 0.2) !important" as any,
-          boxShadow:
-            "0px 6px 14px -6px rgb(2 38 225 / 12%), 0px 10px 32px -4px rgb(2 38 225 / 10%)",
-        },
-      },
-    },
-    textField: {
-      "& .MuiOutlinedInput-notchedOutline": {
-        border: "none",
-      },
-    },
     listItem: {
-      "height": `${theme.spacing(7)} !important`,
-      "display": "flex !important",
-      "flexFlow": "row nowrap !important",
-      "justifyContent": "space-between !important",
-      "alignItems": "center !important",
-      "cursor": "pointer !important",
-      "padding": `0 !important`,
       "& .MuiListItemIcon-root": {
-        "flex": `0 0 ${theme.spacing(7)} !important`,
-        "justifyContent": "center !important",
-        "width": theme.spacing(7),
         "& .image": {
-          display: "flex",
-          justifyContent: "center",
           alignItems: "center",
-          width: `${theme.spacing(4)} !important`,
-          height: `${theme.spacing(4)} !important`,
-          borderRadius: "100%",
-          padding: 0,
-          margin: 0,
           border: "1px solid rgba(177, 177, 242, 0.3)",
+          borderRadius: "100%",
           boxShadow:
             "0px 8px 22px -6px rgb(2 38 225 / 12%), 0px 14px 64px -4px rgb(2 38 225 / 12%)",
+          display: "flex",
+          height: `${theme.spacing(4)} !important`,
+          justifyContent: "center",
+          margin: 0,
+          padding: 0,
+          width: `${theme.spacing(4)} !important`,
         },
+        "flex": `0 0 ${theme.spacing(7)} !important`,
+        "justifyContent": "center !important",
+        "width": theme.spacing(7),
       },
       "& .MuiListItemText-root": {
-        flexFlow: "row wrap !important",
-        flex: `1 0 ${theme.spacing(3)} !important`,
-        padding: "0 !important",
         /* Neutral Color/Light Grey 01 */
         color: theme.palette.custom.forbole.indigo6,
+        flex: `1 0 ${theme.spacing(3)} !important`,
+        flexFlow: "row wrap !important",
+        fontSize: theme.typography.body2.fontSize,
         fontStyle: "normal",
         fontWeight: 600,
-        fontSize: theme.typography.body2.fontSize,
         lineHeight: 1.42,
+        padding: "0 !important",
       },
+      "alignItems": "center !important",
+      "cursor": "pointer !important",
+      "display": "flex !important",
+      "flexFlow": "row nowrap !important",
+      "height": `${theme.spacing(7)} !important`,
+      "justifyContent": "space-between !important",
+      "padding": `0 !important`,
     },
     paper: {
-      margin: theme.spacing(2, 0),
+      backdropFilter: "blur(24px)",
       /* Secondary Color/Royal Blue Transparent 04 */
       backgroundColor: alpha(theme.palette.primary.main, 0.9),
-      backdropFilter: "blur(24px)",
       borderRadius: theme.spacing(1.5),
+      margin: theme.spacing(2, 0),
     },
     popper: {
-      "zIndex": "2001 !important",
-      "& .MuiPaper-root": {
-        boxShadow:
-          "0px 6px 14px -6px rgb(2 38 225 / 12%), 0px 10px 32px -4px rgb(2 38 225 / 10%)",
-      },
       "& .MuiAutocomplete-listbox": {
         maxHeight: `calc(50vh - ${theme.spacing(10)})`,
         [theme.breakpoints.up("tablet")]: {
@@ -120,21 +59,82 @@ const useStyles = () => {
       "& .MuiAutocomplete-noOptions": {
         color: "#1D1E22",
       },
+      "& .MuiPaper-root": {
+        boxShadow:
+          "0px 6px 14px -6px rgb(2 38 225 / 12%), 0px 10px 32px -4px rgb(2 38 225 / 10%)",
+      },
       [theme.breakpoints.down("tablet")]: {
-        position: "fixed !important",
-        top: `${theme.spacing(8)} !important`,
-        bottom: "0 !important",
-        left: "0 !important",
-        right: "0 !important",
-        padding: `${theme.spacing(0, 4)} !important`,
-        width: "100% !important",
+        backdropFilter: "blur(16px)",
         backgroundColor:
           "linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) !important",
-        backdropFilter: "blur(16px)",
-        transform: "none !important",
+        bottom: "0 !important",
         /* Shadow/Secondary (Validator)/Drop Shadow 02 */
         boxShadow:
           "0px 6px 14px -6px rgba(2, 38, 225, 0.12), 0px 10px 32px -4px rgba(2, 38, 225, 0.1)",
+        left: "0 !important",
+        padding: `${theme.spacing(0, 4)} !important`,
+        position: "fixed !important",
+        right: "0 !important",
+        top: `${theme.spacing(8)} !important`,
+        transform: "none !important",
+        width: "100% !important",
+      },
+      "zIndex": "2001 !important",
+    },
+    root: {
+      "& .MuiAutocomplete-inputRoot": {
+        backgroundColor: alpha(theme.palette.common.white, 0.2),
+      },
+      "& .MuiAutocomplete-root": {
+        "& .MuiInputBase-root": {
+          backdropFilter: "blur(4px)",
+          background: theme.palette.common.white,
+          border: "1px solid rgba(219, 219, 219, 0.2) !important" as any,
+          borderRadius: theme.spacing(3),
+          boxShadow:
+            "0px 6px 14px -6px rgb(2 38 225 / 12%), 0px 10px 32px -4px rgb(2 38 225 / 10%)",
+          mixBlendMode: "normal",
+          padding: `${theme.spacing(0.5, 2.25, 0.5, 2.25)} !important`,
+        },
+        [theme.breakpoints.up("tablet")]: {
+          float: "right",
+          height: theme.spacing(4.75),
+          minWidth: theme.spacing(36.375),
+          width: theme.spacing(36.375),
+        },
+        "width": "100%",
+      },
+      "&& .searchbox__cancel-btn": {
+        color: theme.palette.custom.forbole.indigo6,
+        display: "none",
+      },
+      "&&.searchbox__focused": {
+        [theme.breakpoints.down("tablet")]: {
+          "& .searchbox__cancel-btn": {
+            display: "inline-flex",
+          },
+          "alignItems": "center",
+          "backdropFilter": "blur(16px)",
+          "background":
+            "linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)",
+          "display": "flex",
+          "gap": theme.spacing(2),
+          "height": theme.spacing(8),
+          "left": 0,
+          "padding": theme.spacing(0, 2, 0, 4),
+          "position": "fixed !important",
+          "right": 0,
+          "top": 0,
+          "zIndex": 10,
+        },
+      },
+      [theme.breakpoints.down("tablet")]: {
+        width: "100%",
+      },
+    },
+    textField: {
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: "none",
       },
     },
   };
diff --git a/src/screens/staking/components/why_forbole/index.tsx b/src/screens/staking/components/why_forbole/index.tsx
index 4ee2f5f3..41335e29 100644
--- a/src/screens/staking/components/why_forbole/index.tsx
+++ b/src/screens/staking/components/why_forbole/index.tsx
@@ -14,19 +14,19 @@ const WhyForbole = () => {
   const reasons = useMemo(
     () => [
       {
-        title: t("reputable validator"),
         desc: t("reputable validator desc"),
         image: "/images/assets/image_journey.png",
+        title: t("reputable validator"),
       },
       {
-        title: t("security focus"),
         desc: t("security focus desc"),
         image: "/images/assets/image_security.png",
+        title: t("security focus"),
       },
       {
-        title: t("our future"),
         desc: t("our future desc"),
         image: "/images/assets/image_future.png",
+        title: t("our future"),
       },
     ],
     [t],
diff --git a/src/screens/staking/index.tsx b/src/screens/staking/index.tsx
index bd4ae80b..49d67fc4 100644
--- a/src/screens/staking/index.tsx
+++ b/src/screens/staking/index.tsx
@@ -19,9 +19,9 @@ const Staking = () => {
 
   useEffect(() => {
     window.scrollTo({
+      behavior: "smooth",
       left: 0,
       top: 0,
-      behavior: "smooth",
     });
   }, []);
 
diff --git a/src/screens/tag/components/tag_posts/index.tsx b/src/screens/tag/components/tag_posts/index.tsx
index a4a865a1..3a569758 100644
--- a/src/screens/tag/components/tag_posts/index.tsx
+++ b/src/screens/tag/components/tag_posts/index.tsx
@@ -7,7 +7,7 @@ import Post from "@src/screens/blog/components/blog_posts/components/post";
 import * as styles from "./index.module.scss";
 import type { IProps } from "./interface";
 
-const TagPosts = ({ main, blogs, meta }: IProps) => {
+const TagPosts = ({ blogs, main, meta }: IProps) => {
   const currentPage = pathOr(0, ["pagination", "page"], meta);
   const totalPages = pathOr(0, ["pagination", "pages"], meta);
 
diff --git a/src/screens/tag/index.tsx b/src/screens/tag/index.tsx
index ccc6a8c1..73a5ec3b 100644
--- a/src/screens/tag/index.tsx
+++ b/src/screens/tag/index.tsx
@@ -9,7 +9,7 @@ import TagPosts from "./components/tag_posts";
 import { useBlogHook } from "./hooks";
 import * as styles from "./index.module.scss";
 
-const TagTitlePosts = ({ post, sidePosts = [], tags, meta, error }: any) => {
+const TagTitlePosts = ({ error, meta, post, sidePosts = [], tags }: any) => {
   const { t } = useTranslation("blog");
 
   useBlogHook(error, t);
diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
index 79cf4b02..175f71bf 100644
--- a/src/styles/theme/index.ts
+++ b/src/styles/theme/index.ts
@@ -8,29 +8,29 @@ const common: ThemeOptions = {
   breakpoints: {
     keys: ["mobile", "tablet", "laptop", "desktop"],
     values: {
+      desktop: 1208,
+      laptop: 1025,
       mobile: 375,
       tablet: 768,
-      laptop: 1025,
-      desktop: 1208,
     },
   },
-  typography: {
-    fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
-    h1: {
-      "fontSize": "32px",
-      "@media (min-width: 769px)": {
-        fontSize: "64px",
+  components: {
+    MuiTypography: {
+      defaultProps: {
+        lineHeight: "normal",
       },
     },
+  },
+  typography: {
     button: {
       textTransform: "none",
     },
-  },
-  components: {
-    MuiTypography: {
-      defaultProps: {
-        lineHeight: "normal",
+    fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
+    h1: {
+      "@media (min-width: 769px)": {
+        fontSize: "64px",
       },
+      "fontSize": "32px",
     },
   },
 };
diff --git a/src/styles/theme/light.ts b/src/styles/theme/light.ts
index 52eb9134..cf61e7ad 100644
--- a/src/styles/theme/light.ts
+++ b/src/styles/theme/light.ts
@@ -5,17 +5,6 @@ const backgroundDefault = "#FFFFFF";
 /** Custom theme overrides for dark mode */
 export const lightThemeOverride = {
   palette: {
-    mode: "light" as PaletteMode,
-    type: "light" as PaletteMode,
-    primary: {
-      main: "#FFFFFF",
-    },
-    secondary: {
-      main: "#4D2FC2",
-    },
-    text: {
-      primary: "#000000",
-    },
     background: {
       default: backgroundDefault,
     },
@@ -24,15 +13,26 @@ export const lightThemeOverride = {
         default: backgroundDefault,
       },
       forbole: {
-        red: "#BD081C",
-        indigo: "#362187",
-        purple: "#6061E4",
         blue: "#202A43",
+        grey02: "#C2C2C2",
+        indigo: "#362187",
         indigo04: "#5047BA",
         indigo6: "#2A1A6A",
-        grey02: "#C2C2C2",
         primary: "#FFFFFF",
+        purple: "#6061E4",
+        red: "#BD081C",
       },
     },
+    mode: "light" as PaletteMode,
+    primary: {
+      main: "#FFFFFF",
+    },
+    secondary: {
+      main: "#4D2FC2",
+    },
+    text: {
+      primary: "#000000",
+    },
+    type: "light" as PaletteMode,
   },
 };
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 5274efcc..2e225762 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,12 +1,12 @@
 import nodemailer from "nodemailer";
 
 export const transporter = nodemailer.createTransport({
-  service: "Mailgun",
-  host: "smtp.mailgun.org",
-  port: 465,
-  secure: true,
   auth: {
-    user: process.env.MAIL_GUN_USER,
     pass: process.env.MAIL_GUN_PW,
+    user: process.env.MAIL_GUN_USER,
   },
+  host: "smtp.mailgun.org",
+  port: 465,
+  secure: true,
+  service: "Mailgun",
 });
diff --git a/src/utils/apollo.tsx b/src/utils/apollo.tsx
index 632f87ac..9149216f 100644
--- a/src/utils/apollo.tsx
+++ b/src/utils/apollo.tsx
@@ -2,8 +2,8 @@ import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import type { PropsWithChildren } from "react";
 
 const apolloClient = new ApolloClient({
-  uri: process.env.NEXT_PUBLIC_GRAPHQL_API,
   cache: new InMemoryCache(),
+  uri: process.env.NEXT_PUBLIC_GRAPHQL_API,
 });
 
 // This is a big library so it should only be imported on the specific screens
diff --git a/src/utils/ghost.ts b/src/utils/ghost.ts
index 4904bb51..db05286f 100644
--- a/src/utils/ghost.ts
+++ b/src/utils/ghost.ts
@@ -57,8 +57,8 @@ export const getBlogPostSchema = (
 
   const common = {
     "@context": "https://schema.org",
-    "name": title,
     "image": featureImage,
+    "name": title,
     "url": `https://www.forbole.com/${isGuide ? "staking" : "blog"}/${
       post.slug
     }`,
@@ -79,8 +79,8 @@ export const getBlogPostSchema = (
     "@type": "TechArticle",
     "headline": title,
     ...(excerpt && { abstract: excerpt }),
-    "inLanguage": getLanguageFromLocale(locale),
-    "datePublished": publishedAt,
     author,
+    "datePublished": publishedAt,
+    "inLanguage": getLanguageFromLocale(locale),
   });
 };
diff --git a/src/utils/network_functions.ts b/src/utils/network_functions.ts
index 2b877ca6..19a6c34f 100644
--- a/src/utils/network_functions.ts
+++ b/src/utils/network_functions.ts
@@ -26,10 +26,10 @@ const nanoLikeToLike = defaultConverter(1000000000);
 const uEGLDToEGLD = defaultConverter(1000000000000000000);
 
 const defaultFunctions = (converter: any) => ({
+  converter,
   gecko: "",
   marketPrice: (data: any) =>
     toFixed(Number(data?.market_data?.current_price?.usd || 0)),
-  converter,
 });
 
 const cosmos = clone(defaultFunctions(uAtomToAtom));
diff --git a/src/utils/network_info.ts b/src/utils/network_info.ts
index d0a78869..c53c5e69 100644
--- a/src/utils/network_info.ts
+++ b/src/utils/network_info.ts
@@ -23,29 +23,6 @@ export type Network = {
 interface IStringIndex extends Record<string, Network> {}
 
 const logos: IStringIndex = {
-  "cosmos": {
-    address: "cosmosvaloper14kn0kk33szpwus9nh8n87fjel8djx0y070ymmj",
-    bigDipper: "https://cosmos.bigdipper.live/",
-    calculator: {
-      bonded: "http://lcd.cosmoshub.bigdipper.live/staking/pool",
-      inflation: "http://lcd.cosmoshub.bigdipper.live/minting/inflation",
-      supply: "http://lcd.cosmoshub.bigdipper.live/supply/total/uatom",
-      stakingParams:
-        "http://lcd.cosmoshub.bigdipper.live/staking/validators/cosmosvaloper14kn0kk33szpwus9nh8n87fjel8djx0y070ymmj",
-    },
-    color: "#ba3fd9",
-    delegate:
-      "https://cosmos.bigdipper.live/validators/cosmosvaloper14kn0kk33szpwus9nh8n87fjel8djx0y070ymmj/delegate",
-    denom: "ATOM",
-    graphql: "cosmos",
-    guide: "how-to-stake-atom-on-cosmos-hub",
-    heightSocket: "wss://ws.cosmoshub.forbole.com",
-    image: "/images/network/cosmos_hub.png",
-    key: "cosmos",
-    label: "Cosmos Hub - ATOM",
-    name: "Cosmos Hub",
-    value: "cosmos",
-  },
   "agoric": {
     address: "agoricvaloper1pcc069wu2utgnf5qsm6n2pk2x8xt6cah954t4g",
     bigDipper: "https://testnet.explorer.agoric.net/",
@@ -56,8 +33,8 @@ const logos: IStringIndex = {
     guide: "how-to-stake-bld-on-agoric",
     image: "/images/network/agoric.png",
     key: "agoric",
-    name: "Agoric",
     label: "Agoric - BLD",
+    name: "Agoric",
   },
   "akash": {
     address: "akashvaloper14kn0kk33szpwus9nh8n87fjel8djx0y0uzn073",
@@ -81,6 +58,60 @@ const logos: IStringIndex = {
     label: "Akash - AKT",
     name: "Akash",
   },
+  "archway": {
+    address: "archwayvaloper1esg4kluvdkfcxl0atcf2us2p9m9y9sjjsu04ex",
+    denom: "ARCH",
+    graphql: "archway",
+    guide: "how-to-stake-arch-on-archway-network",
+    image: "/images/network/archway.svg",
+    key: "archway",
+    label: "Archway",
+    name: "Archway",
+  },
+  "assetmantle": {
+    address: "mantlevaloper14kn0kk33szpwus9nh8n87fjel8djx0y09q0ln7",
+    delegate: "https://wallet.assetmantle.one/",
+    denom: "mntl",
+    graphql: "assetmantle",
+    guide: "how-to-stake-mntl-on-assetmantle",
+    image: "/images/network/assetmantle.png",
+    key: "assetmantle",
+    label: "Assetmantle - MNTL",
+    name: "Assetmantle",
+  },
+  "axelar": {
+    address: "axelarvaloper1r7ppsrmzpslqu3d3yf344kzjv32n9dn4xyt0sw",
+    delegate: "https://wallet.keplr.app/chains/axelar",
+    denom: "axl",
+    graphql: "axelar",
+    guide: "how-to-stake-axl-on-axelar",
+    image: "/images/network/axelar.png",
+    key: "axelar",
+    label: "Axelar - AXL",
+    name: "Axelar",
+  },
+  "band": {
+    address: "bandvaloper14kn0kk33szpwus9nh8n87fjel8djx0y0wz502z",
+    delegate: "https://atomicwallet.io/band-staking",
+    denom: "band",
+    graphql: "band",
+    guide: "how-to-stake-band-on-band-protocol",
+    image: "/images/network/band_protocol.png",
+    key: "band",
+    label: "Band Protocol - BAND",
+    name: "Band Protocol",
+  },
+  "bitcanna": {
+    address: "bcnavaloper1kkpevanspcg0zkxhnvptjszus52svxpcwe32yp",
+    delegate: "https://wallet.bitcanna.io/",
+    denom: "bcna",
+    graphql: "bitcanna",
+    guide: "how-to-stake-bcna-on-bitcanna",
+    image: "/images/network/bitcanna.png",
+    key: "bitcanna",
+    label: "BitCanna - BCNA",
+    name: "Bitcanna",
+  },
   "bitsong": {
     address: "bitsongvaloper125hdkukw4pu2urhj4nv366q0avdqv24twga2kd",
     delegate: "https://wallet.bitsong.io/#/authentication/login",
@@ -92,6 +123,98 @@ const logos: IStringIndex = {
     label: "BitSong - BTSG",
     name: "BitSong",
   },
+  "celer": {
+    denom: "CELER",
+    graphql: "celer",
+    image: "/images/network/celer.png",
+    key: "celer",
+    name: "Celer",
+  },
+  "celestia": {
+    denom: "tia",
+    graphql: "celestia",
+    image: "/images/network/celestia.svg",
+    key: "celestia",
+    label: "Celestia - TIA",
+    name: "Celestia",
+  },
+  "cheqd": {
+    address: "cheqdvaloper1pknp3fyss23xeezcj6ypd8pl6d2ql4758zpxej",
+    delegate: "https://wallet.cheqd.io",
+    denom: "cheq",
+    graphql: "cheqd",
+    guide: "how-to-stake-cheq-on-cheqd",
+    image: "/images/network/cheqd.svg",
+    key: "cheqd",
+    label: "CHEQD Network - CHEQ",
+    name: "Cheqd",
+  },
+  "chihuahua": {
+    address: "chihuahuavaloper14kn0kk33szpwus9nh8n87fjel8djx0y0teaa9l",
+    delegate: "https://chihuahua.omniflix.co/",
+    denom: "huahua",
+    graphql: "chihuahua",
+    guide: "how-to-stake-huahua-on-chihuahua",
+    image: "/images/network/chihuahua.png",
+    key: "chihuahua",
+    label: "Chihuahua Chain - HUAHUA",
+    name: "Chihuahua",
+  },
+  "comdex": {
+    address: "comdexvaloper1e4wjh48ks5j5d9702d35q360ffmf3jj2xpuf3f",
+    delegate: "https://comdex.omniflix.co/",
+    denom: "cmdx",
+    graphql: "comdex",
+    guide: "how-to-stake-cmdx-on-comdex",
+    image: "/images/network/comdex.png",
+    key: "comdex",
+    label: "Comdex - CMDX",
+    name: "Comdex",
+  },
+  "coreum": {
+    address: "corevaloper1k3wy8ztt2e0uq3j5deukjxu2um4a4z5tvz35la",
+    denom: "CORE",
+    graphql: "coreum",
+    guide: "how-to-stake-core-on-coreum",
+    image: "/images/network/coreum.svg",
+    key: "coreum",
+    label: "Coreum - CORE",
+    name: "Coreum",
+  },
+  "cosmos": {
+    address: "cosmosvaloper14kn0kk33szpwus9nh8n87fjel8djx0y070ymmj",
+    bigDipper: "https://cosmos.bigdipper.live/",
+    calculator: {
+      bonded: "http://lcd.cosmoshub.bigdipper.live/staking/pool",
+      inflation: "http://lcd.cosmoshub.bigdipper.live/minting/inflation",
+      stakingParams:
+        "http://lcd.cosmoshub.bigdipper.live/staking/validators/cosmosvaloper14kn0kk33szpwus9nh8n87fjel8djx0y070ymmj",
+      supply: "http://lcd.cosmoshub.bigdipper.live/supply/total/uatom",
+    },
+    color: "#ba3fd9",
+    delegate:
+      "https://cosmos.bigdipper.live/validators/cosmosvaloper14kn0kk33szpwus9nh8n87fjel8djx0y070ymmj/delegate",
+    denom: "ATOM",
+    graphql: "cosmos",
+    guide: "how-to-stake-atom-on-cosmos-hub",
+    heightSocket: "wss://ws.cosmoshub.forbole.com",
+    image: "/images/network/cosmos_hub.png",
+    key: "cosmos",
+    label: "Cosmos Hub - ATOM",
+    name: "Cosmos Hub",
+    value: "cosmos",
+  },
+  "crescent": {
+    address: "crevaloper1ls9w867xu0q5zjze5vrakfa2zluahtv44gwn7y",
+    delegate: "https://crescent.disperze.network/",
+    denom: "cre",
+    graphql: "crescent",
+    guide: "how-to-stake-cre-on-crescent",
+    image: "/images/network/crescent.png",
+    key: "crescent",
+    label: "Crescent Network - CRE",
+    name: "Crescent",
+  },
   "crypto.org": {
     address: "crocncl15xphw2m025acwnjd2ucq9t5ku4ggaqyecekzqa",
     bigDipper: "https://crypto-org.bigdipper.live/",
@@ -119,9 +242,9 @@ const logos: IStringIndex = {
     calculator: {
       bonded: "http://lcd.emoney.forbole.com/staking/pool",
       inflation: "http://lcd.emoney.forbole.com/minting/inflation",
-      supply: "http://lcd.emoney.forbole.com/supply/total/nanolike",
       stakingParams:
         "http://lcd.emoney.forbole.com/staking/validators/emoneyvaloper1293pqwtzu67zp8txuya4yts03ccw5kgf98hz9y",
+      supply: "http://lcd.emoney.forbole.com/supply/total/nanolike",
     },
     color: "#1e5877",
     delegate:
@@ -135,6 +258,21 @@ const logos: IStringIndex = {
     label: "e-Money - NGM",
     name: "eMoney",
   },
+  "elrond": {
+    address: "erd1qqqqqqqqqqqqqqqpqqqqqqqqqqqqqqqqqqqqqqqqqqqqq40llllsfjmn54",
+    denom: "egld",
+    graphql: "elrond",
+    image: "/images/network/elrond.png",
+    key: "elrond",
+    name: "MultiversX",
+  },
+  "ethereum": {
+    denom: "ETH",
+    graphql: "ethereum",
+    image: "/images/network/ethereum.svg",
+    key: "ethereum",
+    name: "Ethereum",
+  },
   "evmos": {
     address: "evmosvaloper1ak9t7kwk44azu6cefqdydqmy3hen28nvdjjvz0",
     delegate: "https://app.evmos.org/staking",
@@ -158,91 +296,50 @@ const logos: IStringIndex = {
     label: "Fetch.ai - FET",
     name: "Fetch.ai",
   },
-  "comdex": {
-    address: "comdexvaloper1e4wjh48ks5j5d9702d35q360ffmf3jj2xpuf3f",
-    delegate: "https://comdex.omniflix.co/",
-    denom: "cmdx",
-    graphql: "comdex",
-    guide: "how-to-stake-cmdx-on-comdex",
-    image: "/images/network/comdex.png",
-    key: "comdex",
-    label: "Comdex - CMDX",
-    name: "Comdex",
-  },
-  "axelar": {
-    address: "axelarvaloper1r7ppsrmzpslqu3d3yf344kzjv32n9dn4xyt0sw",
-    delegate: "https://wallet.keplr.app/chains/axelar",
-    denom: "axl",
-    graphql: "axelar",
-    guide: "how-to-stake-axl-on-axelar",
-    image: "/images/network/axelar.png",
-    key: "axelar",
-    label: "Axelar - AXL",
-    name: "Axelar",
+  "gitopia": {
+    denom: "LORE",
+    graphql: "gitopia",
+    guide: "how-to-stake-lore-on-gitopia",
+    image: "/images/network/gitopia.svg",
+    key: "gitopia",
+    label: "Gitopia - LORE",
+    name: "Gitopia",
   },
-  "bitcanna": {
-    address: "bcnavaloper1kkpevanspcg0zkxhnvptjszus52svxpcwe32yp",
-    delegate: "https://wallet.bitcanna.io/",
-    denom: "bcna",
-    graphql: "bitcanna",
-    guide: "how-to-stake-bcna-on-bitcanna",
-    image: "/images/network/bitcanna.png",
-    key: "bitcanna",
-    label: "BitCanna - BCNA",
-    name: "Bitcanna",
+  "gravity_bridge": {
+    address: "gravityvaloper1xwkkam88aep5jcu2hcj0a2hy79eyvcw6yhfgv6",
+    delegate: "https://wallet.keplr.app/chains/gravity-bridge",
+    denom: "GRAVITON",
+    graphql: "gravitybridge",
+    guide: "how-to-stake-grav-on-gravity-bridge",
+    image: "/images/network/gravity_bridge.png",
+    key: "gravity_bridge",
+    label: "Gravity Bridge - GRAVITON",
+    name: "Gravity Bridge",
   },
-  "cheqd": {
-    address: "cheqdvaloper1pknp3fyss23xeezcj6ypd8pl6d2ql4758zpxej",
-    delegate: "https://wallet.cheqd.io",
-    denom: "cheq",
-    graphql: "cheqd",
-    guide: "how-to-stake-cheq-on-cheqd",
-    image: "/images/network/cheqd.svg",
-    key: "cheqd",
-    label: "CHEQD Network - CHEQ",
-    name: "Cheqd",
+  "humansai": {
+    denom: "HEART",
+    graphql: "humansai",
+    image: "/images/network/humansai.svg",
+    key: "humansai",
+    label: "",
+    name: "Humans.ai",
   },
-  "chihuahua": {
-    address: "chihuahuavaloper14kn0kk33szpwus9nh8n87fjel8djx0y0teaa9l",
-    delegate: "https://chihuahua.omniflix.co/",
-    denom: "huahua",
-    graphql: "chihuahua",
-    guide: "how-to-stake-huahua-on-chihuahua",
-    image: "/images/network/chihuahua.png",
-    key: "chihuahua",
-    label: "Chihuahua Chain - HUAHUA",
-    name: "Chihuahua",
-  },
-  "terra_classic": {
-    address: "terravaloper1v6pfkm0nxpudgantwxwhz786l8me0wfs4lnpuw",
-    denom: "LUNC",
-    graphql: "terra_classic",
-    image: "/images/network/terra_classic.png",
-    key: "terra_classic",
-    label: "Terra Classic - LUNC",
-    name: "Terra Classic",
-  },
-  "persistence": {
-    address: "persistencevaloper17qamc7jjwfr6ye7cffranxkgxfum6esxe89vvv",
-    delegate: "https://wallet.keplr.app/chains/persistence",
-    denom: "xprt",
-    graphql: "persistence",
-    guide: "how-to-stake-xprt-on-persistence",
-    image: "/images/network/persistence.png",
-    key: "persistence",
-    label: "Persistence - XPRT",
-    name: "Persistence",
+  "injective": {
+    address: "injvaloper12s9d7l53ef2c8avrn7pgd6dfeeg2yzel58ztfx",
+    denom: "inj",
+    graphql: "injective",
+    image: "/images/network/injective.png",
+    key: "injective",
+    label: "Injective - INJ",
+    name: "Injective",
   },
-  "crescent": {
-    address: "crevaloper1ls9w867xu0q5zjze5vrakfa2zluahtv44gwn7y",
-    delegate: "https://crescent.disperze.network/",
-    denom: "cre",
-    graphql: "crescent",
-    guide: "how-to-stake-cre-on-crescent",
-    image: "/images/network/crescent.png",
-    key: "crescent",
-    label: "Crescent Network - CRE",
-    name: "Crescent",
+  "islamic_coin": {
+    denom: "",
+    graphql: "islamic_coin",
+    image: "/images/network/islamic_coin.png",
+    key: "islamic_coin",
+    label: "",
+    name: "Islamic Coin",
   },
   "ixo": {
     address: "ixovaloper1dvr6jp0j7jqjrzqp4xz333h2s85pxvzgzsdula",
@@ -255,14 +352,13 @@ const logos: IStringIndex = {
     label: "IXO - IXO",
     name: "ixo",
   },
-  "injective": {
-    address: "injvaloper12s9d7l53ef2c8avrn7pgd6dfeeg2yzel58ztfx",
-    denom: "inj",
-    graphql: "injective",
-    image: "/images/network/injective.png",
-    key: "injective",
-    label: "Injective - INJ",
-    name: "Injective",
+  "jackal": {
+    denom: "JKL",
+    graphql: "jackal",
+    image: "/images/network/jackal.png",
+    key: "jackal",
+    label: "Jackal Protocol - JKL",
+    name: "Jackal Protocol",
   },
   "juno": {
     address: "junovaloper1pvwqfze548z95sdhun58trrvxhlhfrvky5ejtk",
@@ -286,16 +382,13 @@ const logos: IStringIndex = {
     label: "Kava - KAVA",
     name: "Kava",
   },
-  "band": {
-    address: "bandvaloper14kn0kk33szpwus9nh8n87fjel8djx0y0wz502z",
-    delegate: "https://atomicwallet.io/band-staking",
-    denom: "band",
-    graphql: "band",
-    guide: "how-to-stake-band-on-band-protocol",
-    image: "/images/network/band_protocol.png",
-    key: "band",
-    label: "Band Protocol - BAND",
-    name: "Band Protocol",
+  "kyve": {
+    denom: "KYVE",
+    graphql: "kyve",
+    image: "/images/network/kyve.svg",
+    key: "kyve",
+    label: "",
+    name: "KYVE",
   },
   "likecoin": {
     address: "likevaloper1v8njts96gl5eqstnen4gksdy5k860fau6nxc04",
@@ -308,16 +401,84 @@ const logos: IStringIndex = {
     label: "Likecoin - LIKE",
     name: "Likecoin",
   },
-  "assetmantle": {
-    address: "mantlevaloper14kn0kk33szpwus9nh8n87fjel8djx0y09q0ln7",
-    delegate: "https://wallet.assetmantle.one/",
-    denom: "mntl",
-    graphql: "assetmantle",
-    guide: "how-to-stake-mntl-on-assetmantle",
-    image: "/images/network/assetmantle.png",
-    key: "assetmantle",
-    label: "Assetmantle - MNTL",
-    name: "Assetmantle",
+  "mars": {
+    address: "marsvaloper1799t9vxshqssrk5cgnywvlx0fnlk2ekdz328aa",
+    delegate:
+      "https://explorer.marsprotocol.io/validators/marsvaloper1799t9vxshqssrk5cgnywvlx0fnlk2ekdz328aa",
+    denom: "MARS",
+    graphql: "mars",
+    guide: "how-to-stake-mars-on-mars-hub",
+    image: "/images/network/mars.png",
+    key: "mars",
+    label: "Mars Protocol - MARS",
+    name: "Mars Protocol",
+  },
+  "multiversx": {
+    denom: "",
+    graphql: "multiversx",
+    image: "/images/network/multiversx.png",
+    key: "multiversx",
+    label: "",
+    name: "MultiversX",
+  },
+  "neutron": {
+    denom: "",
+    graphql: "neutron",
+    image: "/images/network/neutron.svg",
+    key: "neutron",
+    label: "",
+    name: "Neutron",
+  },
+  "nolus": {
+    denom: "NLS",
+    graphql: "nolus",
+    image: "/images/network/nolus.svg",
+    key: "nolus",
+    label: "",
+    name: "Nolus",
+  },
+  "nomic": {
+    address: "nomic1yvzvykkvqruhrvwn7776tm6ppmaf4gcnazas2e",
+    delegate: "https://app.nomic.io/",
+    denom: "NOM",
+    graphql: "nomic",
+    guide: "how-to-stake-nom-on-nomic",
+    image: "/images/network/nomic.png",
+    key: "nomic",
+    name: "Nomic Network",
+  },
+  "nym": {
+    denom: "NYX",
+    graphql: "nym",
+    image: "/images/network/nym.svg",
+    key: "nym",
+    label: "NYM - NYX",
+    name: "NYM",
+  },
+  "oasis": {
+    address: "oasis1qrtq873ddwnnjqyv66ezdc9ql2a07l37d5vae9k0",
+    denom: "ROSE",
+    graphql: "oasis",
+    guide: "how-to-stake-rose-on-oasis-network",
+    image: "/images/network/oasis.png",
+    key: "oasis",
+    name: "Oasis Network",
+  },
+  "omniflix": {
+    denom: "FLIX",
+    graphql: "omniflix",
+    image: "/images/network/omniflix.png",
+    key: "omniflix",
+    label: "Omniflix Network - FLIX",
+    name: "Omniflix Network",
+  },
+  "onomy": {
+    denom: "NOM",
+    graphql: "onomy",
+    image: "/images/network/onomy.png",
+    key: "onomy",
+    label: "Onomy Protocol - NOM",
+    name: "Onomy Protocol",
   },
   "osmosis": {
     address: "osmovaloper14kn0kk33szpwus9nh8n87fjel8djx0y0fhtak5",
@@ -330,6 +491,33 @@ const logos: IStringIndex = {
     label: "Osmosis - OSMO",
     name: "Osmosis",
   },
+  "passage": {
+    address: "pasgvaloper1kq4lp40qwce50p4z7lef9sw9c5379yljegwjna",
+    denom: "PASG",
+    graphql: "passage",
+    image: "/images/network/passage.png",
+    key: "passage",
+    name: "Passage",
+  },
+  "persistence": {
+    address: "persistencevaloper17qamc7jjwfr6ye7cffranxkgxfum6esxe89vvv",
+    delegate: "https://wallet.keplr.app/chains/persistence",
+    denom: "xprt",
+    graphql: "persistence",
+    guide: "how-to-stake-xprt-on-persistence",
+    image: "/images/network/persistence.png",
+    key: "persistence",
+    label: "Persistence - XPRT",
+    name: "Persistence",
+  },
+  "picasso": {
+    denom: "PICA",
+    graphql: "picasso",
+    image: "/images/network/picasso.svg",
+    key: "picasso",
+    label: "Picasso - PICA",
+    name: "Picasso",
+  },
   "provenance": {
     address: "pbvaloper1plh34z4gmfcypecdzudcfhytcyeulyxj0l8t75",
     denom: "hash",
@@ -338,6 +526,28 @@ const logos: IStringIndex = {
     key: "provenance",
     name: "Provenance",
   },
+  "quasar": {
+    denom: "qsr",
+    graphql: "quasar",
+    image: "/images/network/quasar.svg",
+    key: "quasar",
+    label: "Quasar - QSR",
+    name: "Quasar",
+  },
+  "quicksilver": {
+    denom: "QCK",
+    graphql: "quicksilver",
+    image: "/images/network/quicksilver.png",
+    key: "quicksilver",
+    name: "Quicksilver Protocol",
+  },
+  "radix": {
+    denom: "XRD",
+    graphql: "radix",
+    image: "/images/network/radix.png",
+    key: "radix",
+    name: "Radix",
+  },
   "regen": {
     address: "regenvaloper14kn0kk33szpwus9nh8n87fjel8djx0y0c7xhe5",
     denom: "regen",
@@ -347,6 +557,14 @@ const logos: IStringIndex = {
     label: "Regen - REGEN",
     name: "Regen",
   },
+  "rizon": {
+    denom: "atolo",
+    graphql: "rizon",
+    image: "/images/network/rizon.svg",
+    key: "rizon",
+    label: "Rizon - ATOLO",
+    name: "Rizon",
+  },
   "secret": {
     address: "secretvaloper1kvp570cd6zvzh8ffrhz7lmytt6v6u2gxz8tl0g",
     delegate: "https://wallet.keplr.app/chains/secret-network",
@@ -369,6 +587,24 @@ const logos: IStringIndex = {
     label: "Sentinel - DVPN",
     name: "Sentinel",
   },
+
+  "solana": {
+    address: "76nwV8zz8tLz97SBRXH6uwHvgHXtqJDLQfF66jZhQ857",
+    denom: "SOL",
+    graphql: "solana",
+    guide: "how-to-stake-sol-on-solana",
+    image: "/images/network/solana.png",
+    key: "solana",
+    label: "Solana - SOL",
+    name: "Solana",
+  },
+  "ssv": {
+    denom: "SSV",
+    graphql: "ssv",
+    image: "/images/network/ssv.png",
+    key: "ssv",
+    name: "SSV Network",
+  },
   "stafihub": {
     address: "stafivaloper1pvwqfze548z95sdhun58trrvxhlhfrvkwtr9vz",
     denom: "fis",
@@ -378,140 +614,6 @@ const logos: IStringIndex = {
     label: "Stafi - FIS",
     name: "Stafihub",
   },
-  "stride": {
-    address: "stridevaloper19d8a9dr4kh85zcl5kq7fj64ad9r9dqfky93dgq",
-    delegate: "https://wallet.keplr.app/chains/stride",
-    denom: "strd",
-    graphql: "stride",
-    guide: "how-to-stake-strd-on-stride",
-    image: "/images/network/stride.png",
-    key: "stride",
-    label: "Stride - STRD",
-    name: "Stride",
-  },
-  "elrond": {
-    address: "erd1qqqqqqqqqqqqqqqpqqqqqqqqqqqqqqqqqqqqqqqqqqqqq40llllsfjmn54",
-    denom: "egld",
-    graphql: "elrond",
-    image: "/images/network/elrond.png",
-    key: "elrond",
-    name: "MultiversX",
-  },
-  "solana": {
-    address: "76nwV8zz8tLz97SBRXH6uwHvgHXtqJDLQfF66jZhQ857",
-    denom: "SOL",
-    graphql: "solana",
-    guide: "how-to-stake-sol-on-solana",
-    image: "/images/network/solana.png",
-    key: "solana",
-    label: "Solana - SOL",
-    name: "Solana",
-  },
-  "ethereum": {
-    denom: "ETH",
-    graphql: "ethereum",
-    image: "/images/network/ethereum.svg",
-    key: "ethereum",
-    name: "Ethereum",
-  },
-  "gravity_bridge": {
-    address: "gravityvaloper1xwkkam88aep5jcu2hcj0a2hy79eyvcw6yhfgv6",
-    delegate: "https://wallet.keplr.app/chains/gravity-bridge",
-    denom: "GRAVITON",
-    graphql: "gravitybridge",
-    guide: "how-to-stake-grav-on-gravity-bridge",
-    image: "/images/network/gravity_bridge.png",
-    key: "gravity_bridge",
-    label: "Gravity Bridge - GRAVITON",
-    name: "Gravity Bridge",
-  },
-  "jackal": {
-    denom: "JKL",
-    graphql: "jackal",
-    image: "/images/network/jackal.png",
-    key: "jackal",
-    label: "Jackal Protocol - JKL",
-    name: "Jackal Protocol",
-  },
-  "terra": {
-    denom: "LUNA",
-    graphql: "terra",
-    image: "/images/network/terra.png",
-    key: "terra",
-    label: "Terra - LUNA",
-    name: "Terra",
-  },
-  "nomic": {
-    address: "nomic1yvzvykkvqruhrvwn7776tm6ppmaf4gcnazas2e",
-    delegate: "https://app.nomic.io/",
-    denom: "NOM",
-    graphql: "nomic",
-    guide: "how-to-stake-nom-on-nomic",
-    image: "/images/network/nomic.png",
-    key: "nomic",
-    name: "Nomic Network",
-  },
-  "nym": {
-    denom: "NYX",
-    graphql: "nym",
-    image: "/images/network/nym.svg",
-    key: "nym",
-    label: "NYM - NYX",
-    name: "NYM",
-  },
-  "oasis": {
-    address: "oasis1qrtq873ddwnnjqyv66ezdc9ql2a07l37d5vae9k0",
-    denom: "ROSE",
-    graphql: "oasis",
-    guide: "how-to-stake-rose-on-oasis-network",
-    image: "/images/network/oasis.png",
-    key: "oasis",
-    name: "Oasis Network",
-  },
-  "omniflix": {
-    denom: "FLIX",
-    graphql: "omniflix",
-    image: "/images/network/omniflix.png",
-    key: "omniflix",
-    label: "Omniflix Network - FLIX",
-    name: "Omniflix Network",
-  },
-  "passage": {
-    address: "pasgvaloper1kq4lp40qwce50p4z7lef9sw9c5379yljegwjna",
-    denom: "PASG",
-    graphql: "passage",
-    image: "/images/network/passage.png",
-    key: "passage",
-    name: "Passage",
-  },
-  "celer": {
-    denom: "CELER",
-    graphql: "celer",
-    image: "/images/network/celer.png",
-    key: "celer",
-    name: "Celer",
-  },
-  "quicksilver": {
-    denom: "QCK",
-    graphql: "quicksilver",
-    image: "/images/network/quicksilver.png",
-    key: "quicksilver",
-    name: "Quicksilver Protocol",
-  },
-  "radix": {
-    denom: "XRD",
-    graphql: "radix",
-    image: "/images/network/radix.png",
-    key: "radix",
-    name: "Radix",
-  },
-  "ssv": {
-    denom: "SSV",
-    graphql: "ssv",
-    image: "/images/network/ssv.png",
-    key: "ssv",
-    name: "SSV Network",
-  },
   "stargaze": {
     address: "starsvaloper12k8za208e5kt0j34w6au6v8py6t6cat2sqjzvw",
     delegate: "https://wallet.keplr.app/chains/stargaze",
@@ -523,6 +625,28 @@ const logos: IStringIndex = {
     label: "Stargaze - STARS",
     name: "Stargaze",
   },
+  "stride": {
+    address: "stridevaloper19d8a9dr4kh85zcl5kq7fj64ad9r9dqfky93dgq",
+    delegate: "https://wallet.keplr.app/chains/stride",
+    denom: "strd",
+    graphql: "stride",
+    guide: "how-to-stake-strd-on-stride",
+    image: "/images/network/stride.png",
+    key: "stride",
+    label: "Stride - STRD",
+    name: "Stride",
+  },
+  "sui": {
+    address:
+      "0x1e1985024aafe50a8e4eafc5a89eb7ecd58ba08c39f37688bee00bd55c8b2059",
+    denom: "SUI",
+    graphql: "sui",
+    guide: "how-to-stake-sui-on-sui-network",
+    image: "/images/network/sui.svg",
+    key: "sui",
+    label: "Sui - SUI",
+    name: "Sui",
+  },
   "teritori": {
     address: "torivaloper138664l4407d7hfwe8a82q25fk4vht53j9yl3e9",
     delegate: "https://explorer.teritori.com/teritori",
@@ -534,6 +658,23 @@ const logos: IStringIndex = {
     label: "Teritori - TORI",
     name: "Teritori",
   },
+  "terra": {
+    denom: "LUNA",
+    graphql: "terra",
+    image: "/images/network/terra.png",
+    key: "terra",
+    label: "Terra - LUNA",
+    name: "Terra",
+  },
+  "terra_classic": {
+    address: "terravaloper1v6pfkm0nxpudgantwxwhz786l8me0wfs4lnpuw",
+    denom: "LUNC",
+    graphql: "terra_classic",
+    image: "/images/network/terra_classic.png",
+    key: "terra_classic",
+    label: "Terra Classic - LUNC",
+    name: "Terra Classic",
+  },
   "tgrade": {
     denom: "TGD",
     graphql: "tgrade",
@@ -541,11 +682,13 @@ const logos: IStringIndex = {
     key: "tgrade",
     name: "Tgrade",
   },
-  "wormhole": {
-    graphql: "wormhole",
-    image: "/images/network/wormhole.png",
-    key: "wormhole",
-    name: "Wormhole",
+  "ununifi": {
+    denom: "GUU",
+    graphql: "ununifi",
+    image: "/images/network/ununifi.png",
+    key: "ununifi",
+    label: "Ununifi - GUU",
+    name: "Ununifi",
   },
   "vsys": {
     denom: "VSYS",
@@ -554,13 +697,12 @@ const logos: IStringIndex = {
     key: "vsys",
     name: "V Systems",
   },
-  "ununifi": {
-    denom: "GUU",
-    graphql: "ununifi",
-    image: "/images/network/ununifi.png",
-    key: "ununifi",
-    label: "Ununifi - GUU",
-    name: "Ununifi",
+
+  "wormhole": {
+    graphql: "wormhole",
+    image: "/images/network/wormhole.png",
+    key: "wormhole",
+    name: "Wormhole",
   },
   "xpla": {
     denom: "XPLA",
@@ -570,148 +712,6 @@ const logos: IStringIndex = {
     label: "XPLA - XPLA",
     name: "XPLA",
   },
-  "onomy": {
-    denom: "NOM",
-    graphql: "onomy",
-    image: "/images/network/onomy.png",
-    key: "onomy",
-    label: "Onomy Protocol - NOM",
-    name: "Onomy Protocol",
-  },
-  "mars": {
-    address: "marsvaloper1799t9vxshqssrk5cgnywvlx0fnlk2ekdz328aa",
-    delegate:
-      "https://explorer.marsprotocol.io/validators/marsvaloper1799t9vxshqssrk5cgnywvlx0fnlk2ekdz328aa",
-    denom: "MARS",
-    graphql: "mars",
-    guide: "how-to-stake-mars-on-mars-hub",
-    image: "/images/network/mars.png",
-    key: "mars",
-    label: "Mars Protocol - MARS",
-    name: "Mars Protocol",
-  },
-
-  "archway": {
-    address: "archwayvaloper1esg4kluvdkfcxl0atcf2us2p9m9y9sjjsu04ex",
-    denom: "ARCH",
-    graphql: "archway",
-    guide: "how-to-stake-arch-on-archway-network",
-    image: "/images/network/archway.svg",
-    key: "archway",
-    label: "Archway",
-    name: "Archway",
-  },
-  "coreum": {
-    address: "corevaloper1k3wy8ztt2e0uq3j5deukjxu2um4a4z5tvz35la",
-    denom: "CORE",
-    graphql: "coreum",
-    guide: "how-to-stake-core-on-coreum",
-    image: "/images/network/coreum.svg",
-    key: "coreum",
-    label: "Coreum - CORE",
-    name: "Coreum",
-  },
-  "humansai": {
-    denom: "HEART",
-    graphql: "humansai",
-    image: "/images/network/humansai.svg",
-    key: "humansai",
-    label: "",
-    name: "Humans.ai",
-  },
-  "kyve": {
-    denom: "KYVE",
-    graphql: "kyve",
-    image: "/images/network/kyve.svg",
-    key: "kyve",
-    label: "",
-    name: "KYVE",
-  },
-  "multiversx": {
-    denom: "",
-    graphql: "multiversx",
-    image: "/images/network/multiversx.png",
-    key: "multiversx",
-    label: "",
-    name: "MultiversX",
-  },
-  "nolus": {
-    denom: "NLS",
-    graphql: "nolus",
-    image: "/images/network/nolus.svg",
-    key: "nolus",
-    label: "",
-    name: "Nolus",
-  },
-  "neutron": {
-    denom: "",
-    graphql: "neutron",
-    image: "/images/network/neutron.svg",
-    key: "neutron",
-    label: "",
-    name: "Neutron",
-  },
-  "gitopia": {
-    denom: "LORE",
-    graphql: "gitopia",
-    guide: "how-to-stake-lore-on-gitopia",
-    image: "/images/network/gitopia.svg",
-    key: "gitopia",
-    label: "Gitopia - LORE",
-    name: "Gitopia",
-  },
-  "sui": {
-    address:
-      "0x1e1985024aafe50a8e4eafc5a89eb7ecd58ba08c39f37688bee00bd55c8b2059",
-    denom: "SUI",
-    graphql: "sui",
-    guide: "how-to-stake-sui-on-sui-network",
-    image: "/images/network/sui.svg",
-    key: "sui",
-    label: "Sui - SUI",
-    name: "Sui",
-  },
-  "picasso": {
-    denom: "PICA",
-    graphql: "picasso",
-    image: "/images/network/picasso.svg",
-    key: "picasso",
-    label: "Picasso - PICA",
-    name: "Picasso",
-  },
-  "rizon": {
-    denom: "atolo",
-    graphql: "rizon",
-    image: "/images/network/rizon.svg",
-    key: "rizon",
-    label: "Rizon - ATOLO",
-    name: "Rizon",
-  },
-  "quasar": {
-    denom: "qsr",
-    graphql: "quasar",
-    image: "/images/network/quasar.svg",
-    key: "quasar",
-    label: "Quasar - QSR",
-    name: "Quasar",
-  },
-
-  "celestia": {
-    denom: "tia",
-    graphql: "celestia",
-    image: "/images/network/celestia.svg",
-    key: "celestia",
-    label: "Celestia - TIA",
-    name: "Celestia",
-  },
-  "islamic_coin": {
-    denom: "",
-    graphql: "islamic_coin",
-    image: "/images/network/islamic_coin.png",
-    key: "islamic_coin",
-    label: "",
-    name: "Islamic Coin",
-  },
 };
 
 export const getNetworkInfo = (key: number | string) => logos[key] || null;
diff --git a/src/utils/scroll.tsx b/src/utils/scroll.tsx
index 64e22953..e181bd08 100644
--- a/src/utils/scroll.tsx
+++ b/src/utils/scroll.tsx
@@ -2,8 +2,8 @@ export const scrollBottom = (e: any, ref: any) => {
   e.preventDefault();
 
   window.scrollTo({
+    behavior: "smooth",
     left: 0,
     top: ref.current.offsetTop - 100,
-    behavior: "smooth",
   });
 };
diff --git a/src/utils/social_media_info.tsx b/src/utils/social_media_info.tsx
index ce1aaeef..c4f3afbc 100644
--- a/src/utils/social_media_info.tsx
+++ b/src/utils/social_media_info.tsx
@@ -20,39 +20,39 @@ interface SocialMediasProps {
 }
 
 export const socialMedia: SocialMediasProps = {
-  telegram: {
-    key: "telegram",
-    url: "https://t.me/forbole",
-    component: Telegram,
-  },
-  medium: {
-    key: "medium",
-    url: "https://medium.com/forbole",
-    component: Medium,
-  },
-  twitter: {
-    key: "twitter",
-    url: "https://twitter.com/forbole",
-    component: Twitter,
-  },
   github: {
+    component: Github,
     key: "github",
     url: "https://github.com/forbole",
-    component: Github,
-  },
-  linkedIn: {
-    key: "linkedin",
-    url: "https://www.linkedin.com/company/forbole/",
-    component: LinkedIn,
   },
   Instagram: {
+    component: Instagram,
     key: "Instagram",
     url: "https://www.instagram.com/forbole",
-    component: Instagram,
   },
   Instagram_zh: {
+    component: Instagram,
     key: "Instagram",
     url: "https://www.instagram.com/forbole.hk",
-    component: Instagram,
+  },
+  linkedIn: {
+    component: LinkedIn,
+    key: "linkedin",
+    url: "https://www.linkedin.com/company/forbole/",
+  },
+  medium: {
+    component: Medium,
+    key: "medium",
+    url: "https://medium.com/forbole",
+  },
+  telegram: {
+    component: Telegram,
+    key: "telegram",
+    url: "https://t.me/forbole",
+  },
+  twitter: {
+    component: Twitter,
+    key: "twitter",
+    url: "https://twitter.com/forbole",
   },
 };