diff --git a/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx b/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
index 83530962a7..ab6ff8fb59 100644
--- a/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/TwoFactorSettings.tsx
@@ -20,12 +20,12 @@ import { getTwoFactorStatus } from "services/userService";
 export const TwoFactorSettings: React.FC<
     NestedSidebarDrawerVisibilityProps
 > = ({ open, onClose, onRootClose }) => {
-    const [isTwoFactorEnabled, setTwoFactorStatus] = useState(false);
+    const [isTwoFactorEnabled, setIsTwoFactorEnabled] = useState(false);
 
     useEffect(() => {
         const isTwoFactorEnabled =
             getData(LS_KEYS.USER).isTwoFactorEnabled ?? false;
-        setTwoFactorStatus(isTwoFactorEnabled);
+        setIsTwoFactorEnabled(isTwoFactorEnabled);
     }, []);
 
     useEffect(() => {
@@ -34,7 +34,7 @@ export const TwoFactorSettings: React.FC<
         }
         const main = async () => {
             const isTwoFactorEnabled = await getTwoFactorStatus();
-            setTwoFactorStatus(isTwoFactorEnabled);
+            setIsTwoFactorEnabled(isTwoFactorEnabled);
             await setLSUser({
                 ...getData(LS_KEYS.USER),
                 isTwoFactorEnabled,
@@ -63,7 +63,7 @@ export const TwoFactorSettings: React.FC<
                 {isTwoFactorEnabled ? (
                     <ManageDrawerContents onRootClose={handleRootClose} />
                 ) : (
-                    <TwoFactorModalSetupSection closeDialog={handleRootClose} />
+                    <SetupDrawerContents onRootClose={handleRootClose} />
                 )}
             </Stack>
         </NestedSidebarDrawer>
@@ -74,16 +74,11 @@ export default TwoFactorSettings;
 
 type ContentsProps = Pick<NestedSidebarDrawerVisibilityProps, "onRootClose">;
 
-interface TwoFactorModalSetupSectionProps {
-    closeDialog: () => void;
-}
-
-function TwoFactorModalSetupSection({
-    closeDialog,
-}: TwoFactorModalSetupSectionProps) {
+const SetupDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
     const router = useRouter();
-    const redirectToTwoFactorSetup = () => {
-        closeDialog();
+
+    const configure = () => {
+        onRootClose();
         router.push(PAGES.TWO_FACTOR_SETUP);
     };
 
@@ -95,13 +90,13 @@ function TwoFactorModalSetupSection({
                 variant="contained"
                 color="accent"
                 size="large"
-                onClick={redirectToTwoFactorSetup}
+                onClick={configure}
             >
                 {t("ENABLE_TWO_FACTOR")}
             </Button>
         </VerticallyCentered>
     );
-}
+};
 
 const ManageDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
     const { showMiniDialog } = useAppContext();
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 78557e1c15..a8536eb46a 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -47,7 +47,7 @@ import {
 } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import DeleteAccountModal from "components/DeleteAccountModal";
-import TwoFactorModal from "components/Sidebar/TwoFactorSettings";
+import { TwoFactorSettings } from "components/Sidebar/TwoFactorSettings";
 import { WatchFolder } from "components/WatchFolder";
 import LinkButton from "components/pages/gallery/LinkButton";
 import { t } from "i18next";
@@ -530,7 +530,7 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
                 {...recoveryKeyVisibilityProps}
                 {...{ showMiniDialog }}
             />
-            <TwoFactorModal
+            <TwoFactorSettings
                 {...twoFactorVisibilityProps}
                 onRootClose={closeSidebar}
             />