diff --git a/src/components/Project/AboutProject.jsx b/src/components/Project/AboutProject.jsx
index 5fd36f70..83366790 100644
--- a/src/components/Project/AboutProject.jsx
+++ b/src/components/Project/AboutProject.jsx
@@ -51,14 +51,14 @@ const AboutProject = () => {
         <>
           <div className="card mb-6">
             <div className="card-header text-start">
-              <h6 className="card-action-title mb-0">
+              <h6 className="card-action-title mb-0 ps-1">
                 {" "}
                 <i className="fa fa-building rounded-circle text-primary"></i>
                 <span className="ms-2">Project Profile</span>
               </h6>
             </div>
             <div className="card-body">
-              <ul className="list-unstyled my-3 ps-2">
+              <ul className="list-unstyled my-3 ps-0">
                 <li className="d-flex mb-3">
                   <div className="d-flex align-items-center" style={{ width: '120px' }}> {/* Adjust width as needed for alignment */}
                     <i className="bx bx-cog"></i>
diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 9f314612..14ca6c15 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -141,83 +141,92 @@ const CreateRole = ({ modalType, onClose }) => {
         )}
       </div>
 
-      <div className="col-12 col-md-12  border">
+      <div
+        className="border rounded px-3"
+        style={{
+          maxHeight: "350px",
+          overflowY: "auto",
+          overflowX: "hidden", // Prevent bottom scrollbar
+        }}
+      >
         {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>
-
-              <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"
+              {/* Permissions Grid */}
+              <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}
                           >
-                            <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}
+                              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>
                         </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>
         )}
         {!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 91891b90..9e377048 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -7,14 +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";
 
 const updateSchema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
@@ -25,147 +18,145 @@ 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,76 +190,90 @@ useEffect(() => {
         )}
       </div>
 
-      <div className="col-12 col-md-12 mx-2s" >
+     <div className="col-12 text-start">
+  {/* Scrollable Container with Border */}
+  <div
+    className="border rounded p-3"
+    style={{
+      maxHeight: "350px",
+      overflowY: "auto",
+      overflowX: "hidden", // Prevent horizontal scrollbar
+      paddingRight: "10px",
+    }}
+  >
+    {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" }}>
+        {/* Permissions Grid */}
+        <div className="row">
+          {feature.featurePermissions.map((perm, permIndex) => {
+            const refIndex = featureIndex * 10 + permIndex;
+            return (
+              <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}
+                >
+                  <input
+                    type="checkbox"
+                    className="form-check-input me-2"
+                    id={perm.id}
+                    {...register(`permissions.${perm.id}`, {
+                      value: initialPermissions[perm.id] || false,
+                    })}
+                  />
+                  {perm.name}
+                </label>
 
-            <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>
-                                    `}
-                      >
-                        &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 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="hr my-1 py-1" />
-          </div>
-        ))}
-        {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">
         <button type="submit" className="btn btn-sm btn-primary me-3"> {isLoading ? "Please Wait..." : "Submit"}</button>