diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx
index b8afd34c7b..a7ed12d6ee 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx
@@ -12,7 +12,7 @@ import Photo, { default as PhotoIcon } from "@mui/icons-material/Photo";
 import PublicIcon from "@mui/icons-material/Public";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import WorkspacesIcon from "@mui/icons-material/Workspaces";
-import { Box, Dialog, Stack, styled, Typography } from "@mui/material";
+import { Dialog, Stack, styled, Typography } from "@mui/material";
 import NumberAvatar from "@mui/material/Avatar";
 import TextField from "@mui/material/TextField";
 import Avatar from "components/pages/gallery/Avatar";
@@ -590,7 +590,7 @@ const AddParticipantForm: React.FC<AddParticipantFormProps> = ({
 
     return (
         <form onSubmit={formik.handleSubmit}>
-            <Stack sx={{ gap: "24px", py: "20px", px: 2 }}>
+            <Stack sx={{ gap: 1, py: "20px", px: 2 }}>
                 <div>
                     <RowButtonGroupTitle>
                         {t("add_new_email")}
@@ -650,18 +650,16 @@ const AddParticipantForm: React.FC<AddParticipantFormProps> = ({
                         </RowButtonGroup>
                     </div>
                 )}
-            </Stack>
-            <Box sx={{ px: 2 }}>
                 <LoadingButton
                     type="submit"
                     color="accent"
-                    fullWidth
                     loading={formik.isSubmitting}
-                    sx={{ mt: 4, mb: 4 }}
+                    fullWidth
+                    sx={{ my: 6 }}
                 >
                     {submitButtonTitle}
                 </LoadingButton>
-            </Box>
+            </Stack>
         </form>
     );
 };
@@ -752,7 +750,7 @@ const ManageEmailShare: React.FC<ManageEmailShareProps> = ({
                 title={collection.name}
                 caption={t("participants_count", { count: peopleCount })}
             >
-                <Stack sx={{ gap: "24px", py: "20px", px: "12px" }}>
+                <Stack sx={{ gap: 3, py: "20px", px: "12px" }}>
                     <Stack>
                         <RowButtonGroupTitle icon={<AdminPanelSettingsIcon />}>
                             {t("owner")}
diff --git a/web/apps/photos/src/components/Sidebar.tsx b/web/apps/photos/src/components/Sidebar.tsx
index d82cacc3c7..f444c6dabd 100644
--- a/web/apps/photos/src/components/Sidebar.tsx
+++ b/web/apps/photos/src/components/Sidebar.tsx
@@ -694,7 +694,7 @@ const Account: React.FC<AccountProps> = ({
             onRootClose={handleRootClose}
             title={t("account")}
         >
-            <Stack sx={{ px: "16px", py: "8px", gap: "24px" }}>
+            <Stack sx={{ px: 2, py: 1, gap: 3 }}>
                 <RowButtonGroup>
                     <RowButton
                         endIcon={
@@ -781,7 +781,7 @@ const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
             onRootClose={handleRootClose}
             title={t("preferences")}
         >
-            <Stack sx={{ px: "16px", py: "8px", gap: "24px" }}>
+            <Stack sx={{ px: 2, py: 1, gap: 3 }}>
                 <LanguageSelector />
                 <ThemeSelector />
                 <Divider sx={{ my: "2px", opacity: 0.1 }} />
@@ -970,7 +970,7 @@ const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
             onRootClose={handleRootClose}
             title={t("map")}
         >
-            <Stack sx={{ px: "16px", py: "20px" }}>
+            <Stack sx={{ px: 2, py: "20px" }}>
                 <RowButtonGroup>
                     <RowSwitch
                         label={t("enabled")}
@@ -1021,7 +1021,7 @@ const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
             onRootClose={handleRootClose}
             title={t("advanced")}
         >
-            <Stack sx={{ px: "16px", py: "20px", gap: "24px" }}>
+            <Stack sx={{ px: 2, py: "20px", gap: 3 }}>
                 <Stack>
                     <RowButtonGroup>
                         <RowSwitch
@@ -1089,7 +1089,7 @@ const Help: React.FC<NestedSidebarDrawerVisibilityProps> = ({
             onRootClose={handleRootClose}
             title={t("help")}
         >
-            <Stack sx={{ px: "16px", py: "8px", gap: "24px" }}>
+            <Stack sx={{ px: 2, py: 1, gap: 3 }}>
                 <RowButtonGroup>
                     <RowButton
                         endIcon={<InfoOutlinedIcon />}
diff --git a/web/packages/new/photos/components/sidebar/MLSettings.tsx b/web/packages/new/photos/components/sidebar/MLSettings.tsx
index 9951fafad3..335a304ccf 100644
--- a/web/packages/new/photos/components/sidebar/MLSettings.tsx
+++ b/web/packages/new/photos/components/sidebar/MLSettings.tsx
@@ -108,7 +108,7 @@ export const EnableML: React.FC<EnableMLProps> = ({
         openURL("https://help.ente.io/photos/features/machine-learning");
 
     return (
-        <Stack sx={{ gap: "32px", py: "20px", px: "16px" }}>
+        <Stack sx={{ gap: "32px", py: "20px", px: 2 }}>
             <Typography sx={{ color: "text.muted" }}>
                 {t("ml_search_description")}
             </Typography>