diff --git a/web/apps/auth/src/pages/auth.tsx b/web/apps/auth/src/pages/auth.tsx
index f5e894b4c3..5d92955d0c 100644
--- a/web/apps/auth/src/pages/auth.tsx
+++ b/web/apps/auth/src/pages/auth.tsx
@@ -148,10 +148,10 @@ const AuthNavbar: React.FC = () => {
 
     return (
         <NavbarBase>
-            <Stack direction="row" flex={1} justifyContent={"center"}>
+            <Stack direction="row" sx={{ flex: 1, justifyContent: "center" }}>
                 <EnteLogo />
             </Stack>
-            <Stack direction="row" position={"absolute"} right="24px">
+            <Stack direction="row" sx={{ position: "absolute", right: "24px" }}>
                 <OverflowMenu ariaID="auth-options">
                     <OverflowMenuOption
                         color="critical"
diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
index 9785b01e9c..bada9bd33d 100644
--- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
@@ -538,8 +538,10 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                 >
                     <Stack
                         direction="row"
-                        justifyContent={"space-between"}
-                        alignItems={"center"}
+                        sx={{
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                        }}
                     >
                         <Typography variant="h2" sx={{ fontWeight: "bold" }}>
                             {t("photo_editor")}
@@ -635,7 +637,10 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                     open={showControlsDrawer}
                     onClose={handleCloseWithConfirmation}
                 >
-                    <Stack direction="row" justifyContent={"space-between"}>
+                    <Stack
+                        direction="row"
+                        sx={{ justifyContent: "space-between" }}
+                    >
                         <IconButton
                             onClick={() => {
                                 setShowControlsDrawer(false);
@@ -647,7 +652,13 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                             <CloseIcon />
                         </IconButton>
                     </Stack>
-                    <Stack direction="row" gap="0.5rem" marginBottom="1rem">
+                    <Stack
+                        direction="row"
+                        sx={{
+                            gap: "0.5rem",
+                            marginBottom: "1rem",
+                        }}
+                    >
                         <Tabs
                             value={currentTab}
                             onChange={(_, value) => {