From ac88125bf54c01b6d451a696e98e5f66b230013e Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Sun, 26 Oct 2025 11:11:51 +0000
Subject: [PATCH] team fuctionality

---
 .../common/model/ApplicationProperties.java   |   1 +
 .../controller/api/misc/ConfigController.java |   3 +
 .../src/main/resources/settings.yml.template  |   1 +
 .../api/ProprietaryUIDataController.java      |   2 +-
 .../configuration/SecurityConfiguration.java  |   7 +-
 .../controller/api/DatabaseController.java    | 126 +++-
 .../controller/api/TeamController.java        |  71 +-
 .../controller/api/UserController.java        | 333 +++++++--
 .../security/filter/FirstLoginFilter.java     |  77 --
 .../proprietary/security/model/User.java      |   2 +-
 .../security/service/EmailService.java        |  85 +++
 .../public/locales/en-GB/translation.json     | 189 +++++
 frontend/src/auth/springAuthClient.ts         |   1 +
 .../shared/DismissAllErrorsButton.tsx         |   3 +-
 .../src/components/shared/FirstLoginModal.tsx | 159 +++++
 .../shared/config/configNavSections.tsx       |  19 +
 .../AdminConnectionsSection.tsx               |   1 +
 .../configSections/AdminMailSection.tsx       |  22 +-
 .../config/configSections/PeopleSection.tsx   | 673 ++++++++++++++++++
 .../configSections/TeamDetailsSection.tsx     | 477 +++++++++++++
 .../config/configSections/TeamsSection.tsx    | 456 ++++++++++++
 .../src/components/toast/ToastRenderer.css    |   2 +-
 frontend/src/hooks/useAppConfig.ts            |   1 +
 frontend/src/routes/Landing.tsx               |  51 +-
 frontend/src/services/accountService.ts       |  34 +
 frontend/src/services/httpErrorHandler.ts     |   4 +
 frontend/src/services/teamService.ts          | 107 +++
 .../src/services/userManagementService.ts     | 166 +++++
 frontend/src/styles/zIndex.ts                 |   3 +
 29 files changed, 2856 insertions(+), 220 deletions(-)
 delete mode 100644 app/proprietary/src/main/java/stirling/software/proprietary/security/filter/FirstLoginFilter.java
 create mode 100644 frontend/src/components/shared/FirstLoginModal.tsx
 create mode 100644 frontend/src/components/shared/config/configSections/PeopleSection.tsx
 create mode 100644 frontend/src/components/shared/config/configSections/TeamDetailsSection.tsx
 create mode 100644 frontend/src/components/shared/config/configSections/TeamsSection.tsx
 create mode 100644 frontend/src/services/accountService.ts
 create mode 100644 frontend/src/services/teamService.ts
 create mode 100644 frontend/src/services/userManagementService.ts

diff --git a/app/common/src/main/java/stirling/software/common/model/ApplicationProperties.java b/app/common/src/main/java/stirling/software/common/model/ApplicationProperties.java
index 0f968ba370..30c41df28e 100644
--- a/app/common/src/main/java/stirling/software/common/model/ApplicationProperties.java
+++ b/app/common/src/main/java/stirling/software/common/model/ApplicationProperties.java
@@ -534,6 +534,7 @@ public class ApplicationProperties {
     @Data
     public static class Mail {
         private boolean enabled;
+        private boolean enableInvites = false;
         private String host;
         private int port;
         private String username;
diff --git a/app/core/src/main/java/stirling/software/SPDF/controller/api/misc/ConfigController.java b/app/core/src/main/java/stirling/software/SPDF/controller/api/misc/ConfigController.java
index ef490810f3..27c72eaf0b 100644
--- a/app/core/src/main/java/stirling/software/SPDF/controller/api/misc/ConfigController.java
+++ b/app/core/src/main/java/stirling/software/SPDF/controller/api/misc/ConfigController.java
@@ -62,6 +62,9 @@ public class ConfigController {
             // Security settings
             configData.put("enableLogin", applicationProperties.getSecurity().getEnableLogin());
 
+            // Mail settings
+            configData.put("enableEmailInvites", applicationProperties.getMail().isEnableInvites());
+
             // Check if user is admin using UserServiceInterface
             boolean isAdmin = false;
             if (userService != null) {
diff --git a/app/core/src/main/resources/settings.yml.template b/app/core/src/main/resources/settings.yml.template
index d0cdd3d8d8..602116e4fc 100644
--- a/app/core/src/main/resources/settings.yml.template
+++ b/app/core/src/main/resources/settings.yml.template
@@ -99,6 +99,7 @@ premium:
 
 mail:
   enabled: false # set to 'true' to enable sending emails
+  enableInvites: false # set to 'true' to enable email invites for user management (requires mail.enabled and security.enableLogin)
   host: smtp.example.com # SMTP server hostname
   port: 587 # SMTP server port
   username: '' # SMTP server username
diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/controller/api/ProprietaryUIDataController.java b/app/proprietary/src/main/java/stirling/software/proprietary/controller/api/ProprietaryUIDataController.java
index 5f321a89e3..5735027f6f 100644
--- a/app/proprietary/src/main/java/stirling/software/proprietary/controller/api/ProprietaryUIDataController.java
+++ b/app/proprietary/src/main/java/stirling/software/proprietary/controller/api/ProprietaryUIDataController.java
@@ -53,7 +53,6 @@ import stirling.software.proprietary.security.session.SessionPersistentRegistry;
 
 @Slf4j
 @ProprietaryUiDataApi
-@EnterpriseEndpoint
 public class ProprietaryUIDataController {
 
     private final ApplicationProperties applicationProperties;
@@ -89,6 +88,7 @@ public class ProprietaryUIDataController {
 
     @GetMapping("/audit-dashboard")
     @PreAuthorize("hasRole('ADMIN')")
+    @EnterpriseEndpoint
     @Operation(summary = "Get audit dashboard data")
     public ResponseEntity<AuditDashboardData> getAuditDashboardData() {
         AuditDashboardData data = new AuditDashboardData();
diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/security/configuration/SecurityConfiguration.java b/app/proprietary/src/main/java/stirling/software/proprietary/security/configuration/SecurityConfiguration.java
index b7e51fe2cd..92def884fd 100644
--- a/app/proprietary/src/main/java/stirling/software/proprietary/security/configuration/SecurityConfiguration.java
+++ b/app/proprietary/src/main/java/stirling/software/proprietary/security/configuration/SecurityConfiguration.java
@@ -39,7 +39,6 @@ import stirling.software.proprietary.security.CustomLogoutSuccessHandler;
 import stirling.software.proprietary.security.JwtAuthenticationEntryPoint;
 import stirling.software.proprietary.security.database.repository.JPATokenRepositoryImpl;
 import stirling.software.proprietary.security.database.repository.PersistentLoginRepository;
-import stirling.software.proprietary.security.filter.FirstLoginFilter;
 import stirling.software.proprietary.security.filter.IPRateLimitingFilter;
 import stirling.software.proprietary.security.filter.JwtAuthenticationFilter;
 import stirling.software.proprietary.security.filter.UserAuthenticationFilter;
@@ -74,7 +73,6 @@ public class SecurityConfiguration {
     private final JwtServiceInterface jwtService;
     private final JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint;
     private final LoginAttemptService loginAttemptService;
-    private final FirstLoginFilter firstLoginFilter;
     private final SessionPersistentRegistry sessionRegistry;
     private final PersistentLoginRepository persistentLoginRepository;
     private final GrantedAuthoritiesMapper oAuth2userAuthoritiesMapper;
@@ -93,7 +91,6 @@ public class SecurityConfiguration {
             JwtServiceInterface jwtService,
             JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint,
             LoginAttemptService loginAttemptService,
-            FirstLoginFilter firstLoginFilter,
             SessionPersistentRegistry sessionRegistry,
             @Autowired(required = false) GrantedAuthoritiesMapper oAuth2userAuthoritiesMapper,
             @Autowired(required = false)
@@ -110,7 +107,6 @@ public class SecurityConfiguration {
         this.jwtService = jwtService;
         this.jwtAuthenticationEntryPoint = jwtAuthenticationEntryPoint;
         this.loginAttemptService = loginAttemptService;
-        this.firstLoginFilter = firstLoginFilter;
         this.sessionRegistry = sessionRegistry;
         this.persistentLoginRepository = persistentLoginRepository;
         this.oAuth2userAuthoritiesMapper = oAuth2userAuthoritiesMapper;
@@ -135,8 +131,7 @@ public class SecurityConfiguration {
             http.addFilterBefore(
                             userAuthenticationFilter, UsernamePasswordAuthenticationFilter.class)
                     .addFilterBefore(
-                            rateLimitingFilter(), UsernamePasswordAuthenticationFilter.class)
-                    .addFilterAfter(firstLoginFilter, IPRateLimitingFilter.class);
+                            rateLimitingFilter(), UsernamePasswordAuthenticationFilter.class);
 
             if (v2Enabled) {
                 http.addFilterBefore(jwtAuthenticationFilter(), UserAuthenticationFilter.class);
diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/DatabaseController.java b/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/DatabaseController.java
index 9a3bcf839a..9fe3529aee 100644
--- a/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/DatabaseController.java
+++ b/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/DatabaseController.java
@@ -2,21 +2,19 @@ package stirling.software.proprietary.security.controller.api;
 
 import java.io.IOException;
 import java.io.InputStream;
-import java.net.URI;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.StandardCopyOption;
 
-import org.eclipse.jetty.http.HttpStatus;
 import org.springframework.context.annotation.Conditional;
 import org.springframework.core.io.InputStreamResource;
 import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
-import org.springframework.web.servlet.mvc.support.RedirectAttributes;
 
 import io.swagger.v3.oas.annotations.Hidden;
 import io.swagger.v3.oas.annotations.Operation;
@@ -42,15 +40,19 @@ public class DatabaseController {
             summary = "Import a database backup file",
             description = "Uploads and imports a database backup SQL file.")
     @PostMapping(consumes = "multipart/form-data", value = "import-database")
-    public String importDatabase(
+    public ResponseEntity<?> importDatabase(
             @Parameter(description = "SQL file to import", required = true)
                     @RequestParam("fileInput")
-                    MultipartFile file,
-            RedirectAttributes redirectAttributes)
+                    MultipartFile file)
             throws IOException {
         if (file == null || file.isEmpty()) {
-            redirectAttributes.addAttribute("error", "fileNullOrEmpty");
-            return "redirect:/database";
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(
+                            java.util.Map.of(
+                                    "error",
+                                    "fileNullOrEmpty",
+                                    "message",
+                                    "File is null or empty"));
         }
         log.info("Received file: {}", file.getOriginalFilename());
         Path tempTemplatePath = Files.createTempFile("backup_", ".sql");
@@ -58,15 +60,31 @@ public class DatabaseController {
             Files.copy(in, tempTemplatePath, StandardCopyOption.REPLACE_EXISTING);
             boolean importSuccess = databaseService.importDatabaseFromUI(tempTemplatePath);
             if (importSuccess) {
-                redirectAttributes.addAttribute("infoMessage", "importIntoDatabaseSuccessed");
+                return ResponseEntity.ok(
+                        java.util.Map.of(
+                                "message",
+                                "importIntoDatabaseSuccessed",
+                                "description",
+                                "Database imported successfully"));
             } else {
-                redirectAttributes.addAttribute("error", "failedImportFile");
+                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                        .body(
+                                java.util.Map.of(
+                                        "error",
+                                        "failedImportFile",
+                                        "message",
+                                        "Failed to import database file"));
             }
         } catch (Exception e) {
             log.error("Error importing database: {}", e.getMessage());
-            redirectAttributes.addAttribute("error", "failedImportFile");
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                    .body(
+                            java.util.Map.of(
+                                    "error",
+                                    "failedImportFile",
+                                    "message",
+                                    "Failed to import database: " + e.getMessage()));
         }
-        return "redirect:/database";
     }
 
     @Hidden
@@ -74,11 +92,17 @@ public class DatabaseController {
             summary = "Import database backup by filename",
             description = "Imports a database backup file from the server using its file name.")
     @GetMapping("/import-database-file/{fileName}")
-    public String importDatabaseFromBackupUI(
+    public ResponseEntity<?> importDatabaseFromBackupUI(
             @Parameter(description = "Name of the file to import", required = true) @PathVariable
                     String fileName) {
         if (fileName == null || fileName.isEmpty()) {
-            return "redirect:/database?error=fileNullOrEmpty";
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(
+                            java.util.Map.of(
+                                    "error",
+                                    "fileNullOrEmpty",
+                                    "message",
+                                    "File name is null or empty"));
         }
         // Check if the file exists in the backup list
         boolean fileExists =
@@ -86,14 +110,31 @@ public class DatabaseController {
                         .anyMatch(backup -> backup.getFileName().equals(fileName));
         if (!fileExists) {
             log.error("File {} not found in backup list", fileName);
-            return "redirect:/database?error=fileNotFound";
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(
+                            java.util.Map.of(
+                                    "error",
+                                    "fileNotFound",
+                                    "message",
+                                    "File not found in backup list"));
         }
         log.info("Received file: {}", fileName);
         if (databaseService.importDatabaseFromUI(fileName)) {
             log.info("File {} imported to database", fileName);
-            return "redirect:/database?infoMessage=importIntoDatabaseSuccessed";
+            return ResponseEntity.ok(
+                    java.util.Map.of(
+                            "message",
+                            "importIntoDatabaseSuccessed",
+                            "description",
+                            "Database backup imported successfully"));
         }
-        return "redirect:/database?error=failedImportFile";
+        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                .body(
+                        java.util.Map.of(
+                                "error",
+                                "failedImportFile",
+                                "message",
+                                "Failed to import database file"));
     }
 
     @Hidden
@@ -101,24 +142,42 @@ public class DatabaseController {
             summary = "Delete a database backup file",
             description = "Deletes a specified database backup file from the server.")
     @GetMapping("/delete/{fileName}")
-    public String deleteFile(
+    public ResponseEntity<?> deleteFile(
             @Parameter(description = "Name of the file to delete", required = true) @PathVariable
                     String fileName) {
         if (fileName == null || fileName.isEmpty()) {
-            throw new IllegalArgumentException("File must not be null or empty");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(
+                            java.util.Map.of(
+                                    "error",
+                                    "invalidFileName",
+                                    "message",
+                                    "File must not be null or empty"));
         }
         try {
             if (databaseService.deleteBackupFile(fileName)) {
                 log.info("Deleted file: {}", fileName);
+                return ResponseEntity.ok(java.util.Map.of("message", "File deleted successfully"));
             } else {
                 log.error("Failed to delete file: {}", fileName);
-                return "redirect:/database?error=failedToDeleteFile";
+                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                        .body(
+                                java.util.Map.of(
+                                        "error",
+                                        "failedToDeleteFile",
+                                        "message",
+                                        "Failed to delete backup file"));
             }
         } catch (IOException e) {
             log.error("Error deleting file: {}", e.getMessage());
-            return "redirect:/database?error=" + e.getMessage();
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                    .body(
+                            java.util.Map.of(
+                                    "error",
+                                    "deleteError",
+                                    "message",
+                                    "Error deleting file: " + e.getMessage()));
         }
-        return "redirect:/database";
     }
 
     @Hidden
@@ -142,22 +201,29 @@ public class DatabaseController {
                     .body(resource);
         } catch (IOException e) {
             log.error("Error downloading file: {}", e.getMessage());
-            return ResponseEntity.status(HttpStatus.SEE_OTHER_303)
-                    .location(URI.create("/database?error=downloadFailed"))
-                    .build();
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                    .body(
+                            java.util.Map.of(
+                                    "error",
+                                    "downloadFailed",
+                                    "message",
+                                    "Failed to download file: " + e.getMessage()));
         }
     }
 
     @Operation(
             summary = "Create a database backup",
-            description =
-                    "This endpoint triggers the creation of a database backup and redirects to the"
-                            + " database management page.")
+            description = "This endpoint triggers the creation of a database backup.")
     @GetMapping("/createDatabaseBackup")
-    public String createDatabaseBackup() {
+    public ResponseEntity<?> createDatabaseBackup() {
         log.info("Starting database backup creation...");
         databaseService.exportDatabase();
         log.info("Database backup successfully created.");
-        return "redirect:/database?infoMessage=backupCreated";
+        return ResponseEntity.ok(
+                java.util.Map.of(
+                        "message",
+                        "backupCreated",
+                        "description",
+                        "Database backup created successfully"));
     }
 }
diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/TeamController.java b/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/TeamController.java
index 84066ec698..e4e9c1e87b 100644
--- a/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/TeamController.java
+++ b/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/TeamController.java
@@ -1,10 +1,12 @@
 package stirling.software.proprietary.security.controller.api;
 
+import java.util.Map;
 import java.util.Optional;
 
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.*;
-import org.springframework.web.servlet.view.RedirectView;
 
 import jakarta.transaction.Transactional;
 
@@ -30,98 +32,113 @@ public class TeamController {
 
     @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/create")
-    public RedirectView createTeam(@RequestParam("name") String name) {
+    public ResponseEntity<?> createTeam(@RequestParam("name") String name) {
         if (teamRepository.existsByNameIgnoreCase(name)) {
-            return new RedirectView("/teams?messageType=teamExists");
+            return ResponseEntity.status(HttpStatus.CONFLICT)
+                    .body(Map.of("error", "Team name already exists."));
         }
         Team team = new Team();
         team.setName(name);
         teamRepository.save(team);
-        return new RedirectView("/teams?messageType=teamCreated");
+        return ResponseEntity.ok(Map.of("message", "Team created successfully"));
     }
 
     @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/rename")
-    public RedirectView renameTeam(
+    public ResponseEntity<?> renameTeam(
             @RequestParam("teamId") Long teamId, @RequestParam("newName") String newName) {
         Optional<Team> existing = teamRepository.findById(teamId);
         if (existing.isEmpty()) {
-            return new RedirectView("/teams?messageType=teamNotFound");
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "Team not found."));
         }
         if (teamRepository.existsByNameIgnoreCase(newName)) {
-            return new RedirectView("/teams?messageType=teamNameExists");
+            return ResponseEntity.status(HttpStatus.CONFLICT)
+                    .body(Map.of("error", "Team name already exists."));
         }
         Team team = existing.get();
 
         // Prevent renaming the Internal team
         if (team.getName().equals(TeamService.INTERNAL_TEAM_NAME)) {
-            return new RedirectView("/teams?messageType=internalTeamNotAccessible");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Cannot rename Internal team."));
         }
 
         team.setName(newName);
         teamRepository.save(team);
-        return new RedirectView("/teams?messageType=teamRenamed");
+        return ResponseEntity.ok(Map.of("message", "Team renamed successfully"));
     }
 
     @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/delete")
     @Transactional
-    public RedirectView deleteTeam(@RequestParam("teamId") Long teamId) {
+    public ResponseEntity<?> deleteTeam(@RequestParam("teamId") Long teamId) {
         Optional<Team> teamOpt = teamRepository.findById(teamId);
         if (teamOpt.isEmpty()) {
-            return new RedirectView("/teams?messageType=teamNotFound");
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "Team not found."));
         }
 
         Team team = teamOpt.get();
 
         // Prevent deleting the Internal team
         if (team.getName().equals(TeamService.INTERNAL_TEAM_NAME)) {
-            return new RedirectView("/teams?messageType=internalTeamNotAccessible");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Cannot delete Internal team."));
         }
 
         long memberCount = userRepository.countByTeam(team);
         if (memberCount > 0) {
-            return new RedirectView("/teams?messageType=teamHasUsers");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(
+                            Map.of(
+                                    "error",
+                                    "Team must be empty before deletion. Please remove all members first."));
         }
 
         teamRepository.delete(team);
-        return new RedirectView("/teams?messageType=teamDeleted");
+        return ResponseEntity.ok(Map.of("message", "Team deleted successfully"));
     }
 
     @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/addUser")
     @Transactional
-    public RedirectView addUserToTeam(
+    public ResponseEntity<?> addUserToTeam(
             @RequestParam("teamId") Long teamId, @RequestParam("userId") Long userId) {
 
         // Find the team
-        Team team =
-                teamRepository
-                        .findById(teamId)
-                        .orElseThrow(() -> new RuntimeException("Team not found"));
+        Optional<Team> teamOpt = teamRepository.findById(teamId);
+        if (teamOpt.isEmpty()) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "Team not found."));
+        }
+        Team team = teamOpt.get();
 
         // Prevent adding users to the Internal team
         if (team.getName().equals(TeamService.INTERNAL_TEAM_NAME)) {
-            return new RedirectView("/teams?error=internalTeamNotAccessible");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Cannot add users to Internal team."));
         }
 
         // Find the user
-        User user =
-                userRepository
-                        .findById(userId)
-                        .orElseThrow(() -> new RuntimeException("User not found"));
+        Optional<User> userOpt = userRepository.findById(userId);
+        if (userOpt.isEmpty()) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "User not found."));
+        }
+        User user = userOpt.get();
 
         // Check if user is in the Internal team - prevent moving them
         if (user.getTeam() != null
                 && user.getTeam().getName().equals(TeamService.INTERNAL_TEAM_NAME)) {
-            return new RedirectView("/teams/" + teamId + "?error=cannotMoveInternalUsers");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Cannot move users from Internal team."));
         }
 
         // Assign user to team
         user.setTeam(team);
         userRepository.save(user);
 
-        // Redirect back to team details page
-        return new RedirectView("/teams/" + teamId + "?messageType=userAdded");
+        return ResponseEntity.ok(Map.of("message", "User added to team successfully"));
     }
 }
diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/UserController.java b/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/UserController.java
index 6d4b803c2a..42cb155c16 100644
--- a/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/UserController.java
+++ b/app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/UserController.java
@@ -17,8 +17,6 @@ import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.security.oauth2.core.user.OAuth2User;
 import org.springframework.security.web.authentication.logout.SecurityContextLogoutHandler;
 import org.springframework.web.bind.annotation.*;
-import org.springframework.web.servlet.mvc.support.RedirectAttributes;
-import org.springframework.web.servlet.view.RedirectView;
 
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
@@ -38,6 +36,7 @@ import stirling.software.proprietary.security.model.User;
 import stirling.software.proprietary.security.model.api.user.UsernameAndPass;
 import stirling.software.proprietary.security.repository.TeamRepository;
 import stirling.software.proprietary.security.saml2.CustomSaml2AuthenticatedPrincipal;
+import stirling.software.proprietary.security.service.EmailService;
 import stirling.software.proprietary.security.service.TeamService;
 import stirling.software.proprietary.security.service.UserService;
 import stirling.software.proprietary.security.session.SessionPersistentRegistry;
@@ -53,6 +52,7 @@ public class UserController {
     private final ApplicationProperties applicationProperties;
     private final TeamRepository teamRepository;
     private final UserRepository userRepository;
+    private final Optional<EmailService> emailService;
 
     @PreAuthorize("!hasAuthority('ROLE_DEMO_USER')")
     @PostMapping("/register")
@@ -137,100 +137,130 @@ public class UserController {
 
     @PreAuthorize("!hasAuthority('ROLE_DEMO_USER')")
     @PostMapping("/change-username")
-    public RedirectView changeUsername(
+    public ResponseEntity<?> changeUsername(
             Principal principal,
             @RequestParam(name = "currentPasswordChangeUsername") String currentPassword,
             @RequestParam(name = "newUsername") String newUsername,
             HttpServletRequest request,
-            HttpServletResponse response,
-            RedirectAttributes redirectAttributes)
+            HttpServletResponse response)
             throws IOException, SQLException, UnsupportedProviderException {
         if (!userService.isUsernameValid(newUsername)) {
-            return new RedirectView("/account?messageType=invalidUsername", true);
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "invalidUsername", "message", "Invalid username format"));
         }
         if (principal == null) {
-            return new RedirectView("/account?messageType=notAuthenticated", true);
+            return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
+                    .body(Map.of("error", "notAuthenticated", "message", "User not authenticated"));
         }
         // The username MUST be unique when renaming
         Optional<User> userOpt = userService.findByUsername(principal.getName());
         if (userOpt == null || userOpt.isEmpty()) {
-            return new RedirectView("/account?messageType=userNotFound", true);
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "userNotFound", "message", "User not found"));
         }
         User user = userOpt.get();
         if (user.getUsername().equals(newUsername)) {
-            return new RedirectView("/account?messageType=usernameExists", true);
+            return ResponseEntity.status(HttpStatus.CONFLICT)
+                    .body(Map.of("error", "usernameExists", "message", "Username already in use"));
         }
         if (!userService.isPasswordCorrect(user, currentPassword)) {
-            return new RedirectView("/account?messageType=incorrectPassword", true);
+            return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
+                    .body(Map.of("error", "incorrectPassword", "message", "Incorrect password"));
         }
         if (!user.getUsername().equals(newUsername) && userService.usernameExists(newUsername)) {
-            return new RedirectView("/account?messageType=usernameExists", true);
+            return ResponseEntity.status(HttpStatus.CONFLICT)
+                    .body(Map.of("error", "usernameExists", "message", "Username already exists"));
         }
         if (newUsername != null && newUsername.length() > 0) {
             try {
                 userService.changeUsername(user, newUsername);
             } catch (IllegalArgumentException e) {
-                return new RedirectView("/account?messageType=invalidUsername", true);
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(
+                                Map.of(
+                                        "error",
+                                        "invalidUsername",
+                                        "message",
+                                        "Invalid username format"));
             }
         }
         // Logout using Spring's utility
         new SecurityContextLogoutHandler().logout(request, response, null);
-        return new RedirectView(LOGIN_MESSAGETYPE_CREDSUPDATED, true);
+        return ResponseEntity.ok(
+                Map.of(
+                        "message",
+                        "credsUpdated",
+                        "description",
+                        "Username changed successfully. Please log in again."));
     }
 
     @PreAuthorize("!hasAuthority('ROLE_DEMO_USER')")
     @PostMapping("/change-password-on-login")
-    public RedirectView changePasswordOnLogin(
+    public ResponseEntity<?> changePasswordOnLogin(
             Principal principal,
             @RequestParam(name = "currentPassword") String currentPassword,
             @RequestParam(name = "newPassword") String newPassword,
             HttpServletRequest request,
-            HttpServletResponse response,
-            RedirectAttributes redirectAttributes)
+            HttpServletResponse response)
             throws SQLException, UnsupportedProviderException {
         if (principal == null) {
-            return new RedirectView("/change-creds?messageType=notAuthenticated", true);
+            return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
+                    .body(Map.of("error", "notAuthenticated", "message", "User not authenticated"));
         }
         Optional<User> userOpt = userService.findByUsernameIgnoreCase(principal.getName());
         if (userOpt.isEmpty()) {
-            return new RedirectView("/change-creds?messageType=userNotFound", true);
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "userNotFound", "message", "User not found"));
         }
         User user = userOpt.get();
         if (!userService.isPasswordCorrect(user, currentPassword)) {
-            return new RedirectView("/change-creds?messageType=incorrectPassword", true);
+            return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
+                    .body(Map.of("error", "incorrectPassword", "message", "Incorrect password"));
         }
         userService.changePassword(user, newPassword);
         userService.changeFirstUse(user, false);
         // Logout using Spring's utility
         new SecurityContextLogoutHandler().logout(request, response, null);
-        return new RedirectView(LOGIN_MESSAGETYPE_CREDSUPDATED, true);
+        return ResponseEntity.ok(
+                Map.of(
+                        "message",
+                        "credsUpdated",
+                        "description",
+                        "Password changed successfully. Please log in again."));
     }
 
     @PreAuthorize("!hasAuthority('ROLE_DEMO_USER')")
     @PostMapping("/change-password")
-    public RedirectView changePassword(
+    public ResponseEntity<?> changePassword(
             Principal principal,
             @RequestParam(name = "currentPassword") String currentPassword,
             @RequestParam(name = "newPassword") String newPassword,
             HttpServletRequest request,
-            HttpServletResponse response,
-            RedirectAttributes redirectAttributes)
+            HttpServletResponse response)
             throws SQLException, UnsupportedProviderException {
         if (principal == null) {
-            return new RedirectView("/account?messageType=notAuthenticated", true);
+            return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
+                    .body(Map.of("error", "notAuthenticated", "message", "User not authenticated"));
         }
         Optional<User> userOpt = userService.findByUsernameIgnoreCase(principal.getName());
         if (userOpt.isEmpty()) {
-            return new RedirectView("/account?messageType=userNotFound", true);
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "userNotFound", "message", "User not found"));
         }
         User user = userOpt.get();
         if (!userService.isPasswordCorrect(user, currentPassword)) {
-            return new RedirectView("/account?messageType=incorrectPassword", true);
+            return ResponseEntity.status(HttpStatus.UNAUTHORIZED)
+                    .body(Map.of("error", "incorrectPassword", "message", "Incorrect password"));
         }
         userService.changePassword(user, newPassword);
         // Logout using Spring's utility
         new SecurityContextLogoutHandler().logout(request, response, null);
-        return new RedirectView(LOGIN_MESSAGETYPE_CREDSUPDATED, true);
+        return ResponseEntity.ok(
+                Map.of(
+                        "message",
+                        "credsUpdated",
+                        "description",
+                        "Password changed successfully. Please log in again."));
     }
 
     @PreAuthorize("!hasAuthority('ROLE_DEMO_USER')")
