diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index a109c251..14ca6c15 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -141,12 +141,14 @@ const CreateRole = ({ modalType, onClose }) => {
         )}
       </div>
 
-      <div className="border rounded px-3"
+      <div
+        className="border rounded px-3"
         style={{
-          maxHeight: "350px", // Adjust this as needed
+          maxHeight: "350px",
           overflowY: "auto",
-          overflowX: "hidden",
-        }}>
+          overflowX: "hidden", // Prevent bottom scrollbar
+        }}
+      >
         {masterFeatures.map((feature, featureIndex) => (
           <React.Fragment key={feature.id}>
             <div className="row my-1">
@@ -156,70 +158,60 @@ const CreateRole = ({ modalType, onClose }) => {
               </div>
 
               {/* Permissions Grid */}
-              <div className="col-12 ps-3">
-                <div className="d-flex flex-column w-100">
-                  {Array.from({
-                    length: Math.ceil(feature.featurePermissions.length / 3),
-                  }).map((_, rowIndex) => (
-                    <div
-                      className="d-flex mb-2 align-items-start justify-content-start flex-wrap"
-                      key={rowIndex}
-                    >
-                      {feature.featurePermissions
-                        .slice(rowIndex * 3, rowIndex * 3 + 3)
-                        .map((perm, permIndex) => {
-                          const refIndex = featureIndex * 10 + (rowIndex * 3 + permIndex);
-                          return (
-                            <div
-                              className="d-flex align-items-center me-4"
-                              key={perm.id}
-                              style={{ minWidth: "200px" }}
-                            >
-                              <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}
-                                  value={perm.id}
-                                  {...register("selectedPermissions")}
-                                />
-                                {perm.name}
-                              </label>
+              <div className="col-12">
+                <div className="row">
+                  {feature.featurePermissions.map((perm, permIndex) => {
+                    const refIndex = featureIndex * 100 + permIndex;
+                    return (
+                      <div
+                        className="col-12 col-sm-6 col-md-4 mb-3"
+                        key={perm.id}
+                      >
+                        <div 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}
+                              value={perm.id}
+                              {...register("selectedPermissions")}
+                            />
+                            {perm.name}
+                          </label>
 
-                              {/* Info icon */}
-                              <div className="ms-1 d-flex align-items-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>
+                          {/* Info icon */}
+                          <div className="ms-1 d-flex align-items-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>
+                        </div>
+                      </div>
+                    );
+                  })}
                 </div>
               </div>
             </div>
@@ -234,6 +226,7 @@ const CreateRole = ({ modalType, onClose }) => {
         {!masterFeatures && <p>Loading...</p>}
       </div>
 
+
       {masterFeatures && (
         <div className="col-12 text-center">
           <button type="submit" className="btn btn-sm btn-primary me-3">
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 7548a55a..9e377048 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -9,13 +9,6 @@ import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import { useUpdateApplicationRole } from "../../hooks/masterHook/useMaster";
 
-
-
-
-
-
-
-
 const updateSchema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
@@ -25,8 +18,6 @@ const updateSchema = z.object({
   }),
 });
 
-
-
 const EditMaster = ({ master, onClose }) => {
   const maxDescriptionLength = 255;
   const popoverRefs = useRef([]);
@@ -202,11 +193,12 @@ const EditMaster = ({ master, onClose }) => {
      <div className="col-12 text-start">
   {/* Scrollable Container with Border */}
   <div
-    className="border rounded p-3" // ✅ border applied here
+    className="border rounded p-3"
     style={{
       maxHeight: "350px",
       overflowY: "auto",
-      paddingRight: "10px", // spacing for scrollbar
+      overflowX: "hidden", // Prevent horizontal scrollbar
+      paddingRight: "10px",
     }}
   >
     {masterFeatures.map((feature, featureIndex) => (
@@ -215,18 +207,14 @@ const EditMaster = ({ master, onClose }) => {
         <div className="fw-semibold mb-2">{feature.name}</div>
 
         {/* Permissions Grid */}
-        <div
-          className="permissions-grid"
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-            gap: "0.75rem 2rem",
-          }}
-        >
+        <div className="row">
           {feature.featurePermissions.map((perm, permIndex) => {
             const refIndex = featureIndex * 10 + permIndex;
             return (
-              <div key={perm.id} className="d-flex align-items-start">
+              <div
+                key={perm.id}
+                className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start"
+              >
                 <label
                   className="form-check-label d-flex align-items-center"
                   htmlFor={perm.id}
@@ -286,6 +274,7 @@ const EditMaster = ({ master, onClose }) => {
 
 
 
+
       <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3"> {isLoading ? "Please Wait..." : "Submit"}</button>
         <button