diff --git a/web/apps/photos/src/components/UserNameInputDialog.tsx b/web/apps/photos/src/components/UserNameInputDialog.tsx
index 73d1169fb8..8a709afa29 100644
--- a/web/apps/photos/src/components/UserNameInputDialog.tsx
+++ b/web/apps/photos/src/components/UserNameInputDialog.tsx
@@ -1,7 +1,8 @@
-import DialogBox from "@ente/shared/components/DialogBox/";
+import DialogBox from "@ente/shared/components/DialogBox/base";
+import DialogIcon from "@ente/shared/components/DialogBox/DialogIcon";
 import SingleInputForm from "@ente/shared/components/SingleInputForm";
 import AutoAwesomeOutlinedIcon from "@mui/icons-material/AutoAwesomeOutlined";
-import { Typography } from "@mui/material";
+import { DialogContent, DialogTitle, Typography } from "@mui/material";
 import { t } from "i18next";
 
 export default function UserNameInputDialog({
@@ -15,31 +16,30 @@ export default function UserNameInputDialog({
         onClose();
         await onNameSubmit(inputValue);
     };
+
     return (
-        <DialogBox
-            size="xs"
-            open={open}
-            onClose={onClose}
-            attributes={{
-                title: t("ENTER_NAME"),
-                icon: <AutoAwesomeOutlinedIcon />,
-            }}
-        >
-            <Typography color={"text.muted"} pb={1}>
-                {t("PUBLIC_UPLOADER_NAME_MESSAGE")}
-            </Typography>
-            <SingleInputForm
-                hiddenLabel
-                initialValue={uploaderName}
-                callback={handleSubmit}
-                placeholder={t("NAME_PLACEHOLDER")}
-                buttonText={t("add_photos_count", {
-                    count: toUploadFilesCount ?? 0,
-                })}
-                fieldType="text"
-                blockButton
-                secondaryButtonAction={onClose}
-            />
+        <DialogBox maxWidth="xs" open={open} onClose={onClose}>
+            <DialogIcon icon={<AutoAwesomeOutlinedIcon />} />
+
+            <DialogTitle>{t("ENTER_NAME")}</DialogTitle>
+
+            <DialogContent>
+                <Typography color={"text.muted"} pb={1}>
+                    {t("PUBLIC_UPLOADER_NAME_MESSAGE")}
+                </Typography>
+                <SingleInputForm
+                    hiddenLabel
+                    initialValue={uploaderName}
+                    callback={handleSubmit}
+                    placeholder={t("NAME_PLACEHOLDER")}
+                    buttonText={t("add_photos_count", {
+                        count: toUploadFilesCount ?? 0,
+                    })}
+                    fieldType="text"
+                    blockButton
+                    secondaryButtonAction={onClose}
+                />
+            </DialogContent>
         </DialogBox>
     );
 }