diff --git a/package-lock.json b/package-lock.json
index 5e25953..6a3d5e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "dotenv": "^16.4.5",
         "js-cookie": "^3.0.5",
         "jwt-decode": "^4.0.0",
+        "lucide-react": "^0.545.0",
         "process": "^0.11.10",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -5943,6 +5944,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.545.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.545.0.tgz",
+      "integrity": "sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
diff --git a/package.json b/package.json
index 00a7046..645875f 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "dotenv": "^16.4.5",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.545.0",
     "process": "^0.11.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index abeaad7..27aa6ed 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -1,15 +1,12 @@
-import { useAuth } from '@/hooks/useAuth'
 import LinkedinIcon from '../svgComponents/icons/linkedin'
 import EmailIcon from '../svgComponents/icons/EmailIcon'
 
 export default function Footer() {
-  const { user } = useAuth()
-
   return (
     <footer className="bg-roxo-900 bottom-0 flex min-h-[150px] w-screen flex-col items-start sm:items-center justify-center px-6 py-8">
       <div className="flex flex-col sm:flex-row py-4 gap-6 sm:gap-20">
         <div className="">
-          <h3 className="font-bold text-2xl text-verde-300">QuestIO</h3>
+          <a href="https://www.vlab.dc.ufscar.br" className="font-bold text-2xl text-verde-300 transition-color duration-300 hover:text-[#2eb875]">QuestIO</a>
         </div>
 
         <div className="flex flex-row flex-wrap gap-4">
@@ -20,15 +17,27 @@ export default function Footer() {
           </a>
 
           <a
-            href={`/profile/${user?.id}`}
+            href={`https://www.vlab.dc.ufscar.br/tutoriais`}
+            className="flex items-center text-roxo-500 text-sm font-semibold py-2 px-4 border border-roxo-500 rounded-full transition delay-10 duration-200 ease-in-out hover:border-[#9386d9] hover:text-[#9386d9]">
+            Tutoriais
+          </a>
+
+          <a
+            href={`https://legacy.vlab.dc.ufscar.br/camera.php`}
+            className="flex items-center text-roxo-500 text-sm font-semibold py-2 px-4 border border-roxo-500 rounded-full transition delay-10 duration-200 ease-in-out hover:border-[#9386d9] hover:text-[#9386d9]">
+            Vlab
+          </a>
+
+          <a
+            href={`https://legacy.vlab.dc.ufscar.br/agenda`}
             className="flex items-center text-roxo-500 text-sm font-semibold py-2 px-4 border border-roxo-500 rounded-full transition delay-10 duration-200 ease-in-out hover:border-[#9386d9] hover:text-[#9386d9]">
-            Perfil
+            Agenda
           </a>
 
           <a
-            href={`https://www.vlab.dc.ufscar.br/`}
+            href={`https://www.vlab.dc.ufscar.br/equipe.html`}
             className="flex items-center text-roxo-500 text-sm font-semibold py-2 px-4 border border-roxo-500 rounded-full transition delay-10 duration-200 ease-in-out hover:border-[#9386d9] hover:text-[#9386d9]">
-            Sobre
+            Equipe
           </a>
         </div>
 
diff --git a/src/components/forgotPassword/ForgotPasswordForm.tsx b/src/components/forgotPassword/ForgotPasswordForm.tsx
index 25d6aef..cef31db 100644
--- a/src/components/forgotPassword/ForgotPasswordForm.tsx
+++ b/src/components/forgotPassword/ForgotPasswordForm.tsx
@@ -1,14 +1,13 @@
-import Button from '../utility/Button'
-import ModalSquareForm from '../utility/ModalSquareForm'
-import FormTitle from '../form/FormTitle'
-import Information from './Information'
+import { useState } from 'react'
 import { forgotPassword } from '@/services/api/auth'
 import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Button from '../utility/Button'
+import FormTitle from '../form/FormTitle'
 import ErrorMessage from '../form/ErrorMessage'
 import RecoveryLink from '../login/RecoveryLink'
-import { useState } from 'react'
+import FormInput from '../form/FormInput'
 
 const EmailSchema = z.object({
   email: z
@@ -48,41 +47,30 @@ export default function ForgotPasswordForm() {
 
   return (
     <>
-   <div className="relative flex flex-col gap-16 mt-14 items-center justify-center p-5 lg:px-14 lg:py-10 xl:min-w-[30rem]">
-    <div className="absolute top-[-63px]">
-    {showRecoveryLink && <RecoveryLink
-      text="Link de Recuperação enviado"
-       />}
-       </div>
-    <ModalSquareForm>
-      <div className="relative flex flex-col items-center justify-center p-5 lg:px-14 lg:py-10 xl:min-w-[30rem]">
-        <FormTitle title="Recuperar senha"></FormTitle>
-        <Information></Information>
+      <div className="absolute top-24">
+        {showRecoveryLink && <RecoveryLink text="Link de Recuperação enviado"/>}
+      </div>
+
+      <div className="h-auto bg-[#f8f7fc] flex flex-col items-center justify-center border border-roxo-300 rounded mt-8 sm:mt-0 p-8 sm:p-12 min-w-full sm:min-w-[36rem]">
+        <FormTitle title="Recuperar senha"/>
 
-        <form className="mt-4 flex flex-col items-center justify-center sm:mt-10 md:mt-8" onSubmit={handleSubmit(handleClick)}>
-          <div className="mb-4">
-            <label className="mb-2 block font-mono text-sm font-semibold text-preto-texto sm:text-[12px] md:text-base lg:text-base">
-              {"email"}
-            </label>
+        <p className="w-full text-cinzaClaro mt-3 text-start text-sm">
+          Informe o e-mail da sua conta
+        </p>
 
-            <input
-              {...register('email', {
-                required: 'O campo do e-mail é obrigatório'
-              })}
-              className={`border-2 border-roxo-300 px-2 py-1  text-base font-semibold text-preto-texto shadow-default-roxo-300 focus:border-roxo-900 focus:shadow-roxo-900 sm:border-[2.5px] sm:px-3 sm:text-lg md:border-4 md:px-4 md:text-xl lg:text-2xl`}
+        <form className="mt-8 w-full flex flex-col items-center justify-center" onSubmit={handleSubmit(handleClick)}>
+          <div className="w-full flex flex-col items-start">
+            <FormInput
+              registerProps={register('email')}
               type="text"
+              label="E-mail"
             />
-
-            <div className="ml-auto mt-4 mr-auto">
-              {errors.email &&  <ErrorMessage error={errors.email.message}/>}
-            </div>
-
+            {errors.email &&  <ErrorMessage error={errors.email.message}/>}
           </div>
-          <Button type="submit" disabled={isSubmitting} className="mt-4" text="Enviar"></Button>
+
+          <Button type="submit" disabled={isSubmitting} className="my-4 w-full" text="Enviar"></Button>
         </form>
       </div>
-    </ModalSquareForm>
-    </div>
     </>
   )
 }
diff --git a/src/components/forgotPassword/Information.tsx b/src/components/forgotPassword/Information.tsx
deleted file mode 100644
index b9d53f9..0000000
--- a/src/components/forgotPassword/Information.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Information() {
-  return (
-    <p className="text-roxo-300 mt-4 text-center text-[0.8em] font-semibold sm:text-xs md:text-[0.8rem]">
-      Informe o e-mail da sua conta
-    </p>
-  )
-}
diff --git a/src/components/form/ForgotPassword.tsx b/src/components/form/ForgotPassword.tsx
index 921509e..f433095 100644
--- a/src/components/form/ForgotPassword.tsx
+++ b/src/components/form/ForgotPassword.tsx
@@ -2,9 +2,9 @@ import { Link } from 'react-router-dom'
 
 export default function ForgotPassword() {
   return (
-    <div className="ml-auto pb-4 text-sm font-bold text-roxo-300 sm:pb-5 sm:text-[10px] md:pb-6 md:text-sm">
+    <div className="ml-auto mb-4 text-sm underline text-roxo-500">
       <Link className="hover:text-roxo-900" to="/forgotPassword">
-        esqueceu a senha?
+        Esqueceu a senha?
       </Link>
     </div>
   )
diff --git a/src/components/form/FormInput.tsx b/src/components/form/FormInput.tsx
index 4e0a7c6..71e1193 100644
--- a/src/components/form/FormInput.tsx
+++ b/src/components/form/FormInput.tsx
@@ -13,12 +13,13 @@ const FormInput: React.FC<FormInputProps> = ({
   registerProps,
 }) => {
   return (
-    <div className="mb-4">
-      <label className="mb-2 block font-mono text-sm font-semibold text-preto-texto sm:text-[12px] md:text-base lg:text-base">
+    <div className="mb-4 w-full">
+      <label className="mb-2 block font-mono text-[14px] uppercase tracking-wider text-roxo-500">
         {label}
       </label>
+
       <input
-        className={`border-2 border-roxo-300 px-2 py-1 text-base font-semibold text-preto-texto shadow-default-roxo-300 focus:border-roxo-900 focus:shadow-roxo-900 sm:border-[2.5px] sm:px-3 sm:text-lg md:border-4 md:px-4 md:text-xl lg:text-2xl`}
+        className={`w-full border-2 border-roxo-300 p-2 text-base font-medium text-roxo-900 shadow-default-roxo-300 focus:outline-none focus:ring-0 focus:border-roxo-300`}
         type={type}
         {...registerProps}
       />
diff --git a/src/components/form/FormTitle.tsx b/src/components/form/FormTitle.tsx
index d55ea7d..2fe76ad 100644
--- a/src/components/form/FormTitle.tsx
+++ b/src/components/form/FormTitle.tsx
@@ -4,7 +4,7 @@ interface FormTitleProps {
 
 export default function FormTitle({ title }: FormTitleProps) {
   return (
-    <h1 className="mr-auto text-2xl font-bold leading-8 text-preto-texto sm:mt-5 sm:text-[25px] sm:leading-9 md:mt-6 md:text-3xl md:leading-10 lg:text-5xl">
+    <h1 className="mr-auto text-3xl sm:text-4xl font-bold text-roxo-900">
       {title}
     </h1>
   )
diff --git a/src/components/header/HeaderLinks.tsx b/src/components/header/HeaderLinks.tsx
new file mode 100644
index 0000000..80cbd0e
--- /dev/null
+++ b/src/components/header/HeaderLinks.tsx
@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Menu, X } from 'lucide-react'
+import Logo from '@/components/svgComponents/Logo'
+
+type NavLink = {
+  label: string
+  href: string
+}
+
+interface HeaderLinksProps {
+  links?: NavLink[]
+}
+
+export default function HeaderLinks({
+  links = [
+    { label: 'Tutoriais', href: 'https://www.vlab.dc.ufscar.br/tutoriais/' },
+    { label: 'Vlab', href: 'https://legacy.vlab.dc.ufscar.br/camera.php' },
+    { label: 'Agenda', href: 'https://legacy.vlab.dc.ufscar.br/agenda/' },
+    { label: 'Equipe', href: 'https://www.vlab.dc.ufscar.br/equipe.html' },
+  ],
+}: HeaderLinksProps) {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  return (
+    <header className={`w-full flex items-center justify-between sm:justify-start absolute top-0 z-50 p-5 sm:p-12 ${menuOpen ? "bg-[#f8f7fc] sm:bg-transparent" : "bg-transparent"}`}>
+      {/* Logo */}
+      <div className="flex items-center mr-8">
+        <Logo
+          link="https://www.vlab.dc.ufscar.br"
+          className="w-[48px] sm:w-[64px] aspect-square cursor-pointer text-roxo-300 transition duration-300 ease-in-out hover:text-roxo-900"
+        />
+      </div>
+
+      <nav className="hidden sm:flex flex-row flex-wrap items-center gap-4">
+        {links.map((link) => (
+          <Link
+            key={link.href}
+            to={link.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="py-2 px-4 text-sm bg-[#f8f7fc] border border-roxo-300 text-roxo-300 rounded-full transition-all duration-300 hover:bg-roxo-300 hover:text-white"
+          >
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Botão mobile */}
+      <button
+        onClick={() => setMenuOpen(!menuOpen)}
+        className="sm:hidden p-2 border border-roxo-500 rounded text-roxo-300 bg-[#f8f7fc] hover:text-roxo-900 transition-all duration-300 active:bg-[#d6cef5]"
+      >
+        {menuOpen ? <X size={24} /> : <Menu size={24} />}
+      </button>
+
+      {/* Menu mobile */}
+      {menuOpen && (
+        <div className="absolute top-full left-0 w-full bg-[#f8f7fc] shadow-md flex flex-col items-center pt-1 px-5 sm:hidden">
+          {links.map((link) => (
+            <Link
+              key={link.href}
+              to={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => setMenuOpen(false)}
+              className="w-full text-center py-5 px-2 text-sm border-t border-[#d6cef5] text-roxo-300 active:bg-[#d6cef5]"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+      )}
+    </header>
+  )
+}
diff --git a/src/components/login/Cadastration.tsx b/src/components/login/Cadastration.tsx
deleted file mode 100644
index 6de6f05..0000000
--- a/src/components/login/Cadastration.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Link } from 'react-router-dom'
-
-export default function Cadastration() {
-  return (
-    <p className="mt-4 flex flex-col text-center text-xs font-semibold text-roxo-300 sm:text-xs md:text-[0.8rem]">
-      Ainda não é cadastrado?{' '}
-      <Link className="underline hover:text-roxo-900" to={'/register'}>
-        Cadastre-se
-      </Link>
-    </p>
-  )
-}
diff --git a/src/components/login/LoginForm.tsx b/src/components/login/LoginForm.tsx
index e0189c6..15008ef 100644
--- a/src/components/login/LoginForm.tsx
+++ b/src/components/login/LoginForm.tsx
@@ -1,14 +1,13 @@
 import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useAuth } from '@/hooks/useAuth'
+import { Link } from 'react-router-dom'
 import FormInput from '../form/FormInput'
 import Button from '../utility/Button'
 import ForgotPassword from '../form/ForgotPassword'
 import FormTitle from '../form/FormTitle'
-import ModalSquareForm from '../utility/ModalSquareForm'
-import Cadastration from './Cadastration'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
 import ErrorMessage from '../form/ErrorMessage'
-import { useAuth } from '@/hooks/useAuth'
 
 const emailSchema = z
   .string()
@@ -83,48 +82,58 @@ export default function LoginForm() {
   }
 
   return (
-    <ModalSquareForm>
-      <div className="relative flex h-auto flex-col items-center justify-center p-10 md:px-10 md:py-10 xl:min-w-[30rem]">
-        <FormTitle title="Login"></FormTitle>
-        <form
-          onSubmit={handleSubmit(handleLogin)}
-          className="mt-8 flex flex-col items-center justify-center sm:mt-12 md:mt-16"
-        >
-          <div className="flex flex-col items-start">
-            <FormInput
-              registerProps={register('credentials')}
-              type="text"
-              label="usuário ou e-mail"
-            />
-            {errors.credentials && (
-              <ErrorMessage error={errors.credentials.message} />
-            )}
-          </div>
-          <div className="flex flex-col items-start">
-            <FormInput
-              registerProps={register('password')}
-              type="password"
-              label="senha"
-            />
-            {errors.password && (
-              <ErrorMessage error={errors.password.message} />
-            )}
-          </div>
+    <div className="h-auto bg-[#f8f7fc] flex flex-col items-center justify-center border border-roxo-300 rounded mt-8 sm:mt-0 p-8 sm:p-12 min-w-full sm:min-w-[36rem]">
+      <FormTitle title="Login"/>
 
-          <ForgotPassword />
-          <div className="ml-auto mr-auto">
-            {errors.root && <ErrorMessage error={errors.root.message} />}
-          </div>
+      <form
+        onSubmit={handleSubmit(handleLogin)}
+        className="mt-8 w-full flex flex-col items-center justify-center sm:mt-12"
+      >
+        <div className="w-full flex flex-col items-start">
+          <FormInput
+            registerProps={register('credentials')}
+            type="text"
+            label="Usuário ou e-mail"
+          />
+          {errors.credentials && (
+            <ErrorMessage error={errors.credentials.message} />
+          )}
+        </div>
 
-          <Button
-            disabled={isSubmitting}
-            type="submit"
-            className="mt-4"
-            text="login"
+        <div className="w-full flex flex-col items-start mt-6">
+          <FormInput
+            registerProps={register('password')}
+            type="password"
+            label="Senha"
           />
-          <Cadastration />
-        </form>
-      </div>
-    </ModalSquareForm>
+          {errors.password && (
+            <ErrorMessage error={errors.password.message} />
+          )}
+        </div>
+
+        <ForgotPassword />
+
+        <div className="ml-auto mr-auto">
+          {errors.root && <ErrorMessage error={errors.root.message} />}
+        </div>
+
+        <Button
+          disabled={isSubmitting}
+          type="submit"
+          className="mt-4 w-full"
+          text="Entrar"
+        />
+
+        <p className="mt-8 flex flex-wrap items-center justify-center gap-1 text-center text-sm text-roxo-500">
+          <span>Ainda não é cadastrado?</span>
+          <Link
+            to="/register"
+            className="font-semibold text-roxo-300 transition-colors hover:text-roxo-900"
+          >
+            Cadastre-se
+          </Link>
+        </p>
+      </form>
+    </div>
   )
 }
diff --git a/src/components/register/AlreadyHasAAcconunt.tsx b/src/components/register/AlreadyHasAAcconunt.tsx
deleted file mode 100644
index a0b7aab..0000000
--- a/src/components/register/AlreadyHasAAcconunt.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Link } from 'react-router-dom'
-
-export default function AlreadyHasAAccount() {
-  return (
-    <p className="mt-4 text-center text-xs font-semibold text-roxo-300 md:text-[0.8em]">
-      Já tem uma conta?{' '}
-      <Link className="underline hover:text-roxo-900" to={'/'}>
-        Faça login
-      </Link>
-    </p>
-  )
-}
diff --git a/src/components/register/RegisterForm.tsx b/src/components/register/RegisterForm.tsx
index cab62db..ba45088 100644
--- a/src/components/register/RegisterForm.tsx
+++ b/src/components/register/RegisterForm.tsx
@@ -1,22 +1,17 @@
 import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { registerUser } from '@/services/api/auth'
+import { Link, useNavigate } from 'react-router-dom'
 import Button from '../utility/Button'
 import FormInput from '../form/FormInput'
 import FormTitle from '../form/FormTitle'
-import ModalSquareForm from '../utility/ModalSquareForm'
-import AlreadyHasAAccount from './AlreadyHasAAcconunt'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
 import ErrorMessage from '../form/ErrorMessage'
-import { registerUser } from '@/services/api/auth'
-import { useNavigate } from 'react-router-dom'
+import { useState } from 'react'
 
 const RegisterFormSchema = z.object({
-  username: z
-    .string()
-    .min(1, { message: 'O campo de nome de usuário é obrigatório' }),
-  full_name: z
-    .string()
-    .min(1, { message: 'O campo de nome completo é obrigatório' }),
+  username: z.string().min(1, { message: 'O campo de nome de usuário é obrigatório' }),
+  full_name: z.string().min(1, { message: 'O campo de nome completo é obrigatório' }),
   email: z
     .string()
     .min(1, { message: 'O campo de e-mail é obrigatório' })
@@ -29,29 +24,34 @@ const RegisterFormSchema = z.object({
   confirmPassword: z
     .string()
     .min(1, { message: 'O campo de confirmação de senha é obrigatório' }),
+}).refine((data) => data.password === data.confirmPassword, {
+  path: ['confirmPassword'],
+  message: 'As senhas não coincidem',
 })
 
-const extendedRegisterFormSchema = RegisterFormSchema.refine(
-  (data) => data.password === data.confirmPassword,
-  {
-    path: ['confirmPassword'],
-    message: 'As senhas não coincidem',
-  }
-)
-
-type RegisterFormValues = z.infer<typeof extendedRegisterFormSchema>
+type RegisterFormValues = z.infer<typeof RegisterFormSchema>
 
 export default function RegisterForm() {
+  const [step, setStep] = useState(1)
   const navigate = useNavigate()
+
   const {
     register,
     handleSubmit,
+    trigger,
     setError,
     formState: { errors, isSubmitting },
   } = useForm<RegisterFormValues>({
-    resolver: zodResolver(extendedRegisterFormSchema),
+    resolver: zodResolver(RegisterFormSchema),
+    mode: 'onBlur',
   })
 
+  async function handleNextStep() {
+    // Valida apenas os campos da etapa 1
+    const isValid = await trigger(['username', 'full_name'])
+    if (isValid) setStep(2)
+  }
+
   async function handleRegister({
     username,
     full_name,
@@ -65,22 +65,13 @@ export default function RegisterForm() {
     } catch (error: any) {
       if (error.response && error.response.data) {
         if (error.response.data.message === 'The email already exists.') {
-          setError('email', {
-            type: 'manual',
-            message: 'Este e-mail já está em uso',
-          })
-        } else if (
-          error.response.data.message === 'The username already exists.'
-        ) {
-          setError('username', {
-            type: 'manual',
-            message: 'Este nome de usuário já está em uso',
-          })
+          setError('email', { type: 'manual', message: 'Este e-mail já está em uso' })
+        } else if (error.response.data.message === 'The username already exists.') {
+          setError('username', { type: 'manual', message: 'Este nome de usuário já está em uso' })
         } else {
           setError('root', {
             type: 'manual',
-            message:
-              'Ocorreu um erro ao tentar registrar. Tente novamente mais tarde.',
+            message: 'Ocorreu um erro ao tentar registrar. Tente novamente mais tarde.',
           })
         }
       } else {
@@ -93,51 +84,104 @@ export default function RegisterForm() {
   }
 
   return (
-    <ModalSquareForm>
-      <div className="relative flex flex-col items-center justify-center p-10 md:px-10 md:py-5 xl:min-w-[32rem]">
-        <FormTitle title="Cadastro" />
-        <form
-          onSubmit={handleSubmit(handleRegister)}
-          className="mt-16 flex flex-col items-center justify-center"
-        >
-          <FormInput
-            registerProps={register('username')}
-            type="text"
-            label="nome de usuário"
-          />
-          {errors.username && <ErrorMessage error={errors.username.message} />}
-
-          <FormInput
-            registerProps={register('full_name')}
-            type="text"
-            label="nome completo"
-          />
-          {errors.full_name && <ErrorMessage error={errors.full_name.message} />}
-          <FormInput
-            registerProps={register('email')}
-            type="text"
-            label="e-mail"
-          />
-          {errors.email && <ErrorMessage error={errors.email.message} />}
-          <FormInput
-            registerProps={register('password')}
-            type="password"
-            label="senha"
-          />
-          {errors.password && <ErrorMessage error={errors.password.message} />}
-          <FormInput
-            registerProps={register('confirmPassword')}
-            type="password"
-            label="confirmar senha"
-          />
-          {errors.confirmPassword && (
-            <ErrorMessage error={errors.confirmPassword.message} />
-          )}
-          {errors.root && <ErrorMessage error={errors.root.message} />}
-          <Button disabled={isSubmitting} className="mt-4" text="Cadastrar" />
-          <AlreadyHasAAccount />
-        </form>
-      </div>
-    </ModalSquareForm>
+    <div className="h-auto bg-[#f8f7fc] flex flex-col items-center justify-center border border-roxo-300 rounded mt-8 sm:mt-0 p-8 sm:p-12 min-w-full sm:min-w-[36rem]">
+      <FormTitle title="Criar conta" />
+
+      <form
+        onSubmit={handleSubmit(handleRegister)}
+        className="mt-8 w-full flex flex-col items-center justify-center"
+      >
+        {step === 1 && (
+          <>
+            {/* Etapa 1 */}
+            <div className="w-full flex flex-col items-start">
+              <FormInput
+                registerProps={register('username')}
+                type="text"
+                label="nome de usuário"
+              />
+              {errors.username && <ErrorMessage error={errors.username.message} />}
+            </div>
+
+            <div className="w-full flex flex-col items-start mt-5">
+              <FormInput
+                registerProps={register('full_name')}
+                type="text"
+                label="nome completo"
+              />
+              {errors.full_name && <ErrorMessage error={errors.full_name.message} />}
+            </div>
+
+            <Button
+              type="button"
+              onClick={handleNextStep}
+              className="mt-6 w-full"
+              text="Próximo"
+            />
+          </>
+        )}
+
+        {step === 2 && (
+          <>
+            {/* Etapa 2 */}
+            <div className="w-full flex flex-col items-start">
+              <FormInput
+                registerProps={register('email')}
+                type="text"
+                label="e-mail"
+              />
+              {errors.email && <ErrorMessage error={errors.email.message} />}
+            </div>
+
+            <div className="w-full flex flex-col items-start mt-5">
+              <FormInput
+                registerProps={register('password')}
+                type="password"
+                label="senha"
+              />
+              {errors.password && <ErrorMessage error={errors.password.message} />}
+            </div>
+
+            <div className="w-full flex flex-col items-start mt-5">
+              <FormInput
+                registerProps={register('confirmPassword')}
+                type="password"
+                label="confirmar senha"
+              />
+              {errors.confirmPassword && (
+                <ErrorMessage error={errors.confirmPassword.message} />
+              )}
+            </div>
+
+            {errors.root && <ErrorMessage error={errors.root.message} />}
+
+            <div className="flex w-full gap-5 mt-6">
+              <Button
+                type="button"
+                onClick={() => setStep(1)}
+                className="w-[30%] bg-roxo-500 border-roxo-500"
+                text="Voltar"
+              />
+
+              <Button
+                disabled={isSubmitting}
+                className="w-[70%]"
+                text="Cadastrar"
+              />
+            </div>
+          </>
+        )}
+
+        <p className="mt-8 flex flex-wrap items-center justify-center gap-1 text-center text-sm text-roxo-500">
+          <span>Já tem uma conta?</span>
+          <Link
+            className="font-semibold text-roxo-300 transition-colors hover:text-roxo-900"
+            to={'/'}
+          >
+            Entrar
+          </Link>
+        </p>
+      </form>
+    </div>
   )
 }
diff --git a/src/components/svgComponents/circuit/CircuitBottom.tsx b/src/components/svgComponents/circuit/CircuitBottom.tsx
new file mode 100644
index 0000000..8d60789
--- /dev/null
+++ b/src/components/svgComponents/circuit/CircuitBottom.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+interface CircuitFullRightProps extends React.SVGProps<SVGSVGElement> {}
+
+const CircuitBottom: React.FC<CircuitFullRightProps> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      width="3228"
+      height="1327"
+      viewBox="0 0 3228 1327"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line x1="3228" y1="1263" x2="125" y2="1263" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3228" y1="1063" x2="1496" y2="1063" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3228" y1="863" x2="967" y2="862.999" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3228" y1="663" x2="2502" y2="663" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3228" y1="463" x2="587.999" y2="463" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3228" y1="263" x2="1908" y2="263" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3228" y1="63" x2="2277" y2="62.9999" stroke="#3e347b" strokeWidth="10" />
+
+      <circle cx="62.502" cy="1264.5" r="57.5" transform="rotate(-180 62.502 1264.5)" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="904.5" cy="863.5" r="57.5" transform="rotate(-180 904.5 863.5)" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="1433.5" cy="1062.5" r="62.5" transform="rotate(-180 1433.5 1062.5)" fill="#3e347b" />
+      <circle cx="2439.5" cy="662.5" r="62.5" transform="rotate(-180 2439.5 662.5)" fill="#3e347b" />
+      <circle cx="1845.5" cy="262.5" r="62.5" transform="rotate(-180 1845.5 262.5)" fill="#3e347b" />
+      <circle cx="525.5" cy="466.5" r="57.5" transform="rotate(-180 525.5 466.5)" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="2214.5" cy="62.4995" r="57.5" transform="rotate(-180 2214.5 62.4995)" stroke="#3e347b" strokeWidth="10" />
+    </svg>
+  )
+}
+
+export default CircuitBottom
diff --git a/src/components/svgComponents/circuit/CircuitBottomLeft.tsx b/src/components/svgComponents/circuit/CircuitBottomLeft.tsx
index 0003a4b..fe9d812 100644
--- a/src/components/svgComponents/circuit/CircuitBottomLeft.tsx
+++ b/src/components/svgComponents/circuit/CircuitBottomLeft.tsx
@@ -14,11 +14,11 @@ const CircuitBottomLeft: React.FC<CircuitBottomLeft> = ({ className }) => {
     >
       <path
         d="M261.234 9.39523H171.587C170.798 9.39523 170.157 8.73052 170.157 7.91203C170.157 7.09355 170.798 6.42883 171.587 6.42883H261.234C262.023 6.42883 262.664 7.09355 262.664 7.91203C262.664 8.73052 262.023 9.39523 261.234 9.39523Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M172.597 8.95871L142.714 39.9521C142.16 40.5325 141.256 40.5325 140.696 39.9521C140.136 39.3718 140.136 38.4342 140.696 37.8588L170.578 6.8604C171.138 6.28498 172.042 6.28498 172.597 6.8604C173.156 7.44078 173.156 8.37832 172.597 8.95871Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask0_86_1658"
@@ -33,24 +33,24 @@ const CircuitBottomLeft: React.FC<CircuitBottomLeft> = ({ className }) => {
       <g mask="url(#mask0_86_1658)">
         <path
           d="M-37.5895 37.4224H171.587C172.376 37.4224 173.017 38.0871 173.017 38.9056C173.017 39.7241 172.376 40.3888 171.587 40.3888H-37.5895C-38.3786 40.3888 -39.0195 39.7241 -39.0195 38.9056C-39.0195 38.0871 -38.3786 37.4224 -37.5895 37.4224Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M172.596 37.8538L232.366 99.8456C232.92 100.421 232.92 101.364 232.366 101.939C231.806 102.519 230.902 102.519 230.343 101.939L170.578 39.9521C170.018 39.3717 170.018 38.4342 170.578 37.8538C171.137 37.2784 172.041 37.2784 172.596 37.8538Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M231.352 99.4092H291.122C291.911 99.4092 292.547 100.074 292.547 100.892C292.547 101.711 291.911 102.376 291.122 102.376H231.352C230.563 102.376 229.927 101.711 229.927 100.892C229.927 100.074 230.563 99.4092 231.352 99.4092Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M200.461 68.8523L230.343 37.8589C230.903 37.2785 231.807 37.2785 232.366 37.8589C232.921 38.4343 232.921 39.3718 232.366 39.9522L202.484 70.9457C201.924 71.526 201.02 71.526 200.461 70.9457C199.901 70.3653 199.901 69.4277 200.461 68.8523Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M231.352 37.4222H321.004C321.793 37.4222 322.429 38.087 322.429 38.9054C322.429 39.7239 321.793 40.3886 321.004 40.3886H231.352C230.563 40.3886 229.927 39.7239 229.927 38.9054C229.927 38.087 230.563 37.4222 231.352 37.4222Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask1_86_1658"
@@ -65,24 +65,24 @@ const CircuitBottomLeft: React.FC<CircuitBottomLeft> = ({ className }) => {
       <g mask="url(#mask1_86_1658)">
         <path
           d="M-37.5895 68.4156H171.587C172.376 68.4156 173.017 69.0804 173.017 69.8989C173.017 70.7173 172.376 71.3821 171.587 71.3821H-37.5895C-38.3786 71.3821 -39.0195 70.7173 -39.0195 69.8989C-39.0195 69.0804 -38.3786 68.4156 -37.5895 68.4156Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M172.596 68.8523L232.366 130.839C232.92 131.415 232.92 132.357 232.366 132.933C231.806 133.513 230.902 133.513 230.343 132.933L170.578 70.9456C170.018 70.3652 170.018 69.4277 170.578 68.8523C171.137 68.2719 172.041 68.2719 172.596 68.8523Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M231.352 130.403H350.886C351.675 130.403 352.311 131.067 352.311 131.886C352.311 132.704 351.675 133.369 350.886 133.369H231.352C230.563 133.369 229.927 132.704 229.927 131.886C229.927 131.067 230.563 130.403 231.352 130.403Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M290.108 130.839L319.99 99.8457C320.549 99.2653 321.453 99.2653 322.013 99.8457C322.573 100.421 322.573 101.364 322.013 101.939L292.131 132.932C291.571 133.513 290.667 133.513 290.108 132.932C289.553 132.357 289.553 131.415 290.108 130.839Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M321.004 99.4092H380.768C381.558 99.4092 382.199 100.074 382.199 100.892C382.199 101.711 381.558 102.376 380.768 102.376H321.004C320.215 102.376 319.574 101.711 319.574 100.892C319.574 100.074 320.215 99.4092 321.004 99.4092Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask2_86_1658"
@@ -97,28 +97,28 @@ const CircuitBottomLeft: React.FC<CircuitBottomLeft> = ({ className }) => {
       <g mask="url(#mask2_86_1658)">
         <path
           d="M-37.5895 99.4092H81.9399C82.7291 99.4092 83.3699 100.074 83.3699 100.892C83.3699 101.711 82.7291 102.376 81.9399 102.376H-37.5895C-38.3786 102.376 -39.0195 101.711 -39.0195 100.892C-39.0195 100.074 -38.3786 99.4092 -37.5895 99.4092Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M82.9492 99.8457L112.832 130.839C113.391 131.415 113.391 132.357 112.832 132.932C112.277 133.513 111.368 133.513 110.813 132.932L80.9309 101.939C80.3713 101.364 80.3713 100.421 80.9309 99.8457C81.4857 99.2653 82.3944 99.2653 82.9492 99.8457Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M111.823 130.403H171.587C172.376 130.403 173.017 131.067 173.017 131.886C173.017 132.704 172.376 133.369 171.587 133.369H111.823C111.033 133.369 110.393 132.704 110.393 131.886C110.393 131.067 111.033 130.403 111.823 130.403Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M328.011 39.352C327.772 43.365 324.443 46.4207 320.569 46.1727C316.7 45.9296 313.753 42.4721 313.993 38.4591C314.232 34.441 317.56 31.3853 321.434 31.6334C325.304 31.8814 328.25 35.3389 328.011 39.352Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M298.128 101.339C297.889 105.357 294.56 108.408 290.686 108.165C286.817 107.917 283.871 104.459 284.11 100.446C284.349 96.4279 287.678 93.3772 291.552 93.6203C295.421 93.8683 298.367 97.3258 298.128 101.339Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M357.893 132.332C357.654 136.35 354.325 139.401 350.456 139.158C346.582 138.91 343.636 135.452 343.875 131.439C344.114 127.426 347.443 124.371 351.317 124.614C355.186 124.862 358.132 128.319 357.893 132.332Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask3_86_1658"
@@ -133,7 +133,7 @@ const CircuitBottomLeft: React.FC<CircuitBottomLeft> = ({ className }) => {
       <g mask="url(#mask3_86_1658)">
         <path
           d="M387.775 101.339C387.541 105.357 384.207 108.408 380.338 108.165C376.464 107.917 373.518 104.459 373.757 100.446C373.996 96.4279 377.325 93.3772 381.199 93.6203C385.068 93.8683 388.014 97.3258 387.775 101.339Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <mask
@@ -149,12 +149,12 @@ const CircuitBottomLeft: React.FC<CircuitBottomLeft> = ({ className }) => {
       <g mask="url(#mask4_86_1658)">
         <path
           d="M276.295 8.8446C275.999 13.1702 272.378 16.4293 268.208 16.1217C264.033 15.8142 260.89 12.059 261.187 7.73344C261.483 3.40289 265.104 0.143817 269.279 0.451369C273.45 0.758922 276.592 4.51405 276.295 8.8446ZM273.287 8.62138C273.464 6.01709 271.575 3.75509 269.064 3.57155C266.553 3.38801 264.372 5.34742 264.195 7.9517C264.018 10.556 265.907 12.818 268.418 13.0015C270.929 13.1851 273.11 11.2257 273.287 8.62138Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M186.371 132.833C186.074 137.159 182.454 140.418 178.283 140.11C174.108 139.803 170.966 136.048 171.262 131.722C171.559 127.392 175.179 124.132 179.354 124.44C183.525 124.748 186.667 128.503 186.371 132.833ZM183.362 132.61C183.539 130.006 181.65 127.744 179.139 127.56C176.628 127.377 174.447 129.336 174.27 131.94C174.093 134.545 175.983 136.807 178.494 136.99C181.004 137.179 183.185 135.214 183.362 132.61Z"
-        fill="#454545"
+        fill="#3e347b"
       />
     </svg>
   )
diff --git a/src/components/svgComponents/circuit/CircuitBottomRight.tsx b/src/components/svgComponents/circuit/CircuitBottomRight.tsx
index 93a70bf..2c08fa6 100644
--- a/src/components/svgComponents/circuit/CircuitBottomRight.tsx
+++ b/src/components/svgComponents/circuit/CircuitBottomRight.tsx
@@ -25,28 +25,28 @@ const CircuitBottomRight: React.FC<CircuitBottomRight> = ({ className }) => {
       <g mask="url(#mask0_86_1788)">
         <path
           d="M10.6458 108.828C14.9844 108.828 18.5208 112.359 18.5208 116.703C18.5208 121.047 14.9844 124.578 10.6458 124.578C6.30206 124.578 2.77081 121.047 2.77081 116.703C2.77081 112.359 6.30206 108.828 10.6458 108.828ZM0.354156 116.703C0.354156 122.38 4.97394 126.995 10.6458 126.995C15.9114 126.995 20.2604 123.016 20.8594 117.911L317.667 117.911L430.073 219L431.688 217.203L318.938 115.807L318.594 115.495L20.8594 115.495C20.2604 110.391 15.9114 106.411 10.6458 106.411C4.97394 106.411 0.354156 111.026 0.354156 116.703Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M318.594 97.5212L177.667 97.5212C177.073 93.0784 173.271 89.6462 168.667 89.6462C163.646 89.6462 159.583 93.7139 159.583 98.7295C159.583 103.745 163.646 107.813 168.667 107.813C173.271 107.813 177.073 104.381 177.667 99.9378L317.667 99.9378L430.073 201.026L431.688 199.229L318.937 97.8284L318.594 97.5212Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M122.63 80.75C122.63 85.0937 119.099 88.625 114.755 88.625C110.411 88.625 106.88 85.0937 106.88 80.75C106.88 76.4062 110.411 72.875 114.755 72.875C119.099 72.875 122.63 76.4062 122.63 80.75ZM318.938 79.8542L318.594 79.5469L124.974 79.5469C124.375 74.4375 120.021 70.4635 114.755 70.4635C109.083 70.4635 104.464 75.0781 104.464 80.75C104.464 86.4271 109.083 91.0417 114.755 91.0417C120.021 91.0417 124.375 87.0625 124.974 81.9635L317.667 81.9635L430.073 183.047L431.688 181.25L318.938 79.8542Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M270.245 62.7764C270.245 67.1201 266.714 70.6514 262.37 70.6514C258.026 70.6514 254.495 67.1201 254.495 62.7764C254.495 58.4326 258.026 54.9014 262.37 54.9014C266.714 54.9014 270.245 58.4326 270.245 62.7764ZM318.938 61.8805L318.594 61.568L272.589 61.568C271.99 56.4639 267.635 52.4847 262.37 52.4847C256.698 52.4847 252.078 57.1045 252.078 62.7764C252.078 68.4482 256.698 73.0628 262.37 73.0628C267.635 73.0628 271.99 69.0889 272.589 63.9847L317.667 63.9847L430.073 165.073L431.688 163.276L318.938 61.8805Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M79.8646 53.8802C84.4688 53.8802 88.276 50.4531 88.8646 46.0104L317.667 46.0104L430.073 147.094L431.688 145.302L318.594 43.5937L88.8646 43.5937C88.276 39.1458 84.4688 35.7187 79.8646 35.7187C74.8489 35.7187 70.7812 39.7865 70.7812 44.8021C70.7812 49.8177 74.8489 53.8802 79.8646 53.8802Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M203.552 18.9482C207.896 18.9482 211.432 22.4795 211.432 26.8232C211.432 31.1722 207.896 34.6982 203.552 34.6982C199.208 34.6982 195.677 31.1722 195.677 26.8232C195.677 22.4795 199.208 18.9482 203.552 18.9482ZM203.552 37.1149C208.818 37.1149 213.172 33.1357 213.771 28.0316L317.667 28.0316L430.073 129.12L431.688 127.323L318.938 25.9274L318.594 25.6149L213.771 25.6149C213.172 20.5107 208.818 16.5368 203.552 16.5368C197.88 16.5368 193.266 21.1514 193.266 26.8232C193.266 32.4951 197.88 37.1149 203.552 37.1149Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask1_86_1788"
@@ -61,7 +61,7 @@ const CircuitBottomRight: React.FC<CircuitBottomRight> = ({ className }) => {
       <g mask="url(#mask1_86_1788)">
         <path
           d="M261.161 17.9322C265.771 17.9322 269.573 14.4999 270.161 10.0572L317.667 10.0572L430.073 111.146L431.688 109.349L318.938 7.94783L318.594 7.64054L270.161 7.64054C269.573 3.19263 265.771 -0.234459 261.161 -0.234459C256.146 -0.234459 252.078 3.83325 252.078 8.84888C252.078 13.8645 256.146 17.9322 261.161 17.9322Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
     </svg>
diff --git a/src/components/svgComponents/circuit/CircuitLeft.tsx b/src/components/svgComponents/circuit/CircuitLeft.tsx
new file mode 100644
index 0000000..b9c7678
--- /dev/null
+++ b/src/components/svgComponents/circuit/CircuitLeft.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+
+interface CircuitCenterProps extends React.SVGProps<SVGSVGElement> {}
+
+const CircuitLeft: React.FC<CircuitCenterProps> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      width="3890"
+      height="1314"
+      viewBox="0 0 3890 1314"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line y1="483" x2="2549" y2="483" stroke="#3e347b" strokeWidth="10" />
+      <line y1="693" x2="2365" y2="693" stroke="#3e347b" strokeWidth="10" />
+      <line y1="893" x2="1183" y2="893" stroke="#3e347b" strokeWidth="10" />
+      <line y1="283" x2="1580" y2="283" stroke="#3e347b" strokeWidth="10" />
+      <line x1="1397" y1="1112" x2="2011" y2="1112" stroke="#3e347b" strokeWidth="10" />
+      <line x1="1233" y1="65" x2="1847" y2="65" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2315" y1="265" x2="2929" y2="265" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3103" y1="1041" x2="3417" y2="1041" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3042" y1="535" x2="3606" y2="535" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2920" y1="1251" x2="3765" y2="1251" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3105.46" y1="1042.54" x2="2544.46" y2="481.536" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2922.46" y1="1252.54" x2="2361.46" y2="691.536" stroke="#3e347b" strokeWidth="10" />
+      <line x1="1400.46" y1="1113.54" x2="1179.46" y2="892.536" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2097.46" y1="484.464" x2="2318.46" y2="263.464" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2824.46" y1="754.464" x2="3045.46" y2="533.464" stroke="#3e347b" strokeWidth="10" />
+      <line x1="1016.46" y1="284.464" x2="1237.46" y2="63.4645" stroke="#3e347b" strokeWidth="10" />
+
+      <circle cx="1909.5" cy="62.5" r="62.5" transform="rotate(-180 1909.5 62.5)" fill="#3e347b" />
+      <circle cx="2979.5" cy="262.5" r="62.5" transform="rotate(-180 2979.5 262.5)" fill="#3e347b" />
+      <circle cx="3479.5" cy="1041.5" r="62.5" transform="rotate(-180 3479.5 1041.5)" fill="#3e347b" />
+      <circle cx="3827.5" cy="1251.5" r="62.5" transform="rotate(-180 3827.5 1251.5)" fill="#3e347b" />
+      <circle cx="2073.5" cy="1112.5" r="57.5" transform="rotate(-180 2073.5 1112.5)" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="3668.5" cy="532.5" r="57.5" transform="rotate(-180 3668.5 532.5)" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="1642.5" cy="283.5" r="57.5" transform="rotate(-180 1642.5 283.5)" stroke="#3e347b" strokeWidth="10" />
+    </svg>
+  )
+}
+
+export default CircuitLeft
diff --git a/src/components/svgComponents/circuit/CircuitRight.tsx b/src/components/svgComponents/circuit/CircuitRight.tsx
new file mode 100644
index 0000000..ee68786
--- /dev/null
+++ b/src/components/svgComponents/circuit/CircuitRight.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+interface CircuitRightProps extends React.SVGProps<SVGSVGElement> {}
+
+const CircuitRight: React.FC<CircuitRightProps> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      width="3890"
+      height="1314"
+      viewBox="0 0 3890 1314"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      transform="scale(-1,1)"
+      style={{ transform: 'scale(-1,1)', transformOrigin: 'center' }}
+    >
+      <line y1="483" x2="2549" y2="483" stroke="#3e347b" strokeWidth="10" />
+      <line y1="693" x2="2365" y2="693" stroke="#3e347b" strokeWidth="10" />
+      <line y1="893" x2="1183" y2="893" stroke="#3e347b" strokeWidth="10" />
+      <line y1="283" x2="1580" y2="283" stroke="#3e347b" strokeWidth="10" />
+      <line x1="1397" y1="1112" x2="2011" y2="1112" stroke="#3e347b" strokeWidth="10" />
+      <line x1="1233" y1="65" x2="1847" y2="65" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2315" y1="265" x2="2929" y2="265" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3103" y1="1041" x2="3417" y2="1041" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3042" y1="535" x2="3606" y2="535" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2920" y1="1251" x2="3765" y2="1251" stroke="#3e347b" strokeWidth="10" />
+      <line x1="3105.46" y1="1042.54" x2="2544.46" y2="481.536" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2922.46" y1="1252.54" x2="2361.46" y2="691.536" stroke="#3e347b" strokeWidth="10" />
+      <line x1="1400.46" y1="1113.54" x2="1179.46" y2="892.536" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2097.46" y1="484.464" x2="2318.46" y2="263.464" stroke="#3e347b" strokeWidth="10" />
+      <line x1="2824.46" y1="754.464" x2="3045.46" y2="533.464" stroke="#3e347b" strokeWidth="10" />
+      <line x1="1016.46" y1="284.464" x2="1237.46" y2="63.4645" stroke="#3e347b" strokeWidth="10" />
+
+      <circle cx="1909.5" cy="62.5" r="62.5" fill="#3e347b" />
+      <circle cx="2979.5" cy="262.5" r="62.5" fill="#3e347b" />
+      <circle cx="3479.5" cy="1041.5" r="62.5" fill="#3e347b" />
+      <circle cx="3827.5" cy="1251.5" r="62.5" fill="#3e347b" />
+      <circle cx="2073.5" cy="1112.5" r="57.5" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="3668.5" cy="532.5" r="57.5" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="1642.5" cy="283.5" r="57.5" stroke="#3e347b" strokeWidth="10" />
+    </svg>
+  )
+}
+
+export default CircuitRight
diff --git a/src/components/svgComponents/circuit/CircuitTop.tsx b/src/components/svgComponents/circuit/CircuitTop.tsx
new file mode 100644
index 0000000..78f001c
--- /dev/null
+++ b/src/components/svgComponents/circuit/CircuitTop.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+interface CircuitFullProps extends React.SVGProps<SVGSVGElement> {}
+
+const CircuitTop: React.FC<CircuitFullProps> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      width="3228"
+      height="1327"
+      viewBox="0 0 3228 1327"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line y1="64" x2="3103" y2="64" stroke="#3e347b" strokeWidth="10" />
+      <line y1="264" x2="1732" y2="264" stroke="#3e347b" strokeWidth="10" />
+      <line y1="464" x2="2261" y2="464" stroke="#3e347b" strokeWidth="10" />
+      <line y1="664" x2="726" y2="664" stroke="#3e347b" strokeWidth="10" />
+      <line y1="864" x2="2640" y2="864" stroke="#3e347b" strokeWidth="10" />
+      <line y1="1064" x2="1320" y2="1064" stroke="#3e347b" strokeWidth="10" />
+      <line y1="1264" x2="951" y2="1264" stroke="#3e347b" strokeWidth="10" />
+
+      <circle cx="3165.5" cy="62.5" r="57.5" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="2323.5" cy="463.5" r="57.5" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="1794.5" cy="264.5" r="62.5" fill="#3e347b" />
+      <circle cx="788.5" cy="664.5" r="62.5" fill="#3e347b" />
+      <circle cx="1382.5" cy="1064.5" r="62.5" fill="#3e347b" />
+      <circle cx="2702.5" cy="860.5" r="57.5" stroke="#3e347b" strokeWidth="10" />
+      <circle cx="1013.5" cy="1264.5" r="57.5" stroke="#3e347b" strokeWidth="10" />
+    </svg>
+  )
+}
+
+export default CircuitTop
diff --git a/src/components/svgComponents/circuit/CircuitTopLeft.tsx b/src/components/svgComponents/circuit/CircuitTopLeft.tsx
index 3de252c..383897e 100644
--- a/src/components/svgComponents/circuit/CircuitTopLeft.tsx
+++ b/src/components/svgComponents/circuit/CircuitTopLeft.tsx
@@ -25,28 +25,28 @@ const CircuitTopLeft: React.FC<CircuitTopLeftProps> = ({ className }) => {
       <g mask="url(#mask0_86_1657)">
         <path
           d="M356.354 110.172C352.016 110.172 348.479 106.641 348.479 102.297C348.479 97.9531 352.016 94.4219 356.354 94.4219C360.698 94.4219 364.229 97.9531 364.229 102.297C364.229 106.641 360.698 110.172 356.354 110.172ZM366.646 102.297C366.646 96.6198 362.026 92.0052 356.354 92.0052C351.089 92.0052 346.74 95.9844 346.141 101.089L49.3333 101.089L-63.0729 0L-64.6875 1.79688L48.0625 103.193L48.4062 103.505L346.141 103.505C346.74 108.609 351.089 112.589 356.354 112.589C362.026 112.589 366.646 107.974 366.646 102.297Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M48.4063 121.479L189.333 121.479C189.927 125.922 193.729 129.354 198.333 129.354C203.354 129.354 207.417 125.286 207.417 120.271C207.417 115.255 203.354 111.187 198.333 111.187C193.729 111.187 189.927 114.619 189.333 119.062L49.3333 119.062L-63.0729 17.9736L-64.6875 19.7705L48.0625 121.172L48.4063 121.479Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M244.37 138.25C244.37 133.906 247.901 130.375 252.245 130.375C256.589 130.375 260.12 133.906 260.12 138.25C260.12 142.594 256.589 146.125 252.245 146.125C247.901 146.125 244.37 142.594 244.37 138.25ZM48.0625 139.146L48.4062 139.453L242.026 139.453C242.625 144.563 246.979 148.536 252.245 148.536C257.917 148.536 262.536 143.922 262.536 138.25C262.536 132.573 257.917 127.958 252.245 127.958C246.979 127.958 242.625 131.938 242.026 137.036L49.3333 137.036L-63.0729 35.9531L-64.6875 37.75L48.0625 139.146Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M96.7552 156.224C96.7552 151.88 100.286 148.349 104.63 148.349C108.974 148.349 112.505 151.88 112.505 156.224C112.505 160.567 108.974 164.099 104.63 164.099C100.286 164.099 96.7552 160.567 96.7552 156.224ZM48.0625 157.119L48.4062 157.432H94.4115C95.0104 162.536 99.3646 166.515 104.63 166.515C110.302 166.515 114.922 161.896 114.922 156.224C114.922 150.552 110.302 145.937 104.63 145.937C99.3646 145.937 95.0104 149.911 94.4115 155.015H49.3333L-63.0729 53.9268L-64.6875 55.7236L48.0625 157.119Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M287.135 165.12C282.531 165.12 278.724 168.547 278.135 172.99L49.3333 172.99L-63.0729 71.9062L-64.6875 73.6979L48.4062 175.406L278.135 175.406C278.724 179.854 282.531 183.281 287.135 183.281C292.151 183.281 296.219 179.214 296.219 174.198C296.219 169.182 292.151 165.12 287.135 165.12Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M163.448 200.052C159.104 200.052 155.568 196.521 155.568 192.177C155.568 187.828 159.104 184.302 163.448 184.302C167.792 184.302 171.323 187.828 171.323 192.177C171.323 196.521 167.792 200.052 163.448 200.052ZM163.448 181.885C158.182 181.885 153.828 185.864 153.229 190.968L49.3333 190.968L-63.0729 89.8799L-64.6875 91.6768L48.0625 193.073L48.4062 193.385L153.229 193.385C153.828 198.489 158.182 202.463 163.448 202.463C169.12 202.463 173.734 197.849 173.734 192.177C173.734 186.505 169.12 181.885 163.448 181.885Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask1_86_1657"
@@ -64,7 +64,7 @@ const CircuitTopLeft: React.FC<CircuitTopLeftProps> = ({ className }) => {
       <g mask="url(#mask1_86_1657)">
         <path
           d="M105.839 201.068C101.229 201.068 97.4271 204.5 96.8385 208.943L49.3333 208.943L-63.0729 107.854L-64.6875 109.651L48.0625 211.052L48.4062 211.359L96.8385 211.359C97.4271 215.807 101.229 219.234 105.839 219.234C110.854 219.234 114.922 215.167 114.922 210.151C114.922 205.135 110.854 201.068 105.839 201.068Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
     </svg>
diff --git a/src/components/svgComponents/circuit/CircuitTopRight.tsx b/src/components/svgComponents/circuit/CircuitTopRight.tsx
index 6a0dc59..1a84c7b 100644
--- a/src/components/svgComponents/circuit/CircuitTopRight.tsx
+++ b/src/components/svgComponents/circuit/CircuitTopRight.tsx
@@ -14,11 +14,11 @@ const CircuitTopRight: React.FC<CircuitTopRightProps> = ({ className }) => {
     >
       <path
         d="M129.438 137.266H220.974C221.78 137.266 222.435 137.964 222.435 138.823C222.435 139.682 221.78 140.38 220.974 140.38H129.438C128.632 140.38 127.978 139.682 127.978 138.823C127.978 137.964 128.632 137.266 129.438 137.266Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M219.944 137.724L250.456 105.182C251.022 104.573 251.945 104.573 252.517 105.182C253.088 105.792 253.088 106.776 252.517 107.38L222.005 139.927C221.433 140.531 220.51 140.531 219.944 139.927C219.372 139.318 219.372 138.333 219.944 137.724Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask0_86_1654"
@@ -36,24 +36,24 @@ const CircuitTopRight: React.FC<CircuitTopRightProps> = ({ className }) => {
       <g mask="url(#mask0_86_1654)">
         <path
           d="M434.559 107.839L220.974 107.839C220.168 107.839 219.514 107.141 219.514 106.282C219.514 105.422 220.168 104.724 220.974 104.724L434.559 104.724C435.365 104.724 436.02 105.422 436.02 106.282C436.02 107.141 435.365 107.839 434.559 107.839Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M219.944 107.385L158.914 42.2969C158.348 41.6928 158.348 40.7032 158.914 40.099C159.486 39.4896 160.409 39.4896 160.98 40.099L222.005 105.182C222.576 105.792 222.576 106.776 222.005 107.385C221.433 107.99 220.51 107.99 219.944 107.385Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M159.949 42.7554L98.9202 42.7554C98.1144 42.7554 97.4649 42.0575 97.4649 41.1981C97.4649 40.3387 98.1144 39.6408 98.9202 39.6408L159.949 39.6408C160.755 39.6408 161.405 40.3387 161.405 41.1981C161.405 42.0575 160.755 42.7554 159.949 42.7554Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M191.492 74.8387L160.98 107.38C160.409 107.99 159.486 107.99 158.914 107.38C158.348 106.776 158.348 105.792 158.914 105.182L189.427 72.6408C189.998 72.0314 190.921 72.0314 191.492 72.6408C192.064 73.2502 192.064 74.2345 191.492 74.8387Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M159.949 107.839L68.408 107.839C67.6022 107.839 66.9527 107.141 66.9527 106.281C66.9527 105.422 67.6022 104.724 68.408 104.724L159.949 104.724C160.755 104.724 161.405 105.422 161.405 106.281C161.405 107.141 160.755 107.839 159.949 107.839Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask1_86_1654"
@@ -71,24 +71,24 @@ const CircuitTopRight: React.FC<CircuitTopRightProps> = ({ className }) => {
       <g mask="url(#mask1_86_1654)">
         <path
           d="M434.559 75.2971L220.974 75.2971C220.168 75.2971 219.514 74.5992 219.514 73.7398C219.514 72.8805 220.168 72.1825 220.974 72.1825L434.559 72.1825C435.365 72.1825 436.02 72.8805 436.02 73.7398C436.02 74.5992 435.365 75.2971 434.559 75.2971Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M219.944 74.8386L158.914 9.75528C158.348 9.15111 158.348 8.16152 158.914 7.55736C159.486 6.94798 160.409 6.94798 160.98 7.55736L222.005 72.6407C222.576 73.2501 222.576 74.2345 222.005 74.8386C221.433 75.448 220.51 75.448 219.944 74.8386Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M159.949 10.2136L37.8958 10.2136C37.09 10.2136 36.4405 9.51571 36.4405 8.65633C36.4405 7.79696 37.09 7.09904 37.8958 7.09904L159.949 7.09904C160.755 7.09904 161.405 7.79696 161.405 8.65633C161.405 9.51571 160.755 10.2136 159.949 10.2136Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M99.956 9.75544L69.4438 42.2971C68.8724 42.9065 67.9494 42.9065 67.3781 42.2971C66.8067 41.693 66.8067 40.7034 67.3781 40.0992L97.8903 7.55753C98.4616 6.94815 99.3846 6.94815 99.956 7.55753C100.522 8.16169 100.522 9.15128 99.956 9.75544Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M68.408 42.7554L7.38359 42.7554C6.57781 42.7554 5.92342 42.0575 5.92342 41.1981C5.92342 40.3387 6.57781 39.6408 7.38359 39.6408L68.408 39.6408C69.2138 39.6408 69.8682 40.3387 69.8682 41.1981C69.8682 42.0575 69.2138 42.7554 68.408 42.7554Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask2_86_1654"
@@ -106,28 +106,28 @@ const CircuitTopRight: React.FC<CircuitTopRightProps> = ({ className }) => {
       <g mask="url(#mask2_86_1654)">
         <path
           d="M434.559 42.7554L312.511 42.7554C311.705 42.7554 311.05 42.0575 311.05 41.1981C311.05 40.3387 311.705 39.6408 312.511 39.6408L434.559 39.6408C435.365 39.6408 436.02 40.3387 436.02 41.1981C436.02 42.0575 435.365 42.7554 434.559 42.7554Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M311.48 42.2971L280.968 9.75544C280.397 9.15128 280.397 8.16169 280.968 7.55753C281.535 6.94815 282.463 6.94815 283.029 7.55753L313.541 40.0992C314.113 40.7034 314.113 41.693 313.541 42.2971C312.975 42.9065 312.047 42.9065 311.48 42.2971Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M281.998 10.2136L220.974 10.2136C220.168 10.2136 219.514 9.51571 219.514 8.65633C219.514 7.79696 220.168 7.09904 220.974 7.09904L281.998 7.09904C282.804 7.09904 283.458 7.79696 283.458 8.65633C283.458 9.51571 282.804 10.2136 281.998 10.2136Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M61.2541 105.813C61.4983 101.599 64.8972 98.3908 68.8528 98.6512C72.8036 98.9064 75.8118 102.537 75.5677 106.75C75.3235 110.969 71.9246 114.177 67.9689 113.917C64.0182 113.656 61.0099 110.026 61.2541 105.813Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M91.7663 40.7292C92.0105 36.5105 95.4094 33.3074 99.365 33.5626C103.316 33.823 106.324 37.4532 106.08 41.6667C105.836 45.8855 102.437 49.0886 98.4811 48.8334C94.5304 48.573 91.5221 44.9428 91.7663 40.7292Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <path
         d="M30.7414 8.18776C30.9856 3.969 34.3845 0.765879 38.3353 1.02109C42.2909 1.2815 45.2991 4.91171 45.055 9.12526C44.8108 13.3388 41.4119 16.5471 37.4562 16.2919C33.5055 16.0315 30.4972 12.4013 30.7414 8.18776Z"
-        fill="#454545"
+        fill="#3e347b"
       />
       <mask
         id="mask3_86_1654"
@@ -145,7 +145,7 @@ const CircuitTopRight: React.FC<CircuitTopRightProps> = ({ className }) => {
       <g mask="url(#mask3_86_1654)">
         <path
           d="M0.229675 40.7292C0.468967 36.5105 3.87278 33.3074 7.82354 33.5626C11.7792 33.823 14.7874 37.4532 14.5433 41.6667C14.2991 45.8855 10.9002 49.0886 6.94451 48.8334C2.99374 48.573 -0.0145006 44.9428 0.229675 40.7292Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <mask
@@ -161,12 +161,12 @@ const CircuitTopRight: React.FC<CircuitTopRightProps> = ({ className }) => {
       <g mask="url(#mask4_86_1654)">
         <path
           d="M114.059 137.844C114.362 133.302 118.059 129.88 122.317 130.203C126.58 130.526 129.789 134.469 129.486 139.011C129.183 143.557 125.486 146.979 121.223 146.656C116.965 146.333 113.756 142.391 114.059 137.844ZM117.131 138.078C116.95 140.813 118.879 143.188 121.443 143.38C124.007 143.573 126.234 141.516 126.414 138.781C126.595 136.047 124.666 133.672 122.102 133.479C119.538 133.287 117.311 135.344 117.131 138.078Z"
-          fill="#454545"
+          fill="#3e347b"
         />
       </g>
       <path
         d="M205.879 7.66152C206.182 3.11985 209.879 -0.302027 214.137 0.0208893C218.401 0.343807 221.609 4.28652 221.306 8.82818C221.004 13.3751 217.307 16.7969 213.043 16.474C208.785 16.1511 205.577 12.2084 205.879 7.66152ZM208.951 7.89589C208.77 10.6303 210.699 13.0053 213.263 13.198C215.827 13.3907 218.054 11.3334 218.235 8.59902C218.415 5.86464 216.486 3.48964 213.923 3.29693C211.359 3.09901 209.132 5.16152 208.951 7.89589Z"
-        fill="#454545"
+        fill="#3e347b"
       />
     </svg>
   )
diff --git a/src/components/utility/Button.tsx b/src/components/utility/Button.tsx
index ee375d0..96c03fc 100644
--- a/src/components/utility/Button.tsx
+++ b/src/components/utility/Button.tsx
@@ -35,7 +35,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          'bg-roxo-300 text-white shadow-default-roxo-500 px-8 py-2 text-xl border border-roxo-300 transition-all duration-300 hover:scale-105',
+          'bg-roxo-300 text-white shadow-default-roxo-500 px-8 py-2 text-xl border border-roxo-300 transition-all duration-300 hover:scale-[1.02]',
         secondary:
           'border-verde-300 bg-white text-verde-300 shadow-default-verde-300 text-cinza hover:bg-verde-300 hover:text-branco hover:shadow-default-verde-900',
         tertiary:
diff --git a/src/index.css b/src/index.css
index 7a37a2d..120acab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,7 +16,7 @@
   --verde-900: #5d9d7e;
   --cinza: #454545;
   --cinzaClaro: #747474;
-  --preto-texto: rgba(0, 0, 0, 0.75);
+  --preto-texto: #0b1215;
   --branco: #ffffff;
   --laranja: #f2953f;
   --preto: #1e1e1e;
diff --git a/src/pages/Login@Registration/ChangePassword.tsx b/src/pages/Login@Registration/ChangePassword.tsx
index f8fc9f3..db07a08 100644
--- a/src/pages/Login@Registration/ChangePassword.tsx
+++ b/src/pages/Login@Registration/ChangePassword.tsx
@@ -1,17 +1,18 @@
 import { updateUser } from '@/services/api/user'
-import Logo from '@/components/svgComponents/Logo'
-import CircuitBottomRight from '@/components/svgComponents/circuit/CircuitBottomRight'
-import CircuitTopLeft from '@/components/svgComponents/circuit/CircuitTopLeft'
 import { z } from 'zod'
+import { useNavigate, useParams } from 'react-router-dom'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useAuth } from '@/hooks/useAuth'
 import FormTitle from '@/components/form/FormTitle'
-import ModalSquareForm from '@/components/utility/ModalSquareForm'
-import { useNavigate, useParams } from 'react-router-dom'
 import FormInput from '@/components/form/FormInput'
 import ErrorMessage from '@/components/form/ErrorMessage'
 import Button from '@/components/utility/Button'
-import { useAuth } from '@/hooks/useAuth'
+import HeaderLinks from '@/components/header/HeaderLinks'
+import CircuitLeft from '@/components/svgComponents/circuit/CircuitLeft'
+import CircuitRight from '@/components/svgComponents/circuit/CircuitRight'
+import CircuitTop from '@/components/svgComponents/circuit/CircuitTop'
+import CircuitBottom from '@/components/svgComponents/circuit/CircuitBottom'
 
 // Verificação das condições de senha
 const ChangePasswordSchema = z
@@ -68,49 +69,54 @@ export default function ChangePasswordForm() {
   }
 
   return (
-    <div className="min-w-screen flex min-h-screen items-center justify-center">
-      <Logo
-        link="/"
-        className="absolute left-8 top-4 z-10 cursor-pointer text-cinza transition duration-300 ease-in-out hover:text-roxo-900"
-      />
-      <div className="mb-14 mt-14">
-        <ModalSquareForm>
-          <div className="relative flex flex-col items-center justify-center p-10 md:px-10 md:py-5 xl:min-w-[32rem]">
-            <FormTitle title="Redefinir senha" />
-            <form
-              onSubmit={handleSubmit(handlePassword)}
-              className="mt-12 flex flex-col items-center justify-center"
-            >
-              <FormInput
-                registerProps={register('password')}
-                type="password"
-                label="senha"
-              />
-
-              {errors.password && (
-                <ErrorMessage error={errors.password.message} />
-              )}
-              <FormInput
-                registerProps={register('confirmPassword')}
-                type="password"
-                label="confirmar senha"
-              />
-              {errors.confirmPassword && (
-                <ErrorMessage error={errors.confirmPassword.message} />
-              )}
-              {errors.root && <ErrorMessage error={errors.root.message} />}
-              <Button
-                disabled={isSubmitting}
-                className="mt-4"
-                text="Alterar Senha"
-              />
-            </form>
+    <div className="min-w-screen min-h-screen bg-grid-pattern relative flex flex-col items-center justify-center px-6">
+      <HeaderLinks />
+
+      <div className="h-auto bg-[#f8f7fc] flex flex-col items-center justify-center border border-roxo-300 rounded mt-8 sm:mt-0 p-8 sm:p-12 min-w-full sm:min-w-[36rem]">
+        <FormTitle title="Nova senha" />
+
+        <form
+          onSubmit={handleSubmit(handlePassword)}
+          className="mt-8 w-full flex flex-col items-center justify-center"
+        >
+          <div className="w-full flex flex-col items-start">
+            <FormInput
+              registerProps={register('password')}
+              type="password"
+              label="senha"
+            />
+
+            {errors.password && (
+              <ErrorMessage error={errors.password.message} />
+            )}
+          </div>
+
+          <div className="w-full flex flex-col items-start mt-5">
+            <FormInput
+              registerProps={register('confirmPassword')}
+              type="password"
+              label="confirmar senha"
+            />
+
+            {errors.confirmPassword && (
+              <ErrorMessage error={errors.confirmPassword.message} />
+            )}
           </div>
-        </ModalSquareForm>
+
+          {errors.root && <ErrorMessage error={errors.root.message} />}
+
+          <Button
+            disabled={isSubmitting}
+            className="mt-6 mb-4 w-full"
+            text="Alterar Senha"
+          />
+        </form>
       </div>
 
-      <CircuitTopLeft className="md:text absolute left-0 top-5 hidden max-h-[30%] max-w-[30%] xl:block" />
-      <CircuitBottomRight className="absolute bottom-5 right-0 hidden max-h-[30%] max-w-[30%] xl:block"></CircuitBottomRight>
+      <CircuitTop className="absolute left-0 top-32 hidden max-h-[40%] max-w-[22%] xl:block" />
+      <CircuitLeft className="absolute bottom-0 left-0 hidden max-h-[40%] max-w-[25%] xl:block" />
+      <CircuitRight className="absolute right-0 top-32 hidden max-h-[30%] max-w-[25%] xl:block" />
+      <CircuitBottom className="absolute bottom-0 right-0 hidden max-h-[55%] max-w-[22%] xl:block" />
     </div>
   )
 }
diff --git a/src/pages/Login@Registration/ForgotPasswordPage.tsx b/src/pages/Login@Registration/ForgotPasswordPage.tsx
index 1cac20d..9ba77ce 100644
--- a/src/pages/Login@Registration/ForgotPasswordPage.tsx
+++ b/src/pages/Login@Registration/ForgotPasswordPage.tsx
@@ -1,24 +1,21 @@
 import ForgotPasswordForm from '@/components/forgotPassword/ForgotPasswordForm'
-import Logo from '@/components/svgComponents/Logo'
-import CircuitBottomRight from '@/components/svgComponents/circuit/CircuitBottomRight'
-import CircuitTopLeft from '@/components/svgComponents/circuit/CircuitTopLeft'
+import CircuitLeft from '@/components/svgComponents/circuit/CircuitLeft'
+import CircuitRight from '@/components/svgComponents/circuit/CircuitRight'
+import CircuitTop from '@/components/svgComponents/circuit/CircuitTop'
+import CircuitBottom from '@/components/svgComponents/circuit/CircuitBottom'
+import HeaderLinks from '@/components/header/HeaderLinks'
 
 export default function ForgotPassword() {
-  //export default async function recoverPassword({email}: RegisterCredentials){
-  // const response = await api.post('/auth/forgot-password-request',{
-  // email
-  //})
-  //}
 
   return (
-    <div className="min-w-screen flex min-h-screen items-center justify-center">
-      <Logo
-        link="/"
-        className="absolute left-8 top-4 z-10 cursor-pointer text-cinza transition duration-300 ease-in-out hover:text-roxo-900"
-      />
+    <div className="min-w-screen min-h-screen bg-grid-pattern relative flex flex-col items-center justify-center px-6 pb-16">
+      <HeaderLinks />
       <ForgotPasswordForm />
-      <CircuitTopLeft className="md:text absolute left-0 top-5 hidden max-h-[30%] max-w-[30%] xl:block" />
-      <CircuitBottomRight className="absolute bottom-5 right-0 hidden max-h-[30%] max-w-[30%] xl:block"></CircuitBottomRight>
+
+      <CircuitTop className="absolute left-0 top-32 hidden max-h-[40%] max-w-[22%] xl:block" />
+      <CircuitLeft className="absolute bottom-0 left-0 hidden max-h-[40%] max-w-[25%] xl:block" />
+      <CircuitRight className="absolute right-0 top-32 hidden max-h-[30%] max-w-[25%] xl:block" />
+      <CircuitBottom className="absolute bottom-0 right-0 hidden max-h-[55%] max-w-[22%] xl:block" />
     </div>
   )
 }
diff --git a/src/pages/Login@Registration/Login.tsx b/src/pages/Login@Registration/Login.tsx
index 44ee2cf..db7c843 100644
--- a/src/pages/Login@Registration/Login.tsx
+++ b/src/pages/Login@Registration/Login.tsx
@@ -1,26 +1,20 @@
 import LoginForm from '@/components/login/LoginForm'
-import Logo from '@/components/svgComponents/Logo'
-import CircuitBottomLeft from '@/components/svgComponents/circuit/CircuitBottomLeft'
-import CircuitBottomRight from '@/components/svgComponents/circuit/CircuitBottomRight'
-import CircuitTopLeft from '@/components/svgComponents/circuit/CircuitTopLeft'
-import CircuitTopRight from '@/components/svgComponents/circuit/CircuitTopRight'
+import CircuitLeft from '@/components/svgComponents/circuit/CircuitLeft'
+import CircuitRight from '@/components/svgComponents/circuit/CircuitRight'
+import CircuitTop from '@/components/svgComponents/circuit/CircuitTop'
+import CircuitBottom from '@/components/svgComponents/circuit/CircuitBottom'
+import HeaderLinks from '@/components/header/HeaderLinks'
 
 export default function Login() {
-  console.log(import.meta.env.VITE_API_URL)
   return (
-    <div className="min-w-screen relative flex min-h-screen items-center justify-center">
-      <Logo
-        link="https://www.vlab.dc.ufscar.br"
-        className="hover:text-roxo-escuro absolute left-8 top-4 z-10 cursor-pointer text-cinza transition duration-300 ease-in-out"
-      />
-      <div className="mb-14 sm:mb-0">
-        <LoginForm />
-      </div>
+    <div className="min-w-screen min-h-screen bg-grid-pattern relative flex flex-col items-center justify-center px-6">
+      <HeaderLinks />
+      <LoginForm />
 
-      <CircuitTopLeft className="absolute left-0 top-5 hidden max-h-[50%] max-w-[50%] xl:block" />
-      <CircuitBottomLeft className="absolute bottom-5 left-0 hidden max-h-[50%] max-w-[50%] xl:block" />
-      <CircuitTopRight className="absolute right-0 top-5 hidden max-h-[50%] max-w-[50%] xl:block" />
-      <CircuitBottomRight className="absolute bottom-5 right-0 hidden max-h-[50%] max-w-[50%] xl:block" />
+      <CircuitTop className="absolute left-0 top-32 hidden max-h-[40%] max-w-[22%] xl:block" />
+      <CircuitLeft className="absolute bottom-0 left-0 hidden max-h-[40%] max-w-[25%] xl:block" />
+      <CircuitRight className="absolute right-0 top-32 hidden max-h-[30%] max-w-[25%] xl:block" />
+      <CircuitBottom className="absolute bottom-0 right-0 hidden max-h-[55%] max-w-[22%] xl:block" />
     </div>
   )
 }
diff --git a/src/pages/Login@Registration/Register.tsx b/src/pages/Login@Registration/Register.tsx
index 85717d0..a2a1aec 100644
--- a/src/pages/Login@Registration/Register.tsx
+++ b/src/pages/Login@Registration/Register.tsx
@@ -1,21 +1,20 @@
 import RegisterForm from '@/components/register/RegisterForm'
-import Logo from '@/components/svgComponents/Logo'
-import CircuitBottomRight from '@/components/svgComponents/circuit/CircuitBottomRight'
-import CircuitTopLeft from '@/components/svgComponents/circuit/CircuitTopLeft'
+import CircuitLeft from '@/components/svgComponents/circuit/CircuitLeft'
+import CircuitRight from '@/components/svgComponents/circuit/CircuitRight'
+import CircuitTop from '@/components/svgComponents/circuit/CircuitTop'
+import CircuitBottom from '@/components/svgComponents/circuit/CircuitBottom'
+import HeaderLinks from '@/components/header/HeaderLinks'
 
 export default function Register() {
   return (
-    <div className="min-w-screen flex min-h-screen items-center justify-center">
-      <Logo
-        link="/"
-        className="absolute left-8 top-4 z-10 cursor-pointer text-cinza transition duration-300 ease-in-out hover:text-roxo-900"
-      />
-      <div className="mb-14 mt-14">
-        <RegisterForm />
-      </div>
+    <div className="min-w-screen min-h-screen bg-grid-pattern relative flex flex-col items-center justify-center px-6 pb-16">
+      <HeaderLinks />
+      <RegisterForm />
 
-      <CircuitTopLeft className="md:text absolute left-0 top-5 hidden max-h-[30%] max-w-[30%] xl:block" />
-      <CircuitBottomRight className="absolute bottom-5 right-0 hidden max-h-[30%] max-w-[30%] xl:block"></CircuitBottomRight>
+      <CircuitTop className="absolute left-0 top-32 hidden max-h-[40%] max-w-[22%] xl:block" />
+      <CircuitLeft className="absolute bottom-0 left-0 hidden max-h-[40%] max-w-[25%] xl:block" />
+      <CircuitRight className="absolute right-0 top-32 hidden max-h-[30%] max-w-[25%] xl:block" />
+      <CircuitBottom className="absolute bottom-0 right-0 hidden max-h-[55%] max-w-[22%] xl:block" />
     </div>
   )
 }