diff --git a/next.config.js b/next.config.js
index 4c71e395..6f56624e 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,3 @@
-const million = require("million/compiler");
 const bundleAnalyzer = require("@next/bundle-analyzer");
 const nextTranslate = require("next-translate-plugin");
 
@@ -61,4 +60,4 @@ const baseConfig = nextTranslate({
   },
 });
 
-module.exports = million.next(withBundleAnalyzer(baseConfig), { auto: true });
+module.exports = withBundleAnalyzer(baseConfig);
diff --git a/src/components/cardSwiper/BoxCSS.ts b/src/components/cardSwiper/BoxCSS.ts
deleted file mode 100644
index 194754c7..00000000
--- a/src/components/cardSwiper/BoxCSS.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled from "@emotion/styled";
-
-export const BoxCSS = styled.div`
-  .swiper-slide.scale {
-    transition: 300ms;
-    transform: scale(0.8) !important;
-    text-align: center;
-    align-self: center;
-    flex-shrink: 0;
-    width: auto;
-  }
-  .swiper-slide-active.scale {
-    transform: scale(1) !important;
-  }
-  .c-next.swiper-button-disabled,
-  .c-prev.swiper-button-disabled {
-    display: none;
-  }
-  .c-next,
-  .c-prev {
-    display: none;
-  }
-  @media screen and (max-width: 768px) {
-    .c-next,
-    .c-prev {
-      display: block;
-    }
-    .swiper-container {
-      padding: 0 40px;
-    }
-  }
-`;
diff --git a/src/components/cardSwiper/index.module.scss b/src/components/cardSwiper/index.module.scss
index e50366a4..05fba68d 100644
--- a/src/components/cardSwiper/index.module.scss
+++ b/src/components/cardSwiper/index.module.scss
@@ -1,3 +1,5 @@
+@import "src/styles/sass.scss";
+
 .wrapper {
   position: relative;
 }
@@ -15,3 +17,47 @@
   top: 50%;
   transform: translateY(-50%);
 }
+
+.boxCss {
+  :global {
+    .swiper-slide.scale {
+      align-self: center;
+      flex-shrink: 0;
+      text-align: center;
+      transform: scale(0.8) !important;
+      transition: 300ms;
+      width: auto;
+    }
+
+    .swiper-slide-active.scale {
+      transform: scale(1) !important;
+    }
+
+    .c-next.swiper-button-disabled,
+    .c-prev.swiper-button-disabled {
+      display: none;
+    }
+
+    .c-next,
+    .c-prev {
+      display: none;
+    }
+
+    @include down-tablet {
+      .c-next,
+      .c-prev {
+        display: block;
+      }
+
+      .swiper-container {
+        padding: 0 40px;
+      }
+    }
+  }
+}
+
+.slide {
+  @include down-laptop {
+    width: 100%;
+  }
+}
diff --git a/src/components/cardSwiper/index.tsx b/src/components/cardSwiper/index.tsx
index c05b380a..f0a72d7c 100644
--- a/src/components/cardSwiper/index.tsx
+++ b/src/components/cardSwiper/index.tsx
@@ -1,4 +1,4 @@
-import { Stack, useTheme } from "@mui/material";
+import { Stack } from "@mui/material";
 import Image from "next/legacy/image";
 import type { CSSProperties } from "react";
 import SwiperCore, { Navigation } from "swiper";
@@ -6,7 +6,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/swiper.min.css";
 
 import Arrow, { Direction } from "../arrow";
-import { BoxCSS } from "./BoxCSS";
 import * as styles from "./index.module.scss";
 
 SwiperCore.use([Navigation]);
@@ -17,63 +16,53 @@ type Props = {
   style?: CSSProperties;
 };
 
