diff --git a/src/components/Button.tsx b/src/components/Button.tsx
deleted file mode 100644
index 60b6427..0000000
--- a/src/components/Button.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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
-        onClick={props.onClick}
-        className={styles["page-subject__button"]}
-      >
-        {props.text}
-      </button>
-    </a>
-  );
-};
-
-export default Button;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 06bfab3..ad7a844 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -28,6 +28,7 @@ const Header = () => {
               <img src={iconMenu} alt="" />
             </button>
             <MenuMobile
+              active={isActive}
               className={
                 isActive ? styles["active"] : styles["page-header__menu-mobile"]
               }
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 46d1aa4..9c6eb1f 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -8,7 +8,7 @@ const Main = () => {
   return (
     <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-home"]} src={iconHome} alt="" />
         <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
         <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
       </div>
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 0000000..81f8dcf
--- /dev/null
+++ b/src/components/Nav.tsx
@@ -0,0 +1,24 @@
+import styles from "../styles/subject.module.scss";
+
+interface NavProps {
+  text: string;
+  onClick: React.MouseEventHandler;
+  active: boolean;
+}
+
+const Nav = (props: NavProps) => {
+  return (
+    <li
+      onClick={props.onClick}
+      className={
+        props.active
+          ? styles["page-subject__active"]
+          : styles["page-subject__button"]
+      }
+    >
+      {props.text}
+    </li>
+  );
+};
+
+export default Nav;
diff --git a/src/components/SubjectMain.tsx b/src/components/SubjectMain.tsx
index 97bbc70..f46d0b2 100644
--- a/src/components/SubjectMain.tsx
+++ b/src/components/SubjectMain.tsx
@@ -1,55 +1,157 @@
-import Button from "./Button";
+import Nav from "./Nav";
 import SubjectText from "./SubjectText";
 
 import styles from "../styles/subject.module.scss";
+import Forum from "./form";
 import { useState } from "react";
 
 const SubjectMain = () => {
-  const [isActive, setIsActive] = useState(false);
-  const activeText = () => {
-    setIsActive(!isActive);
+  const [isSobre, setIsSobre] = useState(true);
+  const [isPagamento, setIsPagamento] = useState(false);
+  const [isEntrega, setIsEntrega] = useState(false);
+  const [isTroca, setIsTroca] = useState(false);
+  const [isPrivacidade, setIsPrivacidade] = useState(false);
+  const [isForm, setIsForm] = useState(false);
+  const activeSobre = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(true);
+      setIsPagamento(false);
+      setIsEntrega(false);
+      setIsTroca(false);
+      setIsPrivacidade(false);
+      setIsForm(false);
+    }
   };
+  const activePagamento = () => {
+    if (
+      isSobre === true ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === false
+    ) {
+      setIsSobre(false);
+      setIsPagamento(true);
+      setIsEntrega(false);
+      setIsTroca(false);
+      setIsPrivacidade(false);
+      setIsForm(false);
+    }
+  };
+  const activeEntrega = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(false);
+      setIsPagamento(false);
+      setIsEntrega(true);
+      setIsTroca(false);
+      setIsPrivacidade(false);
+      setIsForm(false);
+    }
+  };
+  const activeTroca = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(false);
+      setIsPagamento(false);
+      setIsEntrega(false);
+      setIsTroca(true);
+      setIsPrivacidade(false);
+      setIsForm(false);
+    }
+  };
+  const activePrivacidade = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(false);
+      setIsPagamento(false);
+      setIsEntrega(false);
+      setIsTroca(false);
+      setIsPrivacidade(true);
+      setIsForm(false);
+    }
+  };
+  const activeForm = () => {
+    if (
+      isSobre ||
+      isPagamento ||
+      isEntrega ||
+      isTroca ||
+      isPrivacidade ||
+      isForm === true
+    ) {
+      setIsSobre(false);
+      setIsPagamento(false);
+      setIsEntrega(false);
+      setIsTroca(false);
+      setIsPrivacidade(false);
+      setIsForm(true);
+    }
+  };
+  const Subjects = [
+    <SubjectText active={isSobre} title="Sobre" />,
+    <SubjectText active={isPagamento} title="Forma de Pagamento" />,
+    <SubjectText active={isEntrega} title="Entrega" />,
+    <SubjectText active={isTroca} title="Troca e Devolução" />,
+    <SubjectText active={isPrivacidade} title="Segurança e Privacidade" />,
+    <Forum active={isForm} />,
+  ];
+
+  console.log(Subjects);
 
   return (
     <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={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>
+      <nav className={styles["page-subject__nav"]}>
+        <ul className={styles["page-subject__menu"]}>
+          <Nav active={isSobre} onClick={activeSobre} text="Sobre" />
+          <Nav
+            active={isPagamento}
+            onClick={activePagamento}
+            text="Forma de Pagamento"
+          />
+          <Nav active={isEntrega} onClick={activeEntrega} text="Entrega" />
+          <Nav
+            active={isTroca}
+            onClick={activeTroca}
+            text="Troca e Devolução"
+          />
+          <Nav
+            active={isPrivacidade}
+            onClick={activePrivacidade}
+            text="Segurança e Privacidade"
+          />
+          <Nav active={isForm} onClick={activeForm} text="Contato" />
+        </ul>
+      </nav>
+      <ul className={styles["page-subject__text"]}>
+        <li>{Subjects}</li>
+      </ul>
     </section>
   );
 };
