diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css
index 562bb313..86b2a020 100644
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
@@ -1,20 +1,25 @@
 :root,
 [data-bs-theme="light"] {
   --bs-nav-link-font-size: 0.7375rem;
-  --bg-border-color: #f8f6f6;
+  --bg-border-color: #f8f6f6
 }
+
 .offcanvas.offcanvas-wide {
-  width: 700px !important; /* adjust as needed */
+  width: 700px !important;
+  /* adjust as needed */
 }
+
 .sticky-section {
   position: sticky;
   top: var(--sticky-top, 0px) !important;
   z-index: 1025;
 }
+
 .form-control-md {
   min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
-  padding: 0.18rem 0.6rem;
-  font-size: 0.875rem; /* ~14px */
+  padding: 0.18rem 0.60rem;
+  font-size: 0.875rem;
+  /* ~14px */
   border-radius: var(--bs-border-radius);
 }
 
@@ -27,14 +32,17 @@
 /* ===========================% Background_Colors %========================================================== */
 .bg-light-primary {
   background-color: color-mix(in srgb, var(--bs-primary) 10.4%, transparent);
-  border: var(--bs-primary-border-subtle);
+  border: var(--bs-primary-border-subtle)
 }
+
 .bg-light-secondary {
   background-color: color-mix(in srgb, var(--bs-secondary) 10.4%, transparent);
 }
+
 .bg-light-danger {
   background-color: color-mix(in srgb, var(--bs-danger) 10.4%, transparent);
 }
+
 .bg-light-success {
   background-color: color-mix(in srgb, var(--bs-success) 10.4%, transparent);
 }
@@ -42,6 +50,7 @@
 .bg-light-info {
   background-color: color-mix(in srgb, var(--bs-info) 10.4%, transparent);
 }
+
 .bg-light-warning {
   background-color: color-mix(in srgb, var(--bs-warning) 10.4%, transparent);
 }
@@ -49,11 +58,13 @@
 .card-header {
   padding: 0.5rem var(--bs-card-cap-padding-x);
 }
+
 .table_header_border {
   border-bottom: 2px solid var(--bs-table-border-color);
 }
+
 .text-gary-80 {
-  color: var(--bs-gray-500);
+  color: var(--bs-gray-500)
 }
 
 .text-royalblue {
@@ -67,6 +78,7 @@
 .text-md-b {
   font-weight: normal;
 }
+
 .stepper-container {
   position: relative;
 }
@@ -130,7 +142,7 @@
 }
 
 /* Make line green for completed sections */
-.timeline-item.completed ~ .timeline-line-horizontal {
+.timeline-item.completed~.timeline-line-horizontal {
   background-color: var(--bs-success);
 }
 
@@ -151,203 +163,318 @@
     transform: scale(1);
     opacity: 0.6;
   }
+
   70% {
     transform: scale(1.5);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 0;
   }
 }
 
+
+
 .text-xxs {
   font-size: 0.55rem;
-} /* 8px */
+}
+
+/* 8px */
 .text-xs {
   font-size: 0.75rem;
-} /* 12px */
+}
+
+/* 12px */
 .text-sm {
   font-size: 0.875rem;
-} /* 14px */
+}
+
+/* 14px */
 .text-base {
   font-size: 1rem;
-} /* 16px */
+}
+
+/* 16px */
 .text-lg {
   font-size: 1.125rem;
-} /* 18px */
+}
+
+/* 18px */
 .text-xl {
   font-size: 1.25rem;
-} /* 20px */
+}
+
+/* 20px */
 .text-2xl {
   font-size: 1.5rem;
-} /* 24px */
+}
+
+/* 24px */
 .text-3xl {
   font-size: 1.875rem;
-} /* 30px */
+}
+
+/* 30px */
 .text-4xl {
   font-size: 2.25rem;
-} /* 36px */
+}
+
+/* 36px */
 .text-5xl {
   font-size: 3rem;
-} /* 48px */
+}
+
+/* 48px */
 .text-6xl {
   font-size: 3.75rem;
-} /* 60px */
+}
+
+/* 60px */
 .text-7xl {
   font-size: 4.5rem;
-} /* 72px */
+}
+
+/* 72px */
 .text-8xl {
   font-size: 6rem;
-} /* 96px */
+}
+
+/* 96px */
 .text-9xl {
   font-size: 8rem;
-} /* 128px */
+}
+
+/* 128px */
+
 
 /*  */
 
 .w-0 {
   width: 0px;
 }
