diff --git a/backend/src/external_api/css/css.service.ts b/backend/src/external_api/css/css.service.ts
index 540667959..01e28b6d7 100644
--- a/backend/src/external_api/css/css.service.ts
+++ b/backend/src/external_api/css/css.service.ts
@@ -3,6 +3,7 @@ import { ExternalApiService } from "../external-api-service";
 import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 import { get } from "../../helpers/axios-api";
 import { ConfigurationService } from "../../v1/configuration/configuration.service";
+import { CssUser } from "src/types/css/cssUser";
 
 @Injectable()
 export class CssService implements ExternalApiService {
@@ -64,6 +65,24 @@ export class CssService implements ExternalApiService {
     }
   };
 
+  getUserIdirByEmail = async (email: string): Promise<CssUser[]> => {
+    try {
+      const apiToken = await this.authenticate();
+      const url = `${this.baseUri}/api/v1/${this.env}/idir/users?email=${email}`;
+      const config: AxiosRequestConfig = {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${apiToken}`,
+        },
+      };
+      const response = await get(apiToken, url, config);
+      return response?.data.data;
+    } catch (error) {
+      this.logger.error(`exception: unable to get user by email: ${email} - error: ${error}`);
+      throw new Error(`exception: unable to get user by email: ${email} - error: ${error}`);
+    }
+  };
+
   getUserRoles = async (userIdir): Promise<{ name: string; composite: string }[]> => {
     try {
       const apiToken = await this.authenticate();
diff --git a/backend/src/types/css/cssUser.ts b/backend/src/types/css/cssUser.ts
new file mode 100644
index 000000000..83bc71c46
--- /dev/null
+++ b/backend/src/types/css/cssUser.ts
@@ -0,0 +1,11 @@
+export interface CssUser {
+  username: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  attributes: {
+    idir_user_guid: string[];
+    idir_username: string[];
+    display_name: string[];
+  };
+}
diff --git a/backend/src/types/models/general/team-update.ts b/backend/src/types/models/general/team-update.ts
new file mode 100644
index 000000000..c39d1b453
--- /dev/null
+++ b/backend/src/types/models/general/team-update.ts
@@ -0,0 +1,7 @@
+export interface TeamUpdate {
+  userIdir: string;
+  adminIdirUsername: string;
+  agencyCode: string;
+  teamCode: string | null;
+  roles: Array<{ name: string }>;
+}
diff --git a/backend/src/types/models/people/officer.ts b/backend/src/types/models/people/officer.ts
new file mode 100644
index 000000000..e98f0cc9e
--- /dev/null
+++ b/backend/src/types/models/people/officer.ts
@@ -0,0 +1,26 @@
+export interface NewOfficer {
+  user_id: string;
+  create_user_id: string;
+  create_utc_timestamp: Date;
+  update_user_id: string;
+  update_utc_timestamp: Date;
+  auth_user_guid: string;
+  office_guid: string | null;
+  team_code: string | null;
+  person_guid: {
+    first_name: string;
+    middle_name_1: null;
+    middle_name_2: null;
+    last_name: string;
+    create_user_id: string;
+    create_utc_timestamp: Date;
+    update_user_id: string;
+    updateTimestamp: Date;
+  };
+  roles: {
+    user_roles: Array<{ name: string | undefined }>;
+    user_idir: string; //Example : fohe4m5pn8clhkxmlho33sn1r7vr7m67@idir
+  };
+  coms_enrolled_ind: boolean;
+  deactivate_ind: boolean;
+}
diff --git a/backend/src/v1/case_file/case_file.service.spec.ts b/backend/src/v1/case_file/case_file.service.spec.ts
index ae75c772a..a0355b4f5 100644
--- a/backend/src/v1/case_file/case_file.service.spec.ts
+++ b/backend/src/v1/case_file/case_file.service.spec.ts
@@ -72,6 +72,10 @@ import { ConfigurationService } from "../configuration/configuration.service";
 import { Configuration } from "../configuration/entities/configuration.entity";
 import { Person } from "../person/entities/person.entity";
 import { LinkedComplaintXrefService } from "../linked_complaint_xref/linked_complaint_xref.service";
+import { TeamService } from "../team/team.service";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
+import { Team } from "../team/entities/team.entity";
+import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
 
 describe("Testing: Case File Service", () => {
   let service: CaseFileService;
@@ -208,6 +212,14 @@ describe("Testing: Case File Service", () => {
           provide: getRepositoryToken(Person),
           useValue: {},
         },
+        {
+          provide: getRepositoryToken(Team),
+          useValue: {},
+        },
+        {
+          provide: getRepositoryToken(OfficerTeamXref),
+          useValue: {},
+        },
         ComplaintUpdatesService,
         CaseFileService,
         ComplaintService,
@@ -221,6 +233,8 @@ describe("Testing: Case File Service", () => {
         PersonComplaintXrefService,
         AttractantHwcrXrefService,
         CompMthdRecvCdAgcyCdXrefService,
+        TeamService,
+        OfficerTeamXrefService,
         {
           provide: REQUEST,
           useValue: {
diff --git a/backend/src/v1/complaint/complaint.service.spec.ts b/backend/src/v1/complaint/complaint.service.spec.ts
index cf42abcb6..b81827bc8 100644
--- a/backend/src/v1/complaint/complaint.service.spec.ts
+++ b/backend/src/v1/complaint/complaint.service.spec.ts
@@ -82,6 +82,10 @@ import { Person } from "../person/entities/person.entity";
 import { Configuration } from "../configuration/entities/configuration.entity";
 import { LinkedComplaintXrefService } from "../linked_complaint_xref/linked_complaint_xref.service";
 import { LinkedComplaintXref } from "../linked_complaint_xref/entities/linked_complaint_xref.entity";
+import { TeamService } from "../team/team.service";
+import { Team } from "../team/entities/team.entity";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
+import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
 
 describe("Testing: Complaint Service", () => {
   let service: ComplaintService;
@@ -117,6 +121,14 @@ describe("Testing: Complaint Service", () => {
           provide: getRepositoryToken(LinkedComplaintXref),
           useValue: {},
         },
+        {
+          provide: getRepositoryToken(Team),
+          useValue: {},
+        },
+        {
+          provide: getRepositoryToken(OfficerTeamXref),
+          useValue: {},
+        },
         ComplaintUpdatesService,
         ComplaintService,
         PersonComplaintXrefService,
@@ -129,6 +141,8 @@ describe("Testing: Complaint Service", () => {
         AttractantHwcrXrefService,
         CodeTableService,
         CompMthdRecvCdAgcyCdXrefService,
+        TeamService,
+        OfficerTeamXrefService,
         {
           provide: getRepositoryToken(Complaint),
           useFactory: MockComplaintsRepositoryV2,
@@ -410,6 +424,14 @@ describe("Testing: Complaint Service", () => {
           provide: getRepositoryToken(LinkedComplaintXref),
           useValue: {},
         },
+        {
+          provide: getRepositoryToken(Team),
+          useValue: {},
+        },
+        {
+          provide: getRepositoryToken(OfficerTeamXref),
+          useValue: {},
+        },
         ComplaintUpdatesService,
         ComplaintService,
         PersonComplaintXrefService,
@@ -422,6 +444,8 @@ describe("Testing: Complaint Service", () => {
         AttractantHwcrXrefService,
         CodeTableService,
         CompMthdRecvCdAgcyCdXrefService,
+        TeamService,
+        OfficerTeamXrefService,
         {
           provide: getRepositoryToken(Complaint),
           useFactory: MockUpdateComplaintsRepository,
diff --git a/backend/src/v1/document/document.controller.spec.ts b/backend/src/v1/document/document.controller.spec.ts
index d1c7ad775..07acea7ce 100644
--- a/backend/src/v1/document/document.controller.spec.ts
+++ b/backend/src/v1/document/document.controller.spec.ts
@@ -74,6 +74,10 @@ import { CssService } from "../../external_api/css/css.service";
 import { Person } from "../person/entities/person.entity";
 import { LinkedComplaintXref } from "../linked_complaint_xref/entities/linked_complaint_xref.entity";
 import { LinkedComplaintXrefService } from "../linked_complaint_xref/linked_complaint_xref.service";
+import { Team } from "../team/entities/team.entity";
+import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
+import { TeamService } from "../team/team.service";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
 
 describe("DocumentController", () => {
   let controller: DocumentController;
@@ -206,6 +210,14 @@ describe("DocumentController", () => {
           provide: getRepositoryToken(LinkedComplaintXref),
           useValue: {},
         },
+        {
+          provide: getRepositoryToken(Team),
+          useValue: {},
+        },
+        {
+          provide: getRepositoryToken(OfficerTeamXref),
+          useValue: {},
+        },
         ComplaintUpdatesService,
         ComplaintService,
         CodeTableService,
@@ -217,6 +229,8 @@ describe("DocumentController", () => {
         PersonService,
         AttractantHwcrXrefService,
         CompMthdRecvCdAgcyCdXrefService,
+        TeamService,
+        OfficerTeamXrefService,
         {
           provide: REQUEST,
           useValue: {
diff --git a/backend/src/v1/document/document.service.spec.ts b/backend/src/v1/document/document.service.spec.ts
index f6b60a4ed..75fc30e07 100644
--- a/backend/src/v1/document/document.service.spec.ts
+++ b/backend/src/v1/document/document.service.spec.ts
@@ -73,6 +73,10 @@ import { CssService } from "../../external_api/css/css.service";
 import { Person } from "../person/entities/person.entity";
 import { LinkedComplaintXrefService } from "../linked_complaint_xref/linked_complaint_xref.service";
 import { LinkedComplaintXref } from "../linked_complaint_xref/entities/linked_complaint_xref.entity";
+import { Team } from "../team/entities/team.entity";
+import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
+import { TeamService } from "../team/team.service";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
 
 describe("DocumentService", () => {
   let service: DocumentService;
@@ -205,6 +209,14 @@ describe("DocumentService", () => {
           provide: getRepositoryToken(LinkedComplaintXref),
           useValue: {},
         },
+        {
+          provide: getRepositoryToken(Team),
+          useValue: {},
+        },
+        {
+          provide: getRepositoryToken(OfficerTeamXref),
+          useValue: {},
+        },
         ComplaintUpdatesService,
         ComplaintService,
         CodeTableService,
@@ -216,6 +228,8 @@ describe("DocumentService", () => {
         PersonService,
         AttractantHwcrXrefService,
         CompMthdRecvCdAgcyCdXrefService,
+        TeamService,
+        OfficerTeamXrefService,
         {
           provide: REQUEST,
           useValue: {
diff --git a/backend/src/v1/officer/dto/create-officer.dto.ts b/backend/src/v1/officer/dto/create-officer.dto.ts
index 33ecc2fe8..e14ea120d 100644
--- a/backend/src/v1/officer/dto/create-officer.dto.ts
+++ b/backend/src/v1/officer/dto/create-officer.dto.ts
@@ -5,8 +5,11 @@ export class CreateOfficerDto extends PickType(OfficerDto, [
   "user_id",
   "person_guid",
   "office_guid",
+  "auth_user_guid",
   "create_user_id",
   "create_utc_timestamp",
   "update_user_id",
   "update_utc_timestamp",
+  "coms_enrolled_ind",
+  "deactivate_ind",
 ] as const) {}
diff --git a/backend/src/v1/officer/dto/officer.dto.ts b/backend/src/v1/officer/dto/officer.dto.ts
index 8afe04cf4..48434bdd7 100644
--- a/backend/src/v1/officer/dto/officer.dto.ts
+++ b/backend/src/v1/officer/dto/officer.dto.ts
@@ -57,4 +57,16 @@ export class OfficerDto {
     description: "The keycloak guid for the officer",
   })
   auth_user_guid: UUID;
+
+  @ApiProperty({
+    example: "true",
+    description: "An indicator to determine if the officer has access to COMS",
+  })
+  coms_enrolled_ind: boolean;
+
+  @ApiProperty({
+    example: "false",
+    description: "An indicator to determine if the officer has been deactivated",
+  })
+  deactivate_ind: boolean;
 }
diff --git a/backend/src/v1/officer/dto/update-officer.dto.ts b/backend/src/v1/officer/dto/update-officer.dto.ts
index 3c23898bf..77d819844 100644
--- a/backend/src/v1/officer/dto/update-officer.dto.ts
+++ b/backend/src/v1/officer/dto/update-officer.dto.ts
@@ -1,4 +1,6 @@
 import { PartialType } from "@nestjs/swagger";
 import { CreateOfficerDto } from "./create-officer.dto";
 
-export class UpdateOfficerDto extends PartialType(CreateOfficerDto) {}
+export class UpdateOfficerDto extends PartialType(CreateOfficerDto) {
+  user_roles?: string[];
+}
diff --git a/backend/src/v1/officer/entities/officer.entity.ts b/backend/src/v1/officer/entities/officer.entity.ts
index 64b050523..f79fb5f63 100644
--- a/backend/src/v1/officer/entities/officer.entity.ts
+++ b/backend/src/v1/officer/entities/officer.entity.ts
@@ -79,6 +79,13 @@ export class Officer {
   @Column()
   coms_enrolled_ind: boolean;
 
+  @ApiProperty({
+    example: false,
+    description: "Indicates whether an officer has been deactivated",
+  })
+  @Column()
+  deactivate_ind: boolean;
+
   user_roles: string[];
   @AfterLoad()
   updateUserRoles() {
diff --git a/backend/src/v1/officer/officer.controller.spec.ts b/backend/src/v1/officer/officer.controller.spec.ts
index de6231cf9..7e50f58af 100644
--- a/backend/src/v1/officer/officer.controller.spec.ts
+++ b/backend/src/v1/officer/officer.controller.spec.ts
@@ -12,6 +12,10 @@ import { dataSourceMockFactory } from "../../../test/mocks/datasource";
 import { CssService } from "../../external_api/css/css.service";
 import { ConfigurationService } from "../configuration/configuration.service";
 import { Configuration } from "../configuration/entities/configuration.entity";
+import { Team } from "../team/entities/team.entity";
+import { TeamService } from "../team/team.service";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
+import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
 
 describe("OfficerController", () => {
   let controller: OfficerController;
@@ -35,6 +39,16 @@ describe("OfficerController", () => {
           provide: getRepositoryToken(Office),
           useValue: {},
         },
+        TeamService,
+        {
+          provide: getRepositoryToken(Team),
+          useValue: {},
+        },
+        OfficerTeamXrefService,
+        {
+          provide: getRepositoryToken(OfficerTeamXref),
+          useValue: {},
+        },
         {
           provide: DataSource,
           useFactory: dataSourceMockFactory,
diff --git a/backend/src/v1/officer/officer.controller.ts b/backend/src/v1/officer/officer.controller.ts
index 12fc38cc7..86088e875 100644
--- a/backend/src/v1/officer/officer.controller.ts
+++ b/backend/src/v1/officer/officer.controller.ts
@@ -1,6 +1,5 @@
 import { Controller, Get, Post, Body, Patch, Param, Delete, UseGuards, Put } from "@nestjs/common";
 import { OfficerService } from "./officer.service";
-import { CreateOfficerDto } from "./dto/create-officer.dto";
 import { UpdateOfficerDto } from "./dto/update-officer.dto";
 import { Roles } from "../../auth/decorators/roles.decorator";
 import { Role } from "../../enum/role.enum";
@@ -9,6 +8,7 @@ import { ApiTags } from "@nestjs/swagger";
 import { UUID } from "crypto";
 import { User } from "../../auth/decorators/user.decorator";
 import { Token } from "../../auth/decorators/token.decorator";
+import { NewOfficer } from "../../types/models/people/officer";
 
 @ApiTags("officer")
 @UseGuards(JwtRoleGuard)
@@ -21,7 +21,7 @@ export class OfficerController {
 
   @Post()
   @Roles(Role.COS_OFFICER)
-  create(@Body() createOfficerDto: CreateOfficerDto) {
+  create(@Body() createOfficerDto: NewOfficer) {
     return this.officerService.create(createOfficerDto);
   }
 
@@ -61,6 +61,12 @@ export class OfficerController {
     return this.officerService.findByPersonGuid(person_guid);
   }
 
+  @Get("/find-by-email/:email")
+  @Roles(Role.TEMPORARY_TEST_ADMIN)
+  findUserByEmail(@Param("email") email: string) {
+    return this.officerService.findByCssEmail(email);
+  }
+
   @Patch(":id")
   @Roles(Role.COS_OFFICER, Role.CEEB, Role.TEMPORARY_TEST_ADMIN)
   update(@Param("id") id: UUID, @Body() updateOfficerDto: UpdateOfficerDto) {
diff --git a/backend/src/v1/officer/officer.module.ts b/backend/src/v1/officer/officer.module.ts
index 8b4561be9..627fd7141 100644
--- a/backend/src/v1/officer/officer.module.ts
+++ b/backend/src/v1/officer/officer.module.ts
@@ -7,17 +7,23 @@ import { TypeOrmModule } from "@nestjs/typeorm";
 import { Officer } from "./entities/officer.entity";
 import { Person } from "../person/entities/person.entity";
 import { Office } from "../office/entities/office.entity";
-import { CssModule } from "src/external_api/css/css.module";
+import { CssModule } from "../../external_api/css/css.module";
+import { TeamService } from "../team/team.service";
+import { Team } from "../team/entities/team.entity";
+import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
 
 @Module({
   imports: [
     TypeOrmModule.forFeature([Officer]),
     TypeOrmModule.forFeature([Person]),
     TypeOrmModule.forFeature([Office]),
+    TypeOrmModule.forFeature([Team]),
+    TypeOrmModule.forFeature([OfficerTeamXref]),
     CssModule,
   ],
   controllers: [OfficerController],
-  providers: [OfficerService, PersonService, OfficeService],
+  providers: [OfficerService, PersonService, OfficeService, TeamService, OfficerTeamXrefService],
   exports: [OfficerService],
 })
 export class OfficerModule {}
diff --git a/backend/src/v1/officer/officer.service.spec.ts b/backend/src/v1/officer/officer.service.spec.ts
index 7b6e1d82b..31ef3346b 100644
--- a/backend/src/v1/officer/officer.service.spec.ts
+++ b/backend/src/v1/officer/officer.service.spec.ts
@@ -11,6 +11,10 @@ import { dataSourceMockFactory } from "../../../test/mocks/datasource";
 import { CssService } from "../../external_api/css/css.service";
 import { ConfigurationService } from "../configuration/configuration.service";
 import { Configuration } from "../configuration/entities/configuration.entity";
+import { Team } from "../team/entities/team.entity";
+import { TeamService } from "../team/team.service";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
+import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
 
 describe("OfficerService", () => {
   let service: OfficerService;
@@ -33,6 +37,16 @@ describe("OfficerService", () => {
           provide: getRepositoryToken(Office),
           useValue: {},
         },
+        TeamService,
+        {
+          provide: getRepositoryToken(Team),
+          useValue: {},
+        },
+        OfficerTeamXrefService,
+        {
+          provide: getRepositoryToken(OfficerTeamXref),
+          useValue: {},
+        },
         {
           provide: DataSource,
           useFactory: dataSourceMockFactory,
diff --git a/backend/src/v1/officer/officer.service.ts b/backend/src/v1/officer/officer.service.ts
index b9ad26c4b..26c755efb 100644
--- a/backend/src/v1/officer/officer.service.ts
+++ b/backend/src/v1/officer/officer.service.ts
@@ -3,8 +3,6 @@ import { CreateOfficerDto } from "./dto/create-officer.dto";
 import { CreatePersonDto } from "../person/dto/create-person.dto";
 import { UpdateOfficerDto } from "./dto/update-officer.dto";
 import { Officer } from "./entities/officer.entity";
-import { Office } from "../office/entities/office.entity";
-import { AgencyCode } from "../agency_code/entities/agency_code.entity";
 import { InjectRepository } from "@nestjs/typeorm";
 import { DataSource, Repository } from "typeorm";
 import { PersonService } from "../person/person.service";
@@ -13,18 +11,28 @@ import { UUID } from "crypto";
 import { CssService } from "../../external_api/css/css.service";
 import { Role } from "../../enum/role.enum";
 import { put } from "../../helpers/axios-api";
+import { CssUser } from "../../types/css/cssUser";
+import { CreateOfficerTeamXrefDto } from "../officer_team_xref/dto/create-officer_team_xref.dto";
+import { TeamService } from "../team/team.service";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
+import { NewOfficer } from "../../types/models/people/officer";
 
 @Injectable()
 export class OfficerService {
   private readonly logger = new Logger(OfficerService.name);
 
-  constructor(private dataSource: DataSource) {}
+  constructor(private readonly dataSource: DataSource) {}
   @InjectRepository(Officer)
-  private officerRepository: Repository<Officer>;
+  private readonly officerRepository: Repository<Officer>;
+
   @Inject(PersonService)
   protected readonly personService: PersonService;
   @Inject(OfficeService)
   protected readonly officeService: OfficeService;
+  @Inject(TeamService)
+  protected readonly teamService: TeamService;
+  @Inject(OfficerTeamXrefService)
+  protected readonly officerTeamXrefService: OfficerTeamXrefService;
   @Inject(CssService)
   private readonly cssService: CssService;
 
@@ -55,6 +63,8 @@ export class OfficerService {
           update_user_id: officer.update_user_id,
           update_utc_timestamp: officer.update_utc_timestamp,
           auth_user_guid: officer.auth_user_guid,
+          coms_enrolled_ind: officer.coms_enrolled_ind,
+          deactivate_ind: officer.deactivate_ind,
           user_roles: roleMapping[useGuid] ?? [],
         } as Officer;
       });
@@ -93,6 +103,20 @@ export class OfficerService {
     });
   }
 
+  async findByCssEmail(email: string): Promise<CssUser | Officer | null> {
+    const cssUser = await this.cssService.getUserIdirByEmail(email);
+    if (cssUser.length === 0) return null;
+    if (cssUser.length > 0) {
+      //assume email is unique and return only 1 result
+      const officer = await this.findByAuthUserGuid(cssUser[0].attributes.idir_user_guid[0]);
+      //if user already exists in officer table, then return officer data
+      if (officer) {
+        return officer;
+      }
+    }
+    return cssUser[0];
+  }
+
   async findByUserId(userid: string): Promise<Officer> {
     userid = userid.toUpperCase();
     return this.officerRepository.findOne({
@@ -119,60 +143,75 @@ export class OfficerService {
     });
   }
 
-  async create(officer: any): Promise<Officer> {
+  async create(officer: NewOfficer): Promise<Officer> {
     const queryRunner = this.dataSource.createQueryRunner();
 
     await queryRunner.connect();
     await queryRunner.startTransaction();
-    let newOfficerString;
-    let officeObject;
+    let newOfficerObject;
     let personObject;
 
     try {
-      //Look for the Office
-      officeObject = await this.officeService.findByGeoOrgCode(officer.geo_organization_unit_code);
-      if (officeObject.length === 0) {
-        // insertOffice
-
-        let agencyObject = new AgencyCode("COS");
-        let officeObject = new Office();
-
-        officeObject.agency_code = agencyObject;
-        officeObject.cos_geo_org_unit = officer.geo_organization_unit_code;
-        officeObject.create_user_id = officer.create_user_id;
-        officeObject.create_utc_timestamp = officer.create_utc_timestamp;
-        officeObject.update_user_id = officer.update_user_id;
-        officeObject.update_utc_timestamp = officer.update_utc_timestamp;
-
-        officeObject = await this.officeService.create(officeObject);
-        officer.office_guid = officeObject.office_guid;
-      } else {
-        // use the existing one
-        officer.office_guid = officeObject[0].office_guid;
-      }
-
       //Will always insert the person
-      personObject = await this.personService.createInTransaction(<CreatePersonDto>officer, queryRunner);
+      personObject = await this.personService.createInTransaction(
+        <CreatePersonDto>(<unknown>officer.person_guid),
+        queryRunner,
+      );
       officer.person_guid = personObject.person_guid;
 
-      newOfficerString = await this.officerRepository.create(<CreateOfficerDto>officer);
-      await queryRunner.manager.save(newOfficerString);
+      newOfficerObject = this.officerRepository.create(<CreateOfficerDto>(<unknown>officer));
+      await queryRunner.manager.save(newOfficerObject);
+
+      //Create team
+      if (officer.team_code) {
+        const teamGuid = await this.teamService.findByTeamCodeAndAgencyCode(officer.team_code, "EPO");
+        const teamEntity = {
+          officer_guid: newOfficerObject.officer_guid,
+          team_guid: teamGuid,
+          active_ind: true,
+          create_user_id: officer.create_user_id,
+          update_user_id: officer.update_user_id,
+        };
+        await this.officerTeamXrefService.createInTransaction(<CreateOfficerTeamXrefDto>teamEntity, queryRunner);
+      }
       await queryRunner.commitTransaction();
+
+      //Create roles
+      await this.cssService.updateUserRole(officer.roles.user_idir, officer.roles.user_roles);
     } catch (err) {
       this.logger.error(err);
+      //rollback all transactions
       await queryRunner.rollbackTransaction();
-      newOfficerString = "Error Occured";
+      newOfficerObject = null;
+      //remove all css roles
+      for await (const roleItem of officer.roles.user_roles) {
+        await this.cssService.deleteUserRole(officer.roles.user_idir, roleItem.name);
+      }
     } finally {
       await queryRunner.release();
     }
-    return newOfficerString;
+    return newOfficerObject;
   }
 
   async update(officer_guid: UUID, updateOfficerDto: UpdateOfficerDto): Promise<Officer> {
+    const userRoles = updateOfficerDto.user_roles;
     //exclude roles field populated from keycloak from update
     delete (updateOfficerDto as any).user_roles;
-    await this.officerRepository.update({ officer_guid }, updateOfficerDto);
-    return this.findOne(officer_guid);
+
+    try {
+      await this.officerRepository.update({ officer_guid }, updateOfficerDto);
+
+      //remove all roles if deactivate_ind is true
+      if (updateOfficerDto.deactivate_ind === true) {
+        const officerIdirUsername = `${updateOfficerDto.auth_user_guid.split("-").join("")}@idir`;
+        for await (const roleItem of userRoles) {
+          await this.cssService.deleteUserRole(officerIdirUsername, roleItem);
+        }
+      }
+      return this.findOne(officer_guid);
+    } catch (e) {
+      this.logger.error(e);
+    }
   }
 
   /**
diff --git a/backend/src/v1/officer/officer.service.v2.spec.ts b/backend/src/v1/officer/officer.service.v2.spec.ts
index e796ac6da..38434614b 100644
--- a/backend/src/v1/officer/officer.service.v2.spec.ts
+++ b/backend/src/v1/officer/officer.service.v2.spec.ts
@@ -18,6 +18,10 @@ import { ConfigurationService } from "../configuration/configuration.service";
 import { Configuration } from "../configuration/entities/configuration.entity";
 import { MockRoleRepository } from "../../../test/mocks/mock-role-repository";
 import { REQUEST } from "@nestjs/core";
+import { Team } from "../team/entities/team.entity";
+import { TeamService } from "../team/team.service";
+import { OfficerTeamXrefService } from "../officer_team_xref/officer_team_xref.service";
+import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
 
 describe("Testing: OfficerService", () => {
   let service: OfficerService;
@@ -54,6 +58,16 @@ describe("Testing: OfficerService", () => {
           provide: getRepositoryToken(Configuration),
           useValue: {},
         },
+        TeamService,
+        {
+          provide: getRepositoryToken(Team),
+          useValue: {},
+        },
+        OfficerTeamXrefService,
+        {
+          provide: getRepositoryToken(OfficerTeamXref),
+          useValue: {},
+        },
       ],
     })
       .compile()
diff --git a/backend/src/v1/officer_team_xref/dto/create-officer_team_xref.dto.ts b/backend/src/v1/officer_team_xref/dto/create-officer_team_xref.dto.ts
index 70b9261a6..8404e8e22 100644
--- a/backend/src/v1/officer_team_xref/dto/create-officer_team_xref.dto.ts
+++ b/backend/src/v1/officer_team_xref/dto/create-officer_team_xref.dto.ts
@@ -2,7 +2,6 @@ import { PickType } from "@nestjs/swagger";
 import { OfficerTeamXrefDto } from "./officer_team_xref.dto";
 
 export class CreateOfficerTeamXrefDto extends PickType(OfficerTeamXrefDto, [
-  "officer_team_xref_guid",
   "officer_guid",
   "team_guid",
   "create_user_id",
diff --git a/backend/src/v1/officer_team_xref/officer_team_xref.service.ts b/backend/src/v1/officer_team_xref/officer_team_xref.service.ts
index 910656673..c83557013 100644
--- a/backend/src/v1/officer_team_xref/officer_team_xref.service.ts
+++ b/backend/src/v1/officer_team_xref/officer_team_xref.service.ts
@@ -1,23 +1,45 @@
-import { Inject, Injectable, Logger } from "@nestjs/common";
+import { Injectable, Logger } from "@nestjs/common";
 import { CreateOfficerTeamXrefDto } from "./dto/create-officer_team_xref.dto";
 import { UpdateOfficerTeamXrefDto } from "./dto/update-officer_team_xref.dto";
 import { OfficerTeamXref } from "./entities/officer_team_xref.entity";
 import { DataSource, QueryRunner, Repository } from "typeorm";
 import { InjectRepository } from "@nestjs/typeorm";
-import { REQUEST } from "@nestjs/core";
 
 @Injectable()
 export class OfficerTeamXrefService {
   private readonly logger = new Logger(OfficerTeamXrefService.name);
   @InjectRepository(OfficerTeamXref)
-  private officerTeamXrefRepository: Repository<OfficerTeamXref>;
+  private readonly officerTeamXrefRepository: Repository<OfficerTeamXref>;
 
-  constructor(@Inject(REQUEST) private request: Request, private dataSource: DataSource) {}
+  constructor(private readonly dataSource: DataSource) {}
 
-  async create(queryRunner: QueryRunner, createOfficerTeamXrefDto: CreateOfficerTeamXrefDto) {
-    const createdValue = await this.officerTeamXrefRepository.create(createOfficerTeamXrefDto);
-    queryRunner.manager.save(createdValue);
-    return createdValue;
+  async create(newOfficerTeamXref: CreateOfficerTeamXrefDto): Promise<OfficerTeamXref> {
+    const queryRunner = this.dataSource.createQueryRunner();
+
+    await queryRunner.connect();
+    await queryRunner.startTransaction();
+    let result;
+    try {
+      result = this.officerTeamXrefRepository.create(newOfficerTeamXref);
+      await queryRunner.manager.save(result);
+      await queryRunner.commitTransaction();
+    } catch (err) {
+      this.logger.error(err);
+      await queryRunner.rollbackTransaction();
+      result = null;
+    } finally {
+      await queryRunner.release();
+    }
+    return result;
+  }
+
+  async createInTransaction(
+    officerTeamXref: CreateOfficerTeamXrefDto,
+    queryRunner: QueryRunner,
+  ): Promise<OfficerTeamXref> {
+    const newTeam = this.officerTeamXrefRepository.create(officerTeamXref);
+    await queryRunner.manager.save(newTeam);
+    return newTeam;
   }
 
   async findAll(): Promise<OfficerTeamXref[]> {
diff --git a/backend/src/v1/person/person.service.ts b/backend/src/v1/person/person.service.ts
index 0f18dea43..87e8ee35a 100644
--- a/backend/src/v1/person/person.service.ts
+++ b/backend/src/v1/person/person.service.ts
@@ -10,9 +10,9 @@ import { UUID } from "crypto";
 export class PersonService {
   private readonly logger = new Logger(PersonService.name);
 
-  constructor(private dataSource: DataSource) {}
+  constructor(private readonly dataSource: DataSource) {}
   @InjectRepository(Person)
-  private personRepository: Repository<Person>;
+  private readonly personRepository: Repository<Person>;
 
   async create(person: any): Promise<Person> {
     const queryRunner = this.dataSource.createQueryRunner();
@@ -21,7 +21,7 @@ export class PersonService {
     await queryRunner.startTransaction();
     let newPersonString;
     try {
-      newPersonString = await this.personRepository.create(<CreatePersonDto>person);
+      newPersonString = this.personRepository.create(<CreatePersonDto>person);
       await queryRunner.manager.save(newPersonString);
       await queryRunner.commitTransaction();
     } catch (err) {
@@ -35,7 +35,7 @@ export class PersonService {
   }
 
   async createInTransaction(person: CreatePersonDto, queryRunner: QueryRunner): Promise<Person> {
-    const newPerson = await this.personRepository.create(person);
+    const newPerson = this.personRepository.create(person);
     await queryRunner.manager.save(newPerson);
     return newPerson;
   }
diff --git a/backend/src/v1/team/team.controller.spec.ts b/backend/src/v1/team/team.controller.spec.ts
index 35edefb9c..822de1f37 100644
--- a/backend/src/v1/team/team.controller.spec.ts
+++ b/backend/src/v1/team/team.controller.spec.ts
@@ -9,6 +9,7 @@ import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref
 import { CssService } from "../../external_api/css/css.service";
 import { ConfigurationService } from "../configuration/configuration.service";
 import { Configuration } from "../configuration/entities/configuration.entity";
+import { Officer } from "../officer/entities/officer.entity";
 
 describe("TeamController", () => {
   let controller: TeamController;
@@ -26,6 +27,10 @@ describe("TeamController", () => {
           provide: getRepositoryToken(OfficerTeamXref),
           useValue: {},
         },
+        {
+          provide: getRepositoryToken(Officer),
+          useValue: {},
+        },
         {
           provide: DataSource,
           useFactory: dataSourceMockFactory,
diff --git a/backend/src/v1/team/team.controller.ts b/backend/src/v1/team/team.controller.ts
index 29f0d092a..671687e49 100644
--- a/backend/src/v1/team/team.controller.ts
+++ b/backend/src/v1/team/team.controller.ts
@@ -5,6 +5,7 @@ import { UUID } from "crypto";
 import { Roles } from "../../auth/decorators/roles.decorator";
 import { Role } from "../../enum/role.enum";
 import { JwtRoleGuard } from "../../auth/jwtrole.guard";
+import { TeamUpdate } from "src/types/models/general/team-update";
 
 @UseGuards(JwtRoleGuard)
 @ApiTags("team")
@@ -23,37 +24,13 @@ export class TeamController {
 
   @Get("current")
   @Roles(Role.TEMPORARY_TEST_ADMIN)
-  async findCurrentTeamAndRole(@Query("userIdir") userIdir: string, @Query("officerGuid") officerGuid: UUID) {
-    let result = {
-      agency: null,
-      team: null,
-      roles: null,
-    };
-    const currentRoles = await this.teamService.findUserCurrentRoles(userIdir);
-    result.roles = currentRoles;
-    const hasCEEBRole = currentRoles.findIndex(
-      (role) =>
-        role.name === Role.CEEB ||
-        role.name === Role.CEEB_COMPLIANCE_COORDINATOR ||
-        role.name === Role.CEEB_SECTION_HEAD,
-    );
-    if (hasCEEBRole > -1) {
-      result.agency = "EPO";
-      result.team = await this.teamService.findUserCurrentTeam(officerGuid);
-    }
-
-    const hasCOSRole = currentRoles.findIndex(
-      (role: any) => role.name === Role.COS_ADMINISTRATOR || role.name === Role.COS_OFFICER,
-    );
-    if (hasCOSRole > -1) {
-      result.agency = "COS";
-    }
-    return result;
+  async findCurrentTeam(@Query("officerGuid") officerGuid: UUID) {
+    return await this.teamService.findUserCurrentTeam(officerGuid);
   }
 
   @Patch("update/:officer_guid")
   @Roles(Role.TEMPORARY_TEST_ADMIN)
-  update(@Param("officer_guid") officerGuid: UUID, @Body() updateTeamData: any) {
+  update(@Param("officer_guid") officerGuid: UUID, @Body() updateTeamData: TeamUpdate) {
     return this.teamService.update(officerGuid, updateTeamData);
   }
 }
diff --git a/backend/src/v1/team/team.module.ts b/backend/src/v1/team/team.module.ts
index e53b179f3..85450b5b1 100644
--- a/backend/src/v1/team/team.module.ts
+++ b/backend/src/v1/team/team.module.ts
@@ -5,9 +5,15 @@ import { TypeOrmModule } from "@nestjs/typeorm";
 import { Team } from "./entities/team.entity";
 import { CssModule } from "../../external_api/css/css.module";
 import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
+import { Officer } from "../officer/entities/officer.entity";
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Team]), TypeOrmModule.forFeature([OfficerTeamXref]), CssModule],
+  imports: [
+    TypeOrmModule.forFeature([Team]),
+    TypeOrmModule.forFeature([OfficerTeamXref]),
+    CssModule,
+    TypeOrmModule.forFeature([Officer]),
+  ],
   controllers: [TeamController],
   providers: [TeamService],
   exports: [TeamService],
diff --git a/backend/src/v1/team/team.service.spec.ts b/backend/src/v1/team/team.service.spec.ts
index 1350ce57f..41f59632a 100644
--- a/backend/src/v1/team/team.service.spec.ts
+++ b/backend/src/v1/team/team.service.spec.ts
@@ -8,6 +8,7 @@ import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref
 import { CssService } from "../../external_api/css/css.service";
 import { ConfigurationService } from "../configuration/configuration.service";
 import { Configuration } from "../configuration/entities/configuration.entity";
+import { Officer } from "..//officer/entities/officer.entity";
 
 describe("TeamService", () => {
   let service: TeamService;
@@ -24,6 +25,10 @@ describe("TeamService", () => {
           provide: getRepositoryToken(OfficerTeamXref),
           useValue: {},
         },
+        {
+          provide: getRepositoryToken(Officer),
+          useValue: {},
+        },
         {
           provide: DataSource,
           useFactory: dataSourceMockFactory,
diff --git a/backend/src/v1/team/team.service.ts b/backend/src/v1/team/team.service.ts
index 3d88aef39..2fc43fd54 100644
--- a/backend/src/v1/team/team.service.ts
+++ b/backend/src/v1/team/team.service.ts
@@ -1,19 +1,26 @@
 import { Inject, Injectable, Logger } from "@nestjs/common";
 import { Team } from "./entities/team.entity";
-import { Repository } from "typeorm";
+import { DataSource, Repository } from "typeorm";
 import { InjectRepository } from "@nestjs/typeorm";
 import { CssService } from "../../external_api/css/css.service";
 import { OfficerTeamXref } from "../officer_team_xref/entities/officer_team_xref.entity";
 import { Role } from "../../enum/role.enum";
+import { TeamUpdate } from "../../types/models/general/team-update";
+import { Officer } from "../officer/entities/officer.entity";
 
 @Injectable()
 export class TeamService {
   private readonly logger = new Logger(TeamService.name);
 
+  constructor(private readonly dataSource: DataSource) {}
+
   @InjectRepository(Team)
-  private teamRepository: Repository<Team>;
+  private readonly teamRepository: Repository<Team>;
   @InjectRepository(OfficerTeamXref)
-  private officerTeamXrefRepository: Repository<OfficerTeamXref>;
+  private readonly officerTeamXrefRepository: Repository<OfficerTeamXref>;
+  @InjectRepository(Officer)
+  private readonly officerRepository: Repository<Officer>;
+
   @Inject(CssService)
   private readonly cssService: CssService;
 
@@ -61,26 +68,18 @@ export class TeamService {
   }
 
   async findUserCurrentTeam(officerGuid) {
-    const officerTeamXref = await this.officerTeamXrefRepository.findOne({
+    return await this.officerTeamXrefRepository.findOne({
       where: { officer_guid: officerGuid },
       relations: { team_guid: { team_code: true } },
     });
-    if (officerTeamXref) {
-      return {
-        value: officerTeamXref.team_guid.team_code.team_code,
-        label: officerTeamXref.team_guid.team_code.short_description,
-      };
-    } else {
-      return null;
-    }
   }
 
-  async update(officerGuid, updateTeamData) {
+  async update(officerGuid, updateTeamData: TeamUpdate) {
     let result = {
       team: false,
       roles: false,
     };
-    const { teamCode, agencyCode, userIdir, roles: updateRoles } = updateTeamData;
+    const { teamCode, agencyCode, userIdir, roles: updateRoles, adminIdirUsername } = updateTeamData;
     try {
       //Update team
       //Assume one officer belong to one team for now
@@ -95,11 +94,14 @@ export class TeamService {
         }
       } else {
         const teamGuid = await this.findByTeamCodeAndAgencyCode(teamCode, agencyCode);
+        //set user's office_guid to null because CEEB user doesn't have an office
+        await this.officerRepository.update({ officer_guid: officerGuid }, { office_guid: null });
+
         if (officerTeamXref) {
           const updateEnity = {
             team_guid: teamGuid,
             active_ind: true,
-            update_user_id: "postgres",
+            update_user_id: adminIdirUsername,
           };
           const updateResult = await this.officerTeamXrefRepository.update({ officer_guid: officerGuid }, updateEnity);
           if (updateResult.affected > 0) {
@@ -111,10 +113,10 @@ export class TeamService {
             officer_guid: officerGuid,
             team_guid: teamGuid,
             active_ind: true,
-            create_user_id: "postgres",
-            update_user_id: "postgres",
+            create_user_id: adminIdirUsername,
+            update_user_id: adminIdirUsername,
           };
-          const newRecord = await this.officerTeamXrefRepository.create(newEntity);
+          const newRecord = this.officerTeamXrefRepository.create(newEntity);
           const saveResult = await this.officerTeamXrefRepository.save(newRecord);
           if (saveResult.officer_guid) {
             result.team = true;
@@ -126,8 +128,8 @@ export class TeamService {
       const currentRoles: any = await this.cssService.getUserRoles(userIdir);
       for await (const roleItem of currentRoles) {
         const rolesMatchWithUpdate = updateRoles.some((updateRole) => updateRole.name === roleItem.name);
-        //Remove existing roles that do not match with updated roles, but still keeps Admin and Read only role
-        if (roleItem.name !== Role.TEMPORARY_TEST_ADMIN && roleItem.name !== Role.READ_ONLY && !rolesMatchWithUpdate) {
+        //Remove existing roles that do not match with updated roles, but still keeps Admin role
+        if (roleItem.name !== Role.TEMPORARY_TEST_ADMIN && !rolesMatchWithUpdate) {
           await this.cssService.deleteUserRole(userIdir, roleItem.name);
         }
       }
diff --git a/backend/test/mocks/personRepositoryMockFactory.ts b/backend/test/mocks/personRepositoryMockFactory.ts
index e5094a98e..d75f90a2f 100644
--- a/backend/test/mocks/personRepositoryMockFactory.ts
+++ b/backend/test/mocks/personRepositoryMockFactory.ts
@@ -47,14 +47,14 @@ export const PersonRepositoryMockFactory = () => ({
   }),
   create: jest
     .fn()
-    .mockResolvedValueOnce({
+    .mockReturnValueOnce({
       person_guid: "8a5131e6-1dd0-484d-8cdc-78ba205dfac8",
       first_name: "Miss",
       middle_name_1: "Jane",
       middle_name_2: null,
       last_name: "Marple",
     })
-    .mockRejectedValueOnce(new Error("Simulated error")),
+    .mockReturnValueOnce(new Error("Simulated error")),
   // as these do not actually use their return values in our tests
   // we just make sure that their resolve is true to not crash
   save: jest.fn(() => {
diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
index b7bd324ed..04ca489cd 100644
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@@ -16,7 +16,7 @@ import { ComplaintsWrapper } from "./components/containers/complaints/complaints
 import COMPLAINT_TYPES from "./types/app/complaint-types";
 import { getCodeTableVersion, getConfigurations, getFeatureFlag, getOfficerDefaultZone } from "./store/reducers/app";
 import { CreateComplaint } from "./components/containers/complaints/details/complaint-details-create";
-import { UserManagement } from "./components/containers/admin/user-management";
+import { UserManagement } from "@components/containers/admin/user-management";
 import UserService from "./service/user-service";
 import GenericErrorBoundary from "./components/error-handling/generic-error-boundary";
 import { VerifyAccess } from "./components/containers/pages/verify-access";
diff --git a/frontend/src/app/common/validation-multiselect.tsx b/frontend/src/app/common/validation-multiselect.tsx
index 1b4714289..b1106ad90 100644
--- a/frontend/src/app/common/validation-multiselect.tsx
+++ b/frontend/src/app/common/validation-multiselect.tsx
@@ -12,6 +12,7 @@ interface ValidationMultiSelectProps {
   onChange: Function;
   errMsg: string;
   values?: Option[];
+  isDisabled?: boolean;
 }
 
 export const ValidationMultiSelect: FC<ValidationMultiSelectProps> = ({
@@ -24,6 +25,7 @@ export const ValidationMultiSelect: FC<ValidationMultiSelectProps> = ({
   onChange,
   errMsg,
   values,
+  isDisabled = false,
 }) => {
   const errClass = errMsg === "" ? "" : "error-message";
   const calulatedClass = errMsg === "" ? "" : "error-border";
@@ -42,6 +44,7 @@ export const ValidationMultiSelect: FC<ValidationMultiSelectProps> = ({
           defaultValue={defaultValue}
           value={values}
           isMulti
+          isDisabled={isDisabled}
         />
       </div>
       <div className={errClass}>{errMsg}</div>
diff --git a/frontend/src/app/components/containers/admin/user-management.tsx b/frontend/src/app/components/containers/admin/user-management.tsx
deleted file mode 100644
index ec5786333..000000000
--- a/frontend/src/app/components/containers/admin/user-management.tsx
+++ /dev/null
@@ -1,437 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import { Button } from "react-bootstrap";
-import { useAppDispatch, useAppSelector } from "@hooks/hooks";
-import { assignOfficerToOffice, selectOfficersDropdown } from "@store/reducers/officer";
-import { CompSelect } from "@components/common/comp-select";
-import Option from "@apptypes/app/option";
-import { fetchOfficeAssignments, selectOfficesForAssignmentDropdown, selectOffices } from "@store/reducers/office";
-import { ToastContainer } from "react-toastify";
-import { ToggleError, ToggleSuccess } from "@common/toast";
-import { clearNotification, selectNotification } from "@store/reducers/app";
-import { selectAgencyDropdown, selectTeamDropdown } from "@store/reducers/code-table";
-import { CEEB_ROLE_OPTIONS } from "@constants/ceeb-roles";
-import { generateApiParameters, get, patch } from "@common/api";
-import config from "@/config";
-import { Officer } from "@apptypes/person/person";
-import { UUID } from "crypto";
-import { ValidationMultiSelect } from "@common/validation-multiselect";
-
-export const UserManagement: FC = () => {
-  const dispatch = useAppDispatch();
-  const officers = useAppSelector(selectOfficersDropdown(true));
-  const officeAssignments = useAppSelector(selectOfficesForAssignmentDropdown);
-  const notification = useAppSelector(selectNotification);
-  const teams = useAppSelector(selectTeamDropdown);
-  const agency = useAppSelector(selectAgencyDropdown);
-
-  const availableOffices = useAppSelector(selectOffices);
-
-  const [officer, setOfficer] = useState<Option>();
-  const [officerError, setOfficerError] = useState<string>("");
-  const [office, setOffice] = useState<Option>();
-  const [officeError, setOfficeError] = useState<string>("");
-  const [selectedAgency, setSelectedAgency] = useState<Option | null>();
-  const [selectedTeam, setSelectedTeam] = useState<Option>();
-  const [selectedRoles, setSelectedRoles] = useState<Array<Option>>();
-  const [userIdirs, setUserIdirs] = useState<any[]>([]);
-  const [selectedUserIdir, setSelectedUserIdir] = useState<string>("");
-  const [officerGuid, setOfficerGuid] = useState<string>("");
-  const [offices, setOffices] = useState<Array<Option>>([]);
-
-  useEffect(() => {
-    if (officeAssignments) {
-      dispatch(fetchOfficeAssignments());
-      let options = availableOffices.map((item) => {
-        const { id, name, agency } = item;
-        const record: Option = {
-          label: `${agency} - ${name}`,
-          value: id,
-        };
-
-        return record;
-      });
-      setOffices(options);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
-
-  useEffect(() => {
-    const { type } = notification;
-    if (type !== "") {
-      dispatch(clearNotification());
-    }
-  }, [dispatch, notification]);
-
-  useEffect(() => {
-    (async () => {
-      if (officerGuid && selectedUserIdir && agency) {
-        const current = await getUserCurrentSetting(selectedUserIdir, officerGuid);
-        const currentUserAgency = mapAgencyDropDown(current.agency, agency);
-        setSelectedAgency(currentUserAgency);
-        if (current.agency === "EPO") setSelectedTeam(current.team);
-        if (current.roles) {
-          const currentUserRoles = mapRolesDropdown(current.roles);
-          setSelectedRoles(currentUserRoles);
-        }
-
-        if (current.agency) {
-          let filtered = availableOffices
-            .filter((item) => item.code === current.agency)
-            .map((item) => {
-              const { id, name, agency } = item;
-              const record: Option = {
-                label: `${agency} - ${name}`,
-                value: id,
-              };
-
-              return record;
-            });
-
-          setOffices(filtered);
-        }
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [officerGuid, selectedUserIdir]);
-
-  const mapRolesDropdown = (userRoles: any): Option[] => {
-    let result: Option[] = [];
-    CEEB_ROLE_OPTIONS.forEach((roleOption) => {
-      const found = userRoles.some((role: any) => role.name === roleOption.value);
-      if (found) result.push(roleOption);
-    });
-    return result;
-  };
-
-  const mapAgencyDropDown = (userAgency: any, agencyList: Option[]) => {
-    const result = agencyList.find((agencyItem: Option) => agencyItem.value === userAgency);
-    return result ?? null;
-  };
-
-  const getUserIdir = async (person_guid: string, lastName: string, firstName: string) => {
-    const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/officer/find-by-person-guid/${person_guid}`);
-    const officerRes = await get<Officer>(dispatch, parameters);
-    setOfficerGuid(officerRes.officer_guid);
-    if (officerRes.auth_user_guid) {
-      setSelectedUserIdir(`${officerRes.auth_user_guid.split("-").join("")}@idir`);
-    } else {
-      const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/team/find-user`, { firstName, lastName });
-      const response: any = await get(dispatch, parameters);
-      if (response.length === 0) setOfficerError("Cannot find user idir.");
-      else if (response.length === 1) {
-        setSelectedUserIdir(response[0].username);
-        await updateUserIdirByOfficerId(response[0].username.split("@")[0], officerRes.officer_guid);
-      } else setUserIdirs(response);
-    }
-  };
-
-  const getUserCurrentSetting = async (userIdir: any, officerGuid: any) => {
-    const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/team/current`, { userIdir, officerGuid });
-    const response: any = await get(dispatch, parameters);
-    return response;
-  };
-
-  const updateUserIdirByOfficerId = async (userIdir: string, officerGuid: string) => {
-    const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/officer/${officerGuid}`, {
-      auth_user_guid: userIdir as UUID,
-    });
-    const response = await patch<Officer>(dispatch, parameters);
-    if (!response.auth_user_guid) {
-      setOfficerError("Error updating officer idir.");
-    }
-  };
-
-  const updateTeamRole = async (
-    userIdir: string,
-    officerGuid: string,
-    agencyCode: string | undefined,
-    teamCode: string | undefined | null,
-    roles: Array<{ name: string | undefined }> | undefined,
-  ) => {
-    const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/team/update/${officerGuid}`, {
-      userIdir,
-      agencyCode,
-      teamCode,
-      roles,
-    });
-    const response: any = await patch(dispatch, parameters);
-    return response;
-  };
-
-  const handleOfficerChange = async (input: any) => {
-    resetSelect();
-    if (input.value) {
-      setOfficer(input);
-      const lastName = input.label.split(",")[0];
-      const firstName = input.label.split(",")[1].trim();
-      await getUserIdir(input.value, lastName, firstName);
-    }
-  };
-
-  const handleOfficeChange = (input: any) => {
-    if (input.value) {
-      setOffice(input);
-    }
-  };
-  const handleAgencyChange = (input: any) => {
-    if (input.value) {
-      let filtered = availableOffices
-        .filter((item) => item.code === input.value)
-        .map((item) => {
-          const { id, name, agency } = item;
-          const record: Option = {
-            label: `${agency} - ${name}`,
-            value: id,
-          };
-
-          return record;
-        });
-
-      setOffices(filtered);
-
-      setSelectedAgency(input);
-    }
-  };
-  const handleTeamChange = (input: any) => {
-    if (input.value) {
-      setSelectedTeam(input);
-    }
-  };
-  const handleRoleChange = (input: any) => {
-    setSelectedRoles(input);
-  };
-
-  const resetValidationErrors = () => {
-    setOfficeError("");
-    setOfficerError("");
-  };
-
-  const validateUserAssignment = (): boolean => {
-    resetValidationErrors();
-    if (!officer) {
-      setOfficerError("User is required");
-    }
-    if (selectedAgency?.value === "COS" && !office) {
-      setOfficeError("Office is required");
-    }
-    return officeError === "" && officerError === "";
-  };
-
-  const handleSubmit = async () => {
-    if (validateUserAssignment() && selectedAgency) {
-      const mapRoles = selectedRoles?.map((role) => {
-        return { name: role.value };
-      });
-
-      switch (selectedAgency.value) {
-        case "EPO": {
-          if (selectedUserIdir && selectedTeam && selectedRoles) {
-            let res = await updateTeamRole(
-              selectedUserIdir,
-              officerGuid,
-              selectedAgency?.value,
-              selectedTeam?.value,
-              mapRoles,
-            );
-
-            if (res?.team && res?.roles) {
-              ToggleSuccess("Officer updated successfully");
-            } else {
-              ToggleError("Unable to update");
-            }
-          }
-          break;
-        }
-        case "PARKS": {
-          break;
-        }
-        case "COS":
-        default: {
-          const officerId = officer?.value ? officer.value : "";
-          const officeId = office?.value ? office.value : "";
-          dispatch(assignOfficerToOffice(officerId, officeId));
-          const mapRoles = selectedRoles?.map((role) => {
-            return { name: role.value };
-          });
-          let res = await updateTeamRole(selectedUserIdir, officerGuid, selectedAgency?.value, null, mapRoles);
-
-          if (res?.roles) {
-            ToggleSuccess("Officer updated successfully");
-          } else {
-            ToggleError("Unable to update");
-          }
-          break;
-        }
-      }
-    }
-  };
-
-  const handleCancel = () => {
-    resetValidationErrors();
-  };
-
-  const resetSelect = () => {
-    setSelectedAgency({ value: "", label: "" });
-    setSelectedTeam({ value: "", label: "" });
-    setOfficeError("");
-    setOfficerError("");
-    setSelectedUserIdir("");
-    setUserIdirs([]);
-    setOfficerGuid("");
-    setOffice({ value: "", label: "" });
-    setSelectedRoles([]);
-  };
-
-  return (
-    <>
-      <ToastContainer />
-      <div className="comp-page-container comp-page-container--noscroll">
-        <div className="comp-page-header">
-          <div className="comp-page-title-container">
-            <h1>User Administration</h1>
-          </div>
-          <p>Manage user agency / office location. Select a user and Agency + Location </p>
-        </div>
-        <div style={{ width: "500px" }}>
-          <div>
-            Select User
-            <CompSelect
-              id="species-select-id"
-              classNamePrefix="comp-select"
-              onChange={(evt) => handleOfficerChange(evt)}
-              classNames={{
-                menu: () => "top-layer-select",
-              }}
-              options={officers}
-              placeholder="Select"
-              enableValidation={true}
-              value={officer}
-              errorMessage={officerError}
-            />
-          </div>
-          {userIdirs.length >= 2 && (
-            <>
-              <br />
-              <form>
-                <fieldset>
-                  <p>{`Found ${userIdirs.length} users with same name. Please select the correct email: `}</p>
-                  {userIdirs &&
-                    userIdirs.map((item, index) => {
-                      return (
-                        <div key={`userIdir-${item}`}>
-                          <input
-                            type="radio"
-                            id={`userIdir-${index}`}
-                            name="userIdirEmail"
-                            value={item.username}
-                            onChange={async () => {
-                              setSelectedUserIdir(item.username);
-                              await updateUserIdirByOfficerId(item.username.split("@")[0], officerGuid);
-                            }}
-                          />
-                          <label
-                            style={{ marginLeft: "10px", cursor: "pointer" }}
-                            htmlFor={`userIdir-${index}`}
-                          >
-                            {item.email}
-                          </label>
-                        </div>
-                      );
-                    })}
-                </fieldset>
-              </form>
-            </>
-          )}
-          <br />
-          <div>
-            Select Agency
-            <CompSelect
-              id="agency-select-id"
-              classNamePrefix="comp-select"
-              onChange={(evt) => handleAgencyChange(evt)}
-              classNames={{
-                menu: () => "top-layer-select",
-              }}
-              options={agency}
-              placeholder="Select"
-              enableValidation={true}
-              value={selectedAgency}
-            />
-          </div>
-          <br />
-          {selectedAgency?.value === "EPO" && (
-            <>
-              <div>
-                Select Team
-                <CompSelect
-                  id="team-select-id"
-                  classNamePrefix="comp-select"
-                  onChange={(e) => handleTeamChange(e)}
-                  classNames={{
-                    menu: () => "top-layer-select",
-                  }}
-                  options={teams}
-                  placeholder="Select"
-                  enableValidation={true}
-                  value={selectedTeam}
-                  errorMessage={""}
-                />
-              </div>
-              <br />
-            </>
-          )}
-          {selectedAgency?.value === "COS" && (
-            <>
-              <div>
-                Select Office
-                <CompSelect
-                  id="species-select-id"
-                  classNamePrefix="comp-select"
-                  onChange={(evt) => handleOfficeChange(evt)}
-                  classNames={{
-                    menu: () => "top-layer-select",
-                  }}
-                  options={offices}
-                  placeholder="Select"
-                  enableValidation={true}
-                  value={office}
-                  errorMessage={officeError}
-                />
-              </div>
-              <br />
-            </>
-          )}
-          <div>
-            Select Role
-            <ValidationMultiSelect
-              className="comp-details-input"
-              options={CEEB_ROLE_OPTIONS}
-              placeholder="Select"
-              id="roles-select-id"
-              classNamePrefix="comp-select"
-              onChange={handleRoleChange}
-              errMsg={""}
-              values={selectedRoles}
-            />
-          </div>
-          <br />
-          <div>
-            <Button
-              variant="outline-primary"
-              onClick={handleCancel}
-            >
-              Cancel
-            </Button>{" "}
-            &nbsp;
-            <Button
-              variant="primary"
-              onClick={handleSubmit}
-            >
-              Submit
-            </Button>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/frontend/src/app/components/containers/admin/user-management/add-user-search.tsx b/frontend/src/app/components/containers/admin/user-management/add-user-search.tsx
new file mode 100644
index 000000000..4dfd047db
--- /dev/null
+++ b/frontend/src/app/components/containers/admin/user-management/add-user-search.tsx
@@ -0,0 +1,142 @@
+import { Dispatch, FC, SetStateAction, useState } from "react";
+import { Button } from "react-bootstrap";
+import { useAppDispatch } from "@hooks/hooks";
+import Option from "@apptypes/app/option";
+import { generateApiParameters, get } from "@common/api";
+import config from "@/config";
+import { CssUser, Officer } from "@apptypes/person/person";
+import { CompInput } from "@/app/components/common/comp-input";
+import "@assets/sass/user-management.scss";
+
+interface AddUserSearchProps {
+  setOfficer: Dispatch<SetStateAction<Option | undefined>>;
+  handleCancel: () => void;
+  goToEditView: () => void;
+  setIsInAddUserView: Dispatch<SetStateAction<boolean>>;
+  setNewUser: Dispatch<SetStateAction<CssUser | null>>;
+}
+
+export const AddUserSearch: FC<AddUserSearchProps> = ({
+  setOfficer,
+  handleCancel,
+  goToEditView,
+  setIsInAddUserView,
+  setNewUser,
+}) => {
+  const UserStatus = {
+    notInKeyCloak: 0,
+    inNatCom: 1,
+  };
+
+  const dispatch = useAppDispatch();
+  const [emailInput, setEmailInput] = useState<string>("");
+  const [userStatus, setUserStatus] = useState<number>();
+
+  const getCssUserDetails = async (email: string): Promise<Officer | CssUser | null> => {
+    const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/officer/find-by-email/${email}`);
+    const response = await get<Officer | CssUser | null>(dispatch, parameters);
+    return response;
+  };
+
+  const handleEmailChange = (input: any) => {
+    setEmailInput(input.trim());
+  };
+
+  const handleSearch = async () => {
+    if (emailInput !== "") {
+      const userDetails = await getCssUserDetails(emailInput);
+      if (userDetails) {
+        if ((userDetails as Officer).officer_guid) {
+          setOfficer({ value: (userDetails as Officer).person_guid.person_guid, label: "" });
+          setUserStatus(UserStatus.inNatCom);
+        } else if ((userDetails as CssUser).username) {
+          setNewUser(userDetails as CssUser);
+          setOfficer({ value: undefined, label: "" });
+          setIsInAddUserView(true);
+          goToEditView();
+        }
+      } else {
+        setUserStatus(UserStatus.notInKeyCloak);
+      }
+    }
+  };
+
+  return (
+    <div className="comp-page-container user-management-container">
+      <div className="comp-page-header">
+        <div className="comp-page-title-container">
+          <h3>Add new user</h3>
+        </div>
+      </div>
+      <section className="comp-details-section">
+        <div>
+          <dl className="comp-call-details-group">
+            <div>
+              <dt>Search user</dt>
+              <dd>
+                <CompInput
+                  id="complaint-email-id"
+                  divid="complaint-email-id-value"
+                  type="input"
+                  inputClass="comp-form-control"
+                  error=""
+                  maxLength={120}
+                  placeholder="Search user's email"
+                  onChange={(evt: any) => handleEmailChange(evt.target.value)}
+                />
+              </dd>
+            </div>
+          </dl>
+          <div className="admin-button-groups">
+            <Button
+              variant="outline-primary"
+              onClick={handleCancel}
+            >
+              Cancel
+            </Button>{" "}
+            &nbsp;
+            <Button
+              variant="primary"
+              onClick={handleSearch}
+            >
+              Add
+            </Button>
+          </div>
+
+          {userStatus === UserStatus.inNatCom && (
+            <div style={{ marginTop: "30px" }}>
+              <p>
+                User already exists in NatCom.{" "}
+                <a
+                  href="/"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setIsInAddUserView(false);
+                    goToEditView();
+                  }}
+                >
+                  Go to Edit
+                </a>
+              </p>
+            </div>
+          )}
+
+          {userStatus === UserStatus.notInKeyCloak && (
+            <div style={{ marginTop: "30px" }}>
+              <p>There are no results using your search criteria. The user might not exist in KeyCloak.</p>
+              <p>
+                Click this link to add the user in KeyCloak first:{" "}
+                <a
+                  href="https://bcgov.github.io/sso-requests"
+                  target="_blank"
+                >
+                  Common Hosted Single Sign-on (CSS)
+                </a>
+              </p>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
diff --git a/frontend/src/app/components/containers/admin/user-management/edit-user.tsx b/frontend/src/app/components/containers/admin/user-management/edit-user.tsx
new file mode 100644
index 000000000..f388ea6e3
--- /dev/null
+++ b/frontend/src/app/components/containers/admin/user-management/edit-user.tsx
@@ -0,0 +1,562 @@
+import { Dispatch, FC, SetStateAction, useEffect, useState } from "react";
+import { Button } from "react-bootstrap";
+import { useAppDispatch, useAppSelector } from "@hooks/hooks";
+import { assignOfficerToOffice, createOfficer, getOfficers, selectOfficerByPersonGuid } from "@store/reducers/officer";
+import { CompSelect } from "@components/common/comp-select";
+import Option from "@apptypes/app/option";
+import { fetchOfficeAssignments, selectOfficesForAssignmentDropdown, selectOffices } from "@store/reducers/office";
+import { ToggleError, ToggleSuccess } from "@common/toast";
+import { clearNotification, openModal, selectNotification, userId } from "@store/reducers/app";
+import { selectAgencyDropdown, selectTeamDropdown } from "@store/reducers/code-table";
+import { CEEB_ROLE_OPTIONS, COS_ROLE_OPTIONS, ROLE_OPTIONS } from "@constants/ceeb-roles";
+import { generateApiParameters, get, patch } from "@common/api";
+import config from "@/config";
+import { ValidationMultiSelect } from "@common/validation-multiselect";
+import { AgencyType } from "@/app/types/app/agency-types";
+import { CssUser } from "@/app/types/person/person";
+import { NewOfficer } from "@/app/types/person/new-officer";
+import { TOGGLE_DEACTIVATE } from "@/app/types/modal/modal-types";
+import "@assets/sass/user-management.scss";
+
+interface EditUserProps {
+  officer: Option;
+  isInAddUserView: boolean;
+  newUser: CssUser | null;
+  handleCancel: () => void;
+  goToSearchView: () => void;
+  setOfficer: Dispatch<SetStateAction<Option | undefined>>;
+}
+
+export const EditUser: FC<EditUserProps> = ({
+  officer,
+  isInAddUserView,
+  newUser,
+  handleCancel,
+  goToSearchView,
+  setOfficer,
+}) => {
+  const dispatch = useAppDispatch();
+  const officerData = useAppSelector(selectOfficerByPersonGuid(officer.value));
+  const officeAssignments = useAppSelector(selectOfficesForAssignmentDropdown);
+  const notification = useAppSelector(selectNotification);
+  const teams = useAppSelector(selectTeamDropdown);
+  const agency = useAppSelector(selectAgencyDropdown);
+  const availableOffices = useAppSelector(selectOffices);
+  const adminIdirUsername = useAppSelector(userId);
+
+  const [officerError, setOfficerError] = useState<string>("");
+  const [officeError, setOfficeError] = useState<string>("");
+
+  const [lastName, setLastName] = useState<string>("");
+  const [firstName, setFirstName] = useState<string>("");
+  const [idir, setIdir] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+  const [selectedAgency, setSelectedAgency] = useState<Option | null>(null);
+  const [selectedTeam, setSelectedTeam] = useState<Option | null>();
+  const [selectedRoles, setSelectedRoles] = useState<Array<Option>>();
+  const [selectedOffice, setSelectedOffice] = useState<Option | null>();
+  const [currentAgency, setCurrentAgency] = useState<Option | null>();
+
+  const [offices, setOffices] = useState<Array<Option>>([]);
+  const [roleList, setRoleList] = useState<Array<Option>>([]);
+
+  useEffect(() => {
+    if (officeAssignments) {
+      dispatch(fetchOfficeAssignments());
+      let options = availableOffices.map((item) => {
+        const { id, name, agency } = item;
+        const record: Option = {
+          label: `${agency} - ${name}`,
+          value: id,
+        };
+
+        return record;
+      });
+      setOffices(options);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch]);
+
+  useEffect(() => {
+    const { type } = notification;
+    if (type !== "") {
+      dispatch(clearNotification());
+    }
+  }, [dispatch, notification]);
+
+  useEffect(() => {
+    (async () => {
+      if (officerData?.user_roles && officerData.user_roles.length > 0 && selectedAgency === null) {
+        //map current user's roles
+        const currentRoles = mapRolesDropdown(officerData.user_roles);
+        setSelectedRoles(currentRoles);
+
+        //map current user's agency based on roles
+        let currentAgency;
+        const hasCEEBRole = officerData.user_roles.some((role: any) => role.includes("CEEB"));
+        if (hasCEEBRole) {
+          currentAgency = mapAgencyDropDown(AgencyType.CEEB, agency);
+          const currentTeam = await getUserCurrentTeam(officerData.officer_guid);
+          if (currentTeam?.team_guid) {
+            const currentTeamMapped = mapAgencyDropDown(currentTeam.team_guid.team_code.team_code, teams);
+            setSelectedTeam(currentTeamMapped);
+          }
+        } else {
+          currentAgency = mapAgencyDropDown(AgencyType.COS, agency);
+          //map current user's office if agency is COS
+          if (officerData.office_guid) {
+            const currentOffice = mapAgencyDropDown(officerData.office_guid.office_guid, offices);
+            setSelectedOffice(currentOffice);
+          }
+        }
+        setCurrentAgency(currentAgency);
+      }
+    })();
+  }, [officerData, offices, selectedAgency]);
+
+  useEffect(() => {
+    if (newUser && !officerData) {
+      setLastName(newUser.lastName);
+      setFirstName(newUser.firstName);
+      setIdir(newUser.attributes.idir_username[0]);
+      setEmail(newUser.email);
+    } else if (officerData && !newUser) {
+      setLastName(officerData.person_guid.last_name);
+      setFirstName(officerData.person_guid.first_name);
+      setIdir(officerData.user_id);
+    }
+  }, [newUser, officerData]);
+
+  useEffect(() => {
+    switch (currentAgency?.value ?? selectedAgency?.value) {
+      case AgencyType.CEEB:
+        setRoleList(CEEB_ROLE_OPTIONS);
+        break;
+      case AgencyType.COS:
+      // case for PARKS will use COS_ROLE_OPTIONS for now
+      case AgencyType.PARKS:
+      default:
+        setRoleList(COS_ROLE_OPTIONS);
+        break;
+    }
+  }, [selectedAgency, currentAgency]);
+
+  const mapRolesDropdown = (userRoles: any): Option[] => {
+    let result: Option[] = [];
+    ROLE_OPTIONS.forEach((roleOption) => {
+      const found = userRoles.some((role: any) => role === roleOption.value);
+      if (found) result.push(roleOption);
+    });
+    return result;
+  };
+
+  const mapAgencyDropDown = (userAgency: any, agencyList: Option[]) => {
+    const result = agencyList.find((agencyItem: Option) => agencyItem.value === userAgency);
+    return result ?? undefined;
+  };
+
+  const getUserCurrentTeam = async (officerGuid: string) => {
+    const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/team/current`, { officerGuid });
+    const response: any = await get(dispatch, parameters);
+    return response;
+  };
+
+  const updateTeamRole = async (
+    userIdir: string | undefined,
+    officerGuid: string | undefined,
+    agencyCode: string | undefined,
+    teamCode: string | undefined | null,
+    roles: Array<{ name: string | undefined }> | undefined,
+  ) => {
+    const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/team/update/${officerGuid}`, {
+      userIdir,
+      adminIdirUsername,
+      agencyCode,
+      teamCode,
+      roles,
+    });
+    const response: any = await patch(dispatch, parameters);
+    return response;
+  };
+
+  const handleOfficeChange = (input: any) => {
+    if (input.value) {
+      setSelectedOffice(input);
+    }
+  };
+
+  const handleAgencyChange = (input: any) => {
+    resetSelect();
+
+    if (input.value) {
+      //Update offices dropdown list based on selected agency (COS or PARKS)
+      let filtered = availableOffices
+        .filter((item) => item.code === input.value)
+        .map((item) => {
+          const { id, name, agency } = item;
+          const record: Option = {
+            label: `${agency} - ${name}`,
+            value: id,
+          };
+
+          return record;
+        });
+      setOffices(filtered);
+
+      setSelectedAgency(input);
+    }
+  };
+  const handleTeamChange = (input: any) => {
+    if (input.value) {
+      setSelectedTeam(input);
+    }
+  };
+  const handleRoleChange = (input: any) => {
+    setSelectedRoles(input);
+  };
+
+  const resetValidationErrors = () => {
+    setOfficeError("");
+    setOfficerError("");
+  };
+
+  const validateUserAssignment = (): boolean => {
+    resetValidationErrors();
+    if (!officer) {
+      setOfficerError("User is required");
+    }
+    if (selectedAgency?.value === "COS" && !selectedOffice) {
+      setOfficeError("Office is required");
+    }
+    return officeError === "" && officerError === "";
+  };
+
+  const handleSubmit = async () => {
+    if (validateUserAssignment() && (selectedAgency || currentAgency) && selectedRoles) {
+      const mapRoles = selectedRoles.map((role) => {
+        return { name: role.value };
+      });
+
+      if (newUser) {
+        //create new officer
+        addNewOfficer(newUser, mapRoles);
+      } else {
+        //update existing officer
+        const selectedUserAgency = currentAgency ?? selectedAgency;
+        const selectedUserIdir = `${officerData?.auth_user_guid.split("-").join("")}@idir`;
+        await updateOfficer(selectedUserAgency, selectedUserIdir, mapRoles);
+      }
+      resetSelect();
+      goToSearchView();
+      setOfficer({ value: "", label: "" }); //reset select from search view
+    }
+  };
+
+  const addNewOfficer = (newUser: CssUser, mapRoles: Array<{ name: string | undefined }>) => {
+    const newOfficerData: NewOfficer = {
+      user_id: newUser.attributes.idir_username[0],
+      create_user_id: adminIdirUsername,
+      create_utc_timestamp: new Date(),
+      update_user_id: adminIdirUsername,
+      update_utc_timestamp: new Date(),
+      auth_user_guid: newUser.username.slice(0, -5),
+      office_guid: selectedOffice?.value ?? null,
+      team_code: selectedTeam?.value ?? null,
+      person_guid: {
+        first_name: newUser.firstName,
+        middle_name_1: null,
+        middle_name_2: null,
+        last_name: newUser.lastName,
+        create_user_id: adminIdirUsername,
+        create_utc_timestamp: new Date(),
+        update_user_id: adminIdirUsername,
+        updateTimestamp: new Date(),
+      },
+      roles: {
+        user_roles: mapRoles,
+        user_idir: newUser.username,
+      },
+      coms_enrolled_ind: false,
+      deactivate_ind: false,
+    };
+    dispatch(createOfficer(newOfficerData));
+  };
+
+  const updateOfficer = async (
+    selectedUserAgency: Option | null,
+    selectedUserIdir: string,
+    mapRoles: Array<{ name: string | undefined }>,
+  ) => {
+    switch (selectedUserAgency?.value) {
+      case "EPO": {
+        if (selectedTeam && selectedRoles) {
+          let res = await updateTeamRole(
+            selectedUserIdir,
+            officerData?.officer_guid,
+            selectedUserAgency.value,
+            selectedTeam?.value,
+            mapRoles,
+          );
+
+          if (res?.team && res?.roles) {
+            ToggleSuccess("Officer updated successfully");
+          } else {
+            ToggleError("Unable to update");
+          }
+        }
+        break;
+      }
+      case "COS":
+      default: {
+        const officerId = officer?.value ? officer.value : "";
+        const officeId = selectedOffice?.value ? selectedOffice.value : "";
+        dispatch(assignOfficerToOffice(officerId, officeId));
+        let res = await updateTeamRole(
+          selectedUserIdir,
+          officerData?.officer_guid,
+          selectedUserAgency?.value,
+          null,
+          mapRoles,
+        );
+
+        if (res?.roles) {
+          dispatch(getOfficers());
+          ToggleSuccess("Officer updated successfully");
+        } else {
+          ToggleError("Unable to update");
+        }
+        break;
+      }
+    }
+  };
+
+  const toggleDeactivate = () => {
+    dispatch(
+      openModal({
+        modalSize: "md",
+        modalType: TOGGLE_DEACTIVATE,
+        data: {
+          title: officerData?.deactivate_ind ? "Activate user?" : "Deactivate user?",
+          description: officerData?.deactivate_ind
+            ? "This user will gain access to the application."
+            : "This user will lose access to the application until reactivated.",
+          ok: officerData?.deactivate_ind ? "Yes, activate user" : "Yes, deactivate user",
+          cancel: "Cancel",
+          officer_guid: officerData?.officer_guid,
+          deactivate_ind: !officerData?.deactivate_ind,
+          user_roles: officerData?.user_roles,
+          auth_user_guid: officerData?.auth_user_guid,
+        },
+      }),
+    );
+  };
+
+  const resetSelect = () => {
+    setCurrentAgency(null);
+    setSelectedTeam(null);
+    setSelectedOffice(null);
+    setSelectedRoles([]);
+    setOfficeError("");
+    setOfficerError("");
+  };
+
+  return (
+    <div className="comp-page-container user-management-container">
+      <div className="comp-page-header">
+        {officerData?.deactivate_ind && (
+          <div className="comp-page-deactivate-banner">
+            This user is currently deactivated. Click Activate user below to edit the details and grant them access.
+          </div>
+        )}
+        <div className="comp-page-title-container">
+          <h3>{isInAddUserView ? "Add new user" : "Edit user"}</h3>
+          {!isInAddUserView && (
+            <Button
+              variant="primary"
+              onClick={toggleDeactivate}
+            >
+              {officerData?.deactivate_ind ? (
+                <span>
+                  <i className="bi bi-person-bounding-box"></i>Activate user
+                </span>
+              ) : (
+                <span>
+                  <i className="comp-sidenav-item-icon bi bi-x-circle"></i>Deactivate user
+                </span>
+              )}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <section
+        className="comp-details-section"
+        style={{ marginTop: "20px" }}
+      >
+        {/* Last name */}
+        <div
+          className="comp-details-form-row"
+          id="last-name-id"
+        >
+          <label htmlFor="last-name-readonly-id">Last name</label>
+          <div className="comp-details-edit-input">
+            <input
+              type="text"
+              id="last-name-readonly-id"
+              className="comp-form-control disable-field"
+              value={lastName}
+              disabled
+            />
+          </div>
+        </div>
+
+        {/* First name */}
+        <div
+          className="comp-details-form-row"
+          id="first-name-id"
+        >
+          <label htmlFor="first-name-readonly-id">First name</label>
+          <div className="comp-details-edit-input">
+            <input
+              type="text"
+              id="first-name-readonly-id"
+              className="comp-form-control disable-field"
+              value={firstName}
+              disabled
+            />
+          </div>
+        </div>
+
+        {/* Email address*/}
+        {isInAddUserView && (
+          <div
+            className="comp-details-form-row"
+            id="email-id"
+          >
+            <label htmlFor="email-readonly-id">Email address</label>
+            <div className="comp-details-edit-input">
+              <input
+                type="text"
+                id="email-readonly-id"
+                className="comp-form-control disable-field"
+                value={email}
+                disabled
+              />
+            </div>
+          </div>
+        )}
+
+        {/* IDIR*/}
+        <div
+          className="comp-details-form-row"
+          id="idir-id"
+        >
+          <label htmlFor="idir-readonly-id">IDIR</label>
+          <div className="comp-details-edit-input">
+            <input
+              type="text"
+              id="idir-readonly-id"
+              className="comp-form-control disable-field"
+              value={idir}
+              disabled
+            />
+          </div>
+        </div>
+
+        {/* Agency */}
+        <div className="comp-details-form-row">
+          <label htmlFor="user-agency-id">Agency</label>
+          <div className="comp-details-edit-input">
+            <CompSelect
+              id="agency-select-id"
+              classNamePrefix="comp-select"
+              onChange={(evt) => handleAgencyChange(evt)}
+              classNames={{
+                menu: () => "top-layer-select",
+              }}
+              options={agency}
+              placeholder="Select"
+              enableValidation={true}
+              value={currentAgency ?? selectedAgency}
+              isDisabled={officerData?.deactivate_ind}
+            />
+          </div>
+        </div>
+
+        {/* Team/ office */}
+        <div className="comp-details-form-row">
+          <label htmlFor="user-team-office-id">Team / office</label>
+          <div className="comp-details-edit-input user-team-office-id">
+            {currentAgency?.value === "EPO" || selectedAgency?.value === "EPO" ? (
+              <CompSelect
+                id="team-select-id"
+                classNamePrefix="comp-select"
+                onChange={(e) => handleTeamChange(e)}
+                classNames={{
+                  menu: () => "top-layer-select",
+                }}
+                options={teams}
+                placeholder="Select"
+                enableValidation={true}
+                value={selectedTeam}
+                errorMessage={""}
+                isDisabled={officerData?.deactivate_ind}
+              />
+            ) : (
+              <CompSelect
+                id="species-select-id"
+                classNamePrefix="comp-select"
+                onChange={(evt) => handleOfficeChange(evt)}
+                classNames={{
+                  menu: () => "top-layer-select",
+                }}
+                options={offices}
+                placeholder="Select"
+                enableValidation={true}
+                value={selectedOffice}
+                errorMessage={officeError}
+                isDisabled={officerData?.deactivate_ind}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Role */}
+        <div className="comp-details-form-row">
+          <label htmlFor="user-role-id">Role</label>
+          <div className="comp-details-edit-input">
+            <ValidationMultiSelect
+              className="comp-details-input"
+              options={roleList}
+              placeholder="Select"
+              id="user-role-id"
+              classNamePrefix="comp-select"
+              onChange={handleRoleChange}
+              errMsg={""}
+              values={selectedRoles}
+              isDisabled={officerData?.deactivate_ind}
+            />
+          </div>
+        </div>
+
+        {/* Button groups */}
+        <div className="admin-button-groups">
+          <Button
+            variant="outline-primary"
+            onClick={handleCancel}
+          >
+            Cancel
+          </Button>{" "}
+          &nbsp;
+          <Button
+            variant={officerData?.deactivate_ind ? "outline-primary" : "primary"}
+            onClick={handleSubmit}
+            disabled={officerData?.deactivate_ind}
+          >
+            {isInAddUserView ? "Save" : "Update"}
+          </Button>
+        </div>
+      </section>
+    </div>
+  );
+};
diff --git a/frontend/src/app/components/containers/admin/user-management/index.tsx b/frontend/src/app/components/containers/admin/user-management/index.tsx
new file mode 100644
index 000000000..719035611
--- /dev/null
+++ b/frontend/src/app/components/containers/admin/user-management/index.tsx
@@ -0,0 +1,100 @@
+import { FC, useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "@hooks/hooks";
+import Option from "@apptypes/app/option";
+import { ToastContainer } from "react-toastify";
+import { clearNotification, selectNotification } from "@store/reducers/app";
+import { CssUser } from "@apptypes/person/person";
+import { SelectUser } from "@/app/components/containers/admin/user-management/select-user";
+import { EditUser } from "@/app/components/containers/admin/user-management/edit-user";
+import { AddUserSearch } from "@/app/components/containers/admin/user-management/add-user-search";
+import "@assets/sass/user-management.scss";
+
+export const UserManagement: FC = () => {
+  const SEARCH_VIEW = 0;
+  const EDIT_VIEW = 1;
+  const ADD_USER_SEARCH_VIEW = 2;
+
+  const dispatch = useAppDispatch();
+  const notification = useAppSelector(selectNotification);
+
+  const [viewState, setViewState] = useState<number>(SEARCH_VIEW);
+  const [officer, setOfficer] = useState<Option>();
+  const [officerError, setOfficerError] = useState<string>("");
+  const [isInAddUserView, setIsInAddUserView] = useState<boolean>(false);
+  const [newUser, setNewUser] = useState<CssUser | null>(null);
+
+  useEffect(() => {
+    const { type } = notification;
+    if (type !== "") {
+      dispatch(clearNotification());
+    }
+  }, [dispatch, notification]);
+
+  const resetValidationErrors = () => {
+    setOfficerError("");
+  };
+
+  const handleEdit = () => {
+    setViewState(EDIT_VIEW);
+    setIsInAddUserView(false);
+    setNewUser(null);
+  };
+
+  const handleCancel = () => {
+    //return to search view
+    if (viewState !== SEARCH_VIEW) {
+      //if in add new user details view -> return to add search view
+      if (isInAddUserView && viewState === EDIT_VIEW) {
+        setViewState(ADD_USER_SEARCH_VIEW);
+      } else setViewState(SEARCH_VIEW);
+    }
+    resetValidationErrors();
+  };
+
+  const handleAddNewUser = () => {
+    setViewState(ADD_USER_SEARCH_VIEW);
+  };
+
+  const goToSearchView = () => {
+    setViewState(SEARCH_VIEW);
+  };
+
+  const goToEditView = () => {
+    setViewState(EDIT_VIEW);
+  };
+
+  return (
+    <>
+      <ToastContainer />
+      {viewState === SEARCH_VIEW && (
+        <SelectUser
+          setOfficer={setOfficer}
+          setOfficerError={setOfficerError}
+          handleAddNewUser={handleAddNewUser}
+          officer={officer}
+          officerError={officerError}
+          handleEdit={handleEdit}
+        />
+      )}
+      {viewState === EDIT_VIEW && officer && (
+        <EditUser
+          officer={officer}
+          isInAddUserView={isInAddUserView}
+          handleCancel={handleCancel}
+          goToSearchView={goToSearchView}
+          newUser={newUser}
+          setOfficer={setOfficer}
+        />
+      )}
+      {viewState === ADD_USER_SEARCH_VIEW && (
+        <AddUserSearch
+          setOfficer={setOfficer}
+          handleCancel={handleCancel}
+          goToEditView={goToEditView}
+          setIsInAddUserView={setIsInAddUserView}
+          setNewUser={setNewUser}
+        />
+      )}
+    </>
+  );
+};
diff --git a/frontend/src/app/components/containers/admin/user-management/select-user.tsx b/frontend/src/app/components/containers/admin/user-management/select-user.tsx
new file mode 100644
index 000000000..e9f32001f
--- /dev/null
+++ b/frontend/src/app/components/containers/admin/user-management/select-user.tsx
@@ -0,0 +1,112 @@
+import { Dispatch, FC, SetStateAction } from "react";
+import { Button } from "react-bootstrap";
+import { useAppSelector } from "@hooks/hooks";
+import { selectOfficers } from "@store/reducers/officer";
+import { CompSelect } from "@components/common/comp-select";
+import Option from "@apptypes/app/option";
+import { Officer } from "@apptypes/person/person";
+import "@assets/sass/user-management.scss";
+
+interface SelectUserProps {
+  officer: any;
+  officerError: string;
+  setOfficer: Dispatch<SetStateAction<Option | undefined>>;
+  setOfficerError: Dispatch<SetStateAction<string>>;
+  handleEdit: () => void;
+  handleAddNewUser: () => void;
+}
+
+export const SelectUser: FC<SelectUserProps> = ({
+  setOfficer,
+  setOfficerError,
+  handleAddNewUser,
+  officer,
+  officerError,
+  handleEdit,
+}) => {
+  const officers = useAppSelector(selectOfficers);
+  const officerList = officers?.map((officer: Officer) => {
+    const {
+      person_guid: { person_guid: id, first_name, last_name },
+      deactivate_ind,
+    } = officer;
+    return {
+      value: id,
+      label: `${last_name}, ${first_name} ${deactivate_ind ? "(deactivated user)" : ""}`,
+    };
+  });
+
+  const handleOfficerChange = async (input: any) => {
+    setOfficerError("");
+    if (input.value) {
+      setOfficer(input);
+    }
+  };
+
+  const handleCancel = () => {
+    setOfficer({ value: "", label: "" });
+  };
+
+  return (
+    <div className="comp-page-container user-management-container">
+      <div className="comp-page-header">
+        <div className="comp-page-title-container">
+          <h3>User Administration</h3>
+          <Button
+            variant="primary"
+            onClick={handleAddNewUser}
+          >
+            <i className="comp-sidenav-item-icon bi bi-plus-circle"></i>Add new user
+          </Button>
+        </div>
+
+        <p className="admin-subtitle">
+          After selecting a user, click <strong>Edit</strong> for more options, such as: choosing an agency,
+          team/office, specifying roles, updating the last name and/or email address, temporarily disabling or deleting
+          the user.
+        </p>
+      </div>
+      <section className="comp-details-section">
+        <div>
+          <dl className="comp-call-details-group">
+            <div>
+              <dt>Search User</dt>
+              <dd>
+                <CompSelect
+                  id="species-select-id"
+                  classNamePrefix="comp-select"
+                  onChange={(evt) => handleOfficerChange(evt)}
+                  classNames={{
+                    menu: () => "top-layer-select",
+                  }}
+                  //@ts-ignore
+                  options={officerList}
+                  placeholder="Search"
+                  enableValidation={true}
+                  value={officer}
+                  errorMessage={officerError}
+                />
+              </dd>
+            </div>
+          </dl>
+          <div className="admin-button-groups">
+            <Button
+              variant="outline-primary"
+              onClick={handleCancel}
+            >
+              Cancel
+            </Button>{" "}
+            &nbsp;
+            <Button
+              variant="primary"
+              onClick={handleEdit}
+              disabled={officer && officer.value === ""}
+            >
+              Edit
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
diff --git a/frontend/src/app/components/containers/layout/side-bar.tsx b/frontend/src/app/components/containers/layout/side-bar.tsx
index e6c840169..833296a82 100644
--- a/frontend/src/app/components/containers/layout/side-bar.tsx
+++ b/frontend/src/app/components/containers/layout/side-bar.tsx
@@ -20,21 +20,28 @@ export const SideBar: FC = () => {
       name: "Complaints",
       icon: "bi bi-file-earmark-medical",
       route: "/complaints",
-      roles: ["COS", "CEEB"],
+      roles: [Roles.COS_OFFICER, Roles.CEEB],
     },
     {
       id: "create-complaints-link",
       name: "Create Complaint",
       icon: "bi bi-plus-circle",
       route: "complaint/createComplaint",
-      roles: ["COS", "CEEB"],
+      roles: [Roles.COS_OFFICER, Roles.CEEB],
     },
     {
       id: "zone-at-a-glance-link",
       name: "Zone at a Glance",
       icon: "bi bi-buildings",
       route: "/zone/at-a-glance",
-      roles: ["COS"],
+      roles: [Roles.COS_OFFICER],
+    },
+    {
+      id: "user-management",
+      name: "User Administration",
+      icon: "bi bi-people",
+      route: "/admin/user",
+      roles: [Roles.TEMPORARY_TEST_ADMIN],
     },
   ];
 
@@ -103,11 +110,10 @@ export const SideBar: FC = () => {
       {/* <!-- menu items for the organization --> */}
       <ul className="nav nav-pills flex-column mb-auto comp-sidenav-list">
         {menueItems.map((item, idx) => {
-          if (UserService.hasRole(Roles.CEEB) && !item.roles.includes("CEEB")) {
-            // Do not display this hence return null
-            return null;
-          }
-          return renderSideBarMenuItem(idx, item);
+          const authorizeMenuView = item.roles.some((role) => UserService.hasRole(role));
+          if (authorizeMenuView) {
+            return renderSideBarMenuItem(idx, item);
+          } else return null;
         })}
       </ul>
       <div
diff --git a/frontend/src/app/components/modal/instances/index.ts b/frontend/src/app/components/modal/instances/index.ts
index 4faa35fc1..3eb7aaa27 100644
--- a/frontend/src/app/components/modal/instances/index.ts
+++ b/frontend/src/app/components/modal/instances/index.ts
@@ -5,6 +5,7 @@ import { DeleteNoteModal } from "./delete-note-modal";
 import { DeleteAnimalOutcomeModal } from "./delete-animal-outcome-modal";
 import { DeleteConfirmModalV2 } from "./delete-confirm-modal-v2";
 import { QuickCloseModal } from "./quick-close-modal";
+import { ToggleDeactivateModal } from "@/app/components/modal/instances/toggle-deactivate-modal";
 
 export {
   SampleModal,
@@ -14,4 +15,5 @@ export {
   DeleteAnimalOutcomeModal,
   DeleteConfirmModalV2,
   QuickCloseModal,
+  ToggleDeactivateModal,
 };
diff --git a/frontend/src/app/components/modal/instances/toggle-deactivate-modal.tsx b/frontend/src/app/components/modal/instances/toggle-deactivate-modal.tsx
new file mode 100644
index 000000000..f9ab5b276
--- /dev/null
+++ b/frontend/src/app/components/modal/instances/toggle-deactivate-modal.tsx
@@ -0,0 +1,52 @@
+import { FC } from "react";
+import { Modal, Button } from "react-bootstrap";
+import { useAppDispatch, useAppSelector } from "@hooks/hooks";
+import { selectModalData } from "@store/reducers/app";
+import { getOfficers, updateOfficer } from "@/app/store/reducers/officer";
+
+type props = {
+  close: () => void;
+  submit: () => void;
+};
+
+export const ToggleDeactivateModal: FC<props> = ({ close, submit }) => {
+  const dispatch = useAppDispatch();
+  const modalData = useAppSelector(selectModalData);
+  const { title, description, ok, cancel, officer_guid, deactivate_ind, user_roles, auth_user_guid } = modalData;
+
+  const handleSubmit = () => {
+    dispatch(updateOfficer(officer_guid, { deactivate_ind, user_roles, auth_user_guid }))
+      .then((res) => {
+        if (res === "success") {
+          dispatch(getOfficers());
+        }
+      })
+      .finally(() => {
+        submit();
+      });
+  };
+  return (
+    <>
+      {title && (
+        <Modal.Header closeButton={true}>
+          {" "}
+          {/* set true / false to display the close button */}
+          <Modal.Title>{title}</Modal.Title>
+          {/* <!-- additional header content should go here --> */}
+        </Modal.Header>
+      )}
+      <Modal.Body>
+        <p>{description}</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="outline-primary"
+          onClick={close}
+        >
+          {cancel}
+        </Button>
+        <Button onClick={() => handleSubmit()}>{ok}</Button>
+      </Modal.Footer>
+    </>
+  );
+};
diff --git a/frontend/src/app/components/modal/model-components.ts b/frontend/src/app/components/modal/model-components.ts
index 1e7abd363..dec317362 100644
--- a/frontend/src/app/components/modal/model-components.ts
+++ b/frontend/src/app/components/modal/model-components.ts
@@ -7,6 +7,7 @@ import {
   DELETE_ANIMAL_OUTCOME,
   DELETE_CONFIRM,
   QUICK_CLOSE,
+  TOGGLE_DEACTIVATE,
 } from "@apptypes/modal/modal-types";
 
 import {
@@ -17,6 +18,7 @@ import {
   DeleteAnimalOutcomeModal,
   DeleteConfirmModalV2,
   QuickCloseModal,
+  ToggleDeactivateModal,
 } from "./instances";
 import { CancelConfirmModal } from "./instances/cancel-confirm-modal";
 
@@ -29,4 +31,5 @@ export const MODAL_COMPONENTS: { [key: string]: React.ComponentType<any> } = {
   [DELETE_ANIMAL_OUTCOME]: DeleteAnimalOutcomeModal,
   [DELETE_CONFIRM]: DeleteConfirmModalV2,
   [QUICK_CLOSE]: QuickCloseModal,
+  [TOGGLE_DEACTIVATE]: ToggleDeactivateModal,
 };
diff --git a/frontend/src/app/constants/ceeb-roles.ts b/frontend/src/app/constants/ceeb-roles.ts
index f209396bc..bf9a5da2f 100644
--- a/frontend/src/app/constants/ceeb-roles.ts
+++ b/frontend/src/app/constants/ceeb-roles.ts
@@ -1,9 +1,23 @@
 import Option from "@apptypes/app/option";
 
+export const ROLE_OPTIONS: Array<Option> = [
+  { value: "CEEB", label: "CEEB User" },
+  { value: "CEEB Section Head", label: "Section Head" },
+  { value: "CEEB Compliance Coordinator", label: "Compliance Coordinator" },
+  { value: "COS Officer", label: "COS Officer" },
+  { value: "COS Administrator", label: "COS Administrator" },
+  { value: "READ ONLY", label: "Read Only" },
+];
+
 export const CEEB_ROLE_OPTIONS: Array<Option> = [
   { value: "CEEB", label: "CEEB User" },
   { value: "CEEB Section Head", label: "Section Head" },
   { value: "CEEB Compliance Coordinator", label: "Compliance Coordinator" },
+  { value: "READ ONLY", label: "Read Only" },
+];
+
+export const COS_ROLE_OPTIONS: Array<Option> = [
   { value: "COS Officer", label: "COS Officer" },
+  { value: "COS Administrator", label: "COS Administrator" },
   { value: "READ ONLY", label: "Read Only" },
 ];
diff --git a/frontend/src/app/store/reducers/code-table.ts b/frontend/src/app/store/reducers/code-table.ts
index 6e5235f7b..09d7a969e 100644
--- a/frontend/src/app/store/reducers/code-table.ts
+++ b/frontend/src/app/store/reducers/code-table.ts
@@ -723,10 +723,12 @@ export const selectAgencyDropdown = (state: RootState): Array<Option> => {
     codeTables: { agency },
   } = state;
 
-  const data = agency.map(({ agency, longDescription }) => {
-    const item: Option = { label: longDescription, value: agency };
-    return item;
-  });
+  const data = agency
+    .filter(({ agency }) => agency !== "PARKS") //hide PARKS option for now
+    .map(({ agency, longDescription }) => {
+      const item: Option = { label: longDescription, value: agency };
+      return item;
+    });
   return data;
 };
 
diff --git a/frontend/src/app/store/reducers/officer.ts b/frontend/src/app/store/reducers/officer.ts
index 73ff230ef..99d6550c6 100644
--- a/frontend/src/app/store/reducers/officer.ts
+++ b/frontend/src/app/store/reducers/officer.ts
@@ -3,6 +3,7 @@ import { RootState, AppThunk } from "@store/store";
 import config from "@/config";
 import { OfficerState } from "@apptypes/complaints/officers-state";
 import { Officer } from "@apptypes/person/person";
+import { NewOfficer } from "@/app/types/person/new-officer";
 import { UUID } from "crypto";
 import { PersonComplaintXref } from "@apptypes/complaints/person-complaint-xref";
 import COMPLAINT_TYPES from "@apptypes/app/complaint-types";
@@ -23,6 +24,7 @@ import { AllegationComplaint as AllegationComplaintDto } from "@apptypes/app/com
 import { OfficerDto } from "@apptypes/app/people/officer";
 import { GeneralIncidentComplaint as GeneralIncidentComplaintDto } from "@apptypes/app/complaints/general-complaint";
 import Roles from "@apptypes/app/roles";
+import { ToggleError, ToggleSuccess } from "@/app/common/toast";
 
 const initialState: OfficerState = {
   officers: [],
@@ -195,6 +197,79 @@ export const assignComplaintToOfficer =
     }
   };
 
+export const assignOfficerToOffice =
+  (personId: string, officeId: string): AppThunk =>
+  async (dispatch, getState) => {
+    const {
+      officers: { officers },
+    } = getState();
+
+    try {
+      const selectedOfficer = officers.find((item) => {
+        const { person_guid: person } = item;
+        const { person_guid: _personId } = person;
+
+        return personId === _personId;
+      });
+
+      const { office_guid: office } = selectedOfficer || {};
+      const updatedOffice = { ...office, office_guid: officeId };
+
+      const update = { ...selectedOfficer, office_guid: updatedOffice };
+
+      const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/officer/${selectedOfficer?.officer_guid}`, {
+        ...update,
+      });
+
+      const response = await patch<Array<Officer>>(dispatch, parameters);
+
+      if (response && from(response).any()) {
+        dispatch(toggleNotification("success", "officer assigned"));
+      }
+    } catch (error) {
+      //-- handle errors
+      dispatch(toggleNotification("error", "unable to assign officer to office"));
+    }
+  };
+
+export const createOfficer =
+  (newOfficerData: NewOfficer): AppThunk =>
+  async (dispatch, getState) => {
+    try {
+      const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/officer`, newOfficerData);
+      const response = await post<Officer>(dispatch, parameters);
+      if (response) {
+        ToggleSuccess("Officer created successfully");
+        dispatch(getOfficers());
+      } else {
+        ToggleError("Unable to add new officer");
+      }
+    } catch (error) {
+      //-- handle errors
+      dispatch(toggleNotification("error", "Unable to create officer"));
+    }
+  };
+
+export const updateOfficer =
+  (
+    officerGuid: string,
+    updatedData: Partial<Officer>,
+  ): ThunkAction<Promise<string | undefined>, RootState, unknown, Action<string>> =>
+  async (dispatch, getState) => {
+    try {
+      const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/officer/${officerGuid}`, updatedData);
+      const response = await patch<Officer>(dispatch, parameters);
+
+      if (response) {
+        return "success";
+      }
+      return "error";
+    } catch (error) {
+      //-- handle errors
+      return "error";
+    }
+  };
+
 //-- selectors
 
 export const selectOfficers = (state: RootState): Officer[] | null => {
@@ -297,7 +372,7 @@ const mapAgencyToRole = (agency: string): string => {
   return role;
 };
 
-const filterOfficerByAgency = (agency: string, officers: Officer[]) => {
+const filterOfficerByAgency = (agency: string, officers: Officer[]): Officer[] => {
   const role = mapAgencyToRole(agency);
   const result = officers.filter((officer) => {
     const { office_guid, user_roles } = officer;
@@ -308,10 +383,23 @@ const filterOfficerByAgency = (agency: string, officers: Officer[]) => {
     const roleMatch = user_roles.includes(role) && !user_roles.includes(Roles.READ_ONLY);
     const agencyCode = officer?.office_guid?.agency_code?.agency_code ?? null;
 
+    //Deactivated officers has empty roles,
+    //so the only way to  determine agency is based on whether office_guid null/not null for now
+    let agencyCodeForDeactivatedOfficer;
+    if (officer.deactivate_ind) {
+      if (officer.office_guid) {
+        agencyCodeForDeactivatedOfficer = "COS";
+      } else {
+        agencyCodeForDeactivatedOfficer = "EPO";
+      }
+    }
+
     if (agency === "COS") {
-      return agency === agencyCode && !fromAdminOffice && roleMatch;
+      if (officer.deactivate_ind) {
+        return agency === agencyCodeForDeactivatedOfficer;
+      } else return agency === agencyCode && !fromAdminOffice && roleMatch;
     } else if (agency === "EPO") {
-      let result = roleMatch;
+      let result = officer.deactivate_ind === true ? agency === agencyCodeForDeactivatedOfficer : roleMatch;
       return result;
     } else {
       return false;
@@ -401,41 +489,6 @@ export const selectOfficersByZoneAgencyAndRole =
     return [];
   };
 
-export const assignOfficerToOffice =
-  (personId: string, officeId: string): AppThunk =>
-  async (dispatch, getState) => {
-    const {
-      officers: { officers },
-    } = getState();
-
-    try {
-      const selectedOfficer = officers.find((item) => {
-        const { person_guid: person } = item;
-        const { person_guid: _personId } = person;
-
-        return personId === _personId;
-      });
-
-      const { office_guid: office } = selectedOfficer || {};
-      const updatedOffice = { ...office, office_guid: officeId };
-
-      const update = { ...selectedOfficer, office_guid: updatedOffice };
-
-      const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/officer/${selectedOfficer?.officer_guid}`, {
-        ...update,
-      });
-
-      const response = await patch<Array<Officer>>(dispatch, parameters);
-
-      if (response && from(response).any()) {
-        dispatch(toggleNotification("success", "officer assigned"));
-      }
-    } catch (error) {
-      //-- handle errors
-      dispatch(toggleNotification("error", "unable to assign officer to office"));
-    }
-  };
-
 export const selectOfficerByIdir =
   (idir: string) =>
   (state: RootState): Officer | null => {
@@ -466,6 +519,22 @@ export const selectOfficerByAuthUserGuid =
     return null;
   };
 
+export const selectOfficerByPersonGuid =
+  (personGuid: string | undefined) =>
+  (state: RootState): Officer | null => {
+    const {
+      officers: { officers: data },
+    } = state;
+    if (personGuid) {
+      const selected = data.find(({ person_guid }) => person_guid.person_guid === personGuid);
+      if (selected?.person_guid) {
+        return selected;
+      }
+    }
+
+    return null;
+  };
+
 export const selectCurrentOfficer =
   () =>
   (state: RootState): OfficerDto | null => {
diff --git a/frontend/src/app/types/app/agency-types.ts b/frontend/src/app/types/app/agency-types.ts
index b3d4f053c..a0619dfc9 100644
--- a/frontend/src/app/types/app/agency-types.ts
+++ b/frontend/src/app/types/app/agency-types.ts
@@ -1,4 +1,5 @@
 export const AgencyType = {
   COS: "COS",
   CEEB: "EPO",
+  PARKS: "PARKS",
 };
diff --git a/frontend/src/app/types/modal/modal-types.ts b/frontend/src/app/types/modal/modal-types.ts
index 2aae425d9..809f4f34d 100644
--- a/frontend/src/app/types/modal/modal-types.ts
+++ b/frontend/src/app/types/modal/modal-types.ts
@@ -8,6 +8,7 @@ export const DELETE_NOTE = "DELETE_NOTE";
 export const DELETE_ANIMAL_OUTCOME = "DELETE_ANIMAL_OUTCOME";
 export const DELETE_CONFIRM = "DELETE_CONFIRM";
 export const QUICK_CLOSE = "QUICK_CLOSE";
+export const TOGGLE_DEACTIVATE = "TOGGLE_DEACTIVATE";
 
 export interface ModalProps {
   modalType: string;
diff --git a/frontend/src/app/types/person/new-officer.ts b/frontend/src/app/types/person/new-officer.ts
new file mode 100644
index 000000000..e98f0cc9e
--- /dev/null
+++ b/frontend/src/app/types/person/new-officer.ts
@@ -0,0 +1,26 @@
+export interface NewOfficer {
+  user_id: string;
+  create_user_id: string;
+  create_utc_timestamp: Date;
+  update_user_id: string;
+  update_utc_timestamp: Date;
+  auth_user_guid: string;
+  office_guid: string | null;
+  team_code: string | null;
+  person_guid: {
+    first_name: string;
+    middle_name_1: null;
+    middle_name_2: null;
+    last_name: string;
+    create_user_id: string;
+    create_utc_timestamp: Date;
+    update_user_id: string;
+    updateTimestamp: Date;
+  };
+  roles: {
+    user_roles: Array<{ name: string | undefined }>;
+    user_idir: string; //Example : fohe4m5pn8clhkxmlho33sn1r7vr7m67@idir
+  };
+  coms_enrolled_ind: boolean;
+  deactivate_ind: boolean;
+}
diff --git a/frontend/src/app/types/person/person.ts b/frontend/src/app/types/person/person.ts
index 8e2fc4823..e9e07fa8e 100644
--- a/frontend/src/app/types/person/person.ts
+++ b/frontend/src/app/types/person/person.ts
@@ -26,6 +26,7 @@ export interface Officer {
   person_guid: Person;
   user_roles: string[];
   coms_enrolled_ind: boolean;
+  deactivate_ind: boolean;
 }
 
 export interface OfficeGUID {
@@ -50,3 +51,15 @@ export interface CosGeoOrgUnit {
   area_name: string;
   administrative_office_ind: boolean;
 }
+
+export interface CssUser {
+  username: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  attributes: {
+    idir_user_guid: string[];
+    idir_username: string[];
+    display_name: string[];
+  };
+}
diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
index f8092e479..c0e33fc47 100644
--- a/frontend/src/assets/sass/complaint.scss
+++ b/frontend/src/assets/sass/complaint.scss
@@ -18,6 +18,18 @@
   padding-bottom: 16px;
 }
 
+.comp-page-deactivate-banner {
+  display: flex;
+  height: 50px;
+  padding: 6px 12px;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid $bc-gov-warning;
+  background: $bc-gov-warning;
+  margin-bottom: 8px;
+}
+
 .comp-page-title-container {
   display: flex;
   flex-direction: row;
diff --git a/frontend/src/assets/sass/user-management.scss b/frontend/src/assets/sass/user-management.scss
new file mode 100644
index 000000000..978f87683
--- /dev/null
+++ b/frontend/src/assets/sass/user-management.scss
@@ -0,0 +1,31 @@
+@import "./colours.scss";
+
+.user-management-container {
+  max-width: 860px;
+
+  h3 {
+    color: $gray-900;
+    text-align: justify;
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 120%;
+  }
+
+  .admin-subtitle {
+    color: $gray-60;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-top: 31px;
+  }
+
+  .admin-button-groups {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+  }
+
+  .disable-field {
+    color: $gray-600;
+  }
+}
diff --git a/migrations/migrations/V0.34.0__CE-501.sql b/migrations/migrations/V0.34.0__CE-501.sql
new file mode 100644
index 000000000..bfe44ce01
--- /dev/null
+++ b/migrations/migrations/V0.34.0__CE-501.sql
@@ -0,0 +1,6 @@
+--
+-- alter officer table - add deactivate_ind
+--
+ALTER TABLE officer ADD deactivate_ind boolean DEFAULT false;
+
+comment on column officer.deactivate_ind is 'A boolean indicator representing if an officer has been deactivated';
\ No newline at end of file