@@ -248,23 +278,23 @@ public class UserController {
      *     </ul>
      *     Keys not listed above will be ignored.
      * @param principal The currently authenticated user.
-     * @return A redirect string to the account page after updating the settings.
+     * @return A ResponseEntity with success or error information.
      * @throws SQLException If a database error occurs.
      * @throws UnsupportedProviderException If the operation is not supported for the user's
      *     provider.
      */
-    public String updateUserSettings(@RequestBody Map<String, String> updates, Principal principal)
+    public ResponseEntity<?> updateUserSettings(
+            @RequestBody Map<String, String> updates, Principal principal)
             throws SQLException, UnsupportedProviderException {
         log.debug("Processed updates: {}", updates);
         // Assuming you have a method in userService to update the settings for a user
         userService.updateUserSettings(principal.getName(), updates);
-        // Redirect to a page of your choice after updating
-        return "redirect:/account";
+        return ResponseEntity.ok(Map.of("message", "Settings updated successfully"));
     }
 
     @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/admin/saveUser")
-    public RedirectView saveUser(
+    public ResponseEntity<?> saveUser(
             @RequestParam(name = "username", required = true) String username,
             @RequestParam(name = "password", required = false) String password,
             @RequestParam(name = "role") String role,
@@ -274,33 +304,42 @@ public class UserController {
                     boolean forceChange)
             throws IllegalArgumentException, SQLException, UnsupportedProviderException {
         if (!userService.isUsernameValid(username)) {
-            return new RedirectView("/adminSettings?messageType=invalidUsername", true);
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(
+                            Map.of(
+                                    "error",
+                                    "Invalid username format. Username must be 3-50 characters."));
         }
         if (applicationProperties.getPremium().isEnabled()
                 && applicationProperties.getPremium().getMaxUsers()
                         <= userService.getTotalUsersCount()) {
-            return new RedirectView("/adminSettings?messageType=maxUsersReached", true);
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Maximum number of users reached for your license."));
         }
         Optional<User> userOpt = userService.findByUsernameIgnoreCase(username);
         if (userOpt.isPresent()) {
             User user = userOpt.get();
             if (user.getUsername().equalsIgnoreCase(username)) {
-                return new RedirectView("/adminSettings?messageType=usernameExists", true);
+                return ResponseEntity.status(HttpStatus.CONFLICT)
+                        .body(Map.of("error", "Username already exists."));
             }
         }
         if (userService.usernameExistsIgnoreCase(username)) {
-            return new RedirectView("/adminSettings?messageType=usernameExists", true);
+            return ResponseEntity.status(HttpStatus.CONFLICT)
+                    .body(Map.of("error", "Username already exists."));
         }
         try {
             // Validate the role
             Role roleEnum = Role.fromString(role);
             if (roleEnum == Role.INTERNAL_API_USER) {
                 // If the role is INTERNAL_API_USER, reject the request
-                return new RedirectView("/adminSettings?messageType=invalidRole", true);
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(Map.of("error", "Cannot assign INTERNAL_API_USER role."));
             }
         } catch (IllegalArgumentException e) {
-            // If the role ID is not valid, redirect with an error message
-            return new RedirectView("/adminSettings?messageType=invalidRole", true);
+            // If the role ID is not valid, return error
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Invalid role specified."));
         }
 
         // Use teamId if provided, otherwise use default team
@@ -316,28 +355,173 @@ public class UserController {
             Team selectedTeam = teamRepository.findById(effectiveTeamId).orElse(null);
             if (selectedTeam != null
                     && TeamService.INTERNAL_TEAM_NAME.equals(selectedTeam.getName())) {
-                return new RedirectView(
-                        "/adminSettings?messageType=internalTeamNotAccessible", true);
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(Map.of("error", "Cannot assign users to Internal team."));
             }
         }
 
         if (authType.equalsIgnoreCase(AuthenticationType.SSO.toString())) {
             userService.saveUser(username, AuthenticationType.SSO, effectiveTeamId, role);
         } else {
-            if (password.isBlank()) {
-                return new RedirectView("/adminSettings?messageType=invalidPassword", true);
+            if (password == null || password.isBlank()) {
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(Map.of("error", "Password is required."));
+            }
+            if (password.length() < 6) {
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(Map.of("error", "Password must be at least 6 characters."));
             }
             userService.saveUser(username, password, effectiveTeamId, role, forceChange);
         }
-        return new RedirectView(
-                "/adminSettings", // Redirect to account page after adding the user
-                true);
+        return ResponseEntity.ok(Map.of("message", "User created successfully"));
+    }
+
+    @PreAuthorize("hasRole('ROLE_ADMIN')")
+    @PostMapping("/admin/inviteUsers")
+    public ResponseEntity<?> inviteUsers(
+            @RequestParam(name = "emails", required = true) String emails,
+            @RequestParam(name = "role", defaultValue = "ROLE_USER") String role,
+            @RequestParam(name = "teamId", required = false) Long teamId)
+            throws SQLException, UnsupportedProviderException {
+
+        // Check if email invites are enabled
+        if (!applicationProperties.getMail().isEnableInvites()) {
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Email invites are not enabled"));
+        }
+
+        // Check if email service is available
+        if (!emailService.isPresent()) {
+            return ResponseEntity.status(HttpStatus.SERVICE_UNAVAILABLE)
+                    .body(
+                            Map.of(
+                                    "error",
+                                    "Email service is not configured. Please configure SMTP settings."));
+        }
+
+        // Parse comma-separated email addresses
+        String[] emailArray = emails.split(",");
+        if (emailArray.length == 0) {
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "At least one email address is required"));
+        }
+
+        // Check license limits
+        if (applicationProperties.getPremium().isEnabled()) {
+            long currentUserCount = userService.getTotalUsersCount();
+            int maxUsers = applicationProperties.getPremium().getMaxUsers();
+            long availableSlots = maxUsers - currentUserCount;
+            if (availableSlots < emailArray.length) {
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(
+                                Map.of(
+                                        "error",
+                                        "Not enough user slots available. Available: "
+                                                + availableSlots
+                                                + ", Requested: "
+                                                + emailArray.length));
+            }
+        }
+
+        // Validate role
+        try {
+            Role roleEnum = Role.fromString(role);
+            if (roleEnum == Role.INTERNAL_API_USER) {
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(Map.of("error", "Cannot assign INTERNAL_API_USER role"));
+            }
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Invalid role specified"));
+        }
+
+        // Determine team
+        Long effectiveTeamId = teamId;
+        if (effectiveTeamId == null) {
+            Team defaultTeam =
+                    teamRepository.findByName(TeamService.DEFAULT_TEAM_NAME).orElse(null);
+            if (defaultTeam != null) {
+                effectiveTeamId = defaultTeam.getId();
+            }
+        } else {
+            Team selectedTeam = teamRepository.findById(effectiveTeamId).orElse(null);
+            if (selectedTeam != null
+                    && TeamService.INTERNAL_TEAM_NAME.equals(selectedTeam.getName())) {
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(Map.of("error", "Cannot assign users to Internal team"));
+            }
+        }
+
+        int successCount = 0;
+        int failureCount = 0;
+        StringBuilder errors = new StringBuilder();
+
+        // Process each email
+        for (String email : emailArray) {
+            email = email.trim();
+            if (email.isEmpty()) {
+                continue;
+            }
+
+            try {
+                // Validate email format (basic check)
+                if (!email.contains("@") || !email.contains(".")) {
+                    errors.append(email).append(": Invalid email format; ");
+                    failureCount++;
+                    continue;
+                }
+
+                // Check if user already exists
+                if (userService.usernameExistsIgnoreCase(email)) {
+                    errors.append(email).append(": User already exists; ");
+                    failureCount++;
+                    continue;
+                }
+
+                // Generate random password
+                String temporaryPassword = java.util.UUID.randomUUID().toString().substring(0, 12);
+
+                // Create user with forceChange=true
+                userService.saveUser(email, temporaryPassword, effectiveTeamId, role, true);
+
+                // Send invite email
+                try {
+                    emailService.get().sendInviteEmail(email, email, temporaryPassword);
+                    successCount++;
+                    log.info("Sent invite email to: {}", email);
+                } catch (Exception emailEx) {
+                    log.error("Failed to send invite email to {}: {}", email, emailEx.getMessage());
+                    errors.append(email).append(": User created but email failed to send; ");
+                }
+
+            } catch (Exception e) {
+                log.error("Failed to invite user {}: {}", email, e.getMessage());
+                errors.append(email).append(": ").append(e.getMessage()).append("; ");
+                failureCount++;
+            }
+        }
+
+        Map<String, Object> response = new HashMap<>();
+        response.put("successCount", successCount);
+        response.put("failureCount", failureCount);
+
+        if (failureCount > 0) {
+            response.put("errors", errors.toString());
+        }
+
+        if (successCount > 0) {
+            response.put("message", successCount + " user(s) invited successfully");
+            return ResponseEntity.ok(response);
+        } else {
+            response.put("error", "Failed to invite any users");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(response);
+        }
     }
 
     @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/admin/changeRole")
     @Transactional
-    public RedirectView changeRole(
+    public ResponseEntity<?> changeRole(
             @RequestParam(name = "username") String username,
             @RequestParam(name = "role") String role,
             @RequestParam(name = "teamId", required = false) Long teamId,
@@ -345,27 +529,32 @@ public class UserController {
             throws SQLException, UnsupportedProviderException {
         Optional<User> userOpt = userService.findByUsernameIgnoreCase(username);
         if (!userOpt.isPresent()) {
-            return new RedirectView("/adminSettings?messageType=userNotFound", true);
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "User not found."));
         }
         if (!userService.usernameExistsIgnoreCase(username)) {
-            return new RedirectView("/adminSettings?messageType=userNotFound", true);
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "User not found."));
         }
         // Get the currently authenticated username
         String currentUsername = authentication.getName();
         // Check if the provided username matches the current session's username
         if (currentUsername.equalsIgnoreCase(username)) {
-            return new RedirectView("/adminSettings?messageType=downgradeCurrentUser", true);
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Cannot change your own role."));
         }
         try {
             // Validate the role
             Role roleEnum = Role.fromString(role);
             if (roleEnum == Role.INTERNAL_API_USER) {
                 // If the role is INTERNAL_API_USER, reject the request
-                return new RedirectView("/adminSettings?messageType=invalidRole", true);
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                        .body(Map.of("error", "Cannot assign INTERNAL_API_USER role."));
             }
         } catch (IllegalArgumentException e) {
-            // If the role ID is not valid, redirect with an error message
-            return new RedirectView("/adminSettings?messageType=invalidRole", true);
+            // If the role ID is not valid, return error
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Invalid role specified."));
         }
         User user = userOpt.get();
 
@@ -375,15 +564,15 @@ public class UserController {
             if (team != null) {
                 // Prevent assigning to Internal team
                 if (TeamService.INTERNAL_TEAM_NAME.equals(team.getName())) {
-                    return new RedirectView(
-                            "/adminSettings?messageType=internalTeamNotAccessible", true);
+                    return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                            .body(Map.of("error", "Cannot assign users to Internal team."));
                 }
 
                 // Prevent moving users from Internal team
                 if (user.getTeam() != null
                         && TeamService.INTERNAL_TEAM_NAME.equals(user.getTeam().getName())) {
-                    return new RedirectView(
-                            "/adminSettings?messageType=cannotMoveInternalUsers", true);
+                    return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                            .body(Map.of("error", "Cannot move users from Internal team."));
                 }
 
                 user.setTeam(team);
@@ -392,30 +581,31 @@ public class UserController {
         }
 
         userService.changeRole(user, role);
-        return new RedirectView(
-                "/adminSettings", // Redirect to account page after adding the user
-                true);
+        return ResponseEntity.ok(Map.of("message", "User role updated successfully"));
     }
 
     @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/admin/changeUserEnabled/{username}")
-    public RedirectView changeUserEnabled(
+    public ResponseEntity<?> changeUserEnabled(
             @PathVariable("username") String username,
             @RequestParam("enabled") boolean enabled,
             Authentication authentication)
             throws SQLException, UnsupportedProviderException {
         Optional<User> userOpt = userService.findByUsernameIgnoreCase(username);
         if (userOpt.isEmpty()) {
-            return new RedirectView("/adminSettings?messageType=userNotFound", true);
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "User not found."));
         }
         if (!userService.usernameExistsIgnoreCase(username)) {
-            return new RedirectView("/adminSettings?messageType=userNotFound", true);
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "User not found."));
         }
         // Get the currently authenticated username
         String currentUsername = authentication.getName();
         // Check if the provided username matches the current session's username
         if (currentUsername.equalsIgnoreCase(username)) {
-            return new RedirectView("/adminSettings?messageType=disabledCurrentUser", true);
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Cannot disable your own account."));
         }
         User user = userOpt.get();
         userService.changeUserEnabled(user, enabled);
@@ -442,23 +632,24 @@ public class UserController {
                 }
             }
         }
