diff --git a/src/components/AffixButton/AffixButton.tsx b/src/components/AffixButton/AffixButton.tsx
index 08678d3a4..514dbb07a 100644
--- a/src/components/AffixButton/AffixButton.tsx
+++ b/src/components/AffixButton/AffixButton.tsx
@@ -1,7 +1,7 @@
-import { 
-    NoteAdd, 
-    AddCircle, 
-    AddOutlined, 
+import {
+    NoteAdd,
+    AddCircle,
+    AddOutlined,
     PersonAddAlt1Outlined,
     Source,
     Report
@@ -177,12 +177,21 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
                     ))}
             </div>
             <AletheiaModal
-                className="ant-modal-content"
                 open={isModalVisible}
-                footer={false}
                 onCancel={handleHideModal}
-                centered
-                title={t("tutorial:modalTitle")}
+                title={
+                    <h2
+                        style={{
+                            fontFamily: "open sans, sans-serif",
+                            fontWeight: 700,
+                            fontSize: 14,
+                            textAlign: "center",
+                            textTransform: "uppercase",
+                            padding: "0 34px"
+                        }}>
+                        {t("tutorial:modalTitle")}
+                    </h2>
+                }
             >
                 <p
                     style={{
@@ -197,7 +206,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
                         components={[<AddCircle style={{marginBottom:"-5px",fontSize:"18px"}} key={"icon"} />]}
                     />
                 </p>
-
+                
                 <div
                     style={{
                         marginTop: 24,
diff --git a/src/components/AffixButton/AffixCTAButton.tsx b/src/components/AffixButton/AffixCTAButton.tsx
index c957bd67c..8160c90c6 100644
--- a/src/components/AffixButton/AffixCTAButton.tsx
+++ b/src/components/AffixButton/AffixCTAButton.tsx
@@ -16,7 +16,7 @@ const CloseIcon = () => {
     return (
         <InfoTooltip
             children={
-                <CloseOutlined style={{ margin: "10px", color: colors.white }} />
+                <CloseOutlined style={{ margin: "10px", color: colors.white, position: "absolute", top: 5, right: 5 }} />
             }
             content={
                 <span style={{ color: colors.black, fontSize: 15 }}>
@@ -90,13 +90,28 @@ const AffixCTAButton = ({ copilotDrawerWidth }) => {
 
             <AletheiaModal
                 open={modalVisible}
-                footer={null}
-                title={t("NewCTARegistration:body")}
                 onCancel={() => setModalVisible(false)}
-                maskClosable={false}
                 theme="dark"
-                width={"75%"}
+                width={vw?.xs ? "100%" : "60%"}
                 closeIcon={<CloseIcon />}
+                style={{ alignSelf: "flex-start", paddingTop: "10vh" }}
+                title={
+                    <div style={{ display: "flex", justifyContent: "space-between" }}>
+                        <h2
+                            style={{
+                                color: colors.white,
+                                fontFamily: "open sans, sans-serif",
+                                fontWeight: 700,
+                                fontSize: 14,
+                                textAlign: "center",
+                                textTransform: "uppercase",
+                                padding: "0 30px",
+                            }}
+                        >
+                            {t("NewCTARegistration:body")}
+                        </h2>
+                    </div>
+                }
             >
                 <Banner />
             </AletheiaModal>
diff --git a/src/components/Form/ClassificationModal.tsx b/src/components/Form/ClassificationModal.tsx
index 3454b5828..d1a4b0143 100644
--- a/src/components/Form/ClassificationModal.tsx
+++ b/src/components/Form/ClassificationModal.tsx
@@ -32,14 +32,24 @@ const ClassificationModal = ({
     return (
         <AletheiaModal
             open={open}
-            footer={false}
             onCancel={handleCancel}
-            setValue={setValue}
-            title={t("claimReviewForm:classificationLabel")}
             style={{
                 display: "flex",
-                alingItens: "center",
+                alignItems: "center",
             }}
+            title={
+                <h2
+                    style={{
+                        fontFamily: "open sans, sans-serif",
+                        fontWeight: 700,
+                        fontSize: 14,
+                        textAlign: "center",
+                        textTransform: "uppercase",
+                    }}
+                >
+                    {t("claimReviewForm:classificationLabel")}
+                </h2>
+            }
         >
             <RadioGroup
                 onChange={onChangeRadio}
@@ -103,7 +113,7 @@ const ClassificationModal = ({
                 }}
             >
                 <ModalCancelButton
-                    type="text"
+                    type="button"
                     onClick={handleCancel}
                     style={{ width: "62%" }}
                 >
diff --git a/src/components/ImageUpload.tsx b/src/components/ImageUpload.tsx
index fdbdb8a7e..24731297b 100644
--- a/src/components/ImageUpload.tsx
+++ b/src/components/ImageUpload.tsx
@@ -115,10 +115,23 @@ const ImageUpload = ({
             )}
             <AletheiaModal
                 open={previewOpen}
-                title={previewTitle}
-                footer={null}
                 onCancel={handleCancel}
                 width={"fit-content"}
+                style={{ alignSelf: "flex-start", paddingTop: "10vh" }}
+                title={
+                    <h2
+                        style={{
+                            fontFamily: "open sans, sans-serif",
+                            fontWeight: 700,
+                            fontSize: 14,
+                            textAlign: "center",
+                            textTransform: "uppercase",
+                            padding: "0 34px",
+                        }}
+                    >
+                        {previewTitle}
+                    </h2>
+                }
             >
                 <img
                     alt={`preview uploaded file ${previewTitle}`}
diff --git a/src/components/Modal/AletheiaModal.style.tsx b/src/components/Modal/AletheiaModal.style.tsx
index 77686c895..5e106aa83 100644
--- a/src/components/Modal/AletheiaModal.style.tsx
+++ b/src/components/Modal/AletheiaModal.style.tsx
@@ -1,80 +1,126 @@
-import { Button, Modal } from "antd";
+import { Dialog, DialogTitle, DialogContent, IconButton, Button } from "@mui/material";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
 import styled from "styled-components";
 import colors from "../../styles/colors";
 import { NameSpaceEnum } from "../../types/Namespace";
 
-const AletheiaModal = styled(Modal)`
-    background: none;
-    box-shadow: none;
-    padding: 0;
+const DefaultModal = styled(Dialog)`
+  display: flex;
+  justify-content: center;
+  align-self: center;
 
-    .ant-modal-content {
-        width: ${(props) => (props.width ? props.width : "300px")};
-        margin: 0 auto;
-        border-radius: 8px;
-        background-color: ${(props) =>
-        props.theme === "dark" ? colors.black : colors.lightNeutral};
-        box-shadow: 0px 0px 15px ${colors.shadow};
-        padding: 26px 26px;
-        max-width: 90vw;
-    }
+  .MuiDialog-paper {
+    width: ${(props) => (props.width ? props.width : "300px")};
+    margin: 0 auto;
+    border-radius: 8px;
+    background-color: ${(props) =>
+    props.theme === "dark" ? colors.black : colors.lightNeutral};
+    box-shadow: 0px 0px 15px ${colors.shadow};
+    padding: 24px;
+    max-width: 90vw;
+  }
 
-    .ant-modal-body {
-        padding: 0;
-    }
+  .MuiDialogTitle-root {
+    color: ${(props) => props.theme === "dark" ? colors.white : colors.black};
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 12;
+    padding: 0;
+  }
 
-    .ant-modal-header {
-        background: none;
-        border-bottom: 0px;
-        padding: 0 0 10px 0;
-    }
+  .MuiDialogActions-root {
+    display: flex;
+    justify-content: center;
+    font-size: 24px;
+    line-height: 24px;
+    padding: 20px 0;
+  }
 
-    .ant-modal-title {
-        color: ${(props) =>
-        props.theme === "dark" ? colors.white : colors.black};
-        font-weight: 700;
-        font-size: 14px;
-        text-align: center;
-        text-transform: uppercase;
-        padding: 0 32px;
-    }
+  .MuiIconButton-root {
+    top: 10px;
+    right: 10px;
+    position: absolute;
+    color: ${(props) =>
+    props.theme === "dark" ? colors.white : colors.primary};
+  }
 
-    svg[data-icon="close"] {
-        margin-top: 26px;
-        width: 14px;
-        height: 14px;
-        color: ${(props) =>
-        props.theme === "dark" ? colors.white : colors.primary};
-        margin-right: 20px;
-    }
+  .MuiDialogContent-root {
+    font-size: 14px;
+    padding: 0;
+  }
 
-    .ant-modal-body .modal-title {
-        display: flex;
-        gap: 10px;
-        width: calc(100% - 20px);
-        font-size: 24px;
-        line-height: 24px;
-    }
+  .MuiButtonBase-root {
+    color: ${({ namespace }) =>
+    namespace === NameSpaceEnum.Main ? colors.primary : colors.secondary};
+    font-size: 14px;
+ }
 
-    .hide-modal {
-        color: ${colors.warning};
-    }
+  .hide-modal {
+    color: ${colors.warning};
+  }
 
-    .delete-modal {
-        color: #ca1105;
-    }
+  .delete-modal {
+    color: #ca1105;
+  }
 `;
 
 const ModalCancelButton = styled(Button)`
     height: 40px;
     width: 120px;
     color: ${({ namespace }) =>
-        namespace === NameSpaceEnum.Main
-            ? colors.primary
-            : colors.secondary};
+    namespace === NameSpaceEnum.Main
+      ? colors.primary
+      : colors.secondary};
     text-align: "center";
     font-weight: 700;
     font-size: 14;
 `;
 
+interface AletheiaModalProps {
+  open: boolean;
+  closeIcon?: React.ReactNode;
+  width?: string;
+  theme?: string;
+  namespace?: NameSpaceEnum;
+  onCancel?: () => void;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const AletheiaModal: React.FC<AletheiaModalProps> = ({
+  open,
+  closeIcon = true,
+  onCancel,
+  style = {},
+  title,
+  children,
+  width,
+  theme,
+  namespace
+}) => (
+  <DefaultModal
+    open={open}
+    onClose={onCancel}
+    width={width}
+    theme={theme}
+    namespace={namespace}
+    style={{ ...style }}
+  >
+    <DialogTitle>
+      {title}
+      {typeof closeIcon === 'boolean' ? (
+        <IconButton size="small" onClick={onCancel}>
+          <CloseOutlined />
+        </IconButton>
+      ) : (
+        <IconButton size="small" onClick={onCancel}>
+          {closeIcon}
+        </IconButton>
+      )}
+    </DialogTitle>
+    <DialogContent>{children}</DialogContent>
+  </DefaultModal>
+);
+
 export { AletheiaModal, ModalCancelButton };
diff --git a/src/components/Modal/ModalButtons.tsx b/src/components/Modal/ModalButtons.tsx
index 7d5e67294..be564ad58 100644
--- a/src/components/Modal/ModalButtons.tsx
+++ b/src/components/Modal/ModalButtons.tsx
@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import React from "react";
 import { ModalCancelButton } from "./AletheiaModal.style";
 import AletheiaButton, { ButtonType } from "../Button";
@@ -8,7 +8,7 @@ const ModalButtons = ({ isLoading, hasCaptcha, handleCancel = null }) => {
     const { t } = useTranslation();
 
     return (
-        <Col
+        <Grid item
             style={{
                 marginTop: 32,
                 display: "flex",
@@ -16,7 +16,7 @@ const ModalButtons = ({ isLoading, hasCaptcha, handleCancel = null }) => {
             }}
         >
             {handleCancel && (
-                <ModalCancelButton type="text" onClick={() => handleCancel()}>
+                <ModalCancelButton type="button" onClick={() => handleCancel()}>
                     <span
                         style={{
                             textDecorationLine: "underline",
@@ -35,7 +35,7 @@ const ModalButtons = ({ isLoading, hasCaptcha, handleCancel = null }) => {
             >
                 {t("orderModal:okButton")}
             </AletheiaButton>
-        </Col>
+        </Grid>
     );
 };
 
diff --git a/src/components/Modal/OrderModal.tsx b/src/components/Modal/OrderModal.tsx
index 4af125db2..42f4d3525 100644
--- a/src/components/Modal/OrderModal.tsx
+++ b/src/components/Modal/OrderModal.tsx
@@ -13,15 +13,26 @@ const OrderModal = ({ open, value, setValue, handleOk, handleCancel }) => {
 
     return (
         <AletheiaModal
-            className="ant-modal-content"
             open={open}
-            footer={false}
             namespace={nameSpace}
             onCancel={handleCancel}
-            title={t("orderModal:title")}
+            style={{ alignSelf: "flex-start", paddingTop: "10vh" }}
+            title={
+                <h2
+                    style={{
+                        fontFamily: "open sans, sans-serif",
+                        fontWeight: 700,
+                        fontSize: 14,
+                        textAlign: "center",
+                        textTransform: "uppercase",
+                    }}
+                >
+                    {t("orderModal:title")}
+                </h2>
+            }
         >
             <OrderRadio value={value} setValue={setValue} />
-
+            
             <div
                 style={{
                     marginTop: 30,
@@ -29,7 +40,7 @@ const OrderModal = ({ open, value, setValue, handleOk, handleCancel }) => {
                     justifyContent: "space-between",
                 }}
             >
-                <ModalCancelButton type="text" onClick={handleCancel}>
+                <ModalCancelButton type="button" onClick={handleCancel}>
                     <span
                         style={{
                             textDecorationLine: "underline",
diff --git a/src/components/Modal/ToolbarActionsModal.tsx b/src/components/Modal/ToolbarActionsModal.tsx
index a9a42e7e5..33562b347 100644
--- a/src/components/Modal/ToolbarActionsModal.tsx
+++ b/src/components/Modal/ToolbarActionsModal.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Form } from "antd";
 import { ErrorOutlineOutlined, WarningAmberOutlined} from "@mui/icons-material";
+import { Grid } from "@mui/material";
 import { AletheiaModal } from "./AletheiaModal.style";
 import AletheiaCaptcha from "../AletheiaCaptcha";
 import { useAppSelector } from "../../store/store";
@@ -31,64 +32,77 @@ const UnhideContentModal = ({
 
     return (
         <AletheiaModal
-            className="ant-modal-content"
             open={open}
-            footer={false}
             onCancel={handleCancel}
-            width={vw?.sm ? "100%" : "70%"}
+            width={vw?.xs || vw?.xl ? "100%" : "70%"}
+            style={{
+                alignSelf: "flex-start",
+                paddingTop: "10vh"
+            }}
+            title={
+                <Grid item xs={12}>
+                    <h2
+                        className={`${updatingHideStatus ? "hide-modal" : "delete-modal"
+                            }`}
+                        style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 10,
+                            fontSize: 24
+                        }}
+                    >
+                        {updatingHideStatus ? (
+                            <WarningAmberOutlined />
+                        ) : (
+                            <ErrorOutlineOutlined />
+                        )}
+                        {contentTitle}
+                    </h2>
+                    <p style={{ marginTop: 8 }}>{contentBody}</p>
+
+                </Grid>
+            }
         >
-            <h2
-                className={`modal-title ${
-                    updatingHideStatus ? "hide-modal" : "delete-modal"
-                }`}
-            >
-                {updatingHideStatus ? (
-                    <WarningAmberOutlined />
-                ) : (
-                    <ErrorOutlineOutlined />
-                )}
-                {contentTitle}
-            </h2>
-            <p style={{ marginTop: 8 }}>{contentBody}</p>
+            <Grid item xs={12}>
+                <Form
+                    style={{ marginTop: 16, justifyContent: "space-around" }}
+                    name="basic"
+                    onFinish={handleOk}
+                >
+                    {hasDescription && (
+                        <Form.Item
+                            name="description"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: t("claimReview:descriptionInputError"),
+                                },
+                            ]}
+                            style={{ marginBottom: 16 }}
+                        >
+                            <TextArea
+                                white="white"
+                                placeholder={t(
+                                    "claimReview:descriptionInputPlaceholder"
+                                )}
+                            />
+                        </Form.Item>
+                    )}
 
-            <Form
-                style={{ marginTop: 16, justifyContent: "space-around" }}
-                name="basic"
-                onFinish={handleOk}
-            >
-                {hasDescription && (
-                    <Form.Item
-                        name="description"
-                        rules={[
-                            {
-                                required: true,
-                                message: t("claimReview:descriptionInputError"),
-                            },
-                        ]}
-                        style={{ marginBottom: 16 }}
-                    >
-                        <TextArea
-                            white="white"
-                            placeholder={t(
-                                "claimReview:descriptionInputPlaceholder"
-                            )}
+                    <Form.Item name="recaptcha">
+                        <AletheiaCaptcha
+                            onChange={setRecaptcha}
+                            ref={recaptchaRef}
                         />
                     </Form.Item>
-                )}
 
-                <Form.Item name="recaptcha">
-                    <AletheiaCaptcha
-                        onChange={setRecaptcha}
-                        ref={recaptchaRef}
+                    <ModalButtons
+                        isLoading={isLoading}
+                        hasCaptcha={hasCaptcha}
+                        handleCancel={handleCancel}
                     />
-                </Form.Item>
-
-                <ModalButtons
-                    isLoading={isLoading}
-                    hasCaptcha={hasCaptcha}
-                    handleCancel={handleCancel}
-                />
-            </Form>
+                </Form>
+            </Grid>
         </AletheiaModal>
     );
 };
diff --git a/src/components/Modal/WarningModal.tsx b/src/components/Modal/WarningModal.tsx
index 85d56123f..511949000 100644
--- a/src/components/Modal/WarningModal.tsx
+++ b/src/components/Modal/WarningModal.tsx
@@ -12,36 +12,36 @@ const WarningModal = ({
     width,
     handleOk,
     handleCancel,
-    footer = false,
     ...props
 }) => {
     const { t } = useTranslation();
 
     return (
         <AletheiaModal
-            className="ant-modal-content"
             open={open}
-            footer={footer}
             onCancel={handleCancel}
             width={width}
             {...props}
+            style={{ alignSelf: "flex-start", paddingTop: "10vh" }}
+            title={
+                <Grid item style={{ display: "flex", marginTop: "-4px" }}>
+                    <ErrorOutlineOutlined
+                        style={{ fontSize: 26, color: colors.warning }}
+                    />
+                    <span
+                        style={{
+                            marginLeft: 10,
+                            paddingRight: 28,
+                            fontSize: 16,
+                            fontWeight: 600,
+                            lineHeight: "18px",
+                        }}
+                    >
+                        {t(title)}
+                    </span>
+                </Grid>
+            }
         >
-            <Grid item style={{ display: "flex", marginTop: "-4px" }}>
-                <ErrorOutlineOutlined
-                    style={{ fontSize: 26, color: colors.warning }}
-                />
-                <span
-                    style={{
-                        marginLeft: 10,
-                        paddingRight: 28,
-                        fontSize: 16,
-                        fontWeight: 600,
-                        lineHeight: "18px",
-                    }}
-                >
-                    {t(title)}
-                </span>
-            </Grid>
             <Grid item
                 style={{
                     marginTop: 16,
@@ -49,7 +49,7 @@ const WarningModal = ({
                     justifyContent: "space-around",
                 }}
             >
-                <ModalCancelButton type="text" onClick={() => handleCancel()}>
+                <ModalCancelButton type="button" onClick={() => handleCancel()}>
                     <span
                         style={{
                             width: "auto",
diff --git a/src/components/SentenceReport/Banner.style.tsx b/src/components/SentenceReport/Banner.style.tsx
index fb8fbc307..6efa12466 100644
--- a/src/components/SentenceReport/Banner.style.tsx
+++ b/src/components/SentenceReport/Banner.style.tsx
@@ -1,8 +1,8 @@
-import { Row } from "antd";
+import { Grid } from "@mui/material";
 import styled from "styled-components";
 import colors from "../../styles/colors";
 
-const BannerStyle = styled(Row)`
+const BannerStyle = styled(Grid)`
     justify-content: center;
     padding: 18px;
     background-color: ${colors.black};
diff --git a/src/components/SentenceReport/Banner.tsx b/src/components/SentenceReport/Banner.tsx
index d87623dfa..2d8f5f32d 100644
--- a/src/components/SentenceReport/Banner.tsx
+++ b/src/components/SentenceReport/Banner.tsx
@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import { trackUmamiEvent } from "../../lib/umami";
@@ -11,11 +11,11 @@ function Banner() {
     const { t } = useTranslation();
 
     return (
-        <BannerStyle>
-            <Col className="video-container">
+        <BannerStyle container>
+            <Grid item xs={11} sm={10} xl={7} className="video-container">
                 <AletheiaVideo />
-            </Col>
-            <Col span={20}>
+            </Grid>
+            <Grid item xs={10}>
                 <Button
                     onClick={() => {
                         trackUmamiEvent(
@@ -33,7 +33,7 @@ function Banner() {
                 >
                     <span>{t("CTARegistration:button")}</span>
                 </Button>
-            </Col>
+            </Grid>
         </BannerStyle>
     );
 }