diff --git a/MiniSpace.Web/src/Astravent.Web.Wasm/Areas/Students/StudentsService.cs b/MiniSpace.Web/src/Astravent.Web.Wasm/Areas/Students/StudentsService.cs
index aa4aac3e1..441923914 100644
--- a/MiniSpace.Web/src/Astravent.Web.Wasm/Areas/Students/StudentsService.cs
+++ b/MiniSpace.Web/src/Astravent.Web.Wasm/Areas/Students/StudentsService.cs
@@ -144,9 +144,6 @@ public async Task UpdateUserNotificationPreferencesAsync(Guid studentId, Notific
                 preferencesDto.FriendsNotifications
             };
 
-            var jsonData = JsonSerializer.Serialize(updatePreferencesData);
-            Console.WriteLine($"Sending UpdateUserNotificationPreferences request: {jsonData}");
-
             await _httpClient.PostAsync($"students/{studentId}/notifications", updatePreferencesData);
         }
 
diff --git a/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/NotificationsComponent.razor b/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/NotificationsSettingsComponent.razor
similarity index 84%
rename from MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/NotificationsComponent.razor
rename to MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/NotificationsSettingsComponent.razor
index 4eebcd3c9..a5720eba5 100644
--- a/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/NotificationsComponent.razor
+++ b/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/NotificationsSettingsComponent.razor
@@ -2,6 +2,7 @@
 @inject IIdentityService IdentityService
 @inject IStudentsService StudentsService
 @inject NavigationManager NavigationManager
+@inject ISnackbar Snackbar
 @using Astravent.Web.Wasm.DTO
 @using MudBlazor
 @using System.Text.Json
@@ -45,13 +46,13 @@ else
         IsLoading = true;
         try
         {
-            var studentId = IdentityService.GetCurrentUserId();
+            var studentId = await IdentityService.GetCurrentUserIdFromJwtAsync(); // Correct method to get user ID from JWT
             StudentWithGalleryImagesDto = await StudentsService.GetStudentWithGalleryImagesAsync(studentId);
             NotificationPreferencesDto = await StudentsService.GetUserNotificationPreferencesAsync(studentId);
         }
         catch (Exception ex)
         {
-            Console.WriteLine(ex.Message);
+            Snackbar.Add($"Error loading preferences: {ex.Message}", Severity.Error);
         }
         finally
         {
@@ -63,13 +64,13 @@ else
     {
         try
         {
-            var studentId = IdentityService.GetCurrentUserId();
+            var studentId = await IdentityService.GetCurrentUserIdFromJwtAsync(); // Correct method to get user ID from JWT
             await StudentsService.UpdateUserNotificationPreferencesAsync(studentId, NotificationPreferencesDto, StudentWithGalleryImagesDto.Student.EmailNotifications);
-            Console.WriteLine("Notification preferences updated successfully.");
+            Snackbar.Add("Notification preferences updated successfully.", Severity.Success);
         }
         catch (Exception ex)
         {
-            Console.WriteLine($"Error saving notification preferences: {ex.Message}");
+            Snackbar.Add($"Error saving notification preferences: {ex.Message}", Severity.Error);
         }
     }
 }
diff --git a/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/ShowAccount.razor b/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/ShowAccount.razor
index 0415db6ac..ee2506e9e 100644
--- a/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/ShowAccount.razor
+++ b/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/ShowAccount.razor
@@ -13,6 +13,7 @@
 @inject IMediaFilesService MediaFilesService
 @inject NavigationManager NavigationManager
 @inject AuthenticationStateProvider AuthenticationStateProvider
+@inject ISnackbar Snackbar
 
 <AuthWrapper>
     <MudContainer Class="account-container">
