diff --git a/application/account-management/Api/Endpoints/TenantEndpoints.cs b/application/account-management/Api/Endpoints/TenantEndpoints.cs
index 9fc220fa4..a678c87a6 100644
--- a/application/account-management/Api/Endpoints/TenantEndpoints.cs
+++ b/application/account-management/Api/Endpoints/TenantEndpoints.cs
@@ -19,7 +19,7 @@ public void MapEndpoints(IEndpointRouteBuilder routes)
         ).Produces<TenantResponse>();
 
         group.MapPut("/current", async Task<ApiResult> (UpdateCurrentTenantCommand command, IMediator mediator)
-            => await mediator.Send(command)
+            => (await mediator.Send(command)).AddRefreshAuthenticationTokens()
         );
 
         routes.MapDelete("/internal-api/account-management/tenants/{id}", async Task<ApiResult> (TenantId id, IMediator mediator)
diff --git a/application/account-management/Api/Endpoints/UserEndpoints.cs b/application/account-management/Api/Endpoints/UserEndpoints.cs
index 1dd1c1d8b..4634741a3 100644
--- a/application/account-management/Api/Endpoints/UserEndpoints.cs
+++ b/application/account-management/Api/Endpoints/UserEndpoints.cs
@@ -18,6 +18,10 @@ public void MapEndpoints(IEndpointRouteBuilder routes)
             => await mediator.Send(query)
         ).Produces<UsersResponse>();
 
+        group.MapGet("/{id}", async Task<ApiResult<UserDetails>> (UserId id, IMediator mediator)
+            => await mediator.Send(new GetUserByIdQuery(id))
+        ).Produces<UserDetails>();
+
         group.MapGet("/summary", async Task<ApiResult<UserSummaryResponse>> (IMediator mediator)
             => await mediator.Send(new GetUserSummaryQuery())
         ).Produces<UserSummaryResponse>();
diff --git a/application/account-management/Core/Configuration.cs b/application/account-management/Core/Configuration.cs
index 4dfd2b52a..8ea37a419 100644
--- a/application/account-management/Core/Configuration.cs
+++ b/application/account-management/Core/Configuration.cs
@@ -30,6 +30,7 @@ public static IServiceCollection AddAccountManagementServices(this IServiceColle
 
         return services
             .AddSharedServices<AccountManagementDbContext>(Assembly)
-            .AddScoped<AvatarUpdater>();
+            .AddScoped<AvatarUpdater>()
+            .AddScoped<UserInfoFactory>();
     }
 }
diff --git a/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs b/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs
index 4a338d30d..aa69c28a9 100644
--- a/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs
+++ b/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs
@@ -1,11 +1,9 @@
 using JetBrains.Annotations;
-using Mapster;
 using PlatformPlatform.AccountManagement.Features.Authentication.Domain;
 using PlatformPlatform.AccountManagement.Features.EmailConfirmations.Commands;
 using PlatformPlatform.AccountManagement.Features.Users.Domain;
 using PlatformPlatform.AccountManagement.Features.Users.Shared;
 using PlatformPlatform.AccountManagement.Integrations.Gravatar;
-using PlatformPlatform.SharedKernel.Authentication;
 using PlatformPlatform.SharedKernel.Authentication.TokenGeneration;
 using PlatformPlatform.SharedKernel.Cqrs;
 using PlatformPlatform.SharedKernel.Telemetry;
