diff --git a/package-lock.json b/package-lock.json
index 7f9560b..cc2f9e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28744,4 +28744,4 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 645e698..f1366d1 100644
--- a/package.json
+++ b/package.json
@@ -41,4 +41,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index e55eadc..60b6427 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,12 +1,20 @@
+import styles from "../styles/subject.module.scss";
+
 interface ButtonProps {
   link: string;
   text: string;
+  onClick: React.MouseEventHandler;
 }
 
 const Button = (props: ButtonProps) => {
   return (
     <a href={props.link}>
-      <button className="page-subject__button">{props.text}</button>
+      <button
+        onClick={props.onClick}
+        className={styles["page-subject__button"]}
+      >
+        {props.text}
+      </button>
     </a>
   );
 };
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 82e9978..46d1aa4 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -2,15 +2,17 @@ import iconHome from "../assets/img/iconHome.png";
 import arrow from "../assets/img/arrow.png";
 import SubjectMain from "./SubjectMain";
 
+import styles from "../styles/main.module.scss";
+
 const Main = () => {
   return (
-    <main className="page-main">
-      <div className="page-main__menu">
-        <img className="page-main__img-Home" src={iconHome} alt="" />
-        <img className="page-main__img-arrow" src={arrow} alt="" />
-        <strong className="page-main__text">INSTITUCIONAL</strong>
+    <main className={styles["page-main"]}>
+      <div className={styles["page-main__menu"]}>
+        <img className={styles["page-main__img-Home"]} src={iconHome} alt="" />
+        <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
+        <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
       </div>
-      <h1 className="page-main__title">INSTITUCIONAL</h1>
+      <h1 className={styles["page-main__title"]}>INSTITUCIONAL</h1>
       <SubjectMain />
     </main>
   );
diff --git a/src/components/SubjectMain.tsx b/src/components/SubjectMain.tsx
index ce2a766..97bbc70 100644
--- a/src/components/SubjectMain.tsx
+++ b/src/components/SubjectMain.tsx
@@ -1,19 +1,54 @@
 import Button from "./Button";
 import SubjectText from "./SubjectText";
 
+import styles from "../styles/subject.module.scss";
+import { useState } from "react";
+
 const SubjectMain = () => {
+  const [isActive, setIsActive] = useState(false);
+  const activeText = () => {
+    setIsActive(!isActive);
+  };
+
   return (
-    <section className="page-subject">
-      <div className="page-subject__menu">
-        <Button link="/" text="Sobre" />
-        <Button link="/" text="Forma de Pagamento" />
-        <Button link="/" text="Entrega" />
-        <Button link="/" text="Troca e Devolução" />
-        <Button link="/" text="Segurança e Privacidade" />
-        <Button link="/" text="Contato" />
+    <section className={styles["page-subject"]}>
+      <div className={styles["page-subject__menu"]}>
+        <Button onClick={activeText} link="#Sobre" text="Sobre" />
+        <Button
+          onClick={activeText}
+          link="#FormadePagamento"
+          text="Forma de Pagamento"
+        />
+        <Button onClick={activeText} link="#Entrega" text="Entrega" />
+        <Button
+          onClick={activeText}
+          link="#TrocaeDevolucao"
+          text="Troca e Devolução"
+        />
+        <Button
+          onClick={activeText}
+          link="#SegurancaePrivacidade"
+          text="Segurança e Privacidade"
+        />
+        <Button onClick={activeText} link="#Contao" text="Contato" />
       </div>
-      <div className="page-subject__text">
-        <SubjectText title="Sobre" />
+      <div className={styles["page-subject__text"]}>
+        <SubjectText
+          className={
+            isActive
+              ? styles["page-subject__container active"]
+              : styles["page-subject__container"]
+          }
+          title="Sobre"
+        />
+        <SubjectText
+          className={
+            isActive
+              ? styles["page-subject__container active"]
+              : styles["page-subject__container"]
+          }
+          title="Forma de Pagamento"
+        />
       </div>
     </section>
   );
diff --git a/src/components/SubjectText.tsx b/src/components/SubjectText.tsx
index 057290a..ddb396f 100644
--- a/src/components/SubjectText.tsx
+++ b/src/components/SubjectText.tsx
@@ -1,12 +1,14 @@
+import styles from "../styles/subject.module.scss";
+
 interface SubjectTextProps {
   title: string;
+  className: string;
 }
-
 const SubjectText = (props: SubjectTextProps) => {
   return (
-    <>
-      <h2 className="page-subject__title">{props.title}</h2>
-      <p>
+    <div className={props.className}>
+      <h2 className={styles["page-subject__title"]}>{props.title}</h2>
+      <p className={styles["page-subject__paragraph"]}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
@@ -31,7 +33,7 @@ const SubjectText = (props: SubjectTextProps) => {
         nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
         voluptas nulla pariatur?
       </p>
-    </>
+    </div>
   );
 };
 
diff --git a/src/global.scss b/src/global.scss
index 0156f3a..30ea1ef 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1,4 +1,3 @@
 @import './styles/variables.scss';
 @import './styles/reset.scss';
-@import './styles/header.scss';
-@import './styles/main.scss'
\ No newline at end of file
+@import './styles/header.scss';
\ No newline at end of file
diff --git a/src/styles/main.module.scss b/src/styles/main.module.scss
new file mode 100644
index 0000000..69f2132
--- /dev/null
+++ b/src/styles/main.module.scss
@@ -0,0 +1,29 @@
+@import "variables.scss";
+
+.page-main {
+    padding: 0 100px;
+
+    &__menu {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-top: 30px;
+    }
+
+    &__text {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: $gray-700;
+    }
+
+    &__title {
+        margin-top: 80px;
+        text-align: center;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 28px;
+        letter-spacing: 0.1em;
+        color: $gray;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
deleted file mode 100644
index f680ea1..0000000
--- a/src/styles/main.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-.page-main {
-    padding: 0 100px;
-
-    &__menu {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin-top: 30px;
-    }
-
-    &__text {
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 14px;
-        color: $gray-700;
-    }
-
-    &__title {
-        margin-top: 80px;
-        text-align: center;
-        font-weight: 400;
-        font-size: 24px;
-        line-height: 28px;
-        letter-spacing: 0.1em;
-        color: $gray;
-    }
-
-    .page-subject {
-        display: flex;
-        margin-top: 80px;
-        gap: 30px;
-
-        &__menu {
-            width: 302px;
-            border-right: 1px solid $black ;
-        }
-
-        &__button {
-            border: 0;
-            outline: 0;
-            background: transparent;
-            font-weight: 400;
-            font-size: 16px;
-            line-height: 19px;
-            color: $gray-400;
-            width: 302px;
-            height: 39px;
-            text-align: start;
-            padding-left: 16px;
-
-            &:hover,
-            &:active {
-                background: $black;
-                font-weight: 700;
-                color: $white;
-            }
-        }
-
-        &__text {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            justify-content: center;
-            margin-top: 10px;
-
-            h2 {
-                font-weight: 700;
-                font-size: 24px;
-                line-height: 28px;
-                color: $gray;
-            }
-
-            p {
-                font-weight: 400;
-                font-size: 13px;
-                line-height: 15px;
-                color: $gray-400;
-            }
-
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/styles/subject.module.scss b/src/styles/subject.module.scss
new file mode 100644
index 0000000..5efea56
--- /dev/null
+++ b/src/styles/subject.module.scss
@@ -0,0 +1,61 @@
+@import "variables.scss";
+
+.page-subject {
+    display: flex;
+    margin-top: 80px;
+    gap: 30px;
+
+    &__menu {
+        width: 302px;
+        border-right: 1px solid $black ;
+    }
+
+    &__button {
+        border: 0;
+        outline: 0;
+        background: transparent;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 19px;
+        color: $gray-400;
+        width: 302px;
+        height: 39px;
+        text-align: start;
+        padding-left: 16px;
+
+        &:hover,
+        &:active {
+            background: $black;
+            font-weight: 700;
+            color: $white;
+        }
+    }
+
+    &__container {
+        display: none;
+    }
+
+    .active {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        justify-content: center;
+        margin-top: 10px;
+    }
+
+    &__title {
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 28px;
+        color: $gray;
+    }
+
+    &__paragraph {
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 15px;
+        color: $gray-400;
+    }
+
+
+}
\ No newline at end of file