diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
index e7bcf160d..42fe4485e 100644
--- a/src/components/About/About.tsx
+++ b/src/components/About/About.tsx
@@ -1,22 +1,26 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import { Row, Typography, Button } from "antd";
-import colors from "../../styles/colors";
-import { Trans, useTranslation } from "next-i18next";
+import React from "react";
+import { Box, Typography, Button } from "@mui/material";
+import { useTranslation, Trans } from "next-i18next";
+import DescriptionIcon from "@mui/icons-material/Description";
 import AletheiaAlert from "../AletheiaAlert";
-import { FilePdfOutlined } from "@ant-design/icons";
 import AletheiaVideo from "../AletheiaVideo";
+import colors from "../../styles/colors";
 
 const About = () => {
     const { t } = useTranslation();
     const paragraphStyle = {
-        margin: "10px 0px",
+        margin: "10px 0",
         width: "100%",
     };
+
     return (
-        <Row
-            style={{
+        <Box
+            sx={{
                 color: colors.primary,
-                justifyContent: "center",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
                 width: "100%",
                 fontSize: "1rem",
                 letterSpacing: "1px",
@@ -24,136 +28,126 @@ const About = () => {
                 padding: "20px",
             }}
         >
-            <div
-                style={{
-                    padding: "20px 0",
-                    width: "100%",
-                }}
-            >
+            <Box sx={{ padding: "20px 0", width: "100%" }}>
                 <AletheiaVideo />
-            </div>
-                <AletheiaAlert
-                    type="info"
-                    message={
-                        <>
-                            {t("about:alertInfo")}{" "}
-                            <a
-                                style={{ whiteSpace: "pre-wrap" }}
-                                href="https://github.com/AletheiaFact/aletheia"
-                                target="_blank"
-                                rel="noreferrer"
-                            >
-                                https://github.com/AletheiaFact/aletheia
-                            </a>
-                        </>
-                    }
-                    action={
-                        <Button
-                            type="primary"
-                            size="small"
-                            shape="round"
-                            icon={<FilePdfOutlined />}
-                            href="https://docs.google.com/viewer?url=https://raw.githubusercontent.com/AletheiaFact/miscellaneous/290b19847f0da521963f74e7947d7863bf5d5624/documents/org_legal_register.pdf"
+            </Box>
+            <AletheiaAlert
+                type="info"
+                message={
+                    <>
+                        {t("about:alertInfo")}{" "}
+                        <a
+                            style={{ whiteSpace: "pre-wrap" }}
+                            href="https://github.com/AletheiaFact/aletheia"
                             target="_blank"
                             rel="noreferrer"
-                            style={{
-                                position: "absolute",
-                                bottom: "15px",
-                                right: "15px",
-                            }}
                         >
-                            {t("about:labelButton")}
-                        </Button>
-                    }
-                />
-            <Row style={{ width: "100%", textAlign: "center" }}>
-                <Typography.Title style={{ width: "100%" }}>
-                    {t("about:title")}
-                </Typography.Title>
-            </Row>
-            <Row style={paragraphStyle}>{t("about:intro")}</Row>
-            <Row style={{ width: "100%", textAlign: "center" }}>
-                <Typography.Title style={{ width: "100%" }} level={3}>
-                    {t("about:visionTitle")}
-                </Typography.Title>
-            </Row>
-            <Row style={paragraphStyle}>{t("about:visionContent")}</Row>
-            <Row style={{ width: "100%", textAlign: "center" }}>
-                <Typography.Title style={{ width: "100%" }} level={3}>
-                    {t("about:missionTitle")}
-                </Typography.Title>
-            </Row>
-            <Row style={paragraphStyle}>{t("about:missionContent")}</Row>
-            <Row style={{ width: "100%", textAlign: "center" }}>
-                <Typography.Title style={{ width: "100%" }} level={3}>
-                    {t("about:valuesTitle")}
-                </Typography.Title>
-            </Row>
-            <Row style={paragraphStyle}>
+                            https://github.com/AletheiaFact/aletheia
+                        </a>
+                    </>
+                }
+                action={
+                    <Button
+                        variant="contained"
+                        size="small"
+                        startIcon={<DescriptionIcon />}
+                        href="https://docs.google.com/viewer?url=https://raw.githubusercontent.com/AletheiaFact/miscellaneous/290b19847f0da521963f74e7947d7863bf5d5624/documents/org_legal_register.pdf"
+                        target="_blank"
+                        rel="noreferrer"
+                        sx={{
+                            position: "absolute",
+                            bottom: "15px",
+                            right: "15px",
+                        }}
+                    >
+                        {t("about:labelButton")}
+                    </Button>
+                }
+            />
+            <Box sx={{ textAlign: "center", width: "100%" }}>
+                <Typography variant="h3">{t("about:title")}</Typography>
+            </Box>
+            <Box sx={paragraphStyle}>
+                <p>{t("about:intro")}</p>
+            </Box>
+            <Box sx={{ textAlign: "center", width: "100%" }}>
+                <Typography variant="h3">{t("about:visionTitle")}</Typography>
+            </Box>
+            <Box sx={paragraphStyle}>
+                <p>{t("about:visionContent")}</p>
+            </Box>
+            <Box sx={{ textAlign: "center", width: "100%" }}>
+                <Typography variant="h3">{t("about:missionTitle")}</Typography>
+            </Box>
+            <Box sx={paragraphStyle}>
+                <p>{t("about:missionContent")}</p>
+            </Box>
+            <Box sx={{ textAlign: "center", width: "100%" }}>
+                <Typography variant="h3">{t("about:valuesTitle")}</Typography>
+            </Box>
+            <Box sx={paragraphStyle}>
                 <ul>
                     <li key={1}>{t("about:valueAccessibility")}</li>
                     <li key={2}>{t("about:valueCredibility")}</li>
                     <li key={3}>{t("about:valueAutonomy")}</li>
                 </ul>
-            </Row>
-            <Row style={{ width: "100%", textAlign: "center" }}>
-                <Typography.Title style={{ width: "100%" }} level={3}>
-                    {t("about:fullTextTitle")}
-                </Typography.Title>
-            </Row>
-            <Row style={paragraphStyle}>
+            </Box>
+            <Box sx={{ textAlign: "center", width: "100%" }}>
+                <Typography variant="h3">{t("about:fullTextTitle")}</Typography>
+            </Box>
+            <Box sx={paragraphStyle}>
                 <p>
                     <Trans
-                        i18nKey={"about:firstParagraph"}
+                        i18nKey="about:firstParagraph"
                         components={[
                             <a
                                 style={{ whiteSpace: "pre-wrap" }}
                                 href="https://github.com/AletheiaFact/aletheia"
                                 target="_blank"
                                 rel="noreferrer"
-                            ></a>,
+                            />,
                             <a
                                 style={{ whiteSpace: "pre-wrap" }}
                                 href="https://builders.mozilla.community/programs.html#open-lab"
                                 target="_blank"
                                 rel="noreferrer"
-                            ></a>,
+                            />,
                         ]}
                     />
                 </p>
-            </Row>
-            <Row style={paragraphStyle}>
+            </Box>
+            <Box sx={paragraphStyle}>
                 <p>
                     <Trans
-                        i18nKey={"about:secondParagraph"}
+                        i18nKey="about:secondParagraph"
                         components={[
                             <a
                                 style={{ whiteSpace: "pre-wrap" }}
                                 href="https://wikipedia.org"
                                 target="_blank"
                                 rel="noreferrer"
-                            ></a>,
+                            />,
                             <a
                                 style={{ whiteSpace: "pre-wrap" }}
                                 href="https://demagog.cz/"
                                 target="_blank"
                                 rel="noreferrer"
-                            ></a>,
+                            />,
                         ]}
                     />
                 </p>
-            </Row>
-            <Row style={paragraphStyle}>
+            </Box>
+            <Box sx={paragraphStyle}>
                 <p>
-                    <Trans i18nKey={"about:thirdParagraph"} />
+                    <Trans i18nKey="about:thirdParagraph" />
                 </p>
-            </Row>
-            <Row style={paragraphStyle}>
+            </Box>
+            <Box sx={paragraphStyle}>
                 <p>
-                    <Trans i18nKey={"about:forthParagraph"} />
+                    <Trans i18nKey="about:forthParagraph" />
                 </p>
-            </Row>
-        </Row>
+            </Box>
+        </Box>
     );
 };
 
diff --git a/src/components/Claim/ClaimView.tsx b/src/components/Claim/ClaimView.tsx
index 6b757df6f..ac7f52be1 100644
--- a/src/components/Claim/ClaimView.tsx
+++ b/src/components/Claim/ClaimView.tsx
@@ -122,14 +122,10 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => {
                                     <ToggleSection
                                         defaultValue={showHighlights}
                                         onChange={(e) => {
-                                            setShowHighlights(e.target.value);
+                                        setShowHighlights(e.target.value);
                                         }}
-                                        labelTrue={t(
-                                            "claim:showHighlightsButton"
-                                        )}
-                                        labelFalse={t(
-                                            "claim:hideHighlightsButton"
-                                        )}
+                                        labelTrue={t("claim:showHighlightsButton")}
+                                        labelFalse={t("claim:hideHighlightsButton")}
                                     />
                                 </Box>
                             </Grid>
diff --git a/src/components/HideContentButton.tsx b/src/components/HideContentButton.tsx
index 19ea7312d..73676ece2 100644
--- a/src/components/HideContentButton.tsx
+++ b/src/components/HideContentButton.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Button } from "@mui/material";
-import { VisibilityOff, Visibility } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
 import colors from "../styles/colors";
 import { NameSpaceEnum } from "../types/Namespace";
 import { useAtom } from "jotai";
@@ -22,13 +22,13 @@ const HideContentButton = ({ hide, handleHide, handleUnhide, style = {} }) => {
     return (
         <div style={{ ...style }}>
             {hide ? (
-                <Button onClick={handleHide} style={buttonStyle}>
+                <IconButton onClick={handleHide} style={buttonStyle}>
                     <Visibility fontSize="small"/>
-                </Button>
+                </IconButton>
             ) : (
-                <Button onClick={handleUnhide} style={buttonStyle}>
-                    <VisibilityOff fontSize="small"/>
-                </Button>
+                <IconButton onClick={handleUnhide} style={buttonStyle}>
+                    <VisibilityOff fontSize="small" />
+                </IconButton>
             )}
         </div>
     );
diff --git a/src/components/ToggleSection.tsx b/src/components/ToggleSection.tsx
index 2ef3597c0..5e71a5a9d 100644
--- a/src/components/ToggleSection.tsx
+++ b/src/components/ToggleSection.tsx
@@ -1,85 +1,84 @@
-import { Radio } from "antd";
+import { ButtonGroup, Button } from "@mui/material";
 import styled from "styled-components";
 import colors from "../styles/colors";
 import { NameSpaceEnum } from "../types/Namespace";
 import { useAtom } from "jotai";
 import { currentNameSpace } from "../atoms/namespace";
+import { useState } from "react";
 
-const RadioGroup = styled(Radio.Group)`
-    .ant-radio-button-wrapper {
-        &.ant-radio-button-wrapper-checked {
-            background: ${({ namespace }) =>
-                namespace === NameSpaceEnum.Main
-                    ? colors.primary
-                    : colors.secondary};
-            border-color: ${({ namespace }) =>
-                namespace === NameSpaceEnum.Main
-                    ? colors.primary
-                    : colors.secondary};
-            color: ${colors.white};
+const StyledButton = styled(Button)<{ namespace: NameSpaceEnum; selected: boolean }>`
+  background: ${({ namespace, selected }) =>
+    selected
+      ? namespace === NameSpaceEnum.Main
+        ? colors.primary
+        : colors.secondary
+      : colors.neutralTertiary};
+  color: ${({ selected }) => ( selected )};
+  border-radius: 30px;
 
-            &:not([class*=" ant-radio-button-wrapper-disabled"]) {
-                &.ant-radio-button-wrapper:first-child {
-                    border-right-color: ${({ namespace }) =>
-                        namespace === NameSpaceEnum.Main
-                            ? colors.primary
-                            : colors.secondary};
-                }
-            }
+  &:hover {
+    background: ${({ namespace }) =>
+      namespace === NameSpaceEnum.Main ? colors.primary : colors.secondary};
+    color: ${colors.white};
+  }
 
-            &:not(.ant-radio-button-wrapper-disabled)::before {
-                background: ${({ namespace }) =>
-                    namespace === NameSpaceEnum.Main
-                        ? colors.primary
-                        : colors.secondary};
-            }
-        }
-    }
+  &:not(:hover) {
+    background: ${({ namespace, selected }) =>
+      selected
+        ? namespace === NameSpaceEnum.Main
+          ? colors.primary
+          : colors.secondary
+        : colors.neutralTertiary};
+  }
 `;
 
-const RadioButton = styled(Radio.Button)`
-    background: ${colors.neutralTertiary};
-    color: ${({ nameSpace }) =>
-        nameSpace === NameSpaceEnum.Main
-            ? colors.primary
-            : colors.secondary};
+const StyledButtonGroup = styled(ButtonGroup)`
+    visibility: hidden;
+    position: relative;
+
+  > * {
+    visibility: visible;
+    position: relative;
+  }
 `;
 
 interface ToggleSectionProps {
-    defaultValue: boolean;
-    onChange: (event: any) => void;
-    labelTrue: string;
-    labelFalse: string;
+  defaultValue: boolean;
+  onChange: (event: any) => void;
+  labelTrue: string;
+  labelFalse: string;
 }
 
 const ToggleSection = (props: ToggleSectionProps) => {
-    const [nameSpace] = useAtom(currentNameSpace);
-    return (
-        <RadioGroup
-            defaultValue={props.defaultValue}
-            buttonStyle="solid"
-            namespace={nameSpace}
-            onChange={props.onChange}
+  const [nameSpace] = useAtom(currentNameSpace);
+  const [selectedValue, setSelectedValue] = useState<boolean>(props.defaultValue);
+
+  const handleChange = (value: boolean) => {
+    setSelectedValue(value);
+    const event = { target: { value } };
+    props.onChange(event as any);
+  };
+
+  return (
+      <StyledButtonGroup variant="contained" aria-label="toggle section">
+      <StyledButton
+        selected={selectedValue === true}
+        onClick={() => handleChange(true)}
+        namespace={nameSpace}
+        style={{ borderRadius: "30px 0px 0px 30px" }}
+        >
+        {props.labelTrue}
+      </StyledButton>
+      <StyledButton
+        selected={selectedValue === false}
+        onClick={() => handleChange(false)}
+        namespace={nameSpace}
+        style={{ borderRadius: "0px 30px 30px 0px" }}
         >
-            <RadioButton
-                className="radio-button"
-                value={true}
-                style={{
-                    borderRadius: "30px 0px 0px 30px",
-                }}
-            >
-                {props.labelTrue}
-            </RadioButton>
-            <RadioButton
-                value={false}
-                style={{
-                    borderRadius: "0px 30px 30px 0px",
-                }}
-            >
-                {props.labelFalse}
-            </RadioButton>
-        </RadioGroup>
-    );
+        {props.labelFalse}
+      </StyledButton>
+      </StyledButtonGroup>
+  );
 };
 
 export default ToggleSection;