At Create New Contact, in Select Bucket.

src/components/Directory/ManageContact.jsx

@@ -456,13 +456,22 @@ const ManageContact = ({ contactId, closeModal }) => {
         {/* Buckets */}
         <div className="row">
           <div className="col-md-12 mt-3 text-start">
-            <label className="form-label mb-2">Select Bucket</label>
-            <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
+            <Label className="form-label mb-2" required>Select Bucket</Label>
+
+            <div
+              className="d-flex flex-wrap gap-3 p-1"
+              style={{
+                maxHeight: "200px",
+                overflowY: "auto",
+              }}
+            >
               {bucketsLoaging && <p>Loading...</p>}
+
               {buckets?.map((item) => (
-                <li
+                <div
                   key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-1"
+                  className="card p-3 shadow-sm flex-shrink-0"                 
+                  onClick={() => handleCheckboxChange(item.id)}
                 >
                   <div className="form-check">
                     <input
@@ -472,22 +481,21 @@ const ManageContact = ({ contactId, closeModal }) => {
                       checked={watchBucketIds.includes(item.id)}
                       onChange={() => handleCheckboxChange(item.id)}
                     />
-                    <label
-                      className="form-check-label"
-                      htmlFor={`item-${item.id}`}
-                    >
+                    <label className="form-check-label ms-2" htmlFor={`item-${item.id}`}>
                       {item.name}
                     </label>
                   </div>
-                </li>
+                </div>
               ))}
-            </ul>
+            </div>
+
             {errors.bucketIds && (
               <small className="danger-text">{errors.bucketIds.message}</small>
             )}
           </div>
         </div>
 
+
         {/* Address + Description */}
         <div className="col-12 text-start">
           <label className="form-label">Address</label>