@@ -56,7 +57,7 @@
                     }
                     else if (activeTabIndex == 2)
                     {
-                        <NotificationsComponent IsLoading="isLoading" NotificationPreferencesDto="notificationPreferencesDto" StudentWithGalleryImagesDto="studentWithGalleryImagesDto" />
+                        <NotificationsSettingsComponent IsLoading="isLoading" NotificationPreferencesDto="notificationPreferencesDto" StudentWithGalleryImagesDto="studentWithGalleryImagesDto" />
                     }
                     else if (activeTabIndex == 3)
                     {
@@ -238,17 +239,26 @@
 
     private async Task SaveChanges()
     {
-        var studentDto = studentWithGalleryImagesDto.Student;
-        studentDto.Languages = selectedLanguages.ToList(); 
-        studentDto.Interests = selectedInterests.ToList();
+        try
+        {
+            var studentDto = studentWithGalleryImagesDto.Student;
+            studentDto.Languages = selectedLanguages.ToList(); 
+            studentDto.Interests = selectedInterests.ToList();
 
-        await StudentsService.UpdateStudentLanguagesAndInterestsAsync(
-            studentDto.Id,
-            studentDto.Languages,
-            studentDto.Interests
-        );
+            await StudentsService.UpdateStudentLanguagesAndInterestsAsync(
+                studentDto.Id,
+                studentDto.Languages,
+                studentDto.Interests
+            );
+
+            await StudentsService.UpdateStudentDto(studentDto.Id);
+            Snackbar.Add("Changes saved successfully.", Severity.Success);
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Failed to save changes: {ex.Message}", Severity.Error);
+        }
 
-        await StudentsService.UpdateStudentDto(studentDto.Id);
         StateHasChanged();
     }
 
@@ -258,18 +268,7 @@
         {
             var studentDto = studentWithGalleryImagesDto.Student;
 
-            foreach (var education in studentDto.Education)
-            {
-                Console.WriteLine($"Education StartDate: {education.StartDate}, EndDate: {education.EndDate}");
-            }
-
-            foreach (var work in studentDto.Work)
-            {
-                Console.WriteLine($"Work StartDate: {work.StartDate}, EndDate: {work.EndDate}");
-            }
-
-
-            // Ensure that StartDate and EndDate are handled correctly
+            // Handle dates for Education and Work
             foreach (var education in studentDto.Education)
             {
                 education.StartDate = education.StartDate != DateTime.MinValue ? education.StartDate : null;
@@ -282,30 +281,7 @@
                 work.EndDate = work.EndDate != DateTime.MinValue ? work.EndDate : null;
             }
 
-            var updateStudentData = new
-            {
-                studentDto.Id,
-                studentDto.FirstName,
-                studentDto.LastName,
-                studentDto.ProfileImageUrl,
-                studentDto.Description,
-                studentDto.EmailNotifications,
-                studentDto.ContactEmail,
-                studentDto.Languages,
-                studentDto.Interests,
-                studentDto.Education,
-                studentDto.Work,
-                studentDto.PhoneNumber,
-                studentDto.Country,
-                studentDto.City,
-                studentDto.DateOfBirth,
-                IsTwoFactorEnabled = isTwoFactorEnabled,
-                TwoFactorSecret = isTwoFactorEnabled ? twoFactorSecret : null
-            };
-
-            var jsonData = JsonSerializer.Serialize(updateStudentData);
-            Console.WriteLine($"Sending UpdateStudent request: {jsonData}");
-
+            // Update student details
             await StudentsService.UpdateStudentAsync(
                 studentDto.Id,
                 studentDto.FirstName,
@@ -327,19 +303,23 @@
                 studentDto.DateOfBirth
             );
 
+            // Update notification preferences
             if (studentDto.EmailNotifications)
             {
                 await StudentsService.UpdateUserNotificationPreferencesAsync(studentDto.Id, notificationPreferencesDto, studentDto.EmailNotifications);
             }
 
             await StudentsService.UpdateUserSettingsAsync(studentDto.Id, availableSettingsDto);
+
+            Snackbar.Add("Profile updated successfully.", Severity.Success);
         }
         catch (Exception ex)
         {
-            Console.WriteLine(ex.Message);
+            Snackbar.Add($"Failed to update profile: {ex.Message}", Severity.Error);
         }
-    }
 
