diff --git a/src/components/TwoFactor/Modal/Manage.tsx b/src/components/TwoFactor/Modal/Manage.tsx
new file mode 100644
index 000000000..06bfea26a
--- /dev/null
+++ b/src/components/TwoFactor/Modal/Manage.tsx
@@ -0,0 +1,115 @@
+import React, { useContext } from 'react';
+import constants from 'utils/strings/constants';
+import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
+import { PAGES } from 'constants/pages';
+import router from 'next/router';
+import { disableTwoFactor } from 'services/userService';
+import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
+import { Button, Grid } from '@mui/material';
+
+interface Iprops {
+    close: () => void;
+}
+
+export default function TwoFactorModalManageSection(props: Iprops) {
+    const { close } = props;
+    const { setDialogMessage, setDisappearingFlashMessage } =
+        useContext(AppContext);
+
+    const warnTwoFactorDisable = async () => {
+        setDialogMessage({
+            title: constants.DISABLE_TWO_FACTOR,
+            staticBackdrop: true,
+            content: constants.DISABLE_TWO_FACTOR_MESSAGE,
+            close: { text: constants.CANCEL },
+            proceed: {
+                variant: 'danger',
+                text: constants.DISABLE,
+                action: twoFactorDisable,
+            },
+        });
+    };
+
+    const twoFactorDisable = async () => {
+        try {
+            await disableTwoFactor();
+            setData(LS_KEYS.USER, {
+                ...getData(LS_KEYS.USER),
+                isTwoFactorEnabled: false,
+            });
+            close();
+            setDisappearingFlashMessage({
+                message: constants.TWO_FACTOR_DISABLE_SUCCESS,
+                type: FLASH_MESSAGE_TYPE.INFO,
+            });
+        } catch (e) {
+            setDisappearingFlashMessage({
+                message: constants.TWO_FACTOR_DISABLE_FAILED,
+                type: FLASH_MESSAGE_TYPE.DANGER,
+            });
+        }
+    };
+
+    const warnTwoFactorReconfigure = async () => {
+        setDialogMessage({
+            title: constants.UPDATE_TWO_FACTOR,
+            staticBackdrop: true,
+            content: constants.UPDATE_TWO_FACTOR_MESSAGE,
+            close: { text: constants.CANCEL },
+            proceed: {
+                variant: 'success',
+                text: constants.UPDATE,
+                action: reconfigureTwoFactor,
+            },
+        });
+    };
+
+    const reconfigureTwoFactor = async () => {
+        router.push(PAGES.TWO_FACTOR_SETUP);
+    };
+
+    return (
+        <>
+            <Grid
+                mb={2}
+                container
+                rowSpacing={1}
+                alignItems="center"
+                justifyContent="center"
+                textAlign={'center'}>
+                <Grid item sm={9} xs={12}>
+                    {constants.UPDATE_TWO_FACTOR_HINT}
+                </Grid>
+                <Grid item sm={3} xs={12}>
+                    <Button
+                        variant="contained"
+                        color={'success'}
+                        onClick={warnTwoFactorReconfigure}
+                        style={{ width: '100%' }}>
+                        {constants.RECONFIGURE}
+                    </Button>
+                </Grid>
+            </Grid>
+            <Grid
+                container
+                rowSpacing={1}
+                alignItems="center"
+                justifyContent="center"
+                textAlign={'center'}>
+                <Grid item sm={9} xs={12}>
+                    {constants.DISABLE_TWO_FACTOR_HINT}{' '}
+                </Grid>
+
+                <Grid item sm={3} xs={12}>
+                    <Button
+                        variant="contained"
+                        color={'danger'}
+                        onClick={warnTwoFactorDisable}
+                        style={{ width: '100%' }}>
+                        {constants.DISABLE}
+                    </Button>
+                </Grid>
+            </Grid>
+        </>
+    );
+}
diff --git a/src/components/TwoFactor/Modal/Setup.tsx b/src/components/TwoFactor/Modal/Setup.tsx
new file mode 100644
index 000000000..c9b34644c
--- /dev/null
+++ b/src/components/TwoFactor/Modal/Setup.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import LockIcon from '@mui/icons-material/Lock';
+import { PAGES } from 'constants/pages';
+import { useRouter } from 'next/router';
+import constants from 'utils/strings/constants';
+import Container from 'components/Container';
+import { Button, Typography } from '@mui/material';
+
+interface Iprops {
+    closeSidebar: () => void;
+}
+
+export default function TwoFactorModalSetupSection({ closeSidebar }: Iprops) {
+    const router = useRouter();
+    const redirectToTwoFactorSetup = () => {
+        closeSidebar();
+        router.push(PAGES.TWO_FACTOR_SETUP);
+    };
+
+    return (
+        <Container disableGutters sx={{ mb: 2 }}>
+            <LockIcon sx={{ fontSize: (theme) => theme.spacing(5), mb: 2 }} />
+            <Typography mb={2}>{constants.TWO_FACTOR_INFO}</Typography>
+            <Button
+                variant="contained"
+                color="success"
+                onClick={redirectToTwoFactorSetup}>
+                {constants.ENABLE_TWO_FACTOR}
+            </Button>
+        </Container>
+    );
+}
diff --git a/src/components/TwoFactor/Modal/index.tsx b/src/components/TwoFactor/Modal/index.tsx
new file mode 100644
index 000000000..20348c69b
--- /dev/null
+++ b/src/components/TwoFactor/Modal/index.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { getTwoFactorStatus } from 'services/userService';
+import { SetLoading } from 'types/gallery';
+import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
+import constants from 'utils/strings/constants';
+import MessageDialog, { SetDialogMessage } from '../../MessageDialog';
+import TwoFactorModalSetupSection from './Setup';
+import TwoFactorModalManageSection from './Manage';
+
+interface Props {
+    show: boolean;
+    onHide: () => void;
+    setDialogMessage: SetDialogMessage;
+    setLoading: SetLoading;
+    closeSidebar: () => void;
+}
+
+function TwoFactorModal(props: Props) {
+    const [isTwoFactorEnabled, setTwoFactorStatus] = useState(false);
+
+    useEffect(() => {
+        if (!props.show) {
+            return;
+        }
+        const isTwoFactorEnabled =
+            getData(LS_KEYS.USER).isTwoFactorEnabled ?? false;
+        setTwoFactorStatus(isTwoFactorEnabled);
+        const main = async () => {
+            const isTwoFactorEnabled = await getTwoFactorStatus();
+            setTwoFactorStatus(isTwoFactorEnabled);
+            setData(LS_KEYS.USER, {
+                ...getData(LS_KEYS.USER),
+                isTwoFactorEnabled: false,
+            });
+        };
+        main();
+    }, [props.show]);
+
+    const close = () => {
+        props.onHide();
+        props.closeSidebar();
+    };
+
+    return (
+        <MessageDialog
+            size="xs"
+            show={props.show}
+            onHide={props.onHide}
+            attributes={{
+                title: constants.TWO_FACTOR_AUTHENTICATION,
+                staticBackdrop: true,
+            }}>
+            <>
+                {isTwoFactorEnabled ? (
+                    <TwoFactorModalManageSection close={close} />
+                ) : (
+                    <TwoFactorModalSetupSection
+                        closeSidebar={props.closeSidebar}
+                    />
+                )}
+            </>
+        </MessageDialog>
+    );
+}
+export default TwoFactorModal;