diff --git a/package.json b/package.json
index 3f28d49e..d9c29817 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@apollo/client": "^3.7.12",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-accordion": "^1.1.1",
+    "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/src/components/Dropzone/Dropzone.tsx b/src/components/Dropzone/Dropzone.tsx
index 164aaa50..a9ffcddc 100644
--- a/src/components/Dropzone/Dropzone.tsx
+++ b/src/components/Dropzone/Dropzone.tsx
@@ -17,6 +17,7 @@ const Dropzone = () => {
   const { user } = useUser();
   const { theme } = useTheme();
   const { openModal, closeModal } = useModal();
+  
   const onDrop = async (acceptedFiles: File[]) => {
     closeModal(ModalActionTypes.SETTINGS_MODAL);
     const [selectedFile] = acceptedFiles;
diff --git a/src/components/MentorModalAvailability/MentorModalAvailability.tsx b/src/components/MentorModalAvailability/MentorModalAvailability.tsx
index 158ca50e..dd158e37 100644
--- a/src/components/MentorModalAvailability/MentorModalAvailability.tsx
+++ b/src/components/MentorModalAvailability/MentorModalAvailability.tsx
@@ -1,18 +1,18 @@
+import { useMutation } from "@apollo/client";
 import Button from "@components/Button";
 import Chip from "@components/Chip/Chip";
-import Modal from "@components/Modal";
+import { Modal } from "@components/Modal/Modal";
 import TimeInput from "@components/TimeInput/TimeInput";
+import { useUser } from "@hooks/useUser";
 import { DAYS_OF_THE_WEEK_SHORT, TWeekday_Short } from "config/constants";
 import { useState } from "react";
-import { saveAvailabilityInMemory } from "./helpers/saveAvailability";
 import { MdClose } from "react-icons/md";
-import { useMutation } from "@apollo/client";
-import { PERSIST_AVAILABILITY } from "services/apollo/mutations";
-import { useUser } from "@hooks/useUser";
 import { toast } from "react-toastify";
-import { SuccessfullyCreated } from "./SuccessullyCreated";
-import { AvailabilitySlot, Props } from "./MentorModalAvailability.types";
+import { PERSIST_AVAILABILITY } from "services/apollo/mutations";
 import { IAvailabilityAPI } from "types/availability.types";
+import { AvailabilitySlot, Props } from "./MentorModalAvailability.types";
+import { SuccessfullyCreated } from "./SuccessullyCreated";
+import { saveAvailabilityInMemory } from "./helpers/saveAvailability";
 
 export const MentorModalAvailability = ({
   open,
@@ -82,93 +82,97 @@ export const MentorModalAvailability = ({
 
   return (
     <>
-      <Modal open={open} onOpenChange={setOpen}>
-        <section className=" text-left z-20 p-8  w-[300px] xs:w-[380px] sm:w-auto">
-          <h1 className="inline text-secondary-03 font-semibold text-2xl mb-2">
-            Horário de mentoria
-          </h1>
-          <p className="text-secondary-02">
-            Defina seus horários e datas disponíveis
-          </p>
-          <p className="text-sm sm:text-base text-primary-05 mt-2">
-            *O tempo de cada mentoria é de aproximadamente 30 minutos.
-          </p>
-          <p className="text-sm sm:text-base text-primary-05 mt-2">
-            Cada mentoria deve ser criada com esse intervalo, podendo ter vários
-            horários disponíveis no mesmo dia.
-          </p>
-          <section className=" flex gap-4 mt-12 flex-wrap max-w-[100px] xs:max-w-[200px] sm:max-w-[450px] md:max-w-max m-auto">
-            {DAYS_OF_THE_WEEK_SHORT.map((day) => (
-              <div className=" min-w-[75px] m-auto sm:m-0 " key={day}>
-                <Chip
-                  className="capitalize font-normal cursor-pointer "
-                  key={day}
-                  variant={
-                    selectedDay === day ? "secondary_dark" : "primary_dark"
-                  }
-                  onClick={() => setSelectedDay(day)}
-                >
-                  {day}
-                </Chip>
+      <Modal.Root open={open} onOpenChange={setOpen}>
+        <Modal.Content>
+          <section className=" text-left z-20 p-8  w-[300px] xs:w-[380px] sm:w-auto">
+            <h1 className="inline text-secondary-03 font-semibold text-2xl mb-2">
+              Horário de mentoria
+            </h1>
+            <p className="text-secondary-02">
+              Defina seus horários e datas disponíveis
+            </p>
+            <p className="text-sm sm:text-base text-primary-05 mt-2">
+              *O tempo de cada mentoria é de aproximadamente 30 minutos.
+            </p>
+            <p className="text-sm sm:text-base text-primary-05 mt-2">
+              Cada mentoria deve ser criada com esse intervalo, podendo ter
+              vários horários disponíveis no mesmo dia.
+            </p>
+            <section className=" flex gap-4 mt-12 flex-wrap max-w-[100px] xs:max-w-[200px] sm:max-w-[450px] md:max-w-max m-auto">
+              {DAYS_OF_THE_WEEK_SHORT.map((day) => (
+                <div className=" min-w-[75px] m-auto sm:m-0 " key={day}>
+                  <Chip
+                    className="capitalize font-normal cursor-pointer "
+                    key={day}
+                    variant={
+                      selectedDay === day ? "secondary_dark" : "primary_dark"
+                    }
+                    onClick={() => setSelectedDay(day)}
+                  >
+                    {day}
+                  </Chip>
+                </div>
+              ))}
+            </section>
+            <section className="flex flex-col sm:flex-row items-center  justify-between md:justify-center mt-14 gap-4 sm:gap-8 dark:text-neutral-02">
+              <div>
+                <p className="text-secondary-03">Horário</p>
               </div>
-            ))}
-          </section>
-          <section className="flex flex-col sm:flex-row items-center  justify-between md:justify-center mt-14 gap-4 sm:gap-8 dark:text-neutral-02">
-            <div>
-              <p className="text-secondary-03">Horário</p>
-            </div>
-            <div className="flex flex-col sm:flex-row gap-4 ">
-              <TimeInput value={selectedStart} onChange={setSelectedStart} />
-              <TimeInput value={selectedEnd} onChange={setSelectedEnd} />
-            </div>
-          </section>
-          <section className="mt-14 m-auto max-w-[450px]">
-            <Button
-              onClick={handleSaveAvailability}
-              size="small"
-              className="font-bold"
-              variant="secondary"
-            >
-              Agendar horários
-            </Button>
-          </section>
-          <div className="bg-gray-03 h-px w-full mt-14" />
-          <section className="flex pt-14  flex-col text-gray-05 font-semibold">
-            {availability.map((slot) => (
-              <section
-                key={slot.weekDay}
-                className="flex flex-col xs:flex-row xs:space-x-4 items-center mt-2 m-auto"
+              <div className="flex flex-col sm:flex-row gap-4 ">
+                <TimeInput value={selectedStart} onChange={setSelectedStart} />
+                <TimeInput value={selectedEnd} onChange={setSelectedEnd} />
+              </div>
+            </section>
+            <section className="mt-14 m-auto max-w-[450px]">
+              <Button
+                onClick={handleSaveAvailability}
+                size="small"
+                className="font-bold"
+                variant="secondary"
               >
-                <article className="">
-                  <p className="text-secondary-03 font-bold">{slot.weekDay}</p>
-                </article>
-                <article className="text-secondary-01 dark:text-neutral-02">
-                  {slot.startHour} até {slot.endHour}
-                </article>
-                <MdClose
-                  className="cursor-pointer text-secondary-01 dark:text-neutral-02"
-                  onClick={() => removeAvailability(slot)}
-                />
-              </section>
-            ))}
-          </section>
-          <section className=" mt-20 m-auto max-w-[450px]">
-            <Button
-              onClick={handlePersistAvailability}
-              isLoading={loading}
-              size="small"
-              className="font-bold border-none"
-              variant="primary"
-            >
-              Criar Agenda
-            </Button>
+                Agendar horários
+              </Button>
+            </section>
+            <div className="bg-gray-03 h-px w-full mt-14" />
+            <section className="flex pt-14  flex-col text-gray-05 font-semibold">
+              {availability.map((slot) => (
+                <section
+                  key={slot.weekDay}
+                  className="flex flex-col xs:flex-row xs:space-x-4 items-center mt-2 m-auto"
+                >
+                  <article className="">
+                    <p className="text-secondary-03 font-bold">
+                      {slot.weekDay}
+                    </p>
+                  </article>
+                  <article className="text-secondary-01 dark:text-neutral-02">
+                    {slot.startHour} até {slot.endHour}
+                  </article>
+                  <MdClose
+                    className="cursor-pointer text-secondary-01 dark:text-neutral-02"
+                    onClick={() => removeAvailability(slot)}
+                  />
+                </section>
+              ))}
+            </section>
+            <section className=" mt-20 m-auto max-w-[450px]">
+              <Button
+                onClick={handlePersistAvailability}
+                isLoading={loading}
+                size="small"
+                className="font-bold border-none"
+                variant="primary"
+              >
+                Criar Agenda
+              </Button>
+            </section>
           </section>
-        </section>
-      </Modal>
-      <SuccessfullyCreated
-        open={successModal}
-        onClose={() => setSuccessModal(false)}
-      />
+        </Modal.Content>
+        <SuccessfullyCreated
+          open={successModal}
+          onClose={() => setSuccessModal(false)}
+        />
+      </Modal.Root>
     </>
   );
 };
diff --git a/src/components/MentorModalAvailability/SuccessullyCreated.tsx b/src/components/MentorModalAvailability/SuccessullyCreated.tsx
index 30c65239..579ca4bd 100644
--- a/src/components/MentorModalAvailability/SuccessullyCreated.tsx
+++ b/src/components/MentorModalAvailability/SuccessullyCreated.tsx
@@ -1,5 +1,5 @@
 import Button from "@components/Button";
-import Modal from "@components/Modal/Modal";
+import { Modal } from "@components/Modal/Modal";
 
 export const SuccessfullyCreated = ({
   open,
@@ -9,7 +9,7 @@ export const SuccessfullyCreated = ({
   onClose: () => void;
 }) => {
   return (
-    <Modal open={open} onOpenChange={onClose}>
+    <Modal.Root open={open} onOpenChange={onClose}>
       <section className="py-10 px-16">
         <h1 className="text-3xl font-extrabold text-secondary-02">
           Agenda criada!
@@ -26,6 +26,6 @@ export const SuccessfullyCreated = ({
           Finalizar
         </Button>
       </section>
-    </Modal>
+    </Modal.Root>
   );
 };
diff --git a/src/components/MentoringLinkCard/SelectComponent.tsx b/src/components/MentoringLinkCard/SelectComponent.tsx
index d6286f79..d09e4f58 100644
--- a/src/components/MentoringLinkCard/SelectComponent.tsx
+++ b/src/components/MentoringLinkCard/SelectComponent.tsx
@@ -3,10 +3,10 @@ import clsx from "clsx";
 import { useState } from "react";
 import { BiChevronDown, BiChevronUp } from "react-icons/bi";
 import Button from "../../components/Button";
-import Modal from "@components/Modal/Modal";
 import { useMutation } from "@apollo/client";
 import { UPDATE_EVENT } from "services/apollo/mutations";
 import { IUpdateEventInput, Props } from "./SelectComponent.types";
+import { Modal } from "@components/Modal/Modal";
 
 export const SelectComponent = ({
   eventId,
@@ -53,17 +53,17 @@ export const SelectComponent = ({
   };
   return (
     <>
-      <Modal
+      <Modal.Root
         open={isModalOpen}
         onOpenChange={setIsModalOpen}
         closeModalComponent={<button onClick={handleCloseModal}></button>}
       >
         {currentStep === 1 && (
           <>
-            <p className="text-2xl font-bold px-20">
+            <p className="px-20 text-2xl font-bold">
               Deseja realmente cancelar sua mentoria?
             </p>
-            <div className="flex mt-16 px-20 gap-4">
+            <div className="mt-16 flex gap-4 px-20">
               <Button
                 size="small"
                 variant="secondary"
@@ -82,22 +82,22 @@ export const SelectComponent = ({
         )}
         {currentStep === 2 && !loadingUpdatingEvent && (
           <>
-            <p className="text-2xl font-bold px-20 text-success-01 text-center">
+            <p className="px-20 text-center text-2xl font-bold text-success-01">
               Sua mentoria foi cancelada com sucesso!
             </p>
-            <p className="font-bold px-20 text-base mt-4">{nameUser}</p>
-            <p className=" px-14 text-base mt-4 text-gray-03">
+            <p className="mt-4 px-20 text-base font-bold">{nameUser}</p>
+            <p className=" mt-4 px-14 text-base text-gray-03">
               Seu mentorado será notificado do seu cancelamento da mentoria
             </p>
-            <p className=" px-20 text-base mt-4">
+            <p className=" mt-4 px-20 text-base">
               <span className="font-bold">Horário:</span> {hour}
             </p>
-            <p className=" px-20 text-base mt-4">
+            <p className=" mt-4 px-20 text-base">
               <span className="font-bold"> Data:</span> {date}
             </p>
           </>
         )}
-      </Modal>
+      </Modal.Root>
       <Select.Root
         open={isOpen}
         onOpenChange={setIsOpen}
@@ -105,7 +105,7 @@ export const SelectComponent = ({
         disabled={disabled}
         onValueChange={handleValueChange}
       >
-        <Select.Trigger className="flex items-center justify-center cursor-pointer focus:outline-none">
+        <Select.Trigger className="flex cursor-pointer items-center justify-center focus:outline-none">
           {isOpen ? <BiChevronUp size={24} /> : <BiChevronDown size={24} />}
         </Select.Trigger>
         <Select.Content
@@ -113,7 +113,7 @@ export const SelectComponent = ({
           alignOffset={30}
           side="left"
           className={clsx(
-            "bg-neutral-01 dark:bg-secondary-02 border border-gra p-4 rounded-lg mt-2"
+            "border-gra mt-2 rounded-lg border bg-neutral-01 p-4 dark:bg-secondary-02"
           )}
         >
           {/* <Select.Item
@@ -125,7 +125,7 @@ export const SelectComponent = ({
           </Select.Item> */}
           <Select.Item
             value="Cancelar"
-            className="hover:bg-primary-01 hover:text-neutral-01 focus:text-neutral-01 rounded-lg p-2 focus:bg-primary-01 focus:outline-none focus:ring-0 focus:ring-primary-03"
+            className="rounded-lg p-2 hover:bg-primary-01 hover:text-neutral-01 focus:bg-primary-01 focus:text-neutral-01 focus:outline-none focus:ring-0 focus:ring-primary-03"
           >
             Cancelar
           </Select.Item>
diff --git a/src/components/Modal/EditProfile/EditProfileModal.tsx b/src/components/Modal/EditProfile/EditProfileModal.tsx
index 03509ba5..36b4a11a 100644
--- a/src/components/Modal/EditProfile/EditProfileModal.tsx
+++ b/src/components/Modal/EditProfile/EditProfileModal.tsx
@@ -1,31 +1,31 @@
 import { useMutation } from "@apollo/client";
 import Button from "@components/Button/Button";
 import Input from "@components/Input";
-import Modal from "@components/Modal";
+import SelectLocation from "@components/LocationSelector/SelectLocation";
+import SelectSkillsInput from "@components/MultiSelect/SelectSkillsInput";
 import Textarea from "@components/Textarea/Textarea";
+import { useFetch } from "@hooks/useFetch";
+import { Country, State } from "@hooks/useFetch.types";
+import { useTypedQuery } from "@hooks/useTypedQuery";
 import { useUser } from "@hooks/useUser";
+import { useModal } from "contexts/ModalContext";
+import { ModalActionTypes } from "contexts/types";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "react-toastify";
 import { USER_UPDATE_DATA } from "services/apollo/mutations";
-import {
-  IEditProfileFormData,
-  ILocationInterface,
-} from "./EditProfileModal.types";
-import SelectLocation from "@components/LocationSelector/SelectLocation";
-import { Country, State } from "@hooks/useFetch.types";
-import { useFetch } from "@hooks/useFetch";
 import { GET_ME, GET_MENTORS } from "services/apollo/queries";
-import { SubmitHandler, useForm } from "react-hook-form";
-import SelectSkillsInput from "@components/MultiSelect/SelectSkillsInput";
 import { queriesIndex as api } from "services/apollo/queries/queries.index";
+import { z } from "zod";
+import { Modal } from "../Modal";
 import {
   IEditProfileSubmitData,
   editProfileFormSchema,
-} from "@components/Modal/EditProfile/EditProfileModal.form";
-import { z } from "zod";
-import { useTypedQuery } from "@hooks/useTypedQuery";
-import { useModal } from "contexts/ModalContext";
-import { ModalActionTypes } from "contexts/types";
+} from "./EditProfileModal.form";
+import {
+  IEditProfileFormData,
+  ILocationInterface,
+} from "./EditProfileModal.types";
 
 const EditProfileModal = () => {
   const { user: userCurrent, setUser } = useUser();
@@ -127,120 +127,122 @@ const EditProfileModal = () => {
     };
 
   return (
-    <Modal
+    <Modal.Root
       open={EDIT_PROFILE_MODAL}
       onOpenChange={() => closeModal(ModalActionTypes.EDIT_PROFILE_MODAL)}
     >
-      <div className="max-xl:px-5 py-16 w-[300px] xs:w-[380px] sm:w-[600px] md:w-auto p-2 lg:px-20">
-        <form
-          className="max-md:w-auto md:w-[672px] text-start"
-          onSubmit={handleSubmit(submitHandler)}
-        >
-          <div className="flex flex-col md:flex-row gap-2 w-full">
-            <Input
-              type="text"
-              {...register("firstName")}
-              label="Nome"
-              pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
-              defaultValue={userCurrent.firstName}
-            />
-            <Input
-              type="text"
-              {...register("lastName")}
-              label="Sobrenome"
-              pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
-              defaultValue={userCurrent.lastName ?? ""}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Input
-              type="text"
-              {...register("jobTitle")}
-              label="Profissão"
-              pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
-              defaultValue={userCurrent.jobTitle ?? ""}
-            />
-            <Textarea
-              {...register("biography")}
-              label="Bio"
-              defaultValue={userCurrent.biography ?? ""}
-            />
-            <Textarea
-              {...register("description")}
-              label="Experiência"
-              defaultValue={userCurrent.description ?? ""}
-            />
-            <SelectLocation
-              onSelect={handleLocationChange(setSelectedCountry)}
-              name="country"
-              label="Pais"
-              requiredField={true}
-              options={countries}
-              placeholder="Selecione um Pais"
-              value={
-                selectedCountry || {
-                  label: userCurrent.country,
-                  value: userCurrent.country,
+      <Modal.Content>
+        <div className="w-[300px] p-2 py-16 max-xl:px-5 xs:w-[380px] sm:w-[600px] md:w-auto lg:px-20">
+          <form
+            className="text-start max-md:w-auto md:w-[672px]"
+            onSubmit={handleSubmit(submitHandler)}
+          >
+            <div className="flex w-full flex-col gap-2 md:flex-row">
+              <Input
+                type="text"
+                {...register("firstName")}
+                label="Nome"
+                pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
+                defaultValue={userCurrent.firstName}
+              />
+              <Input
+                type="text"
+                {...register("lastName")}
+                label="Sobrenome"
+                pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
+                defaultValue={userCurrent.lastName ?? ""}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Input
+                type="text"
+                {...register("jobTitle")}
+                label="Profissão"
+                pattern="^[A-Za-zÀ-ÿ ,.'-]+$"
+                defaultValue={userCurrent.jobTitle ?? ""}
+              />
+              <Textarea
+                {...register("biography")}
+                label="Bio"
+                defaultValue={userCurrent.biography ?? ""}
+              />
+              <Textarea
+                {...register("description")}
+                label="Experiência"
+                defaultValue={userCurrent.description ?? ""}
+              />
+              <SelectLocation
+                onSelect={handleLocationChange(setSelectedCountry)}
+                name="country"
+                label="Pais"
+                requiredField={true}
+                options={countries}
+                placeholder="Selecione um Pais"
+                value={
+                  selectedCountry || {
+                    label: userCurrent.country,
+                    value: userCurrent.country,
+                  }
                 }
-              }
-            />
-            <SelectLocation
-              onSelect={handleLocationChange(setSelectedStates)}
-              label="Estado"
-              name="state"
-              requiredField={true}
-              options={states}
-              placeholder="Selecione um Estado"
-              value={
-                selectedStates || {
-                  label: userCurrent.state,
-                  value: userCurrent.state,
+              />
+              <SelectLocation
+                onSelect={handleLocationChange(setSelectedStates)}
+                label="Estado"
+                name="state"
+                requiredField={true}
+                options={states}
+                placeholder="Selecione um Estado"
+                value={
+                  selectedStates || {
+                    label: userCurrent.state,
+                    value: userCurrent.state,
+                  }
                 }
-              }
-              isDisabled={selectedCountry?.value !== "Brasil"}
-            />
-            <Input
-              label="Linkedin"
-              {...register("linkedin")}
-              placeholder="linkedin.com/in/usuario1"
-              defaultValue={userCurrent.linkedin ?? ""}
-            />
-            <Input
-              {...register("github")}
-              label="Portifólio/Github"
-              placeholder="portfóliousuário.com.br"
-              defaultValue={userCurrent.github ?? ""}
-            />
-            <Input
-              type="number"
-              max={45}
-              min={0}
-              {...register("yearsOfExperience")}
-              label="Anos experiência"
-              required
-              defaultValue={
-                userCurrent.yearsOfExperience
-                  ? userCurrent.yearsOfExperience.toString()
-                  : "0"
-              }
-            />
-            <SelectSkillsInput
-              label="Especialização"
-              state={[selectedSkills, setSelectedSkills]}
-              options={options}
-            />
-          </div>
-          <Button
-            type="submit"
-            className="mt-7"
-            disabled={loading}
-            isLoading={loading}
-          >
-            Salvar
-          </Button>
-        </form>
-      </div>
-    </Modal>
+                isDisabled={selectedCountry?.value !== "Brasil"}
+              />
+              <Input
+                label="Linkedin"
+                {...register("linkedin")}
+                placeholder="linkedin.com/in/usuario1"
+                defaultValue={userCurrent.linkedin ?? ""}
+              />
+              <Input
+                {...register("github")}
+                label="Portifólio/Github"
+                placeholder="portfóliousuário.com.br"
+                defaultValue={userCurrent.github ?? ""}
+              />
+              <Input
+                type="number"
+                max={45}
+                min={0}
+                {...register("yearsOfExperience")}
+                label="Anos experiência"
+                required
+                defaultValue={
+                  userCurrent.yearsOfExperience
+                    ? userCurrent.yearsOfExperience.toString()
+                    : "0"
+                }
+              />
+              <SelectSkillsInput
+                label="Especialização"
+                state={[selectedSkills, setSelectedSkills]}
+                options={options}
+              />
+            </div>
+            <Button
+              type="submit"
+              className="mt-7"
+              disabled={loading}
+              isLoading={loading}
+            >
+              Salvar
+            </Button>
+          </form>
+        </div>
+      </Modal.Content>
+    </Modal.Root>
   );
 };
 
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 37d6cbbb..ead30c75 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,23 +1,36 @@
-import Modal from "./Modal";
 import { Meta, StoryObj } from "@storybook/react";
+import { Modal } from "./Modal";
+import ModalRoot from "./ModalRoot/ModalRoot";
 
 const meta = {
   title: "Data Display/Modal",
-  component: Modal,
-} satisfies Meta<typeof Modal>;
-
+  component: Modal.Root,
+};
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ModalRoot>;
 
 export const Default: Story = {
   args: {
     children: (
-      <div>
-        <h1>Title</h1>
-        <p>Content</p>
-      </div>
+      <Modal.Content>
+        <Modal.Title text="Title" />
+        <Modal.Description text="Description" />
+        <div>Content</div>
+      </Modal.Content>
     ),
     open: false,
     onOpenChange: () => {},
   },
 };
+
+export const ModalAlert: Story = {
+  args: {
+    children: (
+      <Modal.ContentAlert>
+        <Modal.Title text="Title" />
+        <Modal.Description text="Description" />
+      </Modal.ContentAlert>
+    ),
+    open: false,
+  },
+};
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 8d6577c3..b5cef8dd 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,36 +1,13 @@
-import * as Dialog from "@radix-ui/react-dialog";
-import { Cross1Icon } from "@radix-ui/react-icons";
-import { ModalProps } from "./Modal.types";
+import ModalContent from "./ModalRoot/ModalContent";
+import ModalContentAlert from "./ModalRoot/ModalContentAlert";
+import ModalDescription from "./ModalRoot/ModalDescription";
+import ModalRoot from "./ModalRoot/ModalRoot";
+import ModalTitle from "./ModalRoot/ModalTitle";
 
-const Modal = ({
-  openModalComponent,
-  children,
-  closeModalComponent,
-  open,
-  onOpenChange,
-}: ModalProps) => {
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>{openModalComponent}</Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0" />
-        <Dialog.Content className="text-center py-6 text-secondary-03 z-50 rounded-lg bg-scroll overflow-y-auto bg-neutral-01 dark:bg-secondary-02 fixed top-[50%] left-[50%] max-h-[90vh] w-auto   translate-x-[-50%] translate-y-[-50%]  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] border border-neutral-02 ">
-          {children}
-          <Dialog.Close asChild>
-            <div>
-              <button
-                className="absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] items-center justify-center rounded-full dark:text-neutral-02"
-                aria-label="Close"
-              >
-                <Cross1Icon />
-              </button>
-              {closeModalComponent}
-            </div>
-          </Dialog.Close>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
+export const Modal = {
+  Root: ModalRoot,
+  Content: ModalContent,
+  ContentAlert: ModalContentAlert,
+  Title: ModalTitle,
+  Description: ModalDescription,
 };
-
-export default Modal;
diff --git a/src/components/Modal/ModalAlert/ModalAlert.tsx b/src/components/Modal/ModalAlert/ModalAlert.tsx
new file mode 100644
index 00000000..4a95de1a
--- /dev/null
+++ b/src/components/Modal/ModalAlert/ModalAlert.tsx
@@ -0,0 +1,20 @@
+import { useModal } from "contexts/ModalContext";
+import { ModalActionTypes } from "contexts/types";
+import { Modal } from "../Modal";
+
+const ModalAlert = () => {
+  const { openModal, closeModal, ALERT_MODAL } = useModal();
+  return (
+    <Modal.Root
+      open={ALERT_MODAL}
+      onOpenChange={() => closeModal(ModalActionTypes.ALERT_MODAL)}
+    >
+      <Modal.ContentAlert>
+        <Modal.Title text="Tem certeza que deseja mudar a foto do perfil?" />
+        <Modal.Description text=" " />
+      </Modal.ContentAlert>
+    </Modal.Root>
+  );
+};
+
+export default ModalAlert;
diff --git a/src/components/Modal/ModalAlert/index.tsx b/src/components/Modal/ModalAlert/index.tsx
new file mode 100644
index 00000000..c9374edf
--- /dev/null
+++ b/src/components/Modal/ModalAlert/index.tsx
@@ -0,0 +1 @@
+export { default } from "./ModalAlert";
diff --git a/src/components/Modal/ModalNotifications/ModalNotifications.tsx b/src/components/Modal/ModalNotifications/ModalNotifications.tsx
index 512d5cb7..bdb87228 100644
--- a/src/components/Modal/ModalNotifications/ModalNotifications.tsx
+++ b/src/components/Modal/ModalNotifications/ModalNotifications.tsx
@@ -1,11 +1,10 @@
 import CardNotification from "@components/CardNotification/CardNotification";
 import { useUser } from "@hooks/useUser";
 import { useModal } from "contexts/ModalContext";
-import Modal from "..";
 import { ModalActionTypes } from "contexts/types";
-import { eventStatusToPortugueseMap } from "utils/parser/eventStatusToPortuguese";
 import { OptionStatus } from "schemas/create_event_output";
-import { tr } from "date-fns/locale";
+import { eventStatusToPortugueseMap } from "utils/parser/eventStatusToPortuguese";
+import { Modal } from "../Modal";
 
 const ModalNotifications = () => {
   const { user } = useUser();
@@ -24,37 +23,39 @@ const ModalNotifications = () => {
   };
 
   return (
-    <Modal
+    <Modal.Root
       open={NOTIFICATIONS_MODAL}
       onOpenChange={() => closeModal(ModalActionTypes.NOTIFICATIONS_MODAL)}
     >
-      <div className="flex flex-col p-6 gap-12 m-auto ">
-        <h1 className=" self-start text-secondary-02 text-2xl font-bold">
-          Notificações
-        </h1>
-        <div className="flex flex-col gap-8 ">
-          {notifications?.length ? (
-            notifications
-              ?.slice(0, 5)
-              .map((notification) => (
-                <CardNotification
-                  key={notification.id}
-                  description={getTranslatedText(
-                    notification.data?.description
-                  )}
-                  name={notification.data?.title || ""}
-                  imgUrl={notification.data?.imageUrl || ""}
-                  alreadyViewed={notification.read}
-                />
-              ))
-          ) : (
-            <p className="text-secondary-02 text-xl font-bold">
-              Nenhuma notificação
-            </p>
-          )}
+      <Modal.Content>
+        <div className="m-auto flex flex-col gap-12 p-6 ">
+          <h1 className=" self-start text-2xl font-bold text-secondary-02">
+            Notificações
+          </h1>
+          <div className="flex flex-col gap-8 ">
+            {notifications?.length ? (
+              notifications
+                ?.slice(0, 5)
+                .map((notification) => (
+                  <CardNotification
+                    key={notification.id}
+                    description={getTranslatedText(
+                      notification.data?.description
+                    )}
+                    name={notification.data?.title || ""}
+                    imgUrl={notification.data?.imageUrl || ""}
+                    alreadyViewed={notification.read}
+                  />
+                ))
+            ) : (
+              <p className="text-xl font-bold text-secondary-02">
+                Nenhuma notificação
+              </p>
+            )}
+          </div>
         </div>
-      </div>
-    </Modal>
+      </Modal.Content>
+    </Modal.Root>
   );
 };
 
diff --git a/src/components/Modal/Modal.types.ts b/src/components/Modal/ModalRoot/Modal.types.ts
similarity index 65%
rename from src/components/Modal/Modal.types.ts
rename to src/components/Modal/ModalRoot/Modal.types.ts
index ede97c18..a8341b3b 100644
--- a/src/components/Modal/Modal.types.ts
+++ b/src/components/Modal/ModalRoot/Modal.types.ts
@@ -1,7 +1,8 @@
-export type ModalProps = {
+export type ModalRootProps = {
   openModalComponent?: React.ReactElement;
-  children: React.ReactNode;
   closeModalComponent?: React.ReactElement;
+  children?: React.ReactNode;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  text?: String;
 };
diff --git a/src/components/Modal/ModalRoot/ModalContent.tsx b/src/components/Modal/ModalRoot/ModalContent.tsx
new file mode 100644
index 00000000..0077fe73
--- /dev/null
+++ b/src/components/Modal/ModalRoot/ModalContent.tsx
@@ -0,0 +1,24 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import { ModalRootProps } from "./Modal.types";
+
+const ModalContent = ({ closeModalComponent, children }: ModalRootProps) => {
+  return (
+    <Dialog.Content className="text-center py-6 text-secondary-03 z-50 rounded-lg bg-scroll overflow-y-auto bg-neutral-01 dark:bg-secondary-02 fixed top-[50%] left-[50%] max-h-[90vh] w-auto translate-x-[-50%] translate-y-[-50%]  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] border border-neutral-02">
+      <Dialog.Close asChild>
+        <div>
+          <button
+            className="absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] items-center justify-center rounded-full dark:text-neutral-02"
+            aria-label="Close"
+          >
+            <Cross1Icon />
+          </button>
+          {closeModalComponent}
+        </div>
+      </Dialog.Close>
+      {children}
+    </Dialog.Content>
+  );
+};
+
+export default ModalContent;
diff --git a/src/components/Modal/ModalRoot/ModalContentAlert.tsx b/src/components/Modal/ModalRoot/ModalContentAlert.tsx
new file mode 100644
index 00000000..45266a71
--- /dev/null
+++ b/src/components/Modal/ModalRoot/ModalContentAlert.tsx
@@ -0,0 +1,26 @@
+import Button from "@components/Button";
+import * as Dialog from "@radix-ui/react-dialog";
+import { ModalRootProps } from "./Modal.types";
+
+const ModalContentAlert = ({ children }: ModalRootProps) => {
+  return (
+    <Dialog.Content className="fixed left-[50%] top-[50%] z-50 max-h-[90vh] w-auto translate-x-[-50%] translate-y-[-50%] overflow-y-auto rounded-lg bg-neutral-01 bg-scroll py-16 text-center text-secondary-03 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]  dark:bg-secondary-02 ">
+      <div className="flex w-[350px] flex-col items-center gap-7 max-xl:px-5 xs:w-[380px] sm:w-[600px] lg:px-20">
+        {children}
+        <div className="flex w-full gap-6">
+          <Button type="submit" variant="primary" size="small">
+            Sim, pode mudar
+          </Button>
+
+          <Dialog.Close asChild>
+            <Button type="button" variant="secondary" size="small">
+              Cancelar
+            </Button>
+          </Dialog.Close>
+        </div>
+      </div>
+    </Dialog.Content>
+  );
+};
+
+export default ModalContentAlert;
diff --git a/src/components/Modal/ModalRoot/ModalDescription.tsx b/src/components/Modal/ModalRoot/ModalDescription.tsx
new file mode 100644
index 00000000..7feb4ade
--- /dev/null
+++ b/src/components/Modal/ModalRoot/ModalDescription.tsx
@@ -0,0 +1,8 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { ModalRootProps } from "./Modal.types";
+
+const ModalDescription = ({ text }: ModalRootProps) => {
+  return <Dialog.Description className="text-base">{text}</Dialog.Description>;
+};
+
+export default ModalDescription;
diff --git a/src/components/Modal/ModalRoot/ModalRoot.tsx b/src/components/Modal/ModalRoot/ModalRoot.tsx
new file mode 100644
index 00000000..0f535d44
--- /dev/null
+++ b/src/components/Modal/ModalRoot/ModalRoot.tsx
@@ -0,0 +1,23 @@
+import Button from "@components/Button/Button";
+import * as Dialog from "@radix-ui/react-dialog";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import { ModalRootProps } from "./Modal.types";
+
+const ModalRoot = ({
+  openModalComponent,
+  children,
+  open,
+  onOpenChange,
+}: ModalRootProps) => {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Trigger asChild>{openModalComponent}</Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0" />
+        {children}
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default ModalRoot;
diff --git a/src/components/Modal/ModalRoot/ModalTitle.tsx b/src/components/Modal/ModalRoot/ModalTitle.tsx
new file mode 100644
index 00000000..d0953f16
--- /dev/null
+++ b/src/components/Modal/ModalRoot/ModalTitle.tsx
@@ -0,0 +1,12 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { ModalRootProps } from "./Modal.types";
+
+const ModalTitle = ({ text }: ModalRootProps) => {
+  return (
+    <Dialog.Title>
+      <h1 className="text-xl font-bold">{text}</h1>
+    </Dialog.Title>
+  );
+};
+
+export default ModalTitle;
diff --git a/src/components/Modal/ModalScheduleMentorship/ScheduleMentorhipModal.tsx b/src/components/Modal/ModalScheduleMentorship/ScheduleMentorhipModal.tsx
index 8f458b2c..9ae4ed79 100644
--- a/src/components/Modal/ModalScheduleMentorship/ScheduleMentorhipModal.tsx
+++ b/src/components/Modal/ModalScheduleMentorship/ScheduleMentorhipModal.tsx
@@ -1,4 +1,3 @@
-import Modal from "@components/Modal";
 import Calendar from "@components/Calendar/Calendar";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
@@ -18,6 +17,7 @@ import { TStepButtons } from "@components/Modal/ModalScheduleMentorship/Schedule
 import StepperSmall from "@components/Stepper/StepperSmall";
 import { useModal } from "contexts/ModalContext";
 import { ModalActionTypes } from "contexts/types";
+import { Modal } from "../Modal";
 
 const ScheduleMentorshipModal = () => {
   const { user } = useUser();
@@ -248,124 +248,131 @@ const ScheduleMentorshipModal = () => {
   }, [daySelected, daysAndTimes]);
 
   return (
-    <Modal open={SCHEDULE_MENTORSHIP_MODAL} onOpenChange={() => resetStates()}>
-      <div className="px-4 py-4 xs:px-4 sm:px-16 sm:py-12 flex flex-col justify-center items-center">
-        {currentStep === 1 && (
-          <>
-            <div className="rounded-lg flex w-full justify-center items-center">
-              <Image
-                src={mentor?.photoUrl || "/imgCard.png"}
-                alt="avatar profile"
-                width={98}
-                height={98}
-                className="rounded-lg"
-              />
-            </div>
-            {mentor ? (
-              <h2 className="text-2xl text-secondary-03 font-semibold mt-10">
-                Mentoria com {mentor.firstName} {mentor.lastName}
-              </h2>
-            ) : (
-              <h2 className="text-2xl text-secondary-03 font-semibold mt-10">
-                Carregando...
-              </h2>
-            )}
-            <p className="text-base text-gray-05 text-center max-w-md mt-4 mb-10">
-              Escolha um dia para visualizar os horários disponíveis para marcar
-              sua mentoria
-            </p>
-          </>
-        )}
-        <StepperSmall steps={[1, 2, 3]} currentStep={currentStep} />
-        {currentStep === 1 && (
-          <>
-            <div className="mt-10">
-              <Calendar
-                daySelected={daySelected}
-                selectedDate={selectedDate}
-                setDaySelected={setDaySelected}
-                setSelectedDate={setSelectedDate}
-                availableDays={availableDays}
-              />
-            </div>
-            <div className="w-full">
-              <h3 className="mb-6 mt-8 text-secondary-03">
-                Horários disponíveis
-              </h3>
-              <ul className="grid grid-cols-3 xs:grid-cols-6 gap-4 max-w-md place-items-center mx-auto">
-                {convertedDaysAndTimes?.map((time) => (
-                  <li key={time} className="text-secondary-03">
-                    <Chip
-                      className="cursor-pointer w-[56px]"
-                      size="small"
-                      onClick={() => setSelectedStartTime(time)}
-                      key={time}
-                      variant={
-                        selectedStartTime === time ? "secondary" : "chipCards"
-                      }
-                    >
-                      {time}
-                    </Chip>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </>
-        )}
-        {currentStep === 2 && (
-          <>
-            <div className="min-w-[280px]">
-              <hr className="text-gray-02 w-full mt-16" />
-              <h2 className="mt-16 font-bold text-2xl text-secondary-02">
-                Mentoria de 30 minutos
-              </h2>
-              <p className="mt-6 text-secondary-02">
-                <span className="font-bold text-secondary-02 dark:text-neutral-03">
-                  Horário:
-                </span>{" "}
-                {selectedStartTime.replace(":", "h")} até as{" "}
-                {selectedEndTime.replace(":", "h")}
-              </p>
-              <p className="mt-2 text-secondary-02">
-                <span className="font-bold">Data:</span>{" "}
-                {getDateNamePhrase(selectedDate || new Date())}
+    <Modal.Root
+      open={SCHEDULE_MENTORSHIP_MODAL}
+      onOpenChange={() => resetStates()}
+    >
+      <Modal.Content>
+        <div className="flex flex-col items-center justify-center px-4 py-4 xs:px-4 sm:px-16 sm:py-12">
+          {currentStep === 1 && (
+            <>
+              <div className="flex w-full items-center justify-center rounded-lg">
+                <Image
+                  src={mentor?.photoUrl || "/imgCard.png"}
+                  alt="avatar profile"
+                  width={98}
+                  height={98}
+                  className="rounded-lg"
+                />
+              </div>
+              {mentor ? (
+                <h2 className="mt-10 text-2xl font-semibold text-secondary-03">
+                  Mentoria com {mentor.firstName} {mentor.lastName}
+                </h2>
+              ) : (
+                <h2 className="mt-10 text-2xl font-semibold text-secondary-03">
+                  Carregando...
+                </h2>
+              )}
+              <p className="mb-10 mt-4 max-w-md text-center text-base text-gray-05">
+                Escolha um dia para visualizar os horários disponíveis para
+                marcar sua mentoria
               </p>
-            </div>
-          </>
-        )}
-        {currentStep === 3 && (
-          <>
-            <div className="min-w-[280px]"></div>
-            <h2 className="font-bold text-3xl order-[-2] text-secondary-02">
-              Mentoria agendada!
-            </h2>
-            {mentor ? (
-              <p className="mt-2 mb-16 max-w-sm order-[-1] text-gray-03">
-                Sua mentoria foi agendada no seu calendário e do(a){" "}
-                {mentor.firstName} {mentor.lastName}
-              </p>
-            ) : (
-              <p className="mt-2 mb-16 max-w-sm order-[-1] text-gray-03">
-                Sua mentoria foi agendada no seu calendário e do(a){" "}
-                Carregando...
-              </p>
-            )}
-          </>
-        )}
-        <div className="mt-11 min-w-[183px]">
-          <Button
-            size="small"
-            type="button"
-            disabled={currentStep === 1 && (!daySelected || !selectedStartTime)}
-            variant={stepButtons[currentStep].variant}
-            onClick={handleSteps}
-            isLoading={loadingMentor || eventLoading}
-          >
-            {stepButtons[currentStep].text}
-          </Button>
+            </>
+          )}
+          <StepperSmall steps={[1, 2, 3]} currentStep={currentStep} />
+          {currentStep === 1 && (
+            <>
+              <div className="mt-10">
+                <Calendar
+                  daySelected={daySelected}
+                  selectedDate={selectedDate}
+                  setDaySelected={setDaySelected}
+                  setSelectedDate={setSelectedDate}
+                  availableDays={availableDays}
+                />
+              </div>
+              <div className="w-full">
+                <h3 className="mb-6 mt-8 text-secondary-03">
+                  Horários disponíveis
+                </h3>
+                <ul className="mx-auto grid max-w-md grid-cols-3 place-items-center gap-4 xs:grid-cols-6">
+                  {convertedDaysAndTimes?.map((time) => (
+                    <li key={time} className="text-secondary-03">
+                      <Chip
+                        className="w-[56px] cursor-pointer"
+                        size="small"
+                        onClick={() => setSelectedStartTime(time)}
+                        key={time}
+                        variant={
+                          selectedStartTime === time ? "secondary" : "chipCards"
+                        }
+                      >
+                        {time}
+                      </Chip>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </>
+          )}
+          {currentStep === 2 && (
+            <>
+              <div className="min-w-[280px]">
+                <hr className="mt-16 w-full text-gray-02" />
+                <h2 className="mt-16 text-2xl font-bold text-secondary-02">
+                  Mentoria de 30 minutos
+                </h2>
+                <p className="mt-6 text-secondary-02">
+                  <span className="font-bold text-secondary-02 dark:text-neutral-03">
+                    Horário:
+                  </span>{" "}
+                  {selectedStartTime.replace(":", "h")} até as{" "}
+                  {selectedEndTime.replace(":", "h")}
+                </p>
+                <p className="mt-2 text-secondary-02">
+                  <span className="font-bold">Data:</span>{" "}
+                  {getDateNamePhrase(selectedDate || new Date())}
+                </p>
+              </div>
+            </>
+          )}
+          {currentStep === 3 && (
+            <>
+              <div className="min-w-[280px]"></div>
+              <h2 className="order-[-2] text-3xl font-bold text-secondary-02">
+                Mentoria agendada!
+              </h2>
+              {mentor ? (
+                <p className="order-[-1] mb-16 mt-2 max-w-sm text-gray-03">
+                  Sua mentoria foi agendada no seu calendário e do(a){" "}
+                  {mentor.firstName} {mentor.lastName}
+                </p>
+              ) : (
+                <p className="order-[-1] mb-16 mt-2 max-w-sm text-gray-03">
+                  Sua mentoria foi agendada no seu calendário e do(a){" "}
+                  Carregando...
+                </p>
+              )}
+            </>
+          )}
+          <div className="mt-11 min-w-[183px]">
+            <Button
+              size="small"
+              type="button"
+              disabled={
+                currentStep === 1 && (!daySelected || !selectedStartTime)
+              }
+              variant={stepButtons[currentStep].variant}
+              onClick={handleSteps}
+              isLoading={loadingMentor || eventLoading}
+            >
+              {stepButtons[currentStep].text}
+            </Button>
+          </div>
         </div>
-      </div>
-    </Modal>
+      </Modal.Content>
+    </Modal.Root>
   );
 };
 
diff --git a/src/components/Modal/ModalSettings/ModalSettings.tsx b/src/components/Modal/ModalSettings/ModalSettings.tsx
index 116be1d9..263bbbe5 100644
--- a/src/components/Modal/ModalSettings/ModalSettings.tsx
+++ b/src/components/Modal/ModalSettings/ModalSettings.tsx
@@ -7,7 +7,7 @@ import Select from "react-select";
 import { useMutation } from "@apollo/client";
 import { useUser } from "@hooks/useUser";
 import { useRouter } from "next/router";
-import { FormEvent, useState } from "react";
+import { FormEvent, SetStateAction, useState } from "react";
 import { toast } from "react-toastify";
 import Swal from "sweetalert2";
 import { GET_ME, GET_MENTORS } from "services/apollo/queries";
@@ -22,9 +22,9 @@ import clsx from "clsx";
 import { createStringRequirements } from "utils/regex";
 import { IUserSession } from "types/user.types";
 import { useModal } from "contexts/ModalContext";
-import Modal from "../Modal";
 import { ModalActionTypes } from "contexts/types";
-import Dropzone from "@components/Dropzone";
+import { Modal } from "../Modal";
+import Dropzone from "@components/Dropzone/Dropzone";
 
 const ModalSettings = () => {
   const [dataSucessChange, setDataSucessChange] = useState(false);
@@ -34,6 +34,7 @@ const ModalSettings = () => {
   const { theme } = useTheme();
   const { firstName, lastName, email, id } = user;
   const { openModal, closeModal, SETTINGS_MODAL } = useModal();
+  const [open, setClose] = useState(false);
 
   const router = useRouter();
   const [changePassword, { loading }] = useMutation(CHANGE_PASSWORD);
@@ -200,162 +201,164 @@ const ModalSettings = () => {
   }
 
   return (
-    <Modal
+    <Modal.Root
       open={SETTINGS_MODAL}
       onOpenChange={() => closeModal(ModalActionTypes.SETTINGS_MODAL)}
     >
-      <div className="flex flex-col min-w-[92vw] sm:min-w-[420px] md:min-w-[600px] lg:min-w-[920px] 2xl:min-w-[1100px] min-h-[80vh] p-2 sm:p-10 lg:p-20">
-        <h1 className="self-center mb-4 sm:mb-0 lg:self-start text-secondary-02 text-2xl font-bold lg:mb-16">
-          Configurações
-        </h1>
-        {dataSucessChange ? (
-          <div className=" px-16">
-            <main className="flex flex-col items-center">
-              <div className="flex flex-col gap-6 items-center border-b border-b-gray-01 pb-16 ">
-                <h1 className="text-secondary-02 text-5xl text-center">
-                  Seus dados foram alterados com sucesso!!!
-                </h1>
-              </div>
-              <div className="flex flex-col py-16">
-                <strong className="text-secondary-02 dark:text-gray-01">
-                  {firstName}.
-                </strong>
-                <span className="text-center text-success-01 dark:text-success-02">
-                  Seus dados foram alterados com sucesso
-                </span>
-              </div>
-            </main>
-          </div>
-        ) : (
-          <div className="flex flex-col lg:flex lg:flex-row">
-            <StepperVertical
-              setCurrentStep={setCurretStep}
-              steps={["Perfil", "Sistema", "Segurança"]}
-              currentStep={currentStep}
-              className="text-start"
-              clickable
-            />
-            {currentStep === 1 && (
-              <div className="flex flex-col lg:flex lg:flex-row justify-center lg:min-w-[504px] transition-all duration-700 min-h-[480px] ">
-                <div className="flex flex-col justify-center items-center sm:justify-start  m-auto lg:m-0 lg:flex lg:flex-col lg:mr-10">
-                  <Image
-                    src={user.photoUrl || "/imgCard.png"}
-                    alt=""
-                    width={136}
-                    height={136}
-                    className="rounded-lg"
-                  />
-                  <Dropzone />
+      <Modal.Content>
+        <div className="flex min-h-[80vh] min-w-[92vw] flex-col p-2 sm:min-w-[420px] sm:p-10 md:min-w-[600px] lg:min-w-[920px] lg:p-20 2xl:min-w-[1100px]">
+          <h1 className="mb-4 self-center text-2xl font-bold text-secondary-02 sm:mb-0 lg:mb-16 lg:self-start">
+            Configurações
+          </h1>
+          {dataSucessChange ? (
+            <div className=" px-16">
+              <main className="flex flex-col items-center">
+                <div className="flex flex-col items-center gap-6 border-b border-b-gray-01 pb-16 ">
+                  <h1 className="text-center text-5xl text-secondary-02">
+                    Seus dados foram alterados com sucesso!!!
+                  </h1>
                 </div>
-                <form
-                  className="flex flex-col m-auto lg:m-0 px-2 lg:p-0 text-start w-full max-w-[328px] "
-                  onSubmit={handleUpdateUserData}
-                >
-                  <div className="flex flex-col gap-6">
-                    <Input
-                      name="firstName"
-                      label="Nome"
-                      defaultValue={firstName}
-                    />
-                    <Input
-                      name="lastName"
-                      label="Sobrenome"
-                      defaultValue={lastName ?? ""}
-                    />
-                    <Input
-                      name="email"
-                      type="email"
-                      label="Email"
-                      defaultValue={email}
-                    />
-                  </div>
-                  <Button type="submit" variant="secondary" className="mt-10">
-                    Salvar alterações
-                  </Button>
-                </form>
-              </div>
-            )}
-            {currentStep === 2 && (
-              <div className="flex flex-col items-end sm:min-w-[340px] gap-[80px] px-2 mt-8 lg:mt-0 min-h-[480px] ">
-                <div className="flex flex-col gap-6  w-full  m-auto sm:m-0">
-                  <div className="text-start">
-                    <label className=" text-secondary-03 font-bold">
-                      Tipo de perfil
-                    </label>
-                    <Select
-                      options={optionsPerfilAfterLogin}
-                      defaultValue={
-                        user.isMentor ? optionsPerfil[0] : optionsPerfil[1]
-                      }
-                      // value={selectedChangeProfile}
-                      onChange={(option) =>
-                        handleSelectedProfile(option?.value)
-                      }
-                      unstyled
-                      classNames={{
-                        option: ({ isSelected }) =>
-                          `py-2 px-2 rounded-md cursor-pointer text-gray-05 hover:bg-primary-01 hover:text-neutral-01 dark:text-neutral-05 dark:hover:text-neutral-01 dark:hover:bg-primary-02`,
-                        control: (state) =>
-                          `bg-neutral-03 hover:bg-neutral-01 hover:cursor-pointer rounded-md p-4 dark:bg-secondary-03 dark:text-neutral-01 border border-gray-03 mt-2 mb-2 sm:min-w-[180px]`,
-                        menu: (state) =>
-                          `p-4 bg-neutral-01 mt-2 rounded-md border border-gray-03 dark:bg-secondary-01`,
-                      }}
-                    />
-                  </div>
+                <div className="flex flex-col py-16">
+                  <strong className="text-secondary-02 dark:text-gray-01">
+                    {firstName}.
+                  </strong>
+                  <span className="text-center text-success-01 dark:text-success-02">
+                    Seus dados foram alterados com sucesso
+                  </span>
                 </div>
-                <Button
-                  className={clsx(currentStep === 2 && "hidden")}
-                  variant="secondary"
-                >
-                  Salvar alterações
-                </Button>
-              </div>
-            )}
-            {currentStep === 3 && (
-              <div className="flex gap-10 sm:min-w-[328px] justify-center min-h-[480px] ">
-                <form
-                  className="flex flex-col text-start w-full"
-                  onSubmit={handleChangePassword}
-                >
-                  <div className="flex flex-col gap-6 mt-8 lg:mt-0">
-                    <Input
-                      type="password"
-                      name="newPassword"
-                      label="Senha"
-                      pattern={passwordRequirements.toString().slice(1, -1)}
-                      placeholder="**************"
-                    />
-                    <Input
-                      type="password"
-                      name="newPasswordConfirm"
-                      label="Confirmar senha"
-                      pattern={passwordRequirements.toString().slice(1, -1)}
-                      placeholder="**************"
+              </main>
+            </div>
+          ) : (
+            <div className="flex flex-col lg:flex lg:flex-row">
+              <StepperVertical
+                setCurrentStep={setCurretStep}
+                steps={["Perfil", "Sistema", "Segurança"]}
+                currentStep={currentStep}
+                className="text-start"
+                clickable
+              />
+              {currentStep === 1 && (
+                <div className="flex min-h-[480px] flex-col justify-center transition-all duration-700 lg:flex lg:min-w-[504px] lg:flex-row ">
+                  <div className="m-auto flex flex-col items-center justify-center  sm:justify-start lg:m-0 lg:mr-10 lg:flex lg:flex-col">
+                    <Image
+                      src={user.photoUrl || "/imgCard.png"}
+                      alt=""
+                      width={136}
+                      height={136}
+                      className="rounded-lg"
                     />
+                    <Dropzone />
+                  </div>
+                  <form
+                    className="m-auto flex w-full max-w-[328px] flex-col px-2 text-start lg:m-0 lg:p-0 "
+                    onSubmit={handleUpdateUserData}
+                  >
                     <div className="flex flex-col gap-6">
-                      <button
-                        type="button"
-                        className="text-primary-03 self-start "
-                        onClick={handleDeleteAccount}
-                      >
-                        Deletar conta
-                      </button>
+                      <Input
+                        name="firstName"
+                        label="Nome"
+                        defaultValue={firstName}
+                      />
+                      <Input
+                        name="lastName"
+                        label="Sobrenome"
+                        defaultValue={lastName ?? ""}
+                      />
+                      <Input
+                        name="email"
+                        type="email"
+                        label="Email"
+                        defaultValue={email}
+                      />
                     </div>
-                    <Button
-                      type="submit"
-                      variant="secondary"
-                      isLoading={loading}
-                    >
+                    <Button type="submit" variant="secondary" className="mt-10">
                       Salvar alterações
                     </Button>
+                  </form>
+                </div>
+              )}
+              {currentStep === 2 && (
+                <div className="mt-8 flex min-h-[480px] flex-col items-end gap-[80px] px-2 sm:min-w-[340px] lg:mt-0 ">
+                  <div className="m-auto flex w-full  flex-col  gap-6 sm:m-0">
+                    <div className="text-start">
+                      <label className=" font-bold text-secondary-03">
+                        Tipo de perfil
+                      </label>
+                      <Select
+                        options={optionsPerfilAfterLogin}
+                        defaultValue={
+                          user.isMentor ? optionsPerfil[0] : optionsPerfil[1]
+                        }
+                        // value={selectedChangeProfile}
+                        onChange={(option) =>
+                          handleSelectedProfile(option?.value)
+                        }
+                        unstyled
+                        classNames={{
+                          option: ({ isSelected }) =>
+                            `py-2 px-2 rounded-md cursor-pointer text-gray-05 hover:bg-primary-01 hover:text-neutral-01 dark:text-neutral-05 dark:hover:text-neutral-01 dark:hover:bg-primary-02`,
+                          control: (state) =>
+                            `bg-neutral-03 hover:bg-neutral-01 hover:cursor-pointer rounded-md p-4 dark:bg-secondary-03 dark:text-neutral-01 border border-gray-03 mt-2 mb-2 sm:min-w-[180px]`,
+                          menu: (state) =>
+                            `p-4 bg-neutral-01 mt-2 rounded-md border border-gray-03 dark:bg-secondary-01`,
+                        }}
+                      />
+                    </div>
                   </div>
-                </form>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </Modal>
+                  <Button
+                    className={clsx(currentStep === 2 && "hidden")}
+                    variant="secondary"
+                  >
+                    Salvar alterações
+                  </Button>
+                </div>
+              )}
+              {currentStep === 3 && (
+                <div className="flex min-h-[480px] justify-center gap-10 sm:min-w-[328px] ">
+                  <form
+                    className="flex w-full flex-col text-start"
+                    onSubmit={handleChangePassword}
+                  >
+                    <div className="mt-8 flex flex-col gap-6 lg:mt-0">
+                      <Input
+                        type="password"
+                        name="newPassword"
+                        label="Senha"
+                        pattern={passwordRequirements.toString().slice(1, -1)}
+                        placeholder="**************"
+                      />
+                      <Input
+                        type="password"
+                        name="newPasswordConfirm"
+                        label="Confirmar senha"
+                        pattern={passwordRequirements.toString().slice(1, -1)}
+                        placeholder="**************"
+                      />
+                      <div className="flex flex-col gap-6">
+                        <button
+                          type="button"
+                          className="self-start text-primary-03 "
+                          onClick={handleDeleteAccount}
+                        >
+                          Deletar conta
+                        </button>
+                      </div>
+                      <Button
+                        type="submit"
+                        variant="secondary"
+                        isLoading={loading}
+                      >
+                        Salvar alterações
+                      </Button>
+                    </div>
+                  </form>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </Modal.Content>
+    </Modal.Root>
   );
 };
 
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
deleted file mode 100644
index ed4dd80e..00000000
--- a/src/components/Modal/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./Modal";
-export type { ModalProps } from "./Modal.types";
diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx
index 0bfb76e3..dda40226 100644
--- a/src/contexts/ModalContext.tsx
+++ b/src/contexts/ModalContext.tsx
@@ -1,9 +1,13 @@
-import ModalSettings from "@components/Modal/ModalSettings";
-import React, { createContext, useContext, useState, ReactNode } from "react";
 import ModalNotifications from "@components/Modal/ModalNotifications";
-import { ModalActionTypes, ModalContextType, ModalState } from "./types";
 import ScheduleMentorshipModal from "@components/Modal/ModalScheduleMentorship";
 import EditProfileModal from "@components/Modal/EditProfile/EditProfileModal";
+import { ModalActionTypes, ModalContextType, ModalState } from "./types";
+import { ReactNode, createContext, useContext, useState } from "react";
+import ModalSettings from "@components/Modal/ModalSettings";
+import ModalAlert from "@components/Modal/ModalAlert";
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import { Cross1Icon } from "@radix-ui/react-icons";
+
 
 const ModalContext = createContext<ModalContextType | undefined>(undefined);
 
@@ -16,6 +20,7 @@ export const ModalProvider: React.FC<{ children: ReactNode }> = ({
     [ModalActionTypes.SETTINGS_MODAL]: false,
     [ModalActionTypes.NOTIFICATIONS_MODAL]: false,
     [ModalActionTypes.SCHEDULE_MENTORSHIP_MODAL]: false,
+    [ModalActionTypes.ALERT_MODAL]: false,
   });
 
   const openModal = (modalName: string) => {
@@ -45,7 +50,9 @@ export const ModalProvider: React.FC<{ children: ReactNode }> = ({
       <ScheduleMentorshipModal />
       <ModalSettings />
       <ModalNotifications />
+      <ModalAlert />
       <EditProfileModal />
+      <ModalAlert />
     </ModalContext.Provider>
   );
 };
diff --git a/src/contexts/types.ts b/src/contexts/types.ts
index 59e65412..f420a66e 100644
--- a/src/contexts/types.ts
+++ b/src/contexts/types.ts
@@ -3,6 +3,7 @@ export enum ModalActionTypes {
   SETTINGS_MODAL = "SETTINGS_MODAL",
   NOTIFICATIONS_MODAL = "NOTIFICATIONS_MODAL",
   SCHEDULE_MENTORSHIP_MODAL = "SCHEDULE_MENTORSHIP_MODAL",
+  ALERT_MODAL = "ALERT_MODAL",
 }
 
 export type ModalState = {
@@ -10,6 +11,7 @@ export type ModalState = {
   [ModalActionTypes.SETTINGS_MODAL]: boolean;
   [ModalActionTypes.NOTIFICATIONS_MODAL]: boolean;
   [ModalActionTypes.SCHEDULE_MENTORSHIP_MODAL]: boolean;
+  [ModalActionTypes.ALERT_MODAL]: boolean;
 };
 
 export type ModalActions = {
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 89377d50..1275c012 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -1,23 +1,24 @@
 import Button from "@components/Button";
 import Chip from "@components/Chip";
 import DashboardCardProfile from "@components/DashboardCardProfile";
+import { InfoCard } from "@components/InfoCard";
 import { MentorModalAvailability } from "@components/MentorModalAvailability/MentorModalAvailability";
 import MentoringWeekCard from "@components/MentoringWeekCard/MentoringWeekCard";
 import { renderMentoringWeekCard } from "@components/MentoringWeekCard/renderMentoringWeekCards";
 import Spinner from "@components/Spinner";
 import { useMentorProfile } from "@hooks/useMentorProfile";
+import { useTypedQuery } from "@hooks/useTypedQuery";
 import { useUser } from "@hooks/useUser";
 import { NextPage } from "next";
-import { useEffect, useState } from "react";
-import { groupEventsByDay } from "utils/dashboard-helpers";
-import { validateUndefined } from "utils/nullable/validateUndefined";
-import { InfoCard } from "@components/InfoCard";
 import { useRouter } from "next/router";
-import { useTypedQuery } from "@hooks/useTypedQuery";
+import { useEffect, useState } from "react";
 import { queriesIndex as api } from "services/apollo/queries/queries.index";
 import { IGroupEventsByDay } from "types/dashboard.types";
 import { useModal } from "contexts/ModalContext";
 import { ModalActionTypes } from "contexts/types";
+import { groupEventsByDay } from "utils/dashboard-helpers";
+import { validateUndefined } from "utils/nullable/validateUndefined";
+
 
 const Profile: NextPage = () => {
   const [openModalAvailability, setOpenModalAvailability] = useState(false);
@@ -71,7 +72,7 @@ const Profile: NextPage = () => {
   if (loadingMentor || loadingClasses)
     return (
       <>
-        <div className="min-h-screen flex justify-center items-center">
+        <div className="flex min-h-screen items-center justify-center">
           <Spinner />
         </div>
       </>
@@ -83,8 +84,8 @@ const Profile: NextPage = () => {
   return (
     <>
       <header>
-        <section className="bg-header-dashboard min-h-[200px] bg-no-repeat bg-cover flex justify-center items-center">
-          <div className="flex justify-start container ">
+        <section className="flex min-h-[200px] items-center justify-center bg-header-dashboard bg-cover bg-no-repeat">
+          <div className="container flex justify-start ">
             <DashboardCardProfile
               avatarUrl={user.photoUrl || "/imgCard.png"}
               job={user.jobTitle || ""}
@@ -94,27 +95,27 @@ const Profile: NextPage = () => {
           </div>
         </section>
       </header>
-      <main className="grid grid-cols-1 md:grid-cols-2 container min-h-screen mb-28 mt-12">
+      <main className="container mb-28 mt-12 grid min-h-screen grid-cols-1 md:grid-cols-2">
         <aside>
-          <h2 className="text-2xl font-bold leading-normal mb-4 text-secondary-02">
+          <h2 className="mb-4 text-2xl font-bold leading-normal text-secondary-02">
             Sobre mim
           </h2>
           <p
-            className={`text-base w-full ${
+            className={`w-full text-base ${
               user.biography
-                ? "text-secondary-05 overflow-hidden break-words"
+                ? "overflow-hidden break-words text-secondary-05"
                 : "text-gray-05"
             }`}
           >
             {user.biography || "Complete seu sobre mim"}
           </p>
-          <h2 className="text-2xl font-bold leading-normal mb-4 text-secondary-02 mt-12">
+          <h2 className="mb-4 mt-12 text-2xl font-bold leading-normal text-secondary-02">
             Experiência profissional
           </h2>
           <p
-            className={`text-base w-full mb-12 ${
+            className={`mb-12 w-full text-base ${
               user.description
-                ? "text-secondary-05 overflow-hidden break-words"
+                ? "overflow-hidden break-words text-secondary-05"
                 : "text-gray-05"
             }`}
           >
@@ -122,7 +123,7 @@ const Profile: NextPage = () => {
               ? user.description
               : "Escreva suas principais experiências profissionais"}
           </p>
-          <section className="text-start pt-12 pb-12 flex flex-col lg:flex-row flex-wrap gap-y-8 border-gray-03 border-t border-solid">
+          <section className="flex flex-col flex-wrap gap-y-8 border-t border-solid border-gray-03 pb-12 pt-12 text-start lg:flex-row">
             <InfoCard
               title="Portfólio/GitHub"
               label="Não informado"
@@ -165,14 +166,14 @@ const Profile: NextPage = () => {
             />
           </section>
         </aside>
-        <aside className="flex justify-center md:justify-end md:items-start">
+        <aside className="flex justify-center md:items-start md:justify-end">
           <div className="max-w-[290px]">
-            <h2 className="text-2xl font-bold mb-12 text-secondary-02 text-center sm:text-start ">
+            <h2 className="mb-12 text-center text-2xl font-bold text-secondary-02 sm:text-start ">
               Agenda {user.isMentor ? "do Mentor" : "de Mentorias"}
             </h2>
             {user.isMentor &&
               (mentor?.availability?.length ? (
-                <div className="w-[290px] m-auto">
+                <div className="m-auto w-[290px]">
                   <div className="flex flex-col gap-4">
                     {mentor.availability.map((availability, index) => {
                       return (
@@ -191,7 +192,7 @@ const Profile: NextPage = () => {
                   </div>
                 </div>
               ) : (
-                <div className="max-w-xs border border-gray-03 flex justify-center items-center w-full h-[136px] rounded-lg">
+                <div className="flex h-[136px] w-full max-w-xs items-center justify-center rounded-lg border border-gray-03">
                   <p className="text-center text-gray-03">
                     Não possui nenhuma mentoria agendada
                   </p>
@@ -202,7 +203,7 @@ const Profile: NextPage = () => {
                 {classes.findEvents.length && !loadingMentor ? (
                   renderMentoringWeekCard(eventsByDay)
                 ) : (
-                  <div className="max-w-xs border border-gray-03 flex justify-center items-center w-full h-[136px] rounded-lg">
+                  <div className="flex h-[136px] w-full max-w-xs items-center justify-center rounded-lg border border-gray-03">
                     <p className="text-center text-gray-03">
                       Não possui nenhuma mentoria agendada
                     </p>
@@ -215,7 +216,7 @@ const Profile: NextPage = () => {
               setOpen={setOpenModalAvailability}
               refetchMentorProfile={refetchMentor}
             />
-            <div className="max-w-[300px] m-auto">
+            <div className="m-auto max-w-[300px]">
               {user.isMentor && (
                 <Button
                   className="mt-12"
diff --git a/src/pages/request-change-password.tsx b/src/pages/request-change-password.tsx
index 354f778a..297cf8ba 100644
--- a/src/pages/request-change-password.tsx
+++ b/src/pages/request-change-password.tsx
@@ -6,7 +6,6 @@ import { SEND_RESET_PASSWORD } from "services/apollo/mutations";
 import { FormEvent, useState } from "react";
 import { toast } from "react-toastify";
 import { useRouter } from "next/router";
-import Modal from "@components/Modal";
 
 function ChangePassword() {
   const [open, setOpen] = useState<boolean>(false);
@@ -33,25 +32,25 @@ function ChangePassword() {
     }
   };
   return (
-    <main className="grid grid-cols-1 md:grid-cols-[395px,1fr] lg:grid-cols-[495px,1fr] xl:grid-cols-[595px,1fr] min-h-screen">
+    <main className="grid min-h-screen grid-cols-1 md:grid-cols-[395px,1fr] lg:grid-cols-[495px,1fr] xl:grid-cols-[595px,1fr]">
       <div className="bg-gradient-to-r from-primary-04 to-primary-02 dark:from-primary-04 dark:to-primary-05">
         <Image
           alt="Mentor Cycle Logo"
           src={"/logo.png"}
           width={96}
           height={88}
-          className="relative mx-auto mt-22 md:ml-14 md:mb-64 lg:ml-24 xl:ml-40"
+          className="relative mx-auto mt-22 md:mb-64 md:ml-14 lg:ml-24 xl:ml-40"
         />
-        <div className="flex flex-col justify-center max-w-[357px] m-auto md:mt-64">
-          <h2 className="text-neutral-01 text-3xl font-bold text-center sm:text-4.5xl sm:leading-11 md:text-left md:pr-5 md:ml-8 lg:ml-9">
+        <div className="m-auto flex max-w-[357px] flex-col justify-center md:mt-64">
+          <h2 className="text-center text-3xl font-bold text-neutral-01 sm:text-4.5xl sm:leading-11 md:ml-8 md:pr-5 md:text-left lg:ml-9">
             Comece o seu aprendizado por aqui!
           </h2>
-          <p className="text-neutral-01 mt-5 text-sm sm:text-base text-center md:text-left md:mt-4 md:pr-4 md:ml-9 p-2 sm:p-0">
+          <p className="mt-5 p-2 text-center text-sm text-neutral-01 sm:p-0 sm:text-base md:ml-9 md:mt-4 md:pr-4 md:text-left">
             Tire suas dúvidas de forma rápida e prática. Construa seu futuro sem
             dúvidas.
           </p>
         </div>
-        <div className="absolute hidden md:block md:bottom-20 sm:pl-80 sm:left-6 lg:pl-96 lg:left-[60px] xl:left-40">
+        <div className="absolute hidden sm:left-6 sm:pl-80 md:bottom-20 md:block lg:left-[60px] lg:pl-96 xl:left-40">
           <Image
             alt="logo mentor cycle -circle"
             src={"/circle.png"}
@@ -62,18 +61,18 @@ function ChangePassword() {
         </div>
       </div>
       <div className="py-20 md:px-8">
-        <div className="sm:max-w-xl mx-auto px-4 sm:px-0 ">
-          <h1 className="mb-4 text-primary-05 text-4xl text-center sm:text-5xl md:text-left">
+        <div className="mx-auto px-4 sm:max-w-xl sm:px-0 ">
+          <h1 className="mb-4 text-center text-4xl text-primary-05 sm:text-5xl md:text-left">
             Alteração de senha
           </h1>
-          <p className="mt-2 text-center md:text-left max-w-[415px] text-gray-04 text-sm ">
+          <p className="mt-2 max-w-[415px] text-center text-sm text-gray-04 md:text-left ">
             Preencha o campo para alterar sua senha
           </p>
           <form
             onSubmit={handleSubmit}
-            className="flex flex-col max-w-[557px] mx-auto md:mx-0 3xl:max-w-[800px]"
+            className="mx-auto flex max-w-[557px] flex-col md:mx-0 3xl:max-w-[800px]"
           >
-            <div className="mt-8 mb-6">
+            <div className="mb-6 mt-8">
               <Input
                 name="email"
                 type="email"
diff --git a/yarn.lock b/yarn.lock
index 6c9c139f..9ffd69ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2210,6 +2210,19 @@
     "@radix-ui/react-primitive" "1.0.2"
     "@radix-ui/react-use-controllable-state" "1.0.0"
 
+"@radix-ui/react-alert-dialog@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.4.tgz#709d7625efadac503c6276d9e92d3449184f5e68"
+  integrity sha512-jbfBCRlKYlhbitueOAv7z74PXYeIQmWpKwm3jllsdkw7fGWNkxqP3v0nY9WmOzcPqpQuoorNtvViBgL46n5gVg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dialog" "1.0.4"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
 "@radix-ui/react-arrow@1.0.3":
   version "1.0.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz"
@@ -2298,6 +2311,27 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-dialog@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.4.tgz#06bce6c16bb93eb36d7a8589e665a20f4c1c52c1"
+  integrity sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.4"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.3"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-dialog@^1.0.3":
   version "1.0.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.3.tgz"