diff --git a/resources/js/pages/Profile/Edit.vue b/resources/js/pages/Profile/Edit.vue
index eeddf51..d2bc8ee 100644
--- a/resources/js/pages/Profile/Edit.vue
+++ b/resources/js/pages/Profile/Edit.vue
@@ -153,7 +153,7 @@ const userInitials = computed(() => {
                             <!-- Loading Overlay -->
                             <div
                                 v-if="isUpdatingAvatar || isRemovingAvatar"
-                                class="absolute inset-0 flex items-center justify-center rounded-full bg-black/50"
+                                class="absolute inset-0 flex items-center justify-center rounded-xl bg-black/50"
                             >
                                 <Loader2
                                     class="size-8 animate-spin text-white"
@@ -178,7 +178,7 @@ const userInitials = computed(() => {
                                     !isRemovingAvatar
                                 "
                                 for="avatar-upload"
-                                class="bg-primary text-primary-foreground absolute right-0 bottom-0 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full shadow-md transition-transform hover:scale-110"
+                                class="bg-primary text-primary-foreground absolute right-0 bottom-0 flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl shadow-md transition-transform hover:scale-110"
                             >
                                 <Camera class="h-5 w-5" />
                             </label>
@@ -192,7 +192,7 @@ const userInitials = computed(() => {
                                 "
                                 type="button"
                                 @click="removeAvatar"
-                                class="absolute right-0 bottom-0 flex h-10 w-10 items-center justify-center rounded-full bg-red-500 text-white shadow-md transition-transform hover:scale-110"
+                                class="absolute right-0 bottom-0 flex h-10 w-10 items-center justify-center rounded-xl bg-red-500 text-white shadow-md transition-transform hover:scale-110"
                             >
                                 <Trash2 class="h-5 w-5" />
                             </button>
@@ -239,7 +239,7 @@ const userInitials = computed(() => {
                                 <Button
                                     type="submit"
                                     size="lg"
-                                    class="rounded-full"
+                                    class="rounded-xl"
                                 >
                                     {{ $t('Update Profile') }}
                                 </Button>
diff --git a/tests/e2e/tests/profile/avatar.spec.ts b/tests/e2e/tests/profile/avatar.spec.ts
index 45c381b..592a26d 100644
--- a/tests/e2e/tests/profile/avatar.spec.ts
+++ b/tests/e2e/tests/profile/avatar.spec.ts
@@ -22,7 +22,7 @@ test.describe('Profile Avatar', () => {
             buffer: tinyPng,
         });
 
-        const loadingOverlay = page.locator('div.rounded-full.bg-black\\/50');
+        const loadingOverlay = page.locator('div.rounded-xl.bg-black\\/50');
 
         // Spinner must appear while the upload request is in flight
         await expect(loadingOverlay).toBeVisible();
@@ -43,7 +43,7 @@ test.describe('Profile Avatar', () => {
         });
 
         // Wait for upload to complete
-        const loadingOverlay = page.locator('div.rounded-full.bg-black\\/50');
+        const loadingOverlay = page.locator('div.rounded-xl.bg-black\\/50');
         await expect(loadingOverlay).toBeVisible();
         await expect(loadingOverlay).not.toBeVisible({ timeout: 10000 });