diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index 4c29022..7b79a2b 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -50,14 +50,17 @@ const ViewUserPage = () => {
                 {/* Input fields */}
                 <form className={editUserStyle.fields}>
                   {/* Role and Dropdown */}
-                  <SelectField
-                    label="Select Role"
-                    options={[
-                      { label: "Option", value: "Option" },
-                      { label: "Option 1", value: "Option 1" },
-                      { label: "Option 2", value: "Option 2" },
-                    ]}
-                  />
+                  <div className={editUserStyle.roleField}>
+                    <p>Role</p>
+                    <SelectField
+                      label="Select Role"
+                      options={[
+                        { label: "Option", value: "Option" },
+                        { label: "Option 1", value: "Option 1" },
+                        { label: "Option 2", value: "Option 2" },
+                      ]}
+                    />
+                  </div>
                   {/* Email */}
                   <div className={editUserStyle.inputMainContainer}>
                     <div className={editUserStyle.inputContainer}>
diff --git a/frontend/src/app/users/[usersId]/styles.module.css b/frontend/src/app/users/[usersId]/styles.module.css
index af3385d..03a1dc2 100644
--- a/frontend/src/app/users/[usersId]/styles.module.css
+++ b/frontend/src/app/users/[usersId]/styles.module.css
@@ -99,7 +99,13 @@
   font-weight: 400;
   line-height: normal;
 }
-
+.roleField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
 .inputField {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index e2f8dd1..42e6a92 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -54,14 +54,17 @@ const AddUserPage = () => {
                   onSubmit={handleSubmit(onSubmit)}
                 >
                   {/* Role and Dropdown */}
-                  <SelectField
-                    label="Select Role"
-                    options={[
-                      { label: "Option", value: "Option" },
-                      { label: "Option 1", value: "Option 1" },
-                      { label: "Option 2", value: "Option 2" },
-                    ]}
-                  />
+                  <div className={addUserStyle.roleField}>
+                    <p>Role</p>
+                    <SelectField
+                      label="Select Role"
+                      options={[
+                        { label: "Option", value: "Option" },
+                        { label: "Option 1", value: "Option 1" },
+                        { label: "Option 2", value: "Option 2" },
+                      ]}
+                    />
+                  </div>
                   {/* Email */}
                   <div className={addUserStyle.inputMainContainer}>
                     <div className={addUserStyle.inputContainer}>
diff --git a/frontend/src/app/users/add/styles.module.css b/frontend/src/app/users/add/styles.module.css
index 6acd5d8..f03154e 100644
--- a/frontend/src/app/users/add/styles.module.css
+++ b/frontend/src/app/users/add/styles.module.css
@@ -86,6 +86,13 @@
   font-weight: 400;
   line-height: normal;
 }
+.roleField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
 .inputField {
   display: flex;
   flex-direction: column;