diff --git a/src/components/intro_card/index.module.scss b/src/components/intro_card/index.module.scss
new file mode 100644
index 00000000..645639dc
--- /dev/null
+++ b/src/components/intro_card/index.module.scss
@@ -0,0 +1,77 @@
+@import "src/styles/sass.scss";
+
+.wrapper {
+  background: #fff;
+  border-radius: 24px;
+  box-shadow:
+    0 10px 32px -4px rgba(96, 60, 238, 0.1),
+    0 6px 14px -6px rgba(96, 60, 238, 0.28);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: calc(100vw - 40px);
+  overflow: hidden;
+  position: relative;
+}
+
+.imageWrapper {
+  height: 200px;
+  position: relative;
+  width: 100%;
+}
+
+.contentWrapper {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-flow: column wrap;
+  justify-content: space-between;
+  padding: 24px;
+  row-gap: 24px;
+}
+
+.title {
+  color: #202a43;
+  font-size: 20px;
+  font-weight: 590;
+  margin-bottom: 12px;
+}
+
+.listItem {
+  color: #202a43;
+  display: flex;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+  padding-left: 10px;
+  padding-right: 10px;
+
+  &::before {
+    background-color: #202a43;
+    border-radius: 4px;
+    content: " ";
+    display: inline-block;
+    flex: 0 0 auto;
+    height: 4px;
+    margin-right: 10px;
+    margin-top: 10px;
+    vertical-align: middle;
+    width: 4px;
+  }
+}
+
+.desc {
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.image {
+  object-fit: cover;
+}
+
+.ctaButton {
+  align-self: flex-start;
+  font-family: "590";
+}
diff --git a/src/components/intro_card/index.tsx b/src/components/intro_card/index.tsx
index 29d08212..e447cb37 100644
--- a/src/components/intro_card/index.tsx
+++ b/src/components/intro_card/index.tsx
@@ -3,6 +3,7 @@ import Box from "@mui/material/Box";
 import Image from "next/image";
 
 import CtaButton from "../cta-button";
+import * as styles from "./index.module.scss";
 
 type Props = {
   title?: string;
@@ -25,99 +26,30 @@ const IntroCard = (props: Props) => {
   } = props;
 
   return (
-    <Box
-      component="div"
-      sx={{
-        background: "#FFF",
-        borderRadius: "24px",
-        boxSizing: "border-box",
-        boxShadow:
-          "0px 10px 32px -4px rgba(96, 60, 238, 0.10), 0px 6px 14px -6px rgba(96, 60, 238, 0.28)",
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        maxWidth: "calc(100vw - 40px)",
-        overflow: "hidden",
-        position: "relative",
-      }}
-    >
-      <Box
-        sx={{
-          height: 200,
-          position: "relative",
-          width: "100%",
-        }}
-      >
+    <Box className={styles.wrapper} component="div">
+      <Box className={styles.imageWrapper}>
         {imageHref && (
           <Image
             alt={title ? `${title} image` : ""}
+            className={styles.image}
             fill
             src={imageHref}
-            style={{ objectFit: "cover" }}
           />
         )}
       </Box>
-      <Box
-        component="div"
-        sx={{
-          flex: 1,
-          padding: "24px",
-          boxSizing: "border-box",
-          display: "flex",
-          flexWrap: "wrap",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          rowGap: "24px",
-          justifyContent: "space-between",
-        }}
-      >
+      <Box className={styles.contentWrapper} component="div">
         <Box>
-          <Typography
-            sx={{
-              fontWeight: "590",
-              fontSize: "20px",
-              marginBottom: "12px",
-              color: "#202A43",
-            }}
-          >
-            {title}
-          </Typography>
+          <Typography className={styles.title}>{title}</Typography>
 
           {typeof desc && (
-            <Typography
-              sx={{
-                fontSize: "16px",
-                lineHeight: "22px",
-              }}
-            >
-              {desc}
-            </Typography>
+            <Typography className={styles.desc}>{desc}</Typography>
           )}
           <ul style={{ listStyle: "none" }}>
             {list?.map((item, index) => (
               <Typography
+                className={styles.listItem}
                 component="li"
                 key={index}
-                px="10px"
-                sx={{
-                  "display": "flex",
-                  "fontSize": "16px",
-                  "lineHeight": "22px",
-                  "fontWeight": "400",
-                  "color": "#202A43",
-                  "&:before": {
-                    content: '" "',
-                    display: "inline-block",
-                    width: "4px",
-                    height: "4px",
-                    backgroundColor: "#202A43",
-                    borderRadius: "4px",
-                    verticalAlign: "middle",
-                    marginRight: "10px",
-                    marginTop: "10px",
-                    flex: "0 0 auto",
-                  },
-                }}
               >
                 {item}
               </Typography>
@@ -125,12 +57,9 @@ const IntroCard = (props: Props) => {
           </ul>
         </Box>
         <CtaButton
+          className={styles.ctaButton}
           disabled={disabled}
           onClick={btnClick}
-          sx={{
-            fontFamily: "590",
-            alignSelf: " flex-start",
-          }}
         >
           {btnName}
         </CtaButton>
diff --git a/src/pages/author/[author]/index.tsx b/src/pages/author/[author]/index.tsx
index f775194f..228e81e1 100644
--- a/src/pages/author/[author]/index.tsx
+++ b/src/pages/author/[author]/index.tsx
@@ -14,6 +14,7 @@ export async function getServerSideProps(context: { query: any }) {
   let formattedTags: Tag[] = [];
   let meta = {};
   let error = false;
+
   try {
     const { query } = context;
     const fetchQuery: any = {};
diff --git a/src/screens/author/components/author_posts/index.tsx b/src/screens/author/components/author_posts/index.tsx
index 850a9b5a..131ba712 100644
--- a/src/screens/author/components/author_posts/index.tsx
+++ b/src/screens/author/components/author_posts/index.tsx
@@ -1,15 +1,20 @@
 import { Box, Pagination } from "@mui/material";
-import { pathOr } from "ramda";
 
 import Post from "@src/screens/blog/components/blog_posts/components/post";
 
+import type { AuthorMeta } from "../../types";
 import { useBlogPostsHook } from "./hooks";
 import * as styles from "./index.module.scss";
-import type { IProps } from "./interface";
+
+interface IProps {
+  blogs: any[];
+  main: any;
+  meta: AuthorMeta;
+}
 
 const AuthorPosts = ({ main, blogs, meta }: IProps) => {
-  const currentPage = pathOr(0, ["pagination", "page"], meta);
-  const totalPages = pathOr(0, ["pagination", "pages"], meta);
+  const currentPage = meta.pagination?.page || 0;
+  const totalPages = meta.pagination?.pages || 0;
 
   const { handleAuthorPageChange } = useBlogPostsHook();
 
diff --git a/src/screens/author/components/author_posts/interface.ts b/src/screens/author/components/author_posts/interface.ts
deleted file mode 100644
index f48a8080..00000000
--- a/src/screens/author/components/author_posts/interface.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface IProps {
-  main: any;
-  blogs: any[];
-  meta: any;
-}
diff --git a/src/screens/author/index.tsx b/src/screens/author/index.tsx
index 56a18a55..b87d7177 100644
--- a/src/screens/author/index.tsx
+++ b/src/screens/author/index.tsx
@@ -1,13 +1,22 @@
 import { Box, Typography } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
+import Head from "next/head";
 
 import Layout from "@src/components/layout";
 
 import AuthorPosts from "./components/author_posts";
 import { useBlogHook } from "./hooks";
 import * as styles from "./index.module.scss";
+import type { AuthorMeta } from "./types";
 
-const AuthorTitlePosts = (props: any) => {
+type Props = {
+  author: any;
+  meta: AuthorMeta;
+  post: any;
+  tags: any;
+};
+
+const AuthorTitlePosts = (props: Props) => {
   const { t } = useTranslation("blog");
   const { post, tags, author, meta } = props;
   const { featureImage, excerpt, error } = post;
@@ -25,6 +34,35 @@ const AuthorTitlePosts = (props: any) => {
       title={post.title}
       type="article"
     >
+      <Head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              "@context": "https://schema.org",
+              "@type": "ProfilePage",
+              "mainEntity": {
+                "@type": "Person",
+                "name": author.name,
+                "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,
+                },
+              },
+            }),
+          }}
+          type="application/ld+json"
+        />
+      </Head>
       <Box className={styles.container}>
         <Box className={styles.content}>
           <Box className={styles.innerContent}>
diff --git a/src/screens/author/types.ts b/src/screens/author/types.ts
new file mode 100644
index 00000000..79ca49d1
--- /dev/null
+++ b/src/screens/author/types.ts
@@ -0,0 +1,7 @@
+export type AuthorMeta = {
+  pagination: {
+    page: number;
+    pages: number;
+    total: number;
+  };
+};
diff --git a/src/screens/blog_details/index.tsx b/src/screens/blog_details/index.tsx
index fe4e6927..8900724a 100644
--- a/src/screens/blog_details/index.tsx
+++ b/src/screens/blog_details/index.tsx
@@ -70,6 +70,8 @@ const BlogDetails = ({ post }: any) => {
               "author": [
                 {
                   "@type": "Person",
+                  "alternateName": author.slug,
+                  "image": author.profileImage,
                   "name": author.name,
                   "url": `https://www.forbole.com/author/${author.slug}`,
                 },
diff --git a/src/screens/contact/index.module.scss b/src/screens/contact/index.module.scss
new file mode 100644
index 00000000..ce98d7f3
--- /dev/null
+++ b/src/screens/contact/index.module.scss
@@ -0,0 +1,158 @@
+@import "src/styles/sass.scss";
+
+$form-background: linear-gradient(
+  180deg,
+  #fff 0%,
+  rgba(255, 255, 255, 0.64) 64.58%,
+  #fff 100%
+);
+
+$form-shadow:
+  0 10px 32px -4px rgba(2, 38, 225, 0.1),
+  0 6px 14px -6px rgba(2, 38, 225, 0.12);
+
+.form {
+  background: $form-background;
+  border-radius: 24px;
+  box-shadow: $form-shadow;
+  gap: 40px;
+  margin: 164px auto;
+  padding: 64px;
+  width: 1000px;
+
+  @include down-laptop {
+    gap: 24px;
+    margin-top: 104px;
+    padding: 24px;
+    width: 343px;
+  }
+}
+
+.icon {
+  align-items: center;
+  background: #2a1a6a;
+  border-radius: 50%;
+  box-shadow: 4px 8px 24px 0 rgba(116, 81, 255, 0.28);
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  width: 40px;
+}
+
+.title {
+  font-size: 32px;
+  font-weight: 590;
+  margin-bottom: 8px;
+
+  @include down-laptop {
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+}
+
+.desc {
+  font-size: 16px;
+  font-weight: 300;
+}
+
+.contact {
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  margin-top: 24px;
+
+  @include down-laptop {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+.method {
+  color: #202a43;
+  font-size: 16px;
+  opacity: 0.6;
+}
+
+.label {
+  font-size: 16px;
+  font-weight: 590;
+}
+
+.checkboxWrapper {
+  font-size: 16px;
+  justify-content: space-between;
+  line-height: 30px;
+  margin: 0;
+  padding: 12px 0;
+  width: 100%;
+}
+
+.checkbox {
+  color: #afafaf;
+  padding-bottom: 0;
+  padding-top: 0;
+
+  &:global(.Mui-checked) {
+    color: #ee3131;
+  }
+}
+
+.listItem {
+  background: #fff;
+  border-bottom: 2px solid rgba(96, 60, 238, 0.28);
+}
+
+.listItemInput {
+  background: #fff;
+  border-bottom: 2px solid rgba(96, 60, 238, 0.28);
+  width: auto;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.input {
+  color: #878787;
+  font-size: 16px;
+  line-height: 30px;
+  padding: 12px;
+}
+
+.checkboxAgree {
+  color: #afafaf;
+  padding-bottom: 0;
+  padding-top: 0;
+
+  &:global(.Mui-checked) {
+    color: #ee3131;
+  }
+}
+
+.agreeWrapper {
+  align-items: flex-start;
+  line-height: 30px;
+  margin-right: 0;
+  vertical-align: top;
+}
+
+.labelStart {
+  font-size: 16px;
+  font-weight: 590;
+  margin-bottom: 16px;
+}
+
+.list {
+  border-radius: 8px;
+  box-shadow:
+    0 10px 32px -4px rgba(96, 60, 238, 0.1),
+    0 6px 14px -6px rgba(96, 60, 238, 0.28);
+  overflow: hidden;
+  padding-bottom: 0;
+  padding-top: 0;
+  width: 100%;
+}
+
+.required {
+  color: #ff426b;
+}
diff --git a/src/screens/contact/index.tsx b/src/screens/contact/index.tsx
index d69fec00..7a206eb1 100644
--- a/src/screens/contact/index.tsx
+++ b/src/screens/contact/index.tsx
@@ -22,7 +22,7 @@ import Layout from "@src/components/layout";
 import SuccessModal from "@src/components/success-modal";
 
 import useContactForm from "./hooks";
-import { styles } from "./styles";
+import * as styles from "./index.module.scss";
 
 const Contact = () => {
   const { t } = useTranslation("contact");
@@ -65,90 +65,32 @@ const Contact = () => {
   return (
     <Layout description={t("form_desc")} footer title={t("page_title")}>
       <Container>
-        <Stack
-          sx={{
-            width: "1000px",
-            padding: "64px",
-            gap: "40px",
-            borderRadius: "24px",
-            margin: "164px auto",
-            background:
-              "linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.64) 64.58%, #FFF 100%)",
-            boxShadow:
-              "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
-            color: "#202A43",
-            [theme.breakpoints.down("laptop")]: {
-              padding: "24px",
-              width: "343px",
-              gap: "24px",
-              mt: "104px",
-            },
-          }}
-        >
+        <Stack className={styles.form}>
           <Stack>
-            <Typography
-              sx={{
-                fontSize: "32px",
-                fontWeight: 590,
-                mb: "8px",
-                [theme.breakpoints.down("laptop")]: {
-                  fontSize: "18px",
-                  mb: "15px",
-                },
-              }}
-            >
-              {t("form_title")}
-            </Typography>
+            <Typography className={styles.title}>{t("form_title")}</Typography>
+            <Typography className={styles.desc}>{t("form_desc")}</Typography>
 
-            <Typography
-              sx={{
-                fontSize: "16px",
-                fontWeight: 300,
-              }}
-            >
-              {t("form_desc")}
-            </Typography>
-
-            <Stack
-              sx={{
-                mt: "24px",
-                flexDirection: "row",
-                alignItems: "center",
-                gap: "8px",
-                [theme.breakpoints.down("laptop")]: {
-                  flexDirection: "column",
-                  alignItems: "flex-start",
-                },
-              }}
-            >
+            <Stack className={styles.contact}>
               <Stack direction="row">
                 <Box
+                  className={styles.icon}
                   mr="8px"
                   onClick={() => {
                     router.push("mailto:info@forbole.com");
                   }}
-                  sx={styles.iconBox}
                 >
                   <img alt="" src="/icons/email.svg" />
                 </Box>
                 <Box
+                  className={styles.icon}
                   onClick={() => {
                     router.push("https://t.me/forbole");
                   }}
-                  sx={styles.iconBox}
                 >
                   <img alt="" src="/icons/Telegram.svg" />
                 </Box>
               </Stack>
-              <Typography
-                sx={{
-                  fontSize: "16px",
-                  color: "#202A43",
-                  opacity: "0.6",
-                }}
-              >
-                {t("method")}
-              </Typography>
+              <Typography className={styles.method}>{t("method")}</Typography>
             </Stack>
           </Stack>
           <Grid
@@ -156,14 +98,9 @@ const Contact = () => {
             spacing={{ mobile: theme.spacing(3), desktop: theme.spacing(4) }}
           >
             <Grid item laptop={6} mobile={12}>
-              <Typography
-                sx={{
-                  fontSize: "16px",
-                  fontWeight: "590",
-                }}
-              >
+              <Typography className={styles.label}>
                 {t("label_name")}
-                <span style={{ color: "#FF426B" }}>*</span>
+                <span className={styles.required}>*</span>
               </Typography>
               <FormInput
                 name="name"
@@ -173,12 +110,7 @@ const Contact = () => {
               />
             </Grid>
             <Grid item laptop={6} mobile={12}>
-              <Typography
-                sx={{
-                  fontSize: "16px",
-                  fontWeight: "590",
-                }}
-              >
+              <Typography className={styles.label}>
                 {t("label_company")}
               </Typography>
               <FormInput
@@ -189,14 +121,9 @@ const Contact = () => {
               />
             </Grid>
             <Grid item laptop={6} mobile={12}>
-              <Typography
-                sx={{
-                  fontSize: "16px",
-                  fontWeight: "590",
-                }}
-              >
+              <Typography className={styles.label}>
                 {t("label_email")}
-                <span style={{ color: "#FF426B" }}>*</span>
+                <span className={styles.required}>*</span>
               </Typography>
               <FormInput
                 name="email"
@@ -207,12 +134,7 @@ const Contact = () => {
               />
             </Grid>
             <Grid item laptop={6} mobile={12}>
-              <Typography
-                sx={{
-                  fontSize: "16px",
-                  fontWeight: "590",
-                }}
-              >
+              <Typography className={styles.label}>
                 {t("label_telegram")}
               </Typography>
               <FormInput
@@ -223,75 +145,33 @@ const Contact = () => {
               />
             </Grid>
             <Grid item laptop={6} mobile={12}>
-              <Typography
-                sx={{
-                  fontSize: "16px",
-                  fontWeight: "590",
-                  mb: "16px",
-                }}
-              >
+              <Typography className={styles.labelStart}>
                 {t("get_start")}
-                <span style={{ color: "#FF426B" }}>*</span>
+                <span className={styles.required}>*</span>
               </Typography>
-              <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,
-                }}
-              >
+              <List className={styles.list} dense>
                 {selectList.map((value) => (
-                  <ListItem
-                    key={value.label}
-                    sx={{
-                      bgcolor: "#ffffff",
-                      borderBottom: "2px solid rgba(96, 60, 238, 0.28)",
-                    }}
-                  >
+                  <ListItem className={styles.listItem} key={value.label}>
                     <FormControlLabel
+                      className={styles.checkboxWrapper}
                       control={
                         <Checkbox
                           checked={inputs[value.name]}
+                          className={styles.checkbox}
                           name={value.name}
                           onChange={handleToggle}
-                          sx={{
-                            "py": "0",
-                            "color": "#AFAFAF",
-                            "&.Mui-checked": {
-                              color: "#EE3131",
-                            },
-                          }}
                           value={value.name}
                         />
                       }
                       id={value.label}
                       label={value.label}
                       labelPlacement="start"
-                      sx={{
-                        width: "100%",
-                        justifyContent: "space-between",
-                        m: 0,
-                        p: "12px 0",
-                        fontSize: "16px",
-                        lineHeight: "30px",
-                      }}
                     />
                   </ListItem>
                 ))}
-                <ListItem
-                  disablePadding
-                  sx={{
-                    "width": "auto",
-                    "&:last-child": { borderBottom: "0" },
-                    "bgcolor": "#ffffff",
-                    "borderBottom": "2px solid rgba(96, 60, 238, 0.28)",
-                  }}
-                >
+                <ListItem className={styles.listItemInput} disablePadding>
                   <Input
+                    className={styles.input}
                     disableUnderline
                     disabled={!inputs.other}
                     fullWidth
@@ -299,12 +179,6 @@ const Contact = () => {
                     onInput={handleInputChange}
                     placeholder={t("item_5")}
                     ref={inputRef}
-                    sx={{
-                      p: "12px",
-                      fontSize: "16px",
-                      lineHeight: "30px",
-                      color: "#878787",
-                    }}
                     value={inputs.specify}
                   />
                 </ListItem>
@@ -313,27 +187,16 @@ const Contact = () => {
             <Grid item mobile={12}>
               <FormGroup>
                 <FormControlLabel
+                  className={styles.agreeWrapper}
                   control={
                     <Checkbox
                       checked={inputs.agree}
+                      className={styles.checkboxAgree}
                       name="agree"
                       onChange={handleCheckedChange}
-                      sx={{
-                        "py": "0",
-                        "color": "#AFAFAF",
-                        "&.Mui-checked": {
-                          color: "#EE3131",
-                        },
-                      }}
                     />
                   }
                   label={t("check_word")}
-                  sx={{
-                    mr: 0,
-                    verticalAlign: "top",
-                    lineHeight: "30px",
-                    alignItems: "flex-start",
-                  }}
                 />
               </FormGroup>
             </Grid>
diff --git a/src/screens/contact/styles.tsx b/src/screens/contact/styles.tsx
deleted file mode 100644
index b748d4ee..00000000
--- a/src/screens/contact/styles.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { Theme } from "@mui/material";
-import type { SxProps } from "@mui/system";
-
-export const styles = {
-  gridBox: (theme) => ({
-    [theme.breakpoints.up("laptop")]: {
-      display: "grid",
-      gridTemplateColumns: "6fr 4fr",
-      gridGap: 0,
-    },
-  }),
-  iconBox: () => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "40px",
-    height: "40px",
-    borderRadius: "50%",
-    background: "#2A1A6A",
-    boxShadow: "4px 8px 24px 0px rgba(116, 81, 255, 0.28)",
-  }),
-} satisfies { [index: string]: SxProps<Theme> };
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
new file mode 100644
index 00000000..689e8889
--- /dev/null
+++ b/src/screens/staking/components/contact_forbole/components/contact_card/index.module.scss
@@ -0,0 +1,115 @@
+@import "src/styles/sass.scss";
+
+.wrapper {
+  background: $color-primary-light;
+  border-radius: spacing(3);
+  box-shadow: $box-shadow-variant-1;
+  margin: auto;
+  max-width: 100%;
+
+  @include up-laptop {
+    max-width: 70%;
+  }
+}
+
+.cardContent {
+  padding: spacing(3);
+
+  @include up-laptop {
+    display: grid;
+    grid-gap: spacing(5);
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    padding: spacing(5);
+  }
+}
+
+.name {
+  align-items: stretch;
+  color: $color-forbole-indigo6;
+  display: flex;
+  flex-direction: column;
+
+  @include up-laptop {
+    grid-column: 1 / span 3;
+    grid-row: 1 / span 1;
+  }
+}
+
+$input-shadow:
+  0 8px 22px -6px rgba(2, 38, 225, 0.12),
+  0 14px 64px -4px rgba(2, 38, 225, 0.12);
+
+.input {
+  > :global(.MuiOutlinedInput-root) {
+    border-radius: spacing(1);
+    box-shadow: $input-shadow;
+  }
+
+  :global(.MuiOutlinedInput-notchedOutline) {
+    border: none;
+    border-color: transparent;
+  }
+
+  -webkit-autofill {
+    -webkit-text-fill-color: #000;
+    transition-delay: 9999s;
+  }
+}
+
+.mail {
+  align-items: stretch;
+  color: $color-forbole-indigo6;
+  display: flex;
+  flex-direction: column;
+
+  @include up-laptop {
+    grid-column: 4 / span 3;
+    grid-row: 1 / span 1;
+  }
+}
+
+.select {
+  :global(.MuiFormControl-root) {
+    border-radius: spacing(1);
+    box-shadow: $input-shadow;
+    width: 100%;
+  }
+
+  :global(.MuiFormLabel-root) {
+    color: #878787;
+  }
+
+  :global(.MuiOutlinedInput-notchedOutline) {
+    border: none;
+    border-color: transparent;
+  }
+
+  @include up-laptop {
+    grid-column: 1 / span 5;
+    grid-row: 2 / span 1;
+  }
+}
+
+.buttonDiv {
+  padding: spacing(3) 0 0 0;
+
+  @include up-laptop {
+    grid-column: 6 / span 1;
+    grid-row: 2 / span 1;
+    justify-content: flex-end;
+  }
+}
+
+.button {
+  background: linear-gradient(286.17deg, #d431ee 0%, #ff426b 100%);
+  border-radius: spacing(3);
+  box-shadow: $input-shadow;
+  font-size: spacing(1.875);
+  line-height: 1.5;
+  padding: spacing(1.25) spacing(2);
+
+  @include up-laptop {
+    width: 125px;
+  }
+}
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 69b07e7a..87c860df 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
@@ -18,7 +18,7 @@ import { useEffect, useMemo, useState } from "react";
 import { ExpandIcon } from "@src/components/icons";
 
 import useContactCard from "./hooks";
-import { styles } from "./styles";
+import * as styles from "./index.module.scss";
 
 const ExpandIconWrapper = (props: Record<string, unknown>) => (
   <ExpandIcon {...props} />
@@ -54,33 +54,10 @@ const ContactCard = () => {
   }, []);
 
   return (
-    <Card
-      sx={{
-        background: theme.palette.primary.main,
-        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),
-        maxWidth: "100%",
-        margin: "auto",
-        [theme.breakpoints.up("laptop")]: {
-          maxWidth: "70%",
-        },
-      }}
-    >
+    <Card className={styles.wrapper}>
       <form noValidate onSubmit={handleSubmit}>
-        <CardContent
-          sx={{
-            padding: theme.spacing(3),
-            [theme.breakpoints.up("laptop")]: {
-              padding: theme.spacing(5),
-              gridGap: theme.spacing(5),
-              display: "grid",
-              gridTemplateRows: "repeat(2, 1fr)",
-              gridTemplateColumns: "repeat(6, 1fr)",
-            },
-          }}
-        >
-          <Box sx={styles.nameBox}>
+        <CardContent className={styles.cardContent}>
+          <Box className={styles.name}>
             <Typography
               component="div"
               fontSize={theme.spacing(2)}
@@ -93,16 +70,16 @@ const ContactCard = () => {
               {t("your name")}
             </Typography>
             <TextField
+              className={styles.input}
               helperText=" "
               id="demo-helper-text-aligned-no-helper"
               name="name"
               onChange={handleInputChange}
               placeholder={t("name")}
-              sx={styles.inputField}
               value={inputs.name}
             />
           </Box>
-          <Box sx={styles.mailBox}>
+          <Box className={styles.mail}>
             <Typography
               component="div"
               fontSize={theme.spacing(2)}
@@ -115,16 +92,16 @@ const ContactCard = () => {
               {t("your email")}
             </Typography>
             <TextField
+              className={styles.input}
               helperText=" "
               id="demo-helper-text-aligned-no-helper"
               name="email"
               onChange={handleInputChange}
               placeholder={t("email")}
-              sx={styles.inputField}
               value={inputs.email}
             />
           </Box>
-          <Box sx={styles.select}>
+          <Box className={styles.select}>
             <Typography
               component="div"
               fontSize={theme.spacing(2)}
@@ -189,8 +166,12 @@ const ContactCard = () => {
               </Select>
             </FormControl>
           </Box>
-          <CardActions sx={styles.buttonDiv}>
-            <Button disabled={!canSubmit} sx={styles.button} type="submit">
+          <CardActions className={styles.buttonDiv}>
+            <Button
+              className={styles.button}
+              disabled={!canSubmit}
+              type="submit"
+            >
               {t("get in touch!")}
             </Button>
           </CardActions>
diff --git a/src/screens/staking/components/contact_forbole/components/contact_card/styles.tsx b/src/screens/staking/components/contact_forbole/components/contact_card/styles.tsx
deleted file mode 100644
index 44900ebf..00000000
--- a/src/screens/staking/components/contact_forbole/components/contact_card/styles.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { Theme } from "@mui/material";
-import type { SxProps } from "@mui/system";
-
-export const styles = {
-  nameBox: (theme) => ({
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    color: theme.palette.custom.forbole.indigo6,
-    [theme.breakpoints.up("laptop")]: {
-      gridColumn: "1 / span 3",
-      gridRow: "1 / span 1",
-    },
-  }),
-  mailBox: (theme) => ({
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    color: theme.palette.custom.forbole.indigo6,
-    [theme.breakpoints.up("laptop")]: {
-      gridColumn: "4 / span 3",
-      gridRow: "1 / span 1",
-    },
-  }),
-  inputField: (theme) => ({
-    "> .MuiOutlinedInput-root": {
-      boxShadow:
-        "0px 8px 22px -6px rgba(2, 38, 225, 0.12), 0px 14px 64px -4px rgba(2, 38, 225, 0.12)",
-      borderRadius: theme.spacing(1),
-    },
-    "& .MuiOutlinedInput-notchedOutline": {
-      border: "none",
-      borderColor: "transparent",
-    },
-    "& :-webkit-autofill": {
-      transitionDelay: "9999s",
-      WebkitTextFillColor: theme.palette.common.black,
-    },
-  }),
-  select: (theme) => ({
-    ".MuiFormControl-root": {
-      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),
-    },
-    ".MuiFormLabel-root": {
-      color: "#878787",
-    },
-    "& .MuiOutlinedInput-notchedOutline": {
-      border: "none",
-      borderColor: "transparent",
-    },
-    [theme.breakpoints.up("laptop")]: {
-      gridColumn: "1 / span 5",
-      gridRow: "2 / span 1",
-    },
-  }),
-  paper: (theme) => ({
-    backgroundColor: theme.palette.primary.main,
-  }),
-  buttonDiv: (theme) => ({
-    padding: theme.spacing(3, 0, 0, 0),
-    [theme.breakpoints.up("laptop")]: {
-      gridColumn: "6 / span 1",
-      gridRow: "2 / span 1",
-      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)",
-    borderRadius: theme.spacing(3),
-    padding: theme.spacing(1.25, 2),
-    fontSize: theme.spacing(1.875),
-    lineHeight: 1.5,
-    [theme.breakpoints.up("laptop")]: {
-      width: "125px",
-    },
-  }),
-} satisfies { [index: string]: SxProps<Theme> };
diff --git a/src/screens/staking/components/faq/components/card/index.module.scss b/src/screens/staking/components/faq/components/card/index.module.scss
index 15bc97d1..51fe360c 100644
--- a/src/screens/staking/components/faq/components/card/index.module.scss
+++ b/src/screens/staking/components/faq/components/card/index.module.scss
@@ -34,3 +34,52 @@ $question-shadow:
   text-shadow: $question-shadow;
   width: 80%;
 }
+
+.bulletItem {
+  display: list-item;
+}
+
+.accordionSummary {
+  padding: spacing(3) spacing(5) spacing(3) spacing(3);
+  width: 100%;
+
+  &.expanded {
+    padding: spacing(3) spacing(5) spacing(2) spacing(3);
+  }
+
+  & > :global(.MuiAccordionSummary-expandIconWrapper) {
+    svg {
+      fill: #878787;
+    }
+  }
+
+  & > :global(.Mui-expanded) {
+    h3 {
+      background: linear-gradient(286.17deg, #d431ee 0%, #ff426b 100%);
+      // stylelint-disable-next-line
+      background-clip: text;
+      // stylelint-disable-next-line
+      -webkit-background-clip: text;
+      // stylelint-disable-next-line
+      -webkit-text-fill-color: transparent;
+      // stylelint-disable-next-line
+      tex-fill-color: transparent;
+    }
+  }
+}
+
+.accordionDetails {
+  p {
+    color: $color-forbole-blue;
+    letter-spacing: -0.012em;
+    padding: spacing(0) spacing(3) spacing(2) spacing(3);
+
+    &:last-child {
+      padding-bottom: spacing(1);
+    }
+
+    > li {
+      padding: spacing(0) spacing(0) spacing(1) spacing(0);
+    }
+  }
+}
diff --git a/src/screens/staking/components/faq/components/card/index.tsx b/src/screens/staking/components/faq/components/card/index.tsx
index 63c294a6..24a2b06d 100644
--- a/src/screens/staking/components/faq/components/card/index.tsx
+++ b/src/screens/staking/components/faq/components/card/index.tsx
@@ -5,7 +5,6 @@ import {
   Box,
   ListItem,
   Typography,
-  useTheme,
 } from "@mui/material";
 
 import { ExpandIcon } from "@src/components/icons";
@@ -14,7 +13,6 @@ import type { FAQProps } from "../../config";
 import * as styles from "./index.module.scss";
 
 const Card = (props: FAQProps) => {
-  const theme = useTheme();
   const {
     question,
     para1,
@@ -37,62 +35,30 @@ const Card = (props: FAQProps) => {
         onChange={setExpanded}
       >
         <AccordionSummary
+          className={[
+            styles.accordionSummary,
+            expanded ? styles.expanded : "",
+          ].join(" ")}
           expandIcon={<ExpandIcon />}
-          sx={{
-            "width": "100%",
-            "padding": expanded
-              ? theme.spacing(3, 5, 2, 3)
-              : theme.spacing(3, 5, 3, 3),
-            "> .MuiAccordionSummary-expandIconWrapper": {
-              svg: {
-                fill: "#878787",
-              },
-            },
-            "& .Mui-expanded": {
-              h3: {
-                background:
-                  "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
-                backgroundClip: "text",
-                textFillColor: "transparent",
-              },
-            },
-          }}
         >
           <Typography className={styles.question} variant="h3">
             {question}
           </Typography>
         </AccordionSummary>
-        <AccordionDetails
-          sx={{
-            p: {
-              "letterSpacing": "-0.012em",
-              "color": theme.palette.custom.forbole.blue,
-              "padding": theme.spacing(0, 3, 3, 3),
-              "> p": {
-                "paddingBottom": theme.spacing(2),
-                "&:last-child": {
-                  paddingBottom: theme.spacing(1),
-                },
-              },
-              "> li": {
-                padding: theme.spacing(0, 0, 1, 0),
-              },
-            },
-          }}
-        >
+        <AccordionDetails className={styles.accordionDetails}>
           {para1 && <Typography variant="body1">{para1}</Typography>}
           {para2 && <Typography variant="body1">{para2}</Typography>}
           {trans || null}
           {para3 && <Typography variant="body1">{para3}</Typography>}
           {desc && <Typography variant="body1">{desc}</Typography>}
           {bullet1 && (
-            <ListItem sx={{ display: "list-item" }}>{bullet1}</ListItem>
+            <ListItem className={styles.bulletItem}>{bullet1}</ListItem>
           )}
           {bullet2 && (
-            <ListItem sx={{ display: "list-item" }}>{bullet2}</ListItem>
+            <ListItem className={styles.bulletItem}>{bullet2}</ListItem>
           )}
           {bullet3 && (
-            <ListItem sx={{ display: "list-item" }}>{bullet3}</ListItem>
+            <ListItem className={styles.bulletItem}>{bullet3}</ListItem>
           )}
         </AccordionDetails>
       </Accordion>
diff --git a/src/screens/staking/components/networks/index.module.scss b/src/screens/staking/components/networks/index.module.scss
new file mode 100644
index 00000000..cf09ee90
--- /dev/null
+++ b/src/screens/staking/components/networks/index.module.scss
@@ -0,0 +1,38 @@
+@import "src/styles/sass.scss";
+
+.tr0 {
+  color: $color-forbole-indigo6;
+}
+
+.tr1 {
+  background: linear-gradient(286.17deg, #d431ee 0%, #ff426b 100%);
+  // stylelint-disable-next-line
+  background-clip: text;
+  // stylelint-disable-next-line
+  -webkit-background-clip: text;
+  // stylelint-disable-next-line
+  -webkit-text-fill-color: transparent;
+  // stylelint-disable-next-line
+  text-fill-color: transparent;
+}
+
+.stakingDesc {
+  color: $color-forbole-blue;
+  font-size: spacing(2);
+  font-weight: 400;
+  padding: spacing(3) 0 spacing(3) 0;
+  text-align: center;
+  text-shadow:
+    0 1px 8px rgba(16, 24, 40, 0.06),
+    0 1px 10px rgba(16, 24, 40, 0.05);
+
+  @include up-laptop {
+    font-size: spacing(3);
+    font-weight: 400;
+  }
+}
+
+.grid {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/screens/staking/components/networks/index.tsx b/src/screens/staking/components/networks/index.tsx
index 500d15f3..46e5d86e 100644
--- a/src/screens/staking/components/networks/index.tsx
+++ b/src/screens/staking/components/networks/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import dynamic from "next/dynamic";
 
@@ -9,12 +9,12 @@ import NetworkGrid from "./components/network_grid";
 import type { NetworkProps } from "./components/network_grid/config";
 import { useNetworkHook } from "./components/network_grid/hooks";
 import SearchBar from "./components/search_bar";
+import * as styles from "./index.module.scss";
 
 const Trans = dynamic(() => import("next-translate/Trans"), { ssr: false });
 
 const Networks = () => {
   const { t } = useTranslation("staking");
-  const theme = useTheme();
 
   const {
     cosmosNetworks,
@@ -50,46 +50,16 @@ const Networks = () => {
         </Typography>
         <Trans
           components={[
-            <Box
-              className="h3"
-              key="0"
-              sx={{
-                color: theme.palette.custom.forbole.indigo6,
-              }}
-            />,
-            <Box
-              className="h3"
-              key="1"
-              sx={{
-                background:
-                  "linear-gradient(286.17deg, #D431EE 0%, #FF426B 100%)",
-                backgroundClip: "text",
-                textFillColor: "transparent",
-              }}
-            />,
+            <Box className={["h3", styles.tr0].join(" ")} key="0" />,
+            <Box className={["h3", styles.tr1].join(" ")} key="1" />,
           ]}
           i18nKey="stake with Forbole title"
           ns="staking"
         />
-        <Typography
-          sx={{
-            textShadow:
-              "0px 1px 8px rgba(16, 24, 40, 0.06), 0px 1px 10px rgba(16, 24, 40, 0.05)",
-            fontWeight: 400,
-            fontSize: theme.spacing(2),
-            textAlign: "center",
-            padding: theme.spacing(3, 0, 3, 0),
-            color: theme.palette.custom.forbole.blue,
-            [theme.breakpoints.up("laptop")]: {
-              fontWeight: 400,
-              fontSize: theme.spacing(3),
-            },
-          }}
-          variant="body1"
-        >
+        <Typography className={styles.stakingDesc} variant="body1">
           {t("stake with Forbole desc")}
         </Typography>
-        <Box sx={{ display: "flex", flexDirection: "column" }}>
+        <Box className={styles.grid}>
           <SearchBar sortedNetworks={sortedNetworks} />
           <NetworkGrid
             allNetworkInfo={allNetworkInfo}