-        return new RedirectView(
-                "/adminSettings", // Redirect to account page after adding the user
-                true);
+        return ResponseEntity.ok(
+                Map.of("message", "User " + (enabled ? "enabled" : "disabled") + " successfully"));
     }
 
     @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/admin/deleteUser/{username}")
-    public RedirectView deleteUser(
+    public ResponseEntity<?> deleteUser(
             @PathVariable("username") String username, Authentication authentication) {
         if (!userService.usernameExistsIgnoreCase(username)) {
-            return new RedirectView("/adminSettings?messageType=deleteUsernameExists", true);
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Map.of("error", "User not found."));
         }
         // Get the currently authenticated username
         String currentUsername = authentication.getName();
         // Check if the provided username matches the current session's username
         if (currentUsername.equalsIgnoreCase(username)) {
-            return new RedirectView("/adminSettings?messageType=deleteCurrentUser", true);
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+                    .body(Map.of("error", "Cannot delete your own account."));
         }
         // Invalidate all sessions before deleting the user
         List<SessionInformation> sessionsInformations =
@@ -468,7 +659,7 @@ public class UserController {
             sessionRegistry.removeSessionInformation(sessionsInformation.getSessionId());
         }
         userService.deleteUser(username);
-        return new RedirectView("/adminSettings", true);
+        return ResponseEntity.ok(Map.of("message", "User deleted successfully"));
     }
 
     @PreAuthorize("!hasAuthority('ROLE_DEMO_USER')")
diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/security/filter/FirstLoginFilter.java b/app/proprietary/src/main/java/stirling/software/proprietary/security/filter/FirstLoginFilter.java
deleted file mode 100644
index 3bae721957..0000000000
--- a/app/proprietary/src/main/java/stirling/software/proprietary/security/filter/FirstLoginFilter.java
+++ /dev/null
@@ -1,77 +0,0 @@
-package stirling.software.proprietary.security.filter;
-
-import java.io.IOException;
-import java.text.SimpleDateFormat;
-import java.util.Date;
-import java.util.Optional;
-
-import org.springframework.context.annotation.Lazy;
-import org.springframework.security.core.Authentication;
-import org.springframework.security.core.context.SecurityContextHolder;
-import org.springframework.stereotype.Component;
-import org.springframework.web.filter.OncePerRequestFilter;
-
-import jakarta.servlet.FilterChain;
-import jakarta.servlet.ServletException;
-import jakarta.servlet.http.HttpServletRequest;
-import jakarta.servlet.http.HttpServletResponse;
-import jakarta.servlet.http.HttpSession;
-
-import lombok.extern.slf4j.Slf4j;
-
-import stirling.software.common.util.RequestUriUtils;
-import stirling.software.proprietary.security.model.User;
-import stirling.software.proprietary.security.service.UserService;
-
-@Slf4j
-@Component
-public class FirstLoginFilter extends OncePerRequestFilter {
-
-    @Lazy private final UserService userService;
-
-    public FirstLoginFilter(@Lazy UserService userService) {
-        this.userService = userService;
-    }
-
-    @Override
-    protected void doFilterInternal(
-            HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
-            throws ServletException, IOException {
-        String method = request.getMethod();
-        String requestURI = request.getRequestURI();
-        String contextPath = request.getContextPath();
-        // Check if the request is for static resources
-        boolean isStaticResource = RequestUriUtils.isStaticResource(contextPath, requestURI);
-        // If it's a static resource, just continue the filter chain and skip the logic below
-        if (isStaticResource) {
-            filterChain.doFilter(request, response);
-            return;
-        }
-        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
-        if (authentication != null && authentication.isAuthenticated()) {
-            Optional<User> user = userService.findByUsernameIgnoreCase(authentication.getName());
-            if ("GET".equalsIgnoreCase(method)
-                    && user.isPresent()
-                    && user.get().isFirstLogin()
-                    && !(contextPath + "/change-creds").equals(requestURI)) {
-                response.sendRedirect(contextPath + "/change-creds");
-                return;
-            }
-        }
-        if (log.isDebugEnabled()) {
-            HttpSession session = request.getSession(true);
-            SimpleDateFormat timeFormat = new SimpleDateFormat("HH:mm:ss");
-            String creationTime = timeFormat.format(new Date(session.getCreationTime()));
-            log.debug(
-                    "Request Info - New: {}, creationTimeSession {}, ID:  {}, IP: {}, User-Agent: {}, Referer: {}, Request URL: {}",
-                    session.isNew(),
-                    creationTime,
-                    session.getId(),
-                    request.getRemoteAddr(),
-                    request.getHeader("User-Agent"),
-                    request.getHeader("Referer"),
-                    request.getRequestURL().toString());
-        }
-        filterChain.doFilter(request, response);
-    }
-}
diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/security/model/User.java b/app/proprietary/src/main/java/stirling/software/proprietary/security/model/User.java
index 1c342bf5be..02bd08a5bd 100644
--- a/app/proprietary/src/main/java/stirling/software/proprietary/security/model/User.java
+++ b/app/proprietary/src/main/java/stirling/software/proprietary/security/model/User.java
@@ -73,7 +73,6 @@ public class User implements UserDetails, Serializable {
 
     @ManyToOne(fetch = FetchType.EAGER)
     @JoinColumn(name = "team_id")
-    @JsonIgnore
     private Team team;
 
     @ElementCollection
@@ -81,6 +80,7 @@ public class User implements UserDetails, Serializable {
     @Lob
     @Column(name = "setting_value", columnDefinition = "text")
     @CollectionTable(name = "user_settings", joinColumns = @JoinColumn(name = "user_id"))
+    @JsonIgnore
     private Map<String, String> settings = new HashMap<>(); // Key-value pairs of settings.
 
     @CreationTimestamp
diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/security/service/EmailService.java b/app/proprietary/src/main/java/stirling/software/proprietary/security/service/EmailService.java
index 08860a3407..d625d556fa 100644
--- a/app/proprietary/src/main/java/stirling/software/proprietary/security/service/EmailService.java
+++ b/app/proprietary/src/main/java/stirling/software/proprietary/security/service/EmailService.java
@@ -73,4 +73,89 @@ public class EmailService {
         // Sends the email via the configured mail sender
         mailSender.send(message);
     }
+
+    /**
+     * Sends a plain text/HTML email without attachments asynchronously.
+     *
+     * @param to The recipient email address
+     * @param subject The email subject
+     * @param body The email body (can contain HTML)
+     * @param isHtml Whether the body contains HTML content
+     * @throws MessagingException If there is an issue with creating or sending the email.
+     */
+    @Async
+    public void sendPlainEmail(String to, String subject, String body, boolean isHtml)
+            throws MessagingException {
+        // Validate recipient email address
+        if (to == null || to.trim().isEmpty()) {
+            throw new MessagingException("Invalid recipient email address");
+        }
+
+        ApplicationProperties.Mail mailProperties = applicationProperties.getMail();
+
+        // Creates a MimeMessage to represent the email
+        MimeMessage message = mailSender.createMimeMessage();
+
+        // Helper class to set up the message content
+        MimeMessageHelper helper = new MimeMessageHelper(message, false);
+
+        // Sets the recipient, subject, body, and sender email
+        helper.addTo(to);
+        helper.setSubject(subject);
+        helper.setText(body, isHtml);
+        helper.setFrom(mailProperties.getFrom());
+
+        // Sends the email via the configured mail sender
+        mailSender.send(message);
+    }
+
+    /**
+     * Sends an invitation email to a new user with their credentials.
+     *
+     * @param to The recipient email address
+     * @param username The username for the new account
+     * @param temporaryPassword The temporary password
+     * @throws MessagingException If there is an issue with creating or sending the email.
+     */
+    @Async
+    public void sendInviteEmail(String to, String username, String temporaryPassword)
+            throws MessagingException {
+        String subject = "Welcome to Stirling PDF";
+
+        String body =
+                String.format(
+                        "<html><body style=\"margin: 0; padding: 0;\">"
+                                + "<div style=\"font-family: Arial, sans-serif; background-color: #f8f9fa; padding: 20px;\">"
+                                + "  <div style=\"max-width: 600px; margin: auto; background-color: #ffffff; border-radius: 8px; overflow: hidden; border: 1px solid #e0e0e0;\">"
+                                + "    <!-- Logo -->"
+                                + "    <div style=\"text-align: center; padding: 20px; background-color: #222;\">"
+                                + "      <img src=\"https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/main/docs/stirling-transparent.svg\" alt=\"Stirling PDF\" style=\"max-height: 60px;\">"
+                                + "    </div>"
+                                + "    <!-- Content -->"
+                                + "    <div style=\"padding: 30px; color: #333;\">"
+                                + "      <h2 style=\"color: #222; margin-top: 0;\">Welcome to Stirling PDF!</h2>"
+                                + "      <p>Hi there,</p>"
+                                + "      <p>You have been invited to join the workspace. Below are your login credentials:</p>"
+                                + "      <!-- Credentials Box -->"
+                                + "      <div style=\"background-color: #f8f9fa; border-left: 4px solid #007bff; padding: 15px; margin: 20px 0; border-radius: 4px;\">"
+                                + "        <p style=\"margin: 0 0 10px 0;\"><strong>Username:</strong> %s</p>"
+                                + "        <p style=\"margin: 0;\"><strong>Temporary Password:</strong> %s</p>"
+                                + "      </div>"
+                                + "      <div style=\"background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 20px 0; border-radius: 4px;\">"
+                                + "        <p style=\"margin: 0; color: #856404;\"><strong>⚠️ Important:</strong> You will be required to change your password upon first login for security reasons.</p>"
+                                + "      </div>"
+                                + "      <p>Please keep these credentials secure and do not share them with anyone.</p>"
+                                + "      <p style=\"margin-bottom: 0;\">— The Stirling PDF Team</p>"
+                                + "    </div>"
+                                + "    <!-- Footer -->"
+                                + "    <div style=\"text-align: center; padding: 15px; font-size: 12px; color: #777; background-color: #f0f0f0;\">"
+                                + "      &copy; 2025 Stirling PDF. All rights reserved."
+                                + "    </div>"
+                                + "  </div>"
+                                + "</div>"
+                                + "</body></html>",
+                        username, temporaryPassword);
+
+        sendPlainEmail(to, subject, body, true);
+    }
 }
diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index e57374717b..480d9f0dfb 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -4391,5 +4391,194 @@
     "finish": "Finish",
     "startTour": "Start Tour",
     "startTourDescription": "Take a guided tour of Stirling PDF's key features"
+  },
+  "workspace": {
+    "title": "Workspace",
+    "people": {
+      "title": "People",
+      "description": "Manage workspace members and their permissions",
+      "searchMembers": "Search members...",
+      "addMembers": "Add Members",
+      "inviteMembers": "Invite Members",
+      "inviteMembers.subtitle": "Type or paste in emails below, separated by commas. Your workspace will be billed by members.",
+      "user": "User",
+      "role": "Role",
+      "team": "Team",
+      "status": "Status",
+      "actions": "Actions",
+      "noMembersFound": "No members found",
+      "active": "Active",
+      "disabled": "Disabled",
+      "activeSession": "Active session",
+      "member": "Member",
+      "admin": "Admin",
+      "roleDescriptions": {
+        "admin": "Can manage settings and invite members, with full administrative access.",
+        "member": "Can view and edit shared files, but cannot manage workspace settings or members."
+      },
+      "editRole": "Edit Role",
+      "enable": "Enable",
+      "disable": "Disable",
+      "deleteUser": "Delete User",
+      "deleteUserSuccess": "User deleted successfully",
+      "deleteUserError": "Failed to delete user",
+      "confirmDelete": "Are you sure you want to delete this user? This action cannot be undone.",
+      "addMember": {
+        "title": "Add Member",
+        "username": "Username (Email)",
+        "usernamePlaceholder": "user@example.com",
+        "password": "Password",
+        "passwordPlaceholder": "Enter password",
+        "role": "Role",
+        "team": "Team (Optional)",
+        "teamPlaceholder": "Select a team",
+        "forcePasswordChange": "Force password change on first login",
+        "cancel": "Cancel",
+        "submit": "Add Member",
+        "usernameRequired": "Username and password are required",
+        "passwordTooShort": "Password must be at least 6 characters",
+        "success": "User created successfully",
+        "error": "Failed to create user"
+      },
+      "editMember": {
+        "title": "Edit Member",
+        "editing": "Editing:",
+        "role": "Role",
+        "team": "Team (Optional)",
+        "teamPlaceholder": "Select a team",
+        "cancel": "Cancel",
+        "submit": "Update Member",
+        "success": "User updated successfully",
+        "error": "Failed to update user"
+      },
+      "toggleEnabled": {
+        "success": "User status updated successfully",
+        "error": "Failed to update user status"
+      },
+      "delete": {
+        "success": "User deleted successfully",
+        "error": "Failed to delete user"
+      },
+      "emailInvite": {
+        "tab": "Email Invite",
+        "description": "Type or paste in emails below, separated by commas. Users will receive login credentials via email.",
+        "emails": "Email Addresses",
+        "emailsPlaceholder": "user1@example.com, user2@example.com",
+        "emailsRequired": "At least one email address is required",
+        "submit": "Send Invites",
+        "success": "user(s) invited successfully",
+        "partialSuccess": "Some invites failed",
+        "allFailed": "Failed to invite users",
+        "error": "Failed to send invites"
+      },
+      "directInvite": {
+        "tab": "Direct Create"
+      },
+      "inviteMode": {
+        "username": "Username",
+        "email": "Email",
+        "emailDisabled": "Email invites require SMTP configuration and mail.enableInvites=true in settings"
+      }
+    },
+    "teams": {
+      "title": "Teams",
+      "description": "Manage teams and organize workspace members",
+      "loading": "Loading teams...",
+      "loadingDetails": "Loading team details...",
+      "createNewTeam": "Create New Team",
+      "teamName": "Team Name",
+      "totalMembers": "Total Members",
+      "actions": "Actions",
+      "noTeamsFound": "No teams found",
+      "noMembers": "No members in this team",
+      "system": "System",
+      "addMember": "Add Member",
+      "viewTeam": "View Team",
+      "removeMember": "Remove from team",
+      "cannotRemoveFromSystemTeam": "Cannot remove from system team",
+      "renameTeamLabel": "Rename Team",
+      "deleteTeamLabel": "Delete Team",
+      "cannotDeleteInternal": "Cannot delete the Internal team",
+      "confirmDelete": "Are you sure you want to delete this team? This team must be empty to delete.",
+      "confirmRemove": "Remove user from this team?",
+      "cannotRenameInternal": "Cannot rename the Internal team",
+      "cannotAddToInternal": "Cannot add members to the Internal team",
+      "teamNotFound": "Team not found",
+      "backToTeams": "Back to Teams",
+      "memberCount": "{{count}} members",
+      "removeMemberSuccess": "User removed from team",
+      "removeMemberError": "Failed to remove user from team",
+      "createTeam": {
+        "title": "Create New Team",
+        "teamName": "Team Name",
+        "teamNamePlaceholder": "Enter team name",
+        "cancel": "Cancel",
+        "submit": "Create Team",
+        "nameRequired": "Team name is required",
+        "success": "Team created successfully",
+        "error": "Failed to create team"
+      },
+      "renameTeam": {
+        "title": "Rename Team",
+        "renaming": "Renaming:",
+        "newTeamName": "New Team Name",
+        "newTeamNamePlaceholder": "Enter new team name",
+        "cancel": "Cancel",
+        "submit": "Rename Team",
+        "nameRequired": "Team name is required",
+        "success": "Team renamed successfully",
+        "error": "Failed to rename team"
+      },
+      "deleteTeam": {
+        "success": "Team deleted successfully",
+        "error": "Failed to delete team. Make sure the team is empty.",
+        "teamMustBeEmpty": "Team must be empty before deletion"
+      },
+      "addMemberToTeam": {
+        "title": "Add Member to Team",
+        "addingTo": "Adding to",
+        "selectUser": "Select User",
+        "selectUserPlaceholder": "Choose a user",
+        "selectUserRequired": "Please select a user",
+        "currentlyIn": "currently in",
+        "willBeMoved": "Note: This user will be moved from their current team to this team.",
+        "cancel": "Cancel",
+        "submit": "Add Member",
+        "userRequired": "Please select a user",
+        "success": "Member added to team successfully",
+        "error": "Failed to add member to team"
+      },
+      "changeTeam": {
+        "label": "Change Team",
+        "title": "Change Team",
+        "changing": "Moving",
+        "selectTeam": "Select Team",
+        "selectTeamPlaceholder": "Choose a team",
+        "selectTeamRequired": "Please select a team",
+        "success": "Team changed successfully",
+        "error": "Failed to change team",
+        "submit": "Change Team"
+      }
+    }
+  },
+  "firstLogin": {
+    "title": "First Time Login",
+    "welcomeTitle": "Welcome!",
+    "welcomeMessage": "For security reasons, you must change your password on your first login.",
+    "loggedInAs": "Logged in as",
+    "error": "Error",
+    "currentPassword": "Current Password",
+    "enterCurrentPassword": "Enter your current password",
+    "newPassword": "New Password",
+    "enterNewPassword": "Enter new password (min 8 characters)",
+    "confirmPassword": "Confirm New Password",
+    "reEnterNewPassword": "Re-enter new password",
+    "changePassword": "Change Password",
+    "allFieldsRequired": "All fields are required",
+    "passwordsDoNotMatch": "New passwords do not match",
+    "passwordTooShort": "Password must be at least 8 characters",
+    "passwordMustBeDifferent": "New password must be different from current password",
+    "passwordChangedSuccess": "Password changed successfully! Please log in again.",
+    "passwordChangeFailed": "Failed to change password. Please check your current password."
   }
 }
diff --git a/frontend/src/auth/springAuthClient.ts b/frontend/src/auth/springAuthClient.ts
index 03ea08f0da..8567eb654e 100644
--- a/frontend/src/auth/springAuthClient.ts
+++ b/frontend/src/auth/springAuthClient.ts
@@ -15,6 +15,7 @@ export interface User {
   role: string;
   enabled?: boolean;
   is_anonymous?: boolean;
+  isFirstLogin?: boolean;
   app_metadata?: Record<string, any>;
 }
 
diff --git a/frontend/src/components/shared/DismissAllErrorsButton.tsx b/frontend/src/components/shared/DismissAllErrorsButton.tsx
index 44a579f343..853e341aa0 100644
--- a/frontend/src/components/shared/DismissAllErrorsButton.tsx
+++ b/frontend/src/components/shared/DismissAllErrorsButton.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useFileState } from '../../contexts/FileContext';
 import { useFileActions } from '../../contexts/file/fileHooks';
 import CloseIcon from '@mui/icons-material/Close';
+import { Z_INDEX_TOAST } from '../../styles/zIndex';
 
 interface DismissAllErrorsButtonProps {
   className?: string;
@@ -38,7 +39,7 @@ const DismissAllErrorsButton: React.FC<DismissAllErrorsButtonProps> = ({ classNa
           position: 'absolute',
           top: '1rem',
           right: '1rem',
-          zIndex: 1000,
+          zIndex: Z_INDEX_TOAST,
           pointerEvents: 'auto'
         }}
       >
diff --git a/frontend/src/components/shared/FirstLoginModal.tsx b/frontend/src/components/shared/FirstLoginModal.tsx
new file mode 100644
index 0000000000..92c293765b
--- /dev/null
+++ b/frontend/src/components/shared/FirstLoginModal.tsx
@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import { Modal, Stack, Text, PasswordInput, Button, Alert } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import LocalIcon from './LocalIcon';
+import { accountService } from '../../services/accountService';
+import { alert } from '../toast';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';
+
+interface FirstLoginModalProps {
+  opened: boolean;
+  onPasswordChanged: () => void;
+  username: string;
+}
+
+/**
+ * FirstLoginModal
+ *
+ * Forces first-time users to change their password.
+ * Cannot be dismissed until password is successfully changed.
+ */
+export default function FirstLoginModal({ opened, onPasswordChanged, username }: FirstLoginModalProps) {
+  const { t } = useTranslation();
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async () => {
+    // Validation
+    if (!currentPassword || !newPassword || !confirmPassword) {
+      setError(t('firstLogin.allFieldsRequired', 'All fields are required'));
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setError(t('firstLogin.passwordsDoNotMatch', 'New passwords do not match'));
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setError(t('firstLogin.passwordTooShort', 'Password must be at least 8 characters'));
+      return;
+    }
+
+    if (newPassword === currentPassword) {
+      setError(t('firstLogin.passwordMustBeDifferent', 'New password must be different from current password'));
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+
+      await accountService.changePassword(currentPassword, newPassword);
+
+      alert({
+        alertType: 'success',
+        title: t('firstLogin.passwordChangedSuccess', 'Password changed successfully! Please log in again.')
+      });
+
+      // Clear form
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+
+      // Wait a moment for the user to see the success message
+      // Then the backend will have logged them out, and onPasswordChanged will handle redirect
+      setTimeout(() => {
+        onPasswordChanged();
+      }, 1500);
+    } catch (err: any) {
+      console.error('Failed to change password:', err);
+      setError(
+        err.response?.data?.message ||
+        t('firstLogin.passwordChangeFailed', 'Failed to change password. Please check your current password.')
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={() => {}} // Cannot close
+      title={t('firstLogin.title', 'First Time Login')}
+      closeOnClickOutside={false}
+      closeOnEscape={false}
+      withCloseButton={false}
+      centered
+      size="md"
+      zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
+    >
+      <Stack gap="md">
+        <Alert
+          icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
+          title={t('firstLogin.welcomeTitle', 'Welcome!')}
+          color="blue"
+        >
+          <Text size="sm">
+            {t(
+              'firstLogin.welcomeMessage',
+              'For security reasons, you must change your password on your first login.'
+            )}
+          </Text>
+        </Alert>
+
+        <Text size="sm" fw={500}>
+          {t('firstLogin.loggedInAs', 'Logged in as')}: <strong>{username}</strong>
+        </Text>
+
+        {error && (
+          <Alert
+            icon={<LocalIcon icon="error-rounded" width="1rem" height="1rem" />}
+            title={t('firstLogin.error', 'Error')}
+            color="red"
+          >
+            {error}
+          </Alert>
+        )}
+
+        <PasswordInput
+          label={t('firstLogin.currentPassword', 'Current Password')}
+          placeholder={t('firstLogin.enterCurrentPassword', 'Enter your current password')}
+          value={currentPassword}
+          onChange={(e) => setCurrentPassword(e.currentTarget.value)}
+          required
+        />
+
+        <PasswordInput
+          label={t('firstLogin.newPassword', 'New Password')}
+          placeholder={t('firstLogin.enterNewPassword', 'Enter new password (min 8 characters)')}
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.currentTarget.value)}
+          required
+        />
+
+        <PasswordInput
+          label={t('firstLogin.confirmPassword', 'Confirm New Password')}
+          placeholder={t('firstLogin.reEnterNewPassword', 'Re-enter new password')}
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.currentTarget.value)}
+          required
+        />
+
+        <Button
+          fullWidth
+          onClick={handleSubmit}
+          loading={loading}
+          disabled={!currentPassword || !newPassword || !confirmPassword}
+          mt="md"
+        >
+          {t('firstLogin.changePassword', 'Change Password')}
+        </Button>
+      </Stack>
+    </Modal>
+  );
+}
diff --git a/frontend/src/components/shared/config/configNavSections.tsx b/frontend/src/components/shared/config/configNavSections.tsx
index 12fb14e950..ac539368bc 100644
--- a/frontend/src/components/shared/config/configNavSections.tsx
+++ b/frontend/src/components/shared/config/configNavSections.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { NavKey } from './types';
 import HotkeysSection from './configSections/HotkeysSection';
 import GeneralSection from './configSections/GeneralSection';
+import PeopleSection from './configSections/PeopleSection';
+import TeamsSection from './configSections/TeamsSection';
 import AdminGeneralSection from './configSections/AdminGeneralSection';
 import AdminSecuritySection from './configSections/AdminSecuritySection';
 import AdminConnectionsSection from './configSections/AdminConnectionsSection';
@@ -52,6 +54,23 @@ export const createConfigNavSections = (
         },
       ],
     },
