diff --git a/web/apps/photos/src/components/Collections/AllCollections/index.tsx b/web/apps/photos/src/components/Collections/AllCollections/index.tsx
index d875792778..330fbe4a42 100644
--- a/web/apps/photos/src/components/Collections/AllCollections/index.tsx
+++ b/web/apps/photos/src/components/Collections/AllCollections/index.tsx
@@ -123,7 +123,7 @@ const AllCollectionsHeader = ({
                     </Typography>
                 </Box>
             </FluidContainer>
-            <Stack direction="row" spacing={1.5}>
+            <Stack direction="row" sx={{ gap: 1.5 }}>
                 <CollectionsSortOptions
                     activeSortBy={collectionsSortBy}
                     onChangeSortBy={onChangeCollectionsSortBy}
diff --git a/web/apps/photos/src/components/DeleteAccountModal.tsx b/web/apps/photos/src/components/DeleteAccountModal.tsx
index 6d20f405cd..896acee7c8 100644
--- a/web/apps/photos/src/components/DeleteAccountModal.tsx
+++ b/web/apps/photos/src/components/DeleteAccountModal.tsx
@@ -186,7 +186,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
                                 checked={acceptDataDeletion}
                                 onChange={setAcceptDataDeletion}
                             />
-                            <Stack spacing={"8px"}>
+                            <Stack sx={{ gap: "8px" }}>
                                 <LoadingButton
                                     type="submit"
                                     fullWidth
@@ -244,7 +244,7 @@ const FeedbackInput: React.FC<FeedbackInputProps> = ({
     onChange,
     errorMessage,
 }) => (
-    <Stack spacing={"4px"}>
+    <Stack sx={{ gap: "4px" }}>
         <Typography>{t("delete_account_feedback_label")}</Typography>
         <TextField
             variant="standard"
diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
index 75ef67134b..9a27993fb3 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
@@ -198,13 +198,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
     return (
         <FileInfoSidebar open={showInfo} onClose={handleCloseInfo}>
             <Titlebar onClose={handleCloseInfo} title={t("info")} backIsClose />
-            <Stack
-                spacing={"20px"}
-                sx={{
-                    pt: 1,
-                    pb: 3,
-                }}
-            >
+            <Stack sx={{ pt: 1, pb: 3, gap: "20px" }}>
                 <RenderCaption
                     {...{
                         file,
diff --git a/web/apps/photos/src/components/Upload/UploadProgress.tsx b/web/apps/photos/src/components/Upload/UploadProgress.tsx
index 51444cac60..0624d8c5c4 100644
--- a/web/apps/photos/src/components/Upload/UploadProgress.tsx
+++ b/web/apps/photos/src/components/Upload/UploadProgress.tsx
@@ -221,7 +221,7 @@ const UploadProgressTitle: React.FC = () => {
                     <UploadProgressSubtitleText />
                 </Box>
                 <Box>
-                    <Stack direction={"row"} spacing={1}>
+                    <Stack direction="row" sx={{ gap: 1 }}>
                         <FilledIconButton onClick={toggleExpanded}>
                             {expanded ? <UnfoldLessIcon /> : <UnfoldMoreIcon />}
                         </FilledIconButton>
diff --git a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
index 02e818e50c..ec27a27ad5 100644
--- a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
+++ b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
@@ -176,7 +176,7 @@ const DefaultOptions: React.FC<OptionsProps> = ({
                 <DialogCloseIconButton {...{ onClose }} />
             </SpaceBetweenFlex>
             <Box sx={{ p: "12px", pt: "16px" }}>
-                <Stack spacing={0.5}>
+                <Stack sx={{ gap: 0.5 }}>
                     {intent != "import" && (
                         <RowButton
                             startIcon={<ImageOutlinedIcon />}
diff --git a/web/apps/photos/src/components/WatchFolder.tsx b/web/apps/photos/src/components/WatchFolder.tsx
index 6555642da2..b6b5d1b0ec 100644
--- a/web/apps/photos/src/components/WatchFolder.tsx
+++ b/web/apps/photos/src/components/WatchFolder.tsx
@@ -189,7 +189,7 @@ const WatchesContainer = styled("div")(() => ({
 const NoWatches: React.FC = () => {
     return (
         <NoWatchesContainer>
-            <Stack spacing={1}>
+            <Stack sx={{ gap: 1 }}>
                 <Typography variant="h6">{t("no_folders_added")}</Typography>
                 <Typography
                     variant={"small"}
diff --git a/web/packages/new/photos/components/PlanSelector.tsx b/web/packages/new/photos/components/PlanSelector.tsx
index 2ccff68ddc..8f5c7855b1 100644
--- a/web/packages/new/photos/components/PlanSelector.tsx
+++ b/web/packages/new/photos/components/PlanSelector.tsx
@@ -498,7 +498,7 @@ const Plans: React.FC<PlansProps> = ({
     hasAddOnBonus,
     onPlanSelect,
 }) => (
-    <Stack spacing={2}>
+    <Stack sx={{ gap: 2 }}>
         {plansData?.plans
             .filter((plan) => plan.period === planPeriod)
             .map((plan) => (
@@ -681,7 +681,7 @@ function ManageSubscription({
     };
 
     return (
-        <Stack spacing={1}>
+        <Stack sx={{ gap: 1 }}>
             {isSubscriptionStripe(subscription) && (
                 <StripeSubscriptionOptions
                     {...{ onClose, subscription, hasAddOnBonus }}
diff --git a/web/packages/new/photos/components/SearchBar.tsx b/web/packages/new/photos/components/SearchBar.tsx
index cf6195caa0..988de3c822 100644
--- a/web/packages/new/photos/components/SearchBar.tsx
+++ b/web/packages/new/photos/components/SearchBar.tsx
@@ -474,7 +474,7 @@ const OptionContents = ({ data: option }: { data: SearchOption }) => (
                 </Typography>
             </Box>
 
-            <Stack direction={"row"} sx={{ gap: 1 }}>
+            <Stack direction="row" sx={{ gap: 1 }}>
                 {option.previewFiles.map((file) => (
                     <ItemCard
                         key={file.id}