diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 9f314612..707993db 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -141,77 +141,93 @@ const CreateRole = ({ modalType, onClose }) => {
         )}
       </div>
 
-      <div className="col-12 col-md-12  border">
+      <div className="col-12 border px-3"
+        style={{
+          maxHeight: "350px", // Adjust this as needed
+          overflowY: "auto",
+          overflowX: "hidden",
+        }}>
         {masterFeatures.map((feature, featureIndex) => (
           <React.Fragment key={feature.id}>
-            <div
-              className="row my-1"
-              key={feature.id}
-              style={{ marginLeft: "0px" }}
-            >
-              <div
-                className="col-12 col-md-3 d-flex text-start align-items-start"
-                style={{ wordWrap: "break-word" }}
-              >
-                <span className="fs">{feature.name}</span>
+            <div className="row my-1">
+              {/* Feature Title */}
+              <div className="col-12 text-start fw-semibold mb-2">
+                {feature.name}
               </div>
 
-              <div className="col-12 col-md-1"></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 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
-                {feature.featurePermissions.map((perm, permIndex) => {
-                  const refIndex = featureIndex * 10 + permIndex;
-                  return (
-                    <div className="d-flex me-3 mb-2" key={perm.id}>
-                      <label className="form-check-label" htmlFor={perm.id}>
-                        <input
-                          type="checkbox"
-                          className="form-check-input mx-2"
-                          id={perm.id}
-                          value={perm.id}
-                          {...register("selectedPermissions")}
-                        />
-                        {perm.name}
-                      </label>
-                      <div style={{ display: "flex", alignItems: "center" }}>
-                        <div
-                          key={refIndex}
-                          ref={(el) => (popoverRefs.current[refIndex] = el)}
-                          tabIndex="0"
-                          className="d-flex align-items-center avatar-group justify-content-center"
-                          data-bs-toggle="popover"
-                          refIndex
-                          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>
-            <hr className="hr my-1 py-1" />
+
+            <hr className="my-2" />
           </React.Fragment>
         ))}
+
         {errors.selectedPermissions && (
           <p className="text-danger">{errors.selectedPermissions.message}</p>
         )}
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 91891b90..335ef092 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -7,7 +7,7 @@ import { useFeatures } from "../../hooks/useMasterRole";
 import { MasterRespository } from "../../repositories/MastersRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
-import {useUpdateApplicationRole} from "../../hooks/masterHook/useMaster";
+import { useUpdateApplicationRole } from "../../hooks/masterHook/useMaster";
 
 
 
@@ -28,144 +28,144 @@ const updateSchema = z.object({
 
 
 const EditMaster = ({ master, onClose }) => {
-const maxDescriptionLength = 255;
-const popoverRefs = useRef([]);
-const { masterFeatures } = useFeatures();
-const { mutate: updateApplicationRole, isPending: isLoading } = useUpdateApplicationRole(() => onClose?.());
+  const maxDescriptionLength = 255;
+  const popoverRefs = useRef([]);
+  const { masterFeatures } = useFeatures();
+  const { mutate: updateApplicationRole, isPending: isLoading } = useUpdateApplicationRole(() => onClose?.());
 
-const buildDefaultPermissions = () => {
-  const defaults = {};
-  masterFeatures.forEach((feature) => {
-    feature.featurePermissions.forEach((perm) => {
-      const existing = master?.item?.featurePermission?.find(p => p.id === perm.id);
-      defaults[perm.id] = existing?.isEnabled || false;
+  const buildDefaultPermissions = () => {
+    const defaults = {};
+    masterFeatures.forEach((feature) => {
+      feature.featurePermissions.forEach((perm) => {
+        const existing = master?.item?.featurePermission?.find(p => p.id === perm.id);
+        defaults[perm.id] = existing?.isEnabled || false;
+      });
     });
-  });
-  return defaults;
-};
-
-const initialPermissions = buildDefaultPermissions();
-
-const {
-  register,
-  handleSubmit,
-  formState: { errors, dirtyFields },
-  setError,
-  reset,
-} = useForm({
-  resolver: zodResolver(updateSchema),
-  defaultValues: {
-    role: master?.item?.role || "",
-    description: master?.item?.description || "",
-    permissions: initialPermissions,
-  },
-});
-
-const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
-
-const onSubmit = (data) => {
-  const existingIds = new Set(master?.item?.featurePermission?.map(p => p.id));
-
-  const updatedPermissions = Object.entries(data.permissions)
-    .filter(([id, value]) => {
-      return existingIds.has(id) || value === true || (dirtyFields.permissions?.[id]);
-    })
-    .map(([id, value]) => ({ id, isEnabled: value }));
-
-  if (updatedPermissions.length === 0) {
-    setError("permissions", {
-      type: "manual",
-      message: "At least one permission must be selected.",
-    });
-    return;
-  }
-
-  const payload = {
-    id: master?.item?.id,
-    role: data.role,
-    description: data.description,
-    featuresPermission: updatedPermissions,
+    return defaults;
   };
 
-   updateApplicationRole({ id: payload.id, payload });
-};
-// const onSubmit = (data) => {
-//     setIsLoading(true)
-//     const existingIds = new Set(
-//       master?.item?.featurePermission?.map((p) => p.id)
-//     );
+  const initialPermissions = buildDefaultPermissions();
 
-
-//     const updatedPermissions = Object.entries(data.permissions)
-//       .filter(([id, value]) => {
-//         if (existingIds.has(id)) return true;
-
-//         return (
-//           value === true ||
-//           (dirtyFields.permissions && dirtyFields.permissions[id])
-//         );
-//       })
-//       .map(([id, value]) => ({ id, isEnabled: value }));
-
-
-//     if (updatedPermissions.length === 0) {
-//       setError("permissions", {
-//         type: "manual",
-//         message: "At least one permission must be selected.",
-//       });
-//       return;
-//     }
-
-//     const updatedRole = {
-//       id: master?.item?.id,
-//       role: data.role,
-//       description: data.description,
-//       featuresPermission: updatedPermissions,
-//     };
-//     MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
-//       setIsLoading(false)
-
-
-//       const cachedData = getCachedData("Application Role");
-
-//       if (cachedData) {
-
-//         const updatedData = cachedData.map((role) =>
-//           role.id === resp.data?.id ? { ...role, ...resp.data } : role
-//         );
-
-//         cacheData("Application Role", updatedData);
-//       }
-//       showToast("Application Role Updated successfully.", "success");
-//       setIsLoading(false)
-//       onClose()
-//     }).catch((Err) => {
-//       showToast(Err.message, "error");
-//       setIsLoading(false)
-//     })
-
-//   };
-useEffect(() => {
-  reset({
-    role: master?.item?.role || "",
-    description: master?.item?.description || "",
-    permissions: buildDefaultPermissions(),
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, dirtyFields },
+    setError,
+    reset,
+  } = useForm({
+    resolver: zodResolver(updateSchema),
+    defaultValues: {
+      role: master?.item?.role || "",
+      description: master?.item?.description || "",
+      permissions: initialPermissions,
+    },
   });
-  setDescriptionLength(master?.item?.description?.length || 0);
-}, [master, reset]);
 
-useEffect(() => {
-  popoverRefs.current.forEach((el) => {
-    if (el) {
-      new bootstrap.Popover(el, {
-        trigger: "focus",
-        placement: "right",
-        html: true,
-        content: el.getAttribute("data-bs-content"),
+  const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
+
+  const onSubmit = (data) => {
+    const existingIds = new Set(master?.item?.featurePermission?.map(p => p.id));
+
+    const updatedPermissions = Object.entries(data.permissions)
+      .filter(([id, value]) => {
+        return existingIds.has(id) || value === true || (dirtyFields.permissions?.[id]);
+      })
+      .map(([id, value]) => ({ id, isEnabled: value }));
+
+    if (updatedPermissions.length === 0) {
+      setError("permissions", {
+        type: "manual",
+        message: "At least one permission must be selected.",
       });
+      return;
     }
-  });
-}, [masterFeatures]);
+
+    const payload = {
+      id: master?.item?.id,
+      role: data.role,
+      description: data.description,
+      featuresPermission: updatedPermissions,
+    };
+
+    updateApplicationRole({ id: payload.id, payload });
+  };
+  // const onSubmit = (data) => {
+  //     setIsLoading(true)
+  //     const existingIds = new Set(
+  //       master?.item?.featurePermission?.map((p) => p.id)
+  //     );
+
+
+  //     const updatedPermissions = Object.entries(data.permissions)
+  //       .filter(([id, value]) => {
+  //         if (existingIds.has(id)) return true;
+
+  //         return (
+  //           value === true ||
+  //           (dirtyFields.permissions && dirtyFields.permissions[id])
+  //         );
+  //       })
+  //       .map(([id, value]) => ({ id, isEnabled: value }));
+
+
+  //     if (updatedPermissions.length === 0) {
+  //       setError("permissions", {
+  //         type: "manual",
+  //         message: "At least one permission must be selected.",
+  //       });
+  //       return;
+  //     }
+
+  //     const updatedRole = {
+  //       id: master?.item?.id,
+  //       role: data.role,
+  //       description: data.description,
+  //       featuresPermission: updatedPermissions,
+  //     };
+  //     MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
+  //       setIsLoading(false)
+
+
+  //       const cachedData = getCachedData("Application Role");
+
+  //       if (cachedData) {
+
+  //         const updatedData = cachedData.map((role) =>
+  //           role.id === resp.data?.id ? { ...role, ...resp.data } : role
+  //         );
+
+  //         cacheData("Application Role", updatedData);
+  //       }
+  //       showToast("Application Role Updated successfully.", "success");
+  //       setIsLoading(false)
+  //       onClose()
+  //     }).catch((Err) => {
+  //       showToast(Err.message, "error");
+  //       setIsLoading(false)
+  //     })
+
+  //   };
+  useEffect(() => {
+    reset({
+      role: master?.item?.role || "",
+      description: master?.item?.description || "",
+      permissions: buildDefaultPermissions(),
+    });
+    setDescriptionLength(master?.item?.description?.length || 0);
+  }, [master, reset]);
+
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"),
+        });
+      }
+    });
+  }, [masterFeatures]);
 
 
   return (
@@ -199,77 +199,91 @@ useEffect(() => {
         )}
       </div>
 
-      <div className="col-12 col-md-12 mx-2s" >
+      <div className="col-12 text-start">
+        {/* Scrollable Container */}
+        <div
+          style={{
+            maxHeight: "350px", // adjust as needed
+            overflowY: "auto",
+            paddingRight: "10px", // for better scrollbar spacing
+          }}
+        >
+          {masterFeatures.map((feature, featureIndex) => (
+            <div key={feature.id} className="mb-3">
+              {/* Feature Group Title */}
+              <div className="fw-semibold mb-2">{feature.name}</div>
 
-        {masterFeatures.map((feature, featureIndex) => (
-          <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
-
-            <div className="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
-              <span className="fs">{feature.name}</span>
-            </div>
-            <div className="col-12 col-md-1">
-
-            </div>
-            <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap ">
-              {feature.featurePermissions.map((perm, permIndex) => {
-                const refIndex = (featureIndex * 10) + permIndex;
-                return (
-
-                  <div className="d-flex me-3 mb-2" key={perm.id}>
-
-                    <label className="form-check-label" htmlFor={perm.id}>
-                      <input
-                        type="checkbox"
-                        className="form-check-input mx-2"
-                        id={perm.id}
-                        {...register(`permissions.${perm.id}`, {
-                          value: initialPermissions[perm.id] || false
-                        })}
-                      />
-
-                      {perm.name}
-                    </label>
-
-
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                      <div
-                        key={refIndex}
-                        ref={(el) =>
-                          (popoverRefs.current[refIndex] = el)
-                        }
-                        tabIndex="0"
-                        className="d-flex align-items-center avatar-group justify-content-center"
-                        data-bs-toggle="popover" refIndex
-                        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>
-                                    `}
+              {/* 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}
                       >
-                        &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>
+                        <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>
-                  </div>
-                )
-              })}
-
+                  );
+                })}
+              </div>
 
+              <hr className="my-2" />
             </div>
-            <hr className="hr my-1 py-1" />
-          </div>
-        ))}
+          ))}
+        </div>
+
+        {/* Error Display */}
         {errors.permissions && (
           <p className="text-danger">{errors.permissions.message}</p>
         )}
       </div>
 
+
       <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3"> {isLoading ? "Please Wait..." : "Submit"}</button>
         <button