+        StateHasChanged();
+    }
 
     private async Task SaveTwoFactorSettingsAsync()
     {
@@ -358,33 +338,37 @@
             {
                 await IdentityService.DisableTwoFactorAsync(IdentityService.GetCurrentUserId());
             }
+
+            Snackbar.Add("Two-factor authentication settings updated successfully.", Severity.Success);
         }
         catch (Exception ex)
         {
-            Console.WriteLine($"Error saving 2FA settings: {ex.Message}");
+            Snackbar.Add($"Failed to update two-factor authentication settings: {ex.Message}", Severity.Error);
         }
     }
 
     private async Task ToggleTwoFactor(bool enabled)
     {
-        isTwoFactorEnabled = enabled;
-        if (!enabled)
+        try
         {
-            await IdentityService.DisableTwoFactorAsync(IdentityService.GetCurrentUserId());
-            twoFactorSecret = null;
+            isTwoFactorEnabled = enabled;
+            if (!enabled)
+            {
+                await IdentityService.DisableTwoFactorAsync(IdentityService.GetCurrentUserId());
+                twoFactorSecret = null;
+            }
+            else
+            {
+                twoFactorSecret = await IdentityService.GenerateTwoFactorSecretAsync(IdentityService.GetCurrentUserId());
+            }
+
+            Snackbar.Add("Two-factor authentication toggled successfully.", Severity.Success);
+            StateHasChanged();
         }
-        else
+        catch (Exception ex)
         {
-            twoFactorSecret = await IdentityService.GenerateTwoFactorSecretAsync(IdentityService.GetCurrentUserId());
+            Snackbar.Add($"Failed to toggle two-factor authentication: {ex.Message}", Severity.Error);
         }
-        StateHasChanged();
-    }
-
-    private async Task GenerateTwoFactorSecret()
-    {
-        var userId = IdentityService.GetCurrentUserId();
-        twoFactorSecret = await IdentityService.GenerateTwoFactorSecretAsync(userId);
-        StateHasChanged();
     }
 
     private async Task SaveNotificationPreferencesAsync()
@@ -393,11 +377,11 @@
         {
             var studentId = IdentityService.GetCurrentUserId();
             await StudentsService.UpdateUserNotificationPreferencesAsync(studentId, notificationPreferencesDto, studentWithGalleryImagesDto.Student.EmailNotifications);
-            Console.WriteLine("Notification preferences updated successfully.");
+            Snackbar.Add("Notification preferences updated successfully.", Severity.Success);
         }
         catch (Exception ex)
         {
-            Console.WriteLine($"Error saving notification preferences: {ex.Message}");
+            Snackbar.Add($"Failed to update notification preferences: {ex.Message}", Severity.Error);
         }
     }
 
@@ -412,17 +396,14 @@
             }
 
             await StudentsService.UpdateUserSettingsAsync(studentId, availableSettingsDto);
-
-            Console.WriteLine("Student settings updated successfully.");
+            Snackbar.Add("User settings updated successfully.", Severity.Success);
         }
         catch (Exception ex)
         {
-            Console.WriteLine($"Error saving user settings: {ex.Message}");
+            Snackbar.Add($"Failed to update user settings: {ex.Message}", Severity.Error);
         }
     }
 
