diff --git a/web/apps/photos/src/components/Sidebar/TwoFactorModal.tsx b/web/apps/photos/src/components/Sidebar/TwoFactorModal.tsx
index d15ed0f06f..437d746ea9 100644
--- a/web/apps/photos/src/components/Sidebar/TwoFactorModal.tsx
+++ b/web/apps/photos/src/components/Sidebar/TwoFactorModal.tsx
@@ -1,4 +1,5 @@
 import { disableTwoFactor } from "@/accounts/api/user";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import type { ModalVisibilityProps, NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
 import { AppContext } from "@/new/photos/types/context";
 import { VerticallyCentered } from "@ente/shared/components/Container";
@@ -63,10 +64,18 @@ export const TwoFactorSettings: React.FC<NestedDrawerVisibilityProps> = ({
     };
 
     return (
-        <TwoFactorDialog
-            maxWidth="xs"
-            open={open}
-            onClose={onClose}
+        <SidebarDrawer
+        // <TwoFactorDialog
+        //     maxWidth="xs"
+        // transitionDuration={0}
+        //     open={open}
+        //     onClose={onClose}
+        transitionDuration={0}
+        open={open}
+        onClose={onClose}
+        BackdropProps={{
+            sx: { "&&&": { backgroundColor: "transparent" } },
+        }}
         >
             <DialogTitleWithCloseButton onClose={onClose}>
                 {t("TWO_FACTOR_AUTHENTICATION")}
@@ -78,7 +87,7 @@ export const TwoFactorSettings: React.FC<NestedDrawerVisibilityProps> = ({
                     <TwoFactorModalSetupSection closeDialog={closeDialog} />
                 )}
             </DialogContent>
-        </TwoFactorDialog>
+        </SidebarDrawer>
     );
 }
 
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
index 93ef27599c..aefb731044 100644
--- a/web/packages/base/components/mui/SidebarDrawer.tsx
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -15,3 +15,9 @@ export const SidebarDrawer = styled(Drawer)(({ theme }) => ({
         padding: theme.spacing(1),
     },
 }));
+
+/**
+ * A variant of {@link SidebarDrawer} for second level, nested drawers that are
+ * shown atop an already visible {@link SidebarDrawer}.
+ */
+// export const NestedDrawerVisibilityProps