+
 .w-px {
   width: 1px;
 }
+
 .w-1 {
   width: 0.25rem;
-} /* 4px */
+}
+
+/* 4px */
 .w-2 {
   width: 0.5rem;
-} /* 8px */
+}
+
+/* 8px */
 .w-3 {
   width: 0.75rem;
-} /* 12px */
+}
+
+/* 12px */
 .w-4 {
   width: 1rem;
-} /* 16px */
+}
+
+/* 16px */
 .w-5 {
   width: 1.25rem;
-} /* 20px */
+}
+
+/* 20px */
 .w-6 {
   width: 1.5rem;
-} /* 24px */
+}
+
+/* 24px */
 .w-8 {
   width: 2rem;
-} /* 32px */
+}
+
+/* 32px */
 .w-10 {
   width: 2.5rem;
-} /* 40px */
+}
+
+/* 40px */
 .w-12 {
   width: 3rem;
-} /* 48px */
+}
+
+/* 48px */
 .w-16 {
   width: 4rem;
-} /* 64px */
+}
+
+/* 64px */
 .w-20 {
   width: 5rem;
-} /* 80px */
+}
+
+/* 80px */
 .w-24 {
   width: 6rem;
-} /* 96px */
+}
+
+/* 96px */
 .w-32 {
   width: 8rem;
-} /* 128px */
+}
+
+/* 128px */
 .w-40 {
   width: 10rem;
-} /* 160px */
+}
+
+/* 160px */
 .w-48 {
   width: 12rem;
-} /* 192px */
+}
+
+/* 192px */
 .w-56 {
   width: 14rem;
-} /* 224px */
+}
+
+/* 224px */
 .w-64 {
   width: 16rem;
-} /* 256px */
+}
+
+/* 256px */
 .w-auto {
   width: auto;
 }
+
 .w-full {
   width: 100%;
 }
+
 .w-screen {
   width: 100vw;
 }
+
 .w-min {
   width: min-content;
 }
+
 .w-max {
   width: max-content;
 }
 
+
+
 .h-0 {
   height: 0px;
 }
+
 .h-px {
   height: 1px;
 }
+
 .h-1 {
   height: 0.25rem;
-} /* 4px */
+}
+
+/* 4px */
 .h-2 {
   height: 0.5rem;
-} /* 8px */
+}
+
+/* 8px */
 .h-3 {
   height: 0.75rem;
-} /* 12px */
+}
+
+/* 12px */
 .h-4 {
   height: 1rem;
-} /* 16px */
+}
+
+/* 16px */
 .h-5 {
   height: 1.25rem;
-} /* 20px */
+}
+
+/* 20px */
 .h-6 {
   height: 1.5rem;
-} /* 24px */
+}
+
+/* 24px */
 .h-8 {
   height: 2rem;
-} /* 32px */
+}
+
+/* 32px */
 .h-10 {
   height: 2.5rem;
-} /* 40px */
+}
+
+/* 40px */
 .h-12 {
   height: 3rem;
-} /* 48px */
+}
+
+/* 48px */
 .h-16 {
   height: 4rem;
-} /* 64px */
+}
+
+/* 64px */
 .h-20 {
   height: 5rem;
-} /* 80px */
+}
+
+/* 80px */
 .h-24 {
   height: 6rem;
-} /* 96px */
+}
+
+/* 96px */
 .h-32 {
   height: 8rem;
-} /* 128px */
+}
+
+/* 128px */
 .h-40 {
   height: 10rem;
-} /* 160px */
+}
+
+/* 160px */
 .h-48 {
   height: 12rem;
-} /* 192px */
+}
+
+/* 192px */
 .h-56 {
   height: 14rem;
-} /* 224px */
+}
+
+/* 224px */
 .h-64 {
   height: 16rem;
-} /* 256px */
+}
+
+/* 256px */
 .h-auto {
   height: auto;
 }