-
-
     private void SetActiveTabIndex(int index)
     {
         activeTabIndex = index;
diff --git a/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/UserSettingsComponent.razor b/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/UserSettingsComponent.razor
index 2ba2b0206..09aec162f 100644
--- a/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/UserSettingsComponent.razor
+++ b/MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Account/UserSettingsComponent.razor
@@ -9,130 +9,174 @@
 }
 else
 {
-    <MudGrid>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.CreatedAtVisibility" Label="Created At Visibility" Margin="Margin.Dense">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.DateOfBirthVisibility" Label="Date of Birth Visibility" Margin="Margin.Dense">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.InterestedInEventsVisibility" Label="Interested In Events Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.SignedUpEventsVisibility" Label="Signed Up Events Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.EducationVisibility" Label="Education Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.WorkPositionVisibility" Label="Work Position Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.LanguagesVisibility" Label="Languages Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.InterestsVisibility" Label="Interests Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.ContactEmailVisibility" Label="Contact Email Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.PhoneNumberVisibility" Label="Phone Number Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
+    <MudExpansionPanels>
+        <!-- Personal Information Settings -->
+        <MudExpansionPanel IsInitiallyExpanded="true" Text="Personal Information Settings">
+            <MudGrid>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.CreatedAtVisibility" Label="Created At Visibility" 
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.DateOfBirthVisibility" Label="Date of Birth Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.ContactEmailVisibility" Label="Contact Email Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.PhoneNumberVisibility" Label="Phone Number Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+            </MudGrid>
+        </MudExpansionPanel>
+
+        <!-- Events and Work Settings -->
+        <MudExpansionPanel IsInitiallyExpanded="true" Text="Events and Work Settings">
+            <MudGrid>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.InterestedInEventsVisibility" Label="Interested In Events Visibility" 
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.SignedUpEventsVisibility" Label="Signed Up Events Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.EducationVisibility" Label="Education Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.WorkPositionVisibility" Label="Work Position Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+            </MudGrid>
+        </MudExpansionPanel>
+
+        <!-- Language and Interests Settings -->
+        <MudExpansionPanel IsInitiallyExpanded="false" Text="Language and Interests Settings">
+            <MudGrid>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.LanguagesVisibility" Label="Languages Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.InterestsVisibility" Label="Interests Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+            </MudGrid>
+        </MudExpansionPanel>
+
+        <!-- Profile and Gallery Settings -->
+        <MudExpansionPanel IsInitiallyExpanded="false" Text="Profile and Gallery Settings">
+            <MudGrid>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.ProfileImageVisibility" Label="Profile Image Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.BannerImageVisibility" Label="Banner Image Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.GalleryVisibility" Label="Gallery Visibility"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
+                        {
+                            <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+            </MudGrid>
+        </MudExpansionPanel>
+
+        <!-- Interface Settings -->
+        <MudExpansionPanel IsInitiallyExpanded="false" Text="Interface Settings">
+            <MudGrid>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="PreferredLanguage" @bind-Value="AvailableSettingsDto.PreferredLanguage" Label="Preferred Language" HelperText="Preferred language for the interface"
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (PreferredLanguage language in Enum.GetValues(typeof(PreferredLanguage)))
+                        {
+                            <MudSelectItem Value="@language">@language</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudSelect T="FrontendVersion" @bind-Value="AvailableSettingsDto.FrontendVersion" Label="Frontend Version" 
+                        HelperText="Choose the frontend display mode (Auto, Dark, Light, etc.) that best suits your preference." 
+                        Margin="Margin.Dense" AdornmentIcon="@Icons.Material.Filled.KeyboardArrowDown" AdornmentColor="Color.Primary">
+                        @foreach (FrontendVersion version in Enum.GetValues(typeof(FrontendVersion)))
+                        {
+                            <MudSelectItem Value="@version">@version</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+            </MudGrid>
+        </MudExpansionPanel>
+    </MudExpansionPanels>
 
-         <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.ProfileImageVisibility" Label="Profile Image Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.BannerImageVisibility" Label="Banner Image Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="Visibility" @bind-Value="AvailableSettingsDto.GalleryVisibility" Label="Gallery Visibility">
-                @foreach (Visibility visibility in Enum.GetValues(typeof(Visibility)))
-                {
-                    <MudSelectItem Value="@visibility">@visibility</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        
-        <MudItem xs="12" sm="6">
-            <MudSelect T="PreferredLanguage" @bind-Value="AvailableSettingsDto.PreferredLanguage" Label="Preferred Language" HelperText="Preferred language for the interface">
-                @foreach (PreferredLanguage language in Enum.GetValues(typeof(PreferredLanguage)))
-                {
-                    <MudSelectItem Value="@language">@language</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-        <MudItem xs="12" sm="6">
-            <MudSelect T="FrontendVersion" @bind-Value="AvailableSettingsDto.FrontendVersion" Label="Frontend Version">
-                @foreach (FrontendVersion version in Enum.GetValues(typeof(FrontendVersion)))
-                {
-                    <MudSelectItem Value="@version">@version</MudSelectItem>
-                }
-            </MudSelect>
-        </MudItem>
-    </MudGrid>
     <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@SaveUserSettingsAsync">Save Settings</MudButton>
 }
 
diff --git a/MiniSpace.Web/src/Astravent.Web.Wasm/wwwroot/css/site.css b/MiniSpace.Web/src/Astravent.Web.Wasm/wwwroot/css/site.css
index 04e30bd94..26a030f7a 100644
--- a/MiniSpace.Web/src/Astravent.Web.Wasm/wwwroot/css/site.css
+++ b/MiniSpace.Web/src/Astravent.Web.Wasm/wwwroot/css/site.css
@@ -835,7 +835,8 @@ div.connectionRejected {
 }
 
 .upload-button-container {
-    text-align: center;
+    display: flex;
+    justify-content: center;
     margin-bottom: 20px;
 }