diff --git a/src/components/AffixButton/AffixCTAButton.tsx b/src/components/AffixButton/AffixCTAButton.tsx
index 99ef12f6e..c957bd67c 100644
--- a/src/components/AffixButton/AffixCTAButton.tsx
+++ b/src/components/AffixButton/AffixCTAButton.tsx
@@ -6,7 +6,7 @@ import Banner from "../SentenceReport/Banner";
 import { useTranslation } from "next-i18next";
 import Cookies from "js-cookie";
 import CtaAnimation from "../CtaAnimation";
-import { Tooltip } from "antd";
+import InfoTooltip from "../Claim/InfoTooltip";
 import colors from "../../styles/colors";
 import { trackUmamiEvent } from "../../lib/umami";
 import { useAppSelector } from "../../store/store";
@@ -14,15 +14,16 @@ import { useAppSelector } from "../../store/store";
 const CloseIcon = () => {
     const { t } = useTranslation();
     return (
-        <Tooltip
-            title={t("affix:AffixCloseTooltip")}
-            placement="topRight"
-            defaultOpen
-            color={colors.white}
-            overlayInnerStyle={{ color: colors.black }}
-        >
-            <CloseOutlined style={{margin:"10px", color:colors.white}} />
-        </Tooltip>
+        <InfoTooltip
+            children={
+                <CloseOutlined style={{ margin: "10px", color: colors.white }} />
+            }
+            content={
+                <span style={{ color: colors.black, fontSize: 15 }}>
+                    {t("affix:AffixCloseTooltip")}
+                </span>
+            }
+        />
     );
 };
 
diff --git a/src/components/AffixButton/Fab.tsx b/src/components/AffixButton/Fab.tsx
index 5dea1fd30..b3ac1279c 100644
--- a/src/components/AffixButton/Fab.tsx
+++ b/src/components/AffixButton/Fab.tsx
@@ -1,4 +1,5 @@
-import { Button, ButtonProps, Tooltip } from "antd";
+import { ButtonProps, IconButton } from "@mui/material";
+import InfoTooltip from "../Claim/InfoTooltip";
 import React, { useLayoutEffect, useState } from "react";
 import colors from "../../styles/colors";
 import { NameSpaceEnum } from "../../types/Namespace";
@@ -18,28 +19,35 @@ const Fab = ({ tooltipText, style, icon, size, ...rest }: FabProps) => {
     useLayoutEffect(() => {
         setNameSpaceProp(nameSpace);
     }, [nameSpace]);
+
+    const TooltipBanner = (
+        <IconButton
+            style={{
+                background: colors.white,
+                color:
+                    nameSpaceProp === NameSpaceEnum.Main
+                        ? colors.primary
+                        : colors.secondary,
+                boxShadow: `0px 8px 24px ${colors.shadow}`,
+                display: "grid",
+                placeContent: "center",
+                width: size,
+                height: size,
+                ...style,
+            }}
+            {...rest}
+        >
+            {icon}
+        </IconButton>
+    );
+
     return (
-        <Tooltip placement="left" title={tooltipText}>
-            <Button
-                style={{
-                    background: colors.white,
-                    color:
-                        nameSpaceProp === NameSpaceEnum.Main
-                            ? colors.primary
-                            : colors.secondary,
-                    boxShadow: `0px 8px 24px ${colors.shadow}`,
-                    display: "grid",
-                    placeContent: "center",
-                    width: size,
-                    height: size,
-                    ...style,
-                }}
-                shape="circle"
-                type="link"
-                icon={icon}
-                {...rest}
-            />
-        </Tooltip>
+        <InfoTooltip
+            useCustomStyle={false}
+            placement="left"
+            children={TooltipBanner}
+            content={tooltipText}
+        />
     );
 };
 
diff --git a/src/components/AletheiaAvatar.tsx b/src/components/AletheiaAvatar.tsx
index 2e39abab1..a47cd4f88 100644
--- a/src/components/AletheiaAvatar.tsx
+++ b/src/components/AletheiaAvatar.tsx
@@ -1,4 +1,4 @@
-import { Avatar } from "antd";
+import { Avatar } from "@mui/material";
 import React from "react";
 import colors from "../styles/colors";
 
@@ -25,7 +25,7 @@ const AletheiaAvatar = ({ size, src, alt }: AletheiaAvatarProps) => {
                 aspectRatio: "1",
             }}
         >
-            <Avatar size={size} src={src} alt={alt} />
+            <Avatar sx={{width: size, height: size}} src={src} alt={alt} />
         </div>
     );
 };
diff --git a/src/components/Claim/ClaimSentence.tsx b/src/components/Claim/ClaimSentence.tsx
index 7f4338c6a..fd17fc451 100644
--- a/src/components/Claim/ClaimSentence.tsx
+++ b/src/components/Claim/ClaimSentence.tsx
@@ -4,7 +4,9 @@ import styled from "styled-components";
 import colors from "../../styles/colors";
 import actions from "../../store/actions";
 import { useDispatch } from "react-redux";
