diff --git a/Vitor-Soares-main/src/components/FormContainer/index.scss b/Vitor-Soares-main/src/components/FormContainer/index.scss
new file mode 100644
index 0000000..3700d92
--- /dev/null
+++ b/Vitor-Soares-main/src/components/FormContainer/index.scss
@@ -0,0 +1,306 @@
+// [OPICIONAL] Fonte roboto pode remover caso já tenha no html
+// @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+// @import url("https://fonts.cdnfonts.com/css/proxima-nova-2");
+
+// COLORS
+$gray-color: #7d7d7d;
+$dark-gray-color: #292929;
+$light-gray-color: #b9b7b7;
+$black-color-1: #100d0e;
+$error-color: #ff0000;
+$border-color: #000;
+$label-color: #100d0e;
+
+// Apenas para desenvolvimento
+body {
+  margin: 0;
+  padding: 0;
+}
+
+// Reset
+@mixin reset {
+  *,
+  *::before,
+  *::after,
+  *::placeholder {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-weight: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+}
+
+// Estilo do conteudo que aparece a direita
+@mixin content {
+  .form-title {
+    color: black;
+  }
+
+  h2 {
+    color: $dark-gray-color;
+    margin-block: 10px 12px;
+    font-weight: 700;
+    font-size: 48px;
+    line-height: 56px;
+
+    color: $dark-gray-color;
+
+    @media screen {
+      @media (max-width: 2500px) {
+        font-size: 24px;
+        line-height: 28px;
+      }
+      @media (max-width: 1024px) {
+        text-align: center;
+        margin-top: 0;
+      }
+    }
+  }
+
+  p {
+    color: $gray-color;
+    font-size: 26px;
+    line-height: 30px;
+
+    @media screen {
+      @media (max-width: 2500px) {
+        font-size: 13px;
+        line-height: 15px;
+      }
+
+      @media (max-width: 1024px) {
+        text-align: justify;
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+}
+@mixin form {
+  display: grid;
+  gap: 16px;
+
+  .cadastre-se-btn {
+    background-color: $black-color-1;
+    color: #fff;
+    border-radius: 25px;
+    text-transform: uppercase;
+    color: white;
+
+    cursor: pointer;
+    padding-block: 16px 17px;
+
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 38px;
+    letter-spacing: 0.05em;
+    border: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media screen {
+      @media (max-width: 2500px) {
+        font-size: 16px;
+        line-height: 19px;
+      }
+    }
+  }
+
+  .sent {
+    color: #008000;
+
+    font-size: 24px;
+    line-height: 28px;
+
+    @media screen {
+      @media (max-width: 2500px) {
+        font-size: 12px;
+        line-height: 14px;
+      }
+    }
+  }
+
+  .terms {
+    color: $black-color-1;
+    margin-inline: auto;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    font-size: 28px;
+    line-height: 33px;
+    gap: 4.28px;
+
+    @media screen {
+      @media (max-width: 2500px) {
+        font-size: 14px;
+        line-height: 16px;
+
+        input {
+          width: 18.64px;
+          height: 18px;
+        }
+      }
+    }
+
+    .text {
+      border-bottom: solid 1px $border-color;
+    }
+
+    .asterisco {
+      color: $error-color;
+    }
+
+    input {
+      aspect-ratio: 1;
+      cursor: pointer;
+      border-radius: 3px;
+      width: 36.4px;
+      height: 35.15px;
+
+      @media screen {
+        @media (max-width: 2500px) {
+          width: 18.64px;
+          height: 18px;
+        }
+      }
+    }
+  }
+
+  fieldset {
+    display: grid;
+    border: none;
+
+    font-size: 28px;
+    line-height: 33px;
+    color: $label-color;
+
+    @media screen {
+      @media (max-width: 2500px) {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+
+    .error-msg {
+      white-space: nowrap;
+      margin-left: auto;
+      margin-right: 16px;
+      color: $error-color;
+
+      height: 28px;
+
+      font-size: 24px;
+      line-height: 28px;
+
+      @media screen {
+        @media (max-width: 2500px) {
+          font-size: 12px;
+          line-height: 14px;
+          height: 16px;
+        }
+      }
+    }
+
+    label {
+      margin-left: 15px;
+    }
+
+    input {
+      border-radius: 25px;
+      border: solid 1px #100d0e;
+      outline: none;
+
+      padding: 15px 20px;
+      &::placeholder {
+        color: $light-gray-color;
+        font-size: inherit;
+        line-height: inherit;
+      }
+    }
+  }
+}
+
+@mixin nav {
+  border-right: solid 1px #000;
+  width: 590px;
+  height: 465px;
+  font-size: 32px;
+  line-height: 38px;
+
+  @media screen {
+    @media (max-width: 2500px) {
+      width: 302px;
+      height: 285px;
+      font-size: 16px;
+      line-height: 19px;
+    }
+
+    @media (max-width: 1024px) {
+      width: 100%;
+      border: none;
+      padding-bottom: 0;
+      margin-bottom: 30px;
+      height: max-content;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    color: $gray-color;
+    li {
+      padding: 10px 16px;
+
+      cursor: pointer;
+
+      &.active {
+        background: #000;
+        color: #fff;
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.form-container {
+  @include reset(); // [OPICIONAL] Caso já tenha sido feito
+
+  // [OPICIONAL] Caso a fonte já esteja setada em algum elemento pai pode remover
+  font-family: "Roboto", sans-serif;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: auto 1fr;
+
+  gap: 30px;
+  align-items: start;
+
+  @media screen {
+    @media (max-width: 2500px) {
+    }
+
+    @media (max-width: 1024px) {
+      grid-auto-flow: row;
+      grid-template-columns: none;
+      gap: 0;
+    }
+  }
+
+  nav {
+    @include nav;
+  }
+
+  article {
+    @include content;
+  }
+
+  form {
+    @include form;
+    flex: 1;
+  }
+}
diff --git a/Vitor-Soares-main/src/components/FormContainer/index.tsx b/Vitor-Soares-main/src/components/FormContainer/index.tsx
new file mode 100644
index 0000000..dda193c
--- /dev/null
+++ b/Vitor-Soares-main/src/components/FormContainer/index.tsx
@@ -0,0 +1,28 @@
+import { Contato } from "./Contato";
+import { NotImplementedOptionElement } from "./NotImplementedOptionElement";
+import { Panel } from "./Panel";
+import { Sobre } from "./Sobre";
+import "./index.scss";
+
+export function FormContainer() {
+  return (
+    <Panel.Root className="form-container">
+      <Panel.Item title="Sobre">
+        <Sobre />
+      </Panel.Item>
+
+      <Panel.Item title="Entrega">
+        <NotImplementedOptionElement title="Entrega" />
+      </Panel.Item>
+      <Panel.Item title="Troca e Devolução">
+        <NotImplementedOptionElement title="Troca e Devolução" />
+      </Panel.Item>
+      <Panel.Item title="Segurança e Privacidade">
+        <NotImplementedOptionElement title="Segurança e Privacidade" />
+      </Panel.Item>
+      <Panel.Item title="Contato">
+        <Contato />
+      </Panel.Item>
+    </Panel.Root>
+  );
+}