diff --git a/frontend/src/components/Users/UserInfo/UserInfo.constants.js b/frontend/src/components/Users/UserInfo/UserInfo.constants.js
new file mode 100644
index 0000000000..2b18434fc1
--- /dev/null
+++ b/frontend/src/components/Users/UserInfo/UserInfo.constants.js
@@ -0,0 +1,13 @@
+/**
+ * Enum for User status.
+ *
+ * @enum {string}
+ * @property {string} ACTIVE - Represents an active status for a user.
+ * @property {string} INACTIVE - Represents an inactive status for a user.
+ * @property {string} LOCKED - Represents a locked status for a user.
+ */
+export const USER_STATUS = {
+    ACTIVE: "ACTIVE",
+    INACTIVE: "INACTIVE",
+    LOCKED: "LOCKED"
+};
diff --git a/frontend/src/components/Users/UserInfo/UserInfo.jsx b/frontend/src/components/Users/UserInfo/UserInfo.jsx
index bd888d64cf..41d91b80de 100644
--- a/frontend/src/components/Users/UserInfo/UserInfo.jsx
+++ b/frontend/src/components/Users/UserInfo/UserInfo.jsx
@@ -1,17 +1,17 @@
-import styles from "./UserInfo.module.css";
 import { useGetDivisionsQuery } from "../../../api/opsAPI.js";
 import ComboBox from "../../UI/Form/ComboBox/index.js";
 import React, { useEffect } from "react";
 import { useGetRolesQuery } from "../../../api/opsAuthAPI.js";
+import { USER_STATUS } from "./UserInfo.constants.js";
 
 const UserInfo = ({ user, isEditable }) => {
     const [selectedDivision, setSelectedDivision] = React.useState({});
     const [selectedStatus, setSelectedStatus] = React.useState({});
     const [selectedRoles, setSelectedRoles] = React.useState([]);
     const statusData = [
-        { id: 1, name: "ACTIVE" },
-        { id: 2, name: "INACTIVE" },
-        { id: 3, name: "LOCKED" }
+        { id: 1, name: USER_STATUS.ACTIVE },
+        { id: 2, name: USER_STATUS.INACTIVE },
+        { id: 3, name: USER_STATUS.LOCKED }
     ];
 
     const { data: divisions, error: errorDivisions, isLoading: isLoadingDivisions } = useGetDivisionsQuery();
@@ -54,7 +54,7 @@ const UserInfo = ({ user, isEditable }) => {
                             <div className="grid-col">User Email:</div>
                             <div className="grid-col">{user?.email}</div>
                         </div>
-                        <div className={`grid-row ${styles.centeredItem}`}>
+                        <div className="grid-row display-flex flex-align-center">
                             <div className="grid-col flex-3">Division:</div>
                             <div className="grid-col flex-3">
                                 {!isEditable && <span>{selectedDivision?.name}</span>}
@@ -92,7 +92,7 @@ const UserInfo = ({ user, isEditable }) => {
                                 )}
                             </div>
                         </div>
-                        <div className={`grid-row ${styles.centeredItem}`}>
+                        <div className="grid-row display-flex flex-align-center">
                             <div className="grid-col flex-3">Status:</div>
                             <div className="grid-col flex-3">
                                 {!isEditable && <span>{selectedStatus?.name}</span>}
diff --git a/frontend/src/components/Users/UserInfo/UserInfo.module.css b/frontend/src/components/Users/UserInfo/UserInfo.module.css
deleted file mode 100644
index c16a5c4c8a..0000000000
--- a/frontend/src/components/Users/UserInfo/UserInfo.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/*Placeholder CSS to stub out space on the page.*/
-
-.centeredItem {
-    align-items: center;
-    display: flex;
-}