diff --git a/src/components/SubjectText.tsx b/src/components/SubjectText.tsx
index ddb396f..70da13f 100644
--- a/src/components/SubjectText.tsx
+++ b/src/components/SubjectText.tsx
@@ -2,11 +2,15 @@ import styles from "../styles/subject.module.scss";
 
 interface SubjectTextProps {
   title: string;
-  className: string;
+  active: boolean;
 }
 const SubjectText = (props: SubjectTextProps) => {
   return (
-    <div className={props.className}>
+    <article
+      className={
+        props.active ? styles["page-subject__container"] : styles["desative"]
+      }
+    >
       <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
@@ -15,8 +19,9 @@ const SubjectText = (props: SubjectTextProps) => {
         commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
         velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
         occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum. <br />
-        <br />
+        mollit anim id est laborum.
+      </p>
+      <p className={styles["page-subject__paragraph"]}>
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem
         accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
         illo inventore veritatis et quasi architecto beatae vitae dicta sunt
@@ -25,15 +30,16 @@ const SubjectText = (props: SubjectTextProps) => {
         voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
         quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
         eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-        voluptatem. <br />
-        <br />
+        voluptatem.
+      </p>
+      <p className={styles["page-subject__paragraph"]}>
         Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
         suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
         autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
         nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
         voluptas nulla pariatur?
       </p>
-    </div>
+    </article>
   );
 };
 
diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
new file mode 100644
index 0000000..9aa2eb1
--- /dev/null
+++ b/src/components/checkbox.tsx
@@ -0,0 +1,18 @@
+import styles from "../styles/checkbox.module.scss";
+
+const Checkbox = () => {
+  return (
+    <div className={styles["page-main__container"]}>
+      <label className={styles["page-main__label"]} htmlFor="checkbox">
+        *<strong>Declaro que li e aceito</strong>
+      </label>
+      <input
+        id="checkbox"
+        className={styles["page-main__input"]}
+        type="checkbox"
+      />
+    </div>
+  );
+};
+
+export default Checkbox;
diff --git a/src/components/form.tsx b/src/components/form.tsx
new file mode 100644
index 0000000..1397416
--- /dev/null
+++ b/src/components/form.tsx
@@ -0,0 +1,75 @@
+import styles from "../styles/form.module.scss";
+import Checkbox from "./checkbox";
+import Input from "./input";
+
+interface FormProps {
+  active: boolean;
+  activeError?: boolean;
+}
+
+const Form = (props: FormProps) => {
+  return (
+    <form
+      className={props.active ? styles["page-main__form"] : styles["desative"]}
+    >
+      <h3 className={styles["page-main__title"]}>Preencha o formulário</h3>
+      <Input
+        htmlFor="Name"
+        id="Name"
+        textLabel="Nome"
+        type="text"
+        placeholder="Seu nome completo"
+      />
+      <Input
+        htmlFor="Email"
+        id="Email"
+        textLabel="E-mail"
+        type="email"
+        placeholder="Seu e-mail"
+      />
+      <Input
+        htmlFor="Cpf"
+        id="Cpf"
+        textLabel="CPF"
+        type="text"
+        placeholder="000.000.000-00"
+      />
+      <Input
+        htmlFor="Data"
+        id="Data"
+        textLabel="Data de Nascimento:"
+        type="text"
+        placeholder="00.00.0000"
+      />
+      <Input
+        htmlFor="tel"
+        id="tel"
+        textLabel="Telefone:"
+        type="text"
+        placeholder="(00) 00000-0000"
+      />
+      <Input
+        htmlFor="Instagram"
+        id="Instagram"
+        textLabel="Instagram"
+        type="text"
+        placeholder="@seuuser"
+      />
+      <Checkbox />
+      <button type="submit" className={styles["page-main__button"]}>
+        CADASTRE-SE
+      </button>
+      <p
+        className={
+          props.activeError
+            ? styles["page-main__success"]
+            : styles["page-main__error"]
+        }
+      >
+        *Formulário enviado com sucesso!
+      </p>
+    </form>
+  );
+};
+
+export default Form;
diff --git a/src/components/input.tsx b/src/components/input.tsx
new file mode 100644
index 0000000..9db1560
--- /dev/null
+++ b/src/components/input.tsx
@@ -0,0 +1,37 @@
+import styles from "../styles/input.module.scss";
+
+interface InputProps {
+  placeholder: string;
+  type: string;
+  textLabel: string;
+  htmlFor: string;
+  id: string;
+  active?: boolean;
+}
+
+const Input = (props: InputProps) => {
+  return (
+    <div className={styles["page-main__container"]}>
+      <label className={styles["page-main__label"]} htmlFor={props.htmlFor}>
+        {props.textLabel}
+      </label>
+      <p
+        className={
+          props.active
+            ? styles["page-main__error"]
+            : styles["page-main__sem-erro"]
+        }
+      >
+        *Campo Obrigatório
+      </p>
+      <input
+        id={props.id}
+        className={styles["page-main__input"]}
+        type={props.type}
+        placeholder={props.placeholder}
+      />
+    </div>
+  );
+};
+
+export default Input;
diff --git a/src/components/menuMobile.tsx b/src/components/menuMobile.tsx
index 5588d50..fa8cb06 100644
--- a/src/components/menuMobile.tsx
+++ b/src/components/menuMobile.tsx
@@ -2,33 +2,37 @@ import iconExit from "../assets/img/iconExit.png";
 import Link from "./Link";
 import HeaderLinks from "./HeaderLinks";
 
-import styles from "../styles/menuMobile.module.scss";
+import styles from "../styles/header.module.scss";
 
 interface MenuMobileProps {
   className: string;
   onClick: React.MouseEventHandler;
+  active: boolean;
 }
 
 const MenuMobile = (props: MenuMobileProps) => {
   return (
-    <div className={props.className}>
-      <div className={styles["page-header__menu-mobile--container"]}>
-        <div className={styles["page-header__menu-mobile--header"]}>
-          <Link link="/" text="ENTRAR" />
-          <button
-            className={styles["page-header__menu-mobile--button-exit"]}
-            aria-label="exit"
-            type="submit"
-            onClick={props.onClick}
-          >
-            <img src={iconExit} alt="" />
-          </button>
-        </div>
-        <div className={styles["page-header__menu-mobile--links"]}>
-          <HeaderLinks />
+    <>
+      <div className={props.active ? styles["background"] : styles[""]}></div>
+      <div className={props.className}>
+        <div className={styles["page-header__menu-mobile--container"]}>
+          <div className={styles["page-header__menu-mobile--header"]}>
+            <Link link="/" text="ENTRAR" />
+            <button
+              className={styles["page-header__menu-mobile--button-exit"]}
+              aria-label="exit"
+              type="submit"
+              onClick={props.onClick}
+            >
+              <img src={iconExit} alt="" />
+            </button>
+          </div>
+          <div className={styles["page-header__menu-mobile--links"]}>
+            <HeaderLinks />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/index.tsx b/src/index.tsx
index 6e19d62..8f96f5b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom";
-import "./styles/global.scss";
+import "./styles/global.module.scss";
 import Home from "./pages/Home";
 
 const App = () => {
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 58f12df..d0d4fac 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -3,10 +3,10 @@ import Main from "../components/Main";
 
 const Home = () => {
   return (
-    <>
+    <div>
       <Header />
       <Main />
-    </>
+    </div>
   );
 };
 
diff --git a/src/styles/checkbox.module.scss b/src/styles/checkbox.module.scss
new file mode 100644
index 0000000..a107309
--- /dev/null
+++ b/src/styles/checkbox.module.scss
@@ -0,0 +1,44 @@
+@import './variables.scss';
+
+.page-main {
+    &__container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+    }
+
+    &__label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: $red;
+        text-decoration: initial;
+
+        strong {
+            font-weight: 400;
+            text-decoration: underline;
+            color: $black-200;
+        }
+    }
+
+    &__input {
+        border: 1px solid $black;
+        border-radius: 3px;
+        width: 18px;
+        height: 18px;
+    }
+
+    @media screen and (min-width: 2500px) {
+
+        &__label {
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__input {
+            width: 36px;
+            height: 35px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/form.module.scss b/src/styles/form.module.scss
new file mode 100644
index 0000000..e5edb3d
--- /dev/null
+++ b/src/styles/form.module.scss
@@ -0,0 +1,67 @@
+@import './variables.scss';
+
+.desative {
+    display: none;
+}
+
+.page-main {
+    &__form {
+        width: 100%;
+        position: relative;
+    }
+
+    &__title {
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 28px;
+        color: $black;
+        margin-bottom: 12px;
+    }
+
+    &__button {
+        background: $black;
+        width: 100%;
+        height: 52px;
+        border-radius: 25px;
+        border: 0;
+        outline: 0;
+        margin-top: 12px;
+        font-size: 16px;
+        line-height: 19px;
+        letter-spacing: 0.05em;
+        cursor: pointer;
+        color: $white;
+    }
+
+    &__error {
+        display: none;
+    }
+
+    &__success {
+        margin-top: 12px;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: $green;
+    }
+
+    @media screen and (min-width: 2500px) {
+        &__title {
+            font-size: 48px;
+            line-height: 56px;
+        }
+
+        &__button {
+            height: 71px;
+            font-size: 32px;
+            line-height: 38px;
+        }
+    }
+
+    @media screen and (max-width: 1024px) {
+
+        &__title {
+            text-align: center;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/global.scss b/src/styles/global.module.scss
similarity index 100%
rename from src/styles/global.scss
rename to src/styles/global.module.scss
diff --git a/src/styles/header.module.scss b/src/styles/header.module.scss
index 3728a6f..e043fdd 100644
--- a/src/styles/header.module.scss
+++ b/src/styles/header.module.scss
@@ -31,19 +31,19 @@
         width: 100%;
         height: 32px;
         background: $white;
-        border: 2px solid $gray-800;
+        border: 2px solid $gray-1000;
         border-radius: 5px;
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
-        color: $gray-600;
+        color: $gray-800;
         padding: 0;
         outline: 0;
         padding-left: 16px;
 
 
         &::placeholder {
-            color: $gray-600;
+            color: $gray-800;
         }
     }
 
@@ -104,20 +104,60 @@
         display: none;
     }
 
+    .background {
+        position: fixed;
+        background: rgba($gray-300, 0.702);
+        z-index: 50;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
     .active {
         position: absolute;
         top: 0;
         left: 0;
-        background: rgba($gray, 0.702);
         width: 100%;
-        height: 100%;
-        z-index: 50;
+        z-index: 100;
         display: block;
+    }
 
-
-        .link {
-            color: $gray-600;
+    &__menu-mobile {
+        &--container {
+            height: 585px;
+            background: $white;
+            width: 96.5%;
         }
+
+        &--header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: $black;
+            padding: 31px 16px;
+        }
+
+        &--button-exit {
+            background: transparent;
+            border: 0;
+            outline: 0;
+            cursor: pointer;
+        }
+
+        &--links {
+            display: flex;
+            flex-direction: column;
+            align-self: start;
+            gap: 12px;
+            padding: 31px 0 0 16px;
+
+            .link {
+                color: $gray-800;
+            }
+
+        }
+
     }
 
     @media screen and (min-width: 2500px) {
@@ -164,7 +204,7 @@
     @media screen and (min-width: 1025px) {
         &__container-top {
             padding: 0 100px;
-            border-bottom: 1px solid $gray-700;
+            border-bottom: 1px solid $gray-900;
         }
 
         &__menu,
diff --git a/src/styles/input.module.scss b/src/styles/input.module.scss
new file mode 100644
index 0000000..8fa7720
--- /dev/null
+++ b/src/styles/input.module.scss
@@ -0,0 +1,71 @@
+@import './variables.scss';
+
+.page-main {
+    &__container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    &__label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        margin-left: 15px;
+        color: $black-200;
+    }
+
+    &__input {
+        background: $white;
+        border: 1px solid $black-200;
+        border-radius: 25px;
+        width: 100%;
+        height: 46px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        padding-left: 20px;
+        color: $gray-700;
+        outline: 0;
+
+        &::placeholder {
+            color: $gray-700;
+        }
+    }
+
+    &__sem-erro {
+        display: none;
+    }
+
+    &__error {
+        display: flex;
+        position: absolute;
+        top: 14px;
+        right: 20px;
+        color: $red;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+    }
+
+    @media screen and (min-width: 2500px) {
+
+        &__label {
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__input {
+            height: 63px;
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__error {
+            font-size: 24px;
+            line-height: 28px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/main.module.scss b/src/styles/main.module.scss
index 69f2132..4267490 100644
--- a/src/styles/main.module.scss
+++ b/src/styles/main.module.scss
@@ -10,11 +10,19 @@
         margin-top: 30px;
     }
 
+    &__img-home {
+        width: 16px;
+    }
+
+    &__img-arrow {
+        width: 4.5px;
+    }
+
     &__text {
         font-weight: 400;
         font-size: 12px;
         line-height: 14px;
-        color: $gray-700;
+        color: $gray-900;
     }
 
     &__title {
@@ -26,4 +34,31 @@
         letter-spacing: 0.1em;
         color: $gray;
     }
+
+    @media screen and (min-width: 2500px) {
+
+        &__img-home {
+            width: 31px;
+        }
+
+        &__img-arrow {
+            width: 9px;
+            height: 15.6px;
+        }
+
+        &__text {
+            font-size: 24px;
+            line-height: 28px;
+        }
+
+        &__title {
+            font-size: 48px;
+            line-height: 56px;
+        }
+    }
+
+    @media screen and (max-width: 1024px) {
+        padding: 0 16px;
+
+    }
 }
\ No newline at end of file
diff --git a/src/styles/menuMobile.module.scss b/src/styles/menuMobile.module.scss
deleted file mode 100644
index a49e5c1..0000000
--- a/src/styles/menuMobile.module.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import './variables.scss';
-
-.page-header {
-    &__menu-mobile {
-        &--container {
-            height: 585px;
-            background: $white;
-            width: 96.5%;
-        }
-
-        &--header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: $black;
-            padding: 31px 16px;
-        }
-
-        &--button-exit {
-            background: transparent;
-            border: 0;
-            outline: 0;
-            cursor: pointer;
-        }
-
-        &--links {
-            display: flex;
-            flex-direction: column;
-            align-self: start;
-            gap: 12px;
-            padding: 31px 0 0 16px;
-        }
-
-    }
-}
\ No newline at end of file
diff --git a/src/styles/subject.module.scss b/src/styles/subject.module.scss
index 5efea56..0029cd7 100644
--- a/src/styles/subject.module.scss
+++ b/src/styles/subject.module.scss
@@ -5,22 +5,33 @@
     margin-top: 80px;
     gap: 30px;
 
-    &__menu {
-        width: 302px;
-        border-right: 1px solid $black ;
+    &__nav {
+        border-right: 1px solid $black;
     }
 
-    &__button {
-        border: 0;
-        outline: 0;
+    &__menu {
+        width: 302px;
+        height: 285px;
+    }
+
+
+    li {
+        list-style: none;
+    }
+
+    &__button,
+    &__active {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
         background: transparent;
         font-weight: 400;
         font-size: 16px;
         line-height: 19px;
-        color: $gray-400;
-        width: 302px;
+        text-decoration: none;
+        color: $gray-500;
+        width: 100%;
         height: 39px;
-        text-align: start;
         padding-left: 16px;
 
         &:hover,
@@ -31,11 +42,13 @@
         }
     }
 
-    &__container {
-        display: none;
+    &__active {
+        background: $black;
+        font-weight: 700;
+        color: $white;
     }
 
-    .active {
+    &__container {
         display: flex;
         flex-direction: column;
         gap: 12px;
@@ -43,6 +56,15 @@
         margin-top: 10px;
     }
 
+    .desative {
+        display: none;
+    }
+
+    &__text {
+        width: 100%;
+        list-style: none;
+    }
+
     &__title {
         font-weight: 700;
         font-size: 24px;
@@ -54,8 +76,51 @@
         font-weight: 400;
         font-size: 13px;
         line-height: 15px;
-        color: $gray-400;
+        color: $gray-500;
     }
 
+    @media screen and (min-width: 2500px) {
+        &__menu {
+            width: 509px;
+            height: 465px;
+        }
 
+        &__button,
+        &__active {
+            font-size: 32px;
+            line-height: 38px;
+            height: 58px;
+        }
+
+        &__title {
+            font-size: 48px;
+            line-height: 56px;
+        }
+
+        &__paragraph {
+            font-size: 26px;
+            line-height: 30px;
+        }
+    }
+
+    @media screen and (max-width: 1024px) {
+        flex-direction: column;
+        margin-top: 40px;
+
+        &__menu {
+            width: 100%;
+            border-right: 0;
+            max-height: initial;
+            padding: 0;
+        }
+
+        &__button,
+        &__active {
+            width: 100%;
+        }
+
+        &__title {
+            text-align: center;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 04b774c..7d4d04c 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -3,15 +3,19 @@
 $font-family: 'Roboto', sans-serif;
 
 $black: #000;
+$black-200: #100D0E;
 $white: #fff;
 $gray: #292929;
 $gray-200: #303030;
-$gray-300: #5E5E5E;
-$gray-400: #7D7D7D;
-$gray-500: #919191;
-$gray-600: #C6C6C6;
-$gray-700: #C4C4C4;
-$gray-800: #F2F2F2;
-$gray-900: #F9F9F9;
+$gray-300: #454545;
+$gray-400: #5E5E5E;
+$gray-500: #7D7D7D;
+$gray-600: #919191;
+$gray-700: #B9B7B7;
+$gray-800: #C6C6C6;
+$gray-900: #C4C4C4;
+$gray-1000: #F2F2F2;
+$gray-1010: #F9F9F9;
 
-$red: #FF0000;
\ No newline at end of file
+$red: #FF0000;
+$green: #008000;
\ No newline at end of file