+
 .h-full {
   height: 100%;
 }
+
 .h-screen {
   height: 100vh;
 }
+
 .h-min {
   height: min-content;
 }
+
 .h-max {
   height: max-content;
 }
@@ -361,46 +488,74 @@
    ========================== */
 .text-xxs {
   font-size: 0.55rem;
-} /* 8px */
+}
+
+/* 8px */
 .text-xs {
   font-size: 0.75rem;
-} /* 12px */
+}
+
+/* 12px */
 .text-sm {
   font-size: 0.875rem;
-} /* 14px */
+}
+
+/* 14px */
 .text-base {
   font-size: 1rem;
-} /* 16px */
+}
+
+/* 16px */
 .text-lg {
   font-size: 1.125rem;
-} /* 18px */
+}
+
+/* 18px */
 .text-xl {
   font-size: 1.25rem;
-} /* 20px */
+}
+
+/* 20px */
 .text-2xl {
   font-size: 1.5rem;
-} /* 24px */
+}
+
+/* 24px */
 .text-3xl {
   font-size: 1.875rem;
-} /* 30px */
+}
+
+/* 30px */
 .text-4xl {
   font-size: 2.25rem;
-} /* 36px */
+}
+
+/* 36px */
 .text-5xl {
   font-size: 3rem;
-} /* 48px */
+}
+
+/* 48px */
 .text-6xl {
   font-size: 3.75rem;
-} /* 60px */
+}
+
+/* 60px */
 .text-7xl {
   font-size: 4.5rem;
-} /* 72px */
+}
+
+/* 72px */
 .text-8xl {
   font-size: 6rem;
-} /* 96px */
+}
+
+/* 96px */
 .text-9xl {
   font-size: 8rem;
-} /* 128px */
+}
+
+/* 128px */
 
 /* ==========================
    Base Heights
@@ -408,66 +563,106 @@
 .h-0 {
   height: 0;
 }
+
 .h-px {
   height: 1px;
 }
+
 .h-1 {
   height: 0.25rem;
-} /* 4px */
+}
+
+/* 4px */
 .h-2 {
   height: 0.5rem;
-} /* 8px */
+}
+
+/* 8px */
 .h-3 {
   height: 0.75rem;
-} /* 12px */
+}
+
+/* 12px */
 .h-4 {
   height: 1rem;
-} /* 16px */
+}
+
+/* 16px */
 .h-5 {
   height: 1.25rem;
-} /* 20px */
+}
+
+/* 20px */
 .h-6 {
   height: 1.5rem;
-} /* 24px */
+}
+
+/* 24px */
 .h-8 {
   height: 2rem;
-} /* 32px */
+}
+
+/* 32px */
 .h-10 {
   height: 2.5rem;
-} /* 40px */
+}
+
+/* 40px */
 .h-12 {
   height: 3rem;
-} /* 48px */
+}
+
+/* 48px */
 .h-16 {
   height: 4rem;
-} /* 64px */
+}
+
+/* 64px */
 .h-20 {
   height: 5rem;
-} /* 80px */
+}
+
+/* 80px */
 .h-24 {
   height: 6rem;
-} /* 96px */
+}
+
+/* 96px */
 .h-32 {
   height: 8rem;
-} /* 128px */
+}
+
+/* 128px */
 .h-40 {
   height: 10rem;
-} /* 160px */
+}
+
+/* 160px */
 .h-48 {
   height: 12rem;
-} /* 192px */
+}
+
+/* 192px */
 .h-56 {
   height: 14rem;
-} /* 224px */
+}
+
+/* 224px */
 .h-64 {
   height: 16rem;
-} /* 256px */
+}
+
+/* 256px */
 .h-70 {
   height: 20rem;
-} /* 256px */
+}
+
+/* 256px */
 .h-74 {
   max-height: 35rem;
-} /* 256px */
+}
+
+/* 256px */
 .h-full {
   height: 100%;
 }