-import SentencePopover from "./SentencePopover";
+import InfoTooltip from "./InfoTooltip";
+import { InfoOutlined, SecurityOutlined } from "@mui/icons-material";
+import { useTranslation } from "react-i18next";
 
 const Sentence = styled.a`
     color: ${colors.primary};
@@ -25,6 +27,7 @@ const ClaimSentence = ({
     handleSentenceClick,
 }) => {
     let style = {};
+    const { t } = useTranslation();
     if (properties.classification && showHighlights) {
         style = {
             ...style,
@@ -37,6 +40,24 @@ const ClaimSentence = ({
         handleSentenceClick();
         dispatch(actions.openReviewDrawer());
     };
+
+    const tooltipContent = (
+        <span
+            style={{
+                color: colors.primary,
+                lineHeight: "20px",
+                fontSize: 14,
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                padding: 5
+            }}
+        >
+            <SecurityOutlined fontSize="small" />
+            {t("reviewTask:sentenceInfo")}
+        </span>
+    );
+
     return (
         <>
             <Sentence
@@ -59,7 +80,10 @@ const ClaimSentence = ({
                         padding: "0 4px 0 1px",
                     }}
                 >
-                    <SentencePopover />
+                    <InfoTooltip
+                        children={<InfoOutlined style={{ fontSize: "18px", color: colors.neutralSecondary }} />}
+                        content={tooltipContent}
+                    />
                 </sup>
             )}
         </>
diff --git a/src/components/Claim/ClaimView.tsx b/src/components/Claim/ClaimView.tsx
index 6b757df6f..3ae28d009 100644
--- a/src/components/Claim/ClaimView.tsx
+++ b/src/components/Claim/ClaimView.tsx
@@ -79,7 +79,7 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => {
                                 personality={personality}
                                 header={true}
                                 mobile={true}
-                                titleLevel={2}
+                                titleLevel="h2"
                             />
                         )}
                         <section>
diff --git a/src/components/Claim/InfoTooltip.tsx b/src/components/Claim/InfoTooltip.tsx
new file mode 100644
index 000000000..c10817fae
--- /dev/null
+++ b/src/components/Claim/InfoTooltip.tsx
@@ -0,0 +1,56 @@
+import { styled, Tooltip, tooltipClasses, TooltipProps } from "@mui/material";
+import React from "react";
+import colors from "../../styles/colors";
+
+type InfoTooltipProps = {
+    placement?: TooltipProps["placement"];
+    content: React.ReactNode;
+    children: React.ReactElement;
+    useCustomStyle?: boolean;
+};
+
+const DefaultTooltip = ({ className, ...props }: TooltipProps) => {
+    return (
+        <Tooltip {...props} arrow
+            title={
+                <span style={{ fontSize: 15 }}>
+                    {props.title}
+                </span>
+            }
+        >
+            {props.children}
+        </Tooltip>
+    );
+};
+
+const InfoTooltip: React.FC<InfoTooltipProps> = ({
+    placement = "top",
+    content,
+    children,
+    useCustomStyle = true,
+}) => {
+
+    const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+        <Tooltip {...props} arrow classes={{ popper: className }} />
+    ))(() => ({
+        [`& .${tooltipClasses.arrow}`]: {
+            color: colors.white,
+        },
+        [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: colors.white,
+            maxWidth: "100%",
+            boxShadow: `0px 0px 15px ${colors.shadow}`,
+        },
+    }));
+
+
+    const TooltipComponent = useCustomStyle ? CustomTooltip : DefaultTooltip;
+
+    return (
+        <TooltipComponent placement={placement} title={content}>
+            {children}
+        </TooltipComponent>
+    );
+};
+
+export default InfoTooltip;
diff --git a/src/components/Claim/Popover.tsx b/src/components/Claim/Popover.tsx
new file mode 100644
index 000000000..601855a4e
--- /dev/null
+++ b/src/components/Claim/Popover.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { IconButton, Popover, PopoverOrigin } from "@mui/material";
+
+interface PopoverClickProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    anchorOrigin?: PopoverOrigin;
+    transformOrigin?: PopoverOrigin;
+}
+
+const PopoverClick: React.FC<PopoverClickProps> = ({
+    children,
+    content,
+    anchorOrigin = { vertical: "bottom", horizontal: "center" },
+    transformOrigin = { vertical: "top", horizontal: "center" },
+}) => {
+    const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+    const open = Boolean(anchorEl);
+    const id = open ? "simple-popover" : undefined;
+
+    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <IconButton
+                aria-describedby={id}
+                onClick={handleClick}
+            >
+                {children}
+            </IconButton>
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={anchorOrigin}
+                transformOrigin={transformOrigin}
+            >
+                {content}
+            </Popover>
+        </>
+    );
+};
+
+export default PopoverClick;
diff --git a/src/components/Claim/SentencePopover.tsx b/src/components/Claim/SentencePopover.tsx
deleted file mode 100644
index 5edc76a93..000000000
--- a/src/components/Claim/SentencePopover.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { InfoOutlined, SecurityOutlined  } from "@mui/icons-material";
-import { Popover } from "antd";
-import React from "react";
-import colors from "../../styles/colors";
-import { useTranslation } from "next-i18next";
-
-const SentencePopover = () => {
-    const { t } = useTranslation();
-
-    const content = (
-        <span
-            style={{
-                color: colors.primary,
-                lineHeight: "20px",
-                fontSize: 14,
-                display: "flex",
-                alignItems: "center",
-                gap: 4,
-            }}
-        >
-            <SecurityOutlined fontSize="small" />
-            {t("reviewTask:sentenceInfo")}
-        </span>
-    );
-
-    return (
-        <Popover placement="top" content={content} trigger="hover">
-            <InfoOutlined style={{fontSize:"18px", color: colors.neutralSecondary }} />
-        </Popover>
-    );
-};
-
-export default SentencePopover;
diff --git a/src/components/Collaborative/Comment/CommentCardActions.tsx b/src/components/Collaborative/Comment/CommentCardActions.tsx
index 7c3bf51ae..d1b566c02 100644
--- a/src/components/Collaborative/Comment/CommentCardActions.tsx
+++ b/src/components/Collaborative/Comment/CommentCardActions.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import CheckIcon from "@mui/icons-material/Check";
 import CommentPopoverContent from "./CommentPopoverContent";
-import { Popover } from "antd";
+import PopoverClick from "../../Claim/Popover";
 import Button, { ButtonType } from "../../Button";
 import ReviewTaskApi from "../../../api/reviewTaskApi";
 import CommentApi from "../../../api/comment";
@@ -45,11 +45,11 @@ const CommentCardActions = ({ content, setIsResolved }) => {
                     comments.map((comment) =>
                         comment._id === content.targetId
                             ? {
-                                  ...comment,
-                                  replies: comment.replies.filter(
-                                      (reply) => reply._id !== content._id
-                                  ),
-                              }
+                                ...comment,
+                                replies: comment.replies.filter(
+                                    (reply) => reply._id !== content._id
+                                ),
+                            }
                             : comment
                     )
                 );
@@ -82,18 +82,16 @@ const CommentCardActions = ({ content, setIsResolved }) => {
             {role !== Roles.Regular &&
                 role !== Roles.FactChecker &&
                 isReviewing && (
-                    <Popover
-                        trigger="click"
-                        placement="bottom"
-                        overlayInnerStyle={{ padding: 0 }}
+                    <PopoverClick
+                        children={
+                            <MoreVertIcon style={{ cursor: "pointer" }} />
+                        }
                         content={
                             <CommentPopoverContent
                                 handleDeleteClick={handleDeleteClick}
                             />
                         }
-                    >
-                        <MoreVertIcon style={{ cursor: "pointer" }} />
-                    </Popover>
+                    />
                 )}
         </div>
     );
diff --git a/src/components/Collaborative/Comment/CommentPopoverContent.tsx b/src/components/Collaborative/Comment/CommentPopoverContent.tsx
index 5fa22a72d..359729802 100644
--- a/src/components/Collaborative/Comment/CommentPopoverContent.tsx
+++ b/src/components/Collaborative/Comment/CommentPopoverContent.tsx
@@ -15,7 +15,7 @@ const CommentPopoverContent = ({ handleDeleteClick }) => {
                     border: "none",
                     display: "flex",
                     justifyContent: "start",
-                    padding: 0,
+                    margin: "5px 0px",
                 }}
                 onClick={handleDeleteClick}
             >
diff --git a/src/components/Collaborative/Components/Source/EditorSourcePopover.tsx b/src/components/Collaborative/Components/Source/EditorSourcePopover.tsx
index 8e025f2ea..c3b777a71 100644
--- a/src/components/Collaborative/Components/Source/EditorSourcePopover.tsx
+++ b/src/components/Collaborative/Components/Source/EditorSourcePopover.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { Popover } from "antd";
+import PopoverClick from "../../../Claim/Popover";
 import EditorSourcePopoverContent from "./EditorSourcePopoverContent";
 import { useCommands } from "@remirror/react";
 import { VisualEditorContext } from "../../VisualEditorProvider";
@@ -118,10 +118,8 @@ const EditorSourcePopover = ({
     };
 
     return (
-        <Popover
-            trigger="click"
-            placement="bottom"
-            overlayInnerStyle={{ padding: 0 }}
+        <PopoverClick
+            children={children}
             content={
                 <EditorSourcePopoverContent
                     isArchive={isArchive}
@@ -129,9 +127,7 @@ const EditorSourcePopover = ({
                     handleDeleteClick={handleDeleteClick}
                 />
             }
-        >
-            {children}
-        </Popover>
+        />
     );
 };
 
diff --git a/src/components/Collaborative/Components/Source/EditorSourcePopoverContent.tsx b/src/components/Collaborative/Components/Source/EditorSourcePopoverContent.tsx
index 58a44fb73..ed70520e7 100644
--- a/src/components/Collaborative/Components/Source/EditorSourcePopoverContent.tsx
+++ b/src/components/Collaborative/Components/Source/EditorSourcePopoverContent.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Button, { ButtonType } from "../../../Button";
-import { Col, Tooltip } from "antd";
+import { Grid } from "@mui/material";
+import InfoTooltip from "../../../Claim/InfoTooltip";
 import ArchiveIcon from "@mui/icons-material/Archive";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { useTranslation } from "react-i18next";
@@ -11,29 +12,35 @@ const EditorSourcePopoverContent = ({
     handleDeleteClick,
 }) => {
     const { t } = useTranslation();
+
+    const ButtonTooltip = (
+        <span>
+            <Button
+                type={ButtonType.white}
+                onClick={handleArchiveClick}
+                style={{
+                    gap: 8,
+                    border: "none",
+                    display: "flex",
+                    justifyContent: "start",
+                    textDecoration: "underline",
+                    marginTop: 10,
+                }}
+            >
+                <ArchiveIcon />
+                Internet archive
+            </Button>
+        </span>
+    );
+
     return (
-        <Col className="source-card-popover-content">
+        <Grid item className="source-card-popover-content">
             {!isArchive && (
-                <Tooltip
-                    placement="top"
-                    title={t("sourceForm:intertArchiveTooltip")}
-                >
-                    <Button
-                        type={ButtonType.white}
-                        onClick={handleArchiveClick}
-                        style={{
-                            textDecoration: "underline",
-                            gap: 8,
-                            border: "none",
-                            display: "flex",
-                            justifyContent: "start",
-                            padding: 0,
-                        }}
-                    >
-                        <ArchiveIcon />
-                        Internet archive
-                    </Button>
-                </Tooltip>
+                <InfoTooltip
+                    useCustomStyle={false}
+                    children={ButtonTooltip}
+                    content={t("sourceForm:intertArchiveTooltip")}
+                />
             )}
             <Button
                 type={ButtonType.white}
@@ -43,14 +50,14 @@ const EditorSourcePopoverContent = ({
                     border: "none",
                     display: "flex",
                     justifyContent: "start",
-                    padding: 0,
+                    marginBottom: 10,
                 }}
                 onClick={handleDeleteClick}
             >
                 <DeleteIcon />
                 {t("sourceForm:deleteSourceButton")}
             </Button>
-        </Col>
+        </Grid>
     );
 };
 
diff --git a/src/components/Copilot/CopilotConversationCard.tsx b/src/components/Copilot/CopilotConversationCard.tsx
index f4a4157e0..36d5094d1 100644
--- a/src/components/Copilot/CopilotConversationCard.tsx
+++ b/src/components/Copilot/CopilotConversationCard.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from "antd";
+import { Avatar } from "@mui/material";
 import colors from "../../styles/colors";
 import CopilotConversationCardStyle from "./CopilotConversationCard.style";
 import { SenderEnum } from "../../types/enums";
@@ -20,7 +20,7 @@ const CopilotConversationCard = ({ message }) => {
                         style={{ borderRadius: 16 }}
                     />
                 ) : (
-                    <Avatar style={{ background: colors.quartiary }}>
+                    <Avatar style={{ background: colors.quartiary, width: 30, height: 30}}>
                         {SenderEnum.User.slice(0, 1).toUpperCase()}
                     </Avatar>
                 )}
diff --git a/src/components/Kanban/UserTag.tsx b/src/components/Kanban/UserTag.tsx
index f86d3fd7e..fa0d86398 100644
--- a/src/components/Kanban/UserTag.tsx
+++ b/src/components/Kanban/UserTag.tsx
@@ -1,4 +1,5 @@
-import { Avatar, Tooltip } from "antd";
+import { Avatar } from "@mui/material";
+import InfoTooltip from "../Claim/InfoTooltip";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import { useAtom } from "jotai";
@@ -16,17 +17,23 @@ const UserTag = ({ user }) => {
             : t("userTag:anonymousFactChecker");
     const firstLetter = userName[0];
     return (
-        <Tooltip title={userName} placement="top">
-            <Avatar
-                style={{
-                    backgroundColor: colors.secondary,
-                    verticalAlign: "middle",
-                }}
-                size="small"
-            >
-                {firstLetter}
-            </Avatar>
-        </Tooltip>
+        <InfoTooltip
+            useCustomStyle={false}
+            content={userName}
+            children={
+                <Avatar
+                    style={{
+                        backgroundColor: colors.secondary,
+                        verticalAlign: "middle",
+                        width: 24,
+                        height: 24,
+                        fontSize: 15
+                    }}
+                >
+                    {firstLetter}
+                </Avatar>
+            }
+        />
     );
 };
 
diff --git a/src/components/Personality/PersonalityCard.tsx b/src/components/Personality/PersonalityCard.tsx
index dcc0d25b8..1836c8615 100644
--- a/src/components/Personality/PersonalityCard.tsx
+++ b/src/components/Personality/PersonalityCard.tsx
@@ -1,4 +1,4 @@
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React, { CSSProperties } from "react";
 
@@ -29,7 +29,7 @@ interface PersonalityCardProps {
     selectPersonality?: any;
     isFormSubmitted?: boolean;
     onClick?: any;
-    titleLevel?: 1 | 2 | 3 | 4 | 5;
+    titleLevel?: "h1" | "h2" | "h3" | "h4" | "h5";
     centralizedInfo?: boolean;
 }
 
@@ -44,7 +44,7 @@ const PersonalityCard = ({
     hoistAvatar = false,
     style,
     onClick,
-    titleLevel = 1,
+    titleLevel = "h1",
     selectPersonality = null,
     isFormSubmitted,
     centralizedInfo = false,
@@ -82,21 +82,21 @@ const PersonalityCard = ({
     const hasReview = personality?.stats?.reviews?.length > 0;
     const { t } = useTranslation();
     const componentStyle = {
-        titleSpan: !fullWidth ? 14 : 24,
-        avatarSpan: !fullWidth ? 8 : 24,
-        buttonSpan: !fullWidth ? 5 : 24,
+        titleSpan: !fullWidth ? 7 : 12,
+        avatarSpan: !fullWidth ? 4 : 12,
+        buttonSpan: !fullWidth ? 2.5 : 12,
         avatarSize: 90,
         hiddenIconSize: 12,
     };
     if (summarized) {
-        componentStyle.titleSpan = 10;
-        componentStyle.avatarSpan = 5;
-        componentStyle.buttonSpan = 9;
+        componentStyle.titleSpan = 5;
+        componentStyle.avatarSpan = 2.5;
+        componentStyle.buttonSpan = 4.5;
         componentStyle.avatarSize = 43;
     }
     if (header) {
         componentStyle.avatarSize = 144;
-        componentStyle.hiddenIconSize = 18;
+        componentStyle.hiddenIconSize = 22;
     }
 
     let cardStyle;
@@ -113,7 +113,7 @@ const PersonalityCard = ({
 
     if (personality) {
         return (
-            <Row
+            <Grid container
                 style={{
                     width: "100%",
                     ...cardStyle,
@@ -129,17 +129,16 @@ const PersonalityCard = ({
                         })}
                     />
                 )}
-                <Col
-                    md={24}
-                    lg={header && !mobile && !fullWidth ? 12 : 24}
+                <Grid item
+                    md={12}
+                    lg={header && !mobile && !fullWidth ? 6 : 12}
                     style={{
                         width: "100%",
                         textAlign: hoistAvatar ? "center" : "inherit",
                     }}
                 >
-                    <Row
-                        gutter={summarized ? 0 : 20}
-                        align={header ? "middle" : "top"}
+                    <Grid container
+                        columnSpacing={summarized ? 0 : 1.5}
                         style={{
                             width: "100%",
                             padding: "15px",
@@ -150,7 +149,6 @@ const PersonalityCard = ({
                             hoistAvatar={hoistAvatar}
                             personality={personality}
                             componentStyle={componentStyle}
-                            header={header}
                         />
 
                         {((hoistAvatar && (!vw?.sm || !vw?.xs)) ||
@@ -167,11 +165,12 @@ const PersonalityCard = ({
                             )}
 
                         {summarized && (
-                            <Col
-                                span={componentStyle.buttonSpan}
+                            <Grid item
+                                xs={componentStyle.buttonSpan}
                                 style={{
                                     display: "flex",
                                     justifyContent: "flex-end",
+                                    maxHeight: 40,
                                 }}
                             >
                                 <PersonalityCardButton
@@ -186,23 +185,21 @@ const PersonalityCard = ({
                                     isCreatingClaim={isCreatingClaim}
                                     onClick={onClick}
                                 />
-                            </Col>
+                            </Grid>
                         )}
-                    </Row>
-                </Col>
+                    </Grid>
+                </Grid>
                 {!smallDevice && enableStats && hasReview && (
-                    <Col
-                        xs={24}
-                        sm={24}
-                        md={24}
-                        lg={header && !mobile ? 12 : 24}
+                    <Grid item
+                        xs={12}
+                        lg={header && !mobile ? 6 : 12}
                         style={{
                             padding: "5px 15px",
                             display: "flex",
                             alignItems: "center",
                         }}
                     >
-                        <Row
+                        <Grid container
                             style={{
                                 width: "100%",
                                 justifyContent: "space-evenly",
@@ -216,10 +213,10 @@ const PersonalityCard = ({
                                 showInfo={!summarized}
                                 strokeWidth="16"
                             />
-                        </Row>
-                    </Col>
+                        </Grid>
+                    </Grid>
                 )}
-            </Row>
+            </Grid>
         );
     } else {
         return <PersonalitySkeleton />;
diff --git a/src/components/Personality/PersonalityCardAvatar.tsx b/src/components/Personality/PersonalityCardAvatar.tsx
index 039134e85..db5df1c84 100644
--- a/src/components/Personality/PersonalityCardAvatar.tsx
+++ b/src/components/Personality/PersonalityCardAvatar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import AletheiaAvatar from "../AletheiaAvatar";
 import { useTranslation } from "next-i18next";
 import PersonalityCardAvatarTooltip from "./PersonalityCardAvatarTooltip";
@@ -8,16 +8,14 @@ const PersonalityCardAvatar = ({
     hoistAvatar,
     personality,
     componentStyle,
-    header,
-    offset = null,
 }) => {
     const { t } = useTranslation();
-    const tooltipOffset = offset || (header ? [-24, 24] : [-4, 4]);
 
     return (
-        <Col
-            span={componentStyle.avatarSpan}
+        <Grid item
+            xs={componentStyle.avatarSpan}
             style={{
+                alignContent: componentStyle.avatarSize < 90 ? undefined : "center",
                 padding: 0,
                 minWidth:
                     componentStyle.avatarSize < 100
@@ -28,9 +26,7 @@ const PersonalityCardAvatar = ({
             {!hoistAvatar && (
                 <PersonalityCardAvatarTooltip
                     isHidden={personality?.isHidden}
-                    offset={tooltipOffset}
                     style={{
-                        padding: componentStyle.hiddenIconSize / 2.5,
                         fontSize: componentStyle.hiddenIconSize,
                     }}
                 >
@@ -43,7 +39,7 @@ const PersonalityCardAvatar = ({
                     />
                 </PersonalityCardAvatarTooltip>
             )}
-        </Col>
+        </Grid>
     );
 };
 export default PersonalityCardAvatar;
diff --git a/src/components/Personality/PersonalityCardAvatarTooltip.tsx b/src/components/Personality/PersonalityCardAvatarTooltip.tsx
index 9109fa7b1..ebc600d20 100644
--- a/src/components/Personality/PersonalityCardAvatarTooltip.tsx
+++ b/src/components/Personality/PersonalityCardAvatarTooltip.tsx
@@ -1,47 +1,65 @@
 import React from "react";
-import { Badge, Popover } from "antd";
+import { VisibilityOff, InfoOutlined } from "@mui/icons-material";
+import { Badge, IconButton } from "@mui/material";
+import InfoTooltip from "../Claim/InfoTooltip";
 import { useTranslation } from "next-i18next";
 import colors from "../../styles/colors";
-import { EyeInvisibleFilled, InfoCircleOutlined } from "@ant-design/icons";
 
 const PersonalityCardAvatarTooltip = ({
     children,
     isHidden,
     style,
-    offset,
 }) => {
     const { t } = useTranslation();
 
+    const InfoBadge = (
+        <Badge
+            overlap="circular"
+            badgeContent={
+                <IconButton
+                    disabled
+                    style={{
+                        color: colors.primary,
+                        backgroundColor: colors.white,
+                        boxShadow: `0px 3px 3px ${colors.shadow}`,
+                        padding: 5
+                    }}
+                >
+                    {
+                        isHidden ? (
+                            <VisibilityOff sx={{ ...style }} />
+                        ) : (
+                            <InfoOutlined sx={{ ...style }} />
+                        )
+                    }
+                </IconButton>
+            }
+        >
+            {children}
+        </Badge>
+    );
+
     return (
-        <Popover
-            placement="rightTop"
+        <InfoTooltip
+            placement="right-start"
+            children={InfoBadge}
             content={
-                isHidden
-                    ? t("personality:hiddenPersonalityAvatarTooltip")
-                    : t("personality:personalityCardWikidataTooltip")
+                <p
+                    style={{
+                        color: colors.primary,
+                        lineHeight: "20px",
+                        fontSize: 14,
+                        padding: 10,
+                        margin: 0
+                    }}
+                >
+                    {isHidden
+                        ? t("personality:hiddenPersonalityAvatarTooltip")
+                        : t("personality:personalityCardWikidataTooltip")
+                    }
+                </p>
             }
-            trigger="hover"
-        >
-            <Badge
-                count={
-                    isHidden ? (
-                        <EyeInvisibleFilled color={colors.white} />
-                    ) : (
-                        <InfoCircleOutlined color={colors.white} />
-                    )
-                }
-                style={{
-                    borderRadius: "100%",
-                    color: colors.primary,
-                    background: colors.white,
-                    boxShadow: `1px 1px 2px ${colors.secondary}`,
-                    ...style,
-                }}
-                offset={offset}
-            >
-                {children}
-            </Badge>
-        </Popover>
+        />
     );
 };
 
diff --git a/src/components/Personality/PersonalityInfo.tsx b/src/components/Personality/PersonalityInfo.tsx
index 963266294..a3f36d8f0 100644
--- a/src/components/Personality/PersonalityInfo.tsx
+++ b/src/components/Personality/PersonalityInfo.tsx
@@ -1,17 +1,15 @@
 import React from "react";
-import { Col, Divider, Row, Typography } from "antd";
+import { Grid, Typography, Divider } from "@mui/material";
 import colors from "../../styles/colors";
 import { useTranslation } from "next-i18next";
 
-const { Title, Paragraph } = Typography;
-
 interface PersonalityInfo {
     summarized: boolean;
     enableStats: boolean;
     personality: any;
     componentStyle: any; //adicionar tipo do componente style
     centralized: boolean;
-    titleLevel: 1 | 2 | 3 | 4 | 5;
+    titleLevel: "h1" | "h2" | "h3" | "h4" | "h5";
 }
 
 export const PersonalityInfo = (props: PersonalityInfo) => {
@@ -19,8 +17,8 @@ export const PersonalityInfo = (props: PersonalityInfo) => {
     const { componentStyle, summarized, personality, titleLevel, enableStats, centralized } =
         props;
     return (
-        <Col
-            span={componentStyle.titleSpan}
+        <Grid item
+            xs={componentStyle.titleSpan}
             className="personality-card-content"
             style={{
                 width: "50%",
@@ -32,7 +30,7 @@ export const PersonalityInfo = (props: PersonalityInfo) => {
             }}
         >
             {summarized && (
-                <Paragraph
+                <Typography variant="body1"
                     style={{
                         fontSize: "14px",
                         lineHeight: "20px",
@@ -41,11 +39,11 @@ export const PersonalityInfo = (props: PersonalityInfo) => {
                     }}
                 >
                     {personality.name}
-                </Paragraph>
+                </Typography>
             )}
             {!summarized && (
-                <Title
-                    level={titleLevel}
+                <Typography
+                    variant={titleLevel}
                     style={{
                         fontSize: "24px",
                         lineHeight: "32px",
@@ -54,9 +52,9 @@ export const PersonalityInfo = (props: PersonalityInfo) => {
                     }}
                 >
                     {personality.name}
-                </Title>
+                </Typography>
             )}
-            <Paragraph
+            <Typography variant="body1"
                 style={{
                     fontSize: summarized ? "10px" : "14px",
                     color: colors.blackSecondary,
@@ -64,16 +62,17 @@ export const PersonalityInfo = (props: PersonalityInfo) => {
                 }}
             >
                 {personality.description}
-            </Paragraph>
+            </Typography>
             {summarized &&
                 enableStats &&
                 personality.stats?.total !== undefined && (
-                    <Paragraph
+                    <Typography variant="body1"
                         style={{
                             fontSize: "10px",
                             fontWeight: 600,
                             lineHeight: "15px",
                             color: colors.blackSecondary,
+                            marginBottom: 10,
                         }}
                     >
                         <b>
@@ -81,7 +80,7 @@ export const PersonalityInfo = (props: PersonalityInfo) => {
                                 totalReviews: personality.stats?.total,
                             })}
                         </b>
-                    </Paragraph>
+                    </Typography>
                 )}
             {!summarized && personality.wikipedia && (
                 <a
@@ -99,11 +98,11 @@ export const PersonalityInfo = (props: PersonalityInfo) => {
                     {t("personality:wikipediaPage")}
                 </a>
             )}
-            {!summarized && <Divider style={{ margin: "16px 0" }} />}
+            {!summarized && <Divider flexItem variant="middle" style={{ margin: "16px 0" }} />}
             {enableStats && (
-                <Row>
+                <Grid container>
                     {!summarized && (
-                        <Row
+                        <Grid container
                             style={{
                                 flexDirection: 'column',
                                 color: colors.black,
@@ -125,10 +124,10 @@ export const PersonalityInfo = (props: PersonalityInfo) => {
                                     })}
                                 </span>
                             )}
-                        </Row>
+                        </Grid>
                     )}
-                </Row>
+                </Grid>
             )}
-        </Col>
+        </Grid>
     );
 };
diff --git a/src/components/Personality/PersonalityMinimalCard.style.tsx b/src/components/Personality/PersonalityMinimalCard.style.tsx
index 8c61ae05a..174d8e38c 100644
--- a/src/components/Personality/PersonalityMinimalCard.style.tsx
+++ b/src/components/Personality/PersonalityMinimalCard.style.tsx
@@ -1,9 +1,9 @@
-import { Row } from "antd";
+import { Grid } from "@mui/material";
 import styled from "styled-components";
 import colors from "../../styles/colors";
 import { queries } from "../../styles/mediaQueries";
 
-const PersonalityMinimalCardStyle = styled(Row)`
+const PersonalityMinimalCardStyle = styled(Grid)`
     text-align: center;
     display: flex;
     justify-content: center;
diff --git a/src/components/Personality/PersonalityMinimalCard.tsx b/src/components/Personality/PersonalityMinimalCard.tsx
index f8c5b21aa..4a42cf4c9 100644
--- a/src/components/Personality/PersonalityMinimalCard.tsx
+++ b/src/components/Personality/PersonalityMinimalCard.tsx
@@ -1,5 +1,4 @@
-import { Col } from "antd";
-import Title from "antd/lib/typography/Title";
+import { Grid, Typography } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import PersonalityMinimalCardStyle from "./PersonalityMinimalCard.style";
@@ -12,24 +11,22 @@ const PersonalityMinimalCard = ({ personality, avatarSize = 117 }) => {
     const { t } = useTranslation();
     const [nameSpace] = useAtom(currentNameSpace);
     return (
-        <PersonalityMinimalCardStyle className="personality-card">
-            <Col>
+        <PersonalityMinimalCardStyle container className="personality-card">
+            <Grid item>
                 <PersonalityCardAvatar
                     hoistAvatar={false}
                     personality={personality}
-                    header={true}
                     componentStyle={{
                         avatarSize: avatarSize,
-                        avatarSpan: 8,
+                        avatarSpan: 4,
                         hiddenIconSize: 16,
                     }}
-                    offset={[-18, 18]}
                 />
-            </Col>
-            <Col className="personality">
-                <Title level={2} className="personality-name">
+            </Grid>
+            <Grid item className="personality">
+                <Typography variant="h2" className="personality-name">
                     {personality.name}
-                </Title>
+                </Typography>
                 <p className="personality-description-content">
                     <span className="personality-description">
                         {personality.description}
@@ -45,7 +42,7 @@ const PersonalityMinimalCard = ({ personality, avatarSize = 117 }) => {
                         {t("personality:profile_button")}
                     </a>
                 </p>
-            </Col>
+            </Grid>
         </PersonalityMinimalCardStyle>
     );
 };
diff --git a/src/components/Search/SearchCard.tsx b/src/components/Search/SearchCard.tsx
index fc189d823..f7df8b983 100644
--- a/src/components/Search/SearchCard.tsx
+++ b/src/components/Search/SearchCard.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import AletheiaAvatar from "../AletheiaAvatar";
 import SearchResult from "./SearchResult";
 import colors from "../../styles/colors";
-import { Col, Row } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import SearchDescription from "./SearchDescription";
 
@@ -35,17 +35,17 @@ const SearchCard = ({
     };
 
     return (
-        <Row
+        <Grid container
             style={{
                 background: colors.white,
                 padding: "0 10%",
                 boxShadow: "0 2px 2px rgba(0, 0, 0, 0.1)",
                 width: "100%",
             }}
-            align="middle"
+            alignContent="middle"
         >
             {content && Array.isArray(content) && content.length > 0 && (
-                <Col
+                <Grid item
                     style={{
                         padding: "10px 0",
                         borderTop: `1px solid ${colors.neutralTertiary}`,
@@ -96,9 +96,9 @@ const SearchCard = ({
                                 />
                             )
                     )}
-                </Col>
+                </Grid>
             )}
-        </Row>
+        </Grid>
     );
 };
 
diff --git a/src/components/Search/SearchDescription.tsx b/src/components/Search/SearchDescription.tsx
index ffc9399e5..87932844e 100644
--- a/src/components/Search/SearchDescription.tsx
+++ b/src/components/Search/SearchDescription.tsx
@@ -1,16 +1,14 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
-import { Typography } from "antd";
+import { Typography } from "@mui/material";
 import LocalizedDate from "../LocalizedDate";
 import ReviewClassification from "../ClaimReview/ReviewClassification";
 
-const { Paragraph } = Typography;
-
 const SearchDescription = ({ personalityName, claimDate, sentence = null }) => {
     const { t } = useTranslation();
 
     return (
-        <Paragraph>
+        <Typography variant="body1">
             <span>{personalityName}</span>
             &nbsp;
             <span style={{ textTransform: "lowercase" }}>
@@ -27,7 +25,7 @@ const SearchDescription = ({ personalityName, claimDate, sentence = null }) => {
                     />
                 </>
             )}
-        </Paragraph>
+        </Typography>
     );
 };
 
diff --git a/src/components/Search/SearchPageView.tsx b/src/components/Search/SearchPageView.tsx
index 13288e58f..d5fee0ec3 100644
--- a/src/components/Search/SearchPageView.tsx
+++ b/src/components/Search/SearchPageView.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import SearchApi from "../../api/searchApi";
-import { Typography } from "antd";
 import Button, { ButtonType } from "../Button";
 import { useAppSelector } from "../../store/store";
-import { Divider, Grid } from "@mui/material";
+import { Divider, Grid, Typography } from "@mui/material";
 import { useDispatch } from "react-redux";
 import { ActionTypes, SearchTypes } from "../../store/types";
 import { useRouter } from "next/router";
@@ -176,9 +175,9 @@ function SearchPageView({ searchText }) {
                 my={2}
             >
                 <Grid item xs={7}>
-                    <Typography.Title level={3}>
+                    <Typography fontSize={24} fontWeight={600} variant="h3">
                         {t("search:searchPageTittle")}
-                    </Typography.Title>
+                    </Typography>
                     <Divider />
                     <form style={{ width: "50%" }} onSubmit={handleSubmit}>
                         <div
diff --git a/src/components/Skeleton/PersonalitySkeleton.tsx b/src/components/Skeleton/PersonalitySkeleton.tsx
index 61c9b4b06..2ab96a885 100644
--- a/src/components/Skeleton/PersonalitySkeleton.tsx
+++ b/src/components/Skeleton/PersonalitySkeleton.tsx
@@ -1,27 +1,28 @@
-import { Col, Row, Skeleton } from "antd";
+import { Grid, Skeleton } from "@mui/material";
 import React from "react";
 
 const PersonalitySkeleton = () => {
     return (
-        <Row style={{ marginBottom: 64, width: "100%" }}>
-            <Col span={20} style={{ paddingLeft: 50 }}>
-                <Skeleton
-                    avatar
-                    active
-                    paragraph={{ rows: 2, width: ["75%", "50%"] }}
-                />
-            </Col>
-            <Col
-                span={4}
+        <Grid container style={{ justifyContent: "center", marginBottom: 64 }}>
+            <Grid item xs={2} style={{ paddingLeft: 20 }}>
+                <Skeleton variant="circular" width={40} height={40} animation="wave" />
+            </Grid>
+            <Grid item xs={8}>
+                <Skeleton variant="text" width="50%" animation="wave" />
+                <Skeleton variant="text" width="75%" animation="wave" />
+                <Skeleton variant="text" width="50%" animation="wave" />
+            </Grid>
+            <Grid item
+                xs={2}
                 style={{
                     display: "flex",
                     justifyContent: "flex-end",
                     padding: "10px 0",
                 }}
             >
-                <Skeleton.Button active size="large" />
-            </Col>
-        </Row>
+                <Skeleton variant="rectangular" width={100} height={40} animation="wave" />
+            </Grid>
+        </Grid>
     );
 };