diff --git a/web/src/lib/components/user-settings-page/avatar-selector.svelte b/web/src/lib/components/user-settings-page/avatar-selector.svelte
index 8638f8cf9..af11900ee 100644
--- a/web/src/lib/components/user-settings-page/avatar-selector.svelte
+++ b/web/src/lib/components/user-settings-page/avatar-selector.svelte
@@ -15,7 +15,7 @@
 <FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => dispatch('close')}>
   <div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
     <div
-      class="w-[300px] md:w-[600px] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+      class=" rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
     >
       <div class="flex px-2 pt-2 items-center">
         <h1 class="px-4 w-full self-center font-medium text-immich-primary dark:text-immich-dark-primary">
@@ -25,12 +25,12 @@
           <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
         </div>
       </div>
-      <div class="flex items-center justify-center p-2">
+      <div class="flex items-center justify-center p-4">
         <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
           {#each colors as color}
             <div>
               <button on:click={() => dispatch('choose', color)}>
-                <UserAvatar {user} {color} size="xxl" showProfileImage={false} />
+                <UserAvatar {user} {color} size="xl" showProfileImage={false} />
               </button>
             </div>
           {/each}
diff --git a/web/src/lib/components/user-settings-page/user-profile-settings.svelte b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
index 51640b3e9..4b556afce 100644
--- a/web/src/lib/components/user-settings-page/user-profile-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
@@ -60,7 +60,7 @@
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
-        <div class="relative w-24 h-24 self-center md:self-start">
+        <div class="relative self-center md:self-start">
           {#key editingUser}
             <UserAvatar user={editingUser} size="xxl" showProfileImage={forceShowColor} />
           {/key}