@@ -482,63 +677,83 @@
 .w-0 {
   width: 0;
 }
+
 .w-px {
   width: 1px;
 }
+
 .w-1 {
   width: 0.25rem;
 }
+
 .w-2 {
   width: 0.5rem;
 }
+
 .w-3 {
   width: 0.75rem;
 }
+
 .w-4 {
   width: 1rem;
 }
+
 .w-5 {
   width: 1.25rem;
 }
+
 .w-6 {
   width: 1.5rem;
 }
+
 .w-8 {
   width: 2rem;
 }
+
 .w-10 {
   width: 2.5rem;
 }
+
 .w-12 {
   width: 3rem;
 }
+
 .w-16 {
   width: 4rem;
 }
+
 .w-20 {
   width: 5rem;
 }
+
 .w-24 {
   width: 6rem;
 }
+
 .w-32 {
   width: 8rem;
 }
+
 .w-40 {
   width: 10rem;
 }
+
 .w-48 {
   width: 12rem;
 }
+
 .w-56 {
   width: 14rem;
 }
+
 .w-64 {
   width: 16rem;
 }
+
 .w-full {
   width: 100%;
 }
+
 .w-screen {
   width: 100vw;
 }
@@ -552,21 +767,27 @@
   .text-xxs-sm {
     font-size: 0.55rem;
   }
+
   .text-xs-sm {
     font-size: 0.75rem;
   }
+
   .text-sm-sm {
     font-size: 0.875rem;
   }
+
   .text-base-sm {
     font-size: 1rem;
   }
+
   .text-lg-sm {
     font-size: 1.125rem;
   }
+
   .text-xl-sm {
     font-size: 1.25rem;
   }
+
   .text-2xl-sm {
     font-size: 1.5rem;
   }
@@ -575,24 +796,31 @@
   .h-1-sm {
     height: 0.25rem;
   }
+
   .h-2-sm {
     height: 0.5rem;
   }
+
   .h-3-sm {
     height: 0.75rem;
   }
+
   .h-4-sm {
     height: 1rem;
   }
+
   .h-5-sm {
     height: 1.25rem;
   }
+
   .h-6-sm {
     height: 1.5rem;
   }
+
   .h-8-sm {
     height: 2rem;
   }
+
   .h-10-sm {
     height: 2.5rem;
   }
@@ -601,24 +829,31 @@
   .w-1-sm {
     width: 0.25rem;
   }
+
   .w-2-sm {
     width: 0.5rem;
   }
+
   .w-3-sm {
     width: 0.75rem;
   }
+
   .w-4-sm {
     width: 1rem;
   }
+
   .w-5-sm {
     width: 1.25rem;
   }
+
   .w-6-sm {
     width: 1.5rem;
   }
+
   .w-8-sm {
     width: 2rem;
   }
+
   .w-10-sm {
     width: 2.5rem;
   }
@@ -630,21 +865,27 @@
   .text-xxs-md {
     font-size: 0.55rem;
   }
+
   .text-xs-md {
     font-size: 0.75rem;
   }
+
   .text-sm-md {
     font-size: 0.875rem;
   }
+
   .text-base-md {
     font-size: 1rem;
   }
+
   .text-lg-md {
     font-size: 1.125rem;
   }
+
   .text-xl-md {
     font-size: 1.25rem;
   }
+
   .text-2xl-md {
     font-size: 1.5rem;
   }
@@ -653,24 +894,31 @@
   .h-1-md {
     height: 0.25rem;
   }
+
   .h-2-md {
     height: 0.5rem;
   }
+
   .h-3-md {
     height: 0.75rem;
   }
+
   .h-4-md {
     height: 1rem;
   }
+
   .h-5-md {
     height: 1.25rem;
   }
