diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index ae9ce302..0648cac1 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useFeatures } from "../../hooks/useMasterRole";
 
 import { useForm } from 'react-hook-form';
@@ -16,7 +16,7 @@ import showToast from "../../services/toastService";
 const schema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 
   selectedPermissions: z
     .array(z.string())
@@ -24,78 +24,91 @@ const schema = z.object({
 });
 
 
-const CreateRole = ({modalType,onClose}) => {
- 
- const[isLoading,setIsLoading] = useState(false)
 
- const {masterFeatures} = useFeatures()
 
- const {
-  register,
-  handleSubmit,
-  formState: { errors },
-  
-} = useForm({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    role: "",
-    description: "",
-    selectedPermissions: [],
-  },
-});
+const CreateRole = ({ modalType, onClose }) => {
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const popoverRefs = useRef([]);
+  const { masterFeatures } = useFeatures()
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      role: "",
+      description: "",
+      selectedPermissions: [],
+    },
+  });
+
+  const onSubmit = (values) => {
+    setIsLoading(true)
+    const result = {
+
+      role: values.role,
+      description: values.description,
+      featuresPermission: values.selectedPermissions.map((id) => ({
+        id,
+        isEnabled: true,
+      })),
+    };
+
+    MasterRespository.createRole(result).then((resp) => {
+      setIsLoading(false)
+      const cachedData = getCachedData("Application Role");
+      const updatedData = [...cachedData, resp.data];
+      cacheData("Application Role", updatedData);
+      showToast("Application Role Added successfully.", "success");
+      onClose()
+    }).catch((err) => {
+
+      showToast(err?.response?.data?.message, "error");
+      setIsLoading(false)
+      onClose()
+    })
+
 
-const onSubmit = (values) => {
-  setIsLoading(true)
-  const result = {
-    
-    role: values.role,
-    description: values.description,
-    featuresPermission: values.selectedPermissions.map((id) => ({
-      id,
-      isEnabled: true,
-    })),
   };
+  const [descriptionLength, setDescriptionLength] = useState(0);
+  const maxDescriptionLength = 255;
+  useEffect(() => {
+    setDescriptionLength(0);
+  }, []);
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
-  MasterRespository.createRole(result).then((resp)=>{
-    setIsLoading(false)
-    const cachedData = getCachedData( "Application Role" ); 
-    const updatedData = [...cachedData, resp.data]; 
-    cacheData("Application Role", updatedData); 
-    showToast( "Application Role Added successfully.", "success" );  
-    onClose()
-  } ).catch( ( err ) =>
-  {
-   
-    showToast(err?.response?.data?.message, "error");
-    setIsLoading( false )
-    onClose()
-  })
- 
- 
-};
-const [descriptionLength, setDescriptionLength] = useState(0);
-const maxDescriptionLength = 255;
-useEffect(() => {
-  setDescriptionLength(0);  
-}, []);
-
- 
   return (
-  
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      
-        <div className="col-12 col-md-12">
-          <label className="form-label">Role</label>
-          <input type="text" 
-           {...register("role")} 
-             className={`form-control ${errors.role ? 'is-invalids' : ''}`}
-          />
-          {errors.role && <p className="text-danger">{errors.role.message}</p>}
-        </div>
 
-        
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+
+      <div className="col-12 col-md-12">
+        <label className="form-label">Role</label>
+        <input type="text"
+          {...register("role")}
+          className={`form-control ${errors.role ? 'is-invalids' : ''}`}
+        />
+        {errors.role && <p className="text-danger">{errors.role.message}</p>}
+      </div>
+
+
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -110,75 +123,106 @@ useEffect(() => {
           {maxDescriptionLength - descriptionLength} characters left
         </div>
 
-          {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
-          )}
-        </div>
-
-       
-        <div className="col-12 col-md-12  border">
-
-          
-  {masterFeatures.map((feature) => (
-    <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>
+        {errors.description && (
+          <p className="text-danger">{errors.description.message}</p>
+        )}
       </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) => (
-          <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>
+
+      <div className="col-12 col-md-12  border">
+
+
+        {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>
+
+              <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">
+                            <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" />
+          </React.Fragment>
+
         ))}
+        {errors.selectedPermissions && (
+          <p className="text-danger">{errors.selectedPermissions.message}</p>
+        )}
+        {!masterFeatures && <p>Loading...</p>}
       </div>
-      
-    </div>
-    <hr className="hr my-1 py-1" />
-    </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">           
-         {isLoading? "Please Wait...":"Submit"}       
-        </button>
-        <button
-          type="reset"
-          className="btn btn-sm btn-label-secondary"
-          data-bs-dismiss="modal"
-          aria-label="Close"
-        >
-          Cancel
-        </button>
-      </div>
-      )
-   }
- 
+      {
+        masterFeatures && (
+
+          <div className="col-12 text-center">
+            <button type="submit" className="btn btn-sm btn-primary me-3">
+              {isLoading ? "Please Wait..." : "Submit"}
+            </button>
+            <button
+              type="reset"
+              className="btn btn-sm btn-label-secondary"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            >
+              Cancel
+            </button>
+          </div>
+        )
+      }
+
     </form>
   );
 };
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 4cb658e4..4cf31418 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
-import { useForm ,Controller} from 'react-hook-form';
+import React, { useEffect, useState, useRef } from "react";
+import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import {  useFeatures} from "../../hooks/useMasterRole";
+import { useFeatures } from "../../hooks/useMasterRole";
 import { MasterRespository } from "../../repositories/MastersRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