+    {
+      title: 'Workspace',
+      items: [
+        {
+          key: 'people',
+          label: 'People',
+          icon: 'group-rounded',
+          component: <PeopleSection />
+        },
+        {
+          key: 'teams',
+          label: 'Teams',
+          icon: 'groups-rounded',
+          component: <TeamsSection />
+        },
+      ],
+    },
     {
       title: 'Preferences',
       items: [
diff --git a/frontend/src/components/shared/config/configSections/AdminConnectionsSection.tsx b/frontend/src/components/shared/config/configSections/AdminConnectionsSection.tsx
index 89addd101d..f2aed551d9 100644
--- a/frontend/src/components/shared/config/configSections/AdminConnectionsSection.tsx
+++ b/frontend/src/components/shared/config/configSections/AdminConnectionsSection.tsx
@@ -33,6 +33,7 @@ interface ConnectionsSettingsData {
   };
   mail?: {
     enabled?: boolean;
+    enableInvites?: boolean;
     host?: string;
     port?: number;
     username?: string;
diff --git a/frontend/src/components/shared/config/configSections/AdminMailSection.tsx b/frontend/src/components/shared/config/configSections/AdminMailSection.tsx
index 239202db96..860f13bb69 100644
--- a/frontend/src/components/shared/config/configSections/AdminMailSection.tsx
+++ b/frontend/src/components/shared/config/configSections/AdminMailSection.tsx
@@ -9,6 +9,7 @@ import PendingBadge from '../PendingBadge';
 
 interface MailSettingsData {
   enabled?: boolean;
+  enableInvites?: boolean;
   host?: string;
   port?: number;
   username?: string;
@@ -68,7 +69,7 @@ export default function AdminMailSection() {
 
       <Paper withBorder p="md" radius="md">
         <Stack gap="md">
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Group justify="space-between" align="flex-start" wrap="nowrap">
             <div>
               <Text fw={500} size="sm">{t('admin.settings.mail.enabled', 'Enable Mail')}</Text>
               <Text size="xs" c="dimmed" mt={4}>
@@ -82,7 +83,24 @@ export default function AdminMailSection() {
               />
               <PendingBadge show={isFieldPending('enabled')} />
             </Group>
-          </div>
+          </Group>
+
+          <Group justify="space-between" align="flex-start" wrap="nowrap">
+            <div>
+              <Text fw={500} size="sm">{t('admin.settings.mail.enableInvites', 'Enable Email Invites')}</Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                {t('admin.settings.mail.enableInvites.description', 'Allow admins to invite users via email with auto-generated passwords')}
+              </Text>
+            </div>
+            <Group gap="xs">
+              <Switch
+                checked={settings.enableInvites || false}
+                onChange={(e) => setSettings({ ...settings, enableInvites: e.target.checked })}
+                disabled={!settings.enabled}
+              />
+              <PendingBadge show={isFieldPending('enableInvites')} />
+            </Group>
+          </Group>
 
           <div>
             <TextInput
diff --git a/frontend/src/components/shared/config/configSections/PeopleSection.tsx b/frontend/src/components/shared/config/configSections/PeopleSection.tsx
new file mode 100644
index 0000000000..baae4e260e
--- /dev/null
+++ b/frontend/src/components/shared/config/configSections/PeopleSection.tsx
@@ -0,0 +1,673 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Stack,
+  Text,
+  Button,
+  TextInput,
+  Table,
+  ActionIcon,
+  Menu,
+  Badge,
+  Loader,
+  Group,
+  Modal,
+  Select,
+  Paper,
+  Checkbox,
+  Textarea,
+  SegmentedControl,
+  Tooltip,
+  CloseButton,
+} from '@mantine/core';
+import LocalIcon from '../../LocalIcon';
+import { alert } from '../../../toast';
+import { userManagementService, User } from '../../../../services/userManagementService';
+import { teamService, Team } from '../../../../services/teamService';
+import { Z_INDEX_OVER_CONFIG_MODAL } from '../../../../styles/zIndex';
+import { useAppConfig } from '../../../../hooks/useAppConfig';
+
+export default function PeopleSection() {
+  const { t } = useTranslation();
+  const { config } = useAppConfig();
+  const [users, setUsers] = useState<User[]>([]);
+  const [teams, setTeams] = useState<Team[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [inviteModalOpened, setInviteModalOpened] = useState(false);
+  const [editUserModalOpened, setEditUserModalOpened] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [processing, setProcessing] = useState(false);
+  const [inviteMode, setInviteMode] = useState<'email' | 'direct'>('direct');
+
+  // Form state for direct invite
+  const [inviteForm, setInviteForm] = useState({
+    username: '',
+    password: '',
+    role: 'ROLE_USER',
+    teamId: undefined as number | undefined,
+    forceChange: false,
+  });
+
+  // Form state for email invite
+  const [emailInviteForm, setEmailInviteForm] = useState({
+    emails: '',
+    role: 'ROLE_USER',
+    teamId: undefined as number | undefined,
+  });
+
+  // Form state for edit user modal
+  const [editForm, setEditForm] = useState({
+    role: 'ROLE_USER',
+    teamId: undefined as number | undefined,
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (config) {
+      console.log('[PeopleSection] Email invites enabled:', config.enableEmailInvites);
+    }
+  }, [config]);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const [adminData, teamsData] = await Promise.all([
+        userManagementService.getUsers(),
+        teamService.getTeams(),
+      ]);
+
+      // Enrich users with session data
+      const enrichedUsers = adminData.users.map(user => ({
+        ...user,
+        isActive: adminData.userSessions[user.username] || false,
+        lastRequest: adminData.userLastRequest[user.username] || undefined,
+      }));
+
+      setUsers(enrichedUsers);
+      setTeams(teamsData);
+    } catch (error) {
+      console.error('Failed to fetch people data:', error);
+      alert({ alertType: 'error', title: 'Failed to load people data' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInviteUser = async () => {
+    if (!inviteForm.username || !inviteForm.password) {
+      alert({ alertType: 'error', title: t('workspace.people.addMember.usernameRequired') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      await userManagementService.createUser({
+        username: inviteForm.username,
+        password: inviteForm.password,
+        role: inviteForm.role,
+        teamId: inviteForm.teamId,
+        authType: 'password',
+        forceChange: inviteForm.forceChange,
+      });
+      alert({ alertType: 'success', title: t('workspace.people.addMember.success') });
+      setInviteModalOpened(false);
+      setInviteForm({
+        username: '',
+        password: '',
+        role: 'ROLE_USER',
+        teamId: undefined,
+        forceChange: false,
+      });
+      fetchData();
+    } catch (error: any) {
+      console.error('Failed to create user:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.people.addMember.error');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleEmailInvite = async () => {
+    if (!emailInviteForm.emails.trim()) {
+      alert({ alertType: 'error', title: t('workspace.people.emailInvite.emailsRequired', 'At least one email address is required') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      const response = await userManagementService.inviteUsers({
+        emails: emailInviteForm.emails,
+        role: emailInviteForm.role,
+        teamId: emailInviteForm.teamId,
+      });
+
+      if (response.successCount > 0) {
+        alert({
+          alertType: 'success',
+          title: t('workspace.people.emailInvite.success', `${response.successCount} user(s) invited successfully`)
+        });
+
+        if (response.failureCount > 0 && response.errors) {
+          alert({
+            alertType: 'warning',
+            title: t('workspace.people.emailInvite.partialSuccess', 'Some invites failed'),
+            body: response.errors
+          });
+        }
+
+        setInviteModalOpened(false);
+        setEmailInviteForm({
+          emails: '',
+          role: 'ROLE_USER',
+          teamId: undefined,
+        });
+        fetchData();
+      } else {
+        alert({
+          alertType: 'error',
+          title: t('workspace.people.emailInvite.allFailed', 'Failed to invite users'),
+          body: response.errors || response.error
+        });
+      }
+    } catch (error: any) {
+      console.error('Failed to invite users:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.people.emailInvite.error', 'Failed to send invites');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleUpdateUserRole = async () => {
+    if (!selectedUser) return;
+
+    try {
+      setProcessing(true);
+      await userManagementService.updateUserRole({
+        username: selectedUser.username,
+        role: editForm.role,
+        teamId: editForm.teamId,
+      });
+      alert({ alertType: 'success', title: t('workspace.people.editMember.success') });
+      closeEditModal();
+      fetchData();
+    } catch (error: any) {
+      console.error('Failed to update user:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.people.editMember.error');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleToggleEnabled = async (user: User) => {
+    try {
+      await userManagementService.toggleUserEnabled(user.username, !user.enabled);
+      alert({ alertType: 'success', title: t('workspace.people.toggleEnabled.success') });
+      fetchData();
+    } catch (error: any) {
+      console.error('Failed to toggle user status:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.people.toggleEnabled.error');
+      alert({ alertType: 'error', title: errorMessage });
+    }
+  };
+
+  const handleDeleteUser = async (user: User) => {
+    const confirmMessage = t('workspace.people.confirmDelete', 'Are you sure you want to delete this user? This action cannot be undone.');
+    if (!window.confirm(`${confirmMessage}\n\nUser: ${user.username}`)) {
+      return;
+    }
+
+    try {
+      await userManagementService.deleteUser(user.username);
+      alert({ alertType: 'success', title: t('workspace.people.deleteUserSuccess', 'User deleted successfully') });
+      fetchData();
+    } catch (error: any) {
+      console.error('Failed to delete user:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.people.deleteUserError', 'Failed to delete user');
+      alert({ alertType: 'error', title: errorMessage });
+    }
+  };
+
+  const openEditModal = (user: User) => {
+    setSelectedUser(user);
+    setEditForm({
+      role: user.roleName,
+      teamId: user.team?.id,
+    });
+    setEditUserModalOpened(true);
+  };
+
+  const closeEditModal = () => {
+    setEditUserModalOpened(false);
+    setSelectedUser(null);
+    setEditForm({
+      role: 'ROLE_USER',
+      teamId: undefined,
+    });
+  };
+
+  const filteredUsers = users.filter((user) =>
+    user.username.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const roleOptions = [
+    {
+      value: 'ROLE_ADMIN',
+      label: t('workspace.people.admin'),
+      description: t('workspace.people.roleDescriptions.admin', 'Can manage settings and invite members, with full administrative access.'),
+      icon: 'admin-panel-settings'
+    },
+    {
+      value: 'ROLE_USER',
+      label: t('workspace.people.member'),
+      description: t('workspace.people.roleDescriptions.member', 'Can view and edit shared files, but cannot manage workspace settings or members.'),
+      icon: 'person'
+    },
+  ];
+
+  const renderRoleOption = ({ option }: { option: any }) => (
+    <Group gap="sm" wrap="nowrap">
+      <LocalIcon icon={option.icon} width="1.25rem" height="1.25rem" style={{ flexShrink: 0 }} />
+      <div style={{ flex: 1 }}>
+        <Text size="sm" fw={500}>{option.label}</Text>
+        <Text size="xs" c="dimmed" style={{ whiteSpace: 'normal', lineHeight: 1.4 }}>
+          {option.description}
+        </Text>
+      </div>
+    </Group>
+  );
+
+  const teamOptions = teams.map((team) => ({
+    value: team.id.toString(),
+    label: team.name,
+  }));
+
+  if (loading) {
+    return (
+      <Stack align="center" py="md">
+        <Loader size="sm" />
+        <Text size="sm" c="dimmed">
+          {t('workspace.people.loading', 'Loading people...')}
+        </Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="lg">
+      <div>
+        <Text fw={600} size="lg">
+          {t('workspace.people.title')}
+        </Text>
+        <Text size="sm" c="dimmed">
+          {t('workspace.people.description')}
+        </Text>
+      </div>
+
+      {/* Header Actions */}
+      <Group justify="space-between">
+        <TextInput
+          placeholder={t('workspace.people.searchMembers')}
+          leftSection={<LocalIcon icon="search" width="1rem" height="1rem" />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          style={{ maxWidth: 300 }}
+        />
+        <Button leftSection={<LocalIcon icon="person-add" width="1rem" height="1rem" />} onClick={() => setInviteModalOpened(true)}>
+          {t('workspace.people.addMembers')}
+        </Button>
+      </Group>
+
+      {/* Members Table */}
+      <Paper withBorder p="md">
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{t('workspace.people.user')}</Table.Th>
+              <Table.Th>{t('workspace.people.role')}</Table.Th>
+              <Table.Th>{t('workspace.people.team')}</Table.Th>
+              <Table.Th>{t('workspace.people.status')}</Table.Th>
+              <Table.Th style={{ width: 50 }}></Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {filteredUsers.length === 0 ? (
+              <Table.Tr>
+                <Table.Td colSpan={5}>
+                  <Text ta="center" c="dimmed" py="xl">
+                    {t('workspace.people.noMembersFound')}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ) : (
+              filteredUsers.map((user) => (
+                <Table.Tr key={user.id}>
+                  <Table.Td>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                      {user.isActive && (
+                        <div
+                          style={{
+                            width: '6px',
+                            height: '6px',
+                            borderRadius: '50%',
+                            backgroundColor: 'var(--mantine-color-green-6)',
+                            flexShrink: 0,
+                          }}
+                          title={t('workspace.people.activeSession', 'Active session')}
+                        />
+                      )}
+                      <div>
+                        <Text size="sm" fw={500}>
+                          {user.username}
+                        </Text>
+                        {user.email && (
+                          <Text size="xs" c="dimmed">
+                            {user.email}
+                          </Text>
+                        )}
+                      </div>
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge
+                      color={(user.rolesAsString || '').includes('ROLE_ADMIN') ? 'blue' : 'gray'}
+                      variant="light"
+                    >
+                      {(user.rolesAsString || '').includes('ROLE_ADMIN') ? t('workspace.people.admin') : t('workspace.people.member')}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="sm">{user.team?.name || '—'}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color={user.enabled ? 'green' : 'red'} variant="light">
+                      {user.enabled ? t('workspace.people.active') : t('workspace.people.disabled')}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap="xs" wrap="nowrap">
+                      {/* Info icon with tooltip */}
+                      <Tooltip
+                        label={
+                          <div>
+                            <Text size="xs" fw={500}>Authentication: {user.authenticationType || 'Unknown'}</Text>
+                            <Text size="xs">
+                              Last Activity: {user.lastRequest
+                                ? new Date(user.lastRequest).toLocaleString()
+                                : 'Never'}
+                            </Text>
+                          </div>
+                        }
+                        multiline
+                        w={220}
+                        position="left"
+                        withArrow
+                        zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
+                      >
+                        <ActionIcon variant="subtle" color="gray" size="sm">
+                          <LocalIcon icon="info" width="1rem" height="1rem" />
+                        </ActionIcon>
+                      </Tooltip>
+
+                      {/* Actions menu */}
+                      <Menu position="bottom-end" withinPortal>
+                        <Menu.Target>
+                          <ActionIcon variant="subtle" color="gray">
+                            <LocalIcon icon="more-vert" width="1rem" height="1rem" />
+                          </ActionIcon>
+                        </Menu.Target>
+                        <Menu.Dropdown style={{ zIndex: Z_INDEX_OVER_CONFIG_MODAL }}>
+                          <Menu.Item onClick={() => openEditModal(user)}>{t('workspace.people.editRole')}</Menu.Item>
+                          <Menu.Item
+                            leftSection={user.enabled ? <LocalIcon icon="person-off" width="1rem" height="1rem" /> : <LocalIcon icon="person-check" width="1rem" height="1rem" />}
+                            onClick={() => handleToggleEnabled(user)}
+                          >
+                            {user.enabled ? t('workspace.people.disable') : t('workspace.people.enable')}
+                          </Menu.Item>
+                          <Menu.Divider />
+                          <Menu.Item color="red" leftSection={<LocalIcon icon="delete" width="1rem" height="1rem" />} onClick={() => handleDeleteUser(user)}>
+                            {t('workspace.people.deleteUser')}
+                          </Menu.Item>
+                        </Menu.Dropdown>
+                      </Menu>
+                    </Group>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            )}
+          </Table.Tbody>
+        </Table>
+      </Paper>
+
+      {/* Add Member Modal */}
+      <Modal
+        opened={inviteModalOpened}
+        onClose={() => setInviteModalOpened(false)}
+        size="md"
+        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        centered
+        padding="xl"
+        withCloseButton={false}
+      >
+        <div style={{ position: 'relative' }}>
+          <CloseButton
+            onClick={() => setInviteModalOpened(false)}
+            size="lg"
+            style={{
+              position: 'absolute',
+              top: '-8px',
+              right: '-8px',
+              zIndex: 1
+            }}
+          />
+          <Stack gap="lg" pt="md">
+            {/* Header with Icon */}
+            <Stack gap="md" align="center">
+              <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <Text size="xl" fw={600} ta="center">
+                {t('workspace.people.inviteMembers', 'Invite Members')}
+              </Text>
+              {inviteMode === 'email' && (
+                <Text size="sm" c="dimmed" ta="center" px="md">
+                  {t('workspace.people.inviteMembers.subtitle', 'Type or paste in emails below, separated by commas. Your workspace will be billed by members.')}
+                </Text>
+              )}
+            </Stack>
+
+            {/* Mode Toggle */}
+            <Tooltip
+              label={t('workspace.people.inviteMode.emailDisabled', 'Email invites require SMTP configuration and mail.enableInvites=true in settings')}
+              disabled={!!config?.enableEmailInvites}
+              position="bottom"
+              withArrow
+              zIndex={Z_INDEX_OVER_CONFIG_MODAL + 1}
+            >
+              <div>
+                <SegmentedControl
+                  value={inviteMode}
+                  onChange={(value) => setInviteMode(value as 'email' | 'direct')}
+                  data={[
+                    {
+                      label: t('workspace.people.inviteMode.username', 'Username'),
+                      value: 'direct',
+                    },
+                    {
+                      label: t('workspace.people.inviteMode.email', 'Email'),
+                      value: 'email',
+                      disabled: !config?.enableEmailInvites,
+                    },
+                  ]}
+                  fullWidth
+                />
+              </div>
+            </Tooltip>
+
+            {/* Email Mode */}
+            {inviteMode === 'email' && config?.enableEmailInvites && (
+              <>
+                <Textarea
+                  label={t('workspace.people.emailInvite.emails', 'Email Addresses')}
+                  placeholder={t('workspace.people.emailInvite.emailsPlaceholder', 'user1@example.com, user2@example.com')}
+                  value={emailInviteForm.emails}
+                  onChange={(e) => setEmailInviteForm({ ...emailInviteForm, emails: e.currentTarget.value })}
+                  minRows={3}
+                  required
+                />
+                <Select
+                  label={t('workspace.people.addMember.role')}
+                  data={roleOptions}
+                  value={emailInviteForm.role}
+                  onChange={(value) => setEmailInviteForm({ ...emailInviteForm, role: value || 'ROLE_USER' })}
+                  renderOption={renderRoleOption}
+                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+                />
+                <Select
+                  label={t('workspace.people.addMember.team')}
+                  placeholder={t('workspace.people.addMember.teamPlaceholder')}
+                  data={teamOptions}
+                  value={emailInviteForm.teamId?.toString()}
+                  onChange={(value) => setEmailInviteForm({ ...emailInviteForm, teamId: value ? parseInt(value) : undefined })}
+                  clearable
+                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+                />
+              </>
+            )}
+
+            {/* Direct/Username Mode */}
+            {inviteMode === 'direct' && (
+              <>
+                <TextInput
+                  label={t('workspace.people.addMember.username')}
+                  placeholder={t('workspace.people.addMember.usernamePlaceholder')}
+                  value={inviteForm.username}
+                  onChange={(e) => setInviteForm({ ...inviteForm, username: e.currentTarget.value })}
+                  required
+                />
+                <TextInput
+                  label={t('workspace.people.addMember.password')}
+                  type="password"
+                  placeholder={t('workspace.people.addMember.passwordPlaceholder')}
+                  value={inviteForm.password}
+                  onChange={(e) => setInviteForm({ ...inviteForm, password: e.currentTarget.value })}
+                  required
+                />
+                <Select
+                  label={t('workspace.people.addMember.role')}
+                  data={roleOptions}
+                  value={inviteForm.role}
+                  onChange={(value) => setInviteForm({ ...inviteForm, role: value || 'ROLE_USER' })}
+                  renderOption={renderRoleOption}
+                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+                />
+                <Select
+                  label={t('workspace.people.addMember.team')}
+                  placeholder={t('workspace.people.addMember.teamPlaceholder')}
+                  data={teamOptions}
+                  value={inviteForm.teamId?.toString()}
+                  onChange={(value) => setInviteForm({ ...inviteForm, teamId: value ? parseInt(value) : undefined })}
+                  clearable
+                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+                />
+                <Checkbox
+                  label={t('workspace.people.addMember.forcePasswordChange', 'Force password change on first login')}
+                  checked={inviteForm.forceChange}
+                  onChange={(e) => setInviteForm({ ...inviteForm, forceChange: e.currentTarget.checked })}
+                />
+              </>
+            )}
+
+            {/* Action Button */}
+            <Button
+              onClick={inviteMode === 'email' ? handleEmailInvite : handleInviteUser}
+              loading={processing}
+              fullWidth
+              size="md"
+              mt="md"
+            >
+              {inviteMode === 'email'
+                ? t('workspace.people.emailInvite.submit', 'Send Invites')
+                : t('workspace.people.addMember.submit')}
+            </Button>
+          </Stack>
+        </div>
+      </Modal>
+
+      {/* Edit User Modal */}
+      <Modal
+        opened={editUserModalOpened}
+        onClose={closeEditModal}
+        size="md"
+        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        centered
+        padding="xl"
+        withCloseButton={false}
+      >
+        <div style={{ position: 'relative' }}>
+          <CloseButton
+            onClick={closeEditModal}
+            size="lg"
+            style={{
+              position: 'absolute',
+              top: '-8px',
+              right: '-8px',
+              zIndex: 1
+            }}
+          />
+          <Stack gap="lg" pt="md">
+            {/* Header with Icon */}
+            <Stack gap="md" align="center">
+              <LocalIcon icon="edit" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <Text size="xl" fw={600} ta="center">
+                {t('workspace.people.editMember.title')}
+              </Text>
+              <Text size="sm" c="dimmed" ta="center">
+                {t('workspace.people.editMember.editing')} <strong>{selectedUser?.username}</strong>
+              </Text>
+            </Stack>
+            <Select
+              label={t('workspace.people.editMember.role')}
+              data={roleOptions}
+              value={editForm.role}
+              onChange={(value) => setEditForm({ ...editForm, role: value || 'ROLE_USER' })}
+              renderOption={renderRoleOption}
+              comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+            />
+            <Select
+              label={t('workspace.people.editMember.team')}
+              placeholder={t('workspace.people.editMember.teamPlaceholder')}
+              data={teamOptions}
+              value={editForm.teamId?.toString()}
+              onChange={(value) => setEditForm({ ...editForm, teamId: value ? parseInt(value) : undefined })}
+              clearable
+              comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+            />
+            <Button onClick={handleUpdateUserRole} loading={processing} fullWidth size="md" mt="md">
+              {t('workspace.people.editMember.submit')}
+            </Button>
+          </Stack>
+        </div>
+      </Modal>
+    </Stack>
+  );
+}
diff --git a/frontend/src/components/shared/config/configSections/TeamDetailsSection.tsx b/frontend/src/components/shared/config/configSections/TeamDetailsSection.tsx
new file mode 100644
index 0000000000..07e6510e64
--- /dev/null
+++ b/frontend/src/components/shared/config/configSections/TeamDetailsSection.tsx
@@ -0,0 +1,477 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Stack,
+  Text,
+  Button,
+  Table,
+  ActionIcon,
+  Badge,
+  Loader,
+  Group,
+  Modal,
+  Select,
+  Paper,
+  CloseButton,
+  Tooltip,
+  Menu,
+} from '@mantine/core';
+import LocalIcon from '../../LocalIcon';
+import { alert } from '../../../toast';
+import { teamService, Team } from '../../../../services/teamService';
+import { User } from '../../../../services/userManagementService';
+import { userManagementService } from '../../../../services/userManagementService';
+import { Z_INDEX_OVER_CONFIG_MODAL } from '../../../../styles/zIndex';
+
+interface TeamDetailsSectionProps {
+  teamId: number;
+  onBack: () => void;
+}
+
+export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectionProps) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(true);
+  const [team, setTeam] = useState<Team | null>(null);
+  const [teamUsers, setTeamUsers] = useState<User[]>([]);
+  const [availableUsers, setAvailableUsers] = useState<User[]>([]);
+  const [allTeams, setAllTeams] = useState<Team[]>([]);
+  const [userLastRequest, setUserLastRequest] = useState<Record<string, number>>({});
+  const [addMemberModalOpened, setAddMemberModalOpened] = useState(false);
+  const [changeTeamModalOpened, setChangeTeamModalOpened] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [selectedUserId, setSelectedUserId] = useState<string>('');
+  const [selectedTeamId, setSelectedTeamId] = useState<string>('');
+  const [processing, setProcessing] = useState(false);
+
+  useEffect(() => {
+    fetchTeamDetails();
+    fetchAllTeams();
+  }, [teamId]);
+
+  const fetchTeamDetails = async () => {
+    try {
+      setLoading(true);
+      const data = await teamService.getTeamDetails(teamId);
+      console.log('[TeamDetailsSection] Raw data:', data);
+      setTeam(data.team);
+      setTeamUsers(Array.isArray(data.teamUsers) ? data.teamUsers : []);
+      setAvailableUsers(Array.isArray(data.availableUsers) ? data.availableUsers : []);
+      setUserLastRequest(data.userLastRequest || {});
+    } catch (error) {
+      console.error('Failed to fetch team details:', error);
+      alert({ alertType: 'error', title: 'Failed to load team details' });
+      onBack();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchAllTeams = async () => {
+    try {
+      const teams = await teamService.getTeams();
+      setAllTeams(teams);
+    } catch (error) {
+      console.error('Failed to fetch teams:', error);
+    }
+  };
+
+  const handleAddMember = async () => {
+    if (!selectedUserId) {
+      alert({ alertType: 'error', title: t('workspace.teams.addMemberToTeam.selectUserRequired', 'Please select a user') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      await teamService.addUserToTeam(teamId, parseInt(selectedUserId));
+      alert({ alertType: 'success', title: t('workspace.teams.addMemberToTeam.success', 'User added to team successfully') });
+      setAddMemberModalOpened(false);
+      setSelectedUserId('');
+      fetchTeamDetails();
+    } catch (error: any) {
+      console.error('Failed to add member:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.teams.addMemberToTeam.error', 'Failed to add user to team');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleRemoveMember = async (user: User) => {
+    if (!window.confirm(t('workspace.teams.confirmRemove', `Remove ${user.username} from this team?`))) {
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      // Find the Default team ID
+      const defaultTeam = allTeams.find(t => t.name === 'Default');
+
+      if (!defaultTeam) {
+        throw new Error('Default team not found');
+      }
+
+      // Move user to Default team by updating their role with the Default team ID
+      await teamService.moveUserToTeam(user.username, user.rolesAsString || 'ROLE_USER', defaultTeam.id);
+      alert({ alertType: 'success', title: t('workspace.teams.removeMemberSuccess', 'User removed from team') });
+      fetchTeamDetails();
+    } catch (error: any) {
+      console.error('Failed to remove member:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.teams.removeMemberError', 'Failed to remove user from team');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleDeleteUser = async (user: User) => {
+    const confirmMessage = t('workspace.people.confirmDelete', 'Are you sure you want to delete this user? This action cannot be undone.');
+    if (!window.confirm(`${confirmMessage}\n\nUser: ${user.username}`)) {
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      await userManagementService.deleteUser(user.username);
+      alert({ alertType: 'success', title: t('workspace.people.deleteUserSuccess', 'User deleted successfully') });
+      fetchTeamDetails();
+    } catch (error: any) {
+      console.error('Failed to delete user:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.people.deleteUserError', 'Failed to delete user');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const openChangeTeamModal = (user: User) => {
+    setSelectedUser(user);
+    setSelectedTeamId(user.team?.id?.toString() || '');
+    setChangeTeamModalOpened(true);
+  };
+
+  const handleChangeTeam = async () => {
+    if (!selectedUser || !selectedTeamId) {
+      alert({ alertType: 'error', title: t('workspace.teams.changeTeam.selectTeamRequired', 'Please select a team') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      await teamService.moveUserToTeam(selectedUser.username, selectedUser.rolesAsString || 'ROLE_USER', parseInt(selectedTeamId));
+      alert({ alertType: 'success', title: t('workspace.teams.changeTeam.success', 'Team changed successfully') });
+      setChangeTeamModalOpened(false);
+      setSelectedUser(null);
+      setSelectedTeamId('');
+      fetchTeamDetails();
+    } catch (error: any) {
+      console.error('Failed to change team:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.teams.changeTeam.error', 'Failed to change team');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Stack align="center" py="xl">
+        <Loader size="sm" />
+        <Text size="sm" c="dimmed">
+          {t('workspace.teams.loadingDetails', 'Loading team details...')}
+        </Text>
+      </Stack>
+    );
+  }
+
+  if (!team) {
+    return (
+      <Stack align="center" py="xl">
+        <Text size="sm" c="red">
+          {t('workspace.teams.teamNotFound', 'Team not found')}
+        </Text>
+        <Button variant="light" onClick={onBack}>
+          {t('workspace.teams.backToTeams', 'Back to Teams')}
+        </Button>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="lg">
+      {/* Header with back button */}
+      <Group>
+        <ActionIcon variant="subtle" onClick={onBack}>
+          <LocalIcon icon="arrow-back" width="1.2rem" height="1.2rem" />
+        </ActionIcon>
+        <div style={{ flex: 1 }}>
+          <Text fw={600} size="lg">
+            {team.name}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t('workspace.teams.memberCount', { count: teamUsers.length })} {teamUsers.length === 1 ? 'member' : 'members'}
+          </Text>
+        </div>
+      </Group>
+
+      {/* Add Member Button */}
+      <Group justify="flex-end">
+        <Button
+          leftSection={<LocalIcon icon="person-add" width="1rem" height="1rem" />}
+          onClick={() => setAddMemberModalOpened(true)}
+          disabled={team.name === 'Internal'}
+        >
+          {t('workspace.teams.addMember')}
+        </Button>
+      </Group>
+
+      {/* Members Table */}
+      <Paper withBorder p="md">
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{t('workspace.people.user')}</Table.Th>
+              <Table.Th>{t('workspace.people.role')}</Table.Th>
+              <Table.Th>{t('workspace.people.status')}</Table.Th>
+              <Table.Th style={{ width: 50 }}></Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {teamUsers.length === 0 ? (
+              <Table.Tr>
+                <Table.Td colSpan={4}>
+                  <Text ta="center" c="dimmed" py="xl">
+                    {t('workspace.teams.noMembers', 'No members in this team')}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ) : (
+              teamUsers.map((user) => (
+                <Table.Tr key={user.id}>
+                  <Table.Td>
+                    <div>
+                      <Text size="sm" fw={500}>
+                        {user.username}
+                      </Text>
+                      {user.email && (
+                        <Text size="xs" c="dimmed">
+                          {user.email}
+                        </Text>
+                      )}
+                    </div>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge
+                      color={(user.rolesAsString || '').includes('ROLE_ADMIN') ? 'blue' : 'gray'}
+                      variant="light"
+                    >
+                      {(user.rolesAsString || '').includes('ROLE_ADMIN')
+                        ? t('workspace.people.admin')
+                        : t('workspace.people.member')}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color={user.enabled ? 'green' : 'red'} variant="light">
+                      {user.enabled ? t('workspace.people.active') : t('workspace.people.disabled')}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap="xs" wrap="nowrap">
+                      {/* Info icon with tooltip */}
+                      <Tooltip
+                        label={
+                          <div>
+                            <Text size="xs" fw={500}>
+                              Authentication: {user.authenticationType || 'Unknown'}
+                            </Text>
+                            <Text size="xs">
+                              Last Activity:{' '}
+                              {userLastRequest[user.username]
+                                ? new Date(userLastRequest[user.username]).toLocaleString()
+                                : 'Never'}
+                            </Text>
+                          </div>
+                        }
+                        multiline
+                        w={220}
+                        position="left"
+                        withArrow
+                        zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
+                      >
+                        <ActionIcon variant="subtle" color="gray" size="sm">
+                          <LocalIcon icon="info" width="1rem" height="1rem" />
+                        </ActionIcon>
+                      </Tooltip>
+
+                      {/* Actions menu */}
+                      <Menu position="bottom-end" withinPortal>
+                        <Menu.Target>
+                          <ActionIcon variant="subtle" color="gray">
+                            <LocalIcon icon="more-vert" width="1rem" height="1rem" />
+                          </ActionIcon>
+                        </Menu.Target>
+                        <Menu.Dropdown style={{ zIndex: Z_INDEX_OVER_CONFIG_MODAL }}>
+                          <Menu.Item
+                            leftSection={<LocalIcon icon="swap-horiz" width="1rem" height="1rem" />}
+                            onClick={() => openChangeTeamModal(user)}
+                            disabled={processing || team.name === 'Internal'}
+                          >
+                            {t('workspace.teams.changeTeam.label', 'Change Team')}
+                          </Menu.Item>
+                          {team.name !== 'Internal' && team.name !== 'Default' && (
+                            <Menu.Item
+                              leftSection={<LocalIcon icon="person-remove" width="1rem" height="1rem" />}
+                              onClick={() => handleRemoveMember(user)}
+                              disabled={processing}
+                            >
+                              {t('workspace.teams.removeMember', 'Remove from team')}
+                            </Menu.Item>
+                          )}
+                          <Menu.Divider />
+                          <Menu.Item
+                            color="red"
+                            leftSection={<LocalIcon icon="delete" width="1rem" height="1rem" />}
+                            onClick={() => handleDeleteUser(user)}
+                            disabled={processing || team.name === 'Internal'}
+                          >
+                            {t('workspace.people.deleteUser', 'Delete User')}
+                          </Menu.Item>
+                        </Menu.Dropdown>
+                      </Menu>
+                    </Group>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            )}
+          </Table.Tbody>
+        </Table>
+      </Paper>
+
+      {/* Add Member Modal */}
+      <Modal
+        opened={addMemberModalOpened}
+        onClose={() => setAddMemberModalOpened(false)}
+        size="md"
+        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        centered
+        padding="xl"
+        withCloseButton={false}
+      >
+        <div style={{ position: 'relative' }}>
+          <CloseButton
+            onClick={() => setAddMemberModalOpened(false)}
+            size="lg"
+            style={{
+              position: 'absolute',
+              top: '-8px',
+              right: '-8px',
+              zIndex: 1,
+            }}
+          />
+          <Stack gap="lg" pt="md">
+            {/* Header with Icon */}
+            <Stack gap="md" align="center">
+              <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <Text size="xl" fw={600} ta="center">
+                {t('workspace.teams.addMemberToTeam.title')}
+              </Text>
+              <Text size="sm" c="dimmed" ta="center">
+                {t('workspace.teams.addMemberToTeam.addingTo')} <strong>{team.name}</strong>
+              </Text>
+            </Stack>
+
+            <Select
+              label={t('workspace.teams.addMemberToTeam.selectUser')}
+              placeholder={t('workspace.teams.addMemberToTeam.selectUserPlaceholder')}
+              data={availableUsers.map((user) => ({
+                value: user.id.toString(),
+                label: `${user.username}${user.team ? ` (${t('workspace.teams.addMemberToTeam.currentlyIn')} ${user.team.name})` : ''}`,
+              }))}
+              value={selectedUserId}
+              onChange={(value) => setSelectedUserId(value || '')}
+              searchable
+              comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+            />
+
+            {selectedUserId && availableUsers.find((u) => u.id.toString() === selectedUserId)?.team && (
+              <Text size="xs" c="orange">
+                {t('workspace.teams.addMemberToTeam.willBeMoved')}
+              </Text>
+            )}
+
+            <Button onClick={handleAddMember} loading={processing} fullWidth size="md" mt="md">
+              {t('workspace.teams.addMemberToTeam.submit')}
+            </Button>
+          </Stack>
+        </div>
+      </Modal>
+
+      {/* Change Team Modal */}
+      <Modal
+        opened={changeTeamModalOpened}
+        onClose={() => setChangeTeamModalOpened(false)}
+        size="md"
+        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        centered
+        padding="xl"
+        withCloseButton={false}
+      >
+        <div style={{ position: 'relative' }}>
+          <CloseButton
+            onClick={() => setChangeTeamModalOpened(false)}
+            size="lg"
+            style={{
+              position: 'absolute',
+              top: '-8px',
+              right: '-8px',
+              zIndex: 1,
+            }}
+          />
+          <Stack gap="lg" pt="md">
+            {/* Header with Icon */}
+            <Stack gap="md" align="center">
+              <LocalIcon icon="swap-horiz" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <Text size="xl" fw={600} ta="center">
+                {t('workspace.teams.changeTeam.title', 'Change Team')}
+              </Text>
+              <Text size="sm" c="dimmed" ta="center">
+                {t('workspace.teams.changeTeam.changing', 'Moving')} <strong>{selectedUser?.username}</strong>
+              </Text>
+            </Stack>
+
+            <Select
+              label={t('workspace.teams.changeTeam.selectTeam', 'Select Team')}
+              placeholder={t('workspace.teams.changeTeam.selectTeamPlaceholder', 'Choose a team')}
+              data={allTeams
+                .filter((t) => t.name !== 'Internal')
+                .map((team) => ({
+                  value: team.id.toString(),
+                  label: team.name,
+                }))}
+              value={selectedTeamId}
+              onChange={(value) => setSelectedTeamId(value || '')}
+              searchable
+              comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+            />
+
+            <Button onClick={handleChangeTeam} loading={processing} fullWidth size="md" mt="md">
+              {t('workspace.teams.changeTeam.submit', 'Change Team')}
+            </Button>
+          </Stack>
+        </div>
+      </Modal>
+    </Stack>
+  );
+}
diff --git a/frontend/src/components/shared/config/configSections/TeamsSection.tsx b/frontend/src/components/shared/config/configSections/TeamsSection.tsx
new file mode 100644
index 0000000000..7c728069de
--- /dev/null
+++ b/frontend/src/components/shared/config/configSections/TeamsSection.tsx
@@ -0,0 +1,456 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Stack,
+  Text,
+  Button,
+  TextInput,
+  Table,
+  ActionIcon,
+  Menu,
+  Badge,
+  Loader,
+  Group,
+  Modal,
+  Paper,
+  Select,
+  CloseButton,
+} from '@mantine/core';
+import LocalIcon from '../../LocalIcon';
+import { alert } from '../../../toast';
+import { teamService, Team, TeamMember } from '../../../../services/teamService';
+import { userManagementService, User } from '../../../../services/userManagementService';
+import { Z_INDEX_OVER_CONFIG_MODAL } from '../../../../styles/zIndex';
+import TeamDetailsSection from './TeamDetailsSection';
+
+export default function TeamsSection() {
+  const { t } = useTranslation();
+  const [teams, setTeams] = useState<Team[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [createModalOpened, setCreateModalOpened] = useState(false);
+  const [renameModalOpened, setRenameModalOpened] = useState(false);
+  const [addMemberModalOpened, setAddMemberModalOpened] = useState(false);
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const [availableUsers, setAvailableUsers] = useState<User[]>([]);
+  const [processing, setProcessing] = useState(false);
+  const [viewingTeamId, setViewingTeamId] = useState<number | null>(null);
+
+  // Form states
+  const [newTeamName, setNewTeamName] = useState('');
+  const [renameTeamName, setRenameTeamName] = useState('');
+  const [selectedUserId, setSelectedUserId] = useState<string>('');
+
+  useEffect(() => {
+    fetchTeams();
+  }, []);
+
+  const fetchTeams = async () => {
+    try {
+      setLoading(true);
+      const teamsData = await teamService.getTeams();
+      setTeams(teamsData);
+    } catch (error) {
+      console.error('Failed to fetch teams:', error);
+      alert({ alertType: 'error', title: 'Failed to load teams' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateTeam = async () => {
+    if (!newTeamName.trim()) {
+      alert({ alertType: 'error', title: t('workspace.teams.createTeam.nameRequired') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      await teamService.createTeam(newTeamName);
+      alert({ alertType: 'success', title: t('workspace.teams.createTeam.success') });
+      setCreateModalOpened(false);
+      setNewTeamName('');
+      fetchTeams();
+    } catch (error: any) {
+      console.error('Failed to create team:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.teams.createTeam.error');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleRenameTeam = async () => {
+    if (!selectedTeam || !renameTeamName.trim()) {
+      alert({ alertType: 'error', title: t('workspace.teams.renameTeam.nameRequired') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      await teamService.renameTeam(selectedTeam.id, renameTeamName);
+      alert({ alertType: 'success', title: t('workspace.teams.renameTeam.success') });
+      setRenameModalOpened(false);
+      setSelectedTeam(null);
+      setRenameTeamName('');
+      fetchTeams();
+    } catch (error: any) {
+      console.error('Failed to rename team:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.teams.renameTeam.error');
+      alert({ alertType: 'error', title: errorMessage });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleDeleteTeam = async (team: Team) => {
+    if (team.name === 'Internal') {
+      alert({ alertType: 'error', title: t('workspace.teams.cannotDeleteInternal') });
+      return;
+    }
+
+    if (!confirm(t('workspace.teams.confirmDelete'))) {
+      return;
+    }
+
+    try {
+      await teamService.deleteTeam(team.id);
+      alert({ alertType: 'success', title: t('workspace.teams.deleteTeam.success') });
+      fetchTeams();
+    } catch (error: any) {
+      console.error('Failed to delete team:', error);
+      const errorMessage = error.response?.data?.message ||
+                          error.response?.data?.error ||
+                          error.message ||
+                          t('workspace.teams.deleteTeam.error');
+      alert({ alertType: 'error', title: errorMessage });
+    }
+  };
+
+  const openRenameModal = (team: Team) => {
+    if (team.name === 'Internal') {
+      alert({ alertType: 'error', title: t('workspace.teams.cannotRenameInternal') });
+      return;
+    }
+    setSelectedTeam(team);
+    setRenameTeamName(team.name);
+    setRenameModalOpened(true);
+  };
+
+  const openAddMemberModal = async (team: Team) => {
+    if (team.name === 'Internal') {
+      alert({ alertType: 'error', title: t('workspace.teams.cannotAddToInternal') });
+      return;
+    }
+    setSelectedTeam(team);
+    try {
+      // Fetch all users to show in dropdown
+      const users = await userManagementService.getUsers();
+      setAvailableUsers(users);
+      setAddMemberModalOpened(true);
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      alert({ alertType: 'error', title: t('workspace.teams.addMemberToTeam.error') });
+    }
+  };
+
+  const handleAddMember = async () => {
+    if (!selectedTeam || !selectedUserId) {
+      alert({ alertType: 'error', title: t('workspace.teams.addMemberToTeam.userRequired') });
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      await teamService.addUserToTeam(selectedTeam.id, parseInt(selectedUserId));
+      alert({ alertType: 'success', title: t('workspace.teams.addMemberToTeam.success') });
+      setAddMemberModalOpened(false);
+      setSelectedTeam(null);
+      setSelectedUserId('');
+      fetchTeams();
+    } catch (error) {
+      console.error('Failed to add member to team:', error);
+      alert({ alertType: 'error', title: t('workspace.teams.addMemberToTeam.error') });
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  // If viewing team details, render TeamDetailsSection
+  if (viewingTeamId !== null) {
+    return (
+      <TeamDetailsSection
+        teamId={viewingTeamId}
+        onBack={() => {
+          setViewingTeamId(null);
+          fetchTeams(); // Refresh teams list
+        }}
+      />
+    );
+  }
+
+  if (loading) {
+    return (
+      <Stack align="center" py="md">
+        <Loader size="sm" />
+        <Text size="sm" c="dimmed">
+          {t('workspace.teams.loading', 'Loading teams...')}
+        </Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="lg">
+      <div>
+        <Text fw={600} size="lg">
+          {t('workspace.teams.title')}
+        </Text>
+        <Text size="sm" c="dimmed">
+          {t('workspace.teams.description')}
+        </Text>
+      </div>
+
+      {/* Header Actions */}
+      <Group justify="flex-end">
+        <Button leftSection={<LocalIcon icon="add" width="1rem" height="1rem" />} onClick={() => setCreateModalOpened(true)}>
+          {t('workspace.teams.createNewTeam')}
+        </Button>
+      </Group>
+
+      {/* Teams Table */}
+      <Paper withBorder p="md">
+        <Table striped highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{t('workspace.teams.teamName')}</Table.Th>
+              <Table.Th>{t('workspace.teams.totalMembers')}</Table.Th>
+              <Table.Th style={{ width: 50 }}></Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {teams.length === 0 ? (
+              <Table.Tr>
+                <Table.Td colSpan={3}>
+                  <Text ta="center" c="dimmed" py="xl">
+                    {t('workspace.teams.noTeamsFound')}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ) : (
+              teams.map((team) => (
+                <Table.Tr
+                  key={team.id}
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => setViewingTeamId(team.id)}
+                >
+                  <Table.Td>
+                    <Group gap="xs">
+                      <Text size="sm" fw={500}>
+                        {team.name}
+                      </Text>
+                      {team.name === 'Internal' && (
+                        <Badge size="xs" color="gray">
+                          {t('workspace.teams.system')}
+                        </Badge>
+                      )}
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="sm">{team.userCount || 0}</Text>
+                  </Table.Td>
+                  <Table.Td onClick={(e) => e.stopPropagation()}>
+                    <Menu position="bottom-end" withinPortal>
+                      <Menu.Target>
+                        <ActionIcon variant="subtle" color="gray">
+                          <LocalIcon icon="more-vert" width="1rem" height="1rem" />
+                        </ActionIcon>
+                      </Menu.Target>
+                      <Menu.Dropdown style={{ zIndex: Z_INDEX_OVER_CONFIG_MODAL }}>
+                        <Menu.Item leftSection={<LocalIcon icon="visibility" width="1rem" height="1rem" />} onClick={() => setViewingTeamId(team.id)}>
+                          {t('workspace.teams.viewTeam', 'View Team')}
+                        </Menu.Item>
+                        <Menu.Item leftSection={<LocalIcon icon="group" width="1rem" height="1rem" />} onClick={() => openAddMemberModal(team)}>
+                          {t('workspace.teams.addMember')}
+                        </Menu.Item>
+                        <Menu.Item leftSection={<LocalIcon icon="edit" width="1rem" height="1rem" />} onClick={() => openRenameModal(team)}>
+                          {t('workspace.teams.renameTeamLabel')}
+                        </Menu.Item>
+                        <Menu.Divider />
+                        <Menu.Item
+                          color="red"
+                          leftSection={<LocalIcon icon="delete" width="1rem" height="1rem" />}
+                          onClick={() => handleDeleteTeam(team)}
+                          disabled={team.name === 'Internal'}
+                        >
+                          {t('workspace.teams.deleteTeamLabel')}
+                        </Menu.Item>
+                      </Menu.Dropdown>
+                    </Menu>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            )}
+          </Table.Tbody>
+        </Table>
+      </Paper>
+
+      {/* Create Team Modal */}
+      <Modal
+        opened={createModalOpened}
+        onClose={() => setCreateModalOpened(false)}
+        size="md"
+        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        centered
+        padding="xl"
+        withCloseButton={false}
+      >
+        <div style={{ position: 'relative' }}>
+          <CloseButton
+            onClick={() => setCreateModalOpened(false)}
+            size="lg"
+            style={{
+              position: 'absolute',
+              top: '-8px',
+              right: '-8px',
+              zIndex: 1
+            }}
+          />
+          <Stack gap="lg" pt="md">
+            {/* Header with Icon */}
+            <Stack gap="md" align="center">
+              <LocalIcon icon="group-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <Text size="xl" fw={600} ta="center">
+                {t('workspace.teams.createTeam.title')}
+              </Text>
+            </Stack>
+
+            <TextInput
+              label={t('workspace.teams.createTeam.teamName')}
+              placeholder={t('workspace.teams.createTeam.teamNamePlaceholder')}
+              value={newTeamName}
+              onChange={(e) => setNewTeamName(e.currentTarget.value)}
+              required
+            />
+
+            <Button onClick={handleCreateTeam} loading={processing} fullWidth size="md" mt="md">
+              {t('workspace.teams.createTeam.submit')}
+            </Button>
+          </Stack>
+        </div>
+      </Modal>
+
+      {/* Rename Team Modal */}
+      <Modal
+        opened={renameModalOpened}
+        onClose={() => setRenameModalOpened(false)}
+        size="md"
+        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        centered
+        padding="xl"
+        withCloseButton={false}
+      >
+        <div style={{ position: 'relative' }}>
+          <CloseButton
+            onClick={() => setRenameModalOpened(false)}
+            size="lg"
+            style={{
+              position: 'absolute',
+              top: '-8px',
+              right: '-8px',
+              zIndex: 1
+            }}
+          />
+          <Stack gap="lg" pt="md">
+            {/* Header with Icon */}
+            <Stack gap="md" align="center">
+              <LocalIcon icon="edit" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <Text size="xl" fw={600} ta="center">
+                {t('workspace.teams.renameTeam.title')}
+              </Text>
+              <Text size="sm" c="dimmed" ta="center">
+                {t('workspace.teams.renameTeam.renaming')} <strong>{selectedTeam?.name}</strong>
+              </Text>
+            </Stack>
+
+            <TextInput
+              label={t('workspace.teams.renameTeam.newTeamName')}
+              placeholder={t('workspace.teams.renameTeam.newTeamNamePlaceholder')}
+              value={renameTeamName}
+              onChange={(e) => setRenameTeamName(e.currentTarget.value)}
+              required
+            />
+
+            <Button onClick={handleRenameTeam} loading={processing} fullWidth size="md" mt="md">
+              {t('workspace.teams.renameTeam.submit')}
+            </Button>
+          </Stack>
+        </div>
+      </Modal>
+
+      {/* Add Member Modal */}
+      <Modal
+        opened={addMemberModalOpened}
+        onClose={() => setAddMemberModalOpened(false)}
+        size="md"
+        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        centered
+        padding="xl"
+        withCloseButton={false}
+      >
+        <div style={{ position: 'relative' }}>
+          <CloseButton
+            onClick={() => setAddMemberModalOpened(false)}
+            size="lg"
+            style={{
+              position: 'absolute',
+              top: '-8px',
+              right: '-8px',
+              zIndex: 1
+            }}
+          />
+          <Stack gap="lg" pt="md">
+            {/* Header with Icon */}
+            <Stack gap="md" align="center">
+              <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <Text size="xl" fw={600} ta="center">
+                {t('workspace.teams.addMemberToTeam.title')}
+              </Text>
+              <Text size="sm" c="dimmed" ta="center">
+                {t('workspace.teams.addMemberToTeam.addingTo')} <strong>{selectedTeam?.name}</strong>
+              </Text>
+            </Stack>
+
+            <Select
+              label={t('workspace.teams.addMemberToTeam.selectUser')}
+              placeholder={t('workspace.teams.addMemberToTeam.selectUserPlaceholder')}
+              data={availableUsers.map((user) => ({
+                value: user.id.toString(),
+                label: `${user.username}${user.team ? ` (${t('workspace.teams.addMemberToTeam.currentlyIn')} ${user.team.name})` : ''}`,
+              }))}
+              value={selectedUserId}
+              onChange={(value) => setSelectedUserId(value || '')}
+              searchable
+              comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+            />
+
+            {selectedUserId && availableUsers.find((u) => u.id.toString() === selectedUserId)?.team && (
+              <Text size="xs" c="orange">
+                {t('workspace.teams.addMemberToTeam.willBeMoved')}
+              </Text>
+            )}
+
+            <Button onClick={handleAddMember} loading={processing} fullWidth size="md" mt="md">
+              {t('workspace.teams.addMemberToTeam.submit')}
+            </Button>
+          </Stack>
+        </div>
+      </Modal>
+    </Stack>
+  );
+}
diff --git a/frontend/src/components/toast/ToastRenderer.css b/frontend/src/components/toast/ToastRenderer.css
index 9292c05324..09eb9e26c5 100644
--- a/frontend/src/components/toast/ToastRenderer.css
+++ b/frontend/src/components/toast/ToastRenderer.css
@@ -1,7 +1,7 @@
 /* Toast Container Styles */
 .toast-container {
   position: fixed;
-  z-index: 1200;
+  z-index: 10001; /* Always on top - must match Z_INDEX_TOAST in zIndex.ts */
   display: flex;
   gap: 12px;
   pointer-events: none;
diff --git a/frontend/src/hooks/useAppConfig.ts b/frontend/src/hooks/useAppConfig.ts
index 17a6b96db0..27e977788d 100644
--- a/frontend/src/hooks/useAppConfig.ts
+++ b/frontend/src/hooks/useAppConfig.ts
@@ -13,6 +13,7 @@ export interface AppConfig {
   appNameNavbar?: string;
   languages?: string[];
   enableLogin?: boolean;
+  enableEmailInvites?: boolean;
   isAdmin?: boolean;
   enableAlphaFunctionality?: boolean;
   enableAnalytics?: boolean;
diff --git a/frontend/src/routes/Landing.tsx b/frontend/src/routes/Landing.tsx
index 0eb2ba091b..c4ba3a21db 100644
--- a/frontend/src/routes/Landing.tsx
+++ b/frontend/src/routes/Landing.tsx
@@ -1,8 +1,11 @@
+import { useState, useEffect } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
 import { useAuth } from '../auth/UseSession'
 import { useAppConfig } from '../hooks/useAppConfig'
 import HomePage from '../pages/HomePage'
 import Login from './Login'
+import FirstLoginModal from '../components/shared/FirstLoginModal'
+import { accountService } from '../services/accountService'
 
 /**
  * Landing component - Smart router based on authentication status
@@ -12,12 +15,45 @@ import Login from './Login'
  * If user is not authenticated: Show Login or redirect to /login
  */
 export default function Landing() {
-  const { session, loading: authLoading } = useAuth()
+  const { session, loading: authLoading, refreshSession } = useAuth()
   const { config, loading: configLoading } = useAppConfig()
   const location = useLocation()
+  const [isFirstLogin, setIsFirstLogin] = useState(false)
+  const [checkingFirstLogin, setCheckingFirstLogin] = useState(false)
+  const [username, setUsername] = useState('')
 
   const loading = authLoading || configLoading
 
+  // Check if user needs to change password on first login
+  useEffect(() => {
+    const checkFirstLogin = async () => {
+      if (session && config?.enableLogin !== false) {
+        try {
+          setCheckingFirstLogin(true)
+          const accountData = await accountService.getAccountData()
+          setUsername(accountData.username)
+          setIsFirstLogin(accountData.changeCredsFlag)
+        } catch (err) {
+          console.error('Failed to check first login status:', err)
+          // If account endpoint fails (404), user probably doesn't have security enabled
+          setIsFirstLogin(false)
+        } finally {
+          setCheckingFirstLogin(false)
+        }
+      }
+    }
+
+    checkFirstLogin()
+  }, [session, config])
+
+  const handlePasswordChanged = async () => {
+    // After password change, backend logs out the user
+    // Refresh session to detect logout and redirect to login
+    setIsFirstLogin(false) // Close modal first
+    await refreshSession()
+    // The auth system will automatically redirect to login when session is null
+  }
+
   console.log('[Landing] State:', {
     pathname: location.pathname,
     loading,
@@ -26,7 +62,7 @@ export default function Landing() {
   })
 
   // Show loading while checking auth and config
-  if (loading) {
+  if (loading || checkingFirstLogin) {
     return (
       <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <div className="text-center">
@@ -47,7 +83,16 @@ export default function Landing() {
 
   // If we have a session, show the main app
   if (session) {
-    return <HomePage />
+    return (
+      <>
+        <FirstLoginModal
+          opened={isFirstLogin}
+          onPasswordChanged={handlePasswordChanged}
+          username={username}
+        />
+        <HomePage />
+      </>
+    )
   }
 
   // If we're at home route ("/"), show login directly (marketing/landing page)
diff --git a/frontend/src/services/accountService.ts b/frontend/src/services/accountService.ts
new file mode 100644
index 0000000000..e9a9f0a135
--- /dev/null
+++ b/frontend/src/services/accountService.ts
@@ -0,0 +1,34 @@
+import apiClient from './apiClient';
+
+export interface AccountData {
+  username: string;
+  role: string;
+  settings: string; // JSON string of settings
+  changeCredsFlag: boolean;
+  oAuth2Login: boolean;
+  saml2Login: boolean;
+}
+
+/**
+ * Account Service
+ * Provides functions to interact with account-related backend APIs
+ */
+export const accountService = {
+  /**
+   * Get current user account data
+   */
+  async getAccountData(): Promise<AccountData> {
+    const response = await apiClient.get<AccountData>('/api/v1/proprietary/ui-data/account');
+    return response.data;
+  },
+
+  /**
+   * Change user password
+   */
+  async changePassword(currentPassword: string, newPassword: string): Promise<void> {
+    const formData = new FormData();
+    formData.append('currentPassword', currentPassword);
+    formData.append('newPassword', newPassword);
+    await apiClient.post('/api/v1/user/change-password', formData);
+  },
+};
diff --git a/frontend/src/services/httpErrorHandler.ts b/frontend/src/services/httpErrorHandler.ts
index aaea20036c..044af41990 100644
--- a/frontend/src/services/httpErrorHandler.ts
+++ b/frontend/src/services/httpErrorHandler.ts
@@ -88,6 +88,10 @@ const SPECIAL_SUPPRESS_MS = 1500; // brief window to suppress generic duplicate
  * Returns true if the error should be suppressed (deduplicated), false otherwise
  */
 export async function handleHttpError(error: any): Promise<boolean> {
+  // Check if this error should skip the global toast (component will handle it)
+  if (error?.config?.suppressErrorToast === true) {
+    return false; // Don't show global toast, but continue rejection
+  }
   // Compute title/body (friendly) from the error object
   const { title, body } = extractAxiosErrorMessage(error);
 
diff --git a/frontend/src/services/teamService.ts b/frontend/src/services/teamService.ts
new file mode 100644
index 0000000000..25b11cef0b
--- /dev/null
+++ b/frontend/src/services/teamService.ts
@@ -0,0 +1,107 @@
+import apiClient from './apiClient';
+
+export interface Team {
+  id: number;
+  name: string;
+  userCount?: number;
+}
+
+export interface TeamMember {
+  id: number;
+  username: string;
+  email?: string;
+  roleName: string;
+  enabled: boolean;
+  team?: {
+    id: number;
+    name: string;
+  };
+  lastRequest?: Date | null;
+}
+
+export interface TeamDetailsResponse {
+  team: Team;
+  members: TeamMember[];
+  availableUsers: TeamMember[];
+}
+
+/**
+ * Team Management Service
+ * Provides functions to interact with team-related backend APIs
+ */
+export const teamService = {
+  /**
+   * Get all teams with user counts
+   */
+  async getTeams(): Promise<Team[]> {
+    const response = await apiClient.get<{ teamsWithCounts: Team[] }>('/api/v1/proprietary/ui-data/teams');
+    return response.data.teamsWithCounts;
+  },
+
+  /**
+   * Get team details including members
+   */
+  async getTeamDetails(teamId: number): Promise<any> {
+    const response = await apiClient.get(`/api/v1/proprietary/ui-data/teams/${teamId}`);
+    return response.data;
+  },
+
+  /**
+   * Create a new team
+   */
+  async createTeam(name: string): Promise<void> {
+    const formData = new FormData();
+    formData.append('name', name);
+    await apiClient.post('/api/v1/team/create', formData, {
+      suppressErrorToast: true,
+    } as any);
+  },
+
+  /**
+   * Rename an existing team
+   */
+  async renameTeam(teamId: number, newName: string): Promise<void> {
+    const formData = new FormData();
+    formData.append('teamId', teamId.toString());
+    formData.append('newName', newName);
+    await apiClient.post('/api/v1/team/rename', formData, {
+      suppressErrorToast: true,
+    } as any);
+  },
+
+  /**
+   * Delete a team (only if it has no members)
+   */
+  async deleteTeam(teamId: number): Promise<void> {
+    const formData = new FormData();
+    formData.append('teamId', teamId.toString());
+    await apiClient.post('/api/v1/team/delete', formData, {
+      suppressErrorToast: true,
+    } as any);
+  },
+
+  /**
+   * Add a user to a team
+   */
+  async addUserToTeam(teamId: number, userId: number): Promise<void> {
+    const formData = new FormData();
+    formData.append('teamId', teamId.toString());
+    formData.append('userId', userId.toString());
+    await apiClient.post('/api/v1/team/addUser', formData, {
+      suppressErrorToast: true,
+    } as any);
+  },
+
+  /**
+   * Move a user to a specific team (used when "removing" from a team - moves to Default)
+   */
+  async moveUserToTeam(username: string, currentRole: string, teamId: number): Promise<void> {
+    const formData = new FormData();
+    formData.append('username', username);
+    formData.append('role', currentRole);
+    formData.append('teamId', teamId.toString());
+    await apiClient.post('/api/v1/user/admin/changeRole', formData, {
+      suppressErrorToast: true,
+    } as any);
+  },
+};
diff --git a/frontend/src/services/userManagementService.ts b/frontend/src/services/userManagementService.ts
new file mode 100644
index 0000000000..4027acf2c8
--- /dev/null
+++ b/frontend/src/services/userManagementService.ts
@@ -0,0 +1,166 @@
+import apiClient from './apiClient';
+
+export interface User {
+  id: number;
+  username: string;
+  email?: string;
+  roleName: string; // Translation key like "adminUserSettings.admin"
+  rolesAsString?: string; // Actual role ID like "ROLE_ADMIN"
+  enabled: boolean;
+  isFirstLogin?: boolean;
+  authenticationType?: string;
+  team?: {
+    id: number;
+    name: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+  // Enriched client-side fields
+  isActive?: boolean;
+  lastRequest?: number; // timestamp in milliseconds
+}
+
+export interface AdminSettingsData {
+  users: User[];
+  userSessions: Record<string, boolean>;
+  userLastRequest: Record<string, number>; // username -> timestamp in milliseconds
+  totalUsers: number;
+  activeUsers: number;
+  disabledUsers: number;
+  currentUsername?: string;
+  roleDetails?: Record<string, string>;
+  teams?: any[];
+  maxPaidUsers?: number;
+}
+
+export interface CreateUserRequest {
+  username: string;
+  password?: string;
+  role: string;
+  teamId?: number;
+  authType: 'password' | 'SSO';
+  forceChange?: boolean;
+}
+
+export interface UpdateUserRoleRequest {
+  username: string;
+  role: string;
+  teamId?: number;
+}
+
+export interface InviteUsersRequest {
+  emails: string; // Comma-separated email addresses
+  role: string;
+  teamId?: number;
+}
+
+export interface InviteUsersResponse {
+  successCount: number;
+  failureCount: number;
+  message?: string;
+  errors?: string;
+  error?: string;
+}
+
+/**
+ * User Management Service
+ * Provides functions to interact with user management backend APIs
+ */
+export const userManagementService = {
+  /**
+   * Get all users with session data (admin only)
+   */
+  async getUsers(): Promise<AdminSettingsData> {
+    const response = await apiClient.get<AdminSettingsData>('/api/v1/proprietary/ui-data/admin-settings');
+    return response.data;
+  },
+
+  /**
+   * Get users without a team
+   */
+  async getUsersWithoutTeam(): Promise<User[]> {
+    const response = await apiClient.get<User[]>('/api/v1/users/without-team');
+    return response.data;
+  },
+
+  /**
+   * Create a new user (admin only)
+   */
+  async createUser(data: CreateUserRequest): Promise<void> {
+    const formData = new FormData();
+    formData.append('username', data.username);
+    if (data.password) {
+      formData.append('password', data.password);
+    }
+    formData.append('role', data.role);
+    if (data.teamId) {
+      formData.append('teamId', data.teamId.toString());
+    }
+    formData.append('authType', data.authType);
+    if (data.forceChange !== undefined) {
+      formData.append('forceChange', data.forceChange.toString());
+    }
+    await apiClient.post('/api/v1/user/admin/saveUser', formData, {
+      suppressErrorToast: true, // Component will handle error display
+    } as any);
+  },
+
+  /**
+   * Update user role and/or team (admin only)
+   */
+  async updateUserRole(data: UpdateUserRoleRequest): Promise<void> {
+    const formData = new FormData();
+    formData.append('username', data.username);
+    formData.append('role', data.role);
+    if (data.teamId) {
+      formData.append('teamId', data.teamId.toString());
+    }
+    await apiClient.post('/api/v1/user/admin/changeRole', formData, {
+      suppressErrorToast: true,
+    } as any);
+  },
+
+  /**
+   * Enable or disable a user (admin only)
+   */
+  async toggleUserEnabled(username: string, enabled: boolean): Promise<void> {
+    const formData = new FormData();
+    formData.append('enabled', enabled.toString());
+    await apiClient.post(`/api/v1/user/admin/changeUserEnabled/${username}`, formData, {
+      suppressErrorToast: true,
+    } as any);
+  },
+
+  /**
+   * Delete a user (admin only)
+   */
+  async deleteUser(username: string): Promise<void> {
+    await apiClient.post(`/api/v1/user/admin/deleteUser/${username}`, null, {
+      suppressErrorToast: true,
+    } as any);
+  },
+
+  /**
+   * Invite users via email (admin only)
+   * Sends comma-separated email addresses, creates accounts with random passwords,
+   * and sends invitation emails
+   */
+  async inviteUsers(data: InviteUsersRequest): Promise<InviteUsersResponse> {
+    const formData = new FormData();
+    formData.append('emails', data.emails);
+    formData.append('role', data.role);
+    if (data.teamId) {
+      formData.append('teamId', data.teamId.toString());
+    }
+
+    const response = await apiClient.post<InviteUsersResponse>(
+      '/api/v1/user/admin/inviteUsers',
+      formData,
+      {
+        suppressErrorToast: true, // Component will handle error display
+      } as any
+    );
+
+    return response.data;
+  },
+};
diff --git a/frontend/src/styles/zIndex.ts b/frontend/src/styles/zIndex.ts
index adf5f369bc..b24cd17d91 100644
--- a/frontend/src/styles/zIndex.ts
+++ b/frontend/src/styles/zIndex.ts
@@ -12,5 +12,8 @@ export const Z_INDEX_AUTOMATE_MODAL = 1100;
 // Modal that appears on top of config modal (e.g., restart confirmation)
 export const Z_INDEX_OVER_CONFIG_MODAL = 2000;
 
+// Toast notifications and error displays - Always on top (higher than rainbow theme at 10000)
+export const Z_INDEX_TOAST = 10001;
+