@@ -22,6 +20,7 @@ public sealed record CompleteLoginCommand(string OneTimePassword) : ICommand, IR
 public sealed class CompleteLoginHandler(
     IUserRepository userRepository,
     ILoginRepository loginRepository,
+    UserInfoFactory userInfoFactory,
     AuthenticationTokenService authenticationTokenService,
     IMediator mediator,
     AvatarUpdater avatarUpdater,
@@ -75,7 +74,8 @@ public async Task<Result> Handle(CompleteLoginCommand command, CancellationToken
         login.MarkAsCompleted();
         loginRepository.Update(login);
 
-        authenticationTokenService.CreateAndSetAuthenticationTokens(user.Adapt<UserInfo>());
+        var userInfo = await userInfoFactory.CreateUserInfoAsync(user, cancellationToken);
+        authenticationTokenService.CreateAndSetAuthenticationTokens(userInfo);
 
         events.CollectEvent(new LoginCompleted(user.Id, completeEmailConfirmationResult.Value!.ConfirmationTimeInSeconds));
 
diff --git a/application/account-management/Core/Features/Authentication/Commands/RefreshAuthenticationTokens.cs b/application/account-management/Core/Features/Authentication/Commands/RefreshAuthenticationTokens.cs
index 3b21c8742..5cfe2757c 100644
--- a/application/account-management/Core/Features/Authentication/Commands/RefreshAuthenticationTokens.cs
+++ b/application/account-management/Core/Features/Authentication/Commands/RefreshAuthenticationTokens.cs
@@ -1,10 +1,9 @@
 using System.IdentityModel.Tokens.Jwt;
 using System.Security.Claims;
 using JetBrains.Annotations;
-using Mapster;
 using Microsoft.AspNetCore.Http;
 using PlatformPlatform.AccountManagement.Features.Users.Domain;
-using PlatformPlatform.SharedKernel.Authentication;
+using PlatformPlatform.AccountManagement.Features.Users.Shared;
 using PlatformPlatform.SharedKernel.Authentication.TokenGeneration;
 using PlatformPlatform.SharedKernel.Cqrs;
 using PlatformPlatform.SharedKernel.Domain;
@@ -17,6 +16,7 @@ public sealed record RefreshAuthenticationTokensCommand : ICommand, IRequest<Res
 
 public sealed class RefreshAuthenticationTokensHandler(
     IUserRepository userRepository,
+    UserInfoFactory userInfoFactory,
     IHttpContextAccessor httpContextAccessor,
     AuthenticationTokenService authenticationTokenService,
     ITelemetryEventsCollector events,
@@ -77,7 +77,8 @@ public async Task<Result> Handle(RefreshAuthenticationTokensCommand command, Can
 
         // TODO: Check if the refreshTokenId exists in the database and if the jwtId and refreshTokenVersion are valid
 
-        authenticationTokenService.RefreshAuthenticationTokens(user.Adapt<UserInfo>(), refreshTokenId, refreshTokenVersion, refreshTokenExpires);
+        var userInfo = await userInfoFactory.CreateUserInfoAsync(user, cancellationToken);
+        authenticationTokenService.RefreshAuthenticationTokens(userInfo, refreshTokenId, refreshTokenVersion, refreshTokenExpires);
         events.CollectEvent(new AuthenticationTokensRefreshed());
 
         return Result.Success();
diff --git a/application/account-management/Core/Features/Signups/Commands/CompleteSignup.cs b/application/account-management/Core/Features/Signups/Commands/CompleteSignup.cs
index 697039e56..293544752 100644
--- a/application/account-management/Core/Features/Signups/Commands/CompleteSignup.cs
+++ b/application/account-management/Core/Features/Signups/Commands/CompleteSignup.cs
@@ -1,10 +1,9 @@
 using JetBrains.Annotations;
-using Mapster;
 using PlatformPlatform.AccountManagement.Features.EmailConfirmations.Commands;
 using PlatformPlatform.AccountManagement.Features.EmailConfirmations.Domain;
 using PlatformPlatform.AccountManagement.Features.Tenants.Commands;
 using PlatformPlatform.AccountManagement.Features.Users.Domain;
-using PlatformPlatform.SharedKernel.Authentication;
+using PlatformPlatform.AccountManagement.Features.Users.Shared;
 using PlatformPlatform.SharedKernel.Authentication.TokenGeneration;
 using PlatformPlatform.SharedKernel.Cqrs;
 using PlatformPlatform.SharedKernel.Telemetry;
@@ -20,6 +19,7 @@ public sealed record CompleteSignupCommand(string OneTimePassword, string Prefer
 
 public sealed class CompleteSignupHandler(
     IUserRepository userRepository,
+    UserInfoFactory userInfoFactory,
     AuthenticationTokenService authenticationTokenService,
     IMediator mediator,
     ITelemetryEventsCollector events
@@ -42,7 +42,8 @@ public async Task<Result> Handle(CompleteSignupCommand command, CancellationToke
         if (!createTenantResult.IsSuccess) return Result.From(createTenantResult);
 
         var user = await userRepository.GetByIdAsync(createTenantResult.Value!.UserId, cancellationToken);
-        authenticationTokenService.CreateAndSetAuthenticationTokens(user!.Adapt<UserInfo>());
+        var userInfo = await userInfoFactory.CreateUserInfoAsync(user!, cancellationToken);
+        authenticationTokenService.CreateAndSetAuthenticationTokens(userInfo);
 
         events.CollectEvent(
             new SignupCompleted(createTenantResult.Value.TenantId, completeEmailConfirmationResult.Value!.ConfirmationTimeInSeconds)
diff --git a/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs b/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs
index 487ec7127..0e23a76d3 100644
--- a/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs
+++ b/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs
@@ -1,7 +1,9 @@
 using FluentValidation;
 using JetBrains.Annotations;
 using PlatformPlatform.AccountManagement.Features.Tenants.Domain;
+using PlatformPlatform.AccountManagement.Features.Users.Domain;
 using PlatformPlatform.SharedKernel.Cqrs;
+using PlatformPlatform.SharedKernel.ExecutionContext;
 using PlatformPlatform.SharedKernel.Telemetry;
 
 namespace PlatformPlatform.AccountManagement.Features.Tenants.Commands;
@@ -20,11 +22,19 @@ public UpdateCurrentTenantValidator()
     }
 }
 
-public sealed class UpdateTenantHandler(ITenantRepository tenantRepository, ITelemetryEventsCollector events)
-    : IRequestHandler<UpdateCurrentTenantCommand, Result>
+public sealed class UpdateTenantHandler(
+    ITenantRepository tenantRepository,
+    IExecutionContext executionContext,
+    ITelemetryEventsCollector events
+) : IRequestHandler<UpdateCurrentTenantCommand, Result>
 {
     public async Task<Result> Handle(UpdateCurrentTenantCommand command, CancellationToken cancellationToken)
     {
+        if (executionContext.UserInfo.Role != UserRole.Owner.ToString())
+        {
+            return Result.Forbidden("Only owners are allowed to update tenant information.");
+        }
+
         var tenant = await tenantRepository.GetCurrentTenantAsync(cancellationToken);
 
         tenant.Update(command.Name);
diff --git a/application/account-management/Core/Features/Users/Domain/UserRepository.cs b/application/account-management/Core/Features/Users/Domain/UserRepository.cs
index bd9dcf842..561d1a096 100644
--- a/application/account-management/Core/Features/Users/Domain/UserRepository.cs
+++ b/application/account-management/Core/Features/Users/Domain/UserRepository.cs
@@ -158,8 +158,16 @@ CancellationToken cancellationToken
                 ? users.OrderBy(u => u.ModifiedAt)
                 : users.OrderByDescending(u => u.ModifiedAt),
             SortableUserProperties.Name => sortOrder == SortOrder.Ascending
-                ? users.OrderBy(u => u.FirstName).ThenBy(u => u.LastName)
-                : users.OrderByDescending(u => u.FirstName).ThenByDescending(u => u.LastName),
+                ? users.OrderBy(u => u.FirstName == null ? 1 : 0)
+                    .ThenBy(u => u.FirstName)
+                    .ThenBy(u => u.LastName == null ? 1 : 0)
+                    .ThenBy(u => u.LastName)
+                    .ThenBy(u => u.Email)
+                : users.OrderBy(u => u.FirstName == null ? 0 : 1)
+                    .ThenByDescending(u => u.FirstName)
+                    .ThenBy(u => u.LastName == null ? 0 : 1)
+                    .ThenByDescending(u => u.LastName)
+                    .ThenBy(u => u.Email),
             SortableUserProperties.Email => sortOrder == SortOrder.Ascending
                 ? users.OrderBy(u => u.Email)
                 : users.OrderByDescending(u => u.Email),
@@ -167,6 +175,11 @@ CancellationToken cancellationToken
                 ? users.OrderBy(u => u.Role)
                 : users.OrderByDescending(u => u.Role),
             _ => users
+                .OrderBy(u => u.FirstName == null ? 1 : 0)
+                .ThenBy(u => u.FirstName)
+                .ThenBy(u => u.LastName == null ? 1 : 0)
+                .ThenBy(u => u.LastName)
+                .ThenBy(u => u.Email)
         };
 
         pageSize ??= 50;
diff --git a/application/account-management/Core/Features/Users/Queries/GetUserById.cs b/application/account-management/Core/Features/Users/Queries/GetUserById.cs
new file mode 100644
index 000000000..caf448d21
--- /dev/null
+++ b/application/account-management/Core/Features/Users/Queries/GetUserById.cs
@@ -0,0 +1,26 @@
+using JetBrains.Annotations;
+using Mapster;
+using PlatformPlatform.AccountManagement.Features.Users.Domain;
+using PlatformPlatform.SharedKernel.Cqrs;
+using PlatformPlatform.SharedKernel.Domain;
+
+namespace PlatformPlatform.AccountManagement.Features.Users.Queries;
+
+[PublicAPI]
+public sealed record GetUserByIdQuery(UserId Id) : IRequest<Result<UserDetails>>;
+
+public sealed class GetUserByIdHandler(IUserRepository userRepository)
+    : IRequestHandler<GetUserByIdQuery, Result<UserDetails>>
+{
+    public async Task<Result<UserDetails>> Handle(GetUserByIdQuery query, CancellationToken cancellationToken)
+    {
+        var user = await userRepository.GetByIdAsync(query.Id, cancellationToken);
+
+        if (user is null)
+        {
+            return Result<UserDetails>.NotFound($"User with ID '{query.Id}' not found.");
+        }
+
+        return user.Adapt<UserDetails>();
+    }
+}
diff --git a/application/account-management/Core/Features/Users/Shared/UserInfoFactory.cs b/application/account-management/Core/Features/Users/Shared/UserInfoFactory.cs
new file mode 100644
index 000000000..46a78941f
--- /dev/null
+++ b/application/account-management/Core/Features/Users/Shared/UserInfoFactory.cs
@@ -0,0 +1,38 @@
+using PlatformPlatform.AccountManagement.Features.Tenants.Domain;
+using PlatformPlatform.AccountManagement.Features.Users.Domain;
+using PlatformPlatform.SharedKernel.Authentication;
+
+namespace PlatformPlatform.AccountManagement.Features.Users.Shared;
+
+/// <summary>
+///     Factory for creating UserInfo instances with tenant information.
+///     Centralizes the logic for creating UserInfo to follow SRP and avoid duplication.
+/// </summary>
+public sealed class UserInfoFactory(ITenantRepository tenantRepository)
+{
+    /// <summary>
+    ///     Creates a UserInfo instance from a User entity, including tenant name.
+    /// </summary>
+    /// <param name="user">The user entity</param>
+    /// <param name="cancellationToken">Cancellation token</param>
+    /// <returns>UserInfo with all required properties including tenant name</returns>
+    public async Task<UserInfo> CreateUserInfoAsync(User user, CancellationToken cancellationToken)
+    {
+        var tenant = await tenantRepository.GetByIdAsync(user.TenantId, cancellationToken);
+
+        return new UserInfo
+        {
+            IsAuthenticated = true,
+            Id = user.Id,
+            TenantId = user.TenantId,
+            Role = user.Role.ToString(),
+            Email = user.Email,
+            FirstName = user.FirstName,
+            LastName = user.LastName,
+            Title = user.Title,
+            AvatarUrl = user.Avatar.Url,
+            TenantName = tenant?.Name,
+            Locale = user.Locale
+        };
+    }
+}
diff --git a/application/account-management/Tests/Tenants/UpdateCurrentTenantTests.cs b/application/account-management/Tests/Tenants/UpdateCurrentTenantTests.cs
index a34bc4681..7b9c4fd1e 100644
--- a/application/account-management/Tests/Tenants/UpdateCurrentTenantTests.cs
+++ b/application/account-management/Tests/Tenants/UpdateCurrentTenantTests.cs
@@ -47,4 +47,19 @@ public async Task UpdateCurrentTenant_WhenInvalid_ShouldReturnBadRequest()
 
         TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse();
     }
+
+    [Fact]
+    public async Task UpdateCurrentTenant_WhenNonOwner_ShouldReturnForbidden()
+    {
+        // Arrange
+        var command = new UpdateCurrentTenantCommand { Name = Faker.TenantName() };
+
+        // Act
+        var response = await AuthenticatedMemberHttpClient.PutAsJsonAsync("/api/account-management/tenants/current", command);
+
+        // Assert
+        await response.ShouldHaveErrorStatusCode(HttpStatusCode.Forbidden, "Only owners are allowed to update tenant information.");
+
+        TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse();
+    }
 }
diff --git a/application/account-management/Tests/Users/GetUserByIdTests.cs b/application/account-management/Tests/Users/GetUserByIdTests.cs
new file mode 100644
index 000000000..a94150c45
--- /dev/null
+++ b/application/account-management/Tests/Users/GetUserByIdTests.cs
@@ -0,0 +1,85 @@
+using System.Net;
+using System.Text.Json;
+using FluentAssertions;
+using PlatformPlatform.AccountManagement.Database;
+using PlatformPlatform.AccountManagement.Features.Users.Domain;
+using PlatformPlatform.AccountManagement.Features.Users.Queries;
+using PlatformPlatform.SharedKernel.Domain;
+using PlatformPlatform.SharedKernel.Tests;
+using PlatformPlatform.SharedKernel.Tests.Persistence;
+using Xunit;
+
+namespace PlatformPlatform.AccountManagement.Tests.Users;
+
+public sealed class GetUserByIdTests : EndpointBaseTest<AccountManagementDbContext>
+{
+    private readonly UserId _userId = UserId.NewId();
+
+    public GetUserByIdTests()
+    {
+        Connection.Insert("Users", [
+                ("TenantId", DatabaseSeeder.Tenant1.Id.ToString()),
+                ("Id", _userId.ToString()),
+                ("CreatedAt", TimeProvider.System.GetUtcNow().AddMinutes(-10)),
+                ("ModifiedAt", null),
+                ("Email", Faker.Internet.Email()),
+                ("FirstName", Faker.Name.FirstName()),
+                ("LastName", Faker.Name.LastName()),
+                ("Title", Faker.Name.JobTitle()),
+                ("Role", UserRole.Member.ToString()),
+                ("EmailConfirmed", true),
+                ("Avatar", JsonSerializer.Serialize(new Avatar())),
+                ("Locale", "en-US")
+            ]
+        );
+    }
+
+    [Fact]
+    public async Task GetUserById_WhenUserExists_ShouldReturnUserDetails()
+    {
+        // Act
+        var response = await AuthenticatedOwnerHttpClient.GetAsync($"/api/account-management/users/{_userId}");
+
+        // Assert
+        response.ShouldBeSuccessfulGetRequest();
+        var userDetails = await response.DeserializeResponse<UserDetails>();
+        userDetails.Should().NotBeNull();
+        userDetails.Id.Should().Be(_userId);
+    }
+
+    [Fact]
+    public async Task GetUserById_WhenUserDoesNotExist_ShouldReturnNotFound()
+    {
+        // Arrange
+        var nonExistentUserId = UserId.NewId();
+
+        // Act
+        var response = await AuthenticatedOwnerHttpClient.GetAsync($"/api/account-management/users/{nonExistentUserId}");
+
+        // Assert
+        await response.ShouldHaveErrorStatusCode(HttpStatusCode.NotFound, $"User with ID '{nonExistentUserId}' not found.");
+    }
+
+    [Fact]
+    public async Task GetUserById_WhenMemberTriesToAccessOtherUser_ShouldSucceed()
+    {
+        // Act
+        var response = await AuthenticatedMemberHttpClient.GetAsync($"/api/account-management/users/{_userId}");
+
+        // Assert
+        response.ShouldBeSuccessfulGetRequest();
+        var userDetails = await response.DeserializeResponse<UserDetails>();
+        userDetails.Should().NotBeNull();
+        userDetails.Id.Should().Be(_userId);
+    }
+
+    [Fact]
+    public async Task GetUserById_WhenNotAuthenticated_ShouldReturnUnauthorized()
+    {
+        // Act
+        var response = await AnonymousHttpClient.GetAsync($"/api/account-management/users/{_userId}");
+
+        // Assert
+        response.StatusCode.Should().Be(HttpStatusCode.Unauthorized);
+    }
+}
diff --git a/application/account-management/WebApp/routes/admin/account/index.tsx b/application/account-management/WebApp/routes/admin/account/index.tsx
index cafbdff78..23aa21891 100644
--- a/application/account-management/WebApp/routes/admin/account/index.tsx
+++ b/application/account-management/WebApp/routes/admin/account/index.tsx
@@ -1,7 +1,7 @@
 import { SharedSideMenu } from "@/shared/components/SharedSideMenu";
 import { TopMenu } from "@/shared/components/topMenu";
 import logoWrap from "@/shared/images/logo-wrap.svg";
-import { api } from "@/shared/lib/api/client";
+import { UserRole, api } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AppLayout } from "@repo/ui/components/AppLayout";
@@ -23,9 +23,12 @@ export const Route = createFileRoute("/admin/account/")({
 
 export function AccountSettings() {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const { data: tenant, isLoading } = api.useQuery("get", "/api/account-management/tenants/current");
+  const { data: tenant, isLoading: tenantLoading } = api.useQuery("get", "/api/account-management/tenants/current");
+  const { data: currentUser, isLoading: userLoading } = api.useQuery("get", "/api/account-management/users/me");
   const updateCurrentTenantMutation = api.useMutation("put", "/api/account-management/tenants/current");
 
+  const isOwner = currentUser?.role === UserRole.Owner;
+
   useEffect(() => {
     if (updateCurrentTenantMutation.isSuccess) {
       toastQueue.add({
@@ -36,7 +39,7 @@ export function AccountSettings() {
     }
   }, [updateCurrentTenantMutation.isSuccess]);
 
-  if (isLoading) {
+  if (tenantLoading || userLoading) {
     return null;
   }
 
@@ -64,8 +67,8 @@ export function AccountSettings() {
         </p>
 
         <Form
-          onSubmit={mutationSubmitter(updateCurrentTenantMutation)}
-          validationErrors={updateCurrentTenantMutation.error?.errors}
+          onSubmit={isOwner ? mutationSubmitter(updateCurrentTenantMutation) : undefined}
+          validationErrors={isOwner ? updateCurrentTenantMutation.error?.errors : undefined}
           validationBehavior="aria"
           className="flex flex-col gap-4"
         >
@@ -83,30 +86,36 @@ export function AccountSettings() {
             name="name"
             defaultValue={tenant?.name ?? ""}
             isDisabled={updateCurrentTenantMutation.isPending}
+            isReadOnly={!isOwner}
             label={t`Account name`}
+            description={!isOwner ? t`Only account owners can modify the account name` : undefined}
             validationBehavior="aria"
           />
-          <Button type="submit" className="mt-4" isDisabled={updateCurrentTenantMutation.isPending}>
-            {updateCurrentTenantMutation.isPending ? <Trans>Saving...</Trans> : <Trans>Save changes</Trans>}
-          </Button>
+          {isOwner && (
+            <Button type="submit" className="mt-4" isDisabled={updateCurrentTenantMutation.isPending}>
+              {updateCurrentTenantMutation.isPending ? <Trans>Saving...</Trans> : <Trans>Save changes</Trans>}
+            </Button>
+          )}
         </Form>
 
-        <div className="mt-6 flex flex-col gap-4">
-          <h2>
-            <Trans>Danger zone</Trans>
-          </h2>
-          <Separator />
-          <div className="flex flex-col gap-4">
-            <p>
-              <Trans>Delete your account and all data. This action is irreversible—proceed with caution.</Trans>
-            </p>
+        {isOwner && (
+          <div className="mt-6 flex flex-col gap-4">
+            <h2>
+              <Trans>Danger zone</Trans>
+            </h2>
+            <Separator />
+            <div className="flex flex-col gap-4">
+              <p>
+                <Trans>Delete your account and all data. This action is irreversible—proceed with caution.</Trans>
+              </p>
 
-            <Button variant="destructive" onPress={() => setIsDeleteModalOpen(true)} className="w-fit">
-              <Trash2 />
-              <Trans>Delete account</Trans>
-            </Button>
+              <Button variant="destructive" onPress={() => setIsDeleteModalOpen(true)} className="w-fit">
+                <Trash2 />
+                <Trans>Delete account</Trans>
+              </Button>
+            </div>
           </div>
-        </div>
+        )}
       </AppLayout>
 
       <DeleteAccountConfirmation isOpen={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen} />
diff --git a/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
index 3c15d022b..fbf60fc6f 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/ChangeUserRoleDialog.tsx
@@ -3,10 +3,11 @@ import { getUserRoleLabel } from "@/shared/lib/api/userRole";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AlertDialog } from "@repo/ui/components/AlertDialog";
+import { Button } from "@repo/ui/components/Button";
 import { Modal } from "@repo/ui/components/Modal";
 import { Select, SelectItem } from "@repo/ui/components/Select";
 import { toastQueue } from "@repo/ui/components/Toast";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 type UserDetails = components["schemas"]["UserDetails"];
 
@@ -17,29 +18,38 @@ interface ChangeUserRoleDialogProps {
 }
 
 export function ChangeUserRoleDialog({ user, isOpen, onOpenChange }: Readonly<ChangeUserRoleDialogProps>) {
+  const [selectedRole, setSelectedRole] = useState<UserRole | null>(null);
   const changeUserRoleMutation = api.useMutation("put", "/api/account-management/users/{id}/change-user-role");
 
-  const handleUserRoleChange = useCallback(
-    async (newUserRole: UserRole) => {
-      if (!user) {
-        return null;
-      }
+  const handleConfirm = useCallback(async () => {
+    if (!user || !selectedRole) {
+      return;
+    }
 
-      changeUserRoleMutation
-        .mutateAsync({ params: { path: { id: user.id } }, body: { userRole: newUserRole } })
-        .then(() => {
-          const userDisplayName = `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email;
-          toastQueue.add({
-            title: t`Success`,
-            description: t`User role updated successfully for ${userDisplayName}`,
-            variant: "success"
-          });
+    try {
+      await changeUserRoleMutation.mutateAsync({
+        params: { path: { id: user.id } },
+        body: { userRole: selectedRole }
+      });
 
-          onOpenChange(false);
-        });
-    },
-    [user, changeUserRoleMutation, onOpenChange]
-  );
+      const userDisplayName = `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email;
+      toastQueue.add({
+        title: t`Success`,
+        description: t`User role updated successfully for ${userDisplayName}`,
+        variant: "success"
+      });
+
+      onOpenChange(false);
+      setSelectedRole(null);
+    } catch (_error) {
+      // Error is handled by the mutation
+    }
+  }, [user, selectedRole, changeUserRoleMutation, onOpenChange]);
+
+  const handleCancel = useCallback(() => {
+    onOpenChange(false);
+    setSelectedRole(null);
+  }, [onOpenChange]);
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} blur={false} isDismissable={true}>
@@ -55,8 +65,8 @@ export function ChangeUserRoleDialog({ user, isOpen, onOpenChange }: Readonly<Ch
           <Select
             autoFocus={true}
             aria-label={t`User role`}
-            selectedKey={user?.role}
-            onSelectionChange={(key) => handleUserRoleChange(key as UserRole)}
+            selectedKey={selectedRole || user?.role}
+            onSelectionChange={(key) => setSelectedRole(key as UserRole)}
             className="flex w-full flex-col"
           >
             {Object.values(UserRole).map((userRole) => (
@@ -65,6 +75,15 @@ export function ChangeUserRoleDialog({ user, isOpen, onOpenChange }: Readonly<Ch
               </SelectItem>
             ))}
           </Select>
+
+          <div className="mt-4 flex justify-end gap-4">
+            <Button variant="outline" onPress={handleCancel}>
+              {t`Cancel`}
+            </Button>
+            <Button variant="primary" onPress={handleConfirm} isDisabled={!selectedRole || selectedRole === user?.role}>
+              {t`OK`}
+            </Button>
+          </div>
         </div>
       </AlertDialog>
     </Modal>
diff --git a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
index fe1089e12..65674d353 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx
@@ -39,7 +39,7 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly<Invi
           <Trans>Invite user</Trans>
         </Heading>
         <p className="text-muted-foreground text-sm">
-          <Trans>An invitation email will be sent to the user with a link to log in.</Trans>
+          <Trans>An email with login instructions will be sent to the user.</Trans>
         </p>
 
         <Form
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
new file mode 100644
index 000000000..323825fed
--- /dev/null
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx
@@ -0,0 +1,321 @@
+import type { components } from "@/shared/lib/api/client";
+import { getUserRoleLabel } from "@/shared/lib/api/userRole";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { useUserInfo } from "@repo/infrastructure/auth/hooks";
+import { Avatar } from "@repo/ui/components/Avatar";
+import { Badge } from "@repo/ui/components/Badge";
+import { Button } from "@repo/ui/components/Button";
+import { Heading } from "@repo/ui/components/Heading";
+import { Separator } from "@repo/ui/components/Separator";
+import { Text } from "@repo/ui/components/Text";
+import { MEDIA_QUERIES } from "@repo/ui/utils/responsive";
+import { formatDate } from "@repo/utils/date/formatDate";
+import { getInitials } from "@repo/utils/string/getInitials";
+import { InfoIcon, Trash2Icon, XIcon } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { ChangeUserRoleDialog } from "./ChangeUserRoleDialog";
+
+type UserDetails = components["schemas"]["UserDetails"];
+
+interface UserProfileSidePaneProps {
+  user: UserDetails | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onDeleteUser: (user: UserDetails) => void;
+  isUserInCurrentView?: boolean;
+  isDataNewer?: boolean;
+  isLoading?: boolean;
+}
+
+function UserProfileContent({
+  user,
+  canModifyUser,
+  onChangeRole
+}: Readonly<{
+  user: UserDetails;
+  canModifyUser: boolean;
+  onChangeRole: () => void;
+}>) {
+  return (
+    <>
+      {/* User Avatar and Basic Info */}
+      <div className="mb-6 text-center">
+        <Avatar
+          initials={getInitials(user.firstName, user.lastName, user.email)}
+          avatarUrl={user.avatarUrl}
+          size="lg"
+          isRound={true}
+          className="mx-auto mb-3"
+        />
+        <Heading level={3} className="font-semibold text-lg">
+          {user.firstName} {user.lastName}
+        </Heading>
+        {user.title && <Text className="text-muted-foreground text-sm">{user.title}</Text>}
+      </div>
+
+      {/* Contact Information */}
+      <div className="mb-4">
+        <div className="space-y-2">
+          <div className="flex items-start justify-between">
+            <Text className="text-sm">
+              <Trans>Email</Trans>
+            </Text>
+            <div className="flex flex-col items-end gap-1">
+              <Text className="text-right text-sm">{user.email}</Text>
+              {user.emailConfirmed ? (
+                <Badge variant="success" className="text-xs">
+                  <Trans>Verified</Trans>
+                </Badge>
+              ) : (
+                <Badge variant="outline" className="text-xs">
+                  <Trans>Pending</Trans>
+                </Badge>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Separator className="mb-4" />
+
+      {/* Role Information */}
+      <div className="mb-4 flex items-center justify-between">
+        <Heading level={4} className="font-medium text-sm">
+          <Trans>Role</Trans>
+        </Heading>
+        {canModifyUser ? (
+          <Button
+            variant="ghost"
+            className="h-auto p-0 text-xs"
+            onPress={onChangeRole}
+            aria-label={t`Change user role for ${`${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email}`}
+          >
+            <Badge
+              variant="outline"
+              className="cursor-pointer text-xs transition-all duration-200 hover:scale-105 hover:bg-muted hover:shadow-sm"
+            >
+              {getUserRoleLabel(user.role)}
+            </Badge>
+          </Button>
+        ) : (
+          <Badge variant="outline" className="text-xs">
+            {getUserRoleLabel(user.role)}
+          </Badge>
+        )}
+      </div>
+
+      <Separator className="mb-4" />
+
+      {/* Account Details */}
+      <div className="mb-4">
+        <div className="space-y-4">
+          <div className="flex justify-between">
+            <Text className="text-sm">
+              <Trans>Created</Trans>
+            </Text>
+            <Text className="text-sm">{formatDate(user.createdAt, true)}</Text>
+          </div>
+          <div className="flex justify-between">
+            <Text className="text-sm">
+              <Trans>Modified</Trans>
+            </Text>
+            <Text className="text-sm">{formatDate(user.modifiedAt, true)}</Text>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function useSidePaneAccessibility(
+  isOpen: boolean,
+  onClose: () => void,
+  sidePaneRef: React.RefObject<HTMLDivElement | null>,
+  closeButtonRef: React.RefObject<SVGSVGElement | null>
+) {
+  useEffect(() => {
+    const isMobileScreen = !window.matchMedia(MEDIA_QUERIES.sm).matches;
+    if (isOpen && closeButtonRef.current && isMobileScreen) {
+      closeButtonRef.current.focus();
+    }
+  }, [isOpen, closeButtonRef]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    const isMobileScreen = !window.matchMedia(MEDIA_QUERIES.sm).matches;
+    if (!isOpen || !sidePaneRef.current || !isMobileScreen) {
+      return;
+    }
+
+    const focusableElements = sidePaneRef.current.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    const firstElement = focusableElements[0] as HTMLElement;
+    const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+    const handleTabKey = (event: KeyboardEvent) => {
+      if (event.key !== "Tab") {
+        return;
+      }
+
+      const isShiftTab = event.shiftKey;
+      const activeElement = document.activeElement;
+
+      if (isShiftTab && activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!isShiftTab && activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    };
+
+    document.addEventListener("keydown", handleTabKey);
+    return () => document.removeEventListener("keydown", handleTabKey);
+  }, [isOpen, sidePaneRef]);
+}
+
+export function UserProfileSidePane({
+  user,
+  isOpen,
+  onClose,
+  onDeleteUser,
+  isUserInCurrentView = true,
+  isDataNewer = false,
+  isLoading = false
+}: Readonly<UserProfileSidePaneProps>) {
+  const userInfo = useUserInfo();
+  const sidePaneRef = useRef<HTMLDivElement>(null);
+  const closeButtonRef = useRef<SVGSVGElement>(null);
+  const [isChangeRoleDialogOpen, setIsChangeRoleDialogOpen] = useState(false);
+
+  useSidePaneAccessibility(isOpen, onClose, sidePaneRef, closeButtonRef);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const isCurrentUser = user?.id === userInfo?.id;
+  const canModifyUser = userInfo?.role === "Owner" && !isCurrentUser;
+
+  return (
+    <>
+      {/* Side pane */}
+      <aside
+        ref={sidePaneRef}
+        className="relative flex h-full w-full flex-col border-border border-l bg-background"
+        aria-label={t`User profile details`}
+      >
+        {/* Close button - positioned like modal dialogs */}
+        <XIcon
+          ref={closeButtonRef}
+          onClick={onClose}
+          className="absolute top-3 right-2 z-10 h-10 w-10 cursor-pointer p-2 hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label={t`Close user profile`}
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onClose();
+            }
+          }}
+        />
+
+        <div className="h-16 border-border border-t border-b bg-muted/30 px-4 py-8 backdrop-blur-sm">
+          <Heading level={2} className="flex h-full items-center font-semibold text-base">
+            <Trans>User profile</Trans>
+          </Heading>
+        </div>
+
+        {/* Notice when user is not in current filtered view */}
+        {!isUserInCurrentView && (
+          <div className="border-border border-b bg-muted px-4 py-3">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <InfoIcon className="h-4 w-4 flex-shrink-0" />
+              <Text className="font-medium text-sm">
+                <Trans>User not in current view</Trans>
+              </Text>
+            </div>
+          </div>
+        )}
+
+        {/* Notice when data is different from table */}
+        {isDataNewer && (
+          <div className="border-border border-b bg-muted px-4 py-3">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <InfoIcon className="h-4 w-4 flex-shrink-0" />
+              <Text className="font-medium text-sm">
+                <Trans>User data updated</Trans>
+              </Text>
+            </div>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto">
+          {isLoading ? (
+            <div className="p-4">
+              {/* Avatar skeleton matching exact position */}
+              <div className="mb-6 text-center">
+                <div className="mx-auto mb-3 h-20 w-20 animate-pulse rounded-full bg-muted" />
+                <div className="mx-auto mb-2 h-6 w-32 animate-pulse rounded bg-muted" />
+                <div className="mx-auto h-4 w-24 animate-pulse rounded bg-muted" />
+              </div>
+
+              {/* Single block for all other content */}
+              <div className="h-64 w-full animate-pulse rounded-lg bg-muted" />
+            </div>
+          ) : (
+            user && (
+              <div className="p-4">
+                <UserProfileContent
+                  user={user}
+                  canModifyUser={canModifyUser}
+                  onChangeRole={() => setIsChangeRoleDialogOpen(true)}
+                />
+              </div>
+            )
+          )}
+        </div>
+
+        {/* Quick Actions */}
+        {userInfo?.role === "Owner" && user && (
+          <div className="p-4">
+            <Button
+              variant="destructive"
+              onPress={() => onDeleteUser(user)}
+              className="w-full justify-center text-sm"
+              isDisabled={isCurrentUser}
+            >
+              <Trash2Icon className="h-4 w-4" />
+              <Trans>Delete user</Trans>
+            </Button>
+          </div>
+        )}
+      </aside>
+
+      {/* Change User Role Dialog */}
+      {user && (
+        <ChangeUserRoleDialog user={user} isOpen={isChangeRoleDialogOpen} onOpenChange={setIsChangeRoleDialogOpen} />
+      )}
+    </>
+  );
+}
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
index 76afea85c..e648f8afc 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx
@@ -11,10 +11,11 @@ import { Heading } from "@repo/ui/components/Heading";
 import { Modal } from "@repo/ui/components/Modal";
 import { SearchField } from "@repo/ui/components/SearchField";
 import { Select, SelectItem } from "@repo/ui/components/Select";
-import { MEDIA_QUERIES } from "@repo/ui/utils/responsive";
+import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip";
+import { useSideMenuLayout } from "@repo/ui/hooks/useSideMenuLayout";
 import { useLocation, useNavigate } from "@tanstack/react-router";
-import { FilterIcon, FilterXIcon, XIcon } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { ListFilter, ListFilterPlus, XIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 // SearchParams interface defines the structure of URL query parameters
 interface SearchParams {
@@ -28,20 +29,33 @@ interface SearchParams {
   pageOffset: number | undefined;
 }
 
+interface UserQueryingProps {
+  onFilterStateChange?: (
+    isFilterBarExpanded: boolean,
+    hasActiveFilters: boolean,
+    shouldUseCompactButtons: boolean
+  ) => void;
+  onFiltersUpdated?: () => void;
+}
+
 /**
  * UserQuerying component handles the user list filtering.
  * Uses URL parameters as the single source of truth for all filters.
  * The only local state is for the search input, which is debounced
  * to prevent too many URL updates while typing.
  */
-export function UserQuerying() {
+export function UserQuerying({ onFilterStateChange, onFiltersUpdated }: UserQueryingProps = {}) {
   const navigate = useNavigate();
   const searchParams = (useLocation().search as SearchParams) ?? {};
+  const { isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout();
+  const containerRef = useRef<HTMLDivElement>(null);
   const [search, setSearch] = useState<string | undefined>(searchParams.search);
   const [showAllFilters, setShowAllFilters] = useState(
     Boolean(searchParams.userRole ?? searchParams.userStatus ?? searchParams.startDate ?? searchParams.endDate)
   );
+  const [searchTimeoutId, setSearchTimeoutId] = useState<NodeJS.Timeout | null>(null);
   const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
+  const [, forceUpdate] = useState({});
 
   // Convert URL date strings to DateRange if they exist
   const dateRange =
@@ -54,27 +68,40 @@ export function UserQuerying() {
 
   // Updates URL parameters while preserving existing ones
   const updateFilter = useCallback(
-    (params: Partial<SearchParams>) => {
+    (params: Partial<SearchParams>, isSearchUpdate = false) => {
       navigate({
         to: "/admin/users",
         search: (prev) => ({
           ...prev,
           ...params,
-          pageOffset: prev.pageOffset === 0 ? undefined : prev.pageOffset
+          pageOffset: undefined,
+          userId: undefined
         })
       });
+      // Only call onFiltersUpdated for actual filter changes, not search updates
+      if (!isSearchUpdate) {
+        onFiltersUpdated?.();
+      }
     },
-    [navigate]
+    [navigate, onFiltersUpdated]
   );
 
   // Debounce search updates to avoid too many URL changes while typing
   useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      updateFilter({ search: (search as string) || undefined });
-    }, 500);
+    // Only update if search value actually changed from URL params
+    if (search !== searchParams.search) {
+      const timeoutId = setTimeout(() => {
+        updateFilter({ search: (search as string) || undefined }, true);
+        setSearchTimeoutId(null);
+      }, 500);
+      setSearchTimeoutId(timeoutId);
 
-    return () => clearTimeout(timeoutId);
-  }, [search, updateFilter]);
+      return () => {
+        clearTimeout(timeoutId);
+        setSearchTimeoutId(null);
+      };
+    }
+  }, [search, searchParams.search, updateFilter]);
 
   // Count active filters for badge
   const getActiveFilterCount = () => {
@@ -93,25 +120,152 @@ export function UserQuerying() {
 
   const activeFilterCount = getActiveFilterCount();
 
-  // Handle screen size changes to show/hide filters appropriately
+  // Detect if side pane is open by checking DOM
+  const [isSidePaneOpen, setIsSidePaneOpen] = useState(false);
+
   useEffect(() => {
-    const handleResize = () => {
-      const isLargeScreen = window.matchMedia(MEDIA_QUERIES.lg).matches;
-      if (isLargeScreen && activeFilterCount > 0 && !showAllFilters) {
-        // On large screens, show inline filters if there are active filters
+    const checkSidePaneState = () => {
+      const sidePane = document.querySelector('[class*="fixed"][class*="inset-0"][class*="z-[60]"]');
+      const isOpen = !!sidePane;
+      if (isOpen !== isSidePaneOpen) {
+        setIsSidePaneOpen(isOpen);
+      }
+    };
+
+    // Check immediately
+    checkSidePaneState();
+
+    // Use MutationObserver to detect when side pane is added/removed
+    const observer = new MutationObserver(checkSidePaneState);
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => observer.disconnect();
+  }, [isSidePaneOpen]);
+
+  // Handle screen size and container space changes to show/hide filters appropriately
+  useEffect(() => {
+    let debounceTimeout: NodeJS.Timeout | null = null;
+    let lastStateChange = 0;
+
+    const shouldSkipSpaceCheck = (now: number) => {
+      return now - lastStateChange < 200;
+    };
+
+    const shouldHideFiltersForOverlays = () => {
+      return isOverlayOpen || isMobileMenuOpen;
+    };
+
+    const getToolbarContainer = () => {
+      if (!containerRef.current) {
+        return null;
+      }
+      return containerRef.current.closest(".flex.items-center.justify-between") as HTMLElement;
+    };
+
+    const calculateAvailableSpace = (toolbarContainer: HTMLElement) => {
+      const toolbarWidth = toolbarContainer.offsetWidth;
+      const searchField = containerRef.current?.querySelector('input[type="text"]') as HTMLElement;
+      const filterButton = containerRef.current?.querySelector('[data-testid="filter-button"]') as HTMLElement;
+
+      const searchWidth = searchField?.offsetWidth || 300;
+      const filterButtonWidth = filterButton?.offsetWidth || 50;
+      const rightSideWidth = 130;
+      const gaps = 16;
+
+      const usedSpace = searchWidth + filterButtonWidth + rightSideWidth + gaps;
+      return toolbarWidth - usedSpace;
+    };
+
+    const updateFiltersVisibility = (hasSpace: boolean, now: number) => {
+      if (hasSpace && activeFilterCount > 0 && !showAllFilters) {
+        lastStateChange = now;
         setShowAllFilters(true);
-      } else if (!isLargeScreen && showAllFilters) {
-        // On small/medium screens, hide inline filters
+      } else if (!hasSpace && showAllFilters) {
+        lastStateChange = now;
         setShowAllFilters(false);
       }
     };
 
-    // Check on mount
-    handleResize();
+    const checkFilterSpace = () => {
+      const now = Date.now();
+
+      if (shouldSkipSpaceCheck(now)) {
+        return;
+      }
+
+      if (shouldHideFiltersForOverlays()) {
+        if (showAllFilters) {
+          lastStateChange = now;
+          setShowAllFilters(false);
+        }
+        return;
+      }
+
+      const toolbarContainer = getToolbarContainer();
+      if (!toolbarContainer) {
+        return;
+      }
+
+      const availableSpace = calculateAvailableSpace(toolbarContainer);
+      const minimumFilterSpace = 300;
+      const hasSpaceForInlineFilters = availableSpace >= minimumFilterSpace;
+
+      updateFiltersVisibility(hasSpaceForInlineFilters, now);
+    };
+
+    const debouncedCheckFilterSpace = () => {
+      if (debounceTimeout) {
+        clearTimeout(debounceTimeout);
+      }
+      debounceTimeout = setTimeout(checkFilterSpace, 100);
+    };
+
+    // Run check immediately
+    checkFilterSpace();
+
+    // Also listen for resize events to handle browser-specific timing issues
+    const handleResize = () => {
+      debouncedCheckFilterSpace();
+    };
+
+    // Listen for side menu events that affect layout
+    const handleSideMenuToggle = () => {
+      debouncedCheckFilterSpace();
+    };
+
+    const handleSideMenuResize = () => {
+      debouncedCheckFilterSpace();
+    };
+
+    // Force a recheck after mount to ensure correct initial state across browsers
+    const timeoutId = setTimeout(() => {
+      forceUpdate({});
+      checkFilterSpace();
+    }, 100);
 
     window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [activeFilterCount, showAllFilters]);
+    window.addEventListener("side-menu-toggle", handleSideMenuToggle);
+    window.addEventListener("side-menu-resize", handleSideMenuResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("side-menu-toggle", handleSideMenuToggle);
+      window.removeEventListener("side-menu-resize", handleSideMenuResize);
+      clearTimeout(timeoutId);
+      if (debounceTimeout) {
+        clearTimeout(debounceTimeout);
+      }
+    };
+  }, [activeFilterCount, showAllFilters, isMobileMenuOpen, isOverlayOpen]);
+
+  // Notify parent component when filter state changes
+  useEffect(() => {
+    // On 2XL+ screens, keep full buttons even with filters
+    const is2XlScreen = window.matchMedia("(min-width: 1536px)").matches;
+    const shouldUseCompactButtons = !is2XlScreen && (showAllFilters || activeFilterCount > 0);
+
+    onFilterStateChange?.(showAllFilters, activeFilterCount > 0, shouldUseCompactButtons);
+  }, [showAllFilters, activeFilterCount, onFilterStateChange]);
 
   const clearAllFilters = () => {
     updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined });
@@ -120,8 +274,22 @@ export function UserQuerying() {
   };
 
   return (
-    <div className="flex items-center gap-2">
-      <SearchField placeholder={t`Search`} value={search} onChange={setSearch} label={t`Search`} autoFocus={true} />
+    <div ref={containerRef} className="flex items-center gap-2">
+      <SearchField
+        placeholder={t`Search`}
+        value={search}
+        onChange={setSearch}
+        onSubmit={() => {
+          if (searchTimeoutId) {
+            clearTimeout(searchTimeoutId);
+            setSearchTimeoutId(null);
+          }
+          updateFilter({ search: (search as string) || undefined }, true);
+        }}
+        label={t`Search`}
+        autoFocus={true}
+        className="min-w-32"
+      />
 
       {showAllFilters && (
         <>
@@ -176,38 +344,80 @@ export function UserQuerying() {
       )}
 
       {/* Filter button with responsive behavior */}
-      <Button
-        variant="secondary"
-        className="relative mt-6"
-        aria-label={showAllFilters ? t`Clear filters` : t`Show filters`}
-        data-testid="filter-button"
-        onPress={() => {
-          // On large screens, if filters are showing, clear them instead of opening dialog
-          const isLargeScreen = window.matchMedia(MEDIA_QUERIES.lg).matches;
-          if (isLargeScreen && showAllFilters) {
-            clearAllFilters();
-            return;
-          }
-          // On large screens, toggle inline filters
-          if (isLargeScreen) {
-            setShowAllFilters(!showAllFilters);
-            return;
-          }
-          // On small/medium screens, open dialog
-          setIsFilterPanelOpen(true);
-        }}
-      >
-        {showAllFilters ? (
-          <FilterXIcon size={16} aria-label={t`Clear filters`} />
-        ) : (
-          <FilterIcon size={16} aria-label={t`Show filters`} />
-        )}
-        {activeFilterCount > 0 && (
-          <span className="-right-1 -top-1 absolute flex h-5 w-5 items-center justify-center rounded-full bg-primary font-medium text-primary-foreground text-xs lg:hidden">
-            {activeFilterCount}
-          </span>
-        )}
-      </Button>
+      <TooltipTrigger>
+        <Button
+          variant="secondary"
+          className="relative mt-6"
+          aria-label={showAllFilters ? t`Clear filters` : t`Show filters`}
+          data-testid="filter-button"
+          onPress={() => {
+            // If filters are currently showing and user clicks, always clear filters
+            // This ensures consistent behavior regardless of space calculations
+            if (showAllFilters) {
+              clearAllFilters();
+              return;
+            }
+
+            // Force modal when overlays are open (blocks interaction)
+            if (isOverlayOpen || isMobileMenuOpen) {
+              setIsFilterPanelOpen(true);
+              return;
+            }
+
+            if (!containerRef.current) {
+              setIsFilterPanelOpen(true);
+              return;
+            }
+
+            // Measure the actual available space by finding the parent toolbar container
+            const toolbarContainer = containerRef.current.closest(".flex.items-center.justify-between") as HTMLElement;
+            if (!toolbarContainer) {
+              setIsFilterPanelOpen(true);
+              return;
+            }
+
+            const toolbarWidth = toolbarContainer.offsetWidth;
+            const searchField = containerRef.current.querySelector('input[type="text"]') as HTMLElement;
+            const filterButton = containerRef.current.querySelector('[data-testid="filter-button"]') as HTMLElement;
+
+            // Calculate space used by existing elements - ALWAYS assume filters are hidden for measurement
+            const searchWidth = searchField?.offsetWidth || 300;
+            const filterButtonWidth = filterButton?.offsetWidth || 50;
+
+            // For space calculation, assume buttons will be compact (130px) when filters are shown
+            // This accounts for the fact that showing filters makes buttons compact, freeing up space
+            const rightSideWidth = 130;
+
+            const gaps = 16; // gap-2 between main sections
+            const minimumFilterSpace = 450; // Minimum space needed for all three filter controls
+
+            const usedSpace = searchWidth + filterButtonWidth + rightSideWidth + gaps;
+            const availableSpace = toolbarWidth - usedSpace;
+
+            const hasSpaceForInlineFilters = availableSpace >= minimumFilterSpace;
+
+            if (hasSpaceForInlineFilters) {
+              // If we have space but filters aren't showing, toggle them
+              setShowAllFilters(!showAllFilters);
+              return;
+            }
+            // If we don't have space, open dialog
+            setIsFilterPanelOpen(true);
+          }}
+        >
+          {showAllFilters ? (
+            <ListFilterPlus size={16} aria-label={t`Clear filters`} />
+          ) : (
+            <ListFilter size={16} aria-label={t`Show filters`} />
+          )}
+          {activeFilterCount > 0 && !showAllFilters && (
+            <span className="-right-1 -top-1 absolute flex h-5 w-5 items-center justify-center rounded-full bg-primary font-medium text-primary-foreground text-xs">
+              {activeFilterCount}
+            </span>
+          )}
+        </Button>
+        <Tooltip>{showAllFilters ? <Trans>Clear filters</Trans> : <Trans>Show filters</Trans>}</Tooltip>
+      </TooltipTrigger>
 
       {/* Filter dialog for small/medium screens */}
       <Modal isOpen={isFilterPanelOpen} onOpenChange={setIsFilterPanelOpen} isDismissable={true}>
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
index fe0e05b7b..a96185d20 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx
@@ -9,24 +9,34 @@ import { Button } from "@repo/ui/components/Button";
 import { Menu, MenuItem, MenuSeparator } from "@repo/ui/components/Menu";
 import { Pagination } from "@repo/ui/components/Pagination";
 import { Cell, Column, Row, Table, TableHeader } from "@repo/ui/components/Table";
+import { Text } from "@repo/ui/components/Text";
 import { formatDate } from "@repo/utils/date/formatDate";
 import { getInitials } from "@repo/utils/string/getInitials";
 import { useNavigate, useSearch } from "@tanstack/react-router";
-import { EllipsisVerticalIcon, PencilIcon, Trash2Icon, UserIcon } from "lucide-react";
+import { EllipsisVerticalIcon, SettingsIcon, Trash2Icon, UserIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import type { Selection, SortDescriptor } from "react-aria-components";
 import { MenuTrigger, TableBody } from "react-aria-components";
-import { ChangeUserRoleDialog } from "./ChangeUserRoleDialog";
-import { DeleteUserDialog } from "./DeleteUserDialog";
 
 type UserDetails = components["schemas"]["UserDetails"];
 
 interface UserTableProps {
   selectedUsers: UserDetails[];
   onSelectedUsersChange: (users: UserDetails[]) => void;
+  onViewProfile: (user: UserDetails | null) => void;
+  onDeleteUser: (user: UserDetails) => void;
+  onChangeRole: (user: UserDetails) => void;
+  onUsersLoaded?: (users: UserDetails[]) => void;
 }
 
-export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly<UserTableProps>) {
+export function UserTable({
+  selectedUsers,
+  onSelectedUsersChange,
+  onViewProfile,
+  onDeleteUser,
+  onChangeRole,
+  onUsersLoaded
+}: Readonly<UserTableProps>) {
   const navigate = useNavigate();
   const { search, userRole, userStatus, startDate, endDate, orderBy, sortOrder, pageOffset } = useSearch({
     strict: false
@@ -53,9 +63,6 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly<Use
     }
   });
 
-  const [userToDelete, setUserToDelete] = useState<UserDetails | null>(null);
-  const [userToChangeRole, setUserToChangeRole] = useState<UserDetails | null>(null);
-
   const handlePageChange = useCallback(
     (page: number) => {
       navigate({
@@ -85,21 +92,39 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly<Use
     [navigate]
   );
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Clear selected users when page changes - pageOffset is needed to trigger the effect
   useEffect(() => {
     onSelectedUsersChange([]);
-  }, [onSelectedUsersChange]);
+  }, [onSelectedUsersChange, pageOffset]);
+
+  useEffect(() => {
+    if (users?.users) {
+      onUsersLoaded?.(users.users);
+    }
+  }, [users?.users, onUsersLoaded]);
 
   const handleSelectionChange = useCallback(
     (keys: Selection) => {
       if (keys === "all") {
         onSelectedUsersChange(users?.users ?? []);
+        // Close profile when selecting all users
+        onViewProfile(null);
       } else {
         const selectedKeys = typeof keys === "string" ? new Set([keys]) : keys;
         const selectedUsersList = users?.users.filter((user) => selectedKeys.has(user.id)) ?? [];
         onSelectedUsersChange(selectedUsersList);
+
+        // Handle profile viewing based on selection
+        if (selectedUsersList.length === 1) {
+          // Single user selected - show profile
+          onViewProfile(selectedUsersList[0]);
+        } else {
+          // Multiple users selected or no users selected - close profile
+          onViewProfile(null);
+        }
       }
     },
-    [users?.users, onSelectedUsersChange]
+    [users?.users, onSelectedUsersChange, onViewProfile]
   );
 
   if (isLoading) {
@@ -109,141 +134,134 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly<Use
   const currentPage = (users?.currentPageOffset ?? 0) + 1;
 
   return (
-    <>
-      <ChangeUserRoleDialog
-        user={userToChangeRole}
-        isOpen={userToChangeRole !== null}
-        onOpenChange={(isOpen) => !isOpen && setUserToChangeRole(null)}
-      />
-
-      <DeleteUserDialog
-        users={userToDelete ? [userToDelete] : []}
-        isOpen={userToDelete !== null}
-        onOpenChange={(isOpen) => !isOpen && setUserToDelete(null)}
-      />
-
-      <Table
-        key={`${search}-${userRole}-${userStatus}-${startDate}-${endDate}-${orderBy}-${sortOrder}`}
-        selectionMode="multiple"
-        selectionBehavior="toggle"
-        selectedKeys={selectedUsers.map((user) => user.id)}
-        onSelectionChange={handleSelectionChange}
-        sortDescriptor={sortDescriptor}
-        onSortChange={handleSortChange}
-        aria-label={t`Users`}
-      >
-        <TableHeader>
-          <Column minWidth={180} allowsSorting={true} id={SortableUserProperties.Name} isRowHeader={true}>
-            <Trans>Name</Trans>
-          </Column>
-          <Column minWidth={120} allowsSorting={true} id={SortableUserProperties.Email}>
-            <Trans>Email</Trans>
-          </Column>
-          <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
-            <Trans>Created</Trans>
-          </Column>
-          <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
-            <Trans>Modified</Trans>
-          </Column>
-          <Column minWidth={100} defaultWidth={75} allowsSorting={true} id={SortableUserProperties.Role}>
-            <Trans>Role</Trans>
-          </Column>
-          <Column width={114}>
-            <Trans>Actions</Trans>
-          </Column>
-        </TableHeader>
-        <TableBody>
-          {users?.users.map((user) => (
-            <Row key={user.id} id={user.id}>
-              <Cell>
-                <div className="flex h-14 items-center gap-2">
-                  <Avatar
-                    initials={getInitials(user.firstName, user.lastName, user.email)}
-                    avatarUrl={user.avatarUrl}
-                    size="sm"
-                    isRound={true}
-                  />
-                  <div className="flex flex-col truncate">
-                    <div className="truncate text-foreground">
-                      {user.firstName} {user.lastName}
-                      {user.emailConfirmed ? (
-                        ""
-                      ) : (
-                        <Badge variant="outline">
-                          <Trans>Pending</Trans>
-                        </Badge>
-                      )}
-                    </div>
-                    <div className="truncate">{user.title ?? ""}</div>
-                  </div>
-                </div>
-              </Cell>
-              <Cell>{user.email}</Cell>
-              <Cell>{formatDate(user.createdAt)}</Cell>
-              <Cell>{formatDate(user.modifiedAt)}</Cell>
-              <Cell>
-                <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
-              </Cell>
-              <Cell>
-                <div className="flex w-full gap-2">
-                  <Button
-                    variant="icon"
-                    className="opacity-0 transition-opacity duration-300 ease-in-out hover:opacity-100 focus:opacity-100 [tr:focus-within_&]:opacity-100 [tr:hover_&]:opacity-100"
-                    onPress={() => {
-                      onSelectedUsersChange([user]);
-                      setUserToDelete(user);
-                    }}
-                    isDisabled={user.id === userInfo?.id}
-                  >
-                    <Trash2Icon className="h-5 w-5 text-muted-foreground" />
-                  </Button>
-                  <MenuTrigger
-                    onOpenChange={(isOpen) => {
-                      if (isOpen) {
-                        onSelectedUsersChange([user]);
-                      }
-                    }}
-                  >
-                    <Button variant="icon" aria-label={t`Menu`}>
-                      <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
-                    </Button>
-                    <Menu>
-                      <MenuItem id="viewProfile">
-                        <UserIcon className="h-4 w-4" />
-                        <Trans>View profile</Trans>
-                      </MenuItem>
-                      <MenuItem
-                        id="changeRole"
-                        isDisabled={userInfo?.role !== "Owner" || userInfo?.id === user.id}
-                        onAction={() => setUserToChangeRole(user)}
-                      >
-                        <PencilIcon className="h-4 w-4 group-disabled:text-muted-foreground" />
-                        <span className="group-disabled:text-muted-foreground">
-                          <Trans>Change role</Trans>
-                        </span>
-                      </MenuItem>
-                      <MenuSeparator />
-                      <MenuItem
-                        id="deleteUser"
-                        isDisabled={userInfo?.role !== "Owner" || user.id === userInfo?.id}
-                        onAction={() => setUserToDelete(user)}
-                      >
-                        <Trash2Icon className="h-4 w-4 text-destructive" />
-                        <span className="text-destructive">
-                          <Trans>Delete</Trans>
-                        </span>
-                      </MenuItem>
-                    </Menu>
-                  </MenuTrigger>
-                </div>
-              </Cell>
-            </Row>
-          ))}
-        </TableBody>
-      </Table>
+    <div className="flex h-full flex-col">
+      <div className="min-h-0 flex-1">
+        <Table
+          key={`${search}-${userRole}-${userStatus}-${startDate}-${endDate}-${orderBy}-${sortOrder}`}
+          selectionMode="multiple"
+          selectionBehavior="replace"
+          selectedKeys={selectedUsers.map((user) => user.id)}
+          onSelectionChange={handleSelectionChange}
+          sortDescriptor={sortDescriptor}
+          onSortChange={handleSortChange}
+          aria-label={t`Users`}
+        >
+          <TableHeader>
+            <Column minWidth={180} allowsSorting={true} id={SortableUserProperties.Name} isRowHeader={true}>
+              <Trans>Name</Trans>
+            </Column>
+            <Column minWidth={120} allowsSorting={true} id={SortableUserProperties.Email}>
+              <Trans>Email</Trans>
+            </Column>
+            <Column minWidth={65} defaultWidth={110} allowsSorting={true} id={SortableUserProperties.CreatedAt}>
+              <Trans>Created</Trans>
+            </Column>
+            <Column minWidth={65} defaultWidth={120} allowsSorting={true} id={SortableUserProperties.ModifiedAt}>
+              <Trans>Modified</Trans>
+            </Column>
+            <Column minWidth={100} defaultWidth={75} allowsSorting={true} id={SortableUserProperties.Role}>
+              <Trans>Role</Trans>
+            </Column>
+            <Column width={100}>
+              <Trans>Actions</Trans>
+            </Column>
+          </TableHeader>
+          <TableBody>
+            {users?.users.map((user) => (
+              <Row key={user.id} id={user.id}>
+                <Cell>
+                  <Text className="flex h-14 w-full items-center justify-start gap-2 p-0 text-left font-normal">
+                    <Avatar
+                      initials={getInitials(user.firstName, user.lastName, user.email)}
+                      avatarUrl={user.avatarUrl}
+                      size="sm"
+                      isRound={true}
+                    />
+                    <Text className="flex flex-col truncate">
+                      <Text className="truncate text-foreground">
+                        {user.firstName} {user.lastName}
+                        {user.emailConfirmed ? (
+                          ""
+                        ) : (
+                          <Badge variant="outline">
+                            <Trans>Pending</Trans>
+                          </Badge>
+                        )}
+                      </Text>
+                      <Text className="truncate">{user.title ?? ""}</Text>
+                    </Text>
+                  </Text>
+                </Cell>
+                <Cell>
+                  <Text className="h-full w-full justify-start p-0 text-left font-normal">{user.email}</Text>
+                </Cell>
+                <Cell>
+                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                    {formatDate(user.createdAt)}
+                  </Text>
+                </Cell>
+                <Cell>
+                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                    {formatDate(user.modifiedAt)}
+                  </Text>
+                </Cell>
+                <Cell>
+                  <Text className="h-full w-full justify-start p-0 text-left font-normal">
+                    <Badge variant="outline">{getUserRoleLabel(user.role)}</Badge>
+                  </Text>
+                </Cell>
+                <Cell>
+                  <Text className="flex w-full justify-end">
+                    <MenuTrigger
+                      onOpenChange={(isOpen) => {
+                        if (isOpen) {
+                          onSelectedUsersChange([user]);
+                        }
+                      }}
+                    >
+                      <Button variant="icon" aria-label={t`User actions`}>
+                        <EllipsisVerticalIcon className="h-5 w-5 text-muted-foreground" />
+                      </Button>
+                      <Menu>
+                        <MenuItem id="viewProfile" onAction={() => onViewProfile(user)}>
+                          <UserIcon className="h-4 w-4" />
+                          <Trans>View profile</Trans>
+                        </MenuItem>
+                        {userInfo?.role === "Owner" && (
+                          <>
+                            <MenuItem
+                              id="changeRole"
+                              isDisabled={user.id === userInfo?.id}
+                              onAction={() => onChangeRole(user)}
+                            >
+                              <SettingsIcon className="h-4 w-4" />
+                              <Trans>Change role</Trans>
+                            </MenuItem>
+                            <MenuSeparator />
+                            <MenuItem
+                              id="deleteUser"
+                              isDisabled={user.id === userInfo?.id}
+                              onAction={() => onDeleteUser(user)}
+                            >
+                              <Trash2Icon className="h-4 w-4 text-destructive" />
+                              <span className="text-destructive">
+                                <Trans>Delete</Trans>
+                              </span>
+                            </MenuItem>
+                          </>
+                        )}
+                      </Menu>
+                    </MenuTrigger>
+                  </Text>
+                </Cell>
+              </Row>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
 
       {users && (
-        <div className="sticky bottom-0 z-20 bg-background py-4">
+        <div className="bg-background py-4">
           <Pagination
             paginationSize={5}
             currentPage={currentPage}
@@ -262,6 +280,6 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly<Use
           />
         </div>
       )}
-    </>
+    </div>
   );
 }
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
index 1fe841970..20d31e3ff 100644
--- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
+++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx
@@ -1,6 +1,9 @@
 import type { components } from "@/shared/lib/api/client";
+import { UserRole, api } from "@/shared/lib/api/client";
+import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Button } from "@repo/ui/components/Button";
+import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip";
 import { PlusIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { DeleteUserDialog } from "./DeleteUserDialog";
@@ -11,35 +14,73 @@ type UserDetails = components["schemas"]["UserDetails"];
 
 interface UserToolbarProps {
   selectedUsers: UserDetails[];
+  onSelectedUsersChange: (users: UserDetails[]) => void;
 }
 
-export function UserToolbar({ selectedUsers }: Readonly<UserToolbarProps>) {
+export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly<UserToolbarProps>) {
+  const { data: currentUser } = api.useQuery("get", "/api/account-management/users/me");
   const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [_isFilterBarExpanded, setIsFilterBarExpanded] = useState(false);
+  const [_hasActiveFilters, setHasActiveFilters] = useState(false);
+  const [shouldUseCompactButtons, setShouldUseCompactButtons] = useState(false);
+
+  const isOwner = currentUser?.role === UserRole.Owner;
+  const hasSelectedSelf = selectedUsers.some((user) => user.id === currentUser?.id);
+
+  const handleFilterStateChange = (isExpanded: boolean, hasFilters: boolean, useCompact: boolean) => {
+    setIsFilterBarExpanded(isExpanded);
+    setHasActiveFilters(hasFilters);
+    setShouldUseCompactButtons(useCompact);
+  };
 
   return (
     <div className="mt-4 mb-4 flex items-center justify-between gap-2">
-      <UserQuerying />
+      <UserQuerying onFilterStateChange={handleFilterStateChange} onFiltersUpdated={() => onSelectedUsersChange([])} />
       <div className="mt-6 flex items-center gap-2">
-        {selectedUsers.length === 0 && (
-          <Button variant="primary" onPress={() => setIsInviteModalOpen(true)}>
-            <PlusIcon className="h-5 w-5" />
-            <span className="hidden sm:inline">
-              <Trans>Invite users</Trans>
-            </span>
-          </Button>
+        {selectedUsers.length < 2 && isOwner && (
+          <TooltipTrigger>
+            <Button variant="primary" onPress={() => setIsInviteModalOpen(true)} aria-label={t`Invite user`}>
+              <PlusIcon className="h-5 w-5" />
+              <span className={shouldUseCompactButtons ? "hidden" : "hidden sm:inline"}>
+                <Trans>Invite user</Trans>
+              </span>
+            </Button>
+            {shouldUseCompactButtons && (
+              <Tooltip>
+                <Trans>Invite user</Trans>
+              </Tooltip>
+            )}
+          </TooltipTrigger>
         )}
-        {selectedUsers.length > 0 && (
-          <Button variant="destructive" onPress={() => setIsDeleteModalOpen(true)}>
-            <Trash2Icon className="h-5 w-5" />
-            <span className="hidden sm:inline">
-              <Trans>Delete {selectedUsers.length === 1 ? "user" : `${selectedUsers.length} users`}</Trans>
-            </span>
-          </Button>
+        {selectedUsers.length > 1 && isOwner && (
+          <TooltipTrigger>
+            <Button
+              variant="destructive"
+              onPress={() => setIsDeleteModalOpen(true)}
+              isDisabled={hasSelectedSelf}
+              aria-label={t`Delete ${selectedUsers.length} users`}
+            >
+              <Trash2Icon className="h-5 w-5" />
+              <span className={shouldUseCompactButtons ? "hidden" : "hidden sm:inline"}>
+                <Trans>Delete {selectedUsers.length} users</Trans>
+              </span>
+            </Button>
+            {shouldUseCompactButtons && (
+              <Tooltip>
+                <Trans>Delete {selectedUsers.length} users</Trans>
+              </Tooltip>
+            )}
+          </TooltipTrigger>
         )}
       </div>
-      <InviteUserDialog isOpen={isInviteModalOpen} onOpenChange={setIsInviteModalOpen} />
-      <DeleteUserDialog users={selectedUsers} isOpen={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen} />
+      {isOwner && <InviteUserDialog isOpen={isInviteModalOpen} onOpenChange={setIsInviteModalOpen} />}
+      <DeleteUserDialog
+        users={selectedUsers}
+        isOpen={isDeleteModalOpen}
+        onOpenChange={setIsDeleteModalOpen}
+        onUsersDeleted={() => onSelectedUsersChange([])}
+      />
     </div>
   );
 }
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx
index de6bda142..ea393fd02 100644
--- a/application/account-management/WebApp/routes/admin/users/index.tsx
+++ b/application/account-management/WebApp/routes/admin/users/index.tsx
@@ -1,13 +1,16 @@
 import { SharedSideMenu } from "@/shared/components/SharedSideMenu";
 import { TopMenu } from "@/shared/components/topMenu";
-import { SortOrder, SortableUserProperties, UserRole, UserStatus, type components } from "@/shared/lib/api/client";
+import { SortOrder, SortableUserProperties, UserRole, UserStatus, api, type components } from "@/shared/lib/api/client";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AppLayout } from "@repo/ui/components/AppLayout";
 import { Breadcrumb } from "@repo/ui/components/Breadcrumbs";
-import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
 import { z } from "zod";
+import { ChangeUserRoleDialog } from "./-components/ChangeUserRoleDialog";
+import { DeleteUserDialog } from "./-components/DeleteUserDialog";
+import { UserProfileSidePane } from "./-components/UserProfileSidePane";
 import { UserTable } from "./-components/UserTable";
 import { UserToolbar } from "./-components/UserToolbar";
 
@@ -21,7 +24,8 @@ const userPageSearchSchema = z.object({
   endDate: z.string().optional(),
   orderBy: z.nativeEnum(SortableUserProperties).default(SortableUserProperties.Name).optional(),
   sortOrder: z.nativeEnum(SortOrder).default(SortOrder.Ascending).optional(),
-  pageOffset: z.number().default(0).optional()
+  pageOffset: z.number().default(0).optional(),
+  userId: z.string().optional()
 });
 
 export const Route = createFileRoute("/admin/users/")({
@@ -31,11 +35,91 @@ export const Route = createFileRoute("/admin/users/")({
 
 export default function UsersPage() {
   const [selectedUsers, setSelectedUsers] = useState<UserDetails[]>([]);
+  const [profileUser, setProfileUser] = useState<UserDetails | null>(null);
+  const [userToDelete, setUserToDelete] = useState<UserDetails | null>(null);
+  const [userToChangeRole, setUserToChangeRole] = useState<UserDetails | null>(null);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+  const [tableUsers, setTableUsers] = useState<UserDetails[]>([]);
+  const navigate = useNavigate({ from: Route.fullPath });
+  const { userId } = Route.useSearch();
+
+  const handleCloseProfile = () => {
+    setProfileUser(null);
+    setSelectedUsers([]);
+    navigate({ search: (prev) => ({ ...prev, userId: undefined }) });
+  };
+
+  const handleViewProfile = (user: UserDetails | null) => {
+    setProfileUser(user);
+    if (user) {
+      navigate({ search: (prev) => ({ ...prev, userId: user.id }) });
+    } else {
+      navigate({ search: (prev) => ({ ...prev, userId: undefined }) });
+    }
+  };
+
+  const { data: userData, isLoading: isLoadingUser } = api.useQuery("get", "/api/account-management/users/{id}", {
+    params: {
+      path: {
+        id: userId || ""
+      }
+    },
+    enabled: !!userId
+  });
+
+  useEffect(() => {
+    if (userId && userData) {
+      setProfileUser(userData);
+      if (isInitialLoad) {
+        setSelectedUsers([userData]);
+        setIsInitialLoad(false);
+      }
+    } else if (!userId && isInitialLoad) {
+      setIsInitialLoad(false);
+    }
+  }, [userId, userData, isInitialLoad]);
+
+  const handleDeleteUser = (user: UserDetails) => {
+    setUserToDelete(user);
+  };
+
+  const handleChangeRole = (user: UserDetails) => {
+    setUserToChangeRole(user);
+  };
+
+  const handleUsersLoaded = (users: UserDetails[]) => {
+    setTableUsers(users);
+  };
+
+  const isUserInCurrentView = profileUser ? tableUsers.some((u) => u.id === profileUser.id) : true;
+
+  // Check if the side pane data is different from table data
+  const tableUser = profileUser ? tableUsers.find((u) => u.id === profileUser.id) : null;
+  const isDataNewer = !!(
+    userData &&
+    tableUser &&
+    userData.modifiedAt &&
+    tableUser.modifiedAt &&
+    new Date(userData.modifiedAt).getTime() !== new Date(tableUser.modifiedAt).getTime()
+  );
 
   return (
     <>
       <SharedSideMenu ariaLabel={t`Toggle collapsed menu`} />
       <AppLayout
+        sidePane={
+          profileUser ? (
+            <UserProfileSidePane
+              user={profileUser}
+              isOpen={!!profileUser}
+              onClose={handleCloseProfile}
+              onDeleteUser={handleDeleteUser}
+              isUserInCurrentView={isUserInCurrentView}
+              isDataNewer={isDataNewer}
+              isLoading={isLoadingUser || !!(userId && profileUser.id !== userId)}
+            />
+          ) : undefined
+        }
         topMenu={
           <TopMenu>
             <Breadcrumb href="/admin/users">
@@ -47,16 +131,46 @@ export default function UsersPage() {
           </TopMenu>
         }
       >
-        <h1>
-          <Trans>Users</Trans>
-        </h1>
-        <p>
-          <Trans>Manage your users and permissions here.</Trans>
-        </p>
-
-        <UserToolbar selectedUsers={selectedUsers} />
-        <UserTable selectedUsers={selectedUsers} onSelectedUsersChange={setSelectedUsers} />
+        <div className="flex h-full flex-col">
+          <h1>
+            <Trans>Users</Trans>
+          </h1>
+          <p>
+            <Trans>Manage your users and permissions here.</Trans>
+          </p>
+
+          <div className="mb-4">
+            <UserToolbar selectedUsers={selectedUsers} onSelectedUsersChange={setSelectedUsers} />
+          </div>
+          <div className="min-h-0 flex-1">
+            <UserTable
+              selectedUsers={selectedUsers}
+              onSelectedUsersChange={setSelectedUsers}
+              onViewProfile={handleViewProfile}
+              onDeleteUser={handleDeleteUser}
+              onChangeRole={handleChangeRole}
+              onUsersLoaded={handleUsersLoaded}
+            />
+          </div>
+        </div>
       </AppLayout>
+
+      <ChangeUserRoleDialog
+        user={userToChangeRole}
+        isOpen={userToChangeRole !== null}
+        onOpenChange={(isOpen) => !isOpen && setUserToChangeRole(null)}
+      />
+
+      <DeleteUserDialog
+        users={userToDelete ? [userToDelete] : []}
+        isOpen={userToDelete !== null}
+        onOpenChange={(isOpen) => !isOpen && setUserToDelete(null)}
+        onUsersDeleted={() => {
+          setSelectedUsers([]);
+          setProfileUser(null);
+          navigate({ search: (prev) => ({ ...prev, userId: undefined }) });
+        }}
+      />
     </>
   );
 }
diff --git a/application/account-management/WebApp/shared/components/SharedSideMenu.tsx b/application/account-management/WebApp/shared/components/SharedSideMenu.tsx
index 0b8cb4042..cbcf15d28 100644
--- a/application/account-management/WebApp/shared/components/SharedSideMenu.tsx
+++ b/application/account-management/WebApp/shared/components/SharedSideMenu.tsx
@@ -26,8 +26,8 @@ import {
   UserIcon,
   UsersIcon
 } from "lucide-react";
-import { use, useContext, useState } from "react";
 import type React from "react";
+import { use, useContext, useState } from "react";
 import UserProfileModal from "./userModals/UserProfileModal";
 
 type SharedSideMenuProps = {
@@ -223,7 +223,7 @@ export function SharedSideMenu({ children, ariaLabel }: Readonly<SharedSideMenuP
       </div>
 
       {/* Divider */}
-      <div className="mx-3 my-5 border-border/50 border-b" />
+      <div className="mx-3 my-5 border-border border-b" />
 
       {/* Navigation Section for Mobile */}
       <div className="flex flex-col gap-3">
@@ -246,7 +246,7 @@ export function SharedSideMenu({ children, ariaLabel }: Readonly<SharedSideMenuP
 
   return (
     <>
-      <SideMenu ariaLabel={ariaLabel} topMenuContent={topMenuContent}>
+      <SideMenu ariaLabel={ariaLabel} topMenuContent={topMenuContent} tenantName={userInfo?.tenantName}>
         <MenuButton icon={HomeIcon} label={t`Home`} href="/admin" />
         <SideMenuSeparator>
           <Trans>Organization</Trans>
diff --git a/application/account-management/WebApp/shared/components/topMenu/index.tsx b/application/account-management/WebApp/shared/components/topMenu/index.tsx
index 5a88735bf..c3e90feaa 100644
--- a/application/account-management/WebApp/shared/components/topMenu/index.tsx
+++ b/application/account-management/WebApp/shared/components/topMenu/index.tsx
@@ -11,27 +11,32 @@ import AvatarButton from "../AvatarButton";
 
 interface TopMenuProps {
   children?: ReactNode;
+  sidePaneOpen?: boolean;
 }
 
-export function TopMenu({ children }: Readonly<TopMenuProps>) {
+export function TopMenu({ children, sidePaneOpen = false }: Readonly<TopMenuProps>) {
   return (
-    <nav className="hidden w-full items-center justify-between sm:flex">
+    <nav className="flex w-full items-center justify-between">
       <Breadcrumbs>
         <Breadcrumb href="/admin">
           <Trans>Home</Trans>
         </Breadcrumb>
         {children}
       </Breadcrumbs>
-      <div className="flex flex-row items-center gap-6">
+      <div
+        className={`flex flex-row items-center gap-6 transition-transform duration-100 ease-in-out ${
+          sidePaneOpen ? "sm:-translate-x-96 sm:transform" : ""
+        }`}
+      >
         <span className="flex gap-2">
           <ThemeModeSelector aria-label={t`Toggle theme`} />
-          <TooltipTrigger delay={200}>
+          <TooltipTrigger>
             <Button variant="icon" aria-label={t`Help`}>
               <LifeBuoyIcon size={20} />
             </Button>
             <Tooltip>{t`Support`}</Tooltip>
           </TooltipTrigger>
-          <TooltipTrigger delay={200}>
+          <TooltipTrigger>
             <LocaleSwitcher aria-label={t`Select language`} />
             <Tooltip>{t`Change language`}</Tooltip>
           </TooltipTrigger>
diff --git a/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json b/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json
index 2960c5a4d..c55e34560 100644
--- a/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json
+++ b/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json
@@ -491,12 +491,23 @@
         }
       }
     },
-    "/api/account-management/users/summary": {
+    "/api/account-management/users/{id}": {
       "get": {
         "tags": [
           "Users"
         ],
-        "operationId": "GetApiAccountManagementUsersSummary",
+        "operationId": "GetApiAccountManagementUsers2",
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "$ref": "#/components/schemas/UserId"
+            },
+            "x-position": 1
+          }
+        ],
         "responses": {
           "400": {
             "description": "",
@@ -513,15 +524,13 @@
             "content": {
               "application/json": {
                 "schema": {
-                  "$ref": "#/components/schemas/UserSummaryResponse"
+                  "$ref": "#/components/schemas/UserDetails"
                 }
               }
             }
           }
         }
-      }
-    },
-    "/api/account-management/users/{id}": {
+      },
       "delete": {
         "tags": [
           "Users"
@@ -552,6 +561,36 @@
         }
       }
     },
+    "/api/account-management/users/summary": {
+      "get": {
+        "tags": [
+          "Users"
+        ],
+        "operationId": "GetApiAccountManagementUsersSummary",
+        "responses": {
+          "400": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HttpValidationProblemDetails"
+                }
+              }
+            }
+          },
+          "200": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/UserSummaryResponse"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/account-management/users/bulk-delete": {
       "post": {
         "tags": [
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po
index f370d9565..7ece3029d 100644
--- a/application/account-management/WebApp/shared/translations/locale/da-DK.po
+++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po
@@ -55,13 +55,13 @@ msgstr "Admin"
 msgid "All users"
 msgstr "Alle brugere"
 
+msgid "An email with login instructions will be sent to the user."
+msgstr "En e-mail med login-instruktioner vil blive sendt til brugeren."
+
 #. placeholder {0}: error.message
 msgid "An error occurred while processing your request. {0}"
 msgstr "Der opstod en fejl under behandlingen af din anmodning. {0}"
 
-msgid "An invitation email will be sent to the user with a link to log in."
-msgstr "En invitations-e-mail vil blive sendt til brugeren med et link til login."
-
 msgid "Any role"
 msgstr "Enhver rolle"
 
@@ -102,6 +102,10 @@ msgstr "Skift rolle"
 msgid "Change user role"
 msgstr "Skift brugerrolle"
 
+#. placeholder {0}: `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email
+msgid "Change user role for {0}"
+msgstr "Skift brugerrolle for {0}"
+
 msgid "Check your spam folder."
 msgstr "Tjek din spammappe."
 
@@ -111,6 +115,9 @@ msgstr "Ryd"
 msgid "Clear filters"
 msgstr "Ryd filtre"
 
+msgid "Close user profile"
+msgstr "Luk brugerprofil"
+
 msgid "Continue"
 msgstr "Fortsæt"
 
@@ -129,9 +136,9 @@ msgstr "Mørk"
 msgid "Delete"
 msgstr "Slet"
 
-#. placeholder {0}: selectedUsers.length === 1 ? "user" : `${selectedUsers.length} users`
-msgid "Delete {0}"
-msgstr "Slet {0}"
+#. placeholder {0}: selectedUsers.length
+msgid "Delete {0} users"
+msgstr "Slet {0} brugere"
 
 msgid "Delete account"
 msgstr "Slet konto"
@@ -208,9 +215,6 @@ msgstr "Billedet skal være mindre end 1 MB."
 msgid "Invite user"
 msgstr "Inviter bruger"
 
-msgid "Invite users"
-msgstr "Inviter brugere"
-
 msgid "Invited users"
 msgstr "Inviterede brugere"
 
@@ -244,9 +248,6 @@ msgstr "Administrer dine brugere og tilladelser her."
 msgid "Member"
 msgstr "Medlem"
 
-msgid "Menu"
-msgstr "Menu"
-
 msgid "Modified"
 msgstr "Ændret"
 
@@ -265,6 +266,9 @@ msgstr "Næste"
 msgid "OK"
 msgstr "OK"
 
+msgid "Only account owners can modify the account name"
+msgstr "Kun kontoejere kan ændre kontonavnet"
+
 msgid "Organization"
 msgstr "Organisation"
 
@@ -395,12 +399,24 @@ msgstr "Opdater dit profilbillede og personlige oplysninger her."
 msgid "Upload profile picture"
 msgstr "Upload profilbillede"
 
+msgid "User actions"
+msgstr "Brugerhandlinger"
+
+msgid "User data updated"
+msgstr "Brugerdata opdateret"
+
 msgid "User invited successfully"
 msgstr "Bruger inviteret succesfuldt"
 
+msgid "User not in current view"
+msgstr "Bruger ikke i nuværende visning"
+
 msgid "User profile"
 msgstr "Brugerprofil"
 
+msgid "User profile details"
+msgstr "Brugerprofiloplysninger"
+
 msgid "User profile menu"
 msgstr "Brugerprofilmenu"
 
@@ -425,6 +441,9 @@ msgstr "Brugere, der ikke har bekræftet deres e-mail"
 msgid "Verification code sent"
 msgstr "Bekræftelseskode sendt"
 
+msgid "Verified"
+msgstr "Bekræftet"
+
 msgid "Verify"
 msgstr "Bekræft"
 
diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po
index 99c4c9358..c129df86d 100644
--- a/application/account-management/WebApp/shared/translations/locale/en-US.po
+++ b/application/account-management/WebApp/shared/translations/locale/en-US.po
@@ -55,13 +55,13 @@ msgstr "Admin"
 msgid "All users"
 msgstr "All users"
 
+msgid "An email with login instructions will be sent to the user."
+msgstr "An email with login instructions will be sent to the user."
+
 #. placeholder {0}: error.message
 msgid "An error occurred while processing your request. {0}"
 msgstr "An error occurred while processing your request. {0}"
 
-msgid "An invitation email will be sent to the user with a link to log in."
-msgstr "An invitation email will be sent to the user with a link to log in."
-
 msgid "Any role"
 msgstr "Any role"
 
@@ -102,6 +102,10 @@ msgstr "Change role"
 msgid "Change user role"
 msgstr "Change user role"
 
+#. placeholder {0}: `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email
+msgid "Change user role for {0}"
+msgstr "Change user role for {0}"
+
 msgid "Check your spam folder."
 msgstr "Check your spam folder."
 
@@ -111,6 +115,9 @@ msgstr "Clear"
 msgid "Clear filters"
 msgstr "Clear filters"
 
+msgid "Close user profile"
+msgstr "Close user profile"
+
 msgid "Continue"
 msgstr "Continue"
 
@@ -129,9 +136,9 @@ msgstr "Dark"
 msgid "Delete"
 msgstr "Delete"
 
-#. placeholder {0}: selectedUsers.length === 1 ? "user" : `${selectedUsers.length} users`
-msgid "Delete {0}"
-msgstr "Delete {0}"
+#. placeholder {0}: selectedUsers.length
+msgid "Delete {0} users"
+msgstr "Delete {0} users"
 
 msgid "Delete account"
 msgstr "Delete account"
@@ -208,9 +215,6 @@ msgstr "Image must be smaller than 1 MB."
 msgid "Invite user"
 msgstr "Invite user"
 
-msgid "Invite users"
-msgstr "Invite users"
-
 msgid "Invited users"
 msgstr "Invited users"
 
@@ -244,9 +248,6 @@ msgstr "Manage your users and permissions here."
 msgid "Member"
 msgstr "Member"
 
-msgid "Menu"
-msgstr "Menu"
-
 msgid "Modified"
 msgstr "Modified"
 
@@ -265,6 +266,9 @@ msgstr "Next"
 msgid "OK"
 msgstr "OK"
 
+msgid "Only account owners can modify the account name"
+msgstr "Only account owners can modify the account name"
+
 msgid "Organization"
 msgstr "Organization"
 
@@ -395,12 +399,24 @@ msgstr "Update your profile picture and personal details here."
 msgid "Upload profile picture"
 msgstr "Upload profile picture"
 
+msgid "User actions"
+msgstr "User actions"
+
+msgid "User data updated"
+msgstr "User data updated"
+
 msgid "User invited successfully"
 msgstr "User invited successfully"
 
+msgid "User not in current view"
+msgstr "User not in current view"
+
 msgid "User profile"
 msgstr "User profile"
 
+msgid "User profile details"
+msgstr "User profile details"
+
 msgid "User profile menu"
 msgstr "User profile menu"
 
@@ -425,6 +441,9 @@ msgstr "Users who haven't confirmed their email"
 msgid "Verification code sent"
 msgstr "Verification code sent"
 
+msgid "Verified"
+msgstr "Verified"
+
 msgid "Verify"
 msgstr "Verify"
 
diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po
index 953ca5a1c..c88a20732 100644
--- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po
+++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po
@@ -55,13 +55,13 @@ msgstr "Beheerder"
 msgid "All users"
 msgstr "Alle gebruikers"
 
+msgid "An email with login instructions will be sent to the user."
+msgstr "Een e-mail met inloginstructies zal naar de gebruiker worden gestuurd."
+
 #. placeholder {0}: error.message
 msgid "An error occurred while processing your request. {0}"
 msgstr "Er is een fout opgetreden bij het verwerken van uw verzoek. {0}"
 
-msgid "An invitation email will be sent to the user with a link to log in."
-msgstr "Een uitnodigingsmail wordt naar de gebruiker gestuurd met een link om in te loggen."
-
 msgid "Any role"
 msgstr "Elke rol"
 
@@ -102,6 +102,10 @@ msgstr "Rol wijzigen"
 msgid "Change user role"
 msgstr "Gebruikersrol wijzigen"
 
+#. placeholder {0}: `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim() || user.email
+msgid "Change user role for {0}"
+msgstr "Gebruikersrol wijzigen voor {0}"
+
 msgid "Check your spam folder."
 msgstr "Controleer je spammap."
 
@@ -111,6 +115,9 @@ msgstr "Wissen"
 msgid "Clear filters"
 msgstr "Filters wissen"
 
+msgid "Close user profile"
+msgstr "Gebruikersprofiel sluiten"
+
 msgid "Continue"
 msgstr "Verder"
 
@@ -129,9 +136,9 @@ msgstr "Donker"
 msgid "Delete"
 msgstr "Verwijderen"
 
-#. placeholder {0}: selectedUsers.length === 1 ? "user" : `${selectedUsers.length} users`
-msgid "Delete {0}"
-msgstr "Verwijder {0}"
+#. placeholder {0}: selectedUsers.length
+msgid "Delete {0} users"
+msgstr "Verwijder {0} gebruikers"
 
 msgid "Delete account"
 msgstr "Account verwijderen"
@@ -208,9 +215,6 @@ msgstr "Afbeelding moet kleiner zijn dan 1 MB."
 msgid "Invite user"
 msgstr "Gebruiker uitnodigen"
 
-msgid "Invite users"
-msgstr "Gebruikers uitnodigen"
-
 msgid "Invited users"
 msgstr "Uitgenodigde gebruikers"
 
@@ -244,9 +248,6 @@ msgstr "Beheer je gebruikers en rechten hier."
 msgid "Member"
 msgstr "Lid"
 
-msgid "Menu"
-msgstr "Menu"
-
 msgid "Modified"
 msgstr "Gewijzigd"
 
@@ -265,6 +266,9 @@ msgstr "Volgende"
 msgid "OK"
 msgstr "OK"
 
+msgid "Only account owners can modify the account name"
+msgstr "Alleen accounteigenaren kunnen de accountnaam wijzigen"
+
 msgid "Organization"
 msgstr "Organisatie"
 
@@ -395,12 +399,24 @@ msgstr "Werk hier je profielfoto en persoonlijke gegevens bij."
 msgid "Upload profile picture"
 msgstr "Profielfoto uploaden"
 
+msgid "User actions"
+msgstr "Gebruikersacties"
+
+msgid "User data updated"
+msgstr "Gebruikersgegevens bijgewerkt"
+
 msgid "User invited successfully"
 msgstr "Gebruiker succesvol uitgenodigd"
 
+msgid "User not in current view"
+msgstr "Gebruiker niet in huidige weergave"
+
 msgid "User profile"
 msgstr "Gebruikersprofiel"
 
+msgid "User profile details"
+msgstr "Details van gebruikersprofiel"
+
 msgid "User profile menu"
 msgstr "Gebruikersprofielmenu"
 
@@ -425,6 +441,9 @@ msgstr "Gebruikers die hun e-mail niet hebben bevestigd"
 msgid "Verification code sent"
 msgstr "Verificatiecode verzonden"
 
+msgid "Verified"
+msgstr "Geverifieerd"
+
 msgid "Verify"
 msgstr "Verifiëren"
 
diff --git a/application/back-office/WebApp/shared/components/SharedSideMenu.tsx b/application/back-office/WebApp/shared/components/SharedSideMenu.tsx
index a789b1d01..8c5df1006 100644
--- a/application/back-office/WebApp/shared/components/SharedSideMenu.tsx
+++ b/application/back-office/WebApp/shared/components/SharedSideMenu.tsx
@@ -1,4 +1,5 @@
 import { t } from "@lingui/core/macro";
+import { useUserInfo } from "@repo/infrastructure/auth/hooks";
 import { MenuButton, SideMenu, SideMenuSpacer } from "@repo/ui/components/SideMenu";
 import { BoxIcon, HomeIcon } from "lucide-react";
 import type React from "react";
@@ -9,8 +10,10 @@ type SharedSideMenuProps = {
 };
 
 export function SharedSideMenu({ children, ariaLabel }: Readonly<SharedSideMenuProps>) {
+  const userInfo = useUserInfo();
+
   return (
-    <SideMenu ariaLabel={ariaLabel}>
+    <SideMenu ariaLabel={ariaLabel} tenantName={userInfo?.tenantName}>
       <MenuButton icon={HomeIcon} label={t`Home`} href="/back-office" />
       {children}
 
diff --git a/application/shared-kernel/SharedKernel/Authentication/TokenGeneration/AccessTokenGenerator.cs b/application/shared-kernel/SharedKernel/Authentication/TokenGeneration/AccessTokenGenerator.cs
index 7b0c2ba49..cb75a76be 100644
--- a/application/shared-kernel/SharedKernel/Authentication/TokenGeneration/AccessTokenGenerator.cs
+++ b/application/shared-kernel/SharedKernel/Authentication/TokenGeneration/AccessTokenGenerator.cs
@@ -22,6 +22,7 @@ public string Generate(UserInfo userInfo)
                     new Claim(JwtRegisteredClaimNames.FamilyName, userInfo.LastName ?? string.Empty),
                     new Claim(ClaimTypes.Role, userInfo.Role!),
                     new Claim("tenant_id", userInfo.TenantId!.ToString()),
+                    new Claim("tenant_name", userInfo.TenantName ?? string.Empty),
                     new Claim("title", userInfo.Title ?? string.Empty),
                     new Claim("avatar_url", userInfo.AvatarUrl ?? string.Empty),
                     new Claim("locale", userInfo.Locale!)
diff --git a/application/shared-kernel/SharedKernel/Authentication/UserInfo.cs b/application/shared-kernel/SharedKernel/Authentication/UserInfo.cs
index 76397ff20..c0068ab05 100644
--- a/application/shared-kernel/SharedKernel/Authentication/UserInfo.cs
+++ b/application/shared-kernel/SharedKernel/Authentication/UserInfo.cs
@@ -41,6 +41,8 @@ public class UserInfo
 
     public string? AvatarUrl { get; init; }
 
+    public string? TenantName { get; init; }
+
     public static UserInfo Create(ClaimsPrincipal? user, string? browserLocale)
     {
         if (user?.Identity?.IsAuthenticated != true)
@@ -65,6 +67,7 @@ public static UserInfo Create(ClaimsPrincipal? user, string? browserLocale)
             LastName = user.FindFirstValue(ClaimTypes.Surname),
             Title = user.FindFirstValue("title"),
             AvatarUrl = user.FindFirstValue("avatar_url"),
+            TenantName = user.FindFirstValue("tenant_name"),
             Locale = GetValidLocale(user.FindFirstValue("locale"))
         };
     }
diff --git a/application/shared-webapp/build/environment.d.ts b/application/shared-webapp/build/environment.d.ts
index f3650adf5..ab4212b28 100644
--- a/application/shared-webapp/build/environment.d.ts
+++ b/application/shared-webapp/build/environment.d.ts
@@ -80,6 +80,10 @@ export declare global {
      * Avatar url
      **/
     avatarUrl?: string | null;
+    /**
+     * Tenant name
+     **/
+    tenantName?: string;
   }
 
   /**
diff --git a/application/shared-webapp/infrastructure/translations/createLinguiConfig.ts b/application/shared-webapp/infrastructure/translations/createLinguiConfig.ts
index 8acff20af..ee197eb62 100644
--- a/application/shared-webapp/infrastructure/translations/createLinguiConfig.ts
+++ b/application/shared-webapp/infrastructure/translations/createLinguiConfig.ts
@@ -9,7 +9,7 @@ export function createLinguiConfig(): LinguiConfig {
     catalogs: [
       {
         path: "<rootDir>/shared/translations/locale/{locale}",
-        include: ["<rootDir>"],
+        include: ["<rootDir>/**/*.{ts,tsx}"],
         exclude: ["**/node_modules/**", "**/dist", "**/*.d.ts", "**/*.test.*", "**/.*"]
       }
     ],
diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx
index caa4b198d..a7c42e59a 100644
--- a/application/shared-webapp/ui/components/AppLayout.tsx
+++ b/application/shared-webapp/ui/components/AppLayout.tsx
@@ -1,7 +1,6 @@
 import type React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useSideMenuLayout } from "../hooks/useSideMenuLayout";
-import { MEDIA_QUERIES } from "../utils/responsive";
 
 type AppLayoutVariant = "full" | "center";
 
@@ -10,69 +9,35 @@ type AppLayoutProps = {
   topMenu: React.ReactNode;
   variant?: AppLayoutVariant;
   maxWidth?: string;
+  sidePane?: React.ReactNode;
 };
 
 /**
  * AppLayout provides the fixed layout structure for applications with a side menu.
- * - Fixed TopMenu that doesn't scroll with content
+ * - Fixed TopMenu that doesn't scroll with content (contains secondary navigation/functions)
  * - Scrollable content area that respects the side menu width
  * - Proper margin adjustments based on side menu state
+ * - SideMenu (rendered separately) contains the main navigation
+ *
+ * Accessibility landmarks:
+ * - SideMenu: <nav role="navigation"> (main navigation)
+ * - TopMenu: <div role="complementary"> (secondary navigation/functions)
+ * - Content: <main> (main content area)
+ * - SidePane: <aside> (complementary content)
  *
  * Variants:
  * - full: Content takes full width with standard padding
- * - center: Content is always centered with configurable max width (default: 640px). When SideMenu is expanded on large screens, content is shifted 50px left for better visual balance.
+ * - center: Content is always centered with configurable max width (default: 640px)
  */
-export function AppLayout({ children, topMenu, variant = "full", maxWidth = "640px" }: Readonly<AppLayoutProps>) {
+export function AppLayout({
+  children,
+  topMenu,
+  variant = "full",
+  maxWidth = "640px",
+  sidePane
+}: Readonly<AppLayoutProps>) {
   const { className, style, isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout();
 
-  const [isLargeScreen, setIsLargeScreen] = useState(() =>
-    typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.xl).matches : false
-  );
-  const [isSideMenuCollapsed, setIsSideMenuCollapsed] = useState(() => {
-    if (typeof window === "undefined") {
-      return true;
-    }
-    // Check if we're on large screen
-    const isLarge = window.matchMedia(MEDIA_QUERIES.xl).matches;
-    if (!isLarge) {
-      return true; // Always collapsed on smaller screens
-    }
-
-    const stored = localStorage.getItem("side-menu-collapsed");
-    return stored === "true";
-  });
-
-  // Listen for screen size changes
-  useEffect(() => {
-    const xlQuery = window.matchMedia(MEDIA_QUERIES.xl);
-    const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches);
-
-    xlQuery.addEventListener("change", handleXlChange);
-    return () => xlQuery.removeEventListener("change", handleXlChange);
-  }, []);
-
-  // Listen for side menu toggle events
-  useEffect(() => {
-    const handleMenuToggle = (event: CustomEvent) => {
-      if (isLargeScreen) {
-        setIsSideMenuCollapsed(event.detail.isCollapsed);
-      }
-    };
-
-    window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener);
-    return () => window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener);
-  }, [isLargeScreen]);
-
-  // Update side menu state when screen size changes
-  useEffect(() => {
-    if (!isLargeScreen) {
-      setIsSideMenuCollapsed(true);
-    } else {
-      const stored = localStorage.getItem("side-menu-collapsed");
-      setIsSideMenuCollapsed(stored === "true");
-    }
-  }, [isLargeScreen]);
-
   // Prevent body scroll when overlay is open
   useEffect(() => {
     if (isOverlayOpen) {
@@ -87,47 +52,59 @@ export function AppLayout({ children, topMenu, variant = "full", maxWidth = "640
   }, [isOverlayOpen]);
 
   return (
-    <div
-      className={`${className} flex h-screen flex-col`}
-      style={style}
-      // Prevent interaction with content when overlay is open, but not with the menu
-      {...(isOverlayOpen && ({ inert: "" } as unknown as React.HTMLAttributes<HTMLDivElement>))}
-    >
-      {/* Fixed TopMenu with blur effect */}
-      <div
-        className={`fixed top-0 right-0 left-0 z-30 bg-background/95 px-4 py-3 backdrop-blur-sm ${
-          isMobileMenuOpen ? "hidden" : ""
-        }`}
-        style={{ marginLeft: style.marginLeft }}
+    <>
+      {/* Skip navigation link for keyboard users */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:shadow-lg"
       >
-        {topMenu}
-      </div>
-      {/* Soft gradient fade below TopMenu */}
+        Skip to main content
+      </a>
       <div
-        className={`pointer-events-none fixed inset-x-0 top-[60px] z-30 h-4 bg-gradient-to-b from-background/30 to-transparent ${
-          isMobileMenuOpen ? "hidden" : ""
-        }`}
-        style={{ marginLeft: style.marginLeft }}
-      />
+        className={`${className} ${sidePane ? "grid grid-cols-[1fr_384px] sm:grid" : "flex flex-col"} h-screen`}
+        style={style}
+      >
+        {/* Fixed TopMenu with blur effect - contains breadcrumbs and secondary functions */}
+        <div
+          role="complementary"
+          className={`fixed top-0 right-0 left-0 z-30 bg-background/95 px-4 py-4 backdrop-blur-sm sm:border-border sm:border-b ${
+            isMobileMenuOpen ? "hidden" : ""
+          } hidden sm:block`}
+          aria-label="Secondary navigation"
+        >
+          <div style={{ marginLeft: style.marginLeft }}>{topMenu}</div>
+        </div>
 
-      {/* Scrollable content area with bounce */}
-      <div className="flex h-full min-h-[600px] w-full flex-1 flex-col px-4 pt-4 sm:pt-24">
-        {variant === "center" ? (
-          <div className="flex w-full flex-col items-center">
-            <div
-              className="w-full"
-              style={{
-                maxWidth,
-                transform: isLargeScreen && !isSideMenuCollapsed ? "translateX(-50px)" : "translateX(0)"
-              }}
-            >
-              {children}
+        {/* Main content area */}
+        <main
+          className={`flex h-full min-h-[600px] w-full flex-1 flex-col px-4 pt-4 transition-all duration-100 ease-in-out sm:pt-28 ${
+            sidePane ? "overflow-x-auto" : ""
+          }`}
+          id="main-content"
+          aria-label="Main content"
+          tabIndex={-1}
+        >
+          {variant === "center" ? (
+            <div className="flex w-full flex-col items-center">
+              <div className="w-full" style={{ maxWidth }}>
+                {children}
+              </div>
             </div>
-          </div>
-        ) : (
-          children
+          ) : (
+            children
+          )}
+        </main>
+
+        {/* Side pane area - responsive behavior */}
+        {sidePane && (
+          <aside
+            className="fixed inset-0 z-[60] md:inset-auto md:top-[72px] md:right-0 md:h-[calc(100vh-72px)] md:w-96"
+            aria-label="Side panel"
+          >
+            {sidePane}
+          </aside>
         )}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/application/shared-webapp/ui/components/Dropdown.tsx b/application/shared-webapp/ui/components/Dropdown.tsx
index b89fa3b51..f171d3abd 100644
--- a/application/shared-webapp/ui/components/Dropdown.tsx
+++ b/application/shared-webapp/ui/components/Dropdown.tsx
@@ -18,7 +18,7 @@ export const dropdownItemStyles = tv({
   variants: {
     isDisabled: {
       false: "text-foreground",
-      true: "text-accent forced-colors:text-[GrayText]"
+      true: "cursor-not-allowed text-muted-foreground opacity-50 hover:bg-input-background forced-colors:text-[GrayText]"
     },
     isFocused: {
       true: "bg-hover-background text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
diff --git a/application/shared-webapp/ui/components/Link.tsx b/application/shared-webapp/ui/components/Link.tsx
index e11bb2814..02af4af46 100644
--- a/application/shared-webapp/ui/components/Link.tsx
+++ b/application/shared-webapp/ui/components/Link.tsx
@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
 import { focusRing } from "./focusRing";
 
 interface LinkProps extends AriaLinkProps {
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "destructive" | "ghost";
   underline?: boolean | "hover";
   size?: "md" | "sm" | "lg";
 }
@@ -20,7 +20,7 @@ const styles = tv({
       primary: "text-primary hover:text-primary/90",
       secondary: "text-secondary-foreground hover:text-secondary-foreground/90",
       destructive: "text-destructive hover:text-destructive/90",
-      ghost: "text-muted-foreground hover:text-muted-foreground/90"
+      ghost: "text-accent-foreground hover:bg-hover-background hover:text-accent-foreground/90"
     },
     underline: {
       true: "underline disabled:no-underline",
diff --git a/application/shared-webapp/ui/components/Menu.tsx b/application/shared-webapp/ui/components/Menu.tsx
index 68ca920af..fa31af76c 100644
--- a/application/shared-webapp/ui/components/Menu.tsx
+++ b/application/shared-webapp/ui/components/Menu.tsx
@@ -43,7 +43,7 @@ export function MenuItem(props: Readonly<MenuItemProps>) {
               {isSelected && <Check aria-hidden={true} className="h-4 w-4" />}
             </span>
           )}
-          <span className="flex flex-1 items-center gap-2 truncate px-2 py-1 font-normal group-selected:font-semibold">
+          <span className="flex flex-1 items-center gap-2 truncate px-2 py-1 font-normal group-selected:font-semibold [&_svg]:group-disabled:opacity-50">
             {children}
           </span>
           {hasSubmenu && <ChevronRight aria-hidden={true} className="absolute right-2 h-4 w-4" />}
diff --git a/application/shared-webapp/ui/components/Pagination.tsx b/application/shared-webapp/ui/components/Pagination.tsx
index 094c992d1..d5f054619 100644
--- a/application/shared-webapp/ui/components/Pagination.tsx
+++ b/application/shared-webapp/ui/components/Pagination.tsx
@@ -45,7 +45,13 @@ export function Pagination({
 
   return (
     <nav aria-label="Pagination" className={paginationStyles({ className })}>
-      <Button variant="secondary" className="" onPress={handlePrevious} isDisabled={currentPage === 1}>
+      <Button
+        variant="secondary"
+        className=""
+        onPress={handlePrevious}
+        isDisabled={currentPage === 1}
+        aria-label={previousLabel ? String(previousLabel) : "Previous page"}
+      >
         <ArrowLeftIcon className="h-4 w-4" />
         {previousLabel && <span className="hidden sm:block">{previousLabel}</span>}
       </Button>
@@ -59,7 +65,13 @@ export function Pagination({
         />
       </FocusScope>
 
-      <Button variant="secondary" className="" onPress={handleNext} isDisabled={currentPage === totalPages}>
+      <Button
+        variant="secondary"
+        className=""
+        onPress={handleNext}
+        isDisabled={currentPage === totalPages}
+        aria-label={nextLabel ? String(nextLabel) : "Next page"}
+      >
         {nextLabel && <span className="hidden sm:block">{nextLabel}</span>}
         <ArrowRightIcon className="h-4 w-4" />
       </Button>
diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx
index 5ce602718..27e75c4f9 100644
--- a/application/shared-webapp/ui/components/SideMenu.tsx
+++ b/application/shared-webapp/ui/components/SideMenu.tsx
@@ -1,15 +1,15 @@
 import type { Href } from "@react-types/shared";
-import { type MakeRouteMatch, useRouter } from "@tanstack/react-router";
+import { type MakeRouteMatch, Link as RouterLink, useRouter } from "@tanstack/react-router";
 import { ChevronsLeftIcon, type LucideIcon, Menu, X } from "lucide-react";
 import type React from "react";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { ToggleButton, composeRenderProps } from "react-aria-components";
+import { ToggleButton } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { useResponsiveMenu } from "../hooks/useResponsiveMenu";
 import logoMarkUrl from "../images/logo-mark.svg";
-import logoWrapUrl from "../images/logo-wrap.svg";
-import { MEDIA_QUERIES } from "../utils/responsive";
+import { MEDIA_QUERIES, SIDE_MENU_DEFAULT_WIDTH, SIDE_MENU_MAX_WIDTH, SIDE_MENU_MIN_WIDTH } from "../utils/responsive";
 import { Button } from "./Button";
+import { Link } from "./Link";
 import { Tooltip, TooltipTrigger } from "./Tooltip";
 import { focusRing } from "./focusRing";
 
@@ -44,7 +44,7 @@ const _handleFocusTrap = (e: KeyboardEvent, containerRef: React.RefObject<HTMLEl
 
 const menuButtonStyles = tv({
   extend: focusRing,
-  base: "menu-item relative flex h-11 w-full items-center justify-start gap-0 overflow-visible rounded-md py-2 pr-4 pl-4 font-normal text-base hover:bg-hover-background",
+  base: "menu-item relative flex h-11 w-full items-center justify-start gap-0 overflow-visible rounded-md py-2 pr-2 pl-4 font-normal text-base hover:bg-hover-background focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
   variants: {
     isCollapsed: {
       true: "",
@@ -53,6 +53,10 @@ const menuButtonStyles = tv({
     isActive: {
       true: "text-foreground",
       false: "text-muted-foreground hover:text-foreground"
+    },
+    isDisabled: {
+      true: "cursor-not-allowed opacity-50 hover:bg-background",
+      false: ""
     }
   }
 });
@@ -63,6 +67,10 @@ const menuTextStyles = tv({
     isCollapsed: {
       true: "max-w-0 opacity-0",
       false: "max-w-[200px] opacity-100"
+    },
+    isActive: {
+      true: "font-semibold",
+      false: "font-normal"
     }
   }
 });
@@ -82,6 +90,68 @@ type MenuButtonProps = {
     }
 );
 
+// Helper function to get target path from href
+const getTargetPath = (to: Href | string, router: ReturnType<typeof useRouter>): string => {
+  if (typeof to === "string") {
+    return to;
+  }
+  try {
+    return router.buildLocation({ to: to as MakeRouteMatch }).pathname;
+  } catch {
+    return String(to);
+  }
+};
+
+// Helper function to normalize path
+const normalizePath = (path: string): string => path.replace(/\/$/, "") || "/";
+
+// Helper component for the menu link content
+function MenuLinkContent({
+  icon: Icon,
+  label,
+  isActive,
+  isCollapsed
+}: {
+  icon: LucideIcon;
+  label: string;
+  isActive: boolean;
+  isCollapsed: boolean;
+}) {
+  return (
+    <>
+      <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+        <Icon
+          className={`h-5 w-5 ${isActive ? "stroke-foreground" : "stroke-current"} ${isActive && isCollapsed ? "stroke-[2.5px]" : ""}`}
+        />
+      </div>
+      <div className={`${menuTextStyles({ isCollapsed, isActive })} ${isCollapsed ? "" : "ml-4"}`}>{label}</div>
+    </>
+  );
+}
+
+// Helper component for active indicator
+function ActiveIndicator({
+  isActive,
+  isMobileMenu,
+  isCollapsed
+}: {
+  isActive: boolean;
+  isMobileMenu: boolean;
+  isCollapsed: boolean;
+}) {
+  if (!isActive) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`-translate-y-1/2 absolute top-1/2 h-8 w-1 bg-primary ${
+        isMobileMenu ? "-left-3" : isCollapsed ? "-left-2" : "-left-3"
+      }`}
+    />
+  );
+}
+
 export function MenuButton({
   icon: Icon,
   label,
@@ -92,100 +162,99 @@ export function MenuButton({
   const isCollapsed = useContext(collapsedContext);
   const overlayCtx = useContext(overlayContext);
   const router = useRouter();
-  const { navigate } = router;
 
   // Check if this menu item is active
   const currentPath = router.state.location.pathname;
-  let targetPath: string;
+  const targetPath = getTargetPath(to, router);
+  const isActive = normalizePath(currentPath) === normalizePath(targetPath);
 
-  if (typeof to === "string") {
-    targetPath = to;
-  } else {
-    try {
-      targetPath = router.buildLocation({ to: to as MakeRouteMatch }).pathname;
-    } catch {
-      // If buildLocation fails, fallback to string representation
-      targetPath = String(to);
-    }
-  }
-
-  // Normalize paths by removing trailing slashes
-  const normalizedCurrentPath = currentPath.replace(/\/$/, "") || "/";
-  const normalizedTargetPath = targetPath.replace(/\/$/, "") || "/";
+  // Check if we're in the mobile menu context
+  const isMobileMenu = !window.matchMedia(MEDIA_QUERIES.sm).matches && !!overlayCtx?.isOpen;
 
-  // Check if current path matches the target path exactly
-  const isActive = normalizedCurrentPath === normalizedTargetPath;
+  const linkClassName = menuButtonStyles({ isCollapsed, isActive, isDisabled });
 
-  const onPress = () => {
-    if (to == null) {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (isDisabled) {
+      e.preventDefault();
       return;
     }
 
-    // Auto-close overlay after navigation (including when clicking active menu item)
+    // Auto-close overlay after navigation
     if (overlayCtx?.isOpen) {
       overlayCtx.close();
     }
 
-    // If clicking on the current active page, still close menu but don't navigate
-    if (isActive) {
+    // Handle force reload
+    if (forceReload) {
+      e.preventDefault();
+      window.location.href = to;
+    }
+  };
+
+  const handlePress = () => {
+    if (isDisabled) {
       return;
     }
 
+    // Auto-close overlay after navigation
+    if (overlayCtx?.isOpen) {
+      overlayCtx.close();
+    }
+
+    // Handle navigation for React Aria Link
     if (forceReload) {
       window.location.href = to;
-    } else {
-      navigate({ to });
     }
   };
 
-  // Check if we're in the mobile menu context
-  const isMobileMenu =
-    typeof window !== "undefined" && !window.matchMedia(MEDIA_QUERIES.sm).matches && overlayCtx?.isOpen;
-
-  return (
-    <div className="relative">
-      {/* Active indicator bar - positioned outside button for proper visibility */}
-      {isActive && (
-        <div
-          className={`-translate-y-1/2 absolute top-1/2 h-8 w-1 bg-primary ${
-            isMobileMenu ? "-left-3" : isCollapsed ? "-left-2" : "-left-6"
-          }`}
-        />
-      )}
-      <TooltipTrigger delay={0}>
-        <ToggleButton
-          className={composeRenderProps("", (className, renderProps) =>
-            menuButtonStyles({
-              ...renderProps,
-              className,
-              isCollapsed,
-              isActive
-            })
-          )}
-          onPress={onPress}
-          isDisabled={isDisabled}
-        >
-          <div className="flex h-6 w-6 shrink-0 items-center justify-center">
-            <Icon className={`h-5 w-5 ${isActive ? "stroke-foreground" : "stroke-current"}`} />
-          </div>
-          <div className={`${menuTextStyles({ isCollapsed })} ${isCollapsed ? "" : "ml-4"}`}>{label}</div>
-        </ToggleButton>
-        {isCollapsed && (
+  // For collapsed menu, wrap in TooltipTrigger
+  if (isCollapsed) {
+    return (
+      <div className="relative">
+        <ActiveIndicator isActive={isActive} isMobileMenu={isMobileMenu} isCollapsed={isCollapsed} />
+        <TooltipTrigger>
+          <Link
+            href={forceReload ? undefined : to}
+            className={linkClassName}
+            variant="ghost"
+            underline={false}
+            isDisabled={isDisabled}
+            aria-current={isActive ? "page" : undefined}
+            onPress={handlePress}
+          >
+            <MenuLinkContent icon={Icon} label={label} isActive={isActive} isCollapsed={isCollapsed} />
+          </Link>
           <Tooltip placement="right" offset={4}>
             {label}
           </Tooltip>
-        )}
-      </TooltipTrigger>
+        </TooltipTrigger>
+      </div>
+    );
+  }
+
+  // For expanded menu, use TanStack Router Link
+  return (
+    <div className="relative">
+      <ActiveIndicator isActive={isActive} isMobileMenu={isMobileMenu} isCollapsed={isCollapsed} />
+      <RouterLink
+        to={to}
+        className={linkClassName}
+        onClick={handleClick}
+        disabled={isDisabled}
+        aria-current={isActive ? "page" : undefined}
+      >
+        <MenuLinkContent icon={Icon} label={label} isActive={isActive} isCollapsed={isCollapsed} />
+      </RouterLink>
     </div>
   );
 }
 
 const sideMenuStyles = tv({
-  base: "group fixed top-0 left-0 z-50 flex h-screen flex-col bg-background transition-[width] duration-100",
+  base: "group fixed top-0 left-0 z-50 flex h-screen flex-col bg-background transition-[width] duration-100 md:z-[70]",
   variants: {
     isCollapsed: {
-      true: "mr-2 w-[72px]",
-      false: "mr-2 w-72"
+      true: "w-[72px]",
+      false: "" // Width will be set inline for resizable menu
     },
     overlayMode: {
       true: "",
@@ -199,7 +268,14 @@ const sideMenuStyles = tv({
       true: "hidden",
       false: "flex"
     }
-  }
+  },
+  compoundVariants: [
+    {
+      overlayMode: true,
+      isOverlayOpen: true,
+      class: "w-[320px]" // Wider overlay for longer tenant names
+    }
+  ]
 });
 
 const chevronStyles = tv({
@@ -216,40 +292,202 @@ type SideMenuProps = {
   children: React.ReactNode;
   ariaLabel: string;
   topMenuContent?: React.ReactNode;
+  tenantName?: string;
 };
 
-export function SideMenu({ children, ariaLabel, topMenuContent }: Readonly<SideMenuProps>) {
-  const { className, forceCollapsed, overlayMode, isHidden } = useResponsiveMenu();
-  const sideMenuRef = useRef<HTMLDivElement>(null);
-  const [isOverlayOpen, setIsOverlayOpen] = useState(false);
-
-  // Initialize collapsed state with synchronous check to prevent flicker
-  const [isCollapsed, setIsCollapsed] = useState(() => {
-    if (typeof window === "undefined") {
-      return true;
+// Helper function to get initial menu width from localStorage
+const _getInitialMenuWidth = (): number => {
+  const stored = localStorage.getItem("side-menu-size");
+  if (stored) {
+    const width = Number.parseInt(stored, 10);
+    if (!Number.isNaN(width) && width >= SIDE_MENU_MIN_WIDTH && width <= SIDE_MENU_MAX_WIDTH) {
+      return width;
     }
+  }
+  return SIDE_MENU_DEFAULT_WIDTH;
+};
 
-    // Force collapsed on medium screens
-    if (forceCollapsed) {
-      return true;
-    }
+// Helper function to get initial collapsed state
+const _getInitialCollapsedState = (forceCollapsed: boolean): boolean => {
+  if (forceCollapsed) {
+    return true;
+  }
+  return localStorage.getItem("side-menu-collapsed") === "true";
+};
 
-    // Check localStorage for large screens
-    try {
-      return localStorage.getItem("side-menu-collapsed") === "true";
-    } catch {
-      return false;
+// Helper function to get user preference for collapsed state
+const _getUserPreference = (): boolean => {
+  return localStorage.getItem("side-menu-collapsed") === "true";
+};
+
+// Helper function to check if drag movement has started
+const _checkDragStarted = (
+  e: MouseEvent,
+  dragStartPos: React.MutableRefObject<{ x: number; y: number } | null>,
+  hasDraggedRef: React.MutableRefObject<boolean>
+): void => {
+  if (dragStartPos.current && !hasDraggedRef.current) {
+    const distance = Math.abs(e.clientX - dragStartPos.current.x) + Math.abs(e.clientY - dragStartPos.current.y);
+    if (distance > 5) {
+      hasDraggedRef.current = true;
     }
-  });
-
-  // Save the user's preference before being forced collapsed
-  const [userPreference, setUserPreference] = useState(() => {
-    try {
-      return localStorage.getItem("side-menu-collapsed") === "true";
-    } catch {
-      return false;
+  }
+};
+
+// Helper function to handle resize actions
+const _handleResizeAction = (
+  mouseX: number,
+  isCollapsed: boolean,
+  hasTriggeredCollapse: boolean,
+  setMenuWidth: (width: number) => void
+): void => {
+  if (!isCollapsed && !hasTriggeredCollapse) {
+    const newWidth = Math.min(Math.max(mouseX, SIDE_MENU_MIN_WIDTH), SIDE_MENU_MAX_WIDTH);
+    setMenuWidth(newWidth);
+    window.dispatchEvent(new CustomEvent("side-menu-resize", { detail: { width: newWidth } }));
+  }
+};
+
+// Helper function to dispatch menu toggle event
+const _dispatchMenuToggleEvent = (overlayMode: boolean, isExpanded: boolean): void => {
+  if (overlayMode) {
+    window.dispatchEvent(new CustomEvent("side-menu-overlay-toggle", { detail: { isExpanded } }));
+  } else {
+    window.dispatchEvent(new CustomEvent("side-menu-toggle", { detail: { isCollapsed: !isExpanded } }));
+  }
+};
+
+// Helper function to save menu preference
+const _saveMenuPreference = (isCollapsed: boolean): void => {
+  localStorage.setItem("side-menu-collapsed", isCollapsed.toString());
+};
+
+// Helper function to focus toggle button
+const _focusToggleButton = (toggleButtonRef: React.RefObject<HTMLButtonElement | HTMLDivElement | null>): void => {
+  if (!toggleButtonRef.current) {
+    return;
+  }
+
+  if (toggleButtonRef.current instanceof HTMLButtonElement) {
+    toggleButtonRef.current.focus();
+  } else {
+    const button = toggleButtonRef.current.querySelector("button");
+    button?.focus();
+  }
+};
+
+// Helper function to handle resize with arrow keys
+const _handleArrowKeyResize = (
+  e: React.KeyboardEvent,
+  direction: "left" | "right",
+  menuWidth: number,
+  setMenuWidth: (width: number) => void
+): void => {
+  e.preventDefault();
+  const delta = direction === "left" ? -10 : 10;
+  const newWidth = Math.min(Math.max(menuWidth + delta, SIDE_MENU_MIN_WIDTH), SIDE_MENU_MAX_WIDTH);
+  setMenuWidth(newWidth);
+  localStorage.setItem("side-menu-size", newWidth.toString());
+  window.dispatchEvent(new CustomEvent("side-menu-resize", { detail: { width: newWidth } }));
+};
+
+// Backdrop component for overlay mode
+const OverlayBackdrop = ({ closeOverlay }: { closeOverlay: () => void }) => (
+  <div
+    className="fixed top-0 right-0 bottom-0 left-[72px] z-40 bg-black/50 transition-opacity duration-100 sm:block md:z-[65] xl:hidden"
+    onClick={closeOverlay}
+    onKeyDown={(e) => e.key === "Enter" && closeOverlay()}
+    role="button"
+    tabIndex={0}
+    aria-label="Close menu"
+  />
+);
+
+// Logo and tenant name component
+const LogoSection = ({ actualIsCollapsed, tenantName }: { actualIsCollapsed: boolean; tenantName?: string }) => (
+  <div
+    className={actualIsCollapsed ? "flex w-full justify-center" : ""}
+    style={
+      actualIsCollapsed
+        ? undefined
+        : {
+            display: "grid",
+            gridTemplateColumns: "auto 1fr",
+            gap: "12px",
+            alignItems: "center",
+            paddingLeft: "24px",
+            paddingRight: "10px",
+            width: "100%"
+          }
     }
-  });
+  >
+    <img src={logoMarkUrl} alt="Logo" className="h-8 w-8 shrink-0" />
+    {!actualIsCollapsed && (
+      <span
+        className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold text-foreground text-sm"
+        style={{ minWidth: 0 }}
+      >
+        {tenantName || "PlatformPlatform"}
+      </span>
+    )}
+  </div>
+);
+
+// Toggle button component for XL screens
+const ResizableToggleButton = ({
+  toggleButtonRef,
+  handleResizeStart,
+  hasDraggedRef,
+  toggleMenu,
+  menuWidth,
+  setMenuWidth,
+  ariaLabel,
+  actualIsCollapsed
+}: {
+  toggleButtonRef: React.RefObject<HTMLButtonElement>;
+  handleResizeStart: (e: React.MouseEvent) => void;
+  hasDraggedRef: React.MutableRefObject<boolean>;
+  toggleMenu: () => void;
+  menuWidth: number;
+  setMenuWidth: (width: number) => void;
+  ariaLabel: string;
+  actualIsCollapsed: boolean;
+}) => (
+  <button
+    ref={toggleButtonRef}
+    type="button"
+    className="toggle-button flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity duration-100 focus:outline-none focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group-focus-within:opacity-100 group-hover:opacity-100"
+    onMouseDown={handleResizeStart}
+    onClick={() => {
+      if (!hasDraggedRef.current) {
+        toggleMenu();
+      }
+    }}
+    onKeyDown={(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggleMenu();
+      } else if (e.key === "ArrowLeft") {
+        _handleArrowKeyResize(e, "left", menuWidth, setMenuWidth);
+      } else if (e.key === "ArrowRight") {
+        _handleArrowKeyResize(e, "right", menuWidth, setMenuWidth);
+      }
+    }}
+    aria-label={ariaLabel}
+  >
+    <ChevronsLeftIcon className={chevronStyles({ isCollapsed: actualIsCollapsed })} />
+  </button>
+);
+
+export function SideMenu({ children, ariaLabel, topMenuContent, tenantName }: Readonly<SideMenuProps>) {
+  const { className, forceCollapsed, overlayMode, isHidden } = useResponsiveMenu();
+  const sideMenuRef = useRef<HTMLDivElement>(null);
+  const toggleButtonRef = useRef<HTMLButtonElement | HTMLDivElement>(null);
+  const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [menuWidth, setMenuWidth] = useState(_getInitialMenuWidth);
+  const [isCollapsed, setIsCollapsed] = useState(() => _getInitialCollapsedState(forceCollapsed));
+  const [userPreference, setUserPreference] = useState(_getUserPreference);
 
   // Update collapsed state when screen size changes
   useEffect(() => {
@@ -265,39 +503,29 @@ export function SideMenu({ children, ariaLabel, topMenuContent }: Readonly<SideM
   // The actual visual collapsed state
   const actualIsCollapsed = overlayMode ? !isOverlayOpen : forceCollapsed || isCollapsed;
 
-  const toggleMenu = () => {
+  // Check if we're on XL screen (for resize functionality)
+  const isXlScreen = !overlayMode && !forceCollapsed;
+
+  const toggleMenu = useCallback(() => {
     if (overlayMode) {
-      setIsOverlayOpen(!isOverlayOpen);
-      // Dispatch event for layout hook
-      window.dispatchEvent(
-        new CustomEvent("side-menu-overlay-toggle", {
-          detail: { isExpanded: !isOverlayOpen }
-        })
-      );
+      const newIsOpen = !isOverlayOpen;
+      setIsOverlayOpen(newIsOpen);
+      _dispatchMenuToggleEvent(true, newIsOpen);
     } else if (!forceCollapsed) {
       const newCollapsed = !isCollapsed;
       setIsCollapsed(newCollapsed);
       setUserPreference(newCollapsed);
-      try {
-        localStorage.setItem("side-menu-collapsed", newCollapsed.toString());
-      } catch {}
-      // Dispatch event for layout hook
-      window.dispatchEvent(
-        new CustomEvent("side-menu-toggle", {
-          detail: { isCollapsed: newCollapsed }
-        })
-      );
+      _saveMenuPreference(newCollapsed);
+      _dispatchMenuToggleEvent(false, !newCollapsed);
     }
-  };
+    // Maintain focus on the toggle button after state change
+    setTimeout(() => _focusToggleButton(toggleButtonRef), 0);
+  }, [overlayMode, isOverlayOpen, forceCollapsed, isCollapsed]);
 
   const closeOverlay = useCallback(() => {
     if (overlayMode && isOverlayOpen) {
       setIsOverlayOpen(false);
-      window.dispatchEvent(
-        new CustomEvent("side-menu-overlay-toggle", {
-          detail: { isExpanded: false }
-        })
-      );
+      _dispatchMenuToggleEvent(true, false);
     }
   }, [overlayMode, isOverlayOpen]);
 
@@ -355,64 +583,149 @@ export function SideMenu({ children, ariaLabel, topMenuContent }: Readonly<SideM
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOverlayOpen, overlayMode]);
 
+  // Track mouse movement to detect dragging
+  const dragStartPos = useRef<{ x: number; y: number } | null>(null);
+  const hasDraggedRef = useRef(false);
+
+  // Handle resize drag
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    dragStartPos.current = { x: e.clientX, y: e.clientY };
+    hasDraggedRef.current = false;
+  }, []);
+
+  useEffect(() => {
+    if (!isResizing) {
+      return;
+    }
+
+    // Add global cursor style
+    document.body.style.cursor = "col-resize";
+
+    let hasTriggeredCollapse = false;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const mouseX = e.clientX - 8;
+
+      // Check if mouse has moved more than 5px from start (indicates dragging)
+      _checkDragStarted(e, dragStartPos, hasDraggedRef);
+
+      // If dragging from collapsed state and mouse is past collapsed width, expand
+      if (isCollapsed && mouseX > 100) {
+        toggleMenu();
+        setIsResizing(false);
+        document.body.style.cursor = "";
+        return;
+      }
+
+      // If dragging to edge from expanded state, collapse
+      if (!isCollapsed && mouseX < 20 && !hasTriggeredCollapse) {
+        hasTriggeredCollapse = true;
+        toggleMenu();
+        setIsResizing(false);
+        document.body.style.cursor = "";
+        return;
+      }
+
+      // Normal resize when expanded
+      _handleResizeAction(mouseX, isCollapsed, hasTriggeredCollapse, setMenuWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      document.body.style.cursor = "";
+      // Only save if we didn't trigger collapse
+      if (!hasTriggeredCollapse && !isCollapsed) {
+        localStorage.setItem("side-menu-size", menuWidth.toString());
+      }
+      dragStartPos.current = null;
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+    };
+  }, [isResizing, menuWidth, isCollapsed, toggleMenu]);
+
   return (
     <>
       {/* Backdrop for overlay mode */}
-      {overlayMode && isOverlayOpen && (
-        <div
-          className="fixed top-0 right-0 bottom-0 left-[72px] z-40 bg-black/50 transition-opacity duration-100 sm:block xl:hidden"
-          onClick={closeOverlay}
-          onKeyDown={(e) => e.key === "Enter" && closeOverlay()}
-          role="button"
-          tabIndex={0}
-          aria-label="Close menu"
-        />
-      )}
+      {overlayMode && isOverlayOpen && <OverlayBackdrop closeOverlay={closeOverlay} />}
 
       <collapsedContext.Provider value={actualIsCollapsed}>
         <overlayContext.Provider value={{ isOpen: isOverlayOpen, close: closeOverlay }}>
-          <div
+          <nav
             ref={sideMenuRef}
-            className={sideMenuStyles({
+            className={`${sideMenuStyles({
               isCollapsed: actualIsCollapsed,
               overlayMode,
               isOverlayOpen,
               isHidden: isHidden && !overlayMode,
               className
-            })}
+            })} ${isResizing ? "cursor-col-resize select-none" : ""}`}
+            style={{
+              width: isXlScreen && !isCollapsed ? `${menuWidth}px` : undefined,
+              transition: isResizing ? "none" : undefined
+            }}
+            aria-label="Main navigation"
           >
-            {/* Vertical divider line */}
-            <div className="absolute top-0 right-0 h-full border-border/50 border-r opacity-0 transition-opacity duration-100 group-focus-within:opacity-100 group-hover:opacity-100" />
+            {/* Vertical divider line - draggable on XL screens */}
+            <div
+              className={`absolute top-0 right-0 h-full border-border border-r ${
+                isXlScreen ? "w-2 cursor-col-resize" : ""
+              }`}
+              onMouseDown={isXlScreen ? handleResizeStart : undefined}
+            />
 
             {/* Fixed header section with logo */}
-            <div className="relative flex h-20 w-full shrink-0 items-center">
-              {/* Logo container - fixed position */}
-              <div className={actualIsCollapsed ? "-mt-5 flex w-full justify-center pt-1" : "-mt-5 pt-1 pl-7"}>
-                {actualIsCollapsed ? (
-                  <img src={logoMarkUrl} alt="Logo" className="h-8 w-8" />
-                ) : (
-                  <img src={logoWrapUrl} alt="Logo" className="h-8 w-auto" />
-                )}
-              </div>
+            <div className="relative flex h-[72px] w-full shrink-0 items-center">
+              <LogoSection actualIsCollapsed={actualIsCollapsed} tenantName={tenantName} />
 
-              {/* Toggle button centered on divider, midway between logo and first menu item */}
-              <ToggleButton
-                aria-label={ariaLabel}
-                className={`toggle-button absolute top-[62px] flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity duration-100 focus:outline-none focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group-focus-within:opacity-100 group-hover:opacity-100 ${
-                  actualIsCollapsed ? "-right-3" : "right-0 translate-x-1/2"
+              {/* Toggle button centered on divider, at intersection with topbar border */}
+              <div
+                className={`-translate-y-1/2 absolute top-[72px] right-0 translate-x-1/2 ${
+                  !overlayMode && !forceCollapsed ? "cursor-col-resize" : ""
                 }`}
-                isSelected={actualIsCollapsed}
-                onPress={toggleMenu}
               >
-                <ChevronsLeftIcon className={chevronStyles({ isCollapsed: actualIsCollapsed })} />
-              </ToggleButton>
+                {isXlScreen ? (
+                  <ResizableToggleButton
+                    toggleButtonRef={toggleButtonRef as React.RefObject<HTMLButtonElement>}
+                    handleResizeStart={handleResizeStart}
+                    hasDraggedRef={hasDraggedRef}
+                    toggleMenu={toggleMenu}
+                    menuWidth={menuWidth}
+                    setMenuWidth={setMenuWidth}
+                    ariaLabel={ariaLabel}
+                    actualIsCollapsed={actualIsCollapsed}
+                  />
+                ) : (
+                  <div ref={toggleButtonRef as React.RefObject<HTMLDivElement>}>
+                    <ToggleButton
+                      aria-label={ariaLabel}
+                      className={
+                        "toggle-button flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 transition-opacity duration-100 focus:outline-none focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background group-focus-within:opacity-100 group-hover:opacity-100"
+                      }
+                      isSelected={actualIsCollapsed}
+                      onPress={toggleMenu}
+                    >
+                      <ChevronsLeftIcon className={chevronStyles({ isCollapsed: actualIsCollapsed })} />
+                    </ToggleButton>
+                  </div>
+                )}
+              </div>
             </div>
 
             {/* Scrollable menu content */}
-            <div className={`flex-1 overflow-y-auto ${actualIsCollapsed ? "px-2" : "px-6"} mt-2`}>
+            <div className={`flex-1 overflow-y-auto ${actualIsCollapsed ? "px-2" : "px-3"} mt-2`}>
               <div className="flex flex-col gap-2 pt-1.5">{children}</div>
             </div>
-          </div>
+          </nav>
         </overlayContext.Provider>
       </collapsedContext.Provider>
 
@@ -442,7 +755,7 @@ export function SideMenuSeparator({ children }: Readonly<SideMenuSeparatorProps>
   const isCollapsed = useContext(collapsedContext);
   return (
     <div className={sideMenuSeparatorStyles({ isCollapsed })}>
-      {isCollapsed ? <div className="w-6 border-border/100 border-b-4" /> : children}
+      {isCollapsed ? <div className="w-6 border-border border-b-4" /> : children}
     </div>
   );
 }
@@ -520,14 +833,17 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
       )}
       {isOpen && (
         <overlayContext.Provider value={{ isOpen, close: () => setIsOpen(false) }}>
-          <div
+          <dialog
             className="fixed inset-0 z-[200] h-[100vh] w-[100vw] bg-background"
             style={{ margin: 0, padding: 0, border: "none", top: 0, left: 0, right: 0, bottom: 0 }}
+            aria-label="Mobile navigation menu"
+            open={true}
           >
-            <div
+            <nav
               className="flex h-[100vh] w-[100vw] flex-col bg-background"
               ref={dialogRef}
               style={{ margin: 0, padding: 0 }}
+              aria-label="Mobile navigation"
             >
               <div
                 className="flex-1 overflow-y-auto px-3"
@@ -543,13 +859,13 @@ function MobileMenu({ ariaLabel, topMenuContent }: { ariaLabel: string; topMenuC
                   size="icon"
                   onPress={() => setIsOpen(false)}
                   aria-label="Close menu"
-                  className="h-12 w-12 rounded-full border border-border/50 bg-background/80 shadow-lg backdrop-blur-sm hover:bg-background/90"
+                  className="h-12 w-12 rounded-full border border-border bg-background/80 shadow-lg backdrop-blur-sm hover:bg-background/90"
                 >
                   <X className="h-7 w-7" />
                 </Button>
               </div>
-            </div>
-          </div>
+            </nav>
+          </dialog>
         </overlayContext.Provider>
       )}
     </>
diff --git a/application/shared-webapp/ui/components/Table.tsx b/application/shared-webapp/ui/components/Table.tsx
index 45c33f08b..16c8d9488 100644
--- a/application/shared-webapp/ui/components/Table.tsx
+++ b/application/shared-webapp/ui/components/Table.tsx
@@ -134,7 +134,7 @@ const rowStyles = tv({
       true: "text-muted-foreground/90"
     },
     isSelected: {
-      true: "bg-active-background hover:bg-selected-hover-background"
+      true: "rounded-md bg-active-background hover:bg-active-background"
     }
   }
 });
@@ -161,7 +161,7 @@ export function Row<T extends object>({ id, columns, children, ...rowProps }: Re
 
 const cellStyles = tv({
   extend: focusRing,
-  base: "-outline-offset-2 truncate border-b border-b-border p-2 group-first/row:border-y group-first/row:border-t-border group-last/row:border-b-0 group-selected/row:border-accent [:has(+[data-selected])_&]:border-accent"
+  base: "-outline-offset-2 truncate border-b border-b-border p-2 group-first/row:border-y group-first/row:border-t-border group-last/row:border-b-0"
 });
 
 type CellProps = {
diff --git a/application/shared-webapp/ui/components/Toast.tsx b/application/shared-webapp/ui/components/Toast.tsx
index 31927fa76..2b52f2827 100644
--- a/application/shared-webapp/ui/components/Toast.tsx
+++ b/application/shared-webapp/ui/components/Toast.tsx
@@ -253,7 +253,7 @@ function isReactNode(toast: ToastContents): toast is React.ReactNode {
 const toastActionStyles = tv({
   extend: focusRing,
   base: [
-    "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border/50 px-3 font-medium text-sm transition-colors"
+    "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border px-3 font-medium text-sm transition-colors"
   ],
   variants: {
     variant: {
diff --git a/application/shared-webapp/ui/components/Tooltip.tsx b/application/shared-webapp/ui/components/Tooltip.tsx
index 009835fe4..5adf9b660 100644
--- a/application/shared-webapp/ui/components/Tooltip.tsx
+++ b/application/shared-webapp/ui/components/Tooltip.tsx
@@ -6,12 +6,14 @@ import type React from "react";
 import {
   Tooltip as AriaTooltip,
   type TooltipProps as AriaTooltipProps,
+  TooltipTrigger as AriaTooltipTrigger,
   OverlayArrow,
   composeRenderProps
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 
-export { TooltipTrigger } from "react-aria-components";
+// Default delay for tooltips across the application (in milliseconds)
+export const DEFAULT_TOOLTIP_DELAY = 200;
 
 export interface TooltipProps extends Omit<AriaTooltipProps, "children"> {
   children: React.ReactNode;
@@ -51,3 +53,13 @@ export function Tooltip({ children, ...props }: Readonly<TooltipProps>) {
     </AriaTooltip>
   );
 }
+
+export interface TooltipTriggerProps extends React.ComponentProps<typeof AriaTooltipTrigger> {}
+
+/**
+ * Custom TooltipTrigger wrapper that provides a default delay.
+ * Individual components can override by passing their own delay prop.
+ */
+export function TooltipTrigger({ delay = DEFAULT_TOOLTIP_DELAY, ...props }: Readonly<TooltipTriggerProps>) {
+  return <AriaTooltipTrigger delay={delay} {...props} />;
+}
diff --git a/application/shared-webapp/ui/hooks/useSideMenuLayout.ts b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts
index b2dd3ea1e..9f9f4fc3e 100644
--- a/application/shared-webapp/ui/hooks/useSideMenuLayout.ts
+++ b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts
@@ -1,6 +1,12 @@
 import type React from "react";
 import { useEffect, useMemo, useState } from "react";
-import { MEDIA_QUERIES, SIDE_MENU_COLLAPSED_WIDTH, SIDE_MENU_EXPANDED_WIDTH } from "../utils/responsive";
+import {
+  MEDIA_QUERIES,
+  SIDE_MENU_COLLAPSED_WIDTH,
+  SIDE_MENU_DEFAULT_WIDTH,
+  SIDE_MENU_MAX_WIDTH,
+  SIDE_MENU_MIN_WIDTH
+} from "../utils/responsive";
 
 /**
  * Hook to provide proper layout styles for content when using a fixed side menu.
@@ -12,22 +18,16 @@ export function useSideMenuLayout(): {
   style: React.CSSProperties;
   isOverlayOpen: boolean;
   isMobileMenuOpen: boolean;
+  isCollapsed: boolean;
+  isLargeScreen: boolean;
 } {
   // Track screen sizes
-  const [isSmallScreen, setIsSmallScreen] = useState(() =>
-    typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.sm).matches : false
-  );
-  const [isLargeScreen, setIsLargeScreen] = useState(() =>
-    typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.xl).matches : false
-  );
+  const [isSmallScreen, setIsSmallScreen] = useState(() => window.matchMedia(MEDIA_QUERIES.sm).matches);
+  const [isLargeScreen, setIsLargeScreen] = useState(() => window.matchMedia(MEDIA_QUERIES.xl).matches);
 
   // Track menu state
   const [isCollapsed, setIsCollapsed] = useState(() => {
     // Synchronous check to prevent flicker
-    if (typeof window === "undefined") {
-      return true;
-    }
-
     const isSmallScreenSync = window.matchMedia(MEDIA_QUERIES.sm).matches;
     const isLargeScreenSync = window.matchMedia(MEDIA_QUERIES.xl).matches;
 
@@ -43,6 +43,18 @@ export function useSideMenuLayout(): {
 
   const [isOverlayExpanded, setIsOverlayExpanded] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [customMenuWidth, setCustomMenuWidth] = useState(() => {
+    try {
+      const stored = localStorage.getItem("side-menu-size");
+      if (stored) {
+        const width = Number.parseInt(stored, 10);
+        if (!Number.isNaN(width) && width >= SIDE_MENU_MIN_WIDTH && width <= SIDE_MENU_MAX_WIDTH) {
+          return width;
+        }
+      }
+    } catch {}
+    return SIDE_MENU_DEFAULT_WIDTH;
+  });
 
   // Listen for screen size changes
   useEffect(() => {
@@ -50,7 +62,14 @@ export function useSideMenuLayout(): {
     const xlQuery = window.matchMedia(MEDIA_QUERIES.xl);
 
     const handleSmChange = (e: MediaQueryListEvent) => setIsSmallScreen(e.matches);
-    const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches);
+    const handleXlChange = (e: MediaQueryListEvent) => {
+      setIsLargeScreen(e.matches);
+      // When transitioning to XL screen, sync collapsed state from localStorage
+      if (e.matches) {
+        const stored = localStorage.getItem("side-menu-collapsed");
+        setIsCollapsed(stored === "true");
+      }
+    };
 
     smQuery.addEventListener("change", handleSmChange);
     xlQuery.addEventListener("change", handleXlChange);
@@ -75,17 +94,30 @@ export function useSideMenuLayout(): {
       setIsMobileMenuOpen(event.detail.isOpen);
     };
 
+    const handleMenuResize = (event: CustomEvent) => {
+      setCustomMenuWidth(event.detail.width);
+    };
+
     window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener);
     window.addEventListener("side-menu-overlay-toggle", handleOverlayToggle as EventListener);
     window.addEventListener("mobile-menu-toggle", handleMobileMenuToggle as EventListener);
+    window.addEventListener("side-menu-resize", handleMenuResize as EventListener);
 
     return () => {
       window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener);
       window.removeEventListener("side-menu-overlay-toggle", handleOverlayToggle as EventListener);
       window.removeEventListener("mobile-menu-toggle", handleMobileMenuToggle as EventListener);
+      window.removeEventListener("side-menu-resize", handleMenuResize as EventListener);
     };
   }, []);
 
+  // Reset overlay expanded state when leaving overlay mode
+  useEffect(() => {
+    if (isLargeScreen) {
+      setIsOverlayExpanded(false);
+    }
+  }, [isLargeScreen]);
+
   // Calculate layout styles
   const className = "flex flex-col flex-1 min-h-0";
 
@@ -98,18 +130,25 @@ export function useSideMenuLayout(): {
     // Medium screens (overlay mode): always use collapsed width
     if (isSmallScreen && !isLargeScreen) {
       return {
-        marginLeft: SIDE_MENU_COLLAPSED_WIDTH
+        marginLeft: `${SIDE_MENU_COLLAPSED_WIDTH}px`
       };
     }
 
     // Large screens: adjust based on menu state
     return {
-      marginLeft: isCollapsed ? SIDE_MENU_COLLAPSED_WIDTH : SIDE_MENU_EXPANDED_WIDTH
+      marginLeft: isCollapsed ? `${SIDE_MENU_COLLAPSED_WIDTH}px` : `${customMenuWidth}px`
     };
-  }, [isSmallScreen, isLargeScreen, isCollapsed]);
+  }, [isSmallScreen, isLargeScreen, isCollapsed, customMenuWidth]);
 
   // Determine if in overlay mode
   const isOverlayMode = isSmallScreen && !isLargeScreen;
 
-  return { className, style, isOverlayOpen: isOverlayMode && isOverlayExpanded, isMobileMenuOpen };
+  return {
+    className,
+    style,
+    isOverlayOpen: isOverlayMode && isOverlayExpanded,
+    isMobileMenuOpen,
+    isCollapsed: isLargeScreen ? isCollapsed : true, // For XL screens, return actual state; for others, consider "collapsed" for space calculation
+    isLargeScreen
+  };
 }
diff --git a/application/shared-webapp/ui/theme/ThemeModeSelector.tsx b/application/shared-webapp/ui/theme/ThemeModeSelector.tsx
index dc39eda1c..2d9fd609d 100644
--- a/application/shared-webapp/ui/theme/ThemeModeSelector.tsx
+++ b/application/shared-webapp/ui/theme/ThemeModeSelector.tsx
@@ -13,7 +13,7 @@ export function ThemeModeSelector({ "aria-label": ariaLabel }: { "aria-label": s
   const tooltipText = getTooltipText(themeMode, resolvedThemeMode);
 
   return (
-    <TooltipTrigger delay={200}>
+    <TooltipTrigger>
       <Button variant="icon" onPress={() => setThemeMode(toggleThemeMode)} aria-label={ariaLabel}>
         <ThemeModeIcon themeMode={themeMode} resolvedThemeMode={resolvedThemeMode} />
       </Button>
diff --git a/application/shared-webapp/ui/utils/responsive.ts b/application/shared-webapp/ui/utils/responsive.ts
index 732bd1e46..06f597ac9 100644
--- a/application/shared-webapp/ui/utils/responsive.ts
+++ b/application/shared-webapp/ui/utils/responsive.ts
@@ -19,6 +19,8 @@ export const MEDIA_QUERIES = {
   "2xl": "(min-width: 1536px)"
 } as const;
 
-// Side menu width constants (including 8px right margin)
-export const SIDE_MENU_COLLAPSED_WIDTH = "80px"; // 72px + 8px margin
-export const SIDE_MENU_EXPANDED_WIDTH = "296px"; // 288px + 8px margin
+// Side menu width constants
+export const SIDE_MENU_COLLAPSED_WIDTH = 72;
+export const SIDE_MENU_MIN_WIDTH = 150;
+export const SIDE_MENU_MAX_WIDTH = 300;
+export const SIDE_MENU_DEFAULT_WIDTH = 288;
diff --git a/application/shared-webapp/utils/date/formatDate.ts b/application/shared-webapp/utils/date/formatDate.ts
index b03c2d4a6..2466ce2ae 100644
--- a/application/shared-webapp/utils/date/formatDate.ts
+++ b/application/shared-webapp/utils/date/formatDate.ts
@@ -1,12 +1,28 @@
 /**
  * Format a date string to a consistent format across the application.
  * Format: "day month, year" (e.g., "15 Jan, 2024")
+ * Or with time: "day month, year at time" (e.g., "15 Jan, 2024 at 14:30")
  */
-export function formatDate(input: string | undefined | null): string {
+export function formatDate(input: string | undefined | null, includeTime = false): string {
   if (!input) {
     return "";
   }
   const date = new Date(input);
+
+  if (includeTime) {
+    const dateStr = date.toLocaleDateString(undefined, {
+      day: "numeric",
+      month: "short",
+      year: "numeric"
+    });
+    const timeStr = date.toLocaleTimeString(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false
+    });
+    return `${dateStr} at ${timeStr}`;
+  }
+
   return date.toLocaleDateString(undefined, {
     day: "numeric",
     month: "short",