+
   .h-6-md {
     height: 1.5rem;
   }
+
   .h-8-md {
     height: 2rem;
   }
+
   .h-10-md {
     height: 2.5rem;
   }
@@ -679,24 +927,31 @@
   .w-1-md {
     width: 0.25rem;
   }
+
   .w-2-md {
     width: 0.5rem;
   }
+
   .w-3-md {
     width: 0.75rem;
   }
+
   .w-4-md {
     width: 1rem;
   }
+
   .w-5-md {
     width: 1.25rem;
   }
+
   .w-6-md {
     width: 1.5rem;
   }
+
   .w-8-md {
     width: 2rem;
   }
+
   .w-10-md {
     width: 2.5rem;
   }
@@ -708,21 +963,27 @@
   .text-xxs-lg {
     font-size: 0.55rem;
   }
+
   .text-xs-lg {
     font-size: 0.75rem;
   }
+
   .text-sm-lg {
     font-size: 0.875rem;
   }
+
   .text-base-lg {
     font-size: 1rem;
   }
+
   .text-lg-lg {
     font-size: 1.125rem;
   }
+
   .text-xl-lg {
     font-size: 1.25rem;
   }
+
   .text-2xl-lg {
     font-size: 1.5rem;
   }
@@ -731,24 +992,31 @@
   .h-1-lg {
     height: 0.25rem;
   }
+
   .h-2-lg {
     height: 0.5rem;
   }
+
   .h-3-lg {
     height: 0.75rem;
   }
+
   .h-4-lg {
     height: 1rem;
   }
+
   .h-5-lg {
     height: 1.25rem;
   }
+
   .h-6-lg {
     height: 1.5rem;
   }
+
   .h-8-lg {
     height: 2rem;
   }
+
   .h-10-lg {
     height: 2.5rem;
   }
@@ -757,24 +1025,31 @@
   .w-1-lg {
     width: 0.25rem;
   }
+
   .w-2-lg {
     width: 0.5rem;
   }
+
   .w-3-lg {
     width: 0.75rem;
   }
+
   .w-4-lg {
     width: 1rem;
   }
+
   .w-5-lg {
     width: 1.25rem;
   }
+
   .w-6-lg {
     width: 1.5rem;
   }
+
   .w-8-lg {
     width: 2rem;
   }
+
   .w-10-lg {
     width: 2.5rem;
   }
@@ -786,21 +1061,27 @@
   .text-xxs-xl {
     font-size: 0.55rem;
   }
+
   .text-xs-xl {
     font-size: 0.75rem;
   }
+
   .text-sm-xl {
     font-size: 0.875rem;
   }
+
   .text-base-xl {
     font-size: 1rem;
   }
+
   .text-lg-xl {
     font-size: 1.125rem;
   }
+
   .text-xl-xl {
     font-size: 1.25rem;
   }
+
   .text-2xl-xl {
     font-size: 1.5rem;
   }
@@ -809,24 +1090,31 @@
   .h-1-xl {
     height: 0.25rem;
   }
+
   .h-2-xl {
     height: 0.5rem;
   }
+
   .h-3-xl {
     height: 0.75rem;
   }
+
   .h-4-xl {
     height: 1rem;
   }
+
   .h-5-xl {
     height: 1.25rem;
   }
+
   .h-6-xl {
     height: 1.5rem;
   }
+
   .h-8-xl {
     height: 2rem;
   }
+
   .h-10-xl {
     height: 2.5rem;
   }
@@ -835,24 +1123,31 @@
   .w-1-xl {
     width: 0.25rem;
   }
+
   .w-2-xl {
     width: 0.5rem;
   }
+
   .w-3-xl {
     width: 0.75rem;
   }
+
   .w-4-xl {
     width: 1rem;
   }
+
   .w-5-xl {
     width: 1.25rem;
   }
+
   .w-6-xl {
     width: 1.5rem;
   }
+
   .w-8-xl {
     width: 2rem;
   }
+
   .w-10-xl {
     width: 2.5rem;
   }