@@ -18,17 +18,18 @@ import showToast from "../../services/toastService";
 const updateSchema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
   permissions: z.record(z.boolean()).refine((permission) => Object.values(permission).includes(true), {
-    message: "At least one permission must be selected", 
+    message: "At least one permission must be selected",
   }),
 });
 
 
 
-const  EditMaster=({master,onClose})=> {
-  const [isLoading,setIsLoading] = useState(false)
-  const {masterFeatures} = useFeatures()
+const EditMaster = ({ master, onClose }) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { masterFeatures } = useFeatures()
+  const popoverRefs = useRef([]);
 
   const buildDefaultPermissions = () => {
     const defaults = {};
@@ -41,20 +42,16 @@ const  EditMaster=({master,onClose})=> {
       });
     });
     return defaults;
-    
+
   };
 
 
   const initialPermissions = buildDefaultPermissions();
- 
-  
-
-  
   const {
     register,
     handleSubmit,
     formState: { errors, dirtyFields },
-    setError,reset
+    setError, reset
   } = useForm({
     resolver: zodResolver(updateSchema),
     defaultValues: {
@@ -65,16 +62,16 @@ const  EditMaster=({master,onClose})=> {
   });
 
   const onSubmit = (data) => {
-     setIsLoading(true)
+    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])
@@ -82,7 +79,7 @@ const  EditMaster=({master,onClose})=> {
       })
       .map(([id, value]) => ({ id, isEnabled: value }));
 
-    
+
     if (updatedPermissions.length === 0) {
       setError("permissions", {
         type: "manual",
@@ -92,30 +89,30 @@ const  EditMaster=({master,onClose})=> {
     }
 
     const updatedRole = {
-      id:master?.item?.id,
+      id: master?.item?.id,
       role: data.role,
       description: data.description,
       featuresPermission: updatedPermissions,
     };
-    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp)=>{ 
-      setIsLoading( false )
-      
+    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" );
+
+      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" );
+    }).catch((Err) => {
+      showToast(Err.message, "error");
       setIsLoading(false)
     })
 
@@ -129,26 +126,38 @@ const  EditMaster=({master,onClose})=> {
     });
     setDescriptionLength(master?.item?.description?.length || 0);
   }, [master, reset]);
-  
+
   const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
   const maxDescriptionLength = 255;
 
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
   return (
-  
-      <form  className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
-      
-        <div className="col-12 col-md-12">
-          <label className="form-label">Role</label>
-          <input type="text" 
-           {...register("role")} 
-             className={`form-control ${errors.role ? 'is-invalid' : ''}`}
-          />
-          {errors.role && <p className="text-danger">{errors.role.message}</p>}
-        </div>
-        
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+
+    <form className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
+
+      <div className="col-12 col-md-12">
+        <label className="form-label">Role</label>
+        <input type="text"
+          {...register("role")}
+          className={`form-control ${errors.role ? 'is-invalid' : ''}`}
+        />
+        {errors.role && <p className="text-danger">{errors.role.message}</p>}
+      </div>
+
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -164,47 +173,81 @@ const  EditMaster=({master,onClose})=> {
         {errors.description && (
           <p className="text-danger">{errors.description.message}</p>
         )}
-        </div>  
+      </div>
+
+      <div className="col-12 col-md-12 mx-2s " >
+
+        {masterFeatures.map((feature, featureIndex) => (
+          <div className="row my-3" key={feature.id} style={{ marginLeft: "0px" }}>
 
-        <div className="col-12 col-md-12 mx-2s " >
-         
-          {masterFeatures.map((feature) => (
-             <div className="row my-3" 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) => (
+              <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 
-                      })}
-                    />
-                   
+
+                    <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>
-                ))}
-              </div>
-            </div>
-          ))}
-          {errors.permissions && (
-            <p className="text-danger">{errors.permissions.message}</p>
-          )}
-        </div>
 
-        <div className="col-12 text-center">
+
+                    <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>
+                  </div>
+                )
+              })}
+
+
+            </div>
+          </div>
+        ))}
+        {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
+        <button
           type="reset"
           className="btn btn-sm btn-label-secondary"
           data-bs-dismiss="modal"
@@ -213,9 +256,9 @@ const  EditMaster=({master,onClose})=> {
           Cancel
         </button>
       </div>
-      
-      </form>
-   
+
+    </form>
+
   );
 }
 
diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx
index de875411..cd1f0ced 100644
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@@ -16,7 +16,7 @@ export const VIEW_PROJECT_INFRA = "c7b68e33-72f0-474f-bd96-77636427ecc8"
 export const REGULARIZE_ATTENDANCE ="57802c4a-00aa-4a1f-a048-fd2f70dd44b6"
 
 
-export const ASSIGN_TO_PROJECT = "fbd213e0-0250-46f1-9f5f-4b2a1e6e76a3";
+export const ASSIGN_TO_PROJECT = "b94802ce-0689-4643-9e1d-11c86950c35b";
 
 export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
 
@@ -24,4 +24,4 @@ export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
 
 export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
 
-export const ASSIGN_REPORT_TASK = "d135a4b0-4f9a-4903-ab9c-4843839ebdee"
\ No newline at end of file
+export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"
\ No newline at end of file