diff --git a/cypress/e2e/users_spec/UsersCreation.cy.ts b/cypress/e2e/users_spec/UsersCreation.cy.ts
index 947d5b6ce87..d93707617ff 100644
--- a/cypress/e2e/users_spec/UsersCreation.cy.ts
+++ b/cypress/e2e/users_spec/UsersCreation.cy.ts
@@ -43,7 +43,7 @@ describe("User Creation", () => {
     "Please enter valid phone number",
     "Please enter the username",
     "Please enter date in DD/MM/YYYY format",
-    "Please enter the password",
+    "Password is required",
     "Confirm password is required",
     "First Name is required",
     "Last Name is required",
@@ -164,13 +164,10 @@ describe("User Creation", () => {
     cy.verifyNotification("User added successfully");
     userPage.typeInSearchInput(username);
     userPage.checkUsernameText(username);
-    cy.verifyContentPresence("#name", [newUserFirstName]);
+    cy.verifyContentPresence(`#name-${username}`, [newUserFirstName]);
     cy.verifyContentPresence("#role", [role]);
     cy.verifyContentPresence("#district", [district]);
-    cy.verifyContentPresence("#home_facility", [homeFacility]);
-    cy.verifyContentPresence("#qualification", [qualification]);
-    cy.verifyContentPresence("#doctor-experience", [experience]);
-    cy.verifyContentPresence("#medical-council-registration", [regNo]);
+    cy.verifyContentPresence("#home-facility", [homeFacility]);
   });
 
   it("create new user form throwing mandatory field error", () => {
diff --git a/cypress/e2e/users_spec/UsersHomepage.cy.ts b/cypress/e2e/users_spec/UsersHomepage.cy.ts
index 8d86482645b..acc1639e003 100644
--- a/cypress/e2e/users_spec/UsersHomepage.cy.ts
+++ b/cypress/e2e/users_spec/UsersHomepage.cy.ts
@@ -89,6 +89,18 @@ describe("User Homepage", () => {
     pageNavigation.verifyCurrentPageNumber(1);
   });
 
+  it("Switch to list view, search by username and verify the results", () => {
+    userPage.switchToListView();
+    userPage.verifyListView();
+    userPage.checkSearchInputVisibility();
+    userPage.typeInSearchInput(doctorUserName);
+    userPage.checkUrlForUsername(doctorUserName);
+    userPage.checkUsernameText(doctorUserName);
+    userPage.checkUsernameBadgeVisibility(true);
+    userPage.clearSearchInput();
+    userPage.verifyListView();
+  });
+
   afterEach(() => {
     cy.saveLocalStorage();
   });
diff --git a/cypress/e2e/users_spec/UsersManage.cy.ts b/cypress/e2e/users_spec/UsersManage.cy.ts
index 41557e87756..120eb551f57 100644
--- a/cypress/e2e/users_spec/UsersManage.cy.ts
+++ b/cypress/e2e/users_spec/UsersManage.cy.ts
@@ -1,3 +1,4 @@
+import * as dayjs from "dayjs";
 import FacilityHome from "pageobject/Facility/FacilityHome";
 import { advanceFilters } from "pageobject/utils/advanceFilterHelpers";
 
@@ -17,11 +18,14 @@ describe("Manage User", () => {
   const firstNameUserSkill = "Dev";
   const lastNameUserSkill = "Doctor";
   const usernameforworkinghour = "devdistrictadmin";
+  const nurseUsername = "dummynurse1";
+  const doctorUsername = "devdoctor";
+  const doctorToDelete = "dummydoctor12";
   const usernamerealname = "Dummy Doctor";
   const facilitytolinkusername = "Dummy Shifting Center";
   const facilitytolinkskill = "Dummy Facility 40";
   const workinghour = "23";
-  const linkedskill = "General Medicine";
+  const linkedskill = "Immunologist";
 
   before(() => {
     loginPage.loginByRole("districtAdmin");
@@ -34,24 +38,221 @@ describe("Manage User", () => {
     cy.awaitUrl("/users");
   });
 
+  // To Do: Add avatar upload
+  /* it("District Admin can change their own avatar", () => {
+    userPage.typeInSearchInput(nurseUsername);
+    userPage.checkUsernameText(nurseUsername);
+    manageUserPage.clickMoreDetailsButton(nurseUsername);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.verifyChangeAvatarButtonVisible();
+    manageUserPage.clickChangeAvatarButton();
+  }); */
+
+  it("edit a nurse user's basic information and verify its reflection", () => {
+    userPage.typeInSearchInput(nurseUsername);
+    userPage.checkUsernameText(nurseUsername);
+    manageUserPage.clickMoreDetailsButton(nurseUsername);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickBasicInfoViewButton();
+    manageUserPage.clickBasicInfoEditButton();
+    manageUserPage.clearUserBasicInfo();
+    manageUserPage.clickSubmit();
+    manageUserPage.verifyErrorText("First Name is required");
+    manageUserPage.verifyErrorText("Last Name is required");
+    manageUserPage.editUserBasicInfo("Devo", "Districto", "11081999", "Female");
+    manageUserPage.clickSubmit();
+    manageUserPage.clickBasicInfoViewButton();
+    manageUserPage.verifyEditUserDetails(
+      "Devo",
+      "Districto",
+      "8/11/1999",
+      "Female",
+    );
+  });
+
+  it("edit a nurse user's contact information and verify its reflection", () => {
+    userPage.typeInSearchInput(nurseUsername);
+    userPage.checkUsernameText(nurseUsername);
+    manageUserPage.clickMoreDetailsButton(nurseUsername);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickContactInfoViewButton();
+    manageUserPage.clickContactInfoEditButton();
+    manageUserPage.clearUserContactInfo();
+    manageUserPage.clickSubmit();
+    manageUserPage.verifyErrorText("Please enter a valid email address");
+    manageUserPage.verifyErrorText("Please enter valid phone number");
+    manageUserPage.editUserContactInfo("dev@gmail.com", "6234343435");
+    manageUserPage.clickSubmit();
+    manageUserPage.clickContactInfoViewButton();
+    manageUserPage.verifyEditUserContactInfo("dev@gmail.com", "6234343435");
+  });
+
+  it("edit a nurse user's professional information and verify its reflection", () => {
+    userPage.typeInSearchInput(nurseUsername);
+    userPage.checkUsernameText(nurseUsername);
+    manageUserPage.clickMoreDetailsButton(nurseUsername);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickProfessionalInfoViewButton();
+    // Should have qualification field
+    // Should not have years of experience and medical council registration fields
+    manageUserPage.verifyQualificationExist();
+    manageUserPage.verifyYoeAndCouncilRegistrationDoesntExist();
+    manageUserPage.clickProfessionalInfoEditButton();
+    manageUserPage.clearDoctorOrNurseProfessionalInfo(false);
+    manageUserPage.clickSubmit();
+    manageUserPage.verifyErrorText("Qualification is required");
+    manageUserPage.editUserProfessionalInfo("Msc");
+    manageUserPage.clickSubmit();
+    manageUserPage.clickProfessionalInfoViewButton();
+    manageUserPage.verifyEditUserProfessionalInfo("Msc");
+  });
+
+  it("edit a doctor user's professional information and verify its reflection", () => {
+    // Should have qualification, years of experience and medical council registration
+    userPage.typeInSearchInput(usernameToLinkFacilitydoc1);
+    userPage.checkUsernameText(usernameToLinkFacilitydoc1);
+    manageUserPage.clickMoreDetailsButton(usernameToLinkFacilitydoc1);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickProfessionalInfoViewButton();
+    manageUserPage.verifyQualificationExist();
+    manageUserPage.verifyYoeAndCouncilRegistrationExist();
+    manageUserPage.clickProfessionalInfoEditButton();
+    manageUserPage.clearDoctorOrNurseProfessionalInfo(true);
+    manageUserPage.clickSubmit();
+    manageUserPage.verifyErrorText("Qualification is required");
+    manageUserPage.verifyErrorText("Years of experience is required");
+    manageUserPage.verifyErrorText("Medical Council Registration is required");
+    manageUserPage.editUserProfessionalInfo("Msc", "120", "1234567890");
+    manageUserPage.clickSubmit();
+    manageUserPage.verifyErrorText(
+      "Please enter a valid number between 0 and 100.",
+    );
+    manageUserPage.clearDoctorOrNurseProfessionalInfo(true);
+    manageUserPage.editUserProfessionalInfo("Msc", "10", "1234567890");
+    manageUserPage.clickSubmit();
+    manageUserPage.clickProfessionalInfoViewButton();
+    const experienceCommencedOn = dayjs().subtract(10, "year");
+    const formattedDate = dayjs(experienceCommencedOn).format("YYYY-MM-DD");
+    manageUserPage.verifyEditUserProfessionalInfo(
+      "Msc",
+      formattedDate,
+      "1234567890",
+    );
+  });
+
+  it("Nurse user doesn't have edit options or password change option (for other users)", () => {
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+    loginPage.loginManuallyAsNurse();
+    loginPage.ensureLoggedIn();
+    cy.visit("/users");
+    userPage.typeInSearchInput(doctorUsername);
+    userPage.checkUsernameText(doctorUsername);
+    manageUserPage.clickMoreDetailsButton(doctorUsername);
+    manageUserPage.verifyMoreDetailsPage(false);
+    manageUserPage.verifyUsername(doctorUsername);
+    manageUserPage.verifyBasicInfoEditButtonNotExist();
+    manageUserPage.verifyContactInfoEditButtonNotExist();
+    manageUserPage.verifyProfessionalInfoEditButtonNotExist();
+    manageUserPage.verifyPasswordEditButtonNotExist();
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+    loginPage.loginManuallyAsDistrictAdmin();
+    loginPage.ensureLoggedIn();
+  });
+
+  it("Nurse user doesn't have delete option for other users", () => {
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+    loginPage.loginManuallyAsNurse();
+    loginPage.ensureLoggedIn();
+    cy.visit("/users");
+    userPage.typeInSearchInput(doctorUsername);
+    userPage.checkUsernameText(doctorUsername);
+    manageUserPage.clickMoreDetailsButton(doctorUsername);
+    manageUserPage.verifyMoreDetailsPage(false);
+    manageUserPage.verifyDeleteButtonNotExist();
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+    loginPage.loginManuallyAsDistrictAdmin();
+    loginPage.ensureLoggedIn();
+  });
+
+  it("Nurse user can change their own password", () => {
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+    loginPage.loginManuallyAsNurse();
+    loginPage.ensureLoggedIn();
+    cy.visit("/users");
+    userPage.typeInSearchInput(nurseUsername);
+    userPage.checkUsernameText(nurseUsername);
+    manageUserPage.clickMoreDetailsButton(nurseUsername);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickPasswordEditButton();
+    manageUserPage.changePassword("Coronasafe@123", "Coronasafe@1233");
+    manageUserPage.clickSubmit();
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+    loginPage.loginManuallyAsNurse("Coronasafe@1233");
+    loginPage.ensureLoggedIn();
+    cy.visit("/users");
+    userPage.typeInSearchInput(nurseUsername);
+    userPage.checkUsernameText(nurseUsername);
+    manageUserPage.clickMoreDetailsButton(nurseUsername);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickPasswordEditButton();
+    manageUserPage.changePassword("Coronasafe@1233", "Coronasafe@123");
+    manageUserPage.clickSubmit();
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+    loginPage.loginManuallyAsDistrictAdmin();
+    loginPage.ensureLoggedIn();
+  });
+
+  it("District Admin can delete a user", () => {
+    userPage.typeInSearchInput(doctorToDelete);
+    userPage.checkUsernameText(doctorToDelete);
+    manageUserPage.clickMoreDetailsButton(doctorToDelete);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.verifyDeleteButtonVisible();
+    manageUserPage.clickDeleteButton();
+    manageUserPage.clickSubmit();
+    cy.verifyNotification("User Deleted Successfully");
+    cy.closeNotification();
+    userPage.typeInSearchInput(doctorToDelete);
+    userPage.checkUsernameTextDoesNotExist(doctorToDelete);
+  });
+
   it("linking skills for users and verify its reflection in profile", () => {
     // select the district user and select one skill link and verify its profile reflection
     userPage.typeInSearchInput(usernameforworkinghour);
     userPage.checkUsernameText(usernameforworkinghour);
-    manageUserPage.clicklinkedskillbutton();
+    manageUserPage.clickMoreDetailsButton(usernameforworkinghour);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickLinkedSkillTab();
+    cy.wait(500);
+    manageUserPage.verifyLinkedSkillsTabPage();
     manageUserPage.selectSkillFromDropdown(linkedskill);
     manageUserPage.clickAddSkillButton();
-    manageUserPage.clickCloseSlideOver();
-    cy.wait(5000);
-    manageUserPage.clicklinkedskillbutton();
+    cy.wait(500);
     manageUserPage.assertSkillInAddedUserSkills(linkedskill);
-    manageUserPage.clickCloseSlideOver();
-    cy.wait(5000);
+    cy.wait(500);
     manageUserPage.navigateToProfile();
     cy.verifyContentPresence("#username-profile-details", [
       usernameforworkinghour,
     ]);
     manageUserPage.assertSkillInAlreadyLinkedSkills(linkedskill);
+    // unlink the skill
+    manageUserPage.navigateToManageUser();
+    userPage.typeInSearchInput(usernameforworkinghour);
+    userPage.checkUsernameText(usernameforworkinghour);
+    manageUserPage.clickMoreDetailsButton(usernameforworkinghour);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickLinkedSkillTab();
+    manageUserPage.assertSkillInAddedUserSkills(linkedskill);
+    manageUserPage.clickUnlinkSkill();
+    manageUserPage.verifyUnlinkSkillModal();
+    manageUserPage.clickConfirmUnlinkSkill();
   });
 
   it("linking skills for a doctor users and verify its reflection in doctor connect", () => {
@@ -62,13 +263,15 @@ describe("Manage User", () => {
     userPage.selectHomeFacility(facilitytolinkskill);
     advanceFilters.applySelectedFilter();
     userPage.checkUsernameText(usernameToLinkSkill);
-    manageUserPage.clicklinkedskillbutton();
+    manageUserPage.clickMoreDetailsButton(usernameToLinkSkill);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickLinkedSkillTab();
+    manageUserPage.verifyLinkedSkillsTabPage();
     manageUserPage.selectSkillFromDropdown(linkedskill);
     manageUserPage.clickAddSkillButton();
     cy.verifyNotification("Skill added successfully");
     cy.closeNotification();
     manageUserPage.assertSkillInAddedUserSkills(linkedskill);
-    manageUserPage.clickCloseSlideOver();
     // verifying the doctor connect
     facilityHome.navigateToFacilityHomepage();
     facilityHome.typeFacilitySearch(facilitytolinkskill);
@@ -79,18 +282,28 @@ describe("Manage User", () => {
   });
 
   it("add working hour for a user and verify its reflection in card and user profile", () => {
-    // verify mandatory field error and select working hour for a user
+    // verify qualification and yoe and council registration fields are not present
+    // verify field error and add working hour
     userPage.typeInSearchInput(usernameforworkinghour);
     userPage.checkUsernameText(usernameforworkinghour);
-    manageUserPage.clicksetaveragehourbutton();
-    manageUserPage.clearweeklyhourfield();
+    manageUserPage.clickMoreDetailsButton(usernameforworkinghour);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.verifyProfileTabPage();
+    manageUserPage.clickProfessionalInfoViewButton();
+    manageUserPage.verifyQualificationDoesntExist();
+    manageUserPage.verifyYoeAndCouncilRegistrationDoesntExist();
+    manageUserPage.clickProfessionalInfoEditButton();
+    manageUserPage.clearProfessionalInfo();
+    manageUserPage.typeInWeeklyWorkingHours("200");
     manageUserPage.clickSubmit();
-    manageUserPage.verifyErrorText("Value should be between 0 and 168");
-    // verify the data is reflected in user card and profile page
+    manageUserPage.verifyErrorText(
+      "Average weekly working hours must be a number between 0 and 168",
+    );
+    manageUserPage.clearProfessionalInfo();
     manageUserPage.typeInWeeklyWorkingHours(workinghour);
     manageUserPage.clickSubmit();
+    // verify the data is reflected in the page
     manageUserPage.verifyWorkingHours(workinghour);
-    manageUserPage.navigateToProfile();
     manageUserPage.verifyProfileWorkingHours(workinghour);
   });
 
@@ -98,42 +311,51 @@ describe("Manage User", () => {
     // verify the user doesn't have any home facility
     userPage.typeInSearchInput(usernameToLinkFacilitydoc1);
     userPage.checkUsernameText(usernameToLinkFacilitydoc1);
-    manageUserPage.assertHomeFacility("No Home Facility");
+    manageUserPage.assertHomeFacility("No home facility");
+    manageUserPage.clickMoreDetailsButton(usernameToLinkFacilitydoc1);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickLinkedFacilitiesTab();
+    manageUserPage.verifyLinkedFacilitiesTabPage();
     //  Link a new facility and ensure it is under linked facility - doctor username (1)
-    manageUserPage.clickFacilitiesTab();
     manageUserPage.selectFacilityFromDropdown(facilitytolinkusername);
     manageUserPage.clickLinkFacility();
     manageUserPage.assertLinkedFacility(facilitytolinkusername);
     //  Verify in the already linked facility are not present in droplist
     manageUserPage.assertFacilityNotInDropdown(facilitytolinkusername);
-    manageUserPage.clickCloseSlideOver();
+    // Go back to manage user page
+    manageUserPage.navigateToManageUser();
     //  Link a new facility and ensure it is under home facility - doctor username (2)
-    userPage.clearSearchInput();
     userPage.typeInSearchInput(usernameToLinkFacilitydoc2);
     userPage.checkUsernameText(usernameToLinkFacilitydoc2);
-    manageUserPage.clickFacilitiesTab();
+    manageUserPage.clickMoreDetailsButton(usernameToLinkFacilitydoc2);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickLinkedFacilitiesTab();
+    manageUserPage.verifyLinkedFacilitiesTabPage();
     manageUserPage.selectFacilityFromDropdown(facilitytolinkusername);
     manageUserPage.clickLinkFacility();
-    manageUserPage.clickHomeFacilityIcon();
+    manageUserPage.clickLinkedFacilitySettings();
+    manageUserPage.clickSetHomeFacility();
     manageUserPage.assertnotLinkedFacility(facilitytolinkusername);
     manageUserPage.assertHomeFacilitylink(facilitytolinkusername);
-    manageUserPage.clickCloseSlideOver();
     //  verify the home facility doctor id have reflection in user card
-    userPage.clearSearchInput();
+    manageUserPage.navigateToManageUser();
     userPage.typeInSearchInput(usernameToLinkFacilitydoc2);
     userPage.checkUsernameText(usernameToLinkFacilitydoc2);
     manageUserPage.assertHomeFacility(facilitytolinkusername);
     // Link a new facility and unlink the facility from the doctor username (3)
-    userPage.clearSearchInput();
+    manageUserPage.navigateToManageUser();
     userPage.typeInSearchInput(usernameToLinkFacilitydoc3);
     userPage.checkUsernameText(usernameToLinkFacilitydoc3);
-    manageUserPage.clickFacilitiesTab();
+    manageUserPage.clickMoreDetailsButton(usernameToLinkFacilitydoc3);
+    manageUserPage.verifyMoreDetailsPage();
+    manageUserPage.clickLinkedFacilitiesTab();
+    manageUserPage.verifyLinkedFacilitiesTabPage();
     manageUserPage.selectFacilityFromDropdown(facilitytolinkusername);
     manageUserPage.clickLinkFacility();
+    manageUserPage.clickLinkedFacilitySettings();
     manageUserPage.clickUnlinkFacilityButton();
     manageUserPage.clickSubmit();
     manageUserPage.linkedfacilitylistnotvisible();
-    manageUserPage.clickCloseSlideOver();
     //  Go to particular facility doctor connect and all user-id are reflected based on there access
     // Path will be facility page to patient page then doctor connect button
     facilityHome.navigateToFacilityHomepage();
diff --git a/cypress/pageobject/Login/LoginPage.ts b/cypress/pageobject/Login/LoginPage.ts
index 481c6ec3045..64e9cd5f25e 100644
--- a/cypress/pageobject/Login/LoginPage.ts
+++ b/cypress/pageobject/Login/LoginPage.ts
@@ -19,9 +19,11 @@ class LoginPage {
     cy.clickSubmitButton("Login");
   }
 
-  loginManuallyAsNurse(): void {
+  loginManuallyAsNurse(password?: string): void {
     cy.get("input[id='username']").click().type("dummynurse1");
-    cy.get("input[id='password']").click().type("Coronasafe@123");
+    cy.get("input[id='password']")
+      .click()
+      .type(password || "Coronasafe@123");
     cy.clickSubmitButton("Login");
   }
 
diff --git a/cypress/pageobject/Users/ManageUserPage.ts b/cypress/pageobject/Users/ManageUserPage.ts
index 01871acd97d..f5bbce7e95b 100644
--- a/cypress/pageobject/Users/ManageUserPage.ts
+++ b/cypress/pageobject/Users/ManageUserPage.ts
@@ -1,10 +1,6 @@
 export class ManageUserPage {
   assertHomeFacility(expectedText: string) {
-    cy.get("#home_facility").should("contain.text", expectedText);
-  }
-
-  clickFacilitiesTab() {
-    cy.get("#facilities").click();
+    cy.get("#home-facility").should("contain.text", expectedText);
   }
 
   selectFacilityFromDropdown(facilityName: string) {
@@ -15,10 +11,6 @@ export class ManageUserPage {
     cy.typeAndSelectOption("input[name='skill']", skill);
   }
 
-  clickLinkFacility() {
-    cy.get("#link-facility").click();
-  }
-
   assertLinkedFacility(facilityName: string) {
     cy.get("#linked-facility-list").should("contain.text", facilityName);
   }
@@ -40,36 +32,155 @@ export class ManageUserPage {
     cy.get("[role='option']").should("not.exist");
   }
 
-  clickCloseSlideOver() {
-    cy.get("#close-slide-over").click({ force: true });
+  clickLinkedFacilitySettings() {
+    cy.get("#linked-facility-settings").click();
   }
 
-  clickHomeFacilityIcon() {
-    cy.get("#home-facility-icon").click();
+  clickSetHomeFacility() {
+    cy.get("#set-home-facility").click();
   }
 
   clickUnlinkFacilityButton() {
-    cy.get("#unlink-facility-button").click();
+    cy.get("#unlink-facility").click();
+  }
+
+  clickConfirmUnlinkSkill() {
+    cy.get("button[name='confirm-unlink-skill']").click();
+  }
+
+  clickLinkFacility() {
+    cy.get("#link-facility").click();
   }
 
   clickSubmit() {
     cy.get("#submit").click();
   }
 
-  clicksetaveragehourbutton() {
-    cy.get("#avg-workinghour").click();
+  verifyErrorText(expectedError: string) {
+    cy.get(".error-text").first().scrollIntoView();
+    cy.get(".error-text")
+      .should("be.visible")
+      .then(($elements) => {
+        const errorTextArray = Array.from($elements).map(
+          (el) => el.textContent,
+        );
+        expect(errorTextArray).to.include(expectedError);
+      });
   }
 
-  clearweeklyhourfield() {
-    cy.get("#weekly_working_hours").click().clear();
+  clearUserBasicInfo() {
+    cy.get("input[name='first_name']").click().clear();
+    cy.get("input[name='last_name']").click().clear();
   }
 
-  verifyErrorText(expectedError: string) {
-    cy.get(".error-text").should("contain", expectedError).and("be.visible");
+  editUserBasicInfo(
+    fName: string,
+    lName: string,
+    dateOfBirth: string,
+    gender: string,
+  ) {
+    cy.get("input[name='first_name']").click().type(fName);
+    cy.get("input[name='last_name']").click().type(lName);
+    cy.clickAndTypeDate("#date_of_birth", dateOfBirth);
+    cy.get("#gender").click();
+    cy.get("[role='option']").contains(gender).click();
+  }
+
+  verifyEditUserDetails(
+    fName: string,
+    lName: string,
+    dateOfBirth: string,
+    gender: string,
+  ) {
+    cy.get("#view-first_name").should("contain.text", fName);
+    cy.get("#view-last_name").should("contain.text", lName);
+    cy.get("#view-date_of_birth").should("contain.text", dateOfBirth);
+    cy.get("#view-gender").should("contain.text", gender);
+  }
+
+  clearUserContactInfo() {
+    cy.get("input[name='email']").click().clear();
+    cy.get("input[name='phone_number']").click().clear();
+    cy.get("input[name='phone_number_is_whatsapp']").should("be.checked");
+  }
+
+  editUserContactInfo(email: string, phoneNumber: string) {
+    cy.get("input[name='email']").click().type(email);
+    cy.get("input[name='phone_number']").click().type(phoneNumber);
+    cy.get("input[name='phone_number_is_whatsapp']").should("be.checked");
+  }
+
+  verifyEditUserContactInfo(email: string, phoneNumber: string) {
+    cy.get("#view-email").should("contain.text", email);
+    cy.get("#view-phone_number").should("contain.text", phoneNumber);
+    cy.get("#view-whatsapp_number").should("contain.text", phoneNumber);
+  }
+
+  clearDoctorOrNurseProfessionalInfo(yoeAndCouncilRegistration: boolean) {
+    cy.get("input[name='qualification']").click().clear();
+    if (yoeAndCouncilRegistration) {
+      cy.get("input[name='doctor_experience_commenced_on']").click().clear();
+      cy.get("input[name='doctor_medical_council_registration']")
+        .click()
+        .clear();
+    }
+  }
+
+  clearProfessionalInfo() {
+    cy.get("input[name='weekly_working_hours']").click().clear();
+    cy.get("input[name='video_connect_link']").click().clear();
+  }
+
+  editUserProfessionalInfo(
+    qualification: string,
+    yearsOfExperience?: string,
+    medicalCouncilRegistration?: string,
+  ) {
+    cy.get("input[name='qualification']").click().type(qualification);
+    if (yearsOfExperience) {
+      cy.get("input[name='doctor_experience_commenced_on']")
+        .click()
+        .type(yearsOfExperience);
+    }
+    if (medicalCouncilRegistration) {
+      cy.get("input[name='doctor_medical_council_registration']")
+        .click()
+        .type(medicalCouncilRegistration);
+    }
+  }
+
+  verifyEditUserProfessionalInfo(
+    qualification: string,
+    yearsOfExperience?: string,
+    medicalCouncilRegistration?: string,
+  ) {
+    cy.get("#view-qualification").should("contain.text", qualification);
+    if (yearsOfExperience) {
+      cy.get("#view-years_of_experience").should(
+        "contain.text",
+        yearsOfExperience,
+      );
+    }
+    if (medicalCouncilRegistration) {
+      cy.get("#view-doctor_medical_council_registration").should(
+        "contain.text",
+        medicalCouncilRegistration,
+      );
+    }
+  }
+
+  verifyPasswordEditButtonNotExist() {
+    cy.get("#change-edit-password-button").should("not.exist");
+  }
+
+  changePassword(oldPassword: string, newPassword: string) {
+    cy.get("input[name='old_password']").click().type(oldPassword);
+    cy.get("input[name='new_password_1']").click().type(newPassword);
+    cy.get("input[name='new_password_2']").click().type(newPassword);
   }
 
   typeInWeeklyWorkingHours(hours: string) {
-    cy.get("#weekly_working_hours").click().type(hours);
+    cy.get("input[name='weekly_working_hours']").click().type(hours);
   }
 
   navigateToProfile() {
@@ -80,25 +191,174 @@ export class ManageUserPage {
   }
 
   verifyWorkingHours(expectedHours: string) {
-    cy.get("#working-hours").should("contain", `${expectedHours} hours`);
+    cy.get("input[name='weekly_working_hours']").should("be.visible");
+    cy.get("input[name='weekly_working_hours']").should(
+      "have.value",
+      expectedHours,
+    );
   }
 
   verifyProfileWorkingHours(expectedHours: string) {
-    cy.get("#averageworkinghour-profile-details").should(
-      "contain",
+    cy.get("#view-average_weekly_working_hours").should(
+      "contain.text",
       expectedHours,
     );
   }
 
+  navigateToManageUser() {
+    cy.visit("/users");
+  }
+
   clickFacilityPatients() {
     cy.get("#facility-patients").should("be.visible");
     cy.get("#facility-patients").click();
   }
 
-  clicklinkedskillbutton() {
+  clickLinkedSkillTab() {
     cy.get("#skills").click();
   }
 
+  clickLinkedFacilitiesTab() {
+    cy.get("#facilities").click();
+  }
+
+  clickMoreDetailsButton(username: string) {
+    cy.intercept("GET", "**/api/v1/users/**").as("getUserDetails");
+    cy.get(`#more-details-${username}`).click();
+    cy.wait("@getUserDetails");
+  }
+
+  verifyMoreDetailsPage(hasPermissions = true) {
+    cy.get("#username").should("be.visible");
+    cy.get("#role").should("be.visible");
+    cy.get("#usermanagement_tab_nav").should("be.visible");
+    cy.get("#profile").should("be.visible");
+    if (hasPermissions) {
+      cy.get("#facilities").should("be.visible");
+      cy.get("#skills").should("be.visible");
+    }
+    cy.get("#view-username").scrollIntoView();
+    cy.get("#view-username").should("be.visible");
+  }
+
+  verifyChangeAvatarButtonVisible() {
+    cy.get("#change-avatar").should("be.visible");
+  }
+
+  clickChangeAvatarButton() {
+    cy.get("#change-avatar").click();
+  }
+
+  clickBasicInfoViewButton() {
+    cy.get("#basic-info-view-button").scrollIntoView();
+    cy.get("#basic-info-view-button").should("be.visible");
+    cy.get("#basic-info-view-button").click();
+  }
+
+  clickBasicInfoEditButton() {
+    cy.get("#basic-info-edit-button").scrollIntoView();
+    cy.get("#basic-info-edit-button").should("be.visible");
+    cy.get("#basic-info-edit-button").click();
+  }
+
+  clickContactInfoViewButton() {
+    cy.get("#contact-info-view-button").scrollIntoView();
+    cy.get("#contact-info-view-button").should("be.visible");
+    cy.get("#contact-info-view-button").click();
+  }
+
+  clickContactInfoEditButton() {
+    cy.get("#contact-info-edit-button").scrollIntoView();
+    cy.get("#contact-info-edit-button").should("be.visible");
+    cy.get("#contact-info-edit-button").click();
+  }
+
+  clickProfessionalInfoViewButton() {
+    cy.get("#professional-info-view-button").scrollIntoView();
+    cy.get("#professional-info-view-button").should("be.visible");
+    cy.get("#professional-info-view-button").click();
+  }
+
+  clickProfessionalInfoEditButton() {
+    cy.get("#professional-info-edit-button").scrollIntoView();
+    cy.get("#professional-info-edit-button").should("be.visible");
+    cy.get("#professional-info-edit-button").click();
+  }
+
+  clickPasswordEditButton() {
+    cy.get("#change-edit-password-button").scrollIntoView();
+    cy.get("#change-edit-password-button").should("be.visible");
+    cy.get("#change-edit-password-button").click();
+  }
+
+  verifyQualificationDoesntExist() {
+    cy.get("input[name='qualification']").should("not.exist");
+  }
+
+  verifyQualificationExist() {
+    cy.get("#view-qualification").should("be.visible");
+  }
+
+  verifyYoeAndCouncilRegistrationDoesntExist() {
+    cy.get("#view-years_of_experience").should("not.exist");
+    cy.get("#view-doctor_medical_council_registration").should("not.exist");
+  }
+
+  verifyYoeAndCouncilRegistrationExist() {
+    cy.get("#view-years_of_experience").should("be.visible");
+    cy.get("#view-doctor_medical_council_registration").should("be.visible");
+  }
+
+  verifyUsername(username: string) {
+    cy.get("#view-username").should("contain", username);
+  }
+
+  verifyBasicInfoEditButtonNotExist() {
+    cy.get("#basic-info-edit-button").should("not.exist");
+  }
+
+  verifyContactInfoEditButtonNotExist() {
+    cy.get("#contact-info-edit-button").should("not.exist");
+  }
+
+  verifyProfessionalInfoEditButtonNotExist() {
+    cy.get("#professional-info-edit-button").should("not.exist");
+  }
+
+  verifyProfileTabPage() {
+    cy.get("#user-edit-form").should("be.visible");
+  }
+
+  verifyDoctorQualification() {
+    cy.get("#view-qualification").should("be.visible");
+  }
+
+  verifyDoctorQualificationDoesNotExist() {
+    cy.get("#view-qualification").should("not.exist");
+  }
+
+  verifyLinkedSkillsTabPage() {
+    cy.get("#select-skill").scrollIntoView();
+    cy.get("#select-skill").should("be.visible");
+  }
+
+  verifyLinkedFacilitiesTabPage() {
+    cy.get("#select-facility").should("be.visible");
+  }
+
+  verifyDeleteButtonNotExist() {
+    cy.get("[data-testid='user-delete-button']").should("not.exist");
+  }
+
+  verifyDeleteButtonVisible() {
+    cy.get("[data-testid='user-delete-button']").scrollIntoView();
+    cy.get("[data-testid='user-delete-button']").should("be.visible");
+  }
+
+  clickDeleteButton() {
+    cy.get("[data-testid='user-delete-button']").click();
+  }
+
   clickAddSkillButton() {
     cy.intercept("GET", "**/api/v1/skill/**").as("getSkills");
     cy.get("#add-skill-button").click();
@@ -125,10 +385,19 @@ export class ManageUserPage {
     cy.get("#unlink-skill").click();
   }
 
+  verifyUnlinkSkillModal() {
+    cy.get("#unlink-skill-modal-description").should("be.visible");
+    cy.get("button[name='confirm-unlink-skill']").should("be.visible");
+  }
+
   assertSkillInAddedUserSkills(skillName: string) {
     cy.get("#added-user-skills").should("contain", skillName);
   }
 
+  assertSkillNotInAddedUserSkills(skillName: string) {
+    cy.get("#added-user-skills").should("not.contain", skillName);
+  }
+
   assertDoctorConnectVisibility(realName: string) {
     cy.get('*[id="doctor-connect-home-doctor"]').should(
       "contain.text",
diff --git a/cypress/pageobject/Users/UserCreation.ts b/cypress/pageobject/Users/UserCreation.ts
index d8d386402b7..26eaa088e23 100644
--- a/cypress/pageobject/Users/UserCreation.ts
+++ b/cypress/pageobject/Users/UserCreation.ts
@@ -46,6 +46,6 @@ export class UserCreationPage {
   }
 
   clickSaveUserButton() {
-    cy.clickSubmitButton("Save User");
+    cy.clickSubmitButton("Submit");
   }
 }
diff --git a/cypress/pageobject/Users/UserSearch.ts b/cypress/pageobject/Users/UserSearch.ts
index 9d996abd83f..882a4dc8ea6 100644
--- a/cypress/pageobject/Users/UserSearch.ts
+++ b/cypress/pageobject/Users/UserSearch.ts
@@ -23,7 +23,11 @@ export class UserPage {
   }
 
   checkUsernameText(username: string) {
-    cy.get(this.usernameText).should("contain.text", username);
+    cy.get(`${this.usernameText}-${username}`).should("contain.text", username);
+  }
+
+  checkUsernameTextDoesNotExist(username: string) {
+    cy.get(`${this.usernameText}-${username}`).should("not.exist");
   }
 
   checkUsernameBadgeVisibility(shouldBeVisible: boolean) {
@@ -69,24 +73,16 @@ export class UserPage {
   }
 
   verifyMultipleBadgesWithSameId(alreadylinkedusersviews: string[]) {
-    cy.get("#user-view-name").then(($elements) => {
-      const userViews = $elements
-        .map((_, el) => Cypress.$(el).text().trim())
-        .get();
-      let foundMatches = 0;
-
-      alreadylinkedusersviews.forEach((expectedContent) => {
-        const index = userViews.findIndex((actualContent) =>
-          actualContent.includes(expectedContent),
-        );
-        if (index !== -1) {
-          userViews.splice(index, 1); // Remove the matched element
-          foundMatches++;
-        }
-        if (foundMatches === alreadylinkedusersviews.length) {
-          return false; // Break the loop if all matches are found
-        }
-      });
+    cy.wrap(alreadylinkedusersviews).each((username) => {
+      cy.get(`#name-${username}`).scrollIntoView().should("be.visible");
     });
   }
+
+  switchToListView() {
+    cy.get("#user-list-view").click();
+  }
+
+  verifyListView() {
+    cy.get("#user-list-view").should("have.class", "text-white");
+  }
 }
diff --git a/public/locale/en.json b/public/locale/en.json
index d73268df952..9f0bc5ecf12 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -223,6 +223,9 @@
   "URINATION_FREQUENCY__DECREASED": "Decreased",
   "URINATION_FREQUENCY__INCREASED": "Increased",
   "URINATION_FREQUENCY__NORMAL": "Normal",
+  "USERMANAGEMENT_TAB__FACILITIES": "Linked Facilities",
+  "USERMANAGEMENT_TAB__PROFILE": "User Information",
+  "USERMANAGEMENT_TAB__SKILLS": "Linked Skills",
   "VENTILATOR": "Detailed Update",
   "VENTILATOR_MODE__CMV": "Control Mechanical Ventilation (CMV)",
   "VENTILATOR_MODE__CMV_short": "CMV",
@@ -293,6 +296,7 @@
   "add_consultation": "Add consultation",
   "add_consultation_update": "Add Consultation Update",
   "add_details_of_patient": "Add Details of Patient",
+  "add_facility": "Add Facility",
   "add_insurance_details": "Add Insurance Details",
   "add_location": "Add Location",
   "add_new_beds": "Add New Bed(s)",
@@ -304,6 +308,7 @@
   "add_preset": "Add preset",
   "add_prn_prescription": "Add PRN Prescription",
   "add_remarks": "Add remarks",
+  "add_skill": "Add Skill",
   "add_spoke": "Add Spoke Facility",
   "address": "Address",
   "administer": "Administer",
@@ -377,6 +382,7 @@
   "autofilled_fields": "Autofilled Fields",
   "available_features": "Available Features",
   "available_in": "Available in",
+  "avatar_updated_success": "Avatar updated successfully",
   "average_weekly_working_hours": "Average weekly working hours",
   "awaiting_destination_approval": "AWAITING DESTINATION APPROVAL",
   "back": "Back",
@@ -384,6 +390,7 @@
   "back_to_consultation": "Go back to Consultation",
   "back_to_login": "Back to login",
   "base_dosage": "Dosage",
+  "basic_info": "Basic Information",
   "bed_capacity": "Bed Capacity",
   "bed_created_notification_one": "{{count}} Bed created successfully",
   "bed_created_notification_other": "{{count}} Beds created successfully",
@@ -418,6 +425,8 @@
   "category": "Category",
   "caution": "Caution",
   "central_nursing_station": "Central Nursing Station",
+  "change_avatar": "Change Avatar",
+  "change_avatar_note": "JPG, GIF or PNG. 1MB max.",
   "change_file": "Change File",
   "change_password": "Change Password",
   "chat_on_whatsapp": "Chat on Whatsapp",
@@ -431,8 +440,11 @@
   "checking_for_update": "Checking for update",
   "checking_policy_eligibility": "Checking Policy Eligibility",
   "choose_date_time": "Choose Date and Time",
+  "choose_district": "Choose District",
   "choose_file": "Upload From Device",
+  "choose_localbody": "Choose Local Body",
   "choose_location": "Choose Location",
+  "choose_state": "Choose State",
   "claim__add_item": "Add Item",
   "claim__create_claim": "Create Claim",
   "claim__create_preauthorization": "Create Pre Authorization",
@@ -468,7 +480,10 @@
   "clear": "Clear",
   "clear_all_filters": "Clear All Filters",
   "clear_home_facility": "Clear Home Facility",
+  "clear_home_facility_confirm": "Are you sure you want to clear the home facility",
+  "clear_home_facility_error": "Error while clearing home facility. Try again later.",
   "clear_selection": "Clear selection",
+  "clear_skill": "Clear Skill",
   "close": "Close",
   "close_scanner": "Close Scanner",
   "collapse_sidebar": "Collapse Sidebar",
@@ -483,6 +498,7 @@
   "confirm_delete": "Confirm Delete",
   "confirm_discontinue": "Confirm Discontinue",
   "confirm_password": "Confirm Password",
+  "confirm_password_required": "Confirm password is required",
   "confirm_transfer_complete": "Confirm Transfer Complete!",
   "confirmed": "Confirmed",
   "consent__hi_range": "Health Information Range",
@@ -523,7 +539,10 @@
   "consultation_not_filed_description": "Please file a consultation for this patient to continue.",
   "consultation_notes": "General Instructions (Advice)",
   "consultation_updates": "Consultation updates",
-  "contact_info": "Contact Info",
+  "contact_info": "Contact Information",
+  "contact_info_note": "View or update user's contact information",
+  "contact_info_note_self": "View or update your contact information",
+  "contact_info_note_view": "View user's contact information",
   "contact_number": "Contact Number",
   "contact_person": "Name of Contact Person at Facility",
   "contact_person_at_the_facility": "Contact person at the current facility",
@@ -531,6 +550,7 @@
   "contact_phone": "Contact Person Number",
   "contact_with_confirmed_carrier": "Contact with confirmed carrier",
   "contact_with_suspected_carrier": "Contact with suspected carrier",
+  "contact_your_admin_to_add_facilities": "Contact your admin to add facilities",
   "contact_your_admin_to_add_skills": "Contact your admin to add skills",
   "continue": "Continue",
   "continue_watching": "Continue watching",
@@ -578,6 +598,9 @@
   "days": "Days",
   "death_report": "Death Report",
   "delete": "Delete",
+  "delete_account": "Delete account",
+  "delete_account_btn": "Yes, delete this account",
+  "delete_account_note": "Deleting this account will remove all associated data and cannot be undone.",
   "delete_facility": "Delete Facility",
   "delete_item": "Delete {{name}}",
   "delete_record": "Delete Record",
@@ -621,6 +644,9 @@
   "disease_status": "Disease status",
   "district": "District",
   "district_program_management_supporting_unit": "District Program Management Supporting Unit",
+  "dob_format": "Please enter date in DD/MM/YYYY format",
+  "doctor_experience_error": "Please enter a valid number between 0 and 100.",
+  "doctor_experience_required": "Years of experience is required",
   "doctor_s_medical_council_registration": "Doctor's Medical Council Registration",
   "doctors_name": "Doctor's Name",
   "domestic_healthcare_support": "Domestic healthcare support",
@@ -640,6 +666,9 @@
   "duplicate_patient_record_rejection": "I confirm that the suspect / patient I want to create is not on the list.",
   "edit": "Edit",
   "edit_avatar": "Edit Avatar",
+  "edit_avatar_note": "Change the avatar of the user",
+  "edit_avatar_note_self": "Change your avatar",
+  "edit_avatar_permission_error": "You do not have permissions to edit the avatar of this user",
   "edit_caution_note": "A new prescription will be added to the consultation with the edited details and the current prescription will be discontinued.",
   "edit_cover_photo": "Edit Cover Photo",
   "edit_history": "Edit History",
@@ -692,6 +721,8 @@
   "enter_mobile_otp": "Enter OTP sent to the given mobile number",
   "enter_otp": "Enter OTP sent to the registered mobile with the respective ID",
   "enter_valid_age": "Please Enter Valid Age",
+  "enter_valid_dob": "Enter a valid date of birth",
+  "enter_valid_dob_age": "Please enter an age greater than 15 years",
   "entered-in-error": "Entered in error",
   "error_404": "Error 404",
   "error_deleting_shifting": "Error while deleting Shifting record",
@@ -709,6 +740,7 @@
   "facility": "Facility",
   "facility_consent_requests_page_title": "Patient Consent List",
   "facility_district_name": "Facility/District Name",
+  "facility_linked_success": "Facility linked successfully",
   "facility_name": "Facility Name",
   "facility_preference": "Facility preference",
   "facility_search_placeholder": "Search by Facility / District Name",
@@ -742,10 +774,12 @@
   "filter_by_category": "Filter by category",
   "filters": "Filters",
   "first_name": "First Name",
+  "first_name_required": "First Name is required",
   "footer_body": "Open Healthcare Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. Open Healthcare Network CARE is a Digital Public Good recognised by the United Nations.",
   "forget_password": "Forgot password?",
   "forget_password_instruction": "Enter your username, and if it exists, we will send you a link to reset your password.",
   "frequency": "Frequency",
+  "from_user": "from User",
   "full_name": "Full Name",
   "full_screen": "Full Screen",
   "gender": "Gender",
@@ -794,6 +828,9 @@
   "hide": "Hide",
   "high": "High",
   "home_facility": "Home Facility",
+  "home_facility_cleared_success": "Home Facility cleared successfully",
+  "home_facility_updated_error": "Error while updating Home Facility",
+  "home_facility_updated_success": "Home Facility updated successfully",
   "hubs": "Hub Facilities",
   "i_declare": "I hereby declare that:",
   "icd11_as_recommended": "As per ICD-11 recommended by WHO",
@@ -812,7 +849,7 @@
   "insurer_name_required": "Insurer Name is required",
   "international_mobile": "International Mobile",
   "invalid_asset_id_msg": "Oops! The asset ID you entered does not appear to be valid.",
-  "invalid_email": "Please Enter a Valid Email Address",
+  "invalid_email": "Please enter a valid email address",
   "invalid_ip_address": "Invalid IP Address",
   "invalid_link_msg": "It appears that the password reset link you have used is either invalid or expired. Please request a new password reset link.",
   "invalid_password": "Password doesn't meet the requirements",
@@ -822,7 +859,11 @@
   "invalid_phone_number": "Invalid Phone Number",
   "invalid_pincode": "Invalid Pincode",
   "invalid_reset": "Invalid Reset",
+  "invalid_url": "Please enter a valid url",
+  "invalid_url_http_https": "URL should start with http:// or https://",
+  "invalid_url_javascript": "URL should not include javascript, please enter a valid URL.",
   "invalid_username": "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.",
+  "invalid_username_format": "Please enter a 4-16 characters long username with lowercase letters, digits and . _ - only and it should not start or end with . _ -",
   "inventory_management": "Inventory Management",
   "investigation_report": "Investigation Report",
   "investigation_report_for_{{name}}": "Investigation Report for {{name}}",
@@ -845,6 +886,7 @@
   "is_emergency": "Is emergency",
   "is_emergency_case": "Is emergency case",
   "is_it_upshift": "is it upshift",
+  "is_phone_a_whatsapp_number": "Is the phone number a WhatsApp number?",
   "is_pregnant": "Is pregnant",
   "is_this_an_emergency": "Is this an emergency?",
   "is_this_an_upshift": "Is this an upshift?",
@@ -861,6 +903,7 @@
   "last_edited": "Last Edited",
   "last_modified": "Last Modified",
   "last_name": "Last Name",
+  "last_name_required": "Last Name is required",
   "last_online": "Last Online",
   "last_serviced_on": "Last Serviced On",
   "last_updated_by": "Last updated by",
@@ -872,8 +915,11 @@
   "link_abha_profile": "Link ABHA Profile",
   "link_camera_and_bed": "Link bed to Camera",
   "link_existing_abha_profile": "Already have an ABHA number",
+  "link_facility_error": "Error while linking facility. Try again later.",
   "linked_facilities": "Linked Facilities",
+  "linked_facilities_note": "Add or remove facilities and set or change the Home Facility",
   "linked_skills": "Linked Skills",
+  "linked_skills_note": "Search and select skills to add to the skill set",
   "liquid_oxygen_capacity": "Liquid Oxygen Capacity",
   "list_view": "List View",
   "litres": "Litres",
@@ -901,6 +947,7 @@
   "manage_bed_presets": "Manage Presets of Bed",
   "manage_prescriptions": "Manage Prescriptions",
   "manage_preset": "Manage preset {{ name }}",
+  "manage_user": "Manage User",
   "manufacturer": "Manufacturer",
   "map_acronym": "M.A.P.",
   "mark_all_as_read": "Mark all as Read",
@@ -915,6 +962,7 @@
   "measured_before": "Measured before",
   "medical": "Medical",
   "medical_council_registration": "Medical Council Registration",
+  "medical_council_registration_required": "Medical Council Registration is required",
   "medical_worker": "Medical Worker",
   "medicine": "Medicine",
   "medicine_administration_history": "Medicine Administration History",
@@ -941,6 +989,7 @@
   "modified_date": "Modified Date",
   "modified_on": "Modified On",
   "monitor": "Monitor",
+  "more_details": "More details",
   "more_info": "More Info",
   "move_to_onvif_preset": "Move to an ONVIF Preset",
   "moving_camera": "Moving Camera",
@@ -951,6 +1000,8 @@
   "never": "never",
   "new_password": "New Password",
   "new_password_confirmation": "Confirm New Password",
+  "new_password_same_as_old": "New password is same as old password, please enter a different new password.",
+  "new_password_validation": "New password is not valid.",
   "next_sessions": "Next Sessions",
   "no": "No",
   "no_attachments_found": "This communication has no attachments.",
@@ -966,7 +1017,7 @@
   "no_duplicate_facility": "You should not create duplicate facilities",
   "no_facilities": "No Facilities found",
   "no_files_found": "No {{type}} files found",
-  "no_home_facility": "No home facility assigned",
+  "no_home_facility": "No home facility",
   "no_image_found": "No image found",
   "no_investigation": "No investigation Reports found",
   "no_investigation_suggestions": "No Investigation Suggestions",
@@ -977,6 +1028,7 @@
   "no_notices_for_you": "No notices for you.",
   "no_patients_found": "No Patients Found",
   "no_patients_to_show": "No patients to show.",
+  "no_permission_to_view_page": "You do not have permissions to view this page",
   "no_policy_added": "No Insurance Policy Added",
   "no_policy_found": "No Insurance Policy Found for this Patient",
   "no_presets": "No Presets",
@@ -1032,10 +1084,17 @@
   "pain_chart_description": "Mark region and intensity of pain",
   "passport_number": "Passport Number",
   "password": "Password",
-  "password_mismatch": "Password and confirm password must be same.",
+  "password_length_validation": "Password must be at least 8 characters long",
+  "password_lowercase_validation": "Password must contain at least one lowercase letter (a-z)",
+  "password_mismatch": "New password and confirm password must be the same.",
+  "password_number_validation": "Password must contain at least one number (0-9)",
+  "password_required": "Password is required",
   "password_reset_failure": "Password Reset Failed",
   "password_reset_success": "Password Reset successfully",
   "password_sent": "Password Reset Email Sent",
+  "password_update_error": "Error while updating password. Try again later.",
+  "password_uppercase_validation": "Password must contain at least one uppercase letter (A-Z)",
+  "password_validation": "Password must contain at least: 8 characters, 1 uppercase letter (A-Z), 1 lowercase letter (a-z), and 1 number (0-9)",
   "patient": "Patient",
   "patient-notes": "Notes",
   "patient__general-info": "General Info",
@@ -1082,19 +1141,31 @@
   "permanent_address": "Permanent Address",
   "permission_denied": "You do not have permission to perform this action",
   "personal_information": "Personal Information",
+  "personal_information_note": "View or update user's personal information",
+  "personal_information_note_self": "View or update your personal information",
+  "personal_information_note_view": "View user's personal information",
   "phone": "Phone",
   "phone_no": "Phone no.",
   "phone_number": "Phone Number",
   "phone_number_at_current_facility": "Phone Number of Contact person at current Facility",
   "pincode": "Pincode",
   "please_assign_bed_to_patient": "Please assign a bed to this patient",
+  "please_confirm_password": "Please confirm your new password.",
   "please_enter_a_reason_for_the_shift": "Please enter a reason for the shift.",
+  "please_enter_current_password": "Please enter your current password.",
+  "please_enter_new_password": "Please enter your new password.",
+  "please_enter_username": "Please enter the username",
   "please_select_a_facility": "Please select a facility",
   "please_select_breathlessness_level": "Please select Breathlessness Level",
+  "please_select_district": "Please select the district",
   "please_select_facility_type": "Please select Facility Type",
+  "please_select_gender": "Please select the Gender",
+  "please_select_localbody": "Please select the local body",
   "please_select_patient_category": "Please select Patient Category",
   "please_select_preferred_vehicle_type": "Please select Preferred Vehicle Type",
+  "please_select_state": "Please select the state",
   "please_select_status": "Please select Status",
+  "please_select_user_type": "Please select the User Type",
   "please_upload_a_csv_file": "Please Upload A CSV file",
   "policy": "Policy",
   "policy__insurer": "Insurer",
@@ -1138,9 +1209,14 @@
   "procedure_suggestions": "Procedure Suggestions",
   "procedures_select_placeholder": "Select procedures to add details",
   "process_transcript": "Process Again",
+  "professional_info": "Professional Information",
+  "professional_info_note": "View or update user's professional information",
+  "professional_info_note_self": "View or update your professional information",
+  "professional_info_note_view": "View user's professional information",
   "profile": "Profile",
   "provisional": "Provisional",
   "qualification": "Qualification",
+  "qualification_required": "Qualification is required",
   "raise_consent_request": "Raise a consent request to fetch patient records over ABDM",
   "ration_card__APL": "APL",
   "ration_card__BPL": "BPL",
@@ -1169,6 +1245,9 @@
   "reload": "Reload",
   "remove": "Remove",
   "rename": "Rename",
+  "replace_home_facility": "Replace Home Facility",
+  "replace_home_facility_confirm": "Are you sure you want to replace",
+  "replace_home_facility_confirm_as": "as home facility for user",
   "reply": "Reply",
   "report": "Report",
   "req_atleast_one_digit": "Require at least one digit",
@@ -1187,6 +1266,7 @@
   "resend_otp": "Resend OTP",
   "reset": "Reset",
   "reset_password": "Reset Password",
+  "reset_password_note_self": "Enter your current password, then create and confirm your new password",
   "resource": "Resource",
   "resource_approving_facility": "Resource approving facility",
   "resource_origin_facility": "Origin Facility",
@@ -1207,6 +1287,7 @@
   "review_missed": "Review Missed",
   "revoked_on": "Revoked On",
   "right": "Right",
+  "role": "Role",
   "route": "Route",
   "routine": "Routine",
   "sample_collection_date": "Sample Collection Date",
@@ -1263,6 +1344,7 @@
   "session_expired": "Session Expired",
   "session_expired_msg": "It appears that your session has expired. This could be due to inactivity. Please login again to continue.",
   "set_average_weekly_working_hours_for": "Set Average weekly working hours for",
+  "set_home_facility": "Set as home facility",
   "set_your_local_language": "Set your local language",
   "settings_and_filters": "Settings and Filters",
   "severity_of_breathlessness": "Severity of Breathlessness",
@@ -1284,6 +1366,8 @@
   "show_patient_presets": "Show Patient Presets",
   "show_unread_notifications": "Show Unread",
   "sign_out": "Sign Out",
+  "skill_add_error": "Error while adding skill",
+  "skill_added_successfully": "Skill added successfully",
   "skills": "Skills",
   "social_profile": "Social Profile",
   "socioeconomic_status": "Socioeconomic status",
@@ -1363,6 +1447,19 @@
   "unlink_asset_bed_and_presets": "Delete linked presets and unlink bed",
   "unlink_asset_bed_caution": "This action will also delete all presets that are associated to this camera and bed.",
   "unlink_camera_and_bed": "Unlink this bed from this camera",
+  "unlink_facility": "Unlink Facility",
+  "unlink_facility_access": "The user will lose access to the facility",
+  "unlink_facility_confirm": "Are you sure you want to unlink the facility",
+  "unlink_facility_error": "Error while unlinking facility. Try again later.",
+  "unlink_facility_success": "Facility unlinked successfully",
+  "unlink_home_facility_error": "Error while unlinking home facility. Try again later.",
+  "unlink_home_facility_success": "Home Facility cleared successfully",
+  "unlink_skill": "Unlink Skill",
+  "unlink_skill_access": "The user will not have the skill associated anymore.",
+  "unlink_skill_confirm": "Are you sure you want to unlink the skill",
+  "unlink_skill_error": "Error while unlinking skill. Try again later.",
+  "unlink_skill_success": "Skill unlinked successfully",
+  "unlink_this_facility": "Unlink Facility",
   "unsubscribe": "Unsubscribe",
   "unsubscribe_failed": "Unsubscribe failed.",
   "unsubscribed_successfully": "Unsubscribed Successfully.",
@@ -1397,9 +1494,22 @@
   "upload_report": "Upload Report",
   "uploading": "Uploading",
   "use_existing_abha_address": "Use Existing ABHA Address",
-  "user_deleted_successfuly": "User Deleted Successfuly",
+  "user_add_error": "Error while adding User",
+  "user_added_successfully": "User added successfully",
+  "user_delete_error": "Error while deleting User",
+  "user_deleted_successfully": "User Deleted Successfully",
+  "user_details": "User Details",
+  "user_details_update_error": "Error while updating user details",
+  "user_details_update_success": "User details updated successfully",
   "user_management": "User Management",
+  "user_qualifications": "Qualifications",
+  "user_qualifications_note": "Enter appropriate qualifications for this user",
+  "user_type": "User Type",
   "username": "Username",
+  "username_already_exists": "This username already exists",
+  "username_available": "Username is available",
+  "username_not_available": "Username is not available",
+  "username_userdetails_not_found": "Unable to fetch details as username or user details not found",
   "users": "Users",
   "vacant": "Vacant",
   "vaccinated": "Vaccinated",
@@ -1433,6 +1543,8 @@
   "view_patients": "View Patients",
   "view_update_patient_files": "View/Update patient files",
   "view_updates": "View Updates",
+  "view_user": "View User",
+  "view_user_profile": "View Profile",
   "view_users": "View Users",
   "village": "Village",
   "virtual_nursing_assistant": "Virtual Nursing Assistant",
@@ -1445,10 +1557,12 @@
   "volunteer_unassigned": "Volunteer unassigned successfuly",
   "ward": "Ward",
   "warranty_amc_expiry": "Warranty / AMC Expiry",
+  "weekly_working_hours_error": "Average weekly working hours must be a number between 0 and 168",
   "what_facility_assign_the_patient_to": "What facility would you like to assign the patient to",
   "whatsapp_number": "Whatsapp Number",
   "why_the_asset_is_not_working": "Why the asset is not working?",
   "width": "Width ({{unit}})",
+  "with": "with",
   "working_status": "Working Status",
   "year_of_birth": "Year of Birth",
   "years": "years",
diff --git a/src/Routers/routes/UserRoutes.tsx b/src/Routers/routes/UserRoutes.tsx
index ff7212a02e2..cc668e2fee6 100644
--- a/src/Routers/routes/UserRoutes.tsx
+++ b/src/Routers/routes/UserRoutes.tsx
@@ -1,5 +1,6 @@
 import ManageUsers from "@/components/Users/ManageUsers";
-import { UserAdd } from "@/components/Users/UserAdd";
+import UserAdd from "@/components/Users/UserAdd";
+import UserHome from "@/components/Users/UserHome";
 import UserProfile from "@/components/Users/UserProfile";
 
 import { AppRoutes } from "@/Routers/AppRouter";
@@ -7,6 +8,12 @@ import { AppRoutes } from "@/Routers/AppRouter";
 const UserRoutes: AppRoutes = {
   "/users": () => <ManageUsers />,
   "/users/add": () => <UserAdd />,
+  "/users/:username": ({ username }) => (
+    <UserHome username={username} tab={"profile"} />
+  ),
+  "/users/:username/:tab": ({ username, tab }) => (
+    <UserHome username={username} tab={tab} />
+  ),
   "/user/profile": () => <UserProfile />,
 };
 
diff --git a/src/Utils/permissions.ts b/src/Utils/permissions.ts
index 35f12715eff..41587d2dcfd 100644
--- a/src/Utils/permissions.ts
+++ b/src/Utils/permissions.ts
@@ -2,29 +2,58 @@ import { UserModel } from "@/components/Users/models";
 
 import { USER_TYPES, UserRole } from "@/common/constants";
 
+const checkIfStateOrDistrictAdminInSameLocation = (
+  authUser: UserModel,
+  targetUser: UserModel,
+) => {
+  const hasLocation = Boolean(
+    targetUser.state_object || targetUser.district_object,
+  );
+
+  const isStateAdminOfSameState =
+    authUser.user_type === "StateAdmin" &&
+    targetUser.state_object?.id === authUser.state;
+
+  const isDistrictAdminOfSameDistrict =
+    authUser.user_type === "DistrictAdmin" &&
+    targetUser.district_object?.id === authUser.district;
+
+  return (
+    hasLocation && (isStateAdminOfSameState || isDistrictAdminOfSameDistrict)
+  );
+};
+
 export const showUserDelete = (authUser: UserModel, targetUser: UserModel) => {
   // Auth user should be higher in hierarchy than target user
+  // User can't delete their own account
   if (
     USER_TYPES.indexOf(authUser.user_type) <=
-    USER_TYPES.indexOf(targetUser.user_type)
+      USER_TYPES.indexOf(targetUser.user_type) ||
+    authUser.username === targetUser.username
   )
     return false;
 
-  if (
-    authUser.user_type === "StateAdmin" &&
-    targetUser.state_object?.id === authUser.state
-  )
-    return true;
-
-  if (
-    authUser.user_type === "DistrictAdmin" &&
-    targetUser.district_object?.id === authUser.district
-  )
-    return true;
+  return checkIfStateOrDistrictAdminInSameLocation(authUser, targetUser);
+};
 
-  return false;
+export const showUserPasswordReset = (
+  authUser: UserModel,
+  targetUser: UserModel,
+) => {
+  return authUser.username === targetUser.username;
 };
 
+export const showAvatarEdit = (authUser: UserModel, targetUser: UserModel) => {
+  return authUser.username === targetUser.username || authUser.is_superuser;
+};
+export const editUserPermissions = (
+  authUser: UserModel,
+  targetUser: UserModel,
+) => {
+  if (authUser.username === targetUser.username || authUser.is_superuser)
+    return true;
+  return checkIfStateOrDistrictAdminInSameLocation(authUser, targetUser);
+};
 export const CameraFeedPermittedUserTypes: UserRole[] = [
   "DistrictAdmin",
   "StateAdmin",
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index a7e6a0a78ec..5588e048bd2 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -217,7 +217,9 @@ export const formatCurrency = (price: number) =>
   });
 
 export const isUserOnline = (user: { last_login: DateLike }) => {
-  return dayjs().subtract(5, "minutes").isBefore(user.last_login);
+  return user.last_login
+    ? dayjs().subtract(5, "minutes").isBefore(user.last_login)
+    : false;
 };
 
 export interface CountryData {
diff --git a/src/common/validation.tsx b/src/common/validation.tsx
index 99b4342fbf6..f091303a452 100644
--- a/src/common/validation.tsx
+++ b/src/common/validation.tsx
@@ -57,6 +57,11 @@ export const validatePincode = (pincode: string) => {
   return pattern.test(pincode);
 };
 
+export const validateNumber = (number: string) => {
+  const pattern = /^[0-9]+$/;
+  return pattern.test(number);
+};
+
 export const checkIfValidIP = (str: string) => {
   // Regular expression to check if string is a IP address
   const regexExp =
diff --git a/src/components/Auth/ResetPassword.tsx b/src/components/Auth/ResetPassword.tsx
index 11b541e276c..f993b621062 100644
--- a/src/components/Auth/ResetPassword.tsx
+++ b/src/components/Auth/ResetPassword.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import { Cancel, Submit } from "@/components/Common/ButtonV2";
 import TextFormField from "@/components/Form/FormFields/TextFormField";
-import { validateRule } from "@/components/Users/UserAdd";
+import { validateRule } from "@/components/Users/UserAddEditForm";
 
 import { LocalStorageKeys } from "@/common/constants";
 import { validatePassword } from "@/common/validation";
@@ -134,22 +134,22 @@ const ResetPassword = (props: ResetPasswordProps) => {
                 <div className="text-small mb-2 pl-2 text-secondary-500">
                   {validateRule(
                     form.password?.length >= 8,
-                    "Password should be atleast 8 characters long",
+                    t("password_length_validation"),
                     !form.password,
                   )}
                   {validateRule(
                     form.password !== form.password.toUpperCase(),
-                    "Password should contain at least 1 lowercase letter",
+                    t("password_lowercase_validation"),
                     !form.password,
                   )}
                   {validateRule(
                     form.password !== form.password.toLowerCase(),
-                    "Password should contain at least 1 uppercase letter",
+                    t("password_uppercase_validation"),
                     !form.password,
                   )}
                   {validateRule(
                     /\d/.test(form.password),
-                    "Password should contain at least 1 number",
+                    t("password_number_validation"),
                     !form.password,
                   )}
                 </div>
@@ -168,7 +168,7 @@ const ResetPassword = (props: ResetPasswordProps) => {
                 form.password.length > 0 &&
                 validateRule(
                   form.confirm === form.password,
-                  "Confirm password should match the entered password",
+                  t("password_mismatch"),
                   !form.password && form.password.length > 0,
                 )}
             </div>
diff --git a/src/components/Common/ConfirmDialog.tsx b/src/components/Common/ConfirmDialog.tsx
index 0183fc1d651..5fff5d9f8fb 100644
--- a/src/components/Common/ConfirmDialog.tsx
+++ b/src/components/Common/ConfirmDialog.tsx
@@ -13,6 +13,7 @@ type ConfirmDialogProps = {
   onConfirm: () => void;
   children?: React.ReactNode;
   cancelLabel?: string;
+  name?: string;
 };
 
 const ConfirmDialog = ({
@@ -22,6 +23,7 @@ const ConfirmDialog = ({
   onConfirm,
   cancelLabel,
   children,
+  name,
   ...props
 }: ConfirmDialogProps) => {
   return (
@@ -29,7 +31,12 @@ const ConfirmDialog = ({
       {children}
       <div className="mt-6 flex w-full flex-col justify-end gap-2 md:flex-row">
         <Cancel onClick={props.onClose} label={cancelLabel} />
-        <Submit onClick={onConfirm} variant={variant} disabled={disabled}>
+        <Submit
+          name={name ?? "submit"}
+          onClick={onConfirm}
+          variant={variant}
+          disabled={disabled}
+        >
           {action}
         </Submit>
       </div>
diff --git a/src/components/Common/FacilitySelect.tsx b/src/components/Common/FacilitySelect.tsx
index e4397cbcb9c..4c0a6629bec 100644
--- a/src/components/Common/FacilitySelect.tsx
+++ b/src/components/Common/FacilitySelect.tsx
@@ -27,6 +27,7 @@ interface FacilitySelectProps {
   allowNone?: boolean;
   placeholder?: string;
   filter?: (facilities: FacilityModel) => boolean;
+  id?: string;
 }
 
 export const FacilitySelect = (props: FacilitySelectProps) => {
@@ -50,6 +51,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
     errors = "",
     placeholder,
     filter,
+    id,
   } = props;
 
   const facilitySearch = useCallback(
@@ -88,6 +90,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
 
   return (
     <AutoCompleteAsync
+      id={id}
       placeholder={placeholder}
       name={name}
       required={required}
diff --git a/src/components/Common/LanguageSelector.tsx b/src/components/Common/LanguageSelector.tsx
index 5904f2cf7c7..d84ac02296a 100644
--- a/src/components/Common/LanguageSelector.tsx
+++ b/src/components/Common/LanguageSelector.tsx
@@ -2,8 +2,6 @@ import careConfig from "@careConfig";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
 import { classNames } from "@/Utils/utils";
 import { LANGUAGES } from "@/i18n";
 
@@ -27,11 +25,11 @@ export const LanguageSelector = (props: any) => {
   );
 
   return (
-    <div className="relative flex w-full items-center justify-end">
+    <div className="relative flex items-center">
       <select
         className={classNames(
           props.className,
-          "cursor-pointer appearance-none rounded-md py-2 pl-2 pr-10 focus:border-primary-500 focus:outline-none focus:ring-primary-500",
+          "w-full cursor-pointer appearance-none rounded-md py-2 pl-2 pr-10 focus:border-primary-500 focus:outline-none focus:ring-primary-500",
         )}
         id="language-selector"
         name="language"
@@ -44,12 +42,6 @@ export const LanguageSelector = (props: any) => {
           </option>
         ))}
       </select>
-      <div className="pointer-events-none absolute right-0 z-10 mr-1 h-auto w-8">
-        <CareIcon
-          icon="l-angle-down"
-          className={`text-xl ${props.className}`}
-        />
-      </div>
     </div>
   );
 };
diff --git a/src/components/Common/Page.tsx b/src/components/Common/Page.tsx
index 558d1432182..874bfce4ad6 100644
--- a/src/components/Common/Page.tsx
+++ b/src/components/Common/Page.tsx
@@ -17,6 +17,7 @@ interface PageProps extends PageTitleProps {
    * @default false
    **/
   collapseSidebar?: boolean;
+  hideTitleOnPage?: boolean;
 }
 
 export default function Page(props: PageProps) {
@@ -51,6 +52,7 @@ export default function Page(props: PageProps) {
           focusOnLoad={props.focusOnLoad}
           onBackClick={props.onBackClick}
           isInsidePage={true}
+          hideTitleOnPage={props.hideTitleOnPage}
         />
         {props.options}
       </div>
diff --git a/src/components/Common/PageTitle.tsx b/src/components/Common/PageTitle.tsx
index ecdadec2d62..b7af8f0eaa8 100644
--- a/src/components/Common/PageTitle.tsx
+++ b/src/components/Common/PageTitle.tsx
@@ -19,6 +19,7 @@ export interface PageTitleProps {
   // New props for Breadcrumbs
   hideBack?: boolean;
   backUrl?: string;
+  hideTitleOnPage?: boolean;
   onBackClick?: () => boolean | void;
 }
 
@@ -35,6 +36,7 @@ export default function PageTitle({
   hideBack = false,
   backUrl,
   onBackClick,
+  hideTitleOnPage,
 }: PageTitleProps) {
   const divRef = useRef<any>();
 
@@ -70,7 +72,9 @@ export default function PageTitle({
         )}
       >
         <div className="flex items-center">
-          <h2 className="ml-0 text-2xl leading-tight">{title}</h2>
+          {!hideTitleOnPage && (
+            <h2 className="ml-0 text-2xl leading-tight">{title}</h2>
+          )}
         </div>
         {componentRight}
       </div>
diff --git a/src/components/Common/SkillSelect.tsx b/src/components/Common/SkillSelect.tsx
index 74ddbba5d83..eff16d1380e 100644
--- a/src/components/Common/SkillSelect.tsx
+++ b/src/components/Common/SkillSelect.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 
 import AutoCompleteAsync from "@/components/Form/AutoCompleteAsync";
-import { SkillModel, SkillObjectModel } from "@/components/Users/models";
+import { SkillModel } from "@/components/Users/models";
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
@@ -15,8 +15,8 @@ interface SkillSelectProps {
   multiple?: boolean;
   showNOptions?: number;
   disabled?: boolean;
-  selected: SkillObjectModel | SkillObjectModel[] | null;
-  setSelected: (selected: SkillObjectModel) => void;
+  selected: SkillModel | null;
+  setSelected: (selected: SkillModel | null) => void;
   userSkills?: SkillModel[];
 }
 
diff --git a/src/components/Common/Tabs.tsx b/src/components/Common/Tabs.tsx
index 9a549cfabcf..9c375db618e 100644
--- a/src/components/Common/Tabs.tsx
+++ b/src/components/Common/Tabs.tsx
@@ -8,7 +8,7 @@ export default function Tabs(props: {
   className?: string;
   currentTab: string | number;
   onTabChange: (value: string | number) => void;
-  tabs: { text: ReactNode; value: string | number }[];
+  tabs: { text: ReactNode; value: string | number; id?: string }[];
 }) {
   const { className, currentTab, onTabChange, tabs } = props;
   const ref = useRef<HTMLDivElement>(null);
@@ -60,6 +60,7 @@ export default function Tabs(props: {
         {tabs.map((tab, i) => (
           <button
             key={i}
+            id={tab?.id}
             onClick={() => onTabChange(tab.value)}
             className={`${currentTab === tab.value ? "text-white" : "text-primary-500 hover:text-primary-600"} flex-1 whitespace-nowrap px-6 py-2 text-sm font-semibold transition-all`}
           >
diff --git a/src/components/Common/UserColumns.tsx b/src/components/Common/UserColumns.tsx
new file mode 100644
index 00000000000..99c8883b77b
--- /dev/null
+++ b/src/components/Common/UserColumns.tsx
@@ -0,0 +1,36 @@
+import { UserModel } from "../Users/models";
+
+export type userChildProps = {
+  userData: UserModel;
+  username: string;
+  refetchUserData?: () => void;
+};
+
+export default function UserColumns({
+  heading,
+  note,
+  Child,
+  childProps,
+}: {
+  heading: string;
+  note: string;
+  Child: (childProps: userChildProps) => JSX.Element | undefined;
+  childProps: userChildProps;
+}) {
+  return (
+    <section
+      className="flex flex-col gap-5 sm:flex-row"
+      aria-labelledby="section-heading"
+    >
+      <div className="sm:w-1/4">
+        <div className="my-1 text-sm leading-5">
+          <p className="mb-2 font-semibold">{heading}</p>
+          <p className="text-secondary-600">{note}</p>
+        </div>
+      </div>
+      <div className="sm:w-3/4">
+        <Child {...childProps} />
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Common/UserDetails.tsx b/src/components/Common/UserDetails.tsx
index 2e4355f98bb..b304ac7216d 100644
--- a/src/components/Common/UserDetails.tsx
+++ b/src/components/Common/UserDetails.tsx
@@ -7,8 +7,8 @@ function UserDetails(props: {
 }) {
   return (
     <div className="mt-2" id={props.id}>
-      <div className="font-light leading-relaxed text-secondary-900">
-        {props.title}:
+      <div className="text-sm font-light leading-relaxed text-gray-400">
+        {props.title}
       </div>
       {props.children}
     </div>
diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
index 2f3393d9aa2..3adaf0fb083 100644
--- a/src/components/Facility/FacilityUsers.tsx
+++ b/src/components/Facility/FacilityUsers.tsx
@@ -2,48 +2,23 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CountBlock from "@/CAREUI/display/Count";
-import CareIcon from "@/CAREUI/icons/CareIcon";
-import SlideOver from "@/CAREUI/interactive/SlideOver";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
-import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
-import Pagination from "@/components/Common/Pagination";
-import UserDetails from "@/components/Common/UserDetails";
-import LinkFacilityDialog from "@/components/Users/LinkFacilityDialog";
-import { UserFacilities } from "@/components/Users/ManageUsers";
-import UserDeleteDialog from "@/components/Users/UserDeleteDialog";
+import UserListView from "@/components/Users/UserListAndCard";
 
-import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";
+import useFilters from "@/hooks/useFilters";
 
-import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
 import useQuery from "@/Utils/request/useQuery";
-import { formatName, isUserOnline, relativeTime } from "@/Utils/utils";
 
-export default function FacilityUsers(props: any) {
+export default function FacilityUsers(props: { facilityId: number }) {
   const { t } = useTranslation();
+  const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
+    limit: 18,
+    cacheBlacklist: ["username"],
+  });
+  const [activeTab, setActiveTab] = useState(0);
   const { facilityId } = props;
-  let manageUsers: any = null;
-  const [isAddFacilityLoading, setIsAddFacilityLoading] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [expandFacilityList, setExpandFacilityList] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<any | null>(null);
-  const [offset, setOffset] = useState(0);
-
-  const [linkFacility, setLinkFacility] = useState<{
-    show: boolean;
-    username: string;
-  }>({ show: false, username: "" });
-
-  const [userData, setUserData] = useState<{
-    show: boolean;
-    username: string;
-    name: string;
-  }>({ show: false, username: "", name: "" });
-
-  const limit = RESULTS_PER_PAGE_LIMIT;
 
   const { data: facilityData } = useQuery(routes.getAnyFacility, {
     pathParams: {
@@ -52,211 +27,20 @@ export default function FacilityUsers(props: any) {
     prefetch: facilityId !== undefined,
   });
 
-  const {
-    data: facilityUserData,
-    refetch: facilityUserFetch,
-    loading: isLoading,
-  } = useQuery(routes.getFacilityUsers, {
-    query: { offset: offset, limit: limit },
-    pathParams: { facility_id: facilityId },
-    prefetch: facilityId !== undefined,
-  });
-
-  const handlePagination = (page: number, limit: number) => {
-    const offset = (page - 1) * limit;
-    setCurrentPage(page);
-    setOffset(offset);
-  };
-
-  const loadFacilities = async (username: string) => {
-    if (isAddFacilityLoading) {
-      return;
-    }
-    const { res, data } = await request(routes.userListFacility, {
-      pathParams: { username: username },
-    });
-    if (res?.ok && data && facilityUserData) {
-      facilityUserData.results = facilityUserData.results.map((user) => {
-        return user.username === username
-          ? {
-              ...user,
-              facilities: data,
-            }
-          : user;
-      });
-    }
-  };
-
-  const hideLinkFacilityModal = () => {
-    setLinkFacility({
-      show: false,
-      username: "",
-    });
-  };
-
-  const handleCancel = () => {
-    setUserData({ show: false, username: "", name: "" });
-  };
-
-  const handleSubmit = async () => {
-    const username = userData.username;
-    await request(routes.deleteUser, {
-      pathParams: { username: username },
-      onResponse: ({ res }) => {
-        if (res?.status === 204) {
-          Notification.Success({
-            msg: t("user_deleted_successfuly"),
-          });
-        }
+  const { data: userListData, loading: userListLoading } = useQuery(
+    routes.getFacilityUsers,
+    {
+      query: {
+        limit: resultsPerPage,
+        offset: (
+          (qParams.page ? qParams.page - 1 : 0) * resultsPerPage
+        ).toString(),
+        username: qParams.username,
       },
-    });
-    setUserData({ show: false, username: "", name: "" });
-    facilityUserFetch();
-  };
-
-  const addFacility = async (username: string, facility: any) => {
-    hideLinkFacilityModal();
-    setIsAddFacilityLoading(true);
-    // Remaining props of request are not specified in dispatch request
-    await request(routes.addUserFacility, {
-      body: {
-        facility: String(facility.id),
-      },
-      pathParams: {
-        username: username,
-      },
-    });
-    setIsAddFacilityLoading(false);
-    loadFacilities(username);
-  };
-
-  let userList: any[] = [];
-
-  facilityUserData &&
-    facilityUserData.results &&
-    facilityUserData.results.length &&
-    (userList = facilityUserData.results.map((user) => {
-      return (
-        <div
-          key={`usr_${user.id}`}
-          className="mt-6 w-full md:px-4 lg:w-1/2 xl:w-1/3"
-        >
-          <div className="block h-full cursor-pointer overflow-hidden rounded-lg bg-white shadow hover:border-primary-500">
-            <div className="flex h-full flex-col justify-between">
-              <div className="px-6 py-4">
-                <div className="flex flex-col justify-between lg:flex-row">
-                  {user.username && (
-                    <div
-                      id="user-view-name"
-                      className="inline-flex w-fit items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium leading-5 text-blue-800"
-                    >
-                      {user.username}
-                    </div>
-                  )}
-                  <div className="min-width-50 shrink-0 text-sm text-secondary-600">
-                    {t("last_online")}{" "}
-                    <span
-                      aria-label="Online"
-                      className={
-                        "inline-block h-2 w-2 shrink-0 rounded-full " +
-                        (isUserOnline(user)
-                          ? "bg-primary-400"
-                          : "bg-secondary-300")
-                      }
-                    ></span>
-                    <span className="pl-2">
-                      {user.last_login
-                        ? relativeTime(user.last_login)
-                        : t("never")}
-                    </span>
-                  </div>
-                </div>
-                <div
-                  id="name"
-                  className="mt-2 flex gap-3 text-2xl font-bold capitalize"
-                >
-                  {formatName(user)}
-                </div>
-
-                <div className="flex justify-between">
-                  {user.user_type && (
-                    <UserDetails title="Role">
-                      <div className="font-semibold">{user.user_type}</div>
-                    </UserDetails>
-                  )}
-                </div>
-                <div className="flex justify-between">
-                  {user.phone_number && (
-                    <div className="mt-2 border-t bg-secondary-50 px-6 py-2">
-                      <div className="flex justify-between py-4">
-                        <div>
-                          <div className="leading-relaxed text-secondary-500">
-                            {t("phone_number")}
-                          </div>
-                          <a
-                            href={`tel:${user.phone_number}`}
-                            className="font-semibold"
-                          >
-                            {user.phone_number || "-"}
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-
-                {user.username && (
-                  <UserDetails title="Facilities">
-                    <ButtonV2
-                      id="facilities"
-                      className="flex w-full items-center @sm:w-1/2"
-                      onClick={() => {
-                        setExpandFacilityList(!expandFacilityList);
-                        setSelectedUser(user);
-                      }}
-                    >
-                      <CareIcon icon="l-hospital" className="text-lg" />
-                      <p>{t("linked_facilities")}</p>
-                    </ButtonV2>
-                  </UserDetails>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }));
-
-  if (!facilityUserData) {
-    manageUsers = <Loading />;
-  } else if (facilityUserData.results && facilityUserData.results.length) {
-    manageUsers = (
-      <div>
-        <div className="flex flex-wrap md:-mx-4">{userList}</div>
-        {facilityUserData && facilityUserData.count > limit && (
-          <div className="mt-4 flex w-full justify-center">
-            <Pagination
-              cPage={currentPage}
-              defaultPerPage={limit}
-              data={{ totalCount: facilityUserData.count }}
-              onChange={handlePagination}
-            />
-          </div>
-        )}
-      </div>
-    );
-  } else if (
-    facilityUserData.results &&
-    facilityUserData.results.length === 0
-  ) {
-    manageUsers = (
-      <div>
-        <div>
-          <h5>{t("no_users_found")}</h5>
-        </div>
-      </div>
-    );
-  }
+      pathParams: { facility_id: facilityId },
+      prefetch: facilityId !== undefined,
+    },
+  );
 
   return (
     <Page
@@ -264,44 +48,23 @@ export default function FacilityUsers(props: any) {
       hideBack={true}
       breadcrumbs={false}
     >
-      {linkFacility.show && (
-        <LinkFacilityDialog
-          username={linkFacility.username}
-          handleOk={addFacility}
-          handleCancel={hideLinkFacilityModal}
-        />
-      )}
-
-      <div className="mt-5 grid grid-cols-1 sm:grid-cols-3 md:gap-5">
-        {facilityUserData && (
-          <CountBlock
-            text={t("total_users")}
-            count={facilityUserData.count}
-            loading={isLoading}
-            icon="d-people"
-            className="flex-1"
-          />
-        )}
-      </div>
-      <SlideOver
-        open={expandFacilityList}
-        setOpen={setExpandFacilityList}
-        slideFrom="right"
-        title={t("facilities")}
-        dialogClass="md:w-[400px]"
-      >
-        <UserFacilities user={selectedUser} />
-      </SlideOver>
-      <div>
-        <div>{manageUsers}</div>
-      </div>
-      {userData.show && (
-        <UserDeleteDialog
-          name={userData.name}
-          handleCancel={handleCancel}
-          handleOk={handleSubmit}
-        />
-      )}
+      <CountBlock
+        text={t("total_users")}
+        count={userListData?.count ?? 0}
+        loading={userListLoading}
+        icon="d-people"
+        className="my-3 flex flex-col items-center sm:items-start"
+      />
+
+      <UserListView
+        users={userListData?.results ?? []}
+        onSearch={(username) => updateQuery({ username })}
+        searchValue={qParams.username}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+
+      <Pagination totalCount={userListData?.count ?? 0} />
     </Page>
   );
 }
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 63b8c3614e5..5a3bf552b26 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Cancel, Submit } from "@/components/Common/ButtonV2";
 import { FieldValidator } from "@/components/Form/FieldValidators";
@@ -32,16 +32,21 @@ type Props<T extends FormDetails> = {
   onDraftRestore?: (newState: FormState<T>) => void;
   children: (props: FormContextValue<T>) => React.ReactNode;
   hideRestoreDraft?: boolean;
+  resetFormValsOnCancel?: boolean;
+  resetFormValsOnSubmit?: boolean;
+  hideCancelButton?: boolean;
 };
 
 const Form = <T extends FormDetails>({
   asyncGetDefaults,
   validate,
+  hideCancelButton = false,
   ...props
 }: Props<T>) => {
   const initial = { form: props.defaults, errors: {} };
   const [isLoading, setIsLoading] = useState(!!asyncGetDefaults);
   const [state, dispatch] = useAutoSaveReducer<T>(formReducer, initial);
+  const formVals = useRef(props.defaults);
 
   useEffect(() => {
     if (!asyncGetDefaults) return;
@@ -75,9 +80,18 @@ const Form = <T extends FormDetails>({
         type: "set_errors",
         errors: { ...state.errors, ...errors },
       });
+    } else if (props.resetFormValsOnSubmit) {
+      dispatch({ type: "set_form", form: formVals.current });
     }
   };
 
+  const handleCancel = () => {
+    if (props.resetFormValsOnCancel) {
+      dispatch({ type: "set_form", form: formVals.current });
+    }
+    props.onCancel?.();
+  };
+
   const { Provider, Consumer } = useMemo(() => createFormContext<T>(), []);
   const disabled = isLoading || props.disabled;
 
@@ -121,10 +135,12 @@ const Form = <T extends FormDetails>({
             <Consumer>{props.children}</Consumer>
           </div>
           <div className="flex flex-col-reverse justify-end gap-3 sm:flex-row">
-            <Cancel
-              onClick={props.onCancel}
-              label={props.cancelLabel ?? "Cancel"}
-            />
+            {!hideCancelButton && (
+              <Cancel
+                onClick={handleCancel}
+                label={props.cancelLabel ?? "Cancel"}
+              />
+            )}
             <Submit
               data-testid="submit-button"
               type="submit"
diff --git a/src/components/Users/ConfirmFacilityModal.tsx b/src/components/Users/ConfirmFacilityModal.tsx
new file mode 100644
index 00000000000..289e576aa54
--- /dev/null
+++ b/src/components/Users/ConfirmFacilityModal.tsx
@@ -0,0 +1,79 @@
+import { useTranslation } from "react-i18next";
+
+import ConfirmDialog from "@/components/Common/ConfirmDialog";
+import { FacilityModel } from "@/components/Facility/models";
+
+const ConfirmFacilityModal = ({
+  username,
+  currentFacility,
+  homeFacility,
+  handleCancel,
+  handleOk,
+  type,
+}: {
+  username: string;
+  currentFacility?: FacilityModel;
+  homeFacility?: FacilityModel;
+  handleCancel: () => void;
+  handleOk: () => void;
+  type: string;
+}) => {
+  const { t } = useTranslation();
+  const title = t(type);
+  let action = "";
+  let body;
+  switch (type) {
+    case "unlink_facility":
+      action = "Unlink";
+      body = (
+        <div className="flex leading-relaxed text-secondary-800">
+          <div>
+            {t("unlink_facility_confirm")}{" "}
+            <strong>{currentFacility?.name}</strong> {t("from_user")}{" "}
+            <strong>{username}</strong> ?
+            <br />
+            {t("unlink_facility_access")}
+          </div>
+        </div>
+      );
+      break;
+    case "clear_home_facility":
+      action = "Clear";
+      body = (
+        <div className="flex leading-relaxed text-secondary-800">
+          <div>
+            {t("clear_home_facility_confirm")}{" "}
+            <strong>{currentFacility?.name}</strong> {t("from_user")}{" "}
+            <strong>{username}</strong> ?
+            <br />
+          </div>
+        </div>
+      );
+      break;
+    case "replace_home_facility":
+      action = "Replace";
+      body = (
+        <div>
+          {t("replace_home_facility_confirm")}{" "}
+          <strong>{homeFacility?.name}</strong> {t("with")}{" "}
+          <strong>{currentFacility?.name}</strong>{" "}
+          {t("replace_home_facility_confirm_as")} <strong>{username}</strong>?
+        </div>
+      );
+      break;
+  }
+  return (
+    <ConfirmDialog
+      title={<span>{title}</span>}
+      show={true}
+      action={action}
+      onClose={handleCancel}
+      onConfirm={handleOk}
+      variant="danger"
+    >
+      <div className="flex leading-relaxed text-secondary-800">{body}</div>
+    </ConfirmDialog>
+  );
+};
+
+export default ConfirmFacilityModal;
diff --git a/src/components/Users/ConfirmHomeFacilityUpdateDialog.tsx b/src/components/Users/ConfirmHomeFacilityUpdateDialog.tsx
deleted file mode 100644
index 429e7370366..00000000000
--- a/src/components/Users/ConfirmHomeFacilityUpdateDialog.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState } from "react";
-
-import ConfirmDialog from "@/components/Common/ConfirmDialog";
-
-interface ConfirmDialogProps {
-  previousFacilityName: string;
-  userName: string;
-  newFacilityName: string;
-  handleCancel: () => void;
-  handleOk: () => void;
-}
-
-const ConfirmHomeFacilityUpdateDialog = (props: ConfirmDialogProps) => {
-  const {
-    previousFacilityName,
-    userName,
-    newFacilityName,
-    handleCancel,
-    handleOk,
-  } = props;
-
-  const [disable, setDisable] = useState(false);
-
-  const handleSubmit = () => {
-    handleOk();
-    setDisable(true);
-  };
-  return (
-    <ConfirmDialog
-      title={<span>Replace Home Facility</span>}
-      show={true}
-      action={"Replace"}
-      onClose={handleCancel}
-      onConfirm={handleSubmit}
-      disabled={disable}
-      variant="danger"
-    >
-      <div className="flex leading-relaxed text-secondary-800">
-        <div>
-          Are you sure you want to replace{" "}
-          <strong>{previousFacilityName}</strong> with{" "}
-          <strong>{newFacilityName}</strong> as home facility for user{" "}
-          <strong>{userName}</strong>
-          ?
-          <br />
-        </div>
-      </div>
-    </ConfirmDialog>
-  );
-};
-
-export default ConfirmHomeFacilityUpdateDialog;
diff --git a/src/components/Users/LinkFacilityDialog.tsx b/src/components/Users/LinkFacilityDialog.tsx
deleted file mode 100644
index 523965803b2..00000000000
--- a/src/components/Users/LinkFacilityDialog.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useState } from "react";
-
-import ConfirmDialog from "@/components/Common/ConfirmDialog";
-import { FacilitySelect } from "@/components/Common/FacilitySelect";
-import { FacilityModel } from "@/components/Facility/models";
-
-interface Props {
-  username: string;
-  handleOk: (
-    username: string,
-    facility: FacilityModel | FacilityModel[] | null,
-  ) => void;
-  handleCancel: () => void;
-}
-
-const LinkFacilityDialog = ({ username, handleOk, handleCancel }: Props) => {
-  const [facility, setFacility] = useState<any>(null);
-
-  return (
-    <ConfirmDialog
-      show
-      title={
-        <span>
-          Link new facility to <strong>{username}</strong>
-        </span>
-      }
-      description={
-        <div className="md:min-w-[400px]">
-          <FacilitySelect
-            multiple={false}
-            name="facility"
-            showAll={false} // Show only facilities that user has access to link (not all facilities)
-            showNOptions={8}
-            selected={facility}
-            setSelected={setFacility}
-            errors=""
-            className="z-40"
-          />
-        </div>
-      }
-      action="Link"
-      variant="primary"
-      onClose={handleCancel}
-      onConfirm={() => handleOk(username, facility)}
-      disabled={!facility}
-    />
-  );
-};
-
-export default LinkFacilityDialog;
diff --git a/src/components/Users/LinkedFacilities.tsx b/src/components/Users/LinkedFacilities.tsx
new file mode 100644
index 00000000000..18d520abca3
--- /dev/null
+++ b/src/components/Users/LinkedFacilities.tsx
@@ -0,0 +1,338 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { FacilitySelect } from "@/components/Common/FacilitySelect";
+import { FacilityModel } from "@/components/Facility/models";
+import ConfirmFacilityModal from "@/components/Users/ConfirmFacilityModal";
+import { UserModel } from "@/components/Users/models";
+
+import useAuthUser from "@/hooks/useAuthUser";
+import { useIsAuthorized } from "@/hooks/useIsAuthorized";
+
+import AuthorizeFor from "@/Utils/AuthorizeFor";
+import * as Notification from "@/Utils/Notifications";
+import routes from "@/Utils/request/api";
+import request from "@/Utils/request/request";
+import useQuery from "@/Utils/request/useQuery";
+
+import ButtonV2 from "../Common/ButtonV2";
+
+const initModalProps: {
+  selectedFacility?: FacilityModel;
+  type: string;
+  toggle: boolean;
+} = {
+  toggle: false,
+  selectedFacility: undefined,
+  type: "",
+};
+
+export default function LinkedFacilities({
+  userData,
+  refetchUserData,
+}: {
+  userData: UserModel;
+  refetchUserData?: () => void;
+}) {
+  const [facility, setFacility] = useState<any>(null);
+  const [userFacilities, setUserFacilities] = useState<
+    FacilityModel[] | null
+  >();
+  const [homeFacility, setHomeFacility] = useState<FacilityModel | undefined>();
+  const [modalProps, setModalProps] = useState(initModalProps);
+  const { t } = useTranslation();
+  const authUser = useAuthUser();
+
+  const authorizeForHomeFacility = useIsAuthorized(
+    AuthorizeFor(["DistrictAdmin", "StateAdmin"]),
+  );
+
+  const isCurrentUser = userData.username === authUser.username;
+
+  const { refetch: refetchUserFacilities } = useQuery(routes.userListFacility, {
+    pathParams: { username: userData.username },
+    query: { limit: 36 },
+    onResponse({ res, data }) {
+      if (res?.status === 200 && data) {
+        let userFacilities = data?.results;
+        if (userData.home_facility_object) {
+          const homeFacility = data?.results.find(
+            (facility) => facility.id === userData.home_facility_object?.id,
+          );
+          userFacilities = userFacilities.filter(
+            (facility) => facility.id !== homeFacility?.id,
+          );
+          setHomeFacility(homeFacility);
+        }
+        setUserFacilities(userFacilities);
+      }
+    },
+  });
+
+  const handleOnClick = (type: string, selectedFacility: FacilityModel) => {
+    switch (type) {
+      case "clear_home_facility":
+      case "unlink_facility":
+      case "replace_home_facility":
+        setModalProps({
+          selectedFacility,
+          type: type,
+          toggle: true,
+        });
+        break;
+      case "set_home_facility":
+        replaceHomeFacility(selectedFacility);
+        break;
+    }
+  };
+
+  const handleModalCancel = () => {
+    setModalProps(initModalProps);
+  };
+
+  const handleModalOk = () => {
+    switch (modalProps.type) {
+      case "unlink_facility":
+        unlinkFacility();
+        break;
+      case "clear_home_facility":
+        clearHomeFacility();
+        break;
+      case "replace_home_facility":
+        replaceHomeFacility();
+        break;
+    }
+    setModalProps(initModalProps);
+  };
+
+  const replaceHomeFacility = async (facility?: FacilityModel) => {
+    const selectedFacility = facility ?? modalProps.selectedFacility;
+    const { res } = await request(routes.partialUpdateUser, {
+      pathParams: { username: userData.username },
+      body: { home_facility: selectedFacility?.id?.toString() },
+    });
+    if (!res?.ok) {
+      Notification.Error({
+        msg: t("home_facility_updated_error"),
+      });
+    } else {
+      setHomeFacility(selectedFacility);
+      Notification.Success({
+        msg: t("home_facility_updated_success"),
+      });
+    }
+    await refetchUserFacilities();
+    refetchUserData?.();
+  };
+
+  const clearHomeFacility = async () => {
+    const { res } = await request(routes.clearHomeFacility, {
+      pathParams: { username: userData.username },
+    });
+
+    if (!res?.ok) {
+      Notification.Error({
+        msg: t("clear_home_facility_error"),
+      });
+    } else {
+      userData.home_facility_object = undefined;
+      setHomeFacility(undefined);
+      Notification.Success({
+        msg: t("home_facility_cleared_success"),
+      });
+    }
+    await refetchUserFacilities();
+  };
+
+  const unlinkFacility = async () => {
+    const { res } = await request(routes.deleteUserFacility, {
+      pathParams: { username: userData.username },
+      body: { facility: modalProps.selectedFacility?.id?.toString() },
+    });
+    if (!res?.ok) {
+      Notification.Error({
+        msg: t("unlink_facility_error"),
+      });
+    } else {
+      Notification.Success({
+        msg: t("unlink_facility_success"),
+      });
+    }
+    await refetchUserFacilities();
+  };
+
+  const linkFacility = async (
+    username: string,
+    facility: FacilityModel | null,
+  ) => {
+    if (!facility) return;
+    const { res } = await request(routes.addUserFacility, {
+      pathParams: { username },
+      body: { facility: facility.id?.toString() },
+    });
+
+    if (!res?.ok) {
+      Notification.Error({
+        msg: t("link_facility_error"),
+      });
+    } else {
+      Notification.Success({
+        msg: t("facility_linked_success"),
+      });
+    }
+    await refetchUserFacilities();
+    setFacility(null);
+  };
+
+  const renderFacilityButtons = (facility: FacilityModel) => {
+    if (!facility) return;
+    return (
+      <div id={`facility_${facility.id}`} key={`facility_${facility.id}`}>
+        <DropdownMenu>
+          <div className="flex flex-row items-center rounded-sm border bg-secondary-100">
+            <div className="rounded p-1 text-sm">{facility.name}</div>
+            <DropdownMenuTrigger id="linked-facility-settings">
+              <div className="rounded-r bg-secondary-300 px-2 py-1">
+                <CareIcon icon="l-setting" className="text-sm" />
+              </div>
+            </DropdownMenuTrigger>
+          </div>
+
+          <DropdownMenuContent>
+            {authorizeForHomeFacility && (
+              <DropdownMenuItem
+                id="set-home-facility"
+                onClick={() =>
+                  handleOnClick(
+                    homeFacility
+                      ? "replace_home_facility"
+                      : "set_home_facility",
+                    facility,
+                  )
+                }
+              >
+                {t("set_home_facility")}
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuItem
+              id="unlink-facility"
+              onClick={() => handleOnClick("unlink_facility", facility)}
+            >
+              {t("unlink_this_facility")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+  };
+
+  const renderHomeFacilityButton = (homeFacility: FacilityModel) => {
+    return (
+      <div
+        id={`facility_${homeFacility.id}`}
+        key={`facility_${homeFacility.id}`}
+      >
+        <div className="flex flex-row items-center rounded-sm border bg-secondary-100">
+          <div id="home-facility" className="rounded p-1 text-sm">
+            {homeFacility.name}
+          </div>
+          {(authorizeForHomeFacility || isCurrentUser) && (
+            <div className="border-l-3 rounded-r bg-secondary-300 px-2 py-1">
+              <button
+                id="clear-home-facility"
+                onClick={() =>
+                  handleOnClick("clear_home_facility", homeFacility)
+                }
+                title={t("clear_home_facility")}
+                aria-label={t("clear_home_facility")}
+              >
+                <CareIcon icon="l-multiply" className="text-sm" />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {modalProps.toggle && (
+        <ConfirmFacilityModal
+          username={userData.username}
+          currentFacility={modalProps.selectedFacility}
+          homeFacility={homeFacility}
+          handleCancel={handleModalCancel}
+          handleOk={handleModalOk}
+          type={modalProps.type}
+        />
+      )}
+      <div className="flex flex-col gap-y-6 rounded bg-white p-4 shadow">
+        <div className="flex flex-row gap-3">
+          <FacilitySelect
+            id="select-facility"
+            multiple={false}
+            name="facility"
+            exclude_user={userData.username}
+            showAll={false}
+            showNOptions={8}
+            selected={facility}
+            setSelected={setFacility}
+            errors=""
+            className="z-10 w-full"
+            disabled={!authorizeForHomeFacility}
+          />
+          <ButtonV2
+            id="link-facility"
+            name="Add"
+            className="mt-1 rounded-lg px-6 py-[11px] text-base"
+            onClick={() => linkFacility(userData.username, facility)}
+            disabled={!authorizeForHomeFacility}
+            tooltip={
+              !authorizeForHomeFacility
+                ? t("contact_your_admin_to_add_facilities")
+                : undefined
+            }
+          >
+            {t("add_facility")}
+          </ButtonV2>
+        </div>
+
+        {homeFacility && (
+          <div className="flex flex-col gap-2">
+            <p className="text-xs">{t("home_facility")}</p>
+            <div className="flex flex-row gap-3">
+              {renderHomeFacilityButton(homeFacility)}
+            </div>
+          </div>
+        )}
+        {userFacilities && userFacilities.length > 0 && (
+          <div className="flex flex-col gap-2">
+            <p className="text-xs">{t("linked_facilities")}</p>
+
+            <div
+              id="linked-facility-list"
+              className="flex flex-row flex-wrap gap-3"
+            >
+              {userFacilities.map((facility: FacilityModel) => {
+                if (homeFacility?.id === facility.id) {
+                  return null;
+                }
+                return renderFacilityButtons(facility);
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Users/LinkedFacilitiesTab.tsx b/src/components/Users/LinkedFacilitiesTab.tsx
new file mode 100644
index 00000000000..3f255dacbe1
--- /dev/null
+++ b/src/components/Users/LinkedFacilitiesTab.tsx
@@ -0,0 +1,43 @@
+import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
+
+import UserColumns from "@/components/Common/UserColumns";
+import LinkedFacilities from "@/components/Users/LinkedFacilities";
+import { UserModel } from "@/components/Users/models";
+
+import useAuthUser from "@/hooks/useAuthUser";
+
+import * as Notification from "@/Utils/Notifications";
+import { editUserPermissions } from "@/Utils/permissions";
+
+type Props = {
+  userData: UserModel;
+  username: string;
+  refetchUserData?: () => void;
+};
+
+export default function LinkedFacilitiesTab(props: Props) {
+  const { userData } = props;
+  const { t } = useTranslation();
+  const authUser = useAuthUser();
+  const editPermissions = editUserPermissions(authUser, userData);
+
+  if (!userData) {
+    Notification.Error({ msg: t("username_userdetails_not_found") });
+    return <></>;
+  } else if (!editPermissions) {
+    Notification.Error({ msg: t("no_permission_to_view_page") });
+    navigate("/users");
+  }
+
+  return (
+    <div className="mt-10 flex flex-col gap-y-12">
+      <UserColumns
+        heading={t("linked_facilities")}
+        note={t("linked_facilities_note")}
+        Child={LinkedFacilities}
+        childProps={props}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Users/LinkedSkills.tsx b/src/components/Users/LinkedSkills.tsx
new file mode 100644
index 00000000000..8baa5a1b06b
--- /dev/null
+++ b/src/components/Users/LinkedSkills.tsx
@@ -0,0 +1,173 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import ButtonV2 from "@/components/Common/ButtonV2";
+import { SkillSelect } from "@/components/Common/SkillSelect";
+
+import { useIsAuthorized } from "@/hooks/useIsAuthorized";
+
+import AuthorizeFor from "@/Utils/AuthorizeFor";
+import * as Notification from "@/Utils/Notifications";
+import routes from "@/Utils/request/api";
+import request from "@/Utils/request/request";
+import useQuery from "@/Utils/request/useQuery";
+
+import UnlinkSkillDialog from "./UnlinkSkillDialog";
+import { SkillModel } from "./models";
+
+const initModalProps: {
+  selectedSkill: SkillModel | null;
+  toggle: boolean;
+} = {
+  toggle: false,
+  selectedSkill: null,
+};
+
+export default function LinkedSkills({ username }: { username: string }) {
+  const [modalProps, setModalProps] = useState(initModalProps);
+  const [selectedSkill, setSelectedSkill] = useState<SkillModel | null>(null);
+  const { t } = useTranslation();
+
+  const { data: skills, refetch: refetchUserSkills } = useQuery(
+    routes.userListSkill,
+    {
+      pathParams: { username },
+    },
+  );
+
+  const handleOnClick = (selectedSkill: SkillModel) => {
+    setModalProps({
+      selectedSkill,
+      toggle: true,
+    });
+  };
+
+  const handleModalCancel = () => {
+    setModalProps(initModalProps);
+  };
+
+  const handleModalOk = () => {
+    removeSkill(username, modalProps.selectedSkill?.id.toString() ?? "");
+    setModalProps(initModalProps);
+  };
+
+  const authorizeForAddSkill = useIsAuthorized(
+    AuthorizeFor(["DistrictAdmin", "StateAdmin"]),
+  );
+
+  const addSkill = async (username: string, skill: SkillModel | null) => {
+    if (!skill) return;
+    const { res } = await request(routes.addUserSkill, {
+      pathParams: { username },
+      body: { skill: skill.id },
+    });
+    if (res?.ok) {
+      Notification.Success({
+        msg: t("skill_added_successfully"),
+      });
+    } else {
+      Notification.Error({
+        msg: t("skill_add_error"),
+      });
+    }
+    setSelectedSkill(null);
+    setModalProps(initModalProps);
+    await refetchUserSkills();
+  };
+
+  const removeSkill = async (username: string, skillId: string) => {
+    const { res } = await request(routes.deleteUserSkill, {
+      pathParams: { username, id: skillId },
+    });
+    if (res?.status !== 204) {
+      Notification.Error({
+        msg: t("unlink_skill_error"),
+      });
+    } else {
+      Notification.Success({
+        msg: t("unlink_skill_success"),
+      });
+    }
+    await refetchUserSkills();
+  };
+
+  const renderSkillButtons = (skill: SkillModel) => {
+    return (
+      <div id={`skill_${skill.id}`} key={`skill${skill.id}`}>
+        <div className="flex flex-row items-center rounded-sm border bg-secondary-100">
+          <div className="rounded p-1 text-sm">{skill.skill_object.name}</div>
+          {authorizeForAddSkill && (
+            <div className="rounded-r bg-secondary-300 px-2 py-1">
+              <button
+                onClick={() => handleOnClick(skill)}
+                title={t("clear_skill")}
+                aria-label={t("clear_skill")}
+                id="unlink-skill"
+              >
+                <CareIcon icon="l-multiply" className="text-sm" />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {modalProps.toggle && (
+        <UnlinkSkillDialog
+          userName={username}
+          skillName={modalProps.selectedSkill?.skill_object.name ?? ""}
+          onCancel={handleModalCancel}
+          onSubmit={handleModalOk}
+        />
+      )}
+      <div className="flex flex-col gap-y-6 rounded bg-white p-4 shadow">
+        <div className="flex flex-row gap-3">
+          <SkillSelect
+            id="select-skill"
+            multiple={false}
+            name="skill"
+            disabled={!authorizeForAddSkill}
+            showNOptions={Infinity}
+            selected={selectedSkill}
+            setSelected={setSelectedSkill}
+            errors=""
+            className="z-10 w-full"
+            userSkills={skills?.results || []}
+          />
+          <ButtonV2
+            id="add-skill-button"
+            disabled={!authorizeForAddSkill}
+            onClick={() => addSkill(username, selectedSkill)}
+            className="mt-1 rounded-lg px-6 py-[11px] text-base"
+            tooltip={
+              !authorizeForAddSkill
+                ? t("contact_your_admin_to_add_skills")
+                : undefined
+            }
+          >
+            {t("add_skill")}
+          </ButtonV2>
+        </div>
+        {skills && skills?.count > 0 && (
+          <div className="flex flex-col gap-2">
+            <p className="text-xs">{t("linked_skills")}</p>
+
+            <div
+              id="added-user-skills"
+              className="flex flex-row flex-wrap gap-3"
+            >
+              {skills?.results.map((skill: SkillModel) => {
+                return renderSkillButtons(skill);
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Users/LinkedSkillsTab.tsx b/src/components/Users/LinkedSkillsTab.tsx
new file mode 100644
index 00000000000..3910f0a9e52
--- /dev/null
+++ b/src/components/Users/LinkedSkillsTab.tsx
@@ -0,0 +1,44 @@
+import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
+
+import UserColumns from "@/components/Common/UserColumns";
+import LinkedSkills from "@/components/Users/LinkedSkills";
+import { UserModel } from "@/components/Users/models";
+
+import useAuthUser from "@/hooks/useAuthUser";
+
+import * as Notification from "@/Utils/Notifications";
+import { editUserPermissions } from "@/Utils/permissions";
+
+type Props = {
+  userData: UserModel;
+  username: string;
+};
+
+export default function LinkedSkillsTab(props: Props) {
+  const { userData, username } = props;
+  const { t } = useTranslation();
+  const authUser = useAuthUser();
+  const editPermissions = editUserPermissions(authUser, userData);
+
+  if (!userData || !username) {
+    Notification.Error({ msg: t("username_userdetails_not_found") });
+    return <></>;
+  } else if (!editPermissions) {
+    Notification.Error({ msg: t("no_permission_to_view_page") });
+    navigate("/users");
+  }
+
+  return (
+    <>
+      <div className="mt-10 flex flex-col gap-y-12">
+        <UserColumns
+          heading={t("linked_skills")}
+          note={t("linked_skills_note")}
+          Child={LinkedSkills}
+          childProps={props}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Users/ManageUsers.tsx b/src/components/Users/ManageUsers.tsx
index 1290a074547..5b441e76150 100644
--- a/src/components/Users/ManageUsers.tsx
+++ b/src/components/Users/ManageUsers.tsx
@@ -1,4 +1,3 @@
-import dayjs from "dayjs";
 import { navigate } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -6,48 +5,31 @@ import { useTranslation } from "react-i18next";
 import CountBlock from "@/CAREUI/display/Count";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import { AdvancedFilterButton } from "@/CAREUI/interactive/FiltersSlideover";
-import SlideOverCustom from "@/CAREUI/interactive/SlideOver";
 
-import { Avatar } from "@/components/Common/Avatar";
-import ButtonV2, { Submit } from "@/components/Common/ButtonV2";
+import ButtonV2 from "@/components/Common/ButtonV2";
 import CircularProgress from "@/components/Common/CircularProgress";
 import { FacilitySelect } from "@/components/Common/FacilitySelect";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 import Pagination from "@/components/Common/Pagination";
-import UserDetails from "@/components/Common/UserDetails";
-import UserDetailComponent from "@/components/Common/UserDetailsComponet";
 import { FacilityModel } from "@/components/Facility/models";
-import TextFormField from "@/components/Form/FormFields/TextFormField";
-import SearchInput from "@/components/Form/SearchInput";
-import ConfirmHomeFacilityUpdateDialog from "@/components/Users/ConfirmHomeFacilityUpdateDialog";
-import SkillsSlideOver from "@/components/Users/SkillsSlideOver";
 import UnlinkFacilityDialog from "@/components/Users/UnlinkFacilityDialog";
-import UserDeleteDialog from "@/components/Users/UserDeleteDialog";
 import UserFilter from "@/components/Users/UserFilter";
+import UserListView from "@/components/Users/UserListAndCard";
 
 import useAuthUser from "@/hooks/useAuthUser";
 import useFilters from "@/hooks/useFilters";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 import { USER_TYPES } from "@/common/constants";
 
 import * as Notification from "@/Utils/Notifications";
-import { showUserDelete } from "@/Utils/permissions";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useQuery from "@/Utils/request/useQuery";
-import {
-  classNames,
-  formatDisplayName,
-  formatName,
-  isUserOnline,
-  relativeTime,
-} from "@/Utils/utils";
+import { classNames } from "@/Utils/utils";
 
 export default function ManageUsers() {
   const { t } = useTranslation();
-  const { width } = useWindowDimensions();
   const {
     qParams,
     updateQuery,
@@ -59,55 +41,39 @@ export default function ManageUsers() {
     limit: 18,
     cacheBlacklist: ["username"],
   });
-  let manageUsers: any = null;
-  const [expandSkillList, setExpandSkillList] = useState(false);
-  const [expandFacilityList, setExpandFacilityList] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<any | null>(null);
-  const [expandWorkingHours, setExpandWorkingHours] = useState(false);
+  let manageUsers: JSX.Element = <></>;
   const authUser = useAuthUser();
-  const [weeklyHours, setWeeklyHours] = useState<string>("0");
   const userIndex = USER_TYPES.indexOf(authUser.user_type);
   const userTypes = authUser.is_superuser
     ? [...USER_TYPES]
     : USER_TYPES.slice(0, userIndex + 1);
-
-  const [userData, setUserData] = useState<{
-    show: boolean;
-    username: string;
-    name: string;
-  }>({ show: false, username: "", name: "" });
-
-  const [weeklyHoursError, setWeeklyHoursError] = useState<string>("");
-
-  const extremeSmallScreenBreakpoint = 320;
-  const isExtremeSmallScreen = width <= extremeSmallScreenBreakpoint;
+  const [activeTab, setActiveTab] = useState(0);
 
   const { data: homeFacilityData } = useQuery(routes.getAnyFacility, {
     pathParams: { id: qParams.home_facility },
     prefetch: !!qParams.home_facility && qParams.home_facility !== "NONE",
   });
 
-  const {
-    data: userListData,
-    loading: userListLoading,
-    refetch: refetchUserList,
-  } = useQuery(routes.userList, {
-    query: {
-      limit: resultsPerPage.toString(),
-      offset: (
-        (qParams.page ? qParams.page - 1 : 0) * resultsPerPage
-      ).toString(),
-      username: qParams.username,
-      first_name: qParams.first_name,
-      last_name: qParams.last_name,
-      phone_number: qParams.phone_number,
-      alt_phone_number: qParams.alt_phone_number,
-      user_type: qParams.user_type,
-      district_id: qParams.district,
-      home_facility: qParams.home_facility,
-      last_active_days: qParams.last_active_days,
+  const { data: userListData, loading: userListLoading } = useQuery(
+    routes.userList,
+    {
+      query: {
+        limit: resultsPerPage.toString(),
+        offset: (
+          (qParams.page ? qParams.page - 1 : 0) * resultsPerPage
+        ).toString(),
+        username: qParams.username,
+        first_name: qParams.first_name,
+        last_name: qParams.last_name,
+        phone_number: qParams.phone_number,
+        alt_phone_number: qParams.alt_phone_number,
+        user_type: qParams.user_type,
+        district_id: qParams.district,
+        home_facility: qParams.home_facility,
+        last_active_days: qParams.last_active_days,
+      },
     },
-  });
+  );
 
   useEffect(() => {
     if (!qParams.state && qParams.district) {
@@ -137,419 +103,26 @@ export default function ManageUsers() {
     </ButtonV2>
   );
 
-  const handleCancel = () => {
-    setUserData({ show: false, username: "", name: "" });
-  };
-
-  const handleWorkingHourSubmit = async () => {
-    const username = selectedUser;
-    if (!username || !weeklyHours || +weeklyHours < 0 || +weeklyHours > 168) {
-      setWeeklyHoursError("Value should be between 0 and 168");
-      return;
-    }
-    const { res, data, error } = await request(routes.partialUpdateUser, {
-      pathParams: { username },
-      body: { weekly_working_hours: weeklyHours },
-    });
-    if (res && res.status === 200 && data) {
-      Notification.Success({
-        msg: "Working hours updated successfully",
-      });
-      setExpandWorkingHours(false);
-      setSelectedUser(null);
-    } else {
-      Notification.Error({
-        msg: "Error while updating working hours: " + (error || ""),
-      });
-    }
-    setWeeklyHours("0");
-    setWeeklyHoursError("");
-    await refetchUserList();
-  };
-
-  const handleSubmit = async () => {
-    const { res, error } = await request(routes.deleteUser, {
-      pathParams: { username: userData.username },
-    });
-    if (res?.status === 204) {
-      Notification.Success({
-        msg: "User deleted successfully",
-      });
-    } else {
-      Notification.Error({
-        msg: "Error while deleting User: " + (error || ""),
-      });
-    }
-
-    setUserData({ show: false, username: "", name: "" });
-    await refetchUserList();
-  };
-
-  const handleDelete = (user: any) => {
-    setUserData({
-      show: true,
-      username: user.username,
-      name: formatName(user),
-    });
-  };
-
-  let userList: any[] = [];
-  userListData?.results &&
-    userListData.results.length &&
-    (userList = userListData.results.map((user: any, idx) => {
-      const cur_online = isUserOnline(user);
-      return (
-        <div key={`usr_${user.id}`} id={`usr_${idx}`}>
-          <div className="relative block h-full overflow-visible rounded-lg bg-white shadow hover:border-primary-500">
-            <div className="flex h-full flex-col justify-between @container">
-              <div className="px-6 py-4">
-                <div className="mb-2 flex-none text-lg">
-                  <Avatar
-                    name={formatDisplayName(user)}
-                    imageUrl={user.read_profile_picture_url}
-                    className="mb-2 h-12 w-12 rounded-full text-black lg:mb-0"
-                  />
-                </div>
-                <div className="flex flex-col flex-wrap justify-between gap-3 @sm:flex-row">
-                  {user.username && (
-                    <div
-                      id="username"
-                      className="inline-flex w-fit items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium leading-5 text-blue-800"
-                    >
-                      {user.username}
-                    </div>
-                  )}
-                  <div className="min-width-50 shrink-0 text-sm text-secondary-600">
-                    {user.last_login && cur_online ? (
-                      <span>
-                        {" "}
-                        <CareIcon icon="l-clock" className="text-lg" />{" "}
-                        Currently Online
-                      </span>
-                    ) : (
-                      <>
-                        <span>
-                          <CareIcon icon="l-clock" className="text-lg" /> Last
-                          Online:{" "}
-                        </span>
-                        <span
-                          aria-label="Online"
-                          className={classNames(
-                            "inline-block h-2 w-2 shrink-0 rounded-full",
-                            cur_online ? "bg-primary-400" : "bg-secondary-300",
-                          )}
-                        ></span>
-                        <span className="pl-2">
-                          {user.last_login
-                            ? relativeTime(user.last_login)
-                            : "Never"}
-                        </span>
-                      </>
-                    )}
-                  </div>
-                </div>
-                <div
-                  id="name"
-                  className="mt-2 flex gap-3 text-2xl font-bold capitalize"
-                >
-                  <div className="max-w-full break-words">
-                    {formatName(user)}
-                  </div>
-
-                  {user.last_login && cur_online ? (
-                    <div
-                      className="h-4 w-4 rounded-full bg-primary-500"
-                      aria-label="Online"
-                    />
-                  ) : null}
-                  {showUserDelete(authUser, user) && (
-                    <div
-                      className="w-8 cursor-pointer rounded-lg bg-red-50 text-xl text-red-600 hover:bg-red-50 hover:text-red-700"
-                      onClick={() => handleDelete(user)}
-                    >
-                      <CareIcon icon="l-trash" className="ml-[5px]" />
-                    </div>
-                  )}
-                </div>
-
-                <div
-                  className={`flex ${
-                    isExtremeSmallScreen
-                      ? "flex-wrap"
-                      : "flex-col justify-between md:flex-row"
-                  } gap-2 md:grid md:grid-cols-2`}
-                >
-                  {user.user_type && (
-                    <UserDetailComponent
-                      id="role"
-                      title="Role"
-                      value={user.user_type}
-                    />
-                  )}
-                  {user.district_object && (
-                    <UserDetailComponent
-                      id="district"
-                      title="District"
-                      value={user.district_object.name}
-                    />
-                  )}
-                  {user.user_type === "Doctor" && (
-                    <>
-                      <div className="col-span-1">
-                        <UserDetails
-                          id="qualification"
-                          title={t("qualification")}
-                        >
-                          {user.qualification ? (
-                            <span className="font-semibold">
-                              {user.qualification}
-                            </span>
-                          ) : (
-                            <span className="text-secondary-600">
-                              {t("unknown")}
-                            </span>
-                          )}
-                        </UserDetails>
-                      </div>
-                      <div className="col-span-1">
-                        <UserDetails id="doctor-experience" title="Experience">
-                          {user.doctor_experience_commenced_on ? (
-                            <span className="font-semibold">
-                              {dayjs().diff(
-                                user.doctor_experience_commenced_on,
-                                "years",
-                                false,
-                              )}{" "}
-                              years
-                            </span>
-                          ) : (
-                            <span className="text-secondary-600">
-                              {t("unknown")}
-                            </span>
-                          )}
-                        </UserDetails>
-                      </div>
-                      <div className="col-span-2">
-                        <UserDetails
-                          id="medical-council-registration"
-                          title="Medical Council Registration"
-                        >
-                          {user.doctor_medical_council_registration ? (
-                            <span className="font-semibold">
-                              {user.doctor_medical_council_registration}
-                            </span>
-                          ) : (
-                            <span className="text-secondary-600">
-                              {t("unknown")}
-                            </span>
-                          )}
-                        </UserDetails>
-                      </div>
-                    </>
-                  )}
-                </div>
-                {user.local_body_object && (
-                  <UserDetails id="local_body" title="Location">
-                    <div className="font-semibold">
-                      {user.local_body_object.name}
-                    </div>
-                  </UserDetails>
-                )}
-
-                <div
-                  className={`${
-                    isExtremeSmallScreen ? "flex flex-wrap" : "grid grid-cols-2"
-                  }`}
-                >
-                  {user.user_type === "Nurse" && (
-                    <div className="row-span-1">
-                      <UserDetails
-                        id="qualification"
-                        title={t("qualification")}
-                      >
-                        {user.qualification ? (
-                          <span className="font-semibold">
-                            {user.qualification}
-                          </span>
-                        ) : (
-                          <span className="text-secondary-600">
-                            {t("unknown")}
-                          </span>
-                        )}
-                      </UserDetails>
-                    </div>
-                  )}
-                  {user.created_by && (
-                    <div className="col-span-1">
-                      <UserDetails id="created_by" title="Created by">
-                        <div className="overflow-hidden">
-                          <div
-                            className="truncate font-semibold"
-                            title={user.created_by}
-                          >
-                            {user.created_by}
-                          </div>
-                        </div>
-                      </UserDetails>
-                    </div>
-                  )}
-                  {user.username && (
-                    <div className="col-span-1">
-                      <UserDetails id="home_facility" title="Home Facility">
-                        <span className="block font-semibold">
-                          {user.home_facility_object?.name ||
-                            "No Home Facility"}
-                        </span>
-                      </UserDetails>
-                    </div>
-                  )}
-                </div>
-                <div>
-                  <UserDetails
-                    id="working-hours"
-                    title="Average weekly working hours"
-                  >
-                    {user.weekly_working_hours ? (
-                      <span className="font-semibold">
-                        {user.weekly_working_hours} hours
-                      </span>
-                    ) : (
-                      <span className="text-secondary-600">-</span>
-                    )}
-                  </UserDetails>
-                </div>
-              </div>
-              {user.username && (
-                <div className="mb-0 mt-auto flex w-full flex-col justify-between gap-2 p-4">
-                  <div className="flex flex-col gap-2 @sm:flex-row">
-                    <ButtonV2
-                      id="facilities"
-                      className="flex w-full items-center @sm:w-1/2"
-                      onClick={() => {
-                        setExpandFacilityList(!expandFacilityList);
-                        setSelectedUser(user);
-                      }}
-                    >
-                      <CareIcon icon="l-hospital" className="text-lg" />
-                      <p>{t("linked_facilities")}</p>
-                    </ButtonV2>
-                    <ButtonV2
-                      id="skills"
-                      className="flex w-full items-center @sm:w-1/2"
-                      onClick={() => {
-                        setExpandSkillList(true);
-                        setSelectedUser(user.username);
-                      }}
-                    >
-                      <CareIcon icon="l-award" className="text-xl" />
-                      <p>{t("linked_skills")}</p>
-                    </ButtonV2>
-                  </div>
-                  {["DistrictAdmin", "StateAdmin"].includes(
-                    authUser.user_type,
-                  ) && (
-                    <div>
-                      <ButtonV2
-                        id="avg-workinghour"
-                        className="w-full"
-                        onClick={() => {
-                          setExpandWorkingHours(true);
-                          setSelectedUser(user.username);
-                          setWeeklyHours(user.weekly_working_hours);
-                        }}
-                      >
-                        <CareIcon icon="l-clock" className="text-xl" />
-                        <p className="whitespace-normal md:whitespace-nowrap">
-                          Set Average weekly working hours
-                        </p>
-                      </ButtonV2>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      );
-    }));
-
   if (userListLoading || districtDataLoading || !userListData?.results) {
-    manageUsers = <Loading />;
-  } else if (userListData?.results.length) {
-    manageUsers = (
-      <div>
-        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">
-          {userList}
-        </div>
-        <Pagination totalCount={userListData.count} />
-      </div>
-    );
-  } else if (userListData?.results && userListData?.results.length === 0) {
-    manageUsers = (
-      <div>
-        <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
-          <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
-            No Users Found
-          </div>
-        </div>
-      </div>
-    );
+    return <Loading />;
   }
 
+  manageUsers = (
+    <div>
+      <UserListView
+        users={userListData?.results ?? []}
+        onSearch={(username) => updateQuery({ username })}
+        searchValue={qParams.username}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+      <Pagination totalCount={userListData.count} />
+    </div>
+  );
+
   return (
     <Page title={t("user_management")} hideBack={true} breadcrumbs={false}>
-      {expandSkillList && (
-        <SkillsSlideOver
-          show={expandSkillList}
-          setShow={setExpandSkillList}
-          username={selectedUser}
-        />
-      )}
-      <SlideOverCustom
-        open={expandFacilityList}
-        setOpen={setExpandFacilityList}
-        slideFrom="right"
-        title={t("linked_facilities")}
-        dialogClass="md:w-[400px]"
-      >
-        <UserFacilities user={selectedUser} />
-      </SlideOverCustom>
-      <SlideOverCustom
-        open={expandWorkingHours}
-        setOpen={(state) => {
-          setExpandWorkingHours(state);
-          setWeeklyHours("0");
-          setWeeklyHoursError("");
-        }}
-        slideFrom="right"
-        title={t("average_weekly_working_hours")}
-        dialogClass="md:w-[400px]"
-      >
-        <div className="px-2">
-          <dt className="mb-3 text-sm font-medium leading-5 text-black">
-            {t("set_average_weekly_working_hours_for")} {selectedUser}
-          </dt>
-          <TextFormField
-            name="weekly_working_hours"
-            id="weekly_working_hours"
-            value={weeklyHours}
-            onChange={(e) => {
-              setWeeklyHours(e.value);
-            }}
-            error={weeklyHoursError}
-            required
-            label=""
-            type="number"
-            min={0}
-            max={168}
-          />
-          <div className="mt-2 text-right">
-            <Submit onClick={handleWorkingHourSubmit} label={t("update")} />
-          </div>
-        </div>
-      </SlideOverCustom>
-
-      <div className="mt-5 grid grid-cols-1 sm:grid-cols-3 md:gap-5">
+      <div className="mt-5 flex flex-col items-center justify-between gap-3 sm:flex-row">
         <CountBlock
           text="Total Users"
           count={userListData?.count || 0}
@@ -558,15 +131,6 @@ export default function ManageUsers() {
           className="flex-1"
         />
         <div className="col-span-2 my-2 flex flex-col justify-between space-y-3 lg:flex-row lg:space-x-4 lg:space-y-0 lg:px-3">
-          <div className="w-full">
-            <SearchInput
-              id="search-by-username"
-              name="username"
-              onChange={(e) => updateQuery({ [e.name]: e.value })}
-              value={qParams.username}
-              placeholder={t("search_by_username")}
-            />
-          </div>
           <div className="flex flex-col gap-2">
             <AdvancedFilterButton
               onClick={() => advancedFilter.setShow(true)}
@@ -617,13 +181,6 @@ export default function ManageUsers() {
       <div className="pt-4">
         <div>{manageUsers}</div>
       </div>
-      {userData.show && (
-        <UserDeleteDialog
-          name={userData.name}
-          handleCancel={handleCancel}
-          handleOk={handleSubmit}
-        />
-      )}
     </Page>
   );
 }
@@ -645,26 +202,6 @@ export function UserFacilities(props: { user: any }) {
     isHomeFacility: boolean;
   }>({ show: false, userName: "", facility: undefined, isHomeFacility: false });
   const authUser = useAuthUser();
-
-  const [replaceHomeFacility, setReplaceHomeFacility] = useState<{
-    show: boolean;
-    userName: string;
-    previousFacility?: FacilityModel;
-    newFacility?: FacilityModel;
-  }>({
-    show: false,
-    userName: "",
-    previousFacility: undefined,
-    newFacility: undefined,
-  });
-  const hideReplaceHomeFacilityModal = () => {
-    setReplaceHomeFacility({
-      show: false,
-      previousFacility: undefined,
-      userName: "",
-      newFacility: undefined,
-    });
-  };
   const hideUnlinkFacilityModal = () => {
     setUnlinkFacilityData({
       show: false,
@@ -890,13 +427,6 @@ export function UserFacilities(props: { user: any }) {
                                   onClick={() => {
                                     if (user?.home_facility_object) {
                                       // has previous home facility
-                                      setReplaceHomeFacility({
-                                        show: true,
-                                        userName: username,
-                                        previousFacility:
-                                          user?.home_facility_object,
-                                        newFacility: facility,
-                                      });
                                     } else {
                                       // no previous home facility
                                       updateHomeFacility(username, facility);
@@ -962,28 +492,6 @@ export function UserFacilities(props: { user: any }) {
           )}
         </div>
       )}
-      {replaceHomeFacility.show && (
-        <ConfirmHomeFacilityUpdateDialog
-          previousFacilityName={
-            replaceHomeFacility.previousFacility?.name || ""
-          }
-          userName={replaceHomeFacility.userName}
-          newFacilityName={replaceHomeFacility.newFacility?.name || ""}
-          handleCancel={hideReplaceHomeFacilityModal}
-          handleOk={() => {
-            updateHomeFacility(
-              replaceHomeFacility.userName,
-              replaceHomeFacility.newFacility,
-            );
-            setReplaceHomeFacility({
-              show: false,
-              previousFacility: undefined,
-              userName: "",
-              newFacility: undefined,
-            });
-          }}
-        />
-      )}
     </div>
   );
 }
diff --git a/src/components/Users/SkillsSlideOver.tsx b/src/components/Users/SkillsSlideOver.tsx
deleted file mode 100644
index 57e1c8359bb..00000000000
--- a/src/components/Users/SkillsSlideOver.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import SlideOverCustom from "@/CAREUI/interactive/SlideOver";
-
-import ButtonV2 from "@/components/Common/ButtonV2";
-import CircularProgress from "@/components/Common/CircularProgress";
-import { SkillSelect } from "@/components/Common/SkillSelect";
-import {
-  AddSkillsPlaceholder,
-  SkillsArray,
-} from "@/components/Users/SkillsSlideOverComponents";
-import UnlinkSkillDialog from "@/components/Users/UnlinkSkillDialog";
-import { SkillModel, SkillObjectModel } from "@/components/Users/models";
-
-import { useIsAuthorized } from "@/hooks/useIsAuthorized";
-
-import AuthorizeFor from "@/Utils/AuthorizeFor";
-import * as Notification from "@/Utils/Notifications";
-import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
-import useQuery from "@/Utils/request/useQuery";
-
-interface IProps {
-  username: string;
-  show: boolean;
-  setShow: (show: boolean) => void;
-}
-
-export default ({ show, setShow, username }: IProps) => {
-  /* added const {t} hook here and relevant text to Common.json to avoid eslint error  */
-  const { t } = useTranslation();
-  const [selectedSkill, setSelectedSkill] = useState<SkillObjectModel | null>(
-    null,
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [deleteSkill, setDeleteSkill] = useState<SkillModel | null>(null);
-
-  const {
-    data: skills,
-    loading: skillsLoading,
-    refetch: refetchUserSkills,
-  } = useQuery(routes.userListSkill, {
-    pathParams: { username },
-  });
-
-  const addSkill = useCallback(
-    async (username: string, skill: SkillObjectModel | null) => {
-      if (!skill) return;
-      setIsLoading(true);
-      const { res } = await request(routes.addUserSkill, {
-        pathParams: { username },
-        body: { skill: skill.id },
-      });
-
-      if (!res?.ok) {
-        Notification.Error({
-          msg: "Error while adding skill",
-        });
-      } else {
-        Notification.Success({
-          msg: "Skill added successfully",
-        });
-      }
-      setSelectedSkill(null);
-      setIsLoading(false);
-      await refetchUserSkills();
-    },
-    [refetchUserSkills],
-  );
-
-  const removeSkill = useCallback(
-    async (username: string, skillId: string) => {
-      const { res } = await request(routes.deleteUserSkill, {
-        pathParams: { username, id: skillId },
-      });
-      if (res?.status !== 204) {
-        Notification.Error({
-          msg: "Error while unlinking skill",
-        });
-      } else {
-        Notification.Success({
-          msg: "Skill unlinked successfully",
-        });
-      }
-      setDeleteSkill(null);
-      await refetchUserSkills();
-    },
-    [refetchUserSkills],
-  );
-
-  const authorizeForAddSkill = useIsAuthorized(
-    AuthorizeFor(["DistrictAdmin", "StateAdmin"]),
-  );
-
-  const hasSkills = skills?.results?.length || 0 > 0;
-
-  return (
-    <div className="col-span-4">
-      {deleteSkill && (
-        <UnlinkSkillDialog
-          skillName={deleteSkill.skill_object.name || ""}
-          userName={username}
-          onCancel={() => setDeleteSkill(null)}
-          onSubmit={() => removeSkill(username, deleteSkill.id)}
-        />
-      )}
-      <SlideOverCustom
-        open={show}
-        setOpen={(openState) => {
-          !deleteSkill && setShow(openState);
-        }}
-        slideFrom="right"
-        title="Skills"
-        dialogClass="md:w-[400px]"
-      >
-        <div>
-          <div className="col-span-full sm:col-span-3 sm:col-start-2">
-            {(!isLoading || !skillsLoading) && (
-              <div
-                className={`${
-                  !authorizeForAddSkill && "tooltip"
-                } flex items-center gap-2`}
-              >
-                <SkillSelect
-                  id="select-skill"
-                  multiple={false}
-                  name="skill"
-                  disabled={!authorizeForAddSkill}
-                  showNOptions={Infinity}
-                  selected={selectedSkill}
-                  setSelected={setSelectedSkill}
-                  errors=""
-                  className="w-full"
-                  userSkills={skills?.results || []}
-                />
-                <ButtonV2
-                  id="add-skill-button"
-                  disabled={!authorizeForAddSkill}
-                  onClick={() => addSkill(username, selectedSkill)}
-                  className="mt-1 h-[45px] w-[74px] text-base"
-                >
-                  {t("add")}
-                </ButtonV2>
-                {!authorizeForAddSkill && (
-                  <span className="tooltip-text tooltip-bottom -translate-x-24 translate-y-2">
-                    {t("contact_your_admin_to_add_skills")}
-                  </span>
-                )}
-              </div>
-            )}
-            {isLoading || skillsLoading ? (
-              <div className="mt-4 flex justify-center">
-                <CircularProgress />
-              </div>
-            ) : (
-              <div className="mb-2 mt-4" id="added-user-skills">
-                {hasSkills ? (
-                  <SkillsArray
-                    isLoading={isLoading || skillsLoading}
-                    skills={skills?.results || []}
-                    authorizeForAddSkill={authorizeForAddSkill}
-                    setDeleteSkill={setDeleteSkill}
-                  />
-                ) : (
-                  <AddSkillsPlaceholder />
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </SlideOverCustom>
-    </div>
-  );
-};
diff --git a/src/components/Users/SkillsSlideOverComponents.tsx b/src/components/Users/SkillsSlideOverComponents.tsx
deleted file mode 100644
index bb91d4cbfd3..00000000000
--- a/src/components/Users/SkillsSlideOverComponents.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import ButtonV2 from "@/components/Common/ButtonV2";
-import { SkillModel } from "@/components/Users/models";
-
-import { classNames } from "@/Utils/utils";
-
-export const AddSkillsPlaceholder = () => {
-  const { t } = useTranslation();
-  return (
-    <div className="my-2 flex h-96 flex-col content-center justify-center align-middle">
-      <div className="w-full">
-        <img src="/images/404.svg" alt="Error 404" className="mx-auto w-80" />
-      </div>
-      <p className="pt-4 text-center text-lg font-semibold text-primary">
-        {t("select_skills")}
-      </p>
-    </div>
-  );
-};
-
-type SkillsArrayProps = {
-  isLoading: boolean;
-  skills: SkillModel[];
-  authorizeForAddSkill: boolean;
-  setDeleteSkill: (skill: SkillModel) => void;
-};
-
-export const SkillsArray = ({
-  isLoading,
-  skills,
-  authorizeForAddSkill,
-  setDeleteSkill,
-}: SkillsArrayProps) => {
-  return (
-    <Fragment>
-      {skills.map((skill, i) => (
-        <div
-          key={`facility_${i}`}
-          className={classNames(
-            "relative cursor-pointer rounded px-4 py-5 transition duration-200 ease-in-out hover:bg-secondary-200 focus:bg-secondary-200 md:rounded-lg lg:px-8",
-          )}
-        >
-          <div className="flex justify-between">
-            <div className="text-lg font-bold">{skill.skill_object.name}</div>
-            <div>
-              <ButtonV2
-                id="unlink-skill"
-                size="small"
-                variant="danger"
-                ghost={true}
-                disabled={isLoading || !authorizeForAddSkill}
-                onClick={() => setDeleteSkill(skill)}
-              >
-                <CareIcon icon="l-times" className="text-lg" />
-              </ButtonV2>
-            </div>
-          </div>
-        </div>
-      ))}
-    </Fragment>
-  );
-};
diff --git a/src/components/Users/UnlinkSkillDialog.tsx b/src/components/Users/UnlinkSkillDialog.tsx
index c52e72b30ca..6ddfcc6e569 100644
--- a/src/components/Users/UnlinkSkillDialog.tsx
+++ b/src/components/Users/UnlinkSkillDialog.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
 
@@ -11,6 +12,7 @@ interface Props {
 
 export default function UnlinkSkillDialog(props: Props) {
   const [disabled, setDisabled] = useState(false);
+  const { t } = useTranslation();
 
   const handleSubmit = () => {
     props.onSubmit();
@@ -20,19 +22,21 @@ export default function UnlinkSkillDialog(props: Props) {
   return (
     <ConfirmDialog
       action="Unlink"
-      title="Unlink Skill"
+      name="confirm-unlink-skill"
+      title={t("unlink_skill")}
       variant="warning"
       onClose={props.onCancel}
       onConfirm={handleSubmit}
       disabled={disabled}
       show
       description={
-        <span>
-          Are you sure you want to unlink the skill{" "}
-          <strong>{props.skillName}</strong> from user{" "}
-          <strong>{props.userName}</strong>? the user will not have the skill
-          associated anymore.
-        </span>
+        <div className="flex leading-relaxed text-secondary-800">
+          <span id="unlink-skill-modal-description">
+            {t("unlink_skill_confirm")} <strong>{props.skillName}</strong>{" "}
+            {t("from_user")} <strong>{props.userName}</strong>?{" "}
+            {t("unlink_skill_access")}
+          </span>
+        </div>
       }
     ></ConfirmDialog>
   );
diff --git a/src/components/Users/UserAdd.tsx b/src/components/Users/UserAdd.tsx
index bfd38d2cae2..467cf578fae 100644
--- a/src/components/Users/UserAdd.tsx
+++ b/src/components/Users/UserAdd.tsx
@@ -1,152 +1,15 @@
-import { Link, navigate } from "raviger";
-import { useEffect, useState } from "react";
+import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
-import Card from "@/CAREUI/display/Card";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
-import CircularProgress from "@/components/Common/CircularProgress";
-import { FacilitySelect } from "@/components/Common/FacilitySelect";
-import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
-import { FacilityModel } from "@/components/Facility/models";
-import { PhoneNumberValidator } from "@/components/Form/FieldValidators";
-import CheckBoxFormField from "@/components/Form/FormFields/CheckBoxFormField";
-import DateFormField from "@/components/Form/FormFields/DateFormField";
-import { FieldLabel } from "@/components/Form/FormFields/FormField";
-import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
-import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
-import TextFormField from "@/components/Form/FormFields/TextFormField";
-import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
+import UserAddEditForm from "@/components/Users/UserAddEditForm";
+import { newUserFields } from "@/components/Users/UserFormValidations";
 
-import useAppHistory from "@/hooks/useAppHistory";
-import useAuthUser from "@/hooks/useAuthUser";
-
-import {
-  GENDER_TYPES,
-  USER_TYPES,
-  USER_TYPE_OPTIONS,
-} from "@/common/constants";
-import { useAbortableEffect } from "@/common/utils";
-import {
-  validateEmailAddress,
-  validateName,
-  validatePassword,
-  validateUsername,
-} from "@/common/validation";
-
-import { DraftSection, useAutoSaveReducer } from "@/Utils/AutoSave";
-import * as Notification from "@/Utils/Notifications";
-import dayjs from "@/Utils/dayjs";
-import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
-import useQuery from "@/Utils/request/useQuery";
-import {
-  classNames,
-  dateQueryString,
-  parsePhoneNumber,
-  scrollTo,
-} from "@/Utils/utils";
-
-interface UserProps {
-  userId?: number;
-}
-
-interface StateObj {
-  id: number;
-  name: string;
-}
-
-type UserForm = {
-  user_type: string;
-  gender: string;
-  password: string;
-  c_password: string;
-  facilities: Array<string>;
-  home_facility: FacilityModel | null;
-  username: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone_number: string;
-  alt_phone_number: string;
-  phone_number_is_whatsapp: boolean;
-  date_of_birth: Date | null;
-  state: number;
-  district: number;
-  local_body: number;
-  qualification: string | undefined;
-  doctor_experience_commenced_on: string | undefined;
-  doctor_medical_council_registration: string | undefined;
-};
-
-const initForm: UserForm = {
-  user_type: "",
-  gender: "",
-  password: "",
-  c_password: "",
-  facilities: [],
-  home_facility: null,
-  username: "",
-  first_name: "",
-  last_name: "",
-  email: "",
-  phone_number: "+91",
-  alt_phone_number: "+91",
-  phone_number_is_whatsapp: true,
-  date_of_birth: null,
-  state: 0,
-  district: 0,
-  local_body: 0,
-  qualification: undefined,
-  doctor_experience_commenced_on: undefined,
-  doctor_medical_council_registration: undefined,
-};
-
-const STAFF_OR_NURSE_USER = [
-  "Staff",
-  "StaffReadOnly",
-  "Nurse",
-  "NurseReadOnly",
-];
-
-const initError = Object.assign(
-  {},
-  ...Object.keys(initForm).map((k) => ({ [k]: "" })),
-);
-
-const initialState = {
-  form: { ...initForm },
-  errors: { ...initError },
-};
-
-const user_create_reducer = (state = initialState, action: any) => {
-  switch (action.type) {
-    case "set_form": {
-      return {
-        ...state,
-        form: action.form,
-      };
-    }
-    case "set_errors": {
-      return {
-        ...state,
-        errors: action.errors,
-      };
-    }
-    case "set_state": {
-      if (action.state) return action.state;
-      return state;
-    }
-    default:
-      return state;
-  }
-};
-
-const getDate = (value: any) =>
-  value && dayjs(value).isValid() && dayjs(value).toDate();
+import { classNames } from "@/Utils/utils";
 
+//Temporary: ABDM plug imports from UserAdd instead of UserAddEditForm
 export const validateRule = (
   condition: boolean,
   content: JSX.Element | string,
@@ -176,465 +39,12 @@ export const validateRule = (
   );
 };
 
-export const UserAdd = (props: UserProps) => {
+const UserAdd = () => {
   const { t } = useTranslation();
-  const { goBack } = useAppHistory();
-  const { userId } = props;
-
-  const [state, dispatch] = useAutoSaveReducer<UserForm>(
-    user_create_reducer,
-    initialState,
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [states, setStates] = useState<StateObj[]>([]);
-  const [selectedStateId, setSelectedStateId] = useState<number>(0);
-  const [selectedDistrictId, setSelectedDistrictId] = useState<number>(0);
-  const [districts, setDistricts] = useState<StateObj[]>([]);
-  const [localBodies, setLocalBodies] = useState<StateObj[]>([]);
-  const [selectedFacility, setSelectedFacility] = useState<FacilityModel[]>([]);
-  const [usernameInputInFocus, setUsernameInputInFocus] = useState(false);
-  const [passwordInputInFocus, setPasswordInputInFocus] = useState(false);
-  const [confirmPasswordInputInFocus, setConfirmPasswordInputInFocus] =
-    useState(false);
-  const [usernameInput, setUsernameInput] = useState("");
-
-  const userExistsEnums = {
-    idle: 0,
-    checking: 1,
-    exists: 2,
-    available: 3,
-  };
-
-  const [usernameExists, setUsernameExists] = useState<number>(0);
-
-  const check_username = async (username: string) => {
-    setUsernameExists(userExistsEnums.checking);
-    const { res: usernameCheck } = await request(routes.checkUsername, {
-      pathParams: { username },
-      silent: true,
-    });
-    if (usernameCheck === undefined || usernameCheck.status === 409)
-      setUsernameExists(userExistsEnums.exists);
-    else if (usernameCheck.status === 200)
-      setUsernameExists(userExistsEnums.available);
-    else
-      Notification.Error({
-        msg: "Some error checking username availabality. Please try again later.",
-      });
-  };
-
-  useEffect(() => {
-    setUsernameExists(userExistsEnums.idle);
-    if (validateUsername(usernameInput)) {
-      const timeout = setTimeout(() => {
-        check_username(usernameInput);
-      }, 500);
-      return () => clearTimeout(timeout);
-    }
-  }, [usernameInput]);
-
-  const authUser = useAuthUser();
-
-  const userIndex = USER_TYPES.indexOf(authUser.user_type);
-  const readOnlyUsers = USER_TYPE_OPTIONS.filter((user) => user.readOnly);
-
-  const defaultAllowedUserTypes = USER_TYPE_OPTIONS.slice(0, userIndex + 1);
-  const userTypes = authUser.is_superuser
-    ? [...USER_TYPE_OPTIONS]
-    : authUser.user_type === "StaffReadOnly"
-      ? readOnlyUsers.slice(0, 1)
-      : authUser.user_type === "DistrictReadOnlyAdmin"
-        ? readOnlyUsers.slice(0, 2)
-        : authUser.user_type === "StateReadOnlyAdmin"
-          ? readOnlyUsers.slice(0, 3)
-          : authUser.user_type === "Pharmacist"
-            ? USER_TYPE_OPTIONS.slice(0, 1)
-            : // Exception to allow Staff to Create Doctors
-              defaultAllowedUserTypes;
-
-  // TODO: refactor lines 227 through 248 to be more readable. This is messy.
-  if (authUser.user_type === "Nurse" || authUser.user_type === "Staff") {
-    userTypes.push(USER_TYPE_OPTIONS[6]); // Temperorily allows creation of users with elevated permissions due to introduction of new roles.
-  }
-
-  const headerText = !userId ? "Add User" : "Update User";
-  const buttonText = !userId ? "Save User" : "Update Details";
-  const showLocalbody = ![
-    "Pharmacist",
-    "Volunteer",
-    "Doctor",
-    ...STAFF_OR_NURSE_USER,
-  ].includes(state.form.user_type);
-
-  const { loading: isDistrictLoading } = useQuery(routes.getDistrictByState, {
-    prefetch: !!(selectedStateId > 0),
-    pathParams: { id: selectedStateId.toString() },
-    onResponse: (result) => {
-      if (!result || !result.res || !result.data) return;
-      if (userIndex <= USER_TYPES.indexOf("DistrictAdmin")) {
-        setDistricts([authUser.district_object!]);
-      } else {
-        setDistricts(result.data);
-      }
-    },
-  });
-
-  const { loading: isLocalbodyLoading } = useQuery(
-    routes.getAllLocalBodyByDistrict,
-    {
-      prefetch: !!(selectedDistrictId > 0),
-      pathParams: { id: selectedDistrictId.toString() },
-      onResponse: (result) => {
-        if (!result || !result.res || !result.data) return;
-        if (userIndex <= USER_TYPES.indexOf("LocalBodyAdmin")) {
-          setLocalBodies([authUser.local_body_object!]);
-        } else {
-          setLocalBodies(result.data);
-        }
-      },
-    },
-  );
-
-  const { loading: isStateLoading } = useQuery(routes.statesList, {
-    onResponse: (result) => {
-      if (!result || !result.res || !result.data) return;
-      if (userIndex <= USER_TYPES.indexOf("StateAdmin")) {
-        setStates([authUser.state_object!]);
-      } else {
-        setStates(result.data.results);
-      }
-    },
-  });
-
-  const handleDateChange = (e: FieldChangeEvent<Date>) => {
-    if (dayjs(e.value).isValid()) {
-      const errors = { ...state.errors, [e.name]: "" };
-      dispatch({
-        type: "set_form",
-        form: {
-          ...state.form,
-          [e.name]: dayjs(e.value).format("YYYY-MM-DD"),
-        },
-      });
-      dispatch({ type: "set_errors", errors });
-    }
-  };
-
-  const handleFieldChange = (event: FieldChangeEvent<unknown>) => {
-    const errors = { ...state.errors, [event.name]: "" };
-    dispatch({
-      type: "set_form",
-      form: {
-        ...state.form,
-        [event.name]: event.value,
-      },
-    });
-    dispatch({ type: "set_errors", errors });
-  };
-
-  useAbortableEffect(() => {
-    if (state.form.phone_number_is_whatsapp) {
-      handleFieldChange({
-        name: "alt_phone_number",
-        value: state.form.phone_number,
-      });
-    }
-  }, [state.form.phone_number_is_whatsapp, state.form.phone_number]);
-
-  const setFacility = (selected: FacilityModel | FacilityModel[] | null) => {
-    const newSelectedFacilities = selected
-      ? Array.isArray(selected)
-        ? selected
-        : [selected]
-      : [];
-    setSelectedFacility(newSelectedFacilities as FacilityModel[]);
-    const form = { ...state.form };
-    form.facilities = selected
-      ? (selected as FacilityModel[]).map((i) => i.id!)
-      : [];
-    dispatch({ type: "set_form", form });
-  };
-
-  const validateForm = () => {
-    const errors = { ...initError };
-    let invalidForm = false;
-    Object.keys(state.form).forEach((field) => {
-      switch (field) {
-        case "facilities":
-          if (
-            state.form[field].length === 0 &&
-            STAFF_OR_NURSE_USER.includes(authUser.user_type) &&
-            STAFF_OR_NURSE_USER.includes(state.form.user_type)
-          ) {
-            errors[field] =
-              "Please select atleast one of the facilities you are linked to";
-            invalidForm = true;
-          }
-          return;
-        case "user_type":
-          if (!state.form[field]) {
-            errors[field] = "Please select the User Type";
-            invalidForm = true;
-          }
-          return;
-        case "doctor_experience_commenced_on":
-          if (state.form.user_type === "Doctor" && !state.form[field]) {
-            errors[field] = t("field_required");
-            invalidForm = true;
-          } else if (
-            state.form.user_type === "Doctor" &&
-            Number(state.form.doctor_experience_commenced_on) > 100
-          ) {
-            errors[field] = "Doctor experience should be less than 100 years";
-            invalidForm = true;
-          }
-          return;
-        case "qualification":
-          if (
-            (state.form.user_type === "Doctor" ||
-              state.form.user_type === "Nurse") &&
-            !state.form[field]
-          ) {
-            errors[field] = t("field_required");
-            invalidForm = true;
-          }
-          return;
-        case "doctor_medical_council_registration":
-          if (state.form.user_type === "Doctor" && !state.form[field]) {
-            errors[field] = t("field_required");
-            invalidForm = true;
-          }
-          return;
-        case "first_name":
-        case "last_name":
-          state.form[field] = state.form[field].trim();
-          if (!state.form[field]) {
-            errors[field] = `${field
-              .split("_")
-              .map((word) => word[0].toUpperCase() + word.slice(1))
-              .join(" ")} is required`;
-            invalidForm = true;
-          } else if (!validateName(state.form[field])) {
-            errors[field] = t("min_char_length_error", { min_length: 3 });
-            invalidForm = true;
-          }
-          return;
-        case "gender":
-          if (!state.form[field]) {
-            errors[field] = "Please select the Gender";
-            invalidForm = true;
-          }
-          return;
-        case "username":
-          if (!state.form[field]) {
-            errors[field] = "Please enter the username";
-            invalidForm = true;
-          } else if (!validateUsername(state.form[field])) {
-            errors[field] =
-              "Please enter a 4-16 characters long username with lowercase letters, digits and . _ - only and it should not start or end with . _ -";
-            invalidForm = true;
-          } else if (usernameExists !== userExistsEnums.available) {
-            errors[field] = "This username already exists";
-            invalidForm = true;
-          }
-          return;
-        case "password":
-          if (!state.form[field]) {
-            errors[field] = "Please enter the password";
-            invalidForm = true;
-          } else if (!validatePassword(state.form[field])) {
-            errors.password =
-              "Password should have 1 lowercase letter, 1 uppercase letter, 1 number, and be at least 8 characters long";
-            invalidForm = true;
-          }
-          return;
-        case "c_password":
-          if (!state.form.password) {
-            errors.c_password = "Confirm password is required";
-            invalidForm = true;
-          } else if (state.form.password !== state.form.c_password) {
-            errors.c_password = "Passwords not matching";
-            invalidForm = true;
-          }
-          return;
-        case "phone_number":
-          // eslint-disable-next-line no-case-declarations
-          const phoneNumber = parsePhoneNumber(state.form[field]);
-          // eslint-disable-next-line no-case-declarations
-          let is_valid = false;
-          if (phoneNumber) {
-            is_valid = PhoneNumberValidator()(phoneNumber) === undefined;
-          }
-          if (!state.form[field] || !is_valid) {
-            errors[field] = "Please enter valid phone number";
-            invalidForm = true;
-          }
-          return;
-
-        case "alt_phone_number":
-          // eslint-disable-next-line no-case-declarations
-          let alt_is_valid = false;
-          if (state.form[field] && state.form[field] !== "+91") {
-            const altPhoneNumber = parsePhoneNumber(state.form[field]);
-            if (altPhoneNumber) {
-              alt_is_valid =
-                PhoneNumberValidator(["mobile"])(altPhoneNumber) === undefined;
-            }
-          }
-          if (
-            state.form[field] &&
-            state.form[field] !== "+91" &&
-            !alt_is_valid
-          ) {
-            errors[field] = "Please enter valid mobile number";
-            invalidForm = true;
-          }
-          return;
-        case "email":
-          state.form[field] = state.form[field].trim();
-          if (
-            state.form[field].length === 0 ||
-            !validateEmailAddress(state.form[field])
-          ) {
-            errors[field] = "Please enter a valid email address";
-            invalidForm = true;
-          }
-          return;
-        case "date_of_birth":
-          if (!state.form[field]) {
-            errors[field] = "Please enter date in DD/MM/YYYY format";
-            invalidForm = true;
-          } else if (
-            dayjs(state.form[field]).isAfter(dayjs().subtract(1, "year"))
-          ) {
-            errors[field] = "Enter a valid date of birth";
-            invalidForm = true;
-          }
-          return;
-        case "state":
-          if (!Number(state.form[field])) {
-            errors[field] = "Please select the state";
-            invalidForm = true;
-          }
-          return;
-        case "district":
-          if (!Number(state.form[field])) {
-            errors[field] = "Please select the district";
-            invalidForm = true;
-          }
-          return;
-        case "local_body":
-          if (showLocalbody && !Number(state.form[field])) {
-            errors[field] = "Please select the local body";
-            invalidForm = true;
-          }
-          return;
-
-        default:
-          return;
-      }
-    });
-    if (invalidForm) {
-      dispatch({ type: "set_errors", errors });
-      const firstError = Object.keys(errors).find((e) => errors[e]);
-      if (firstError) {
-        scrollTo(firstError);
-      }
-      return false;
-    }
-    dispatch({ type: "set_errors", errors });
-    return true;
-  };
-
-  const handleSubmit = async (e: any) => {
-    e.preventDefault();
-    const validated = validateForm();
-    if (validated) {
-      setIsLoading(true);
-      const data = {
-        user_type: state.form.user_type,
-        gender: state.form.gender,
-        password: state.form.password,
-        facilities: state.form.facilities ? state.form.facilities : undefined,
-        home_facility: state.form.home_facility ?? undefined,
-        username: state.form.username,
-        first_name: state.form.first_name ? state.form.first_name : undefined,
-        last_name: state.form.last_name ? state.form.last_name : undefined,
-        email: state.form.email,
-        state: state.form.state,
-        district: state.form.district,
-        local_body: showLocalbody ? state.form.local_body : null,
-        phone_number:
-          state.form.phone_number === "+91"
-            ? ""
-            : parsePhoneNumber(state.form.phone_number),
-        alt_phone_number:
-          parsePhoneNumber(
-            state.form.phone_number_is_whatsapp
-              ? state.form.phone_number === "+91"
-                ? ""
-                : state.form.phone_number
-              : state.form.alt_phone_number === "+91"
-                ? ""
-                : state.form.alt_phone_number,
-          ) ?? "",
-        date_of_birth: dateQueryString(state.form.date_of_birth),
-        qualification:
-          state.form.user_type === "Doctor" || state.form.user_type == "Nurse"
-            ? state.form.qualification
-            : undefined,
-        doctor_experience_commenced_on:
-          state.form.user_type === "Doctor"
-            ? dayjs()
-                .subtract(
-                  parseInt(state.form.doctor_experience_commenced_on ?? "0"),
-                  "years",
-                )
-                .format("YYYY-MM-DD")
-            : undefined,
-        doctor_medical_council_registration:
-          state.form.user_type === "Doctor"
-            ? state.form.doctor_medical_council_registration
-            : undefined,
-      };
-
-      const { res } = await request(routes.addUser, {
-        body: data,
-      });
-      if (res?.ok) {
-        dispatch({ type: "set_form", form: initForm });
-        if (!userId) {
-          Notification.Success({
-            msg: "User added successfully",
-          });
-        } else {
-          Notification.Success({
-            msg: "User updated successfully",
-          });
-        }
-        navigate("/users");
-      }
-      setIsLoading(false);
-    }
-  };
-
-  if (isLoading) {
-    return <Loading />;
-  }
-
-  const field = (name: string) => {
-    return {
-      id: name,
-      name,
-      onChange: handleFieldChange,
-      value: (state.form as any)[name],
-      error: (state.errors as any)[name],
-    };
-  };
 
   return (
     <Page
-      title={headerText}
+      title={t("Add User")}
       options={
         <Link
           href="https://school.ohc.network/targets/12953"
@@ -647,337 +57,9 @@ export const UserAdd = (props: UserProps) => {
       }
       backUrl="/users"
     >
-      <Card>
-        <form onSubmit={(e) => handleSubmit(e)}>
-          <DraftSection
-            handleDraftSelect={(newState) => {
-              dispatch({ type: "set_state", state: newState });
-            }}
-            formData={state.form}
-          />
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="md:col-span-2">
-              <FieldLabel>Facilities</FieldLabel>
-              <FacilitySelect
-                multiple={true}
-                name="facilities"
-                selected={selectedFacility}
-                setSelected={setFacility}
-                errors={state.errors.facilities}
-                showAll={false}
-              />
-            </div>
-            <SelectFormField
-              {...field("user_type")}
-              required
-              label="User Type"
-              options={userTypes}
-              optionLabel={(o) => o.role + (o.readOnly ? " (Read Only)" : "")}
-              optionValue={(o) => o.id}
-            />
-
-            {(state.form.user_type === "Doctor" ||
-              state.form.user_type === "Nurse") && (
-              <TextFormField
-                {...field("qualification")}
-                required
-                label={t("qualification")}
-                placeholder={t("qualification")}
-              />
-            )}
-            {state.form.user_type === "Doctor" && (
-              <>
-                <TextFormField
-                  {...field("doctor_experience_commenced_on")}
-                  required
-                  min={0}
-                  type="number"
-                  label="Years of experience"
-                  placeholder="Years of experience of the Doctor"
-                />
-
-                <TextFormField
-                  {...field("doctor_medical_council_registration")}
-                  required
-                  label="Medical Council Registration"
-                  placeholder="Doctor's medical council registration number"
-                />
-              </>
-            )}
-
-            <SelectFormField
-              {...field("home_facility")}
-              label="Home facility"
-              options={selectedFacility ?? []}
-              optionLabel={(option) => option.name}
-              optionValue={(option) => option.id}
-              onChange={handleFieldChange}
-            />
-
-            <div>
-              <PhoneNumberFormField
-                {...field("phone_number")}
-                placeholder="Phone Number"
-                label="Phone Number"
-                required
-                types={["mobile", "landline"]}
-              />
-              <CheckBoxFormField
-                name="phone_number_is_whatsapp"
-                value={state.form.phone_number_is_whatsapp}
-                onChange={handleFieldChange}
-                label="Is the phone number a WhatsApp number?"
-              />
-            </div>
-
-            <PhoneNumberFormField
-              {...field("alt_phone_number")}
-              placeholder="WhatsApp Phone Number"
-              label="Whatsapp Number"
-              disabled={state.form.phone_number_is_whatsapp}
-              types={["mobile"]}
-            />
-
-            <div>
-              <TextFormField
-                {...field("username")}
-                label="Username"
-                placeholder="Username"
-                required
-                autoComplete="new-username"
-                value={usernameInput}
-                onChange={(e) => {
-                  handleFieldChange(e);
-                  setUsernameInput(e.value);
-                }}
-                onFocus={() => setUsernameInputInFocus(true)}
-                onBlur={() => {
-                  setUsernameInputInFocus(false);
-                }}
-              />
-              {usernameInputInFocus && (
-                <div className="text-small pl-2 text-secondary-500">
-                  <div>
-                    {usernameExists !== userExistsEnums.idle && (
-                      <>
-                        {usernameExists === userExistsEnums.checking ? (
-                          <span>
-                            <CareIcon
-                              icon="l-record-audio"
-                              className="text-xl"
-                            />{" "}
-                            checking...
-                          </span>
-                        ) : (
-                          <>
-                            {usernameExists === userExistsEnums.exists ? (
-                              <div>
-                                <CareIcon
-                                  icon="l-times-circle"
-                                  className="text-xl text-red-500"
-                                />{" "}
-                                <span className="text-red-500">
-                                  Username is not available
-                                </span>
-                              </div>
-                            ) : (
-                              <div>
-                                <CareIcon
-                                  icon="l-check-circle"
-                                  className="text-xl text-green-500"
-                                />{" "}
-                                <span className="text-primary-500">
-                                  Username is available
-                                </span>
-                              </div>
-                            )}
-                          </>
-                        )}
-                      </>
-                    )}
-                  </div>
-                  <div>
-                    {validateRule(
-                      usernameInput.length >= 4 && usernameInput.length <= 16,
-                      "Username should be 4-16 characters long",
-                      !state.form.username,
-                    )}
-                  </div>
-                  <div>
-                    {validateRule(
-                      /^[a-z0-9._-]*$/.test(usernameInput),
-                      "Username can only contain lowercase letters, numbers, and . _ -",
-                      !state.form.username,
-                    )}
-                  </div>
-                  <div>
-                    {validateRule(
-                      /^[a-z0-9].*[a-z0-9]$/i.test(usernameInput),
-                      "Username must start and end with a letter or number",
-                      !state.form.username,
-                    )}
-                  </div>
-                  <div>
-                    {validateRule(
-                      !/(?:[._-]{2,})/.test(usernameInput),
-                      "Username can't contain consecutive special characters . _ -",
-                      !state.form.username,
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-
-            <DateFormField
-              {...field("date_of_birth")}
-              label="Date of Birth"
-              required
-              value={getDate(state.form.date_of_birth)}
-              onChange={handleDateChange}
-              disableFuture
-            />
-
-            <div>
-              <TextFormField
-                {...field("password")}
-                label="Password"
-                placeholder="Password"
-                required
-                autoComplete="new-password"
-                type="password"
-                onFocus={() => setPasswordInputInFocus(true)}
-                onBlur={() => setPasswordInputInFocus(false)}
-              />
-              {passwordInputInFocus && (
-                <div className="text-small pl-2 text-secondary-500">
-                  {validateRule(
-                    state.form.password?.length >= 8,
-                    "Password should be atleast 8 characters long",
-                    !state.form.password,
-                  )}
-                  {validateRule(
-                    state.form.password !== state.form.password.toUpperCase(),
-                    "Password should contain at least 1 lowercase letter",
-                    !state.form.password,
-                  )}
-                  {validateRule(
-                    state.form.password !== state.form.password.toLowerCase(),
-                    "Password should contain at least 1 uppercase letter",
-                    !state.form.password,
-                  )}
-                  {validateRule(
-                    /\d/.test(state.form.password),
-                    "Password should contain at least 1 number",
-                    !state.form.password,
-                  )}
-                </div>
-              )}
-            </div>
-            <div>
-              <TextFormField
-                {...field("c_password")}
-                label="Confirm Password"
-                placeholder="Confirm Password"
-                required
-                type="password"
-                autoComplete="off"
-                onFocus={() => setConfirmPasswordInputInFocus(true)}
-                onBlur={() => setConfirmPasswordInputInFocus(false)}
-              />
-              {confirmPasswordInputInFocus &&
-                state.form.c_password.length > 0 &&
-                validateRule(
-                  state.form.c_password === state.form.password,
-                  "Confirm password should match the entered password",
-                  !state.form.password,
-                )}
-            </div>
-            <TextFormField
-              {...field("first_name")}
-              label="First name"
-              placeholder="First name"
-              required
-            />
-            <TextFormField
-              {...field("last_name")}
-              label="Last name"
-              placeholder="Last name"
-              required
-            />
-            <TextFormField
-              {...field("email")}
-              label="Email"
-              placeholder="Email"
-              required
-            />
-            <SelectFormField
-              {...field("gender")}
-              label="Gender"
-              required
-              value={state.form.gender}
-              options={GENDER_TYPES}
-              optionLabel={(o) => o.text}
-              optionValue={(o) => o.text}
-            />
-
-            {isStateLoading ? (
-              <CircularProgress />
-            ) : (
-              <SelectFormField
-                {...field("state")}
-                label="State"
-                required
-                placeholder="Choose State"
-                options={states}
-                optionLabel={(o) => o.name}
-                optionValue={(o) => o.id}
-                onChange={(e) => {
-                  handleFieldChange(e);
-                  if (e) setSelectedStateId(e.value);
-                }}
-              />
-            )}
-
-            {isDistrictLoading ? (
-              <CircularProgress />
-            ) : (
-              <SelectFormField
-                {...field("district")}
-                label="District"
-                required
-                placeholder="Choose District"
-                options={districts}
-                optionLabel={(o) => o.name}
-                optionValue={(o) => o.id}
-                onChange={(e) => {
-                  handleFieldChange(e);
-                  if (e) setSelectedDistrictId(e.value);
-                }}
-              />
-            )}
-
-            {showLocalbody &&
-              (isLocalbodyLoading ? (
-                <CircularProgress />
-              ) : (
-                <SelectFormField
-                  {...field("local_body")}
-                  label="Local Body"
-                  required
-                  position="above"
-                  placeholder="Choose Local Body"
-                  options={localBodies}
-                  optionLabel={(o) => o.name}
-                  optionValue={(o) => o.id}
-                />
-              ))}
-          </div>
-          <div className="mt-4 flex flex-col justify-end gap-2 md:flex-row">
-            <Cancel onClick={() => goBack()} />
-            <Submit onClick={handleSubmit} label={buttonText} />
-          </div>
-        </form>
-      </Card>
+      <UserAddEditForm includedFields={newUserFields} />
     </Page>
   );
 };
+
+export default UserAdd;
diff --git a/src/components/Users/UserAddEditForm.tsx b/src/components/Users/UserAddEditForm.tsx
new file mode 100644
index 00000000000..f82c4e73de7
--- /dev/null
+++ b/src/components/Users/UserAddEditForm.tsx
@@ -0,0 +1,1289 @@
+import { navigate } from "raviger";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import CircularProgress from "@/components/Common/CircularProgress";
+import { FacilitySelect } from "@/components/Common/FacilitySelect";
+import Loading from "@/components/Common/Loading";
+import { FacilityModel } from "@/components/Facility/models";
+import {
+  FieldError,
+  PhoneNumberValidator,
+} from "@/components/Form/FieldValidators";
+import Form from "@/components/Form/Form";
+import { FormContextValue } from "@/components/Form/FormContext";
+import CheckBoxFormField from "@/components/Form/FormFields/CheckBoxFormField";
+import DateFormField from "@/components/Form/FormFields/DateFormField";
+import { FieldLabel } from "@/components/Form/FormFields/FormField";
+import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
+import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
+import TextFormField from "@/components/Form/FormFields/TextFormField";
+import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
+import {
+  UserForm,
+  ValidateDoctorExperienceCommencedOn,
+  ValidateDoctorMedicalCouncilRegistration,
+  ValidateQualification,
+  ValidateVideoLink,
+} from "@/components/Users/UserFormValidations";
+import { GetUserTypes } from "@/components/Users/UserListAndCard";
+import { GenderType, UserModel } from "@/components/Users/models";
+
+import useAppHistory from "@/hooks/useAppHistory";
+import useAuthUser from "@/hooks/useAuthUser";
+
+import { GENDER_TYPES, USER_TYPES } from "@/common/constants";
+import {
+  validateEmailAddress,
+  validateName,
+  validateNumber,
+  validatePassword,
+  validateUsername,
+} from "@/common/validation";
+
+import { useAutoSaveReducer } from "@/Utils/AutoSave";
+import * as Notification from "@/Utils/Notifications";
+import dayjs from "@/Utils/dayjs";
+import routes from "@/Utils/request/api";
+import request from "@/Utils/request/request";
+import useQuery from "@/Utils/request/useQuery";
+import { classNames, dateQueryString, parsePhoneNumber } from "@/Utils/utils";
+
+interface StateObj {
+  id: number;
+  name: string;
+}
+
+const initForm: UserForm = {
+  user_type: "",
+  gender: "",
+  password: "",
+  c_password: "",
+  facilities: [],
+  home_facility: null,
+  username: "",
+  first_name: "",
+  last_name: "",
+  email: "",
+  phone_number: "+91",
+  alt_phone_number: "+91",
+  phone_number_is_whatsapp: true,
+  date_of_birth: null,
+  state: 0,
+  district: 0,
+  local_body: 0,
+  qualification: undefined,
+  doctor_experience_commenced_on: undefined,
+  doctor_medical_council_registration: undefined,
+  weekly_working_hours: undefined,
+  video_connect_link: undefined,
+};
+
+interface UserProps {
+  username?: string;
+  includedFields?: Array<keyof UserForm>;
+  onSubmitSuccess?: () => void;
+}
+
+const STAFF_OR_NURSE_USER = [
+  "Staff",
+  "StaffReadOnly",
+  "Nurse",
+  "NurseReadOnly",
+];
+
+const initError = Object.assign(
+  {},
+  ...Object.keys(initForm).map((k) => ({ [k]: "" })),
+);
+
+const initialState = {
+  form: { ...initForm },
+  errors: { ...initError },
+};
+
+type UserFormAction =
+  | { type: "set_form"; form: UserForm }
+  | { type: "set_state"; state?: typeof initialState };
+
+const user_create_reducer = (state = initialState, action: UserFormAction) => {
+  switch (action.type) {
+    case "set_form": {
+      return {
+        ...state,
+        form: action.form,
+      };
+    }
+    case "set_state": {
+      if (action.state) return action.state;
+      return state;
+    }
+    default:
+      return state;
+  }
+};
+
+const getDate = (value: string | Date | null) =>
+  value && dayjs(value).isValid() ? dayjs(value).toDate() : undefined;
+
+export const validateRule = (
+  condition: boolean,
+  content: JSX.Element | string,
+  isInitialState: boolean = false,
+) => {
+  return (
+    <div>
+      {isInitialState ? (
+        <CareIcon icon="l-circle" className="text-xl text-gray-500" />
+      ) : condition ? (
+        <CareIcon icon="l-check-circle" className="text-xl text-green-500" />
+      ) : (
+        <CareIcon icon="l-times-circle" className="text-xl text-red-500" />
+      )}{" "}
+      <span
+        className={classNames(
+          isInitialState
+            ? "text-black"
+            : condition
+              ? "text-primary-500"
+              : "text-red-500",
+        )}
+      >
+        {content}
+      </span>
+    </div>
+  );
+};
+
+const UserAddEditForm = (props: UserProps) => {
+  const { t } = useTranslation();
+  const { goBack } = useAppHistory();
+  const { username, includedFields } = props;
+  const editUser = username ? true : false;
+  const formVals = useRef(initForm);
+  const [facilityErrors, setFacilityErrors] = useState("");
+
+  const {
+    loading: userDataLoading,
+    data: userData,
+    refetch: refetchUserData,
+  } = useQuery(routes.getUserDetails, {
+    pathParams: {
+      username: username ?? "",
+    },
+    prefetch: editUser && !!username,
+    onResponse: (result) => {
+      if (!editUser || !result || !result.res || !result.data) return;
+      const userData = result.data;
+      const formData: UserForm = {
+        first_name: userData.first_name,
+        last_name: userData.last_name,
+        date_of_birth: userData.date_of_birth || null,
+        gender: userData.gender || "Male",
+        email: userData.email,
+        video_connect_link: userData.video_connect_link,
+        phone_number: userData.phone_number?.toString() || "",
+        alt_phone_number: userData.alt_phone_number?.toString() || "",
+        weekly_working_hours: userData.weekly_working_hours,
+        phone_number_is_whatsapp:
+          userData.phone_number?.toString() ===
+          userData.alt_phone_number?.toString(),
+        user_type: userData.user_type,
+        qualification: userData.qualification,
+        doctor_experience_commenced_on: userData.doctor_experience_commenced_on
+          ? dayjs()
+              .diff(dayjs(userData.doctor_experience_commenced_on), "years")
+              .toString()
+          : undefined,
+        doctor_medical_council_registration:
+          userData.doctor_medical_council_registration,
+      };
+      dispatch({
+        type: "set_form",
+        form: formData,
+      });
+      formVals.current = formData;
+    },
+  });
+
+  const prepData = (
+    formData: UserForm,
+    isCreate: boolean = false,
+  ): Partial<UserForm> => {
+    const fields = includedFields ?? Object.keys(formData);
+    let baseData: Partial<UserForm> = {};
+    const phoneNumber = parsePhoneNumber(formData.phone_number) ?? "";
+    const altPhoneNumber = formData.phone_number_is_whatsapp
+      ? phoneNumber
+      : (parsePhoneNumber(formData.alt_phone_number) ?? "");
+
+    let fieldMappings: Partial<UserForm> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      email: formData.email,
+      video_connect_link: formData.video_connect_link,
+      phone_number: phoneNumber,
+      alt_phone_number: altPhoneNumber,
+      gender: formData.gender as GenderType,
+      date_of_birth: dateQueryString(formData.date_of_birth),
+      qualification:
+        formData.user_type === "Doctor" || formData.user_type === "Nurse"
+          ? formData.qualification
+          : undefined,
+      doctor_experience_commenced_on:
+        formData.user_type === "Doctor"
+          ? dayjs()
+              .subtract(
+                parseInt(
+                  (formData.doctor_experience_commenced_on as string) ?? "0",
+                ),
+                "years",
+              )
+              .format("YYYY-MM-DD")
+          : undefined,
+      doctor_medical_council_registration:
+        formData.user_type === "Doctor"
+          ? formData.doctor_medical_council_registration
+          : undefined,
+      weekly_working_hours:
+        formData.weekly_working_hours && formData.weekly_working_hours !== ""
+          ? formData.weekly_working_hours
+          : undefined,
+    };
+
+    if (isCreate) {
+      fieldMappings = {
+        ...fieldMappings,
+        user_type: formData.user_type,
+        password: formData.password,
+        facilities: formData.facilities ? formData.facilities : undefined,
+        home_facility: formData.home_facility ?? undefined,
+        username: formData.username,
+        state: formData.state,
+        district: formData.district,
+        local_body: showLocalbody ? formData.local_body : undefined,
+      };
+    }
+
+    for (const field of fields) {
+      if (field in fieldMappings) {
+        baseData = {
+          ...baseData,
+          [field as keyof UserForm]: fieldMappings[field as keyof UserForm],
+        };
+      }
+    }
+
+    return baseData;
+  };
+
+  const handleEditSubmit = async (formData: UserForm) => {
+    if (!username) return;
+    const data = prepData(formData);
+    const { res, error } = await request(routes.partialUpdateUser, {
+      pathParams: { username },
+      body: data as Partial<UserModel>,
+    });
+    if (res?.ok) {
+      Notification.Success({
+        msg: t("user_details_update_success"),
+      });
+      await refetchUserData();
+    } else {
+      Notification.Error({
+        msg: error?.message ?? t("user_details_update_error"),
+      });
+    }
+    props.onSubmitSuccess?.();
+  };
+
+  const [state, dispatch] = useAutoSaveReducer<UserForm>(
+    user_create_reducer,
+    initialState,
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [states, setStates] = useState<StateObj[]>([]);
+  const [selectedStateId, setSelectedStateId] = useState<number>(0);
+  const [selectedDistrictId, setSelectedDistrictId] = useState<number>(0);
+  const [districts, setDistricts] = useState<StateObj[]>([]);
+  const [localBodies, setLocalBodies] = useState<StateObj[]>([]);
+  const [selectedFacility, setSelectedFacility] = useState<FacilityModel[]>([]);
+  const [usernameInputInFocus, setUsernameInputInFocus] = useState(false);
+  const [passwordInputInFocus, setPasswordInputInFocus] = useState(false);
+  const [confirmPasswordInputInFocus, setConfirmPasswordInputInFocus] =
+    useState(false);
+  const [usernameInput, setUsernameInput] = useState("");
+
+  const userExistsEnums = {
+    idle: 0,
+    checking: 1,
+    exists: 2,
+    available: 3,
+  };
+
+  const [usernameExists, setUsernameExists] = useState<number>(0);
+
+  const check_username = async (username: string) => {
+    setUsernameExists(userExistsEnums.checking);
+    const { res: usernameCheck } = await request(routes.checkUsername, {
+      pathParams: { username },
+      silent: true,
+    });
+    if (usernameCheck === undefined || usernameCheck.status === 409)
+      setUsernameExists(userExistsEnums.exists);
+    else if (usernameCheck.status === 200)
+      setUsernameExists(userExistsEnums.available);
+    else
+      Notification.Error({
+        msg: "Some error checking username availabality. Please try again later.",
+      });
+  };
+
+  useEffect(() => {
+    setUsernameExists(userExistsEnums.idle);
+    if (validateUsername(usernameInput)) {
+      const timeout = setTimeout(() => {
+        check_username(usernameInput);
+      }, 500);
+      return () => clearTimeout(timeout);
+    }
+  }, [usernameInput]);
+
+  const userTypes = GetUserTypes();
+  const authUser = useAuthUser();
+  const userIndex = USER_TYPES.indexOf(authUser.user_type);
+
+  const showLocalbody = ![
+    "Pharmacist",
+    "Volunteer",
+    "Doctor",
+    ...STAFF_OR_NURSE_USER,
+  ].includes(state.form.user_type ?? "");
+
+  const { loading: isDistrictLoading } = useQuery(routes.getDistrictByState, {
+    prefetch: !!(selectedStateId > 0),
+    pathParams: { id: selectedStateId.toString() },
+    onResponse: (result) => {
+      if (!result || !result.res || !result.data) return;
+      if (userIndex <= USER_TYPES.indexOf("DistrictAdmin")) {
+        setDistricts([authUser.district_object!]);
+      } else {
+        setDistricts(result.data);
+      }
+    },
+  });
+
+  const { loading: isLocalbodyLoading } = useQuery(
+    routes.getAllLocalBodyByDistrict,
+    {
+      prefetch: !!(selectedDistrictId > 0),
+      pathParams: { id: selectedDistrictId.toString() },
+      onResponse: (result) => {
+        if (!result || !result.res || !result.data) return;
+        if (userIndex <= USER_TYPES.indexOf("LocalBodyAdmin")) {
+          setLocalBodies([authUser.local_body_object!]);
+        } else {
+          setLocalBodies(result.data);
+        }
+      },
+    },
+  );
+
+  const { loading: isStateLoading } = useQuery(routes.statesList, {
+    onResponse: (result) => {
+      if (!result || !result.res || !result.data) return;
+      if (userIndex <= USER_TYPES.indexOf("StateAdmin")) {
+        setStates([authUser.state_object!]);
+      } else {
+        setStates(result.data.results);
+      }
+    },
+  });
+
+  const handleDateChange = (
+    event: FieldChangeEvent<Date>,
+    field?: FormContextValue<UserForm>,
+  ) => {
+    if (dayjs(event.value).isValid()) {
+      dispatch({
+        type: "set_form",
+        form: {
+          ...state.form,
+          [event.name]: dayjs(event.value).format("YYYY-MM-DD"),
+        },
+      });
+      if (field) field(event.name as keyof UserForm).onChange(event);
+    }
+  };
+
+  const handleFieldChange = (
+    event: FieldChangeEvent<unknown>,
+    field?: FormContextValue<UserForm>,
+  ) => {
+    const fieldName = event.name as keyof UserForm;
+    dispatch({
+      type: "set_form",
+      form: {
+        ...state.form,
+        [fieldName]: event.value,
+      },
+    });
+    field?.(fieldName).onChange(event);
+  };
+
+  const changePhoneNumber = (
+    field: FormContextValue<UserForm>,
+    fieldName: keyof UserForm,
+    value: string | boolean,
+  ) => {
+    field(fieldName).onChange({
+      name: field(fieldName).name,
+      value: value,
+    });
+  };
+
+  const updatePhoneNumber = (
+    field: FormContextValue<UserForm>,
+    phoneNumber: string,
+  ) => {
+    changePhoneNumber(field, "phone_number", phoneNumber);
+    return { phone_number: phoneNumber };
+  };
+
+  const updateAltPhoneNumber = (
+    field: FormContextValue<UserForm>,
+    allowUpdate: boolean,
+    phoneNumber: string,
+  ) => {
+    if (allowUpdate) {
+      changePhoneNumber(field, "alt_phone_number", phoneNumber);
+      return { alt_phone_number: phoneNumber };
+    }
+    return {};
+  };
+
+  const handlePhoneChange = (
+    event: FieldChangeEvent<unknown>,
+    field: FormContextValue<UserForm>,
+  ) => {
+    let formData = { ...state.form };
+    let phoneNumberVal = "";
+    switch (event.name) {
+      case "phone_number":
+        formData = {
+          ...formData,
+          ...updatePhoneNumber(field, event.value as string),
+          ...updateAltPhoneNumber(
+            field,
+            state.form.phone_number_is_whatsapp ?? true,
+            event.value as string,
+          ),
+        };
+        break;
+      case "alt_phone_number":
+        phoneNumberVal = event.value as string;
+        formData = {
+          ...formData,
+          ...updateAltPhoneNumber(
+            field,
+            !(state.form.phone_number_is_whatsapp ?? true),
+            phoneNumberVal,
+          ),
+        };
+        break;
+      case "phone_number_is_whatsapp":
+        formData = {
+          ...formData,
+          ...updateAltPhoneNumber(
+            field,
+            event.value as boolean,
+            state.form.phone_number,
+          ),
+          phone_number_is_whatsapp: event.value as boolean,
+        };
+        changePhoneNumber(
+          field,
+          "phone_number_is_whatsapp",
+          event.value as boolean,
+        );
+        break;
+    }
+    dispatch({
+      type: "set_form",
+      form: formData,
+    });
+  };
+
+  const setFacility = (selected: FacilityModel | FacilityModel[] | null) => {
+    const newSelectedFacilities = selected
+      ? Array.isArray(selected)
+        ? selected
+        : [selected]
+      : [];
+    setSelectedFacility(newSelectedFacilities as FacilityModel[]);
+    const form = { ...state.form };
+    form.facilities = selected
+      ? (selected as FacilityModel[]).map((i) => i.id!)
+      : [];
+    dispatch({ type: "set_form", form });
+  };
+
+  const validateFacility = (
+    formData: UserForm,
+    selectedFacility: FacilityModel[],
+  ) => {
+    if (
+      selectedFacility &&
+      formData.user_type &&
+      selectedFacility.length === 0 &&
+      STAFF_OR_NURSE_USER.includes(authUser.user_type) &&
+      STAFF_OR_NURSE_USER.includes(formData.user_type)
+    ) {
+      return "Please select atleast one of the facilities you are linked to";
+    }
+  };
+
+  const validatePhoneNumber = (phoneNumber: string) => {
+    const parsedPhoneNumber = parsePhoneNumber(phoneNumber);
+    if (!parsedPhoneNumber) return false;
+    return PhoneNumberValidator()(parsedPhoneNumber) === undefined;
+  };
+
+  const validateForm = (formData: UserForm) => {
+    const errors: Partial<Record<keyof UserForm, FieldError>> = {};
+    const fieldsToValidate = includedFields || Object.keys(formData);
+    const facilityError = fieldsToValidate.includes("facilities")
+      ? validateFacility(formData, selectedFacility)
+      : null;
+    if (facilityError) {
+      errors.facilities = facilityError;
+    }
+    let currentError = null;
+    fieldsToValidate.forEach((field) => {
+      switch (field) {
+        case "user_type":
+          if (!formData[field]) {
+            errors[field] = t("please_select_user_type");
+          }
+          break;
+        case "qualification":
+          currentError = ValidateQualification(formData, t);
+          if (currentError) {
+            errors[field] = currentError;
+          }
+          break;
+        case "doctor_experience_commenced_on":
+          currentError = ValidateDoctorExperienceCommencedOn(formData, t);
+          if (currentError) {
+            errors[field] = currentError;
+          }
+          break;
+        case "doctor_medical_council_registration":
+          currentError = ValidateDoctorMedicalCouncilRegistration(formData, t);
+          if (currentError) {
+            errors[field] = currentError;
+          }
+          break;
+        case "phone_number":
+          if (!formData[field] || !validatePhoneNumber(formData[field])) {
+            errors[field] = t("invalid_phone");
+          }
+          break;
+        case "alt_phone_number":
+          if (
+            formData[field] &&
+            formData[field] !== "+91" &&
+            !validatePhoneNumber(formData[field])
+          ) {
+            errors[field] = t("mobile_number_validation_error");
+          }
+          break;
+        case "username":
+          if (!formData[field]) {
+            errors[field] = t("please_enter_username");
+          } else if (!validateUsername(formData[field])) {
+            errors[field] = t("invalid_username");
+          } else if (usernameExists !== userExistsEnums.available) {
+            errors[field] = t("username_already_exists");
+          }
+          break;
+        case "password":
+          if (!formData[field]) {
+            errors[field] = t("password_required");
+          } else if (!validatePassword(formData[field])) {
+            errors.password = t("password_validation");
+          }
+          break;
+        case "c_password":
+          if (!formData.password) {
+            errors.c_password = t("confirm_password_required");
+          } else if (formData.password !== formData.c_password) {
+            errors.c_password = t("password_mismatch");
+          }
+          break;
+        case "first_name":
+        case "last_name":
+          formData[field] = formData[field].trim();
+          if (!formData[field]) {
+            errors[field] = t(`${field}_required`);
+          } else if (!validateName(formData[field])) {
+            errors[field] = t("min_char_length_error", { min_length: 3 });
+          }
+          break;
+        case "email":
+          formData[field] = formData[field].trim();
+          if (
+            formData[field].length === 0 ||
+            !validateEmailAddress(formData[field])
+          ) {
+            errors[field] = t("invalid_email");
+          }
+          break;
+        case "date_of_birth":
+          if (!formData[field]) {
+            errors[field] = t("dob_format");
+          } else if (
+            dayjs(formData[field]).isAfter(dayjs().subtract(1, "year"))
+          ) {
+            errors[field] = t("enter_valid_dob");
+          } else if (
+            dayjs(formData[field]).isAfter(dayjs().subtract(16, "year"))
+          ) {
+            errors[field] = t("enter_valid_dob_age");
+          }
+          break;
+        case "gender":
+          if (!formData[field]) {
+            errors[field] = t("please_select_gender");
+          }
+          break;
+        case "state":
+          if (!Number(formData[field])) {
+            errors[field] = t("please_select_state");
+          }
+          break;
+        case "district":
+          if (!Number(formData[field])) {
+            errors[field] = t("please_select_district");
+          }
+          break;
+        case "local_body":
+          if (showLocalbody && !Number(formData[field])) {
+            errors[field] = t("please_select_localbody");
+          }
+          break;
+        case "weekly_working_hours":
+          if (formData[field] !== null && formData[field] !== undefined) {
+            const hours = Number(formData[field]);
+            if (
+              Number.isNaN(hours) ||
+              hours < 0 ||
+              hours > 168 ||
+              !validateNumber(formData[field] ?? "")
+            ) {
+              errors[field] = t("weekly_working_hours_error");
+            }
+          }
+          break;
+        case "video_connect_link":
+          currentError = ValidateVideoLink(formData, t);
+          if (currentError) {
+            errors[field] = currentError;
+          }
+          break;
+        default:
+          break;
+      }
+    });
+    return errors;
+  };
+
+  const handleSubmit = async (formData: UserForm) => {
+    setIsLoading(true);
+    const data = prepData(formData, true);
+
+    const { res, error } = await request(routes.addUser, {
+      body: data,
+    });
+    if (res?.ok) {
+      dispatch({ type: "set_form", form: initForm });
+      Notification.Success({
+        msg: t("user_added_successfully"),
+      });
+      navigate("/users");
+    } else {
+      Notification.Error({
+        msg: error?.message ?? t("user_add_error"),
+      });
+    }
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    const facilityError = validateFacility(state.form, selectedFacility);
+    setFacilityErrors(facilityError || "");
+  }, [state.form, selectedFacility]);
+
+  if (isLoading || (editUser && userDataLoading)) {
+    return <Loading />;
+  }
+
+  const handleCancel = () => {
+    dispatch({
+      type: "set_form",
+      form: formVals.current,
+    });
+  };
+
+  const renderDoctorOrNurseFields = (field: FormContextValue<UserForm>) => {
+    return (
+      <>
+        {(state.form.user_type === "Doctor" ||
+          state.form.user_type === "Nurse") &&
+          includedFields?.includes("qualification") && (
+            <TextFormField
+              {...field("qualification")}
+              required
+              label={t("qualification")}
+              placeholder={t("qualification")}
+              onChange={(e) => {
+                handleFieldChange(e, field);
+              }}
+              className="flex-1"
+              aria-label={t("qualification")}
+            />
+          )}
+        {state.form.user_type === "Doctor" && (
+          <div className="flex flex-col justify-between gap-x-3 sm:flex-row">
+            {includedFields?.includes("doctor_experience_commenced_on") && (
+              <TextFormField
+                {...field("doctor_experience_commenced_on")}
+                required
+                label={t("years_of_experience")}
+                placeholder={t("years_of_experience_of_the_doctor")}
+                onChange={(e) => {
+                  handleFieldChange(e, field);
+                }}
+                className="flex-1"
+                aria-label={t("years_of_experience")}
+              />
+            )}
+            {includedFields?.includes(
+              "doctor_medical_council_registration",
+            ) && (
+              <TextFormField
+                {...field("doctor_medical_council_registration")}
+                required
+                label={t("medical_council_registration")}
+                placeholder={t("doctor_s_medical_council_registration")}
+                onChange={(e) => {
+                  handleFieldChange(e, field);
+                }}
+                className="flex-1"
+                aria-label={t("medical_council_registration")}
+              />
+            )}
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const renderPhoneNumberFields = (field: FormContextValue<UserForm>) => {
+    return (
+      <>
+        {includedFields?.includes("phone_number") && (
+          <div className="flex flex-col justify-between gap-x-3 sm:flex-row">
+            <div className="flex flex-1 flex-col">
+              <PhoneNumberFormField
+                {...field("phone_number")}
+                placeholder={t("phone_number")}
+                label={t("phone_number")}
+                required
+                types={["mobile", "landline"]}
+                onChange={(e) => {
+                  handlePhoneChange(e, field);
+                }}
+                className=""
+                aria-label={t("phone_number")}
+              />
+              <CheckBoxFormField
+                name="phone_number_is_whatsapp"
+                value={state.form.phone_number_is_whatsapp}
+                onChange={(e) => {
+                  handlePhoneChange(e, field);
+                }}
+                label={t("is_phone_a_whatsapp_number")}
+              />
+            </div>
+            <PhoneNumberFormField
+              {...field("alt_phone_number")}
+              placeholder={t("whatsapp_phone_number")}
+              label={t("whatsapp_number")}
+              disabled={state.form.phone_number_is_whatsapp}
+              types={["mobile"]}
+              onChange={(e) => {
+                handlePhoneChange(e, field);
+              }}
+              className="flex-1"
+              aria-label={t("whatsapp_number")}
+            />
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const renderUsernameField = (field: FormContextValue<UserForm>) => {
+    return (
+      <>
+        {includedFields?.includes("username") && (
+          <>
+            <TextFormField
+              {...field("username")}
+              label={t("username")}
+              placeholder={t("username")}
+              required
+              autoComplete="new-username"
+              value={usernameInput}
+              onChange={(e) => {
+                handleFieldChange(e, field);
+                setUsernameInput(e.value);
+              }}
+              onFocus={() => setUsernameInputInFocus(true)}
+              onBlur={() => {
+                setUsernameInputInFocus(false);
+              }}
+              aria-label={t("username")}
+            />
+            {usernameInputInFocus && (
+              <div className="text-small pl-2 text-secondary-500">
+                <div>
+                  {usernameExists !== userExistsEnums.idle && (
+                    <>
+                      {usernameExists === userExistsEnums.checking ? (
+                        <span>
+                          <CareIcon icon="l-record-audio" className="text-xl" />{" "}
+                          checking...
+                        </span>
+                      ) : (
+                        <>
+                          {usernameExists === userExistsEnums.exists ? (
+                            <div>
+                              <CareIcon
+                                icon="l-times-circle"
+                                className="text-xl text-red-500"
+                              />{" "}
+                              <span className="text-red-500">
+                                {t("username_not_available")}
+                              </span>
+                            </div>
+                          ) : (
+                            <div>
+                              <CareIcon
+                                icon="l-check-circle"
+                                className="text-xl text-green-500"
+                              />{" "}
+                              <span className="text-primary-500">
+                                {t("username_available")}
+                              </span>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </>
+                  )}
+                </div>
+                <div aria-live="polite">
+                  {validateRule(
+                    usernameInput.length >= 4 && usernameInput.length <= 16,
+                    "Username should be 4-16 characters long",
+                    !state.form.username,
+                  )}
+                  {validateRule(
+                    /^[a-z0-9._-]*$/.test(usernameInput),
+                    "Username can only contain lowercase letters, numbers, and . _ -",
+                    !state.form.username,
+                  )}
+                  {validateRule(
+                    /^[a-z0-9].*[a-z0-9]$/i.test(usernameInput),
+                    "Username must start and end with a letter or number",
+                    !state.form.username,
+                  )}
+                  {validateRule(
+                    !/(?:[._-]{2,})/.test(usernameInput),
+                    "Username can't contain consecutive special characters . _ -",
+                    !state.form.username,
+                  )}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </>
+    );
+  };
+
+  const renderPasswordFields = (field: FormContextValue<UserForm>) => {
+    return (
+      <>
+        <div className="flex flex-col justify-between gap-x-3 sm:flex-row">
+          {includedFields?.includes("password") && (
+            <div className="flex flex-1 flex-col">
+              <TextFormField
+                {...field("password")}
+                label={t("password")}
+                placeholder={t("password")}
+                required
+                autoComplete="new-password"
+                type="password"
+                onFocus={() => setPasswordInputInFocus(true)}
+                onBlur={() => setPasswordInputInFocus(false)}
+                onChange={(e) => {
+                  handleFieldChange(e, field);
+                }}
+                aria-label={t("password")}
+              />
+              {passwordInputInFocus && state.form.password && (
+                <div
+                  className="text-small pl-2 text-secondary-500"
+                  aria-live="polite"
+                >
+                  {validateRule(
+                    state.form.password.length >= 8,
+                    t("password_length_validation"),
+                    !state.form.password,
+                  )}
+                  {validateRule(
+                    state.form.password !== state.form.password.toUpperCase(),
+                    t("password_lowercase_validation"),
+                    !state.form.password,
+                  )}
+                  {validateRule(
+                    state.form.password !== state.form.password.toLowerCase(),
+                    t("password_uppercase_validation"),
+                    !state.form.password,
+                  )}
+                  {validateRule(
+                    /\d/.test(state.form.password),
+                    t("password_number_validation"),
+                    !state.form.password,
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+          {includedFields?.includes("c_password") && (
+            <div className="flex flex-1 flex-col">
+              <TextFormField
+                {...field("c_password")}
+                label={t("confirm_password")}
+                placeholder={t("confirm_password")}
+                required
+                type="password"
+                autoComplete="off"
+                onFocus={() => setConfirmPasswordInputInFocus(true)}
+                onBlur={() => setConfirmPasswordInputInFocus(false)}
+                onChange={(e) => {
+                  handleFieldChange(e, field);
+                }}
+                aria-label={t("confirm_password")}
+              />
+              {confirmPasswordInputInFocus &&
+                state.form.c_password &&
+                state.form.c_password.length > 0 && (
+                  <div aria-live="polite">
+                    {validateRule(
+                      state.form.c_password === state.form.password,
+                      t("password_mismatch"),
+                      !state.form.c_password,
+                    )}
+                  </div>
+                )}
+            </div>
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const renderPersonalInfoFields = (field: FormContextValue<UserForm>) => {
+    return (
+      <>
+        <div className="flex flex-col justify-between gap-x-3 sm:flex-row">
+          {includedFields?.includes("first_name") && (
+            <TextFormField
+              {...field("first_name")}
+              required
+              label={t("first_name")}
+              className="flex-1"
+              onChange={(e) => {
+                handleFieldChange(e, field);
+              }}
+              aria-label={t("first_name")}
+            />
+          )}
+          {includedFields?.includes("last_name") && (
+            <TextFormField
+              {...field("last_name")}
+              required
+              label={t("last_name")}
+              className="flex-1"
+              onChange={(e) => {
+                handleFieldChange(e, field);
+              }}
+              aria-label={t("last_name")}
+            />
+          )}
+        </div>
+        {includedFields?.includes("email") && (
+          <TextFormField
+            {...field("email")}
+            label={t("email")}
+            placeholder={t("email")}
+            required
+            onChange={(e) => {
+              handleFieldChange(e, field);
+            }}
+            aria-label={t("email")}
+          />
+        )}
+        <div className="flex flex-col justify-between gap-x-3 sm:flex-row sm:items-center">
+          {includedFields?.includes("date_of_birth") && (
+            <DateFormField
+              {...field("date_of_birth")}
+              label={t("date_of_birth")}
+              required
+              value={getDate(state.form.date_of_birth)}
+              onChange={(e) => {
+                handleDateChange(e, field);
+              }}
+              disableFuture
+              className="flex-1"
+              aria-label={t("date_of_birth")}
+            />
+          )}
+          {includedFields?.includes("gender") && (
+            <SelectFormField
+              {...field("gender")}
+              label={t("gender")}
+              required
+              value={state.form.gender}
+              options={GENDER_TYPES}
+              optionLabel={(o) => o.text}
+              optionValue={(o) => o.text}
+              onChange={(e) => {
+                handleFieldChange(e, field);
+              }}
+              className="flex-1"
+              aria-label={t("gender")}
+            />
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const renderHoursAndConferenceLinkFields = (
+    field: FormContextValue<UserForm>,
+  ) => {
+    return (
+      <>
+        <div className="flex flex-col justify-between gap-x-3 sm:flex-row">
+          {includedFields?.includes("weekly_working_hours") && (
+            <TextFormField
+              {...field("weekly_working_hours")}
+              name="weekly_working_hours"
+              label={t("average_weekly_working_hours")}
+              className="flex-1"
+              type="number"
+              min={0}
+              max={168}
+              onChange={(e) => {
+                handleFieldChange(e, field);
+              }}
+              aria-label={t("average_weekly_working_hours")}
+            />
+          )}
+          {includedFields?.includes("video_connect_link") && (
+            <TextFormField
+              {...field("video_connect_link")}
+              label={t("video_conference_link")}
+              className="flex-1"
+              type="url"
+              onChange={(e) => {
+                handleFieldChange(e, field);
+              }}
+              aria-label={t("video_conference_link")}
+            />
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const renderStateDistrictLocalBodyFields = (
+    field: FormContextValue<UserForm>,
+  ) => {
+    return (
+      <>
+        {includedFields?.includes("state") && (
+          <>
+            {isStateLoading ? (
+              <CircularProgress />
+            ) : (
+              <SelectFormField
+                {...field("state")}
+                label={t("state")}
+                required
+                placeholder={t("choose_state")}
+                options={states}
+                optionLabel={(o) => o.name}
+                optionValue={(o) => o.id}
+                onChange={(e) => {
+                  handleFieldChange(e, field);
+                  if (e) setSelectedStateId(e.value);
+                }}
+                aria-label={t("state")}
+              />
+            )}
+          </>
+        )}
+        {includedFields?.includes("district") && (
+          <>
+            {isDistrictLoading ? (
+              <CircularProgress />
+            ) : (
+              <SelectFormField
+                {...field("district")}
+                label={t("district")}
+                required
+                placeholder={t("choose_district")}
+                options={districts}
+                optionLabel={(o) => o.name}
+                optionValue={(o) => o.id}
+                onChange={(e) => {
+                  handleFieldChange(e, field);
+                  if (e) setSelectedDistrictId(e.value);
+                }}
+                aria-label={t("district")}
+              />
+            )}
+          </>
+        )}
+        {includedFields?.includes("local_body") && (
+          <>
+            {isLocalbodyLoading ? (
+              <CircularProgress />
+            ) : (
+              <SelectFormField
+                {...field("local_body")}
+                label={t("local_body")}
+                required
+                position="above"
+                placeholder={t("choose_localbody")}
+                options={localBodies}
+                optionLabel={(o) => o.name}
+                optionValue={(o) => o.id}
+                onChange={(e) => {
+                  handleFieldChange(e, field);
+                }}
+                aria-label={t("local_body")}
+              />
+            )}
+          </>
+        )}
+      </>
+    );
+  };
+
+  const renderFacilityUserTypeHomeFacilityFields = (
+    field: FormContextValue<UserForm>,
+  ) => {
+    return (
+      <>
+        {includedFields?.includes("facilities") && (
+          <div className="w-full">
+            <FieldLabel>{t("facilities")}</FieldLabel>
+            <FacilitySelect
+              multiple={true}
+              name="facilities"
+              selected={selectedFacility}
+              setSelected={setFacility}
+              errors={facilityErrors}
+              showAll={false}
+              aria-label={t("facilities")}
+            />
+          </div>
+        )}
+        <div className="flex flex-col justify-between gap-x-3 sm:flex-row">
+          {includedFields?.includes("user_type") && (
+            <SelectFormField
+              {...field("user_type")}
+              required
+              label={t("user_type")}
+              options={userTypes}
+              optionLabel={(o) => o.role + (o.readOnly ? " (Read Only)" : "")}
+              onChange={(e) => {
+                handleFieldChange(e, field);
+              }}
+              optionValue={(o) => o.id}
+              className="flex-1"
+              aria-label={t("user_type")}
+            />
+          )}
+          {includedFields?.includes("home_facility") && (
+            <SelectFormField
+              {...field("home_facility")}
+              label={t("home_facility")}
+              options={selectedFacility ?? []}
+              optionLabel={(option) => option.name}
+              optionValue={(option) => option.id}
+              onChange={(e) => {
+                handleFieldChange(e, field);
+              }}
+              className="flex-1"
+              aria-label={t("home_facility")}
+            />
+          )}
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <Form<UserForm>
+      disabled={isLoading}
+      defaults={userData ? state.form : initForm}
+      validate={validateForm}
+      onCancel={editUser ? handleCancel : () => goBack()}
+      onSubmit={editUser ? handleEditSubmit : handleSubmit}
+      onDraftRestore={(newState) => {
+        dispatch({ type: "set_state", state: newState });
+      }}
+      hideRestoreDraft={editUser}
+      noPadding
+      resetFormValsOnCancel
+      hideCancelButton={editUser}
+    >
+      {(field) => (
+        <>
+          <div className="my-4 flex flex-col gap-y-2">
+            {renderFacilityUserTypeHomeFacilityFields(field)}
+            {renderDoctorOrNurseFields(field)}
+            {renderPhoneNumberFields(field)}
+            {renderUsernameField(field)}
+            {renderPasswordFields(field)}
+            {renderPersonalInfoFields(field)}
+            {renderHoursAndConferenceLinkFields(field)}
+            {renderStateDistrictLocalBodyFields(field)}
+          </div>
+        </>
+      )}
+    </Form>
+  );
+};
+
+export default UserAddEditForm;
diff --git a/src/components/Users/UserAvatar.tsx b/src/components/Users/UserAvatar.tsx
new file mode 100644
index 00000000000..c186039951e
--- /dev/null
+++ b/src/components/Users/UserAvatar.tsx
@@ -0,0 +1,125 @@
+import careConfig from "@careConfig";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Avatar } from "@/components/Common/Avatar";
+import AvatarEditModal from "@/components/Common/AvatarEditModal";
+import ButtonV2 from "@/components/Common/ButtonV2";
+import Loading from "@/components/Common/Loading";
+
+import useAuthUser from "@/hooks/useAuthUser";
+
+import { LocalStorageKeys } from "@/common/constants";
+
+import * as Notification from "@/Utils/Notifications";
+import { showAvatarEdit } from "@/Utils/permissions";
+import routes from "@/Utils/request/api";
+import request from "@/Utils/request/request";
+import uploadFile from "@/Utils/request/uploadFile";
+import useQuery from "@/Utils/request/useQuery";
+import { formatDisplayName, sleep } from "@/Utils/utils";
+
+export default function UserAvatar({ username }: { username: string }) {
+  const { t } = useTranslation();
+  const [editAvatar, setEditAvatar] = useState(false);
+  const authUser = useAuthUser();
+
+  const {
+    data: userData,
+    loading: isLoading,
+    refetch: refetchUserData,
+  } = useQuery(routes.getUserDetails, {
+    pathParams: {
+      username: username,
+    },
+  });
+
+  if (isLoading || !userData) {
+    return <Loading />;
+  }
+
+  const handleAvatarUpload = async (file: File, onError: () => void) => {
+    const formData = new FormData();
+    formData.append("profile_picture", file);
+    const url = `${careConfig.apiUrl}/api/v1/users/${userData.username}/profile_picture/`;
+
+    uploadFile(
+      url,
+      formData,
+      "POST",
+      {
+        Authorization:
+          "Bearer " + localStorage.getItem(LocalStorageKeys.accessToken),
+      },
+      async (xhr: XMLHttpRequest) => {
+        if (xhr.status === 200) {
+          await sleep(1000);
+          refetchUserData();
+          Notification.Success({ msg: t("avatar_updated_success") });
+          setEditAvatar(false);
+        }
+      },
+      null,
+      () => {
+        onError();
+      },
+    );
+  };
+
+  const handleAvatarDelete = async (onError: () => void) => {
+    const { res } = await request(routes.deleteProfilePicture, {
+      pathParams: { username },
+    });
+    if (res?.ok) {
+      Notification.Success({ msg: "Profile picture deleted" });
+      await refetchUserData();
+      setEditAvatar(false);
+    } else {
+      onError();
+    }
+  };
+
+  return (
+    <>
+      <AvatarEditModal
+        title={t("edit_avatar")}
+        open={editAvatar}
+        imageUrl={userData?.read_profile_picture_url}
+        handleUpload={handleAvatarUpload}
+        handleDelete={handleAvatarDelete}
+        onClose={() => setEditAvatar(false)}
+      />
+      <div>
+        <div className="my-4 overflow-visible rounded-lg bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6 flex justify-between">
+          <div className="flex items-center">
+            <Avatar
+              imageUrl={userData?.read_profile_picture_url}
+              name={formatDisplayName(userData)}
+              className="h-20 w-20"
+            />
+            <div className="my-4 ml-4 flex flex-col gap-2">
+              <ButtonV2
+                onClick={(_) => setEditAvatar(!editAvatar)}
+                type="button"
+                id="change-avatar"
+                className="border border-gray-200 bg-gray-50 text-black hover:bg-gray-100"
+                shadow={false}
+                disabled={!showAvatarEdit(authUser, userData)}
+                tooltip={
+                  !showAvatarEdit(authUser, userData)
+                    ? t("edit_avatar_permission_error")
+                    : undefined
+                }
+              >
+                {t("change_avatar")}
+              </ButtonV2>
+              <p className="text-xs leading-5 text-gray-500">
+                {t("change_avatar_note")}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Users/UserBanner.tsx b/src/components/Users/UserBanner.tsx
new file mode 100644
index 00000000000..c42c75ce165
--- /dev/null
+++ b/src/components/Users/UserBanner.tsx
@@ -0,0 +1,94 @@
+import dayjs from "dayjs";
+import { t } from "i18next";
+
+import { Avatar } from "@/components/Common/Avatar";
+import UserDetails from "@/components/Common/UserDetails";
+import UserDetailComponent from "@/components/Common/UserDetailsComponet";
+import { UserModel } from "@/components/Users/models";
+
+import { formatDisplayName, formatName } from "@/Utils/utils";
+
+import { UserStatusIndicator } from "./UserListAndCard";
+
+export default function UserBanner({ userData }: { userData: UserModel }) {
+  if (!userData) {
+    return;
+  }
+
+  return (
+    <div className="mt-2 flex flex-col justify-between gap-3 sm:flex-row">
+      <div className="mb-3 flex w-full flex-col justify-between gap-3 rounded bg-white p-3 shadow-sm transition-all duration-200 ease-in-out sm:flex-row md:p-6">
+        <div className="flex flex-row gap-2 self-center">
+          <Avatar
+            imageUrl={userData?.read_profile_picture_url}
+            name={formatDisplayName(userData)}
+            className="h-20 w-20 md:mr-2 lg:mr-3 lg:h-16 lg:w-16"
+          />
+          <div className="flex flex-col self-center">
+            <div className="flex flex-row items-center gap-3">
+              <h1 className="text-xl font-bold" id="users-name">
+                {formatName(userData)}
+              </h1>
+              <div className="min-width-50 shrink-0 text-sm text-secondary-600">
+                <UserStatusIndicator user={userData} addPadding />
+              </div>
+            </div>
+
+            <span
+              id="username"
+              className="text-sm font-light leading-relaxed text-secondary-600"
+            >
+              {userData.username}
+            </span>
+          </div>
+        </div>
+        <div className="flex flex-row flex-wrap items-center justify-between gap-x-14">
+          {userData.user_type && (
+            <UserDetailComponent
+              id="role"
+              title="Role"
+              value={userData.user_type}
+            />
+          )}
+          {userData.district_object && (
+            <UserDetailComponent
+              id="district"
+              title="District"
+              value={userData.district_object.name}
+            />
+          )}
+          <UserDetails id="home-facility" title={t("home_facility")}>
+            <span className="block font-semibold">
+              {userData.home_facility_object?.name || t("no_home_facility")}
+            </span>
+          </UserDetails>
+          {["Doctor", "Nurse"].includes(userData.user_type) && (
+            <UserDetails id="qualification" title={t("qualification")}>
+              {userData.qualification ? (
+                <span className="font-semibold">{userData.qualification}</span>
+              ) : (
+                <span className="text-secondary-600">{t("unknown")}</span>
+              )}
+            </UserDetails>
+          )}
+          {userData.user_type === "Doctor" && (
+            <UserDetails id="doctor-experience" title="Experience">
+              {userData.doctor_experience_commenced_on ? (
+                <span className="font-semibold">
+                  {dayjs().diff(
+                    userData.doctor_experience_commenced_on,
+                    "years",
+                    false,
+                  )}{" "}
+                  years
+                </span>
+              ) : (
+                <span className="text-secondary-600">{t("unknown")}</span>
+              )}
+            </UserDetails>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Users/UserEditDetails.tsx b/src/components/Users/UserEditDetails.tsx
new file mode 100644
index 00000000000..66b9d0b22fd
--- /dev/null
+++ b/src/components/Users/UserEditDetails.tsx
@@ -0,0 +1,177 @@
+import { TFunction } from "i18next";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import UserAddEditForm from "@/components/Users/UserAddEditForm";
+import {
+  editBasicInfoFields,
+  editContactInfoFields,
+  editProfessionalInfoFields,
+  editProfessionalInfoFieldsForNurseDoctor,
+} from "@/components/Users/UserFormValidations";
+import {
+  BasicInfoDetails,
+  ContactInfoDetails,
+  ProfessionalInfoDetails,
+} from "@/components/Users/UserViewDetails";
+import { UserModel } from "@/components/Users/models";
+
+interface UserEditDetailsProps {
+  username: string;
+  userData: UserModel;
+  onSubmitSuccess?: () => void;
+}
+
+const ViewEditToggle = ({
+  isEditing,
+  setIsEditing,
+  id,
+  t,
+}: {
+  isEditing: boolean;
+  setIsEditing: (value: boolean) => void;
+  id: string;
+  t: TFunction;
+}) => {
+  return (
+    <div className="mb-2 inline-flex rounded-lg bg-gray-100 p-1">
+      <button
+        onClick={() => setIsEditing(false)}
+        className={`
+            px-4 py-2 text-sm font-medium rounded-md transition-colors
+            ${
+              !isEditing
+                ? "bg-white text-gray-900 shadow-sm"
+                : "text-gray-500 hover:text-gray-700"
+            }
+          `}
+        id={`${id}-view-button`}
+      >
+        {t("view")}
+      </button>
+      <button
+        onClick={() => setIsEditing(true)}
+        className={`
+            px-4 py-2 text-sm font-medium rounded-md transition-colors
+            ${
+              isEditing
+                ? "bg-white text-gray-900 shadow-sm"
+                : "text-gray-500 hover:text-gray-700"
+            }
+          `}
+        id={`${id}-edit-button`}
+      >
+        {t("edit")}
+      </button>
+    </div>
+  );
+};
+
+export function UserBasicInfoView({
+  username,
+  userData,
+  onSubmitSuccess,
+}: UserEditDetailsProps) {
+  const { t } = useTranslation();
+  const [isEditing, setIsEditing] = useState(false);
+
+  return (
+    <div
+      id="user-edit-form"
+      className="overflow-visible px-4 py-5 sm:px-6 rounded-lg shadow sm:rounded-lg bg-white"
+    >
+      <ViewEditToggle
+        isEditing={isEditing}
+        setIsEditing={setIsEditing}
+        id="basic-info"
+        t={t}
+      />
+      {isEditing ? (
+        <UserAddEditForm
+          username={username}
+          includedFields={editBasicInfoFields}
+          onSubmitSuccess={() => {
+            setIsEditing(false);
+            onSubmitSuccess?.();
+          }}
+        />
+      ) : (
+        <BasicInfoDetails user={userData} />
+      )}
+    </div>
+  );
+}
+
+export function UserContactInfoView({
+  username,
+  userData,
+  onSubmitSuccess,
+}: UserEditDetailsProps) {
+  const { t } = useTranslation();
+  const [isEditing, setIsEditing] = useState(false);
+
+  return (
+    <div
+      id="user-contact-form"
+      className="overflow-visible px-4 py-5 sm:px-6 rounded-lg shadow sm:rounded-lg bg-white"
+    >
+      <ViewEditToggle
+        isEditing={isEditing}
+        setIsEditing={setIsEditing}
+        id="contact-info"
+        t={t}
+      />
+      {isEditing ? (
+        <UserAddEditForm
+          username={username}
+          includedFields={editContactInfoFields}
+          onSubmitSuccess={() => {
+            setIsEditing(false);
+            onSubmitSuccess?.();
+          }}
+        />
+      ) : (
+        <ContactInfoDetails user={userData} />
+      )}
+    </div>
+  );
+}
+
+export function UserProfessionalInfoView({
+  username,
+  userData,
+  onSubmitSuccess,
+}: UserEditDetailsProps) {
+  const { t } = useTranslation();
+  const [isEditing, setIsEditing] = useState(false);
+  const editFields =
+    userData.user_type === "Doctor" || userData.user_type === "Nurse"
+      ? editProfessionalInfoFieldsForNurseDoctor
+      : editProfessionalInfoFields;
+
+  return (
+    <div
+      id="user-professional-form"
+      className="overflow-visible px-4 py-5 sm:px-6 rounded-lg shadow sm:rounded-lg bg-white"
+    >
+      <ViewEditToggle
+        isEditing={isEditing}
+        setIsEditing={setIsEditing}
+        id="professional-info"
+        t={t}
+      />
+      {isEditing ? (
+        <UserAddEditForm
+          username={username}
+          includedFields={editFields}
+          onSubmitSuccess={() => {
+            setIsEditing(false);
+            onSubmitSuccess?.();
+          }}
+        />
+      ) : (
+        <ProfessionalInfoDetails user={userData} />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Users/UserFormValidations.tsx b/src/components/Users/UserFormValidations.tsx
new file mode 100644
index 00000000000..a5af4549803
--- /dev/null
+++ b/src/components/Users/UserFormValidations.tsx
@@ -0,0 +1,161 @@
+import { TFunction } from "i18next";
+
+import { validateNumber } from "@/common/validation";
+
+import { FacilityModel } from "../Facility/models";
+
+export type UserForm = {
+  user_type?: string;
+  gender: string;
+  password?: string;
+  c_password?: string;
+  facilities?: Array<string>;
+  home_facility?: FacilityModel | null;
+  username?: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  phone_number: string;
+  alt_phone_number: string;
+  phone_number_is_whatsapp?: boolean;
+  date_of_birth: Date | null | string;
+  state?: number;
+  district?: number;
+  local_body?: number;
+  qualification?: string | undefined;
+  doctor_experience_commenced_on?: string;
+  doctor_medical_council_registration?: string;
+  video_connect_link?: string;
+  weekly_working_hours?: string | null;
+};
+
+export const newUserFields: Array<keyof UserForm> = [
+  "user_type",
+  "username",
+  "password",
+  "c_password",
+  "first_name",
+  "last_name",
+  "email",
+  "phone_number",
+  "alt_phone_number",
+  "phone_number_is_whatsapp",
+  "gender",
+  "date_of_birth",
+  "state",
+  "district",
+  "local_body",
+  "facilities",
+  "home_facility",
+  "qualification",
+  "doctor_experience_commenced_on",
+  "doctor_medical_council_registration",
+  "weekly_working_hours",
+  "video_connect_link",
+];
+
+export const editUserFields: Array<keyof UserForm> = [
+  "first_name",
+  "last_name",
+  "date_of_birth",
+  "gender",
+  "email",
+  "video_connect_link",
+  "phone_number",
+  "alt_phone_number",
+  "phone_number_is_whatsapp",
+  "qualification",
+  "doctor_experience_commenced_on",
+  "doctor_medical_council_registration",
+  "weekly_working_hours",
+];
+
+export const editBasicInfoFields: Array<keyof UserForm> = [
+  "first_name",
+  "last_name",
+  "date_of_birth",
+  "gender",
+];
+
+export const editContactInfoFields: Array<keyof UserForm> = [
+  "email",
+  "phone_number",
+  "alt_phone_number",
+  "phone_number_is_whatsapp",
+];
+
+export const editProfessionalInfoFields: Array<keyof UserForm> = [
+  "weekly_working_hours",
+  "video_connect_link",
+];
+
+export const editProfessionalInfoFieldsForNurseDoctor: Array<keyof UserForm> = [
+  "qualification",
+  "doctor_experience_commenced_on",
+  "doctor_medical_council_registration",
+  ...editProfessionalInfoFields,
+];
+
+export const ValidateQualification = (
+  formData: UserForm,
+  translator: TFunction,
+) => {
+  if (
+    (formData.user_type === "Doctor" || formData.user_type === "Nurse") &&
+    !formData["qualification"]
+  ) {
+    return translator("qualification_required");
+  }
+  return null;
+};
+
+export const ValidateDoctorExperienceCommencedOn = (
+  formData: UserForm,
+  translator: TFunction,
+) => {
+  if (formData.user_type === "Doctor") {
+    if (!formData["doctor_experience_commenced_on"]) {
+      return translator("doctor_experience_required");
+    } else if (
+      !validateNumber(formData["doctor_experience_commenced_on"] ?? "") ||
+      Number(formData["doctor_experience_commenced_on"]) < 0 ||
+      Number(formData["doctor_experience_commenced_on"]) > 100
+    ) {
+      return translator("doctor_experience_error");
+    }
+  }
+  return null;
+};
+
+export const ValidateDoctorMedicalCouncilRegistration = (
+  formData: UserForm,
+  translator: TFunction,
+) => {
+  if (
+    formData.user_type === "Doctor" &&
+    !formData["doctor_medical_council_registration"]
+  ) {
+    return translator("medical_council_registration_required");
+  }
+  return null;
+};
+
+export const ValidateVideoLink = (
+  formData: UserForm,
+  translator: TFunction,
+) => {
+  if (!formData["video_connect_link"]) return null;
+
+  try {
+    const parsed = new URL(formData["video_connect_link"]);
+    if (!["https:", "http:"].includes(parsed.protocol)) {
+      return translator("invalid_url_http_https");
+    }
+    if (parsed.href.toLowerCase().includes("javascript:")) {
+      return translator("invalid_url_javascript");
+    }
+  } catch {
+    return translator("invalid_url");
+  }
+  return null;
+};
diff --git a/src/components/Users/UserHome.tsx b/src/components/Users/UserHome.tsx
new file mode 100644
index 00000000000..dea75598ec9
--- /dev/null
+++ b/src/components/Users/UserHome.tsx
@@ -0,0 +1,149 @@
+import { Link, navigate } from "raviger";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import Loading from "@/components/Common/Loading";
+import Page from "@/components/Common/Page";
+import { userChildProps } from "@/components/Common/UserColumns";
+import Error404 from "@/components/ErrorPages/404";
+import LinkedFacilitiesTab from "@/components/Users/LinkedFacilitiesTab";
+import LinkedSkillsTab from "@/components/Users/LinkedSkillsTab";
+import UserBanner from "@/components/Users/UserBanner";
+import UserSummaryTab from "@/components/Users/UserSummary";
+import { UserModel } from "@/components/Users/models";
+
+import useAuthUser from "@/hooks/useAuthUser";
+
+import * as Notification from "@/Utils/Notifications";
+import { editUserPermissions } from "@/Utils/permissions";
+import routes from "@/Utils/request/api";
+import useQuery from "@/Utils/request/useQuery";
+import { classNames, formatName, keysOf } from "@/Utils/utils";
+
+export interface UserHomeProps {
+  username?: string;
+  tab: string;
+}
+export interface tabChildProp {
+  body: (childProps: userChildProps) => JSX.Element | undefined;
+  hidden?: boolean;
+}
+
+export default function UserHome(props: UserHomeProps) {
+  const { tab } = props;
+  let { username } = props;
+  const [userData, setUserData] = useState<UserModel>();
+  const { t } = useTranslation();
+  const authUser = useAuthUser();
+  if (!username) {
+    username = authUser.username;
+  }
+
+  const { loading, refetch: refetchUserDetails } = useQuery(
+    routes.getUserDetails,
+    {
+      pathParams: {
+        username: username,
+      },
+      onResponse: ({ res, data, error }) => {
+        if (res?.status === 200 && data) {
+          setUserData(data);
+        } else if (res?.status === 400) {
+          navigate("/users");
+        } else if (error) {
+          Notification.Error({
+            msg: "Error while fetching user details: " + (error?.message || ""),
+          });
+        }
+      },
+    },
+  );
+
+  if (loading || !userData) {
+    return <Loading />;
+  }
+
+  const editPermissions = editUserPermissions(authUser, userData);
+
+  const TABS: {
+    PROFILE: tabChildProp;
+    SKILLS: tabChildProp;
+    FACILITIES: tabChildProp;
+  } = {
+    PROFILE: { body: UserSummaryTab },
+    SKILLS: {
+      body: LinkedSkillsTab,
+      hidden: !editPermissions,
+    },
+    FACILITIES: {
+      body: LinkedFacilitiesTab,
+      hidden: !editPermissions,
+    },
+  };
+
+  const normalizedTab = tab.toUpperCase();
+  const isValidTab = (tab: string): tab is keyof typeof TABS =>
+    Object.keys(TABS).includes(tab as keyof typeof TABS);
+  const currentTab = isValidTab(normalizedTab) ? normalizedTab : undefined;
+
+  if (!currentTab) {
+    return <Error404 />;
+  }
+
+  const SelectedTab = TABS[currentTab].body;
+
+  return (
+    <>
+      <Page
+        title={formatName(userData) || userData.username || t("manage_user")}
+        crumbsReplacements={{ [username]: { name: username } }}
+        focusOnLoad={true}
+        backUrl="/users"
+        hideTitleOnPage
+      >
+        {
+          <>
+            <UserBanner userData={userData} />
+            <div className="mt-4 w-full border-b-2 border-secondary-200">
+              <div className="overflow-x-auto sm:flex sm:items-baseline">
+                <div className="mt-4 sm:mt-0">
+                  <nav
+                    className="flex space-x-6 overflow-x-auto"
+                    id="usermanagement_tab_nav"
+                  >
+                    {keysOf(TABS)
+                      .filter((p) => !TABS[p].hidden)
+                      .map((p) => {
+                        return (
+                          <Link
+                            key={p}
+                            className={classNames(
+                              "min-w-max-content cursor-pointer whitespace-nowrap text-sm font-semibold capitalize",
+                              currentTab === p
+                                ? "border-b-2 border-primary-500 text-primary-600 hover:border-secondary-300"
+                                : "text-secondary-700 hover:text-secondary-700",
+                            )}
+                            href={`/users/${username}/${p.toLocaleLowerCase()}`}
+                          >
+                            <div className="px-3 py-1.5" id={p.toLowerCase()}>
+                              {t(`USERMANAGEMENT_TAB__${p}`)}
+                            </div>
+                          </Link>
+                        );
+                      })}
+                  </nav>
+                </div>
+              </div>
+            </div>
+            <SelectedTab
+              userData={userData}
+              username={username}
+              {...props}
+              refetchUserData={refetchUserDetails}
+            />
+          </>
+        }
+      </Page>
+    </>
+  );
+}
diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx
new file mode 100644
index 00000000000..ee1ac5e9874
--- /dev/null
+++ b/src/components/Users/UserListAndCard.tsx
@@ -0,0 +1,419 @@
+import { TFunction } from "i18next";
+import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
+
+import Card from "@/CAREUI/display/Card";
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Avatar } from "@/components/Common/Avatar";
+import Tabs from "@/components/Common/Tabs";
+import SearchInput from "@/components/Form/SearchInput";
+import { UserAssignedModel, UserModel } from "@/components/Users/models";
+
+import useAuthUser from "@/hooks/useAuthUser";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+
+import { USER_TYPES, USER_TYPE_OPTIONS } from "@/common/constants";
+
+import {
+  classNames,
+  formatName,
+  isUserOnline,
+  relativeTime,
+} from "@/Utils/utils";
+
+export const GetUserTypes = (editForm = false) => {
+  const authUser = useAuthUser();
+
+  const userIndex = USER_TYPES.indexOf(authUser.user_type);
+  const readOnlyUsers = USER_TYPE_OPTIONS.filter((user) => user.readOnly);
+  const defaultAllowedUserTypes = USER_TYPE_OPTIONS.slice(0, userIndex + 1);
+
+  // Superuser gets all options
+  if (authUser.is_superuser) {
+    return [...USER_TYPE_OPTIONS];
+  }
+
+  switch (authUser.user_type) {
+    case "StaffReadOnly":
+      return readOnlyUsers.slice(0, 1);
+    case "DistrictReadOnlyAdmin":
+      return readOnlyUsers.slice(0, 2);
+    case "StateReadOnlyAdmin":
+      return readOnlyUsers.slice(0, 3);
+    case "Pharmacist":
+      return USER_TYPE_OPTIONS.slice(0, 1);
+    case "Nurse":
+    case "Staff":
+      if (editForm) return [...defaultAllowedUserTypes];
+      // Temporarily allows creation of users with elevated permissions due to introduction of new roles.
+      return [...defaultAllowedUserTypes, USER_TYPE_OPTIONS[6]];
+    default:
+      return defaultAllowedUserTypes;
+  }
+};
+export const CanUserAccess = (user: UserModel | UserAssignedModel) => {
+  const allowedTypes = GetUserTypes(true).map((type) => type.id);
+  return allowedTypes.includes(user.user_type);
+};
+const GetDetailsButton = (username: string) => {
+  const { t } = useTranslation();
+  return (
+    <div className="grow">
+      <button
+        id={`more-details-${username}`}
+        onClick={() => navigate(`/users/${username}`)}
+        className="flex flex-grow-0 items-center gap-2 rounded-lg bg-gray-100 px-3 py-2 text-xs hover:bg-gray-200"
+      >
+        <CareIcon icon="l-arrow-up-right" className="text-lg" />
+        <span>{t("more_details")}</span>
+      </button>
+    </div>
+  );
+};
+const getNameAndStatusCard = (
+  user: UserModel | UserAssignedModel,
+  cur_online: boolean,
+  showDetailsButton = false,
+) => {
+  return (
+    <div>
+      <div className="flex flex-row justify-between gap-x-3">
+        <div className="flex flex-col">
+          <div className="flex items-center gap-x-3">
+            <h1 id={`name-${user.username}`} className="text-base font-bold">
+              {formatName(user)}
+            </h1>
+            <div
+              className={classNames(
+                "flex items-center gap-2 rounded-full px-3 py-1",
+                cur_online ? "bg-green-100" : "bg-gray-100",
+              )}
+            >
+              <UserStatusIndicator user={user} />
+            </div>
+          </div>
+          <span
+            className="text-sm text-gray-500"
+            id={`username-${user.username}`}
+          >
+            {user.username}
+          </span>
+        </div>
+        <div>{showDetailsButton && GetDetailsButton(user.username)}</div>
+      </div>
+    </div>
+  );
+};
+
+const getDistrict = (user: UserModel | UserAssignedModel, t: TFunction) => {
+  const district =
+    "district_object" in user && user.district_object
+      ? user.district_object?.name
+      : "district" in user && user.district
+        ? user.district
+        : undefined;
+
+  if (!district) return <></>;
+  return (
+    <div className="text-sm">
+      <div className="text-gray-500">{t("district")}</div>
+      <div id="district" className="font-medium">
+        {district}
+      </div>
+    </div>
+  );
+};
+
+export const UserStatusIndicator = ({
+  user,
+  className,
+  addPadding = false,
+}: {
+  user: UserModel | UserAssignedModel;
+  className?: string;
+  addPadding?: boolean;
+}) => {
+  const cur_online = isUserOnline(user);
+  const { t } = useTranslation();
+  return (
+    <div
+      className={classNames(
+        "inline-flex items-center gap-2 rounded-full",
+        addPadding ? "px-3 py-1" : "py-px",
+        cur_online ? "bg-green-100" : "bg-gray-100",
+        className,
+      )}
+    >
+      <span
+        className={classNames(
+          "inline-block h-2 w-2 shrink-0 rounded-full",
+          cur_online ? "bg-green-500" : "bg-gray-400",
+        )}
+      ></span>
+      <span
+        className={classNames(
+          "whitespace-nowrap text-xs",
+          cur_online ? "text-green-700" : "text-gray-500",
+        )}
+      >
+        {cur_online
+          ? t("online")
+          : user.last_login
+            ? relativeTime(user.last_login)
+            : t("never")}
+      </span>
+    </div>
+  );
+};
+const UserCard = ({ user }: { user: UserModel | UserAssignedModel }) => {
+  const userOnline = isUserOnline(user);
+  const { width } = useWindowDimensions();
+  const mediumScreenBreakpoint = 640;
+  const isMediumScreen = width <= mediumScreenBreakpoint;
+  const isLessThanXLargeScreen = width <= 1280;
+  const { t } = useTranslation();
+
+  return (
+    <Card
+      key={`usr_${user.id}`}
+      id={`usr_${user.id}`}
+      className="relative h-full"
+    >
+      <div className="flex h-full flex-col justify-between">
+        <div className="flex flex-col gap-4 xl:flex-row w-full">
+          <div className="flex flex-col gap-4 sm:flex-row w-full">
+            <div className="flex flex-col items-center gap-4 min-[400px]:flex-row sm:items-start">
+              <Avatar
+                imageUrl={user.read_profile_picture_url}
+                name={user.username ?? ""}
+                className="h-16 w-16 self-center text-2xl sm:self-auto"
+              />
+              {isMediumScreen && getNameAndStatusCard(user, userOnline)}
+            </div>
+            <div className="flex flex-col w-full">
+              {!isMediumScreen &&
+                getNameAndStatusCard(user, userOnline, !isLessThanXLargeScreen)}
+              <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-4">
+                <div className="text-sm">
+                  <div className="text-gray-500">{t("role")}</div>
+                  <div id="role" className="font-medium">
+                    {user.user_type}
+                  </div>
+                </div>
+                <div className="text-sm">
+                  <div className="text-gray-500">{t("home_facility")}</div>
+                  <div id="home-facility" className="font-medium">
+                    {user.home_facility_object?.name || t("no_home_facility")}
+                  </div>
+                </div>
+                {getDistrict(user, t)}
+                <div className="text-sm">
+                  <div className="text-gray-500">
+                    {t("average_weekly_working_hours")}
+                  </div>
+                  <div className="font-medium">
+                    {user.weekly_working_hours ?? "-"}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {isLessThanXLargeScreen && (
+          <div className="mt-4">{GetDetailsButton(user.username)}</div>
+        )}
+      </div>
+    </Card>
+  );
+};
+export const UserGrid = ({
+  users,
+}: {
+  users?: UserModel[] | UserAssignedModel[];
+}) => (
+  <div className="grid grid-cols-1 gap-4 @xl:grid-cols-3 @4xl:grid-cols-4 @6xl:grid-cols-5 lg:grid-cols-2">
+    {users?.map((user) => <UserCard key={user.id} user={user} />)}
+  </div>
+);
+
+const UserListHeader = ({
+  showDistrictColumn,
+}: {
+  showDistrictColumn: boolean;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <thead>
+      <tr className="bg-gray-50 text-sm font-medium text-gray-500">
+        <th className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-left">
+          {t("name")}
+        </th>
+        <th className="w-32 px-4 py-3 text-left">{t("status")}</th>
+        <th className="px-4 py-3 text-left">{t("role")}</th>
+        <th className="px-4 py-3 text-left">{t("home_facility")}</th>
+        {showDistrictColumn && (
+          <th className="px-4 py-3 text-left">{t("district")}</th>
+        )}
+        <th className="px-4 py-3"></th>
+      </tr>
+    </thead>
+  );
+};
+
+const UserListRow = ({
+  user,
+  showDistrictColumn,
+}: {
+  user: UserModel | UserAssignedModel;
+  showDistrictColumn: boolean;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <tr
+      key={`usr_${user.id}`}
+      id={`usr_${user.id}`}
+      className="hover:bg-gray-50"
+    >
+      <td className="sticky left-0 z-10 bg-white px-4 py-4">
+        <div className="flex items-center gap-3">
+          <Avatar
+            imageUrl={user.read_profile_picture_url}
+            name={user.username ?? ""}
+            className="h-10 w-10 text-lg"
+          />
+          <div className="flex flex-col">
+            <h1 id={`name-${user.username}`} className="text-sm font-medium">
+              {formatName(user)}
+            </h1>
+            <span
+              id={`username-${user.username}`}
+              className="text-xs text-gray-500"
+            >
+              @{user.username}
+            </span>
+          </div>
+        </div>
+      </td>
+      <td className="flex-0 py-4">
+        <UserStatusIndicator user={user} addPadding />
+      </td>
+      <td id="role" className="px-4 py-4 text-sm">
+        {user.user_type}
+      </td>
+      <td id="home-facility" className="px-4 py-4 text-sm">
+        {user.home_facility_object?.name || t("no_home_facility")}
+      </td>
+      {showDistrictColumn && (
+        <td id="district" className="px-4 py-4 text-sm">
+          {"district_object" in user && user.district_object
+            ? user.district_object?.name
+            : "district" in user && user.district
+              ? user.district
+              : ""}
+        </td>
+      )}
+      <td className="px-4 py-4">{GetDetailsButton(user.username)}</td>
+    </tr>
+  );
+};
+export const UserList = ({
+  users,
+}: {
+  users?: UserModel[] | UserAssignedModel[];
+}) => {
+  const showDistrictColumn = users?.some(
+    (user) => "district_object" in user || "district" in user,
+  );
+  return (
+    <div className="overflow-x-auto rounded-lg border border-gray-200">
+      <table className="relative min-w-full divide-y divide-gray-200">
+        <UserListHeader showDistrictColumn={showDistrictColumn ?? false} />
+        <tbody className="divide-y divide-gray-200 bg-white">
+          {users?.map((user) => (
+            <UserListRow
+              key={user.id}
+              user={user}
+              showDistrictColumn={showDistrictColumn ?? false}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+interface UserListViewProps {
+  users: UserModel[] | UserAssignedModel[];
+  onSearch: (username: string) => void;
+  searchValue: string;
+  activeTab: number;
+  onTabChange: (tab: number) => void;
+}
+
+export default function UserListView({
+  users,
+  onSearch,
+  searchValue,
+  activeTab,
+  onTabChange,
+}: UserListViewProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="mb-4 flex flex-col items-center justify-between gap-3 sm:flex-row">
+        <div className="sm:w-1/2">
+          <SearchInput
+            id="search-by-username"
+            name="username"
+            onChange={(e) => onSearch(e.value)}
+            value={searchValue}
+            placeholder={t("search_by_username")}
+          />
+        </div>
+        <Tabs
+          tabs={[
+            {
+              text: (
+                <div className="flex items-center gap-2">
+                  <CareIcon icon="l-credit-card" className="text-lg" />
+                  <span>Card</span>
+                </div>
+              ),
+              value: 0,
+              id: "user-card-view",
+            },
+            {
+              text: (
+                <div className="flex items-center gap-2">
+                  <CareIcon icon="l-list-ul" className="text-lg" />
+                  <span>List</span>
+                </div>
+              ),
+              value: 1,
+              id: "user-list-view",
+            },
+          ]}
+          currentTab={activeTab}
+          onTabChange={(tab) => onTabChange(tab as number)}
+          className="float-right"
+        />
+      </div>
+      {users.length > 0 ? (
+        <>
+          {activeTab === 0 ? (
+            <UserGrid users={users} />
+          ) : (
+            <UserList users={users} />
+          )}
+        </>
+      ) : (
+        <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
+          <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
+            No Users Found
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Users/UserProfile.tsx b/src/components/Users/UserProfile.tsx
index 7b0df12cac0..7e8dff2aa84 100644
--- a/src/components/Users/UserProfile.tsx
+++ b/src/components/Users/UserProfile.tsx
@@ -17,7 +17,7 @@ import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormFi
 import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
 import TextFormField from "@/components/Form/FormFields/TextFormField";
 import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
-import { validateRule } from "@/components/Users/UserAdd";
+import { validateRule } from "@/components/Users/UserAddEditForm";
 import {
   GenderType,
   SkillModel,
diff --git a/src/components/Users/UserResetPassword.tsx b/src/components/Users/UserResetPassword.tsx
new file mode 100644
index 00000000000..2d61f2bda73
--- /dev/null
+++ b/src/components/Users/UserResetPassword.tsx
@@ -0,0 +1,213 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import Form from "@/components/Form/Form";
+import TextFormField from "@/components/Form/FormFields/TextFormField";
+import { validateRule } from "@/components/Users/UserAddEditForm";
+import { UpdatePasswordForm, UserModel } from "@/components/Users/models";
+
+import * as Notification from "@/Utils/Notifications";
+import routes from "@/Utils/request/api";
+import request from "@/Utils/request/request";
+
+import ButtonV2 from "../Common/ButtonV2";
+
+interface PasswordForm {
+  username: string;
+  old_password: string;
+  new_password_1: string;
+  new_password_2: string;
+}
+
+export default function UserResetPassword({
+  userData,
+}: {
+  userData: UserModel;
+}) {
+  const { t } = useTranslation();
+  const [isSubmitting, setisSubmitting] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const initForm: PasswordForm = {
+    username: userData.username,
+    old_password: "",
+    new_password_1: "",
+    new_password_2: "",
+  };
+
+  const validateNewPassword = (password: string) => {
+    if (
+      password.length < 8 ||
+      !/\d/.test(password) ||
+      password === password.toUpperCase() ||
+      password === password.toLowerCase()
+    ) {
+      return false;
+    }
+    return true;
+  };
+
+  const validateForm = (formData: PasswordForm) => {
+    const errors: Partial<Record<keyof PasswordForm, string>> = {};
+
+    if (!formData.old_password) {
+      errors.old_password = t("please_enter_current_password");
+    }
+
+    if (!formData.new_password_1) {
+      errors.new_password_1 = t("please_enter_new_password");
+    } else if (!validateNewPassword(formData.new_password_1)) {
+      errors.new_password_1 = t("new_password_validation");
+    }
+
+    if (!formData.new_password_2) {
+      errors.new_password_2 = t("please_confirm_password");
+    } else if (formData.new_password_1 !== formData.new_password_2) {
+      errors.new_password_2 = t("password_mismatch");
+    }
+
+    if (formData.new_password_1 === formData.old_password) {
+      errors.new_password_1 = t("new_password_same_as_old");
+    }
+
+    return errors;
+  };
+
+  const handleSubmit = async (formData: PasswordForm) => {
+    setisSubmitting(true);
+    const form: UpdatePasswordForm = {
+      old_password: formData.old_password,
+      username: userData.username,
+      new_password: formData.new_password_1,
+    };
+
+    const { res, data, error } = await request(routes.updatePassword, {
+      body: form,
+    });
+
+    if (res?.ok) {
+      Notification.Success({ msg: data?.message });
+    } else {
+      Notification.Error({
+        msg: error?.message ?? t("password_update_error"),
+      });
+    }
+    setisSubmitting(false);
+  };
+
+  const renderPasswordForm = () => {
+    return (
+      <Form<PasswordForm>
+        defaults={initForm}
+        validate={validateForm}
+        onSubmit={handleSubmit}
+        resetFormValsOnCancel
+        resetFormValsOnSubmit
+        hideRestoreDraft
+        noPadding
+        disabled={isSubmitting}
+        hideCancelButton
+      >
+        {(field) => (
+          <div className="grid grid-cols-6 gap-4">
+            <TextFormField
+              {...field("old_password")}
+              name="old_password"
+              label={t("current_password")}
+              className="col-span-6 sm:col-span-3"
+              type="password"
+              required
+              aria-label={t("current_password")}
+            />
+            <div className="col-span-6 sm:col-span-3">
+              <TextFormField
+                {...field("new_password_1")}
+                name="new_password_1"
+                label={t("new_password")}
+                type="password"
+                className="peer col-span-6 sm:col-span-3"
+                required
+                aria-label={t("new_password")}
+              />
+              <div
+                className="text-small mb-2 hidden pl-2 text-secondary-500 peer-focus-within:block"
+                aria-live="polite"
+              >
+                {validateRule(
+                  field("new_password_1").value?.length >= 8,
+                  t("password_length_validation"),
+                  !field("new_password_1").value,
+                )}
+                {validateRule(
+                  field("new_password_1").value !==
+                    field("new_password_1").value?.toUpperCase(),
+                  t("password_lowercase_validation"),
+                  !field("new_password_1").value,
+                )}
+                {validateRule(
+                  field("new_password_1").value !==
+                    field("new_password_1").value?.toLowerCase(),
+                  t("password_uppercase_validation"),
+                  !field("new_password_1").value,
+                )}
+                {validateRule(
+                  /\d/.test(field("new_password_1").value ?? ""),
+                  t("password_number_validation"),
+                  !field("new_password_1").value,
+                )}
+              </div>
+            </div>
+            <div className="col-span-6 sm:col-span-3">
+              <TextFormField
+                {...field("new_password_2")}
+                name="new_password_2"
+                label={t("new_password_confirmation")}
+                className="peer col-span-6 sm:col-span-3"
+                type="password"
+                required
+                aria-label={t("new_password_confirmation")}
+              />
+              {field("new_password_2").value?.length > 0 && (
+                <div
+                  className="text-small mb-2 hidden pl-2 text-secondary-500 peer-focus-within:block"
+                  aria-live="polite"
+                >
+                  {validateRule(
+                    field("new_password_1").value ===
+                      field("new_password_2").value,
+                    t("password_mismatch"),
+                    !field("new_password_2").value,
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </Form>
+    );
+  };
+
+  const editButton = () => (
+    <div className="mb-4 flex justify-start">
+      <ButtonV2
+        onClick={() => setIsEditing(!isEditing)}
+        type="button"
+        id="change-edit-password-button"
+        className="flex items-center gap-2 rounded-sm border border-gray-100 bg-white px-3 py-1.5 text-sm text-[#009D48] shadow-sm hover:bg-gray-50"
+        shadow={false}
+      >
+        <CareIcon icon={isEditing ? "l-times" : "l-edit"} className="h-4 w-4" />
+        {isEditing ? t("cancel") : t("change_password")}
+      </ButtonV2>
+    </div>
+  );
+
+  return (
+    <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6">
+      {editButton()}
+      {isEditing && renderPasswordForm()}
+    </div>
+  );
+}
diff --git a/src/components/Users/UserSummary.tsx b/src/components/Users/UserSummary.tsx
new file mode 100644
index 00000000000..f75aa066e65
--- /dev/null
+++ b/src/components/Users/UserSummary.tsx
@@ -0,0 +1,236 @@
+import { navigate } from "raviger";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import ButtonV2 from "@/components/Common/ButtonV2";
+import LanguageSelector from "@/components/Common/LanguageSelector";
+import UserColumns from "@/components/Common/UserColumns";
+import UserAvatar from "@/components/Users/UserAvatar";
+import UserDeleteDialog from "@/components/Users/UserDeleteDialog";
+import {
+  UserBasicInfoView,
+  UserContactInfoView,
+  UserProfessionalInfoView,
+} from "@/components/Users/UserEditDetails";
+import UserResetPassword from "@/components/Users/UserResetPassword";
+import {
+  BasicInfoDetails,
+  ContactInfoDetails,
+  ProfessionalInfoDetails,
+} from "@/components/Users/UserViewDetails";
+import { UserModel } from "@/components/Users/models";
+
+import useAuthUser from "@/hooks/useAuthUser";
+
+import * as Notification from "@/Utils/Notifications";
+import {
+  editUserPermissions,
+  showAvatarEdit,
+  showUserDelete,
+  showUserPasswordReset,
+} from "@/Utils/permissions";
+import routes from "@/Utils/request/api";
+import request from "@/Utils/request/request";
+
+export default function UserSummaryTab({
+  userData,
+  refetchUserData,
+}: {
+  userData?: UserModel;
+  refetchUserData?: () => void;
+}) {
+  const { t } = useTranslation();
+  const [showDeleteDialog, setshowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const authUser = useAuthUser();
+
+  if (!userData) {
+    return <></>;
+  }
+
+  const handleSubmit = async () => {
+    setIsDeleting(true);
+    const { res, error } = await request(routes.deleteUser, {
+      pathParams: { username: userData.username },
+    });
+    setIsDeleting(false);
+    if (res?.status === 204) {
+      Notification.Success({
+        msg: t("user_deleted_successfully"),
+      });
+      setshowDeleteDialog(!showDeleteDialog);
+      navigate("/users");
+    } else {
+      Notification.Error({
+        msg: t("user_delete_error") + ": " + (error || ""),
+      });
+      setshowDeleteDialog(!showDeleteDialog);
+    }
+  };
+
+  const userColumnsData = {
+    userData,
+    username: userData.username,
+    refetchUserData,
+  };
+  const deletePermitted = showUserDelete(authUser, userData);
+  const passwordResetPermitted = showUserPasswordReset(authUser, userData);
+  const avatarPermitted = showAvatarEdit(authUser, userData);
+  const editPermissions = editUserPermissions(authUser, userData);
+
+  const renderBasicInformation = () => {
+    if (editPermissions) {
+      return (
+        <UserBasicInfoView
+          username={userData.username}
+          userData={userData}
+          onSubmitSuccess={refetchUserData}
+        />
+      );
+    }
+    return (
+      <div className="overflow-visible px-4 py-5 sm:px-6 rounded-lg shadow sm:rounded-lg bg-white">
+        <BasicInfoDetails user={userData} />
+      </div>
+    );
+  };
+
+  const renderContactInformation = () => {
+    if (editPermissions) {
+      return (
+        <UserContactInfoView
+          username={userData.username}
+          userData={userData}
+          onSubmitSuccess={refetchUserData}
+        />
+      );
+    }
+    return (
+      <div className="overflow-visible px-4 py-5 sm:px-6 rounded-lg shadow sm:rounded-lg bg-white">
+        <ContactInfoDetails user={userData} />
+      </div>
+    );
+  };
+
+  const renderProfessionalInformation = () => {
+    if (editPermissions) {
+      return (
+        <UserProfessionalInfoView
+          username={userData.username}
+          userData={userData}
+          onSubmitSuccess={refetchUserData}
+        />
+      );
+    }
+    return (
+      <div className="overflow-visible px-4 py-5 sm:px-6 rounded-lg shadow sm:rounded-lg bg-white">
+        <ProfessionalInfoDetails user={userData} />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {showDeleteDialog && (
+        <UserDeleteDialog
+          name={userData.username}
+          handleOk={handleSubmit}
+          handleCancel={() => {
+            setshowDeleteDialog(false);
+          }}
+        />
+      )}
+      <div className="mt-10 flex flex-col gap-y-6">
+        {avatarPermitted && (
+          <UserColumns
+            heading={t("edit_avatar")}
+            note={
+              authUser.username === userData.username
+                ? t("edit_avatar_note_self")
+                : t("edit_avatar_note")
+            }
+            Child={UserAvatar}
+            childProps={userColumnsData}
+          />
+        )}
+        <UserColumns
+          heading={t("personal_information")}
+          note={
+            authUser.username === userData.username
+              ? t("personal_information_note_self")
+              : editPermissions
+                ? t("personal_information_note")
+                : t("personal_information_note_view")
+          }
+          Child={renderBasicInformation}
+          childProps={userColumnsData}
+        />
+        <UserColumns
+          heading={t("contact_info")}
+          note={
+            authUser.username === userData.username
+              ? t("contact_info_note_self")
+              : editPermissions
+                ? t("contact_info_note")
+                : t("contact_info_note_view")
+          }
+          Child={renderContactInformation}
+          childProps={userColumnsData}
+        />
+        <UserColumns
+          heading={t("professional_info")}
+          note={
+            authUser.username === userData.username
+              ? t("professional_info_note_self")
+              : editPermissions
+                ? t("professional_info_note")
+                : t("professional_info_note_view")
+          }
+          Child={renderProfessionalInformation}
+          childProps={userColumnsData}
+        />
+        {passwordResetPermitted && (
+          <UserColumns
+            heading={t("reset_password")}
+            note={t("reset_password_note_self")}
+            Child={UserResetPassword}
+            childProps={userColumnsData}
+          />
+        )}
+        {authUser.username === userData.username && (
+          <UserColumns
+            heading={t("language_selection")}
+            note={t("set_your_local_language")}
+            Child={LanguageSelector}
+            childProps={userColumnsData}
+          />
+        )}
+        {deletePermitted && (
+          <div className="mt-3 flex flex-col items-center gap-5 border-t-2 pt-5 sm:flex-row">
+            <div className="sm:w-1/4">
+              <div className="my-1 text-sm leading-5">
+                <p className="mb-2 font-semibold">{t("delete_account")}</p>
+                <p className="text-secondary-600">{t("delete_account_note")}</p>
+              </div>
+            </div>
+            <div className="w-3/4">
+              <ButtonV2
+                authorizeFor={() => deletePermitted}
+                onClick={() => setshowDeleteDialog(true)}
+                variant="danger"
+                data-testid="user-delete-button"
+                className="my-1 inline-flex"
+                disabled={isDeleting}
+              >
+                <CareIcon icon="l-trash" className="h-4" />
+                <span className="">{t("delete_account_btn")}</span>
+              </ButtonV2>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Users/UserViewDetails.tsx b/src/components/Users/UserViewDetails.tsx
new file mode 100644
index 00000000000..8b6fb40a1d3
--- /dev/null
+++ b/src/components/Users/UserViewDetails.tsx
@@ -0,0 +1,155 @@
+import { useTranslation } from "react-i18next";
+
+import { UserModel } from "./models";
+
+interface UserViewDetailsProps {
+  user: UserModel;
+}
+
+const LabelValue = ({
+  label,
+  value,
+  id,
+}: {
+  label: string;
+  value?: string | null;
+  id?: string;
+}) => (
+  <div className="flex flex-col gap-1">
+    <span className="text-sm text-gray-500">{label}</span>
+    <span id={`view-${id}`} className="text-sm">
+      {value || "-"}
+    </span>
+  </div>
+);
+
+interface BadgeProps {
+  text: string;
+  bgColor?: string;
+  textColor?: string;
+  className?: string;
+}
+
+export const Badge = ({
+  text,
+  textColor = "text-black",
+  className = "",
+}: BadgeProps) => {
+  return (
+    <div className="relative mb-4">
+      <div className="mt-1 h-1 w-6 bg-blue-600 mb-1" />
+      <span
+        className={`
+          inline-flex items-center rounded-full text-base font-semibold
+         ${textColor} ${className}
+        `}
+      >
+        {text}
+      </span>
+    </div>
+  );
+};
+
+export const BasicInfoDetails = ({ user }: UserViewDetailsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="pt-2 pb-5">
+      <Badge text={t("basic_info")} />
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <LabelValue id="username" label={t("username")} value={user.username} />
+        <LabelValue
+          id="user_type"
+          label={t("user_type")}
+          value={user.user_type}
+        />
+        <LabelValue
+          id="first_name"
+          label={t("first_name")}
+          value={user.first_name}
+        />
+        <LabelValue
+          id="last_name"
+          label={t("last_name")}
+          value={user.last_name}
+        />
+        <LabelValue id="gender" label={t("gender")} value={user.gender} />
+        <LabelValue
+          id="date_of_birth"
+          label={t("date_of_birth")}
+          value={
+            user.date_of_birth
+              ? new Date(user.date_of_birth).toLocaleDateString()
+              : null
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export const ContactInfoDetails = ({ user }: UserViewDetailsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="pt-2 pb-5">
+      <Badge text={t("contact_info")} />
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <LabelValue id="email" label={t("email")} value={user.email} />
+        <LabelValue
+          id="phone_number"
+          label={t("phone_number")}
+          value={user.phone_number}
+        />
+        <LabelValue
+          id="whatsapp_number"
+          label={t("whatsapp_number")}
+          value={user.alt_phone_number}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const ProfessionalInfoDetails = ({ user }: UserViewDetailsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="pt-2 pb-5">
+      <Badge text={t("professional_info")} />
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        {(user.user_type === "Doctor" || user.user_type === "Nurse") && (
+          <LabelValue
+            id="qualification"
+            label={t("qualification")}
+            value={user.qualification}
+          />
+        )}
+        {user.user_type === "Doctor" && (
+          <>
+            <LabelValue
+              id="years_of_experience"
+              label={t("years_of_experience")}
+              value={user.doctor_experience_commenced_on}
+            />
+            <LabelValue
+              id="doctor_medical_council_registration"
+              label={t("medical_council_registration")}
+              value={user.doctor_medical_council_registration}
+            />
+          </>
+        )}
+        <LabelValue
+          id="average_weekly_working_hours"
+          label={t("average_weekly_working_hours")}
+          value={user.weekly_working_hours?.toString()}
+        />
+        <LabelValue
+          id="video_conference_link"
+          label={t("video_conference_link")}
+          value={user.video_connect_link}
+        />
+      </div>
+    </div>
+  );
+};