@@ -863,18 +1158,23 @@
   .fs-sm-1 {
     font-size: calc(1.3rem + 1.6vw) !important;
   }
+
   .fs-sm-2 {
     font-size: calc(1.2rem + 1.2vw) !important;
   }
+
   .fs-sm-3 {
     font-size: calc(1.1rem + 0.8vw) !important;
   }
+
   .fs-sm-4 {
     font-size: calc(1rem + 0.5vw) !important;
   }
+
   .fs-sm-5 {
     font-size: 1.05rem !important;
   }
+
   .fs-sm-6 {
     font-size: 0.9rem !important;
   }
@@ -882,15 +1182,19 @@
   .fs-sm-tiny {
     font-size: 72% !important;
   }
+
   .fs-sm-big {
     font-size: 115% !important;
   }
+
   .fs-sm-large {
     font-size: 155% !important;
   }
+
   .fs-sm-xlarge {
     font-size: 175% !important;
   }
+
   .fs-sm-xxlarge {
     font-size: calc(1.6rem + 3.5vw) !important;
   }
@@ -901,18 +1205,23 @@
   .fs-md-1 {
     font-size: calc(1.4125rem + 1.95vw) !important;
   }
+
   .fs-md-2 {
     font-size: calc(1.3625rem + 1.35vw) !important;
   }
+
   .fs-md-3 {
     font-size: calc(1.3rem + 0.6vw) !important;
   }
+
   .fs-md-4 {
     font-size: calc(1.275rem + 0.3vw) !important;
   }
+
   .fs-md-5 {
     font-size: 1.125rem !important;
   }
+
   .fs-md-6 {
     font-size: 0.9375rem !important;
   }
@@ -920,24 +1229,28 @@
   .fs-md-tiny {
     font-size: 70% !important;
   }
+
   .fs-md-big {
     font-size: 112% !important;
   }
+
   .fs-md-large {
     font-size: 150% !important;
   }
+
   .fs-md-xlarge {
     font-size: 170% !important;
   }
+
   .fs-md-xxlarge {
     font-size: calc(1.725rem + 5.7vw) !important;
   }
 }
 
-.viewPage {
-  height: calc(100vh - 80px);
-  overflow-y: auto;
-  overflow-x: hidden;
+
+/* For Chrome, Edge, Safari */
+::-webkit-scrollbar {
+  width: 8px;
 }
 /* ====================== Thin Scrollbar (Global) ====================== */
 
@@ -970,3 +1283,25 @@
 }
 
 
