diff --git a/public/videos/Banner_About.mp4 b/public/videos/hero-about.mp4
similarity index 100%
rename from public/videos/Banner_About.mp4
rename to public/videos/hero-about.mp4
diff --git a/src/components/sections/404/hero/hero.module.scss b/src/components/sections/404/hero/hero.module.scss
index 5d3d3b3..b432162 100644
--- a/src/components/sections/404/hero/hero.module.scss
+++ b/src/components/sections/404/hero/hero.module.scss
@@ -64,18 +64,6 @@
     filter: blur(tovw(80px, 'default', 40px));
   }
 
-  .line {
-    width: tovw(3px, 'default', 2px);
-    height: tovw(72px, 'default', 56px);
-    margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
-  }
-
-  .flag {
-    width: tovw(36px, 'default', 22px);
-    height: tovw(20px, 'default', 20px);
-    margin: 0 auto 0 tovw(8px, 'default', 6px);
-  }
-
   h1 {
     @media screen and (max-width: 800px) {
       font-size: tovw(50px, 'mobile', 71px);
@@ -99,86 +87,98 @@
       margin-bottom: tovw(25px, 'mobile');
     }
   }
+}
 
-  .scroll {
-    position: absolute;
-    bottom: 5%;
-    left: tovw(56px, 'default', 16px);
-    display: grid;
-    align-items: flex-end;
-    width: calc(100% - (tovw(56px, 'default', 16px) * 2));
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 1fr;
+.scroll {
+  position: absolute;
+  bottom: 5%;
+  left: tovw(56px, 'default', 16px);
+  display: grid;
+  align-items: flex-end;
+  width: calc(100% - (tovw(56px, 'default', 16px) * 2));
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
 
-    @media screen and (max-width: 800px) {
-      display: none;
+  @media screen and (max-width: 800px) {
+    display: none;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  p,
+  li {
+    font-family: var(--font-dm-mono);
+    font-size: tovw(12px, 'default', 11px);
+    line-height: 1.7;
+    width: 100%;
+    text-align: right;
+    text-transform: uppercase;
+    font-variant-numeric: tabular-nums;
+  }
+
+  > div {
+    &:first-of-type {
+      display: flex;
+      align-items: flex-end;
+      justify-self: flex-start;
+
+      @media screen and (max-width: 800px) {
+        display: none;
+      }
     }
 
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-    }
-
-    p,
-    li {
-      font-family: var(--font-dm-mono);
-      font-size: tovw(12px, 'default', 11px);
-      line-height: 1.7;
-      width: 100%;
+    &:last-of-type {
       text-align: right;
-      text-transform: uppercase;
-      font-variant-numeric: tabular-nums;
-    }
+      justify-self: flex-end;
 
-    > div {
-      &:first-of-type {
-        display: flex;
-        align-items: flex-end;
-        justify-self: flex-start;
-
-        @media screen and (max-width: 800px) {
-          display: none;
-        }
-      }
-
-      &:last-of-type {
-        text-align: right;
-        justify-self: flex-end;
-
-        span {
-          display: inline-block;
-          width: tovw(60px, 'default', 55px);
-        }
+      span {
+        display: inline-block;
+        width: tovw(60px, 'default', 55px);
       }
     }
   }
-
-  .gradient {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: tovw(740px, 'default', 740px);
-    background: linear-gradient(
-      180deg,
-      rgb(0 0 244 / 0) 1.63%,
-      rgb(0 0 244 / 0.9) 63.96%
-    );
-
-    @media screen and (max-width: 800px) {
-      height: 70%;
-    }
-  }
-
-  .video {
-    position: absolute;
-    z-index: -2;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    user-select: none;
-    pointer-events: none;
-  }
+}
+
+.gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: tovw(740px, 'default', 740px);
+  background: linear-gradient(
+    180deg,
+    rgb(0 0 244 / 0) 1.63%,
+    rgb(0 0 244 / 0.9) 63.96%
+  );
+
+  @media screen and (max-width: 800px) {
+    height: 70%;
+  }
+}
+
+.video {
+  position: absolute;
+  z-index: -2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  pointer-events: none;
+}
+
+.line {
+  width: tovw(3px, 'default', 2px);
+  height: tovw(72px, 'default', 56px);
+  margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
+}
+
+.flag {
+  width: tovw(36px, 'default', 22px);
+  height: tovw(20px, 'default', 20px);
+  margin: 0 auto 0 tovw(8px, 'default', 6px);
 }
diff --git a/src/components/sections/404/hero/index.tsx b/src/components/sections/404/hero/index.tsx
index ab4e3e3..6e92438 100644
--- a/src/components/sections/404/hero/index.tsx
+++ b/src/components/sections/404/hero/index.tsx
@@ -61,7 +61,7 @@ const Hero = () => {
           </ul>
         </div>
       </div>
-      <div className={s.gradient} />
+      <div className={s['gradient']} />
     </Section>
   )
 }
diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index d2b57ee..fabac8d 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -4,20 +4,13 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
-  min-height: calc(var(--vh) * 100);
   max-width: 100%;
+  min-height: calc(var(--vh) * 100);
+  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
 
   @media screen and (max-width: 800px) {
     width: 100vw;
-    padding: 0;
-    padding-bottom: tovw(18px, 'mobile');
-  }
-
-  .container {
-    @media screen and (max-width: 800px) {
-      padding: 0 tovw(16px, 'tablet', 16px);
-    }
+    padding: 0 0 tovw(18px, 'mobile') 0;
   }
 
   video {
@@ -26,115 +19,120 @@
 
     @media screen and (max-width: 800px) {
       display: flex;
-      place-self: center;
       width: 300%;
-    }
-  }
-
-  .body {
-    display: flex;
-    flex-direction: column;
-    margin-top: tovw(16px, 'default', 10px);
-    gap: tovw(89px, 'default', 56px);
-
-    .line {
-      height: tovw(175px, 'default', 130px);
-      margin-top: tovw(5px, 'default', 5px);
-
-      @media screen and (max-width: 800px) {
-        transform: rotate(0deg) translateY(tovw(8px, 'default', 8px))
-          scaleX(1.2);
-        height: tovw(140px, 'default', 130px);
-        left: 0;
-        margin: 0;
-        top: unset;
-      }
-    }
-
-    .headingContainer {
-      @media screen and (max-width: 800px) {
-        display: flex;
-      }
-
-      h1 {
-        margin: 0;
-        text-shadow: 0px 0px tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
-
-        @media screen and (max-width: 800px) {
-          font-size: tovw(50px, 'mobile');
-        }
-      }
-
-      .arrow {
-        display: none;
-
-        @media screen and (max-width: 800px) {
-          display: unset;
-          position: relative;
-          align-self: flex-end;
-          width: tovw(18px, 'mobile', 18px);
-          padding-bottom: tovw(10px, 'mobile', 10px);
-        }
-      }
-    }
-
-    .textContainer {
-      display: flex;
-      justify-content: space-between;
-      gap: tovw(60px, 'default', 20px);
-
-      @media screen and (max-width: 800px) {
-        width: 100%;
-        flex-direction: column;
-        gap: tovw(120px, 'default', 30px);
-      }
-
-      div {
-        &:first-child {
-          display: flex;
-          gap: tovw(30px, 'default', 20px);
-        }
-
-        p {
-          width: tovw(636px, 'default', 200px);
-          font-size: tovw(24px, 'default', 18px);
-          line-height: 1.32;
-          letter-spacing: -0.01em;
-
-          @media screen and (max-width: 800px) {
-            width: 100%;
-          }
-        }
-
-        div:last-child {
-          display: flex;
-          gap: tovw(53px, 'default', 40px);
-          padding-top: tovw(32px, 'default', 25px);
-        }
-      }
-
-      h2 {
-        line-height: 1.2;
-        width: tovw(367px, 'default', 280px);
-      }
-    }
-  }
-
-  .gradient {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: tovw(740px, 'default', 740px);
-    background: linear-gradient(
-      180deg,
-      rgb(0 0 244 / 0.9) 1.63%,
-      rgb(0 0 244 / 0) 99.89%
-    );
-    z-index: -1;
-
-    @media screen and (max-width: 800px) {
-      height: 70%;
+      place-self: center;
     }
   }
 }
+
+.container {
+  @media screen and (max-width: 800px) {
+    padding: 0 tovw(16px, 'tablet', 16px);
+  }
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  margin-top: tovw(16px, 'default', 10px);
+  gap: tovw(89px, 'default', 56px);
+
+  .header {
+    @media screen and (max-width: 800px) {
+      display: flex;
+    }
+
+    h1 {
+      margin: 0;
+      text-shadow: 0 0 tovw(45px, 'default', 45px) rgb(255 255 255 / 0.4);
+
+      @media screen and (max-width: 800px) {
+        font-size: tovw(50px, 'mobile');
+      }
+    }
+
+    .arrow {
+      display: none;
+
+      @media screen and (max-width: 800px) {
+        position: relative;
+        display: unset;
+        align-self: flex-end;
+        width: tovw(18px, 'mobile', 18px);
+        padding-bottom: tovw(10px, 'mobile', 10px);
+      }
+    }
+  }
+
+  .line {
+    height: tovw(175px, 'default', 130px);
+    margin-top: tovw(5px, 'default', 5px);
+
+    @media screen and (max-width: 800px) {
+      top: unset;
+      left: 0;
+      height: tovw(140px, 'default', 130px);
+      margin: 0;
+      transform: rotate(0deg) translateY(tovw(8px, 'default', 8px)) scaleX(1.2);
+    }
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    gap: tovw(60px, 'default', 20px);
+
+    @media screen and (max-width: 800px) {
+      flex-direction: column;
+      width: 100%;
+      gap: tovw(120px, 'default', 30px);
+    }
+
+    div {
+      &:first-child {
+        display: flex;
+        gap: tovw(30px, 'default', 20px);
+      }
+
+      p {
+        font-size: tovw(24px, 'default', 18px);
+        line-height: 1.32;
+        width: tovw(636px, 'default', 200px);
+        letter-spacing: -0.01em;
+
+        @media screen and (max-width: 800px) {
+          width: 100%;
+        }
+      }
+
+      div:last-child {
+        display: flex;
+        padding-top: tovw(32px, 'default', 25px);
+        gap: tovw(53px, 'default', 40px);
+      }
+    }
+
+    h2 {
+      line-height: 1.2;
+      width: tovw(367px, 'default', 280px);
+    }
+  }
+}
+
+.gradient {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: tovw(740px, 'default', 740px);
+  background: linear-gradient(
+    180deg,
+    rgb(0 0 244 / 0.9) 1.63%,
+    rgb(0 0 244 / 0) 99.89%
+  );
+
+  @media screen and (max-width: 800px) {
+    height: 70%;
+  }
+}
diff --git a/src/components/sections/about/hero/index.tsx b/src/components/sections/about/hero/index.tsx
index 4066b48..10c8ba9 100644
--- a/src/components/sections/about/hero/index.tsx
+++ b/src/components/sections/about/hero/index.tsx
@@ -10,19 +10,19 @@ import s from './hero.module.scss'
 const Hero = () => {
   return (
     <Section className={s['section']}>
-      <div className={s.gradient} />
+      <div className={s['gradient']} />
       <video autoPlay muted loop>
-        <source src="/videos/Banner_About.mp4" type="video/mp4" />
+        <source src="/videos/hero-about.mp4" type="video/mp4" />
       </video>
       <Container className={s['container']}>
-        <div className={s.body}>
-          <div className={s.headingContainer}>
+        <div className={s['body']}>
+          <div className={s['header']}>
             <Heading as="h1" variant="xl">
               Accelerating Web3
             </Heading>
-            <Arrow className={s.arrow} />
+            <Arrow className={s['arrow']} />
           </div>
-          <div className={s.textContainer}>
+          <div className={s['content']}>
             <div>
               <Line className={s['line']} height={145} />
               <Heading as="h2" variant="sm">
diff --git a/src/components/sections/about/related/index.tsx b/src/components/sections/about/related/index.tsx
index 8b7fc68..8c0d7f2 100644
--- a/src/components/sections/about/related/index.tsx
+++ b/src/components/sections/about/related/index.tsx
@@ -1,5 +1,6 @@
 import 'keen-slider/keen-slider.min.css'
 
+import clsx from 'clsx'
 import { useKeenSlider } from 'keen-slider/react'
 
 import Card from '~/components/common/card'
@@ -31,19 +32,18 @@ const Related = () => {
 
   return (
     <Section className={s['section']}>
-      <Container className={s.heading}>
+      <Container className={s['heading']}>
         <Heading as="h2" variant="lg">
           Learn More
         </Heading>
       </Container>
       <div className={s['slider__container']}>
-        <div className={`${s.eventsContainer} keen-slider`} ref={sliderRef}>
+        <div className={clsx(s['events'], 'keen-slider')} ref={sliderRef}>
           {related.map((item, i) => (
-            <Card key={i} data={item} className={`keen-slider__slide`} isNews />
+            <Card key={i} data={item} className="keen-slider__slide" isNews />
           ))}
         </div>
       </div>
-      <Container></Container>
     </Section>
   )
 }
diff --git a/src/components/sections/about/related/related.module.scss b/src/components/sections/about/related/related.module.scss
index bec7d75..51b411f 100644
--- a/src/components/sections/about/related/related.module.scss
+++ b/src/components/sections/about/related/related.module.scss
@@ -71,7 +71,7 @@
     }
   }
 
-  .eventsContainer {
+  .events {
     padding-left: tovw(100px);
 
     @media screen and (max-width: 800px) {
@@ -79,10 +79,10 @@
     }
 
     @media screen and (min-width: 1600px) {
-      margin: 0 auto;
       width: 100%;
-      padding: 0;
       max-width: tovw(1296px, 'default', 320px);
+      margin: 0 auto;
+      padding: 0;
     }
 
     &::after,
diff --git a/src/components/sections/about/team/index.tsx b/src/components/sections/about/team/index.tsx
index 1781c68..b965365 100644
--- a/src/components/sections/about/team/index.tsx
+++ b/src/components/sections/about/team/index.tsx
@@ -10,12 +10,12 @@ import { cercTeam, laconicTeam, xylmTeam } from './teams'
 const TeamSection = () => {
   return (
     <Section className={s['section']}>
-      <Container className={s.container}>
+      <Container className={s['container']}>
         <Heading as="h1" variant="lg">
           Team
         </Heading>
         <div>
-          <Arrow className={s.arrow} />
+          <Arrow className={s['arrow']} />
           <p>
             Built over 4 years, Laconic is developed by renowned platform
             experts across Ethereum, IPLD / IPFS, and Cosmos SDK. Our
@@ -23,26 +23,22 @@ const TeamSection = () => {
             developers who co-authored EIP-1559.
           </p>
           <p>
-            We’ve successfully launched startups, and built products and
+            We've successfully launched startups, and built products and
             communities loved by millions of people around the world.
           </p>
         </div>
+        <Team members={laconicTeam} teamName="Laconic LLC" teamNumber="01" />
         <Team
-          teamName={'Laconic LLC'}
-          teamNumber={'01'}
-          members={laconicTeam}
-        />
-        <Team
-          teamName={'Cerc'}
-          teamDept={'Development'}
-          teamNumber={'02'}
           members={cercTeam}
+          teamDept="Development"
+          teamName="Cerc"
+          teamNumber="02"
         />
         <Team
-          teamName={'Xylm'}
-          teamDept={'Growth Engine'}
-          teamNumber={'03'}
           members={xylmTeam}
+          teamDept="Growth Engine"
+          teamName="Xylm"
+          teamNumber="03"
         />
       </Container>
     </Section>
diff --git a/src/components/sections/community/events/events.module.scss b/src/components/sections/community/events/events.module.scss
index 243194f..726ec9b 100644
--- a/src/components/sections/community/events/events.module.scss
+++ b/src/components/sections/community/events/events.module.scss
@@ -6,129 +6,129 @@
   flex-direction: column;
   margin-top: tovw(55px, 'default', 20px);
   padding: tovw(220px, 'default', 72px) 0;
+}
 
-  .slider__container {
-    width: calc(100% - tovw(205px, 'default', 16px));
-    margin-right: 0;
-    margin-left: auto;
+.slider__container {
+  width: calc(100% - tovw(205px, 'default', 16px));
+  margin-right: 0;
+  margin-left: auto;
 
-    @media screen and (max-width: 800px) {
-      width: calc(100% - tovw(16px, 'mobile'));
-    }
+  @media screen and (max-width: 800px) {
+    width: calc(100% - tovw(16px, 'mobile'));
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: tovw(80px, 'default', 64px);
+  padding-bottom: tovw(60px, 'default', 30px);
+  border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+
+  @media screen and (max-width: 800px) {
+    align-items: flex-start;
+    flex-direction: column;
+    padding-bottom: unset;
+    border-bottom: unset;
+    gap: tovw(16px, 'mobile');
   }
 
-  .heading {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: tovw(80px, 'default', 64px);
-    padding-bottom: tovw(60px, 'default', 30px);
-    border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
-
-    @media screen and (max-width: 800px) {
-      align-items: flex-start;
-      flex-direction: column;
-      padding-bottom: unset;
-      border-bottom: unset;
-      gap: tovw(16px, 'mobile');
-    }
-
-    h2 {
-      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
-    }
-
-    span {
-      font-family: var(--font-tt-hoves), sans-serif;
-      font-size: tovw(24px, 'default', 18px);
-      line-height: 1.32;
-      width: tovw(350px, 'default', 265px);
-    }
-
-    .gradient {
-      position: absolute;
-      z-index: -1;
-      right: 0;
-      left: 0;
-      width: 100%;
-      height: tovw(500px, 'default', 250px);
-      margin-left: 0;
-      content: '';
-      user-select: none;
-      pointer-events: none;
-      opacity: 0.4;
-      background: linear-gradient(
-        180deg,
-        rgb(229 229 229 / 0) 0%,
-        rgb(241 241 241 / 0.4) 48.91%,
-        rgb(241 241 241 / 0) 89.23%
-      );
-
-      @media screen and (max-width: 800px) {
-        display: none;
-      }
-    }
+  h2 {
+    text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
   }
 
-  .eventsContainer {
-    padding-left: tovw(100px);
-    @media screen and (max-width: 800px) {
-      padding-left: 0;
-    }
-
-    &::after,
-    &::before {
-      position: absolute;
-      right: tovw(-20px, 'default', -20px);
-      width: tovw(280px, 'default', 150px);
-      height: 100%;
-      content: '';
-      background: linear-gradient(
-        90deg,
-        rgb(3 3 3 / 0) 0%,
-        rgb(3 3 3 / 0.95) 35%,
-        rgb(3 3 3 / 1) 65%
-      );
-
-      @media screen and (max-width: 800px) {
-        width: tovw(20px, 'default', 20px);
-        background: linear-gradient(
-          90deg,
-          rgb(3 3 3 / 0) 0%,
-          rgb(3 3 3 / 0.55) 35%,
-          rgb(3 3 3 / 1) 95%
-        );
-      }
-    }
-
-    &::before {
-      z-index: 5;
-      right: initial;
-      left: tovw(-150px);
-      transform: scaleX(-1);
-      @media screen and (max-width: 800px) {
-        content: initial;
-      }
-    }
+  span {
+    font-family: var(--font-tt-hoves), sans-serif;
+    font-size: tovw(24px, 'default', 18px);
+    line-height: 1.32;
+    width: tovw(350px, 'default', 265px);
   }
 
-  .navigation {
-    display: flex;
+  .gradient {
+    position: absolute;
+    z-index: -1;
+    right: 0;
+    left: 0;
     width: 100%;
-    padding-top: tovw(75px, 'default', 45px);
-    place-content: center;
-    gap: tovw(25px, 'default', 15px);
+    height: tovw(500px, 'default', 250px);
+    margin-left: 0;
+    content: '';
+    user-select: none;
+    pointer-events: none;
+    opacity: 0.4;
+    background: linear-gradient(
+      180deg,
+      rgb(229 229 229 / 0) 0%,
+      rgb(241 241 241 / 0.4) 48.91%,
+      rgb(241 241 241 / 0) 89.23%
+    );
 
     @media screen and (max-width: 800px) {
       display: none;
     }
+  }
+}
 
-    .arrow {
-      width: tovw(50px, 'default', 30px);
-      cursor: pointer;
+.events__container {
+  padding-left: tovw(100px);
+  @media screen and (max-width: 800px) {
+    padding-left: 0;
+  }
 
-      &:first-child {
-        transform: rotate(180deg);
-      }
+  &::after,
+  &::before {
+    position: absolute;
+    right: tovw(-20px, 'default', -20px);
+    width: tovw(280px, 'default', 150px);
+    height: 100%;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      rgb(3 3 3 / 0) 0%,
+      rgb(3 3 3 / 0.95) 35%,
+      rgb(3 3 3 / 1) 65%
+    );
+
+    @media screen and (max-width: 800px) {
+      width: tovw(20px, 'default', 20px);
+      background: linear-gradient(
+        90deg,
+        rgb(3 3 3 / 0) 0%,
+        rgb(3 3 3 / 0.55) 35%,
+        rgb(3 3 3 / 1) 95%
+      );
+    }
+  }
+
+  &::before {
+    z-index: 5;
+    right: initial;
+    left: tovw(-150px);
+    transform: scaleX(-1);
+    @media screen and (max-width: 800px) {
+      content: initial;
+    }
+  }
+}
+
+.navigation {
+  display: flex;
+  width: 100%;
+  padding-top: tovw(75px, 'default', 45px);
+  place-content: center;
+  gap: tovw(25px, 'default', 15px);
+
+  @media screen and (max-width: 800px) {
+    display: none;
+  }
+
+  .arrow {
+    width: tovw(50px, 'default', 30px);
+    cursor: pointer;
+
+    &:first-child {
+      transform: rotate(180deg);
     }
   }
 }
diff --git a/src/components/sections/community/events/index.tsx b/src/components/sections/community/events/index.tsx
index 0055c9c..a52e1e1 100644
--- a/src/components/sections/community/events/index.tsx
+++ b/src/components/sections/community/events/index.tsx
@@ -1,5 +1,6 @@
 import 'keen-slider/keen-slider.min.css'
 
+import clsx from 'clsx'
 import { useKeenSlider } from 'keen-slider/react'
 import { useState } from 'react'
 
@@ -43,27 +44,30 @@ const Events = () => {
 
   return (
     <Section className={s['section']}>
-      <Container className={s.container}>
-        <div className={s.heading}>
+      <Container className={s['container']}>
+        <div className={s['header']}>
           <Heading as="h2" variant="lg">
             Events
           </Heading>
           <span>
             We’d love to meet you in person. Find us at a conference near you:
           </span>
-          <div className={s.gradient} />
+          <div className={s['gradient']} />
         </div>
       </Container>
       <div className={s['slider__container']}>
-        <div className={`${s.eventsContainer} keen-slider`} ref={sliderRef}>
+        <div
+          className={clsx(s['events__container'], 'keen-slider')}
+          ref={sliderRef}
+        >
           {events.map((event, i) => (
-            <Card key={i} data={event} className={`keen-slider__slide`} />
+            <Card key={i} data={event} className="keen-slider__slide" />
           ))}
         </div>
       </div>
       <Container>
         {loaded && slider.current && (
-          <div className={s.navigation}>
+          <div className={s['navigation']}>
             <ArrowSlider
               onClick={(e: any) =>
                 e.stopPropagation() || slider.current?.prev()
diff --git a/src/components/sections/community/hero/hero.module.scss b/src/components/sections/community/hero/hero.module.scss
index f70ddba..1468af7 100644
--- a/src/components/sections/community/hero/hero.module.scss
+++ b/src/components/sections/community/hero/hero.module.scss
@@ -3,62 +3,33 @@
 .section {
   display: grid;
   align-items: center;
-  gap: tovw(140px, 'default', 80px) tovw(130px, 'default', 30px);
   justify-content: center;
+  max-width: 100%;
+  min-height: calc(var(--vh) * 100);
+  gap: tovw(140px, 'default', 80px) tovw(130px, 'default', 30px);
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  min-height: calc(var(--vh) * 100);
-  max-width: 100%;
 
   @media screen and (max-width: 800px) {
     display: flex;
     flex-direction: column;
     width: 100vw;
+    min-height: 100vh;
     padding: 0 tovw(27px, 'tablet', 27px);
     padding-bottom: tovw(18px, 'mobile');
-    min-height: 100vh;
   }
+}
 
-  .videoContainer {
-    position: absolute;
-    z-index: -3;
-    padding-top: tovw(220px, 'default', 90px);
-    right: tovw(620px, 'default', 80px);
+.video__container {
+  position: absolute;
+  z-index: -3;
+  right: tovw(620px, 'default', 80px);
+  padding-top: tovw(220px, 'default', 90px);
 
-    @media screen and (max-width: 800px) {
-      position: unset;
-      padding-top: tovw(55px, 'mobile');
-      margin-bottom: tovw(-85px, 'mobile');
-    }
-
-    &::after {
-      position: absolute;
-      content: '';
-      left: 0;
-      bottom: 0;
-      z-index: 1;
-      width: 100%;
-      height: 80%;
-      background: radial-gradient(
-        ellipse,
-        rgb(3 3 3 / 0) 25%,
-        rgb(3 3 3 / 0.9648) 60%,
-        rgb(3 3 3 / 1) 95%
-      );
-
-      @media screen and (max-width: 800px) {
-        bottom: unset;
-        top: tovw(-260px, 'mobile', -260px);
-        height: 100%;
-        background: radial-gradient(
-          ellipse,
-          rgb(3 3 3 / 0) 25%,
-          rgb(3 3 3 / 0.9648) 55%,
-          rgb(3 3 3 / 1) 85%
-        );
-        transform: rotate(90deg);
-      }
-    }
+  @media screen and (max-width: 800px) {
+    position: unset;
+    margin-bottom: tovw(-85px, 'mobile');
+    padding-top: tovw(55px, 'mobile');
   }
 
   video {
@@ -69,98 +40,127 @@
     }
   }
 
-  .headingContainer {
-    justify-self: end;
-    align-self: end;
-    width: tovw(580px, 'default', 80px);
-
-    @media screen and (max-width: 800px) {
-      display: flex;
-      align-self: flex-start;
-      align-items: flex-end;
-      justify-content: space-between;
-      width: 100%;
-    }
-
-    h1 {
-      margin: 0;
-      text-shadow: 0px 0px tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
-
-      @media screen and (max-width: 800px) {
-        font-size: tovw(50px, 'mobile');
-      }
-    }
-  }
-
-  .textContainer {
-    display: flex;
-    flex-direction: column;
-    gap: tovw(60px, 'default', 20px);
-    align-self: start;
-    grid-area: 2 / 2 / 3 / 3;
-
-    @media screen and (max-width: 800px) {
-      width: 100%;
-      gap: tovw(120px, 'default', 30px);
-    }
-
-    p {
-      margin: 0;
-      width: tovw(500px, 'default', 370px);
-      line-height: 1.3;
-
-      @media screen and (max-width: 800px) {
-        width: tovw(150px, 'mobile', 320px);
-      }
-    }
-
-    a {
-      width: fit-content;
-    }
-  }
-
-  .buttonsContainer {
-    display: flex;
-    gap: tovw(24px, 'default', 20px);
-
-    @media screen and (max-width: 800px) {
-      width: 100%;
-      flex-direction: column;
-      gap: tovw(20px, 'mobile');
-    }
-  }
-
-  .gradient {
+  &::after {
     position: absolute;
-    top: 0;
+    z-index: 1;
+    bottom: 0;
     left: 0;
     width: 100%;
-    height: tovw(740px, 'default', 740px);
-    background: linear-gradient(
-      180deg,
-      rgb(0 0 244 / 0.9) 1.63%,
-      rgb(0 0 244 / 0) 99.89%
+    height: 80%;
+    content: '';
+    background: radial-gradient(
+      ellipse,
+      rgb(3 3 3 / 0) 25%,
+      rgb(3 3 3 / 0.9648) 60%,
+      rgb(3 3 3 / 1) 95%
     );
-    mix-blend-mode: screen;
-    z-index: -1;
 
     @media screen and (max-width: 800px) {
-      height: 70%;
+      top: tovw(-260px, 'mobile', -260px);
+      bottom: unset;
+      height: 100%;
+      transform: rotate(90deg);
+      background: radial-gradient(
+        ellipse,
+        rgb(3 3 3 / 0) 25%,
+        rgb(3 3 3 / 0.9648) 55%,
+        rgb(3 3 3 / 1) 85%
+      );
+    }
+  }
+}
+
+.header {
+  align-self: end;
+  width: tovw(580px, 'default', 80px);
+  justify-self: end;
+
+  @media screen and (max-width: 800px) {
+    display: flex;
+    align-items: flex-end;
+    align-self: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  h1 {
+    margin: 0;
+    text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+
+    @media screen and (max-width: 800px) {
+      font-size: tovw(50px, 'mobile');
+    }
+  }
+}
+
+.content {
+  display: flex;
+  align-self: start;
+  flex-direction: column;
+  gap: tovw(60px, 'default', 20px);
+  grid-area: 2 / 2 / 3 / 3;
+
+  @media screen and (max-width: 800px) {
+    width: 100%;
+    gap: tovw(120px, 'default', 30px);
+  }
+
+  p {
+    line-height: 1.3;
+    width: tovw(500px, 'default', 370px);
+    margin: 0;
+
+    @media screen and (max-width: 800px) {
+      width: tovw(150px, 'mobile', 320px);
     }
   }
 
-  .arrow {
-    position: absolute;
-    margin-left: tovw(-58px, 'default', -58px);
-    width: tovw(22px, 'default', 15px);
-    height: tovw(22px, 'default', 15px);
+  a {
+    width: fit-content;
+  }
+}
 
-    @media screen and (max-width: 800px) {
-      display: none;
-    }
+.buttons__container {
+  display: flex;
+  gap: tovw(24px, 'default', 20px);
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+    width: 100%;
+    gap: tovw(20px, 'mobile');
+  }
+}
+
+.gradient {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: tovw(740px, 'default', 740px);
+  background: linear-gradient(
+    180deg,
+    rgb(0 0 244 / 0.9) 1.63%,
+    rgb(0 0 244 / 0) 99.89%
+  );
+  mix-blend-mode: screen;
+
+  @media screen and (max-width: 800px) {
+    height: 70%;
+  }
+}
+
+.arrow {
+  position: absolute;
+  width: tovw(22px, 'default', 15px);
+  height: tovw(22px, 'default', 15px);
+  margin-left: tovw(-58px, 'default', -58px);
+
+  @media screen and (max-width: 800px) {
+    display: none;
   }
 
-  .arrowMobile {
+  &--mobile {
     width: tovw(25px, 'default', 25px);
     height: tovw(25px, 'default', 25px);
     margin-bottom: tovw(8px, 'default', 7px);
diff --git a/src/components/sections/community/hero/index.tsx b/src/components/sections/community/hero/index.tsx
index 93f8a04..a166925 100644
--- a/src/components/sections/community/hero/index.tsx
+++ b/src/components/sections/community/hero/index.tsx
@@ -9,26 +9,26 @@ import s from './hero.module.scss'
 const Hero = () => {
   return (
     <Section className={s['section']}>
-      <div className={s.gradient}></div>
-      <div className={s.videoContainer}>
+      <div className={s['gradient']}></div>
+      <div className={s['video__container']}>
         <video autoPlay controls={false} loop muted preload="true">
           <source src="/videos/banner-community.mp4" type="video/mp4" />
         </video>
       </div>
-      <div className={s.headingContainer}>
+      <div className={s['header']}>
         <Heading as="h1" variant="xl">
           Laconic Community
         </Heading>
-        <Arrow className={s.arrowMobile} />
+        <Arrow className={s['arrow--mobile']} />
       </div>
-      <div className={s.textContainer}>
-        <Arrow className={s.arrow} />
+      <div className={s['content']}>
+        <Arrow className={s['arrow']} />
         <p>
           Join us as we accelerate blockchain development and interoperability
           by expanding access to verifiable data.
         </p>
         <Link href="https://google.com">LEARN MORE</Link>
-        <div className={s.buttonsContainer}>
+        <div className={s['buttons__container']}>
           <Button size="large" variant="primary">
             CHAT WITH US
           </Button>
diff --git a/src/components/sections/community/socials/index.tsx b/src/components/sections/community/socials/index.tsx
index 0341519..1721401 100644
--- a/src/components/sections/community/socials/index.tsx
+++ b/src/components/sections/community/socials/index.tsx
@@ -17,15 +17,15 @@ import s from './socials.module.scss'
 const Socials = () => {
   return (
     <Section className={s['section']}>
-      <Container className={s.container}>
+      <Container className={s['container']}>
         <img
-          alt="planet figure"
-          className={s.planetImage}
+          alt="Planet"
+          className={s['planet--image']}
           loading="lazy"
           src="/images/community/socials/planet.png"
         />
         <div>
-          <div className={s.headingContainer}>
+          <div className={s['header']}>
             <Heading as="h2" variant="xl" centered={false}>
               Socials
             </Heading>
@@ -35,9 +35,9 @@ const Socials = () => {
           </div>
           <Line className={s['line']} height={144} />
         </div>
-        <div className={s.socialIconsContainer}>
+        <div className={s['icons__container']}>
           <span>GET IN TOUCH</span>
-          <div className={s.iconsGrid}>
+          <div className={s['grid']}>
             <button aria-label="instagram">
               <Instagram />
             </button>
diff --git a/src/components/sections/community/socials/socials.module.scss b/src/components/sections/community/socials/socials.module.scss
index 25234b3..ed6b212 100644
--- a/src/components/sections/community/socials/socials.module.scss
+++ b/src/components/sections/community/socials/socials.module.scss
@@ -7,151 +7,151 @@
   @media screen and (max-width: 800px) {
     margin-top: 0;
   }
+}
 
-  .container {
-    display: grid;
-    grid-template-columns: 1.7fr 1fr;
-    grid-template-rows: repeat(2, 1fr);
-    gap: tovw(70px, 'default', 20px) 0;
+.container {
+  display: grid;
+  grid-template-columns: 1.7fr 1fr;
+  grid-template-rows: repeat(2, 1fr);
+  gap: tovw(70px, 'default', 20px) 0;
 
-    @media screen and (max-width: 800px) {
-      display: flex;
-      flex-direction: column;
-      gap: tovw(5px, 'mobile', 15px);
-    }
-  }
-
-  .headingContainer {
+  @media screen and (max-width: 800px) {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    gap: tovw(5px, 'mobile', 15px);
+  }
+}
 
-    @media screen and (max-width: 800px) {
-      margin-top: tovw(-135px, 'mobile', -150px);
-    }
+.header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 
-    h2 {
-      margin: 0;
-      text-shadow: 0px 0px tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
-
-      @media screen and (max-width: 800px) {
-        font-size: tovw(42px, 'default', 36px);
-        text-align: center;
-      }
-
-      &:nth-child(1) {
-        padding-left: tovw(125px, 'default', 60px);
-
-        @media screen and (max-width: 800px) {
-          padding-left: unset;
-        }
-      }
-
-      &:nth-child(2) {
-        align-self: end;
-        width: tovw(465px, 'default', 80px);
-
-        @media screen and (max-width: 800px) {
-          width: 100%;
-        }
-      }
-    }
+  @media screen and (max-width: 800px) {
+    margin-top: tovw(-135px, 'mobile', -150px);
   }
 
-  .line {
-    position: absolute;
-    left: tovw(770px, 'default', 300px);
-    top: tovw(170px, 'default', 120px);
-    transform: rotate(270deg) scale(1.6);
-    width: tovw(173px, 'default', 120px);
-    height: tovw(72px, 'default', 40px);
+  h2 {
+    margin: 0;
+    text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
 
     @media screen and (max-width: 800px) {
-      transform: rotate(0deg) translateY(35%) scaleX(1.6);
-      height: tovw(80px, 'default', 38px);
-      left: 0;
-      right: 0;
-      margin: auto;
-      top: unset;
-    }
-  }
-
-  .socialIconsContainer {
-    grid-area: 2 / 2 / 3 / 3;
-
-    @media screen and (max-width: 800px) {
-      display: flex;
-      flex-direction: column;
+      font-size: tovw(42px, 'default', 36px);
+      text-align: center;
     }
 
-    span {
-      font-family: var(--font-dm-mono), sans-serif;
-      font-size: tovw(18px, 'default', 12px);
-      letter-spacing: -0.02rem;
-
-      &::before {
-        position: absolute;
-        transform: translate(-220%, -50%);
-        display: block;
-        content: '';
-        width: tovw(24px, 'default', 15px);
-        height: tovw(18px, 'default', 15px);
-        border-bottom: tovw(2px, 'default', 2px) solid blue;
-
-        @media screen and (max-width: 800px) {
-          display: none;
-        }
-      }
+    &:nth-child(1) {
+      padding-left: tovw(125px, 'default', 60px);
 
       @media screen and (max-width: 800px) {
-        text-align: center;
+        padding-left: unset;
       }
     }
 
-    .iconsGrid {
-      width: tovw(400px, 'default', 255px);
-      padding-top: tovw(30px, 'default', 15px);
-      display: flex;
-      flex-wrap: wrap;
-      gap: tovw(20px, 'default', 12px);
+    &:nth-child(2) {
+      align-self: end;
+      width: tovw(465px, 'default', 80px);
 
       @media screen and (max-width: 800px) {
-        place-self: center;
-        place-content: center;
+        width: 100%;
       }
-
-      button {
-        cursor: pointer;
-        display: flex;
-        place-content: center;
-        padding: tovw(13px, 'default', 8px);
-        height: tovw(55px, 'default', 38px);
-        width: tovw(72px, 'default', 54px);
-        border: tovw(1px, 'default', 1px) solid #fff;
-        border-radius: tovw(30px, 'default', 20px);
-        background-color: var(--color-black);
-        transition: filter 200ms;
-
-        &:hover {
-          filter: invert(1);
-        }
-      }
-
-      svg {
-        width: tovw(27px, 'default', 20px);
-      }
-    }
-  }
-
-  .planetImage {
-    position: absolute;
-    padding-top: tovw(160px, 'default', 80px);
-    width: tovw(725px, 'default', 320px);
-
-    @media screen and (max-width: 800px) {
-      padding-top: unset;
-      width: 100%;
-      position: relative;
     }
   }
 }
+
+.line {
+  position: absolute;
+  top: tovw(170px, 'default', 120px);
+  left: tovw(770px, 'default', 300px);
+  width: tovw(173px, 'default', 120px);
+  height: tovw(72px, 'default', 40px);
+  transform: rotate(270deg) scale(1.6);
+
+  @media screen and (max-width: 800px) {
+    top: unset;
+    right: 0;
+    left: 0;
+    height: tovw(80px, 'default', 38px);
+    margin: auto;
+    transform: rotate(0deg) translateY(35%) scaleX(1.6);
+  }
+}
+
+.icons__container {
+  grid-area: 2 / 2 / 3 / 3;
+
+  @media screen and (max-width: 800px) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  span {
+    font-family: var(--font-dm-mono), sans-serif;
+    font-size: tovw(18px, 'default', 12px);
+    letter-spacing: -0.02rem;
+
+    &::before {
+      position: absolute;
+      display: block;
+      width: tovw(24px, 'default', 15px);
+      height: tovw(18px, 'default', 15px);
+      content: '';
+      transform: translate(-220%, -50%);
+      border-bottom: tovw(2px, 'default', 2px) solid blue;
+
+      @media screen and (max-width: 800px) {
+        display: none;
+      }
+    }
+
+    @media screen and (max-width: 800px) {
+      text-align: center;
+    }
+  }
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: tovw(400px, 'default', 255px);
+  padding-top: tovw(30px, 'default', 15px);
+  gap: tovw(20px, 'default', 12px);
+
+  @media screen and (max-width: 800px) {
+    place-self: center;
+    place-content: center;
+  }
+
+  button {
+    display: flex;
+    width: tovw(72px, 'default', 54px);
+    height: tovw(55px, 'default', 38px);
+    padding: tovw(13px, 'default', 8px);
+    cursor: pointer;
+    transition: filter 200ms;
+    border: tovw(1px, 'default', 1px) solid #fff;
+    border-radius: tovw(30px, 'default', 20px);
+    background-color: var(--color-black);
+    place-content: center;
+
+    &:hover {
+      filter: invert(1);
+    }
+  }
+
+  svg {
+    width: tovw(27px, 'default', 20px);
+  }
+}
+
+.planet--image {
+  position: absolute;
+  width: tovw(725px, 'default', 320px);
+  padding-top: tovw(160px, 'default', 80px);
+
+  @media screen and (max-width: 800px) {
+    position: relative;
+    width: 100%;
+    padding-top: unset;
+  }
+}
diff --git a/src/components/sections/privacy/hero/hero.module.scss b/src/components/sections/privacy/hero/hero.module.scss
index 498b3d6..184223f 100644
--- a/src/components/sections/privacy/hero/hero.module.scss
+++ b/src/components/sections/privacy/hero/hero.module.scss
@@ -4,19 +4,19 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
-  padding-bottom: 0;
   max-width: 100%;
   min-height: calc(var(--vh) * 60);
+  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
+  padding-bottom: 0;
 
   @media screen and (max-width: 800px) {
     align-items: center;
     flex-direction: row;
     justify-content: space-between;
-    padding: 0 tovw(16px, 'tablet', 16px);
-    padding-top: tovw(70px, 'tablet', 70px);
     width: 100vw;
     min-height: calc(var(--vh) * 45);
+    padding: 0 tovw(16px, 'tablet', 16px);
+    padding-top: tovw(70px, 'tablet', 70px);
   }
 
   h1 {
@@ -27,31 +27,31 @@
       font-size: tovw(50px, 'mobile');
     }
   }
+}
 
-  .arrow {
-    display: none;
+.arrow {
+  display: none;
 
-    @media screen and (max-width: 800px) {
-      display: unset;
-      position: relative;
-      padding-top: tovw(17px, 'mobile', 17px);
-      width: tovw(18px, 'mobile', 18px);
-    }
+  @media screen and (max-width: 800px) {
+    position: relative;
+    display: unset;
+    width: tovw(18px, 'mobile', 18px);
+    padding-top: tovw(17px, 'mobile', 17px);
   }
 }
 
 .gradient {
   position: absolute;
+  z-index: -1;
   top: 0;
   left: 0;
-  z-index: -1;
+  width: 100%;
+  height: tovw(740px, 'default', 740px);
   background: linear-gradient(
     180deg,
     rgb(0 0 244 / 0.9) 1.63%,
     rgb(0 0 244 / 0) 99.89%
   );
-  width: 100%;
-  height: tovw(740px, 'default', 740px);
   mix-blend-mode: screen;
 
   @media screen and (max-width: 800px) {
diff --git a/src/components/sections/privacy/hero/index.tsx b/src/components/sections/privacy/hero/index.tsx
index 1cb1156..03dfe69 100644
--- a/src/components/sections/privacy/hero/index.tsx
+++ b/src/components/sections/privacy/hero/index.tsx
@@ -10,7 +10,7 @@ const Hero = () => {
       <Heading as="h1" variant="xl">
         Privacy Policy
       </Heading>
-      <Arrow className={s.arrow} />
+      <Arrow className={s['arrow']} />
     </Section>
   )
 }
diff --git a/src/components/sections/privacy/privacypolicy/index.tsx b/src/components/sections/privacy/privacypolicy/index.tsx
index 5fe4b50..4971946 100644
--- a/src/components/sections/privacy/privacypolicy/index.tsx
+++ b/src/components/sections/privacy/privacypolicy/index.tsx
@@ -8,12 +8,12 @@ import { privacyPolicy } from './privacypolicy'
 const PrivacyPolicy = () => {
   return (
     <Section className={s['section']}>
-      <div className={s.header}>
+      <div className={s['header']}>
         <span>LAST UPDATE</span>
-        <span className={s.separator}>—</span>
+        <span className={s['separator']}>—</span>
         <span>{privacyPolicy.updatedOn}</span>
       </div>
-      <Container className={s.container}>
+      <Container className={s['container']}>
         <p>{privacyPolicy.text.block01.pg01}</p>
         <p>{privacyPolicy.text.block01.pg02}</p>
         <p>{privacyPolicy.text.block01.pg03}</p>
diff --git a/src/components/sections/terms/hero/hero.module.scss b/src/components/sections/terms/hero/hero.module.scss
index 498b3d6..184223f 100644
--- a/src/components/sections/terms/hero/hero.module.scss
+++ b/src/components/sections/terms/hero/hero.module.scss
@@ -4,19 +4,19 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
-  padding-bottom: 0;
   max-width: 100%;
   min-height: calc(var(--vh) * 60);
+  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
+  padding-bottom: 0;
 
   @media screen and (max-width: 800px) {
     align-items: center;
     flex-direction: row;
     justify-content: space-between;
-    padding: 0 tovw(16px, 'tablet', 16px);
-    padding-top: tovw(70px, 'tablet', 70px);
     width: 100vw;
     min-height: calc(var(--vh) * 45);
+    padding: 0 tovw(16px, 'tablet', 16px);
+    padding-top: tovw(70px, 'tablet', 70px);
   }
 
   h1 {
@@ -27,31 +27,31 @@
       font-size: tovw(50px, 'mobile');
     }
   }
+}
 
-  .arrow {
-    display: none;
+.arrow {
+  display: none;
 
-    @media screen and (max-width: 800px) {
-      display: unset;
-      position: relative;
-      padding-top: tovw(17px, 'mobile', 17px);
-      width: tovw(18px, 'mobile', 18px);
-    }
+  @media screen and (max-width: 800px) {
+    position: relative;
+    display: unset;
+    width: tovw(18px, 'mobile', 18px);
+    padding-top: tovw(17px, 'mobile', 17px);
   }
 }
 
 .gradient {
   position: absolute;
+  z-index: -1;
   top: 0;
   left: 0;
-  z-index: -1;
+  width: 100%;
+  height: tovw(740px, 'default', 740px);
   background: linear-gradient(
     180deg,
     rgb(0 0 244 / 0.9) 1.63%,
     rgb(0 0 244 / 0) 99.89%
   );
-  width: 100%;
-  height: tovw(740px, 'default', 740px);
   mix-blend-mode: screen;
 
   @media screen and (max-width: 800px) {
diff --git a/src/components/sections/terms/hero/index.tsx b/src/components/sections/terms/hero/index.tsx
index 8dfcadc..3df0522 100644
--- a/src/components/sections/terms/hero/index.tsx
+++ b/src/components/sections/terms/hero/index.tsx
@@ -10,7 +10,7 @@ const Hero = () => {
       <Heading as="h1" variant="xl">
         Terms of Use
       </Heading>
-      <Arrow className={s.arrow} />
+      <Arrow className={s['arrow']} />
     </Section>
   )
 }
diff --git a/src/components/sections/terms/termsofuse/index.tsx b/src/components/sections/terms/termsofuse/index.tsx
index 54844b8..50caf22 100644
--- a/src/components/sections/terms/termsofuse/index.tsx
+++ b/src/components/sections/terms/termsofuse/index.tsx
@@ -8,12 +8,12 @@ import s from './termsofuse.module.scss'
 const TermsOfUse = () => {
   return (
     <Section className={s['section']}>
-      <div className={s.header}>
+      <div className={s['header']}>
         <span>LAST UPDATE</span>
-        <span className={s.separator}>—</span>
+        <span className={s['separator']}>—</span>
         <span>{termsOfUse.updatedOn}</span>
       </div>
-      <Container className={s.container}>
+      <Container className={s['container']}>
         <p>{termsOfUse.text.block01.pg01}</p>
         <p>{termsOfUse.text.block01.pg02}</p>
         <p>{termsOfUse.text.block01.pg03}</p>
diff --git a/src/components/sections/terms/termsofuse/termsofuse.module.scss b/src/components/sections/terms/termsofuse/termsofuse.module.scss
index fe6453a..b5ed89d 100644
--- a/src/components/sections/terms/termsofuse/termsofuse.module.scss
+++ b/src/components/sections/terms/termsofuse/termsofuse.module.scss
@@ -12,43 +12,43 @@
     padding-bottom: tovw(80px, 'tablet', 80px);
   }
 
-  .container {
-    @media screen and (max-width: 800px) {
-      padding: 0;
-    }
-  }
-
-  .header {
-    display: flex;
-    gap: tovw(15px, 'default', 10px);
-    padding-bottom: tovw(13px, 'default', 10px);
-    margin-bottom: tovw(130px, 'default', 36px);
-    border-bottom: 1px solid var(--color-grey-light);
-    font-size: tovw(18px, 'default', 16px);
-    font-family: var(--font-dm-mono), sans-serif;
-
-    @media screen and (max-width: 800px) {
-      font-size: tovw(12px, 'tablet', 12px);
-      padding-bottom: tovw(16px, 'tablet', 16px);
-    }
-
-    .separator {
-      color: var(--color-grey-light);
-    }
-
-    span:last-child {
-      color: var(--color-grey-light);
-    }
-  }
-
   p {
-    line-height: 1.9;
     font-size: tovw(22px, 'default', 18px);
+    line-height: 1.9;
     margin: tovw(64px, 'default', 40px) 0;
 
     @media screen and (max-width: 800px) {
-      line-height: 1.6;
       font-size: tovw(15px, 'tablet', 15px);
+      line-height: 1.6;
     }
   }
 }
+
+.container {
+  @media screen and (max-width: 800px) {
+    padding: 0;
+  }
+}
+
+.header {
+  font-family: var(--font-dm-mono), sans-serif;
+  font-size: tovw(18px, 'default', 16px);
+  display: flex;
+  margin-bottom: tovw(130px, 'default', 36px);
+  padding-bottom: tovw(13px, 'default', 10px);
+  border-bottom: 1px solid var(--color-grey-light);
+  gap: tovw(15px, 'default', 10px);
+
+  @media screen and (max-width: 800px) {
+    font-size: tovw(12px, 'tablet', 12px);
+    padding-bottom: tovw(16px, 'tablet', 16px);
+  }
+
+  .separator {
+    color: var(--color-grey-light);
+  }
+
+  span:last-child {
+    color: var(--color-grey-light);
+  }
+}