diff --git a/web/apps/accounts/src/pages/passkeys/index.tsx b/web/apps/accounts/src/pages/passkeys/index.tsx
index 485fdf841db..ce1b928ddce 100644
--- a/web/apps/accounts/src/pages/passkeys/index.tsx
+++ b/web/apps/accounts/src/pages/passkeys/index.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import { errorDialogAttributes } from "@/base/components/utils/dialog";
 import log from "@/base/log";
@@ -283,7 +283,7 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
 
     return (
         <>
-            <EnteDrawer anchor="right" {...{ open, onClose }}>
+            <SidebarDrawer anchor="right" {...{ open, onClose }}>
                 {token && passkey && (
                     <Stack spacing={"4px"} py={"12px"}>
                         <Titlebar
@@ -312,7 +312,7 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
                         </MenuItemGroup>
                     </Stack>
                 )}
-            </EnteDrawer>
+            </SidebarDrawer>
 
             {token && passkey && (
                 <RenamePasskeyDialog
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx
index d42243a813e..563b6b62af7 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx
@@ -1,4 +1,4 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import { COLLECTION_ROLE, type Collection } from "@/media/collection";
 import { DialogProps, Stack } from "@mui/material";
@@ -87,38 +87,36 @@ export default function AddParticipant({
     };
 
     return (
-        <>
-            <EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
-                <Stack spacing={"4px"} py={"12px"}>
-                    <Titlebar
-                        onClose={onClose}
-                        title={
-                            type === COLLECTION_ROLE.VIEWER
-                                ? t("ADD_VIEWERS")
-                                : t("ADD_COLLABORATORS")
-                        }
-                        onRootClose={handleRootClose}
-                        caption={collection.name}
-                    />
-                    <AddParticipantForm
-                        onClose={onClose}
-                        callback={collectionShare}
-                        optionsList={nonSharedEmails}
-                        placeholder={t("ENTER_EMAIL")}
-                        fieldType="email"
-                        buttonText={
-                            type === COLLECTION_ROLE.VIEWER
-                                ? t("ADD_VIEWERS")
-                                : t("ADD_COLLABORATORS")
-                        }
-                        submitButtonProps={{
-                            size: "large",
-                            sx: { mt: 1, mb: 2 },
-                        }}
-                        disableAutoFocus
-                    />
-                </Stack>
-            </EnteDrawer>
-        </>
+        <SidebarDrawer anchor="right" open={open} onClose={handleDrawerClose}>
+            <Stack spacing={"4px"} py={"12px"}>
+                <Titlebar
+                    onClose={onClose}
+                    title={
+                        type === COLLECTION_ROLE.VIEWER
+                            ? t("ADD_VIEWERS")
+                            : t("ADD_COLLABORATORS")
+                    }
+                    onRootClose={handleRootClose}
+                    caption={collection.name}
+                />
+                <AddParticipantForm
+                    onClose={onClose}
+                    callback={collectionShare}
+                    optionsList={nonSharedEmails}
+                    placeholder={t("ENTER_EMAIL")}
+                    fieldType="email"
+                    buttonText={
+                        type === COLLECTION_ROLE.VIEWER
+                            ? t("ADD_VIEWERS")
+                            : t("ADD_COLLABORATORS")
+                    }
+                    submitButtonProps={{
+                        size: "large",
+                        sx: { mt: 1, mb: 2 },
+                    }}
+                    disableAutoFocus
+                />
+            </Stack>
+        </SidebarDrawer>
     );
 }
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx
index cd2cb17e75c..23cb8a4d62c 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx
@@ -1,9 +1,9 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import {
     MenuItemDivider,
     MenuItemGroup,
     MenuSectionTitle,
 } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import {
     COLLECTION_ROLE,
@@ -116,7 +116,11 @@ export default function ManageEmailShare({
 
     return (
         <>
-            <EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
+            <SidebarDrawer
+                anchor="right"
+                open={open}
+                onClose={handleDrawerClose}
+            >
                 <Stack spacing={"4px"} py={"12px"}>
                     <Titlebar
                         onClose={onClose}
@@ -210,7 +214,7 @@ export default function ManageEmailShare({
                         </Stack>
                     </Stack>
                 </Stack>
-            </EnteDrawer>
+            </SidebarDrawer>
             <ManageParticipant
                 collectionUnshare={collectionUnshare}
                 open={manageParticipantView}
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx
index bfad20b5046..2b61fd37fbd 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import log from "@/base/log";
 import type { Collection, CollectionUser } from "@/media/collection";
@@ -129,82 +129,81 @@ export default function ManageParticipant({
     }
 
     return (
-        <>
-            <EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
-                <Stack spacing={"4px"} py={"12px"}>
-                    <Titlebar
-                        onClose={onClose}
-                        title={t("MANAGE")}
-                        onRootClose={onRootClose}
-                        caption={selectedParticipant.email}
-                    />
-
-                    <Stack py={"20px"} px={"8px"} spacing={"32px"}>
-                        <Stack>
+        <SidebarDrawer anchor="right" open={open} onClose={handleDrawerClose}>
+            <Stack spacing={"4px"} py={"12px"}>
+                <Titlebar
+                    onClose={onClose}
+                    title={t("MANAGE")}
+                    onRootClose={onRootClose}
+                    caption={selectedParticipant.email}
+                />
+
+                <Stack py={"20px"} px={"8px"} spacing={"32px"}>
+                    <Stack>
+                        <Typography
+                            color="text.muted"
+                            variant="small"
+                            padding={1}
+                        >
+                            {t("ADDED_AS")}
+                        </Typography>
+
+                        <MenuItemGroup>
+                            <EnteMenuItem
+                                fontWeight="normal"
+                                onClick={handleRoleChange("COLLABORATOR")}
+                                label={"Collaborator"}
+                                startIcon={<ModeEditIcon />}
+                                endIcon={
+                                    selectedParticipant.role ===
+                                        "COLLABORATOR" && <DoneIcon />
+                                }
+                            />
+                            <MenuItemDivider hasIcon />
+
+                            <EnteMenuItem
+                                fontWeight="normal"
+                                onClick={handleRoleChange("VIEWER")}
+                                label={"Viewer"}
+                                startIcon={<PhotoIcon />}
+                                endIcon={
+                                    selectedParticipant.role === "VIEWER" && (
+                                        <DoneIcon />
+                                    )
+                                }
+                            />
+                        </MenuItemGroup>
+
+                        <Typography
+                            color="text.muted"
+                            variant="small"
+                            padding={1}
+                        >
+                            {t("COLLABORATOR_RIGHTS")}
+                        </Typography>
+
+                        <Stack py={"30px"}>
                             <Typography
                                 color="text.muted"
                                 variant="small"
                                 padding={1}
                             >
-                                {t("ADDED_AS")}
+                                {t("REMOVE_PARTICIPANT_HEAD")}
                             </Typography>
 
                             <MenuItemGroup>
                                 <EnteMenuItem
+                                    color="critical"
                                     fontWeight="normal"
-                                    onClick={handleRoleChange("COLLABORATOR")}
-                                    label={"Collaborator"}
-                                    startIcon={<ModeEditIcon />}
-                                    endIcon={
-                                        selectedParticipant.role ===
-                                            "COLLABORATOR" && <DoneIcon />
-                                    }
-                                />
-                                <MenuItemDivider hasIcon />
-
-                                <EnteMenuItem
-                                    fontWeight="normal"
-                                    onClick={handleRoleChange("VIEWER")}
-                                    label={"Viewer"}
-                                    startIcon={<PhotoIcon />}
-                                    endIcon={
-                                        selectedParticipant.role ===
-                                            "VIEWER" && <DoneIcon />
-                                    }
+                                    onClick={removeParticipant}
+                                    label={"Remove"}
+                                    startIcon={<BlockIcon />}
                                 />
                             </MenuItemGroup>
-
-                            <Typography
-                                color="text.muted"
-                                variant="small"
-                                padding={1}
-                            >
-                                {t("COLLABORATOR_RIGHTS")}
-                            </Typography>
-
-                            <Stack py={"30px"}>
-                                <Typography
-                                    color="text.muted"
-                                    variant="small"
-                                    padding={1}
-                                >
-                                    {t("REMOVE_PARTICIPANT_HEAD")}
-                                </Typography>
-
-                                <MenuItemGroup>
-                                    <EnteMenuItem
-                                        color="critical"
-                                        fontWeight="normal"
-                                        onClick={removeParticipant}
-                                        label={"Remove"}
-                                        startIcon={<BlockIcon />}
-                                    />
-                                </MenuItemGroup>
-                            </Stack>
                         </Stack>
                     </Stack>
                 </Stack>
-            </EnteDrawer>
-        </>
+            </Stack>
+        </SidebarDrawer>
     );
 }
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/index.tsx b/web/apps/photos/src/components/Collections/CollectionShare/index.tsx
index 5fda2e00c84..a1804f86526 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare/index.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare/index.tsx
@@ -1,4 +1,4 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type { Collection } from "@/media/collection";
 import type { CollectionSummary } from "@/new/photos/services/collection/ui";
@@ -32,7 +32,7 @@ function CollectionShare({ collectionSummary, ...props }: Props) {
     const { type } = collectionSummary;
 
     return (
-        <EnteDrawer
+        <SidebarDrawer
             anchor="right"
             open={props.open}
             onClose={handleDrawerClose}
@@ -75,7 +75,7 @@ function CollectionShare({ collectionSummary, ...props }: Props) {
                     )}
                 </Stack>
             </Stack>
-        </EnteDrawer>
+        </SidebarDrawer>
     );
 }
 export default CollectionShare;
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
index 99517c4cd22..60e31985500 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type {
     Collection,
@@ -68,7 +68,7 @@ export function ManageDeviceLimit({
                 endIcon={<ChevronRight />}
             />
 
-            <EnteDrawer
+            <SidebarDrawer
                 anchor="right"
                 open={isChangeDeviceLimitVisible}
                 onClose={handleDrawerClose}
@@ -100,7 +100,7 @@ export function ManageDeviceLimit({
                         </MenuItemGroup>
                     </Stack>
                 </Stack>
-            </EnteDrawer>
+            </SidebarDrawer>
         </>
     );
 }
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
index 79f46d1dc84..801b77a5aea 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type {
     Collection,
@@ -86,90 +86,86 @@ export default function ManagePublicShareOptions({
         navigator.clipboard.writeText(text);
     };
     return (
-        <>
-            <EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
-                <Stack spacing={"4px"} py={"12px"}>
-                    <Titlebar
-                        onClose={onClose}
-                        title={t("share_album")}
-                        onRootClose={onRootClose}
-                    />
-                    <Stack py={"20px"} px={"8px"} spacing={"32px"}>
-                        <Stack spacing={3}>
-                            <ManagePublicCollect
+        <SidebarDrawer anchor="right" open={open} onClose={handleDrawerClose}>
+            <Stack spacing={"4px"} py={"12px"}>
+                <Titlebar
+                    onClose={onClose}
+                    title={t("share_album")}
+                    onRootClose={onRootClose}
+                />
+                <Stack py={"20px"} px={"8px"} spacing={"32px"}>
+                    <Stack spacing={3}>
+                        <ManagePublicCollect
+                            collection={collection}
+                            publicShareProp={publicShareProp}
+                            updatePublicShareURLHelper={
+                                updatePublicShareURLHelper
+                            }
+                        />
+                        <ManageLinkExpiry
+                            collection={collection}
+                            publicShareProp={publicShareProp}
+                            updatePublicShareURLHelper={
+                                updatePublicShareURLHelper
+                            }
+                            onRootClose={onRootClose}
+                        />
+                        <MenuItemGroup>
+                            <ManageDeviceLimit
                                 collection={collection}
                                 publicShareProp={publicShareProp}
                                 updatePublicShareURLHelper={
                                     updatePublicShareURLHelper
                                 }
+                                onRootClose={onRootClose}
                             />
-                            <ManageLinkExpiry
+                            <MenuItemDivider />
+                            <ManageDownloadAccess
                                 collection={collection}
                                 publicShareProp={publicShareProp}
                                 updatePublicShareURLHelper={
                                     updatePublicShareURLHelper
                                 }
-                                onRootClose={onRootClose}
                             />
-                            <MenuItemGroup>
-                                <ManageDeviceLimit
-                                    collection={collection}
-                                    publicShareProp={publicShareProp}
-                                    updatePublicShareURLHelper={
-                                        updatePublicShareURLHelper
-                                    }
-                                    onRootClose={onRootClose}
-                                />
-                                <MenuItemDivider />
-                                <ManageDownloadAccess
-                                    collection={collection}
-                                    publicShareProp={publicShareProp}
-                                    updatePublicShareURLHelper={
-                                        updatePublicShareURLHelper
-                                    }
-                                />
-                                <MenuItemDivider />
-                                <ManageLinkPassword
-                                    collection={collection}
-                                    publicShareProp={publicShareProp}
-                                    updatePublicShareURLHelper={
-                                        updatePublicShareURLHelper
-                                    }
-                                />
-                            </MenuItemGroup>
-                            <MenuItemGroup>
-                                <EnteMenuItem
-                                    startIcon={<ContentCopyIcon />}
-                                    onClick={copyToClipboardHelper(
-                                        publicShareUrl,
-                                    )}
-                                    label={t("COPY_LINK")}
-                                />
-                            </MenuItemGroup>
-                            <MenuItemGroup>
-                                <EnteMenuItem
-                                    color="critical"
-                                    startIcon={<RemoveCircleOutline />}
-                                    onClick={disablePublicSharing}
-                                    label={t("REMOVE_LINK")}
-                                />
-                            </MenuItemGroup>
-                        </Stack>
-                        {sharableLinkError && (
-                            <Typography
-                                textAlign={"center"}
-                                variant="small"
-                                sx={{
-                                    color: (theme) => theme.colors.danger.A700,
-                                    mt: 0.5,
-                                }}
-                            >
-                                {sharableLinkError}
-                            </Typography>
-                        )}
+                            <MenuItemDivider />
+                            <ManageLinkPassword
+                                collection={collection}
+                                publicShareProp={publicShareProp}
+                                updatePublicShareURLHelper={
+                                    updatePublicShareURLHelper
+                                }
+                            />
+                        </MenuItemGroup>
+                        <MenuItemGroup>
+                            <EnteMenuItem
+                                startIcon={<ContentCopyIcon />}
+                                onClick={copyToClipboardHelper(publicShareUrl)}
+                                label={t("COPY_LINK")}
+                            />
+                        </MenuItemGroup>
+                        <MenuItemGroup>
+                            <EnteMenuItem
+                                color="critical"
+                                startIcon={<RemoveCircleOutline />}
+                                onClick={disablePublicSharing}
+                                label={t("REMOVE_LINK")}
+                            />
+                        </MenuItemGroup>
                     </Stack>
+                    {sharableLinkError && (
+                        <Typography
+                            textAlign={"center"}
+                            variant="small"
+                            sx={{
+                                color: (theme) => theme.colors.danger.A700,
+                                mt: 0.5,
+                            }}
+                        >
+                            {sharableLinkError}
+                        </Typography>
+                    )}
                 </Stack>
-            </EnteDrawer>
-        </>
+            </Stack>
+        </SidebarDrawer>
     );
 }
diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx
index 8487240274e..3bc1c7f2c5e 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type {
     Collection,
@@ -84,7 +84,7 @@ export function ManageLinkExpiry({
                     }
                 />
             </MenuItemGroup>
-            <EnteDrawer
+            <SidebarDrawer
                 anchor="right"
                 open={shareExpiryOptionsModalView}
                 onClose={handleDrawerClose}
@@ -115,7 +115,7 @@ export function ManageLinkExpiry({
                         </MenuItemGroup>
                     </Stack>
                 </Stack>
-            </EnteDrawer>
+            </SidebarDrawer>
         </>
     );
 }
diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
index 875fd404bb4..e5664cd0132 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
@@ -1,6 +1,6 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import { EllipsizedTypography } from "@/base/components/Typography";
 import { useModalVisibility } from "@/base/components/utils/modal";
@@ -400,7 +400,7 @@ const confirmDisableMapsDialogAttributes = (
 });
 
 const FileInfoSidebar = styled((props: DialogProps) => (
-    <EnteDrawer {...props} anchor="right" />
+    <SidebarDrawer {...props} anchor="right" />
 ))({
     zIndex: fileInfoDrawerZIndex,
     "& .MuiPaper-root": {
diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
index 931b70d6909..de5afca30b9 100644
--- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
@@ -1,10 +1,10 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import {
     MenuItemDivider,
     MenuItemGroup,
     MenuSectionTitle,
 } from "@/base/components/Menu";
 import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { nameAndExtension } from "@/base/file";
 import log from "@/base/log";
 import { downloadAndRevokeObjectURL } from "@/base/utils/web";
@@ -614,7 +614,7 @@ const ImageEditorOverlay = (props: IProps) => {
                         </Box>
                     </Box>
                 </Box>
-                <EnteDrawer
+                <SidebarDrawer
                     variant="persistent"
                     anchor="right"
                     open={showControlsDrawer}
@@ -722,7 +722,7 @@ const ImageEditorOverlay = (props: IProps) => {
                             title={t("PHOTO_EDIT_REQUIRED_TO_SAVE")}
                         />
                     )}
-                </EnteDrawer>
+                </SidebarDrawer>
             </Backdrop>
         </>
     );
diff --git a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
index 24efe9a0004..be0a4995559 100644
--- a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type { NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
 import { AppContext } from "@/new/photos/types/context";
@@ -33,7 +33,7 @@ export const AdvancedSettings: React.FC<NestedDrawerVisibilityProps> = ({
     };
 
     return (
-        <EnteDrawer
+        <SidebarDrawer
             transitionDuration={0}
             open={open}
             onClose={handleDrawerClose}
@@ -66,6 +66,6 @@ export const AdvancedSettings: React.FC<NestedDrawerVisibilityProps> = ({
                     </Stack>
                 </Box>
             </Stack>
-        </EnteDrawer>
+        </SidebarDrawer>
     );
 };
diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx
index 6fe1851eb1f..f33b1f04a7a 100644
--- a/web/apps/photos/src/components/Sidebar/MapSetting.tsx
+++ b/web/apps/photos/src/components/Sidebar/MapSetting.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemGroup } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type { NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
 import log from "@/base/log";
@@ -54,7 +54,7 @@ export const MapSettings: React.FC<NestedDrawerVisibilityProps> = ({
     };
 
     return (
-        <EnteDrawer
+        <SidebarDrawer
             transitionDuration={0}
             open={open}
             onClose={handleDrawerClose}
@@ -90,7 +90,7 @@ export const MapSettings: React.FC<NestedDrawerVisibilityProps> = ({
                 onClose={closeModifyMapEnabled}
                 onRootClose={handleRootClose}
             />
-        </EnteDrawer>
+        </SidebarDrawer>
     );
 };
 
@@ -132,7 +132,7 @@ const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
 
     return (
         <Box>
-            <EnteDrawer
+            <SidebarDrawer
                 anchor="left"
                 transitionDuration={0}
                 open={open}
@@ -156,7 +156,7 @@ const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
                         onRootClose={handleRootClose}
                     />
                 )}
-            </EnteDrawer>
+            </SidebarDrawer>
         </Box>
     );
 };
diff --git a/web/apps/photos/src/components/Sidebar/Preferences.tsx b/web/apps/photos/src/components/Sidebar/Preferences.tsx
index 975012bd018..c95751d17b4 100644
--- a/web/apps/photos/src/components/Sidebar/Preferences.tsx
+++ b/web/apps/photos/src/components/Sidebar/Preferences.tsx
@@ -1,5 +1,5 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import {
     useModalVisibility,
@@ -56,7 +56,7 @@ export const Preferences: React.FC<NestedDrawerVisibilityProps> = ({
     };
 
     return (
-        <EnteDrawer
+        <SidebarDrawer
             transitionDuration={0}
             open={open}
             onClose={handleDrawerClose}
@@ -113,7 +113,7 @@ export const Preferences: React.FC<NestedDrawerVisibilityProps> = ({
                 {...mlSettingsVisibilityProps}
                 onRootClose={handleRootClose}
             />
-        </EnteDrawer>
+        </SidebarDrawer>
     );
 };
 
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 1d090d52b46..8e8110e65ab 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -1,9 +1,9 @@
 import { RecoveryKey } from "@/accounts/components/RecoveryKey";
 import { openAccountsManagePasskeysPage } from "@/accounts/services/passkey";
 import { isDesktop } from "@/base/app";
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { EnteLogo } from "@/base/components/EnteLogo";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { useModalVisibility } from "@/base/components/utils/modal";
 import log from "@/base/log";
 import { savedLogs } from "@/base/log-web";
@@ -94,7 +94,7 @@ export default function Sidebar({
     closeSidebar,
 }: Iprops) {
     return (
-        <DrawerSidebar open={sidebarView} onClose={closeSidebar}>
+        <RootSidebarDrawer open={sidebarView} onClose={closeSidebar}>
             <HeaderSection closeSidebar={closeSidebar} />
             <Divider />
             <UserDetailsSection sidebarView={sidebarView} />
@@ -111,18 +111,16 @@ export default function Sidebar({
                 <Divider />
                 <DebugSection />
             </Stack>
-        </DrawerSidebar>
+        </RootSidebarDrawer>
     );
 }
 
-const DrawerSidebar = styled(EnteDrawer)(({ theme }) => ({
+const RootSidebarDrawer = styled(SidebarDrawer)(({ theme }) => ({
     "& .MuiPaper-root": {
         padding: theme.spacing(1.5),
     },
 }));
 
-DrawerSidebar.defaultProps = { anchor: "left" };
-
 interface HeaderSectionProps {
     closeSidebar: () => void;
 }
diff --git a/web/packages/base/components/EnteDrawer.tsx b/web/packages/base/components/EnteDrawer.tsx
deleted file mode 100644
index e6fc35bb159..00000000000
--- a/web/packages/base/components/EnteDrawer.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Drawer, styled } from "@mui/material";
-
-export const EnteDrawer = styled(Drawer)(({ theme }) => ({
-    "& .MuiPaper-root": {
-        maxWidth: "375px",
-        width: "100%",
-        scrollbarWidth: "thin",
-        padding: theme.spacing(1),
-    },
-}));
diff --git a/web/packages/base/components/mui/SidebarDrawer.tsx b/web/packages/base/components/mui/SidebarDrawer.tsx
new file mode 100644
index 00000000000..93ef27599c3
--- /dev/null
+++ b/web/packages/base/components/mui/SidebarDrawer.tsx
@@ -0,0 +1,17 @@
+import { Drawer, styled } from "@mui/material";
+
+/**
+ * A MUI {@link Drawer} with a standard set of styling that we use for our left
+ * and right sidebar panels.
+ *
+ * It is width limited to 375px, and always at full width. It also has a default
+ * padding.
+ */
+export const SidebarDrawer = styled(Drawer)(({ theme }) => ({
+    "& .MuiPaper-root": {
+        maxWidth: "375px",
+        width: "100%",
+        scrollbarWidth: "thin",
+        padding: theme.spacing(1),
+    },
+}));
diff --git a/web/packages/new/photos/components/MLSettings.tsx b/web/packages/new/photos/components/MLSettings.tsx
index 8959be3c6a7..3b2c43f44d4 100644
--- a/web/packages/new/photos/components/MLSettings.tsx
+++ b/web/packages/new/photos/components/MLSettings.tsx
@@ -1,6 +1,6 @@
-import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemGroup } from "@/base/components/Menu";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
+import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
 import type { NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
 import { disableML, enableML, type MLStatus } from "@/new/photos/services/ml";
@@ -67,7 +67,7 @@ export const MLSettings: React.FC<NestedDrawerVisibilityProps> = ({
 
     return (
         <Box>
-            <EnteDrawer
+            <SidebarDrawer
                 anchor="left"
                 transitionDuration={0}
                 open={open}
@@ -84,7 +84,7 @@ export const MLSettings: React.FC<NestedDrawerVisibilityProps> = ({
                     />
                     {component}
                 </Stack>
-            </EnteDrawer>
+            </SidebarDrawer>
 
             <FaceConsent
                 open={openFaceConsent}
@@ -174,7 +174,7 @@ const FaceConsent: React.FC<FaceConsentProps> = ({
     );
 
     return (
-        <EnteDrawer
+        <SidebarDrawer
             transitionDuration={0}
             open={open}
             onClose={handleDrawerClose}
@@ -233,7 +233,7 @@ const FaceConsent: React.FC<FaceConsentProps> = ({
                     </Stack>
                 </Stack>
             </Stack>
-        </EnteDrawer>
+        </SidebarDrawer>
     );
 };