+
+::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  /* light grey track */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #b3b3b3;
+  /* grey handle */
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #8e8e8e;
+  /* darker grey on hover */
+}
+
+/* For Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #b3b3b3 #f0f0f0;
+}
diff --git a/src/components/Directory/ManageContact.jsx b/src/components/Directory/ManageContact.jsx
index 56dd6e70..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)}>
@@ -456,15 +458,25 @@ 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
+
+              {buckets?.map((item, index) => (
+                <div
                   key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-1"
+                  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"
@@ -472,22 +484,24 @@ 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-0" htmlFor={`item-${item.id}`}>
                       {item.name}
                     </label>
                   </div>
-                </li>
+                </div>
               ))}
-            </ul>
+
+            </div>
+
+          </div>
+          <div className="text-start mt-3 mb-3">
             {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>
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index 0dca90e5..e0d6cbc4 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -26,15 +26,15 @@ const Header = () => {
   const dispatch = useDispatch();
   const { data, loading } = useMaster();
   const navigate = useNavigate();
-  const {onOpen} = useAuthModal()
-  const { onOpen:changePass } = useModal("ChangePassword");
+  const { onOpen } = useAuthModal()
+  const { onOpen: changePass } = useModal("ChangePassword");
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-  const { mutate : logout,isPending:logouting} = useLogout()
+  const { mutate: logout, isPending: logouting } = useLogout()
 
   const isDashboardPath =
     /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
   const isProjectPath = /^\/projects$/.test(location.pathname);
-    const isCollectionPath =
+  const isCollectionPath =
     /^\/collection$/.test(location.pathname) || /^\/$/.test(location.pathname);
 
   const showProjectDropdown = (pathname) => {
@@ -51,10 +51,10 @@ const Header = () => {
     const isAdvancePayment = /^\/advance-payment$/.test(pathname);
     const isServiceProjectPage = /^\/service-projects\/[0-9a-fA-F-]{36}$/.test(pathname);
     const isAdvancePayment1 =
-  /^\/advance-payment(\/[0-9a-fA-F-]{36})?$/.test(pathname);
+      /^\/advance-payment(\/[0-9a-fA-F-]{36})?$/.test(pathname);
 
 
-    return !(isDirectoryPath || isProfilePage || isExpensePage || isPaymentRequest || isRecurringExpense || isAdvancePayment ||isServiceProjectPage || isAdvancePayment1);
+    return !(isDirectoryPath || isProfilePage || isExpensePage || isPaymentRequest || isRecurringExpense || isAdvancePayment || isServiceProjectPage || isAdvancePayment1);
   };
   const allowedProjectStatusIds = [
     "603e994b-a27f-4e5d-a251-f3d69b0498ba",
@@ -66,7 +66,7 @@ const Header = () => {
     if (!Array.isArray(roles)) return "User";
     let role = roles.find((role) => role.id === joRoleId);
     return role ? role.name : "User";
-  };  
+  };
 
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}`);
@@ -79,8 +79,8 @@ const Header = () => {
   const projectsForDropdown = isDashboardPath
     ? projectNames
     : projectNames?.filter((project) =>
-        allowedProjectStatusIds.includes(project.projectStatusId)
-      );
+      allowedProjectStatusIds.includes(project.projectStatusId)
+    );
 
   let currentProjectDisplayName;
   if (projectLoading) {
@@ -196,63 +196,63 @@ const Header = () => {
       >
         <div className="d-flex align-items-center">
           {showProjectDropdown(location.pathname) && (
-          <div className="align-items-center">
-            <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
-            <div className="btn-group">
-              {shouldShowDropdown ? (
-                <button
-                  className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`}
-                  type="button"
-                  data-bs-toggle="dropdown"
-                  aria-expanded="false"
-                >
-                  {currentProjectDisplayName}
-                </button>
-              ) : (
-                <span className="btn btn-sm-sm btn-xl px-1">
-                  {currentProjectDisplayName}
-                </span>
-              )}
-
-              {shouldShowDropdown &&
-                projectsForDropdown &&
-                projectsForDropdown.length > 0 && (
-                  <ul
-                    className="dropdown-menu"
-                    style={{ overflow: "auto", maxHeight: "300px" }}
+            <div className="align-items-center">
+              <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
+              <div className="btn-group">
+                {shouldShowDropdown ? (
+                  <button
+                    className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`}
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
                   >
-                    {(isDashboardPath|| isCollectionPath) &&(
-                      <li>
-                        <button
-                          className="dropdown-item"
-                          onClick={() => handleProjectChange(null)}
-                        >
-                          All Projects
-                        </button>
-                      </li>
-                    )}
-                    {[...projectsForDropdown]
-                      .sort((a, b) => a?.name?.localeCompare(b.name))
-                      .map((project) => (
-                        <li key={project?.id}>
+                    {currentProjectDisplayName}
+                  </button>
+                ) : (
+                  <span className="btn btn-sm-sm btn-xl px-1">
+                    {currentProjectDisplayName}
+                  </span>
+                )}
+
+                {shouldShowDropdown &&
+                  projectsForDropdown &&
+                  projectsForDropdown.length > 0 && (
+                    <ul
+                      className="dropdown-menu custom-scrollbar"
+                      style={{ overflow: "auto", maxHeight: "300px" }}
+                    >
+                      {(isDashboardPath || isCollectionPath) && (
+                        <li>
                           <button
                             className="dropdown-item"
-                            onClick={() => handleProjectChange(project?.id)}
+                            onClick={() => handleProjectChange(null)}
                           >
-                            {project?.name}
-                            {project?.shortName && (
-                              <span className="text-primary fw-semibold ms-1">
-                                ({project?.shortName})
-                              </span>
-                            )}
+                            All Projects
                           </button>
                         </li>
-                      ))}
-                  </ul>
-                )}
+                      )}
+                      {[...projectsForDropdown]
+                        .sort((a, b) => a?.name?.localeCompare(b.name))
+                        .map((project) => (
+                          <li key={project?.id}>
+                            <button
+                              className="dropdown-item"
+                              onClick={() => handleProjectChange(project?.id)}
+                            >
+                              {project?.name}
+                              {project?.shortName && (
+                                <span className="text-primary fw-semibold ms-1">
+                                  ({project?.shortName})
+                                </span>
+                              )}
+                            </button>
+                          </li>
+                        ))}
+                    </ul>
+                  )}
+              </div>
             </div>
-          </div>
-        )}
+          )}
         </div>
 
         <ul className="navbar-nav flex-row align-items-center ms-md-auto">
@@ -402,7 +402,7 @@ const Header = () => {
               <li>
                 <div className="dropdown-divider"></div>
               </li>
-               <li onClick={()=>onOpen()}>
+              <li onClick={() => onOpen()}>
                 {" "}
                 <a
                   className="dropdown-item cusor-pointer"
@@ -440,7 +440,7 @@ const Header = () => {
                 </a>
               </li>
 
-             
+
               <li>
                 <div className="dropdown-divider"></div>
               </li>
@@ -448,10 +448,10 @@ const Header = () => {
                 <a
                   aria-label="click to log out"
                   className="dropdown-item cusor-pointer"
-                  onClick={()=>logout()}
+                  onClick={() => logout()}
                 >
-                 {logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
-                  <span className="align-middle">SignOut</span></>}
+                  {logouting ? "Please Wait" : <> <i className="bx bx-log-out me-2"></i>
+                    <span className="align-middle">SignOut</span></>}
                 </a>
               </li>
             </ul>
diff --git a/src/components/Project/ProjectCard.jsx b/src/components/Project/ProjectCard.jsx
index 45f87e78..b40bdd78 100644
--- a/src/components/Project/ProjectCard.jsx
+++ b/src/components/Project/ProjectCard.jsx
@@ -105,7 +105,7 @@ const ProjectCard = ({ project, isCore = true }) => {
                   >
                     {project?.shortName ? project?.shortName : project?.name}
                   </h5>
-                  <div className="client-info text-body">
+                  <div className="client-info text-body text-start">
                     <span>{project?.shortName ? project?.name : ""}</span>
                   </div>
                 </div>
diff --git a/src/components/ServiceProject/ManageServiceProject.jsx b/src/components/ServiceProject/ManageServiceProject.jsx
index d2423e0b..04f9f391 100644
--- a/src/components/ServiceProject/ManageServiceProject.jsx
+++ b/src/components/ServiceProject/ManageServiceProject.jsx
@@ -147,7 +147,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               </div>
 
               <i
-                className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
+                className="bx bx-plus-circle bx-xs cursor-pointer text-primary mb-3"
                 onClick={() => {
                   onClose();
                   openOrgModal({ startStep: 2 });
diff --git a/src/pages/DailyProgressReport/DailyProgrssReport.jsx b/src/pages/DailyProgressReport/DailyProgrssReport.jsx
index e543895e..c7437a22 100644
--- a/src/pages/DailyProgressReport/DailyProgrssReport.jsx
+++ b/src/pages/DailyProgressReport/DailyProgrssReport.jsx
@@ -97,7 +97,7 @@ const DailyProgrssReport = () => {
           ]}
         />
 
-        <div className="card card-fullscreen p-5">
+        <div className="card page-min-h p-5">
           {data?.length > 0 && (
             <div className="col-sm-4 col-md-3 col-12 text-start">
               <AppFormController
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",
+];