-const CardSwiper = ({ className, imagesList, style }: Props) => {
-  const theme = useTheme();
-
-  return (
-    <BoxCSS>
-      <div className={styles.wrapper}>
-        <Swiper
-          breakpoints={{
-            1025: {
-              initialSlide: 1,
-              slidesPerView: 3,
-              spaceBetween: -80,
-            },
-            375: {
-              initialSlide: 0,
-              slidesPerView: 1,
-              spaceBetween: -30,
-            },
-          }}
-          centeredSlides
-          className={["scale", className || ""].join(" ")}
-          initialSlide={1}
-          navigation={{
-            nextEl: ".c-next", // 下一个箭头的类名或DOM元素
-            prevEl: ".c-prev", // 上一个箭头的类名或DOM元素
-          }}
-          slidesPerView={3}
-          spaceBetween={-80}
-          style={{
-            ...style,
-          }}
-        >
-          {imagesList.map((item, index) => (
-            <SwiperSlide className="scale" key={index}>
-              <Stack
-                sx={{
-                  [theme.breakpoints.down("laptop")]: {
-                    width: "100%",
-                  },
-                }}
-              >
-                {item && <Image alt="" src={item} />}
-              </Stack>
-            </SwiperSlide>
-          ))}
-        </Swiper>
-        <Arrow
-          className={["c-next", styles.next].join(" ")}
-          direction={Direction.Right}
-        />
-        <Arrow
-          className={["c-prev", styles.prev].join(" ")}
-          direction={Direction.Left}
-        />
-      </div>
-    </BoxCSS>
-  );
-};
+const CardSwiper = ({ className, imagesList, style }: Props) => (
+  <div className={styles.boxCss}>
+    <div className={styles.wrapper}>
+      <Swiper
+        breakpoints={{
+          1025: {
+            initialSlide: 1,
+            slidesPerView: 3,
+            spaceBetween: -80,
+          },
+          375: {
+            initialSlide: 0,
+            slidesPerView: 1,
+            spaceBetween: -30,
+          },
+        }}
+        centeredSlides
+        className={["scale", className || ""].join(" ")}
+        initialSlide={1}
+        navigation={{
+          nextEl: ".c-next", // 下一个箭头的类名或DOM元素
+          prevEl: ".c-prev", // 上一个箭头的类名或DOM元素
+        }}
+        slidesPerView={3}
+        spaceBetween={-80}
+        style={{
+          ...style,
+        }}
+      >
+        {imagesList.map((item, index) => (
+          <SwiperSlide className="scale" key={index}>
+            <Stack className={styles.slide}>
+              {item && <Image alt="" src={item} />}
+            </Stack>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <Arrow
+        className={["c-next", styles.next].join(" ")}
+        direction={Direction.Right}
+      />
+      <Arrow
+        className={["c-prev", styles.prev].join(" ")}
+        direction={Direction.Left}
+      />
+    </div>
+  </div>
+);
 
 export default CardSwiper;
diff --git a/src/components/carousel/BoxCSS.ts b/src/components/carousel/BoxCSS.ts
deleted file mode 100644
index a4e2651b..00000000
--- a/src/components/carousel/BoxCSS.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import styled from "@emotion/styled";
-
-export const BoxCSS = styled.div`
-  .swiper-container {
-    padding: 40px;
-  }
-  .swiper-wrapper {
-    align-items: stretch;
-  }
-  .swiper-slide {
-    transition: 300ms;
-    transform: scale(0.8) !important;
-    height: auto;
-    width: 100%;
-  }
-
-  .swiper-slide-active {
-    transform: scale(1) !important;
-  }
-  .c-next.swiper-button-disabled,
-  .c-prev.swiper-button-disabled {
-    display: none;
-  }
-
-  .c-next,
-  .c-prev {
-    display: none;
-  }
-
-  @media screen and (max-width: 1025px) {
-    .c-next,
-    .c-prev {
-      display: block;
-    }
-    .swiper-container {
-      padding: 30px 32px;
-    }
-    .swiper-wrapper {
-      align-items: flex-start;
-    }
-  }
-`;
diff --git a/src/components/carousel/index.module.scss b/src/components/carousel/index.module.scss
index fb34b039..ca93c818 100644
--- a/src/components/carousel/index.module.scss
+++ b/src/components/carousel/index.module.scss
@@ -95,3 +95,51 @@ $avater-shadow:
     margin: 0 -16px;
   }
 }
+
+.boxCss {
+  :global {
+    .swiper-container {
+      padding: 40px;
+    }
+
+    .swiper-wrapper {
+      align-items: stretch;
+    }
+
+    .swiper-slide {
+      height: auto;
+      transform: scale(0.8) !important;
+      transition: 300ms;
+      width: 100%;
+    }
+
+    .swiper-slide-active {
+      transform: scale(1) !important;
+    }
+
+    .c-next.swiper-button-disabled,
+    .c-prev.swiper-button-disabled {
+      display: none;
+    }
+
+    .c-next,
+    .c-prev {
+      display: none;
+    }
+
+    @media screen and (max-width: 1025px) {
+      .c-next,
+      .c-prev {
+        display: block;
+      }
+
+      .swiper-container {
+        padding: 30px 32px;
+      }
+
+      .swiper-wrapper {
+        align-items: flex-start;
+      }
+    }
+  }
+}
diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
index 4596eb8e..ca5ce30b 100644
--- a/src/components/carousel/index.tsx
+++ b/src/components/carousel/index.tsx
@@ -6,7 +6,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/swiper.min.css";
 
 import Arrow, { Direction } from "../arrow";
-import { BoxCSS } from "./BoxCSS";
 import * as styles from "./index.module.scss";
 
 SwiperCore.use([Navigation]);
@@ -62,7 +61,7 @@ const Carousel = ({ personList }: CarouselProps) => {
   }
 
   return (
-    <BoxCSS>
+    <div className={styles.boxCss}>
       <div className={styles.wrapper}>
         <Swiper
           breakpoints={{
@@ -110,7 +109,7 @@ const Carousel = ({ personList }: CarouselProps) => {
           role="button"
         />
       </div>
-    </BoxCSS>
+    </div>
   );
 };
 
diff --git a/src/components/contact-form/index.module.scss b/src/components/contact-form/index.module.scss
index c63e0b43..ebac9ca8 100644
--- a/src/components/contact-form/index.module.scss
+++ b/src/components/contact-form/index.module.scss
@@ -19,3 +19,8 @@
 .select {
   color: $color-grey-2;
 }
+
+.label {
+  font-size: 16px;
+  font-weight: 590;
+}
diff --git a/src/components/contact-form/index.tsx b/src/components/contact-form/index.tsx
index ff382f73..21964705 100644
--- a/src/components/contact-form/index.tsx
+++ b/src/components/contact-form/index.tsx
@@ -5,7 +5,6 @@ import {
   MenuItem,
   Select,
   Stack,
-  Typography,
   useTheme,
 } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
@@ -73,15 +72,10 @@ const ContactFrom = forwardRef<HTMLDivElement, Props>(
           rowSpacing={{ desktop: theme.spacing(4), mobile: theme.spacing(3) }}
         >
           <Grid item laptop={6} mobile={12}>
-            <Typography
-              sx={{
-                fontSize: "16px",
-                fontWeight: "590",
-              }}
-            >
+            <p className={styles.label}>
               {t("your_name")}
               <span style={{ color: "#FF426B" }}>*</span>
-            </Typography>
+            </p>
             <FormInput
               name="name"
               onInput={handleInputChange}
@@ -90,14 +84,7 @@ const ContactFrom = forwardRef<HTMLDivElement, Props>(
             />
           </Grid>
           <Grid item laptop={6} mobile={12}>
-            <Typography
-              sx={{
-                fontSize: "16px",
-                fontWeight: "590",
-              }}
-            >
-              {t("your_company")}
-            </Typography>
+            <p className={styles.label}>{t("your_company")}</p>
             <FormInput
               name="company"
               onInput={handleInputChange}
@@ -106,15 +93,10 @@ const ContactFrom = forwardRef<HTMLDivElement, Props>(
             />
           </Grid>
           <Grid item laptop={6} mobile={12}>
-            <Typography
-              sx={{
-                fontSize: "16px",
-                fontWeight: "590",
-              }}
-            >
+            <p className={styles.label}>
               {t("your_email")}
               <span style={{ color: "#FF426B" }}>*</span>
-            </Typography>
+            </p>
             <FormInput
               name="email"
               onInput={handleInputChange}
@@ -123,16 +105,10 @@ const ContactFrom = forwardRef<HTMLDivElement, Props>(
             />
           </Grid>
           <Grid item laptop={6} mobile={12}>
-            <Typography
-              sx={{
-                fontSize: "16px",
-                fontWeight: "590",
-                mb: "16px",
-              }}
-            >
+            <p className={styles.label}>
               {t("how")}
               <span style={{ color: "#FF426B" }}>*</span>
-            </Typography>
+            </p>
             <FormControl fullWidth>
               <Select
                 IconComponent={KeyboardArrowDownTwoTone}
diff --git a/src/components/header-card/index.module.scss b/src/components/header-card/index.module.scss
index e1084e17..bff9b95e 100644
--- a/src/components/header-card/index.module.scss
+++ b/src/components/header-card/index.module.scss
@@ -32,7 +32,7 @@ $card-box-shadow:
   text-align: center;
 
   @include down-laptop {
-    padding-left: 0;
+    padding: 0 4px;
   }
 }
 
diff --git a/src/components/header-card/index.tsx b/src/components/header-card/index.tsx
index c5f7c380..a688aa0e 100644
--- a/src/components/header-card/index.tsx
+++ b/src/components/header-card/index.tsx
@@ -1,4 +1,4 @@
-import { Stack, Typography } from "@mui/material";
+import { Stack } from "@mui/material";
 import Image from "next/image";
 
 import * as styles from "./index.module.scss";
@@ -10,41 +10,26 @@ type Props = {
   title: string;
 };
 
-export default function HeaderCard({
-  desc_1st,
-  desc_2nd,
-  head_bgs,
-  title,
-}: Props) {
-  return (
-    <Stack className={styles.wrapper} spacing={3}>
-      <Stack className={styles.content} spacing={3}>
-        {title && (
-          <Typography className={styles.title} variant="h1">
-            {title}
-          </Typography>
-        )}
-        {desc_1st && (
-          <Typography className={styles.desc} variant="h2">
-            {desc_1st}
-          </Typography>
-        )}
-        {desc_2nd && (
-          <Typography className={styles.desc2}>{desc_2nd}</Typography>
-        )}
-      </Stack>
-      <div className={styles.image}>
-        {head_bgs && (
-          <>
-            <div className={styles.image2}>
-              <Image alt={title} fill priority src={head_bgs[0]} />
-            </div>
-            <div className={styles.image3}>
-              <Image alt={title} fill priority src={head_bgs[1]} />
-            </div>
-          </>
-        )}
-      </div>
+const HeaderCard = ({ desc_1st, desc_2nd, head_bgs, title }: Props) => (
+  <Stack className={styles.wrapper} spacing={3}>
+    <Stack className={styles.content} spacing={3}>
+      {title && <h1 className={styles.title}>{title}</h1>}
+      {desc_1st && <h2 className={styles.desc}>{desc_1st}</h2>}
+      {desc_2nd && <p className={styles.desc2}>{desc_2nd}</p>}
     </Stack>
-  );
-}
+    <div className={styles.image}>
+      {head_bgs && (
+        <>
+          <div className={styles.image2}>
+            <Image alt={title} fill priority src={head_bgs[0]} />
+          </div>
+          <div className={styles.image3}>
+            <Image alt={title} fill priority src={head_bgs[1]} />
+          </div>
+        </>
+      )}
+    </div>
+  </Stack>
+);
+
+export default HeaderCard;
diff --git a/src/screens/about/SwiperCSS.ts b/src/screens/about/SwiperCSS.ts
deleted file mode 100644
index fe92fe8e..00000000
--- a/src/screens/about/SwiperCSS.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from "@emotion/styled";
-
-export const YTBSwiperCSS = styled.div`
-  .v-next.swiper-button-disabled,
-  .v-prev.swiper-button-disabled {
-    display: none;
-  }
-  .v-next {
-    position: absolute;
-    right: 0%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .v-prev {
-    position: absolute;
-    left: 0%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-`;
-export const ImgBox = styled.div`
-  height: 100%;
-  .swiper-style {
-    height: 100%;
-    padding: 0;
-  }
-`;
diff --git a/src/screens/about/index.module.scss b/src/screens/about/index.module.scss
index e9d4cbed..7c78c43f 100644
--- a/src/screens/about/index.module.scss
+++ b/src/screens/about/index.module.scss
@@ -249,3 +249,37 @@ $card-desc-shadow:
     padding: 0;
   }
 }
+
+.imgBox {
+  height: 100%;
+
+  :global {
+    .swiper-style {
+      height: 100%;
+      padding: 0;
+    }
+  }
+}
+
+.ytbSwiperBox {
+  :global {
+    .v-next.swiper-button-disabled,
+    .v-prev.swiper-button-disabled {
+      display: none;
+    }
+
+    .v-next {
+      position: absolute;
+      right: 0%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .v-prev {
+      left: 0%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
diff --git a/src/screens/about/index.tsx b/src/screens/about/index.tsx
index 941c4da3..f83c0506 100644
--- a/src/screens/about/index.tsx
+++ b/src/screens/about/index.tsx
@@ -9,7 +9,6 @@ import Arrow, { Direction } from "@src/components/arrow";
 import Horse from "@src/components/icons/horse.svg";
 import Layout from "@src/components/layout";
 import ScrollToTop from "@src/components/scroll_to_top";
-import { ImgBox, YTBSwiperCSS } from "@src/screens/about/SwiperCSS";
 import * as commonStyles from "@src/styles/common.module.scss";
 import { IS_E2E } from "@src/utils/e2e";
 
@@ -87,7 +86,7 @@ const About = () => {
             />
           </div>
           <div className={styles.swiperContainer}>
-            <ImgBox>
+            <div className={styles.imgBox}>
               <Swiper
                 autoplay={{
                   delay: 2000,
@@ -123,7 +122,7 @@ const About = () => {
                   </SwiperSlide>
                 ))}
               </Swiper>
-            </ImgBox>
+            </div>
             <Arrow
               className={[styles.arrow, styles.right, "h-next"].join(" ")}
               direction={Direction.Right}
@@ -142,7 +141,7 @@ const About = () => {
           <span className={styles.sectionDesc}>{t("section_1st_sesc")}</span>
         </div>
       </div>
-      <YTBSwiperCSS>
+      <div className={styles.ytbSwiperBox}>
         <div className={styles.ytbStack}>
           <Swiper
             className={["swiper-no-swiping", styles.ytbSwiper].join(" ")}
@@ -176,7 +175,7 @@ const About = () => {
           <Arrow className="v-next" direction={Direction.Right} role="button" />
           <Arrow className="v-prev" direction={Direction.Left} role="button" />
         </div>
-      </YTBSwiperCSS>
+      </div>
 
       <div className={commonStyles.pageContainer}>
         <div>
diff --git a/src/screens/home/index.module.scss b/src/screens/home/index.module.scss
index 2bb55b2b..b7298fa6 100644
--- a/src/screens/home/index.module.scss
+++ b/src/screens/home/index.module.scss
@@ -125,3 +125,12 @@
     margin: 0 auto;
   }
 }
+
+.filterBg {
+  background: #fd3317;
+  filter: blur(40px);
+  inset: 0 16px;
+  opacity: 0.8;
+  position: absolute;
+  z-index: -1;
+}
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
index 0402dd25..c60f080d 100644
--- a/src/screens/home/index.tsx
+++ b/src/screens/home/index.tsx
@@ -11,7 +11,6 @@ import ScrollToBottom from "@src/components/scroll_to_bottom";
 import ScrollToTop from "@src/components/scroll_to_top";
 
 import * as styles from "./index.module.scss";
-import { FilterBG } from "./styles";
 
 export type Page = {
   btnClick: string;
@@ -55,7 +54,7 @@ const Home: FC<Props> = ({ pages }) => {
           <Stack className={styles.stack}>
             <h1 className={styles.topTitle}>{t("coBuildingInterchain")}</h1>
             <ScrollToBottom bottomRef={bottomRef} />
-            <FilterBG />
+            <div className={styles.filterBg} />
           </Stack>
         </Container>
         <div className={styles.containerTitle} ref={bottomRef}>
diff --git a/src/screens/home/styles.ts b/src/screens/home/styles.ts
deleted file mode 100644
index fa93673f..00000000
--- a/src/screens/home/styles.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-
-export const FilterBG = styled.div<any>`
-  position: absolute;
-  inset: 0 16px;
-  opacity: 0.8;
-  background: #fd3317;
-  filter: blur(40px);
-  z-index: -1;
-`;
diff --git a/src/screens/network_guides/components/guide/components/guide_details/index.module.scss b/src/screens/network_guides/components/guide/components/guide_details/index.module.scss
index ad6386d4..147616b6 100644
--- a/src/screens/network_guides/components/guide/components/guide_details/index.module.scss
+++ b/src/screens/network_guides/components/guide/components/guide_details/index.module.scss
@@ -31,3 +31,456 @@
     justify-content: center;
   }
 }
+
+.guideContent {
+  color: $color-forbole-blue-1;
+  margin: auto;
+  overflow: visible;
+  width: 100%;
+  word-break: break-word;
+
+  a {
+    transition: 0.3s;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.87);
+    }
+  }
+
+  //  specific for staking guide:
+  p,
+  hr,
+  h3 {
+    display: none;
+  }
+
+  li > p {
+    display: block;
+  }
+
+  img {
+    border-radius: 4px;
+    box-shadow:
+      0 6px 14px -6px rgba(2, 38, 225, 0.12),
+      0 10px 32px -4px rgba(2, 38, 225, 0.1);
+    display: block;
+    margin: 20px auto 0;
+    max-height: 400px;
+    max-width: 100%;
+    object-fit: cover;
+    overflow: hidden;
+    width: auto;
+  }
+
+  ol {
+    counter-reset: my-awesome-counter;
+    list-style: none;
+  }
+
+  li {
+    border-left: 1px solid #202a43;
+    color: $color-forbole-blue-1;
+    counter-increment: my-awesome-counter;
+    font-size: 16px;
+    margin: 0.25rem;
+    padding: 40px 24px;
+    position: relative;
+    text-align: center;
+
+    a {
+      color: #007fff;
+      transition: 0.3s;
+
+      &:hover {
+        color: rgba(0, 0, 0, 0.87);
+      }
+    }
+  }
+
+  li::before {
+    background: #3c4f7d;
+    border-radius: 50%;
+    color: white;
+    content: counter(my-awesome-counter);
+    display: inline-block;
+    height: 2rem;
+    left: calc(0% - 16px);
+    line-height: 2rem;
+    margin-right: 0.5rem;
+    position: absolute;
+    text-align: center;
+    top: calc(0% - 16px);
+    width: 2rem;
+    z-index: 1;
+  }
+
+  @media only screen and (min-width: 1024px) {
+    li {
+      text-align: left;
+    }
+  }
+}
+
+.guideContentBox {
+  :global {
+    .gh-canvas {
+      display: grid;
+      grid-template-columns:
+        [full-start]
+        minmax(calc(calc(100% - 1200px) / 2), 1fr)
+        [wide-start]
+        auto
+        [main-start]
+        720px
+        [main-end]
+        auto
+        [wide-end]
+        minmax(calc(calc(100% - 1200px) / 2), 1fr)
+        [full-end];
+    }
+
+    @media (max-width: 1296px) {
+      .gh-canvas {
+        grid-template-columns:
+          [full-start]
+          4vmin
+          [wide-start]
+          auto
+          [main-start]
+          720px
+          [main-end]
+          auto
+          [wide-end]
+          4vmin
+          [full-end];
+      }
+    }
+
+    @media (max-width: 778px) {
+      .gh-canvas {
+        grid-template-columns:
+          [full-start]
+          4vmin
+          [wide-start]
+          0
+          [main-start]
+          auto
+          [main-end]
+          0
+          [wide-end]
+          4vmin
+          [full-end];
+      }
+    }
+
+    .gh-canvas > * {
+      grid-column: main-start / main-end;
+    }
+
+    .kg-width-wide {
+      grid-column: wide-start / wide-end;
+    }
+
+    .kg-width-full {
+      grid-column: full-start / full-end;
+    }
+
+    .kg-width-full img {
+      width: 100%;
+    }
+  }
+
+  [id]:not(:first-of-type) {
+    margin: 1.5em 0 0;
+  }
+
+  [id] + .kg-card,
+  blockquote + .kg-card {
+    margin-top: 6vmin;
+  }
+
+  .gh-canvas > blockquote,
+  .gh-canvas > ol,
+  .gh-canvas > ul,
+  .gh-canvas > dl,
+  .gh-canvas > p {
+    font-family: var(--font-serif);
+    font-size: 2rem;
+    font-weight: 400;
+    line-height: 1.6em;
+  }
+
+  hr {
+    border: 1px solid;
+    border-color: rgba(247, 247, 247, 1);
+    margin-top: 6vmin;
+  }
+
+  hr + * {
+    margin-top: 6vmin !important;
+  }
+
+  blockquote {
+    font-style: italic;
+    position: relative;
+  }
+
+  blockquote::before {
+    background: var(--color-primary);
+    bottom: 0;
+    content: "";
+    left: -1.5em;
+    position: absolute;
+    top: 0;
+    width: 0.3rem;
+  }
+
+  @media (max-width: 650px) {
+    .gh-canvas blockquote,
+    .gh-canvas ol,
+    .gh-canvas ul,
+    .gh-canvas dl,
+    .gh-canvas p {
+      font-size: 1.8rem;
+    }
+
+    blockquote::before {
+      left: -4vmin;
+    }
+
+    :not(.kg-card, [id]) + .kg-card {
+      margin-top: 6vmin;
+    }
+
+    .kg-card + :not(.kg-card) {
+      margin-top: 6vmin;
+    }
+
+    .kg-card figcaption {
+      color: rgba(0, 0, 0, 0.5);
+      font-size: 0.9rem;
+      font-weight: 300;
+      line-height: 1.4em;
+      padding: 0.6rem 1.5rem 0;
+      text-align: center;
+    }
+
+    .kg-card figcaption strong {
+      color: rgba(0, 0, 0, 0.8);
+    }
+
+    code {
+      background: #f0f6f9;
+      border: #e1eaef 1px solid;
+      border-radius: 0.25em;
+      color: #dc0050;
+      font-size: 0.9em;
+      font-weight: 400 !important;
+      line-height: 1em;
+      padding: 0.15em 0.4em;
+      vertical-align: middle;
+    }
+
+    pre {
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 5px;
+      box-shadow:
+        0 2px 6px -2px rgba(0, 0, 0, 0.1),
+        0 0 1px rgba(0, 0, 0, 0.4);
+      overflow: auto;
+      padding: 16px 20px;
+    }
+
+    .kg-embed-card {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .kg-image-card img {
+      height: 100%;
+      margin: auto;
+      object-fit: cover;
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .kg-gallery-card + .kg-gallery-card {
+      margin-top: 0.75em;
+    }
+
+    .kg-gallery-container {
+      position: relative;
+    }
+
+    .kg-gallery-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    .kg-gallery-image img {
+      display: block;
+      height: 100%;
+      margin: 0;
+      width: 100%;
+    }
+
+    .kg-gallery-row:not(:first-of-type) {
+      margin: 0.75em 0 0;
+    }
+
+    .kg-gallery-image:not(:first-of-type) {
+      margin: 0 0 0 0.75em;
+    }
+
+    .kg-bookmark-card,
+    .kg-bookmark-publisher {
+      position: relative;
+    }
+
+    .kg-bookmark-container,
+    .kg-bookmark-container:hover {
+      background: rgba(255, 255, 255, 0.6);
+      border-radius: 5px;
+      box-shadow:
+        0 2px 6px -2px rgba(0, 0, 0, 0.1),
+        0 0 1px rgba(0, 0, 0, 0.4);
+      color: currentcolor;
+      display: flex;
+      flex-flow: row-reverse wrap;
+      font-family: var(--font-sans-serif);
+      overflow: hidden;
+      text-decoration: none;
+    }
+
+    .kg-bookmark-content {
+      flex-basis: 0;
+      flex-grow: 999;
+      order: 1;
+      padding: 20px;
+    }
+
+    .kg-bookmark-title {
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.3em;
+    }
+
+    .kg-bookmark-description {
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      font-size: 1.4rem;
+      -webkit-line-clamp: 2;
+      line-height: 1.55em;
+      margin: 0.5em 0 0;
+      max-height: 45px;
+      opacity: 0.8;
+      overflow: hidden;
+    }
+
+    .kg-bookmark-metadata {
+      align-items: center;
+      display: flex;
+      font-size: 1.3rem;
+      font-weight: 500;
+      line-height: 1.3em;
+      margin-top: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .kg-bookmark-icon {
+      display: inline-block;
+      height: 16px;
+      width: 16px;
+    }
+
+    .kg-bookmark-thumbnail {
+      display: flex;
+      flex-basis: 24rem;
+      flex-grow: 1;
+      justify-content: flex-end;
+    }
+
+    .kg-bookmark-thumbnail img {
+      height: auto;
+      max-width: 100%;
+      object-fit: cover;
+      vertical-align: bottom;
+    }
+
+    .kg-bookmark-author {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .kg-bookmark-publisher::before {
+      content: "•";
+      margin: 0 0.5em;
+    }
+
+    .kg-width-full.kg-card-hascaption {
+      display: grid;
+      grid-template-columns: inherit;
+    }
+
+    .kg-width-wide.kg-card-hascaption img {
+      grid-column: wide-start / wide-end;
+    }
+
+    .kg-width-full.kg-card-hascaption img {
+      grid-column: 1 / -1;
+    }
+
+    .kg-width-full.kg-card-hascaption figcaption {
+      grid-column: main-start / main-end;
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    th {
+      font-size: 0.75em;
+      padding: 0.5em 0.8em;
+      text-align: left;
+      text-transform: uppercase;
+    }
+
+    td {
+      padding: 0.4em 0.7em;
+    }
+
+    tbody tr:nth-of-type(2n + 1) {
+      background-color: rgba(0, 0, 0, 0.1);
+      padding: 1px;
+    }
+
+    tbody tr:nth-of-type(2n + 2) td:last-child {
+      box-shadow:
+        inset 1px 0 rgba(0, 0, 0, 0.1),
+        inset -1px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    tbody tr:nth-of-type(2n + 2) td {
+      box-shadow: inset 1px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    tbody tr:last-child {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  > * + * {
+    margin-top: 1.5rem;
+  }
+
+  > [id] + * {
+    margin-top: 2vmin;
+  }
+}
diff --git a/src/screens/network_guides/components/guide/components/guide_details/index.tsx b/src/screens/network_guides/components/guide/components/guide_details/index.tsx
index 2d8af5e7..534325a7 100644
--- a/src/screens/network_guides/components/guide/components/guide_details/index.tsx
+++ b/src/screens/network_guides/components/guide/components/guide_details/index.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@mui/material";
 import DOMPurify from "isomorphic-dompurify";
 import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
@@ -7,10 +6,8 @@ import HighlightButton from "@src/components/highlight-button";
 import { getNetworkInfo } from "@src/utils/network_info";
 
 import * as styles from "./index.module.scss";
-import { GuideContentBox, GuideContentCSS } from "./styles";
 
 const GuideDetails = ({ post }: any) => {
-  const theme = useTheme();
   const { tags } = post;
   const { t } = useTranslation("staking");
 
@@ -24,24 +21,27 @@ const GuideDetails = ({ post }: any) => {
 
   const { sanitize } = DOMPurify;
 
+  const ctaLink = !!networkData?.delegate ? (
+    <div className={styles.stakeButtonWrapper}>
+      <Link
+        href={networkData?.delegate ? networkData.delegate : ""}
+        target="_blank"
+      >
+        <HighlightButton>{t("stake_now")}</HighlightButton>
+      </Link>
+    </div>
+  ) : null;
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
-        <GuideContentCSS theme={theme}>
-          <GuideContentBox
+        <div className={styles.guideContent}>
+          <div
+            className={styles.guideContentBox}
             dangerouslySetInnerHTML={{ __html: sanitize(post.html) }}
           />
-        </GuideContentCSS>
-        {!!networkData?.delegate && (
-          <div className={styles.stakeButtonWrapper}>
-            <Link
-              href={networkData?.delegate ? networkData.delegate : ""}
-              target="_blank"
-            >
-              <HighlightButton>{t("stake_now")}</HighlightButton>
-            </Link>
-          </div>
-        )}
+        </div>
+        {ctaLink}
       </div>
     </div>
   );
diff --git a/src/screens/network_guides/components/guide/components/guide_details/styles.ts b/src/screens/network_guides/components/guide/components/guide_details/styles.ts
deleted file mode 100644
index 1de9846c..00000000
--- a/src/screens/network_guides/components/guide/components/guide_details/styles.ts
+++ /dev/null
@@ -1,485 +0,0 @@
-import styled from "@emotion/styled";
-import type { ThemeOptions } from "@mui/material/styles";
-
-type ContentProps = {
-  theme: ThemeOptions;
-};
-
-export const GuideContentCSS = styled.div<ContentProps>`
-  overflow: visible;
-  word-break: break-word;
-  width: 100%;
-  margin: auto;
-  color: ${(props) => props?.theme?.palette?.custom?.forbole?.blue};
-  a {
-    transition: 0.3s;
-    &:hover {
-      color: rgba(0, 0, 0, 0.87);
-    }
-  }
-
-  //  specific for staking guide:
-  p,
-  hr,
-  h3 {
-    display: none;
-  }
-
-  li > p {
-    display: block;
-  }
-
-  img {
-    margin: auto;
-    object-fit: cover;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    box-shadow:
-      0px 6px 14px -6px rgba(2, 38, 225, 0.12),
-      0px 10px 32px -4px rgba(2, 38, 225, 0.1);
-    border-radius: 4px;
-  }
-
-  ol {
-    list-style: none;
-    counter-reset: my-awesome-counter;
-  }
-
-  li {
-    color: ${(props) => props?.theme?.palette?.custom?.forbole?.blue};
-    position: relative;
-    font-size: 16px;
-    counter-increment: my-awesome-counter;
-    margin: 0.25rem;
-    border-left: 1px solid #202a43;
-    padding: 40px 24px;
-    text-align: center;
-    a {
-      color: #007fff;
-      transition: 0.3s;
-      &:hover {
-        color: rgba(0, 0, 0, 0.87);
-      }
-    }
-  }
-
-  li:before {
-    content: counter(my-awesome-counter);
-    position: absolute;
-    left: calc(0% - 16px);
-    top: calc(0% - 16px);
-    z-index: 1;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border-radius: 5px;
-    background: #3c4f7d;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    display: inline-block;
-    line-height: 2rem;
-    color: white;
-    text-align: center;
-    margin-right: 0.5rem;
-  }
-  @media only screen and (min-width: 1024px) {
-    li {
-      text-align: left;
-    }
-  }
-`;
-
-export const GuideContentBox = styled.div<any>`
-  /* Content grid */
-  /* ---------------------------------------------------------- */
-
-  .gh-canvas {
-    display: grid;
-    grid-template-columns:
-      [full-start]
-      minmax(calc(calc(100% - 1200px) / 2), 1fr)
-      [wide-start]
-      auto
-      [main-start]
-      720px
-      [main-end]
-      auto
-      [wide-end]
-      minmax(calc(calc(100% - 1200px) / 2), 1fr)
-      [full-end];
-  }
-
-  @media (max-width: 1296px) {
-    .gh-canvas {
-      grid-template-columns:
-        [full-start]
-        4vmin
-        [wide-start]
-        auto
-        [main-start]
-        720px
-        [main-end]
-        auto
-        [wide-end]
-        4vmin
-        [full-end];
-    }
-  }
-
-  @media (max-width: 778px) {
-    .gh-canvas {
-      grid-template-columns:
-        [full-start]
-        4vmin
-        [wide-start]
-        0
-        [main-start]
-        auto
-        [main-end]
-        0
-        [wide-end]
-        4vmin
-        [full-end];
-    }
-  }
-
-  .gh-canvas > * {
-    grid-column: main-start / main-end;
-  }
-
-  .kg-width-wide {
-    grid-column: wide-start / wide-end;
-  }
-
-  .kg-width-full {
-    grid-column: full-start / full-end;
-  }
-
-  .kg-width-full img {
-    width: 100%;
-  }
-
-  /* Content & Typography */
-  /* ---------------------------------------------------------- */
-
-  > * + * {
-    margin-top: 1.5rem;
-  }
-
-  [id]:not(:first-of-type) {
-    margin: 1.5em 0 0;
-  }
-
-  > [id] + * {
-    margin-top: 2vmin;
-  }
-
-  [id] + .kg-card,
-  blockquote + .kg-card {
-    margin-top: 6vmin;
-  }
-
-  .gh-canvas > blockquote,
-  .gh-canvas > ol,
-  .gh-canvas > ul,
-  .gh-canvas > dl,
-  .gh-canvas > p {
-    font-family: var(--font-serif);
-    font-weight: 400;
-    font-size: 2rem;
-    line-height: 1.6em;
-  }
-
-  hr {
-    margin-top: 6vmin;
-    border: 1px solid;
-    border-color: rgba(247, 247, 247, 1);
-  }
-
-  hr + * {
-    margin-top: 6vmin !important;
-  }
-
-  blockquote {
-    position: relative;
-    font-style: italic;
-  }
-
-  blockquote::before {
-    content: "";
-    position: absolute;
-    left: -1.5em;
-    top: 0;
-    bottom: 0;
-    width: 0.3rem;
-    background: var(--color-primary);
-  }
-
-  @media (max-width: 650px) {
-    .gh-canvas blockquote,
-    .gh-canvas ol,
-    .gh-canvas ul,
-    .gh-canvas dl,
-    .gh-canvas p {
-      font-size: 1.8rem;
-    }
-
-    blockquote::before {
-      left: -4vmin;
-    }
-  }
-
-  /* Cards */
-  /* ---------------------------------------------------------- */
-
-  :not(.kg-card):not([id]) + .kg-card {
-    margin-top: 6vmin;
-  }
-
-  .kg-card + :not(.kg-card) {
-    margin-top: 6vmin;
-  }
-
-  .kg-card figcaption {
-    padding: 0.6rem 1.5rem 0;
-    text-align: center;
-    color: rgba(0, 0, 0, 0.5);
-    font-weight: 300;
-    font-size: 0.9rem;
-    line-height: 1.4em;
-  }
-
-  .kg-card figcaption strong {
-    color: rgba(0, 0, 0, 0.8);
-  }
-
-  code {
-    vertical-align: middle;
-    padding: 0.15em 0.4em 0.15em;
-    border: #e1eaef 1px solid;
-    font-weight: 400 !important;
-    font-size: 0.9em;
-    line-height: 1em;
-    color: #dc0050;
-    background: #f0f6f9;
-    border-radius: 0.25em;
-  }
-
-  pre {
-    overflow: auto;
-    padding: 16px 20px;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 5px;
-    box-shadow:
-      0 2px 6px -2px rgba(0, 0, 0, 0.1),
-      0 0 1px rgba(0, 0, 0, 0.4);
-  }
-
-  .kg-embed-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-  }
-
-  .kg-image-card img {
-    margin: auto;
-    object-fit: cover;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Galleries */
-  /* ---------------------------------------------------------- */
-
-  .kg-gallery-card + .kg-gallery-card {
-    margin-top: 0.75em;
-  }
-
-  .kg-gallery-container {
-    position: relative;
-  }
-
-  .kg-gallery-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
-
-  .kg-gallery-image img {
-    display: block;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .kg-gallery-row:not(:first-of-type) {
-    margin: 0.75em 0 0 0;
-  }
-
-  .kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 0.75em;
-  }
-
-  /* Bookmark Cards */
-  /* ---------------------------------------------------------- */
-
-  .kg-bookmark-card,
-  .kg-bookmark-publisher {
-    position: relative;
-  }
-
-  .kg-bookmark-container,
-  .kg-bookmark-container:hover {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row-reverse;
-    color: currentColor;
-    background: rgba(255, 255, 255, 0.6);
-    font-family: var(--font-sans-serif);
-    text-decoration: none;
-    border-radius: 5px;
-    box-shadow:
-      0 2px 6px -2px rgba(0, 0, 0, 0.1),
-      0 0 1px rgba(0, 0, 0, 0.4);
-    overflow: hidden;
-  }
-
-  .kg-bookmark-content {
-    flex-basis: 0;
-    flex-grow: 999;
-    padding: 20px;
-    order: 1;
-  }
-
-  .kg-bookmark-title {
-    font-weight: 600;
-    font-size: 1.5rem;
-    line-height: 1.3em;
-  }
-
-  .kg-bookmark-description {
-    display: -webkit-box;
-    max-height: 45px;
-    margin: 0.5em 0 0 0;
-    font-size: 1.4rem;
-    line-height: 1.55em;
-    overflow: hidden;
-    opacity: 0.8;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  .kg-bookmark-metadata {
-    margin-top: 20px;
-  }
-
-  .kg-bookmark-metadata {
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 1.3rem;
-    line-height: 1.3em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .kg-bookmark-description {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-  }
-
-  .kg-bookmark-icon {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-  }
-
-  .kg-bookmark-thumbnail {
-    display: flex;
-    flex-basis: 24rem;
-    flex-grow: 1;
-    justify-content: flex-end;
-  }
-
-  .kg-bookmark-thumbnail img {
-    max-width: 100%;
-    height: auto;
-    vertical-align: bottom;
-    object-fit: cover;
-  }
-
-  .kg-bookmark-author {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .kg-bookmark-publisher::before {
-    content: "•";
-    margin: 0 0.5em;
-  }
-
-  /* Card captions */
-  /* ---------------------------------------------------------- */
-
-  .kg-width-full.kg-card-hascaption {
-    display: grid;
-    grid-template-columns: inherit;
-  }
-
-  .kg-width-wide.kg-card-hascaption img {
-    grid-column: wide-start / wide-end;
-  }
-  .kg-width-full.kg-card-hascaption img {
-    grid-column: 1 / -1;
-  }
-
-  .kg-width-full.kg-card-hascaption figcaption {
-    grid-column: main-start / main-end;
-  }
-
-  /* Tables */
-  /* ---------------------------------------------------------- */
-
-  table {
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  th {
-    padding: 0.5em 0.8em;
-    text-align: left;
-    font-size: 0.75em;
-    text-transform: uppercase;
-  }
-
-  td {
-    padding: 0.4em 0.7em;
-  }
-
-  tbody tr:nth-of-type(2n + 1) {
-    background-color: rgba(0, 0, 0, 0.1);
-    padding: 1px;
-  }
-
-  tbody tr:nth-of-type(2n + 2) td:last-child {
-    box-shadow:
-      inset 1px 0 rgba(0, 0, 0, 0.1),
-      inset -1px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  tbody tr:nth-of-type(2n + 2) td {
-    box-shadow: inset 1px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  tbody tr:last-child {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
-`;
diff --git a/src/screens/network_guides/components/network_info/index.module.scss b/src/screens/network_guides/components/network_info/index.module.scss
index f8560503..797e429a 100644
--- a/src/screens/network_guides/components/network_info/index.module.scss
+++ b/src/screens/network_guides/components/network_info/index.module.scss
@@ -108,6 +108,8 @@ $card-shadow:
 }
 
 .readMoreButton {
+  background: transparent;
+  border: none;
   color: #007fff;
   display: inline-block;
   padding: 0;
@@ -162,3 +164,47 @@ $card-shadow:
   font-size: 14px;
   font-weight: 700;
 }
+
+.contentCss {
+  :global {
+    -webkit-box-orient: vertical;
+    color: $color-forbole-blue-1;
+    display: -webkit-box;
+    font-size: 14px;
+    -webkit-line-clamp: 8;
+    margin: auto;
+    overflow: hidden;
+    padding: 0 16px;
+    text-overflow: ellipsis;
+    width: 100%;
+    word-break: break-word;
+
+    a {
+      transition: 0.3s;
+
+      &:hover {
+        color: rgba(0, 0, 0, 0.87);
+      }
+    }
+
+    li {
+      display: none;
+    }
+
+    p {
+      text-align: center;
+    }
+
+    @media only screen and (min-width: 1024px) {
+      flex: 1;
+      font-size: 16px;
+      -webkit-line-clamp: 5;
+      line-height: 22px;
+      margin: inherit;
+
+      p {
+        text-align: left;
+      }
+    }
+  }
+}
diff --git a/src/screens/network_guides/components/network_info/index.tsx b/src/screens/network_guides/components/network_info/index.tsx
index b5f10748..697d50ad 100644
--- a/src/screens/network_guides/components/network_info/index.tsx
+++ b/src/screens/network_guides/components/network_info/index.tsx
@@ -17,13 +17,13 @@ import { useCallback, useState } from "react";
 
 import HighlightButton from "@src/components/highlight-button";
 import CopyIcon from "@src/components/icons/icon_copy.svg";
+import * as guideStyles from "@src/screens/network_guides/components/guide/components/guide_details/index.module.scss";
 import { getMiddleEllipsis } from "@src/utils/get_middle_ellipsis";
 import { getNetworkInfo } from "@src/utils/network_info";
 
 import InfoCard from "./components/info_card";
 import { useNetworkGuidesHook } from "./hooks";
 import * as styles from "./index.module.scss";
-import { ContentBox, ContentCSS } from "./styles";
 
 const excludedImgChains = new Set([
   "archway",
@@ -152,13 +152,14 @@ const NetworkInfo = ({ post }: any) => {
               {!onlyLargeScreen ? (
                 <div className={styles.post}>
                   {readMore ? (
-                    <ContentCSS theme={theme}>
-                      <ContentBox
+                    <div className={styles.contentCss}>
+                      <div
+                        className={guideStyles.guideContentBox}
                         dangerouslySetInnerHTML={{
                           __html: sanitize(post.html),
                         }}
                       />
-                    </ContentCSS>
+                    </div>
                   ) : (
                     <>
                       <span
@@ -183,11 +184,12 @@ const NetworkInfo = ({ post }: any) => {
                   )}
                 </div>
               ) : (
-                <ContentCSS theme={theme}>
-                  <ContentBox
+                <div className={styles.contentCss}>
+                  <div
+                    className={guideStyles.guideContentBox}
                     dangerouslySetInnerHTML={{ __html: sanitize(post.html) }}
                   />
-                </ContentCSS>
+                </div>
               )}
               {!!networkStats?.length && (
                 <div className={styles.infoBox}>
diff --git a/src/screens/network_guides/components/network_info/styles.ts b/src/screens/network_guides/components/network_info/styles.ts
deleted file mode 100644
index dd0fe653..00000000
--- a/src/screens/network_guides/components/network_info/styles.ts
+++ /dev/null
@@ -1,441 +0,0 @@
-import styled from "@emotion/styled";
-import type { ThemeOptions } from "@mui/material/styles";
-
-type ContentProps = {
-  theme: ThemeOptions;
-};
-
-export const ContentCSS = styled.div<ContentProps>`
-  word-break: break-word;
-  width: 100%;
-  margin: auto;
-  font-size: 14px;
-  color: ${(props) => props?.theme?.palette?.custom?.forbole?.blue};
-  a {
-    transition: 0.3s;
-    &:hover {
-      color: rgba(0, 0, 0, 0.87);
-    }
-  }
-  li {
-    display: none;
-  }
-  p {
-    text-align: center;
-  }
-  padding: 0px 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 8;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  @media only screen and (min-width: 1024px) {
-    -webkit-line-clamp: 5;
-    flex: 1;
-    font-size: 16px;
-    line-height: 22px;
-    margin: inherit;
-    p {
-      text-align: left;
-    }
-  }
-`;
-
-export const ContentBox = styled.div<any>`
-  /* Content grid
-/* ---------------------------------------------------------- */
-
-  .gh-canvas {
-    display: grid;
-    grid-template-columns:
-      [full-start]
-      minmax(calc(calc(100% - 1200px) / 2), 1fr)
-      [wide-start]
-      auto
-      [main-start]
-      720px
-      [main-end]
-      auto
-      [wide-end]
-      minmax(calc(calc(100% - 1200px) / 2), 1fr)
-      [full-end];
-  }
-
-  @media (max-width: 1296px) {
-    .gh-canvas {
-      grid-template-columns:
-        [full-start]
-        4vmin
-        [wide-start]
-        auto
-        [main-start]
-        720px
-        [main-end]
-        auto
-        [wide-end]
-        4vmin
-        [full-end];
-    }
-  }
-
-  @media (max-width: 778px) {
-    .gh-canvas {
-      grid-template-columns:
-        [full-start]
-        4vmin
-        [wide-start]
-        0
-        [main-start]
-        auto
-        [main-end]
-        0
-        [wide-end]
-        4vmin
-        [full-end];
-    }
-  }
-
-  .gh-canvas > * {
-    grid-column: main-start / main-end;
-  }
-
-  .kg-width-wide {
-    grid-column: wide-start / wide-end;
-  }
-
-  .kg-width-full {
-    grid-column: full-start / full-end;
-  }
-
-  .kg-width-full img {
-    width: 100%;
-  }
-
-  /* Content & Typography
-/* ---------------------------------------------------------- */
-
-  > * + * {
-    margin-top: 1.5rem;
-  }
-
-  [id]:not(:first-of-type) {
-    margin: 1.5em 0 0;
-  }
-
-  > [id] + * {
-    margin-top: 2vmin;
-  }
-
-  [id] + .kg-card,
-  blockquote + .kg-card {
-    margin-top: 6vmin;
-  }
-
-  .gh-canvas > blockquote,
-  .gh-canvas > ol,
-  .gh-canvas > ul,
-  .gh-canvas > dl,
-  .gh-canvas > p {
-    font-family: var(--font-serif);
-    font-weight: 400;
-    font-size: 2rem;
-    line-height: 1.6em;
-  }
-
-  > ul,
-  > ol,
-  > dl {
-    padding-left: 1.9em;
-  }
-
-  hr {
-    margin-top: 6vmin;
-    border: 1px solid;
-    border-color: rgba(247, 247, 247, 1);
-  }
-
-  hr + * {
-    margin-top: 6vmin !important;
-  }
-
-  blockquote {
-    position: relative;
-    font-style: italic;
-  }
-
-  blockquote::before {
-    content: "";
-    position: absolute;
-    left: -1.5em;
-    top: 0;
-    bottom: 0;
-    width: 0.3rem;
-    background: var(--color-primary);
-  }
-
-  @media (max-width: 650px) {
-    .gh-canvas blockquote,
-    .gh-canvas ol,
-    .gh-canvas ul,
-    .gh-canvas dl,
-    .gh-canvas p {
-      font-size: 1.8rem;
-    }
-
-    blockquote::before {
-      left: -4vmin;
-    }
-  }
-
-  /* Cards
-/* ---------------------------------------------------------- */
-
-  :not(.kg-card):not([id]) + .kg-card {
-    margin-top: 6vmin;
-  }
-
-  .kg-card + :not(.kg-card) {
-    margin-top: 6vmin;
-  }
-
-  .kg-card figcaption {
-    padding: 0.6rem 1.5rem 0;
-    text-align: center;
-    color: rgba(0, 0, 0, 0.5);
-    font-weight: 300;
-    font-size: 0.9rem;
-    line-height: 1.4em;
-  }
-
-  .kg-card figcaption strong {
-    color: rgba(0, 0, 0, 0.8);
-  }
-
-  code {
-    vertical-align: middle;
-    padding: 0.15em 0.4em 0.15em;
-    border: #e1eaef 1px solid;
-    font-weight: 400 !important;
-    font-size: 0.9em;
-    line-height: 1em;
-    color: #dc0050;
-    background: #f0f6f9;
-    border-radius: 0.25em;
-  }
-
-  pre {
-    overflow: auto;
-    padding: 16px 20px;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 5px;
-    box-shadow:
-      0 2px 6px -2px rgba(0, 0, 0, 0.1),
-      0 0 1px rgba(0, 0, 0, 0.4);
-  }
-
-  .kg-embed-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-  }
-
-  .kg-image-card img {
-    margin: auto;
-    object-fit: cover;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Galleries
-/* ---------------------------------------------------------- */
-
-  .kg-gallery-card + .kg-gallery-card {
-    margin-top: 0.75em;
-  }
-
-  .kg-gallery-container {
-    position: relative;
-  }
-
-  .kg-gallery-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
-
-  .kg-gallery-image img {
-    display: block;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .kg-gallery-row:not(:first-of-type) {
-    margin: 0.75em 0 0 0;
-  }
-
-  .kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 0.75em;
-  }
-
-  /* Bookmark Cards
-/* ---------------------------------------------------------- */
-
-  .kg-bookmark-card,
-  .kg-bookmark-publisher {
-    position: relative;
-  }
-
-  .kg-bookmark-container,
-  .kg-bookmark-container:hover {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row-reverse;
-    color: currentColor;
-    background: rgba(255, 255, 255, 0.6);
-    font-family: var(--font-sans-serif);
-    text-decoration: none;
-    border-radius: 5px;
-    box-shadow:
-      0 2px 6px -2px rgba(0, 0, 0, 0.1),
-      0 0 1px rgba(0, 0, 0, 0.4);
-    overflow: hidden;
-  }
-
-  .kg-bookmark-content {
-    flex-basis: 0;
-    flex-grow: 999;
-    padding: 20px;
-    order: 1;
-  }
-
-  .kg-bookmark-title {
-    font-weight: 600;
-    font-size: 1.5rem;
-    line-height: 1.3em;
-  }
-
-  .kg-bookmark-description {
-    display: -webkit-box;
-    max-height: 45px;
-    margin: 0.5em 0 0 0;
-    font-size: 1.4rem;
-    line-height: 1.55em;
-    overflow: hidden;
-    opacity: 0.8;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  .kg-bookmark-metadata {
-    margin-top: 20px;
-  }
-
-  .kg-bookmark-metadata {
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 1.3rem;
-    line-height: 1.3em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .kg-bookmark-description {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-  }
-
-  .kg-bookmark-icon {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-  }
-
-  .kg-bookmark-thumbnail {
-    display: flex;
-    flex-basis: 24rem;
-    flex-grow: 1;
-    justify-content: flex-end;
-  }
-
-  .kg-bookmark-thumbnail img {
-    max-width: 100%;
-    height: auto;
-    vertical-align: bottom;
-    object-fit: cover;
-  }
-
-  .kg-bookmark-author {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .kg-bookmark-publisher::before {
-    content: "•";
-    margin: 0 0.5em;
-  }
-
-  /* Card captions
-/* ---------------------------------------------------------- */
-
-  .kg-width-full.kg-card-hascaption {
-    display: grid;
-    grid-template-columns: inherit;
-  }
-
-  .kg-width-wide.kg-card-hascaption img {
-    grid-column: wide-start / wide-end;
-  }
-  .kg-width-full.kg-card-hascaption img {
-    grid-column: 1 / -1;
-  }
-
-  .kg-width-full.kg-card-hascaption figcaption {
-    grid-column: main-start / main-end;
-  }
-
-  /* Tables
-/* ---------------------------------------------------------- */
-
-  table {
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  th {
-    padding: 0.5em 0.8em;
-    text-align: left;
-    font-size: 0.75em;
-    text-transform: uppercase;
-  }
-
-  td {
-    padding: 0.4em 0.7em;
-  }
-
-  tbody tr:nth-of-type(2n + 1) {
-    background-color: rgba(0, 0, 0, 0.1);
-    padding: 1px;
-  }
-
-  tbody tr:nth-of-type(2n + 2) td:last-child {
-    box-shadow:
-      inset 1px 0 rgba(0, 0, 0, 0.1),
-      inset -1px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  tbody tr:nth-of-type(2n + 2) td {
-    box-shadow: inset 1px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  tbody tr:last-child {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
-`;
diff --git a/src/screens/products/index.module.scss b/src/screens/products/index.module.scss
index 84d7c94f..9c2c9c80 100644
--- a/src/screens/products/index.module.scss
+++ b/src/screens/products/index.module.scss
@@ -242,12 +242,6 @@
   padding: 0;
 }
 
-.mobileOnly {
-  @include up-tablet {
-    display: none;
-  }
-}
-
 .notMobile {
   @include down-tablet {
     display: none;
@@ -270,3 +264,15 @@
   flex-direction: row;
   gap: spacing(1);
 }
+
+.mobileButtons {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: spacing(1);
+  justify-content: center;
+
+  @include up-tablet {
+    display: none;
+  }
+}
diff --git a/src/screens/products/index.tsx b/src/screens/products/index.tsx
index 6314e1af..8b9d26ce 100644
--- a/src/screens/products/index.tsx
+++ b/src/screens/products/index.tsx
@@ -209,7 +209,7 @@ const Products = () => {
                 label={t("developer")}
               />
             </StyledTabs>
-            <div className={styles.mobileOnly}>
+            <div className={styles.mobileButtons}>
               <CtaButton
                 className={styles.response36}
                 onClick={(e) => {
@@ -333,7 +333,7 @@ const Products = () => {
                 label={t("enterprise-solution")}
               />
             </StyledTabs>
-            <div className={styles.mobileOnly}>
+            <div className={styles.mobileButtons}>
               <CtaButton
                 className={styles.response}
                 onClick={(e) => {
diff --git a/src/screens/staking/components/contact_forbole/components/contact_card/index.module.scss b/src/screens/staking/components/contact_forbole/components/contact_card/index.module.scss
index 36e8ca40..272faf3e 100644
--- a/src/screens/staking/components/contact_forbole/components/contact_card/index.module.scss
+++ b/src/screens/staking/components/contact_forbole/components/contact_card/index.module.scss
@@ -100,3 +100,10 @@ $input-shadow:
     justify-content: flex-end;
   }
 }
+
+.label {
+  font-size: spacing(2);
+  font-weight: 600;
+  padding-bottom: 14px;
+  text-align: left;
+}
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 cfb8b4cc..0b5416e3 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
@@ -7,7 +7,6 @@ import {
   MenuItem,
   Select,
   TextField,
-  Typography,
   useTheme,
 } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
@@ -59,17 +58,7 @@ const ContactCard = () => {
       <form noValidate onSubmit={handleSubmit}>
         <CardContent className={styles.cardContent}>
           <div className={styles.name}>
-            <Typography
-              component="div"
-              fontSize={theme.spacing(2)}
-              fontWeight={600}
-              gutterBottom
-              pb={theme.spacing(1)}
-              textAlign="left"
-              variant="h6"
-            >
-              {t("your name")}
-            </Typography>
+            <h6 className={styles.label}>{t("your name")}</h6>
             <TextField
               className={styles.input}
               helperText=" "
@@ -81,17 +70,7 @@ const ContactCard = () => {
             />
           </div>
           <div className={styles.mail}>
-            <Typography
-              component="div"
-              fontSize={theme.spacing(2)}
-              fontWeight={600}
-              gutterBottom
-              pb={theme.spacing(1)}
-              textAlign="left"
-              variant="h6"
-            >
-              {t("your email")}
-            </Typography>
+            <h6 className={styles.label}>{t("your email")}</h6>
             <TextField
               className={styles.input}
               helperText=" "
@@ -103,17 +82,7 @@ const ContactCard = () => {
             />
           </div>
           <div className={styles.select}>
-            <Typography
-              component="div"
-              fontSize={theme.spacing(2)}
-              fontWeight={600}
-              gutterBottom
-              pb={theme.spacing(1)}
-              textAlign="left"
-              variant="h6"
-            >
-              {t("how can we help you")}
-            </Typography>
+            <h6 className={styles.label}>{t("how can we help you")}</h6>
             <FormControl>
               {inputs.option === "" ? (
                 <InputLabel focused={false} id="item_type_label" shrink={false}>