diff --git a/src/components/Directory/ManageContact.jsx b/src/components/Directory/ManageContact.jsx
index 54f0d905..b2cd721c 100644
--- a/src/components/Directory/ManageContact.jsx
+++ b/src/components/Directory/ManageContact.jsx
@@ -21,6 +21,7 @@ import InputSuggestions from "../common/InputSuggestion";
 import Label from "../common/Label";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
+import { BUCKET_BG_CLASSES } from "../../utils/constants";
 
 const ManageContact = ({ contactId, closeModal }) => {
   // fetch master data
@@ -180,6 +181,7 @@ const ManageContact = ({ contactId, closeModal }) => {
   };
 
   const isPending = updating || creating;
+
   return (
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
@@ -467,13 +469,14 @@ const ManageContact = ({ contactId, closeModal }) => {
             >
               {bucketsLoaging && <p>Loading...</p>}
 
-              {buckets?.map((item) => (
+              {buckets?.map((item, index) => (
                 <div
                   key={item.id}
-                  className="card p-3 shadow-sm flex-shrink-0"                 
+                  className={`card p-2 shadow-sm flex-shrink-0 ${BUCKET_BG_CLASSES  [index % BUCKET_BG_CLASSES.length]}`}
                   onClick={() => handleCheckboxChange(item.id)}
                 >
-                  <div className="form-check">
+
+                  <div className="form-check m-0">
                     <input
                       type="checkbox"
                       className="form-check-input"
@@ -481,14 +484,17 @@ const ManageContact = ({ contactId, closeModal }) => {
                       checked={watchBucketIds.includes(item.id)}
                       onChange={() => handleCheckboxChange(item.id)}
                     />
-                    <label className="form-check-label ms-2" htmlFor={`item-${item.id}`}>
+                    <label className="form-check-label ms-0" htmlFor={`item-${item.id}`}>
                       {item.name}
                     </label>
                   </div>
                 </div>
               ))}
+
             </div>
 
+          </div>
+          <div className="text-start mt-3 mb-3">
             {errors.bucketIds && (
               <small className="danger-text">{errors.bucketIds.message}</small>
             )}
diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx
index fa766551..ed5d4fdf 100644
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@@ -258,3 +258,16 @@ export const JOBS_STATUS_IDS = [
     label: "On Hold",
   },
 ];
+
+export const BUCKET_BG_CLASSES = [
+  "bg-label-primary bg-opacity-10",
+  "bg-label-secondary bg-opacity-10",
+  "bg-label-success bg-opacity-10",
+  "bg-label-info bg-opacity-10",
+  "bg-label-warning bg-opacity-10",
+  "bg-label-danger bg-opacity-10",
+  "bg-label-dark bg-opacity-10",
+  "bg-label-primary bg-opacity-25",
+  "bg-label-success bg-opacity-25",
+  "bg-label-info bg-opacity-25",
+];