diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 707993db..a109c251 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -141,7 +141,7 @@ const CreateRole = ({ modalType, onClose }) => {
         )}
       </div>
 
-      <div className="col-12 border px-3"
+      <div className="border rounded px-3"
         style={{
           maxHeight: "350px", // Adjust this as needed
           overflowY: "auto",
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 335ef092..7548a55a 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -199,89 +199,91 @@ const EditMaster = ({ master, onClose }) => {
         )}
       </div>
 
-      <div className="col-12 text-start">
-        {/* Scrollable Container */}
+     <div className="col-12 text-start">
+  {/* Scrollable Container with Border */}
+  <div
+    className="border rounded p-3" // ✅ border applied here
+    style={{
+      maxHeight: "350px",
+      overflowY: "auto",
+      paddingRight: "10px", // spacing for scrollbar
+    }}
+  >
+    {masterFeatures.map((feature, featureIndex) => (
+      <div key={feature.id} className="mb-3">
+        {/* Feature Group Title */}
+        <div className="fw-semibold mb-2">{feature.name}</div>
+
+        {/* Permissions Grid */}
         <div
+          className="permissions-grid"
           style={{
-            maxHeight: "350px", // adjust as needed
-            overflowY: "auto",
-            paddingRight: "10px", // for better scrollbar spacing
+            display: "grid",
+            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+            gap: "0.75rem 2rem",
           }}
         >
-          {masterFeatures.map((feature, featureIndex) => (
-            <div key={feature.id} className="mb-3">
-              {/* Feature Group Title */}
-              <div className="fw-semibold mb-2">{feature.name}</div>
+          {feature.featurePermissions.map((perm, permIndex) => {
+            const refIndex = featureIndex * 10 + permIndex;
+            return (
+              <div key={perm.id} className="d-flex align-items-start">
+                <label
+                  className="form-check-label d-flex align-items-center"
+                  htmlFor={perm.id}
+                >
+                  <input
+                    type="checkbox"
+                    className="form-check-input me-2"
+                    id={perm.id}
+                    {...register(`permissions.${perm.id}`, {
+                      value: initialPermissions[perm.id] || false,
+                    })}
+                  />
+                  {perm.name}
+                </label>
 
-              {/* Permissions Grid */}
-              <div
-                className="permissions-grid"
-                style={{
-                  display: "grid",
-                  gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-                  gap: "0.75rem 2rem",
-                }}
-              >
-                {feature.featurePermissions.map((perm, permIndex) => {
-                  const refIndex = featureIndex * 10 + permIndex;
-                  return (
-                    <div key={perm.id} className="d-flex align-items-start">
-                      <label
-                        className="form-check-label d-flex align-items-center"
-                        htmlFor={perm.id}
-                      >
-                        <input
-                          type="checkbox"
-                          className="form-check-input me-2"
-                          id={perm.id}
-                          {...register(`permissions.${perm.id}`, {
-                            value: initialPermissions[perm.id] || false,
-                          })}
-                        />
-                        {perm.name}
-                      </label>
-
-                      {/* Info Icon */}
-                      <div style={{ display: "flex", alignItems: "center" }}>
-                        <div
-                          ref={(el) => (popoverRefs.current[refIndex] = el)}
-                          tabIndex="0"
-                          className="d-flex align-items-center justify-content-center"
-                          data-bs-toggle="popover"
-                          data-bs-trigger="focus"
-                          data-bs-placement="right"
-                          data-bs-html="true"
-                          data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
-                        >
-                          &nbsp;
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="13"
-                            height="13"
-                            fill="currentColor"
-                            className="bi bi-info-circle"
-                            viewBox="0 0 16 16"
-                          >
-                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-                            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
+                {/* Info Icon */}
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  <div
+                    ref={(el) => (popoverRefs.current[refIndex] = el)}
+                    tabIndex="0"
+                    className="d-flex align-items-center justify-content-center"
+                    data-bs-toggle="popover"
+                    data-bs-trigger="focus"
+                    data-bs-placement="right"
+                    data-bs-html="true"
+                    data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
+                  >
+                    &nbsp;
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="13"
+                      height="13"
+                      fill="currentColor"
+                      className="bi bi-info-circle"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                    </svg>
+                  </div>
+                </div>
               </div>
-
-              <hr className="my-2" />
-            </div>
-          ))}
+            );
+          })}
         </div>
 
-        {/* Error Display */}
-        {errors.permissions && (
-          <p className="text-danger">{errors.permissions.message}</p>
-        )}
+        <hr className="my-2" />
       </div>
+    ))}
+  </div>
+
+  {/* Error Display */}
+  {errors.permissions && (
+    <p className="text-danger">{errors.permissions.message}</p>
+  )}
+</div>
+
 
 
       <div className="col-12 text-center">