diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css
index 05e4266a..4c2cb329 100644
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
@@ -3,18 +3,23 @@
   --bs-nav-link-font-size: 0.7375rem;
   --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 */
+  font-size: 0.875rem;
+  /* ~14px */
   border-radius: var(--bs-border-radius);
 }
 
@@ -29,12 +34,15 @@
   background-color: color-mix(in srgb, var(--bs-primary) 10.4%, transparent);
   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,9 +58,11 @@
 .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);
 }
@@ -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,10 +163,12 @@
     transform: scale(1);
     opacity: 0.6;
   }
+
   70% {
     transform: scale(1.5);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 0;
@@ -163,118 +177,186 @@
 
 .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;
 }
@@ -282,72 +364,112 @@
 .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 +483,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 +558,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 +672,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;
 }
@@ -547,26 +757,33 @@
    Responsive Variants
    ========================== */
 @media (min-width: 576px) {
+
   /* sm */
   /* Font */
   .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 +792,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,50 +825,64 @@
   .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;
   }
 }
 
 @media (min-width: 768px) {
+
   /* md */
   /* Font */
   .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 +891,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,50 +924,64 @@
   .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;
   }
 }
 
 @media (min-width: 992px) {
+
   /* lg */
   /* Font */
   .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 +990,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,50 +1023,64 @@
   .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;
   }
 }
 
 @media (min-width: 1200px) {
+
   /* xl */
   /* Font */
   .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 +1089,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 +1122,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 +1157,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 +1181,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 +1204,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,15 +1228,19 @@
   .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;
   }
@@ -939,3 +1251,56 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
+/* ====================== Thin Scrollbar (Global) ====================== */
+
+.job-scroll-wrapper {
+  max-height: 350px;
+  overflow-y: auto;
+  padding-right: 8px;
+
+  /* Firefox thin scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: #c8c8c8 transparent;
+}
+
+/* Chrome, Edge, Safari */
+.job-scroll-wrapper::-webkit-scrollbar {
+  width: 4px;
+}
+
+.job-scroll-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.job-scroll-wrapper::-webkit-scrollbar-thumb {
+  background-color: #c8c8c8;
+  border-radius: 20px;
+}
+
+.job-scroll-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: #a0a0a0;
+}
+
+
+::-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;
+}
\ No newline at end of file
diff --git a/src/components/Dashboard/AttendanceOverview.jsx b/src/components/Dashboard/AttendanceOverview.jsx
index e6fc0624..c77adc47 100644
--- a/src/components/Dashboard/AttendanceOverview.jsx
+++ b/src/components/Dashboard/AttendanceOverview.jsx
@@ -10,7 +10,7 @@ const formatDate = (dateStr) => {
   const date = new Date(dateStr);
   return date.toLocaleDateString("en-GB", {
     day: "2-digit",
-    month: "long",
+    month: "short",
   });
 };
 
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index 534fb43f..50867abb 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -36,7 +36,7 @@ const Dashboard = () => {
   const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
   const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
 
-  const { data,isLoading,isError } = useGetCollectionOverview();
+  const { data, isLoading, isError } = useGetCollectionOverview();
   return (
     <div className="container-fluid mt-5">
       <div className="row gy-4">
@@ -47,17 +47,15 @@ const Dashboard = () => {
         )}
 
         <div
-          className={`${
-            !isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
-          }`}
+          className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
+            }`}
         >
           <Teams />
         </div>
 
         <div
-          className={`${
-            !isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
-          }`}
+          className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
+            }`}
         >
           <TasksCard />
         </div>
@@ -86,7 +84,7 @@ const Dashboard = () => {
         </div>
         {!isAllProjectsSelected &&
           (canRegularize || canTeamAttendance || canSelfAttendance) && (
-            <div className="col-12 col-md-6 mb-sm-0 mb-4">
+            <div className="col-12 col-md-8 mb-sm-0 mb-4">
               <AttendanceOverview />
             </div>
           )}
@@ -98,6 +96,11 @@ const Dashboard = () => {
             </div>
           </div>
         )}
+        {isAllProjectsSelected && (
+          <div className="col-12 col-md-6 mb-sm-0 mb-4">
+            <ServiceJobs />
+          </div>
+        )}
         <div className="col-md-8">
           {isLoading ? (
             <CollectionOverviewSkeleton />
diff --git a/src/components/Dashboard/ServiceJobs.jsx b/src/components/Dashboard/ServiceJobs.jsx
index 987addda..e073a424 100644
--- a/src/components/Dashboard/ServiceJobs.jsx
+++ b/src/components/Dashboard/ServiceJobs.jsx
@@ -1,234 +1,156 @@
 import React from "react";
+import { useParams } from "react-router-dom";
+import { useJobsProgression } from "../../hooks/useDashboard_Data";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { useServiceProject } from "../../hooks/useServiceProject";
 
 const ServiceJobs = () => {
+  const { projectId } = useParams();
+  const { data, isLoading, isError } = useJobsProgression(projectId);
+
+  const jobs = data || {};
+  const { data: projectData, isLoading: projectLoading } = useServiceProject(projectId);
+  const tabMapping = [
+    { id: "tab-new", label: "My Jobs", key: "allJobs" },
+    { id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
+    { id: "tab-shipping", label: "In Progress", key: "inProgressJobs" },
+  ];
+
   return (
-    <div className="col-xxl-4 col-lg-6">
-      <div className="card h-100">
+    <div className="">
+      <div className="card page-min-h">
         <div className="card-header d-flex justify-content-between">
           <div className="card-title mb-0 text-start">
-            <h5 className="mb-1">Service Jobs</h5>
-            <p className="card-subtitle">All Projects</p>
+            <h5 className="mb-1 fw-bold">Service Jobs</h5>
+            <p className="card-subtitle">
+              {projectLoading ? "Loading..." : projectData?.name || "All Projects"}
+            </p>
           </div>
         </div>
 
         <div className="card-body p-0">
           <div className="nav-align-top">
 
-            {/* Tabs */}
+            {/* ---------------- Tabs ---------------- */}
             <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
-              <li className="nav-item">
-                <button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
-                  My Jobs
-                </button>
-              </li>
-              <li className="nav-item">
-                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
-                  Assigned
-                </button>
-              </li>
-              <li className="nav-item">
-                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
-                  In Progress
-                </button>
-              </li>
+              {tabMapping.map((t, index) => (
+                <li className="nav-item" key={t.id}>
+                  <button
+                    className={`nav-link ${index === 0 ? "active" : ""}`}
+                    data-bs-toggle="tab"
+                    data-bs-target={`#${t.id}`}
+                  >
+                    {t.label}
+                  </button>
+                </li>
+              ))}
             </ul>
 
-            {/* Tab Content */}
+            {/* ---------------- Tab Content ---------------- */}
             <div className="tab-content border-0 mx-1 text-start">
 
-              {/* ---------------------- NEW TAB ---------------------- */}
-              <div className="tab-pane fade show active" id="tab-new">
-                {/* Entry 1 */}
-                <ul className="timeline mb-0">
-                  <li className="timeline-item ps-6 border-left-dashed">
-                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
-                      <i className="bx bx-check-circle"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-success text-uppercase">Sender</small>
-                      </div>
-                      <h6 className="my-50">Myrtle Ullrich</h6>
-                      <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
+              {isLoading && (
+                <div className="text-center" style={{ height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
+                  <SpinnerLoader />
+                </div>
+              )}
+
+
+              {isError && (
+                <p
+                  className="text-center"
+                  style={{
+                    height: "250px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    margin: 0,
+                  }}
+                >
+                  No data found
+                </p>
+
+              )}
+
+              {!isLoading &&
+                !isError &&
+                tabMapping.map((t, index) => {
+                  const list = jobs[t.key] || [];
+
+                  return (
+                    <div
+                      key={t.id}
+                      className={`tab-pane fade ${index === 0 ? "show active" : ""}`}
+                      id={t.id}
+                    >
+                      {list.length === 0 ? (
+                        <p
+                          className="text-center"
+                          style={{
+                            height: "250px",
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            margin: 0,
+                          }}
+                        >
+                          No jobs found
+                        </p>
+
+                      ) : (
+                        <div className="job-scroll-wrapper">
+                          {list.map((job, i) => (
+                            <React.Fragment key={i}>
+                              <ul className="timeline mb-0">
+
+                                {/* Assigned By */}
+                                <li className="timeline-item ps-6 border-left-dashed">
+                                  <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                                    <i className="bx bx-check-circle"></i>
+                                  </span>
+                                  <div className="timeline-event ps-1">
+                                    <div className="timeline-header">
+                                      <small className="text-success text-uppercase">
+                                        Assigned By
+                                      </small>
+                                    </div>
+                                    <h6 className="my-50">{job.assignedBy}</h6>
+                                    <p className="text-body mb-0">
+                                      {formatUTCToLocalTime(job.assignedAt)}
+                                    </p>
+                                  </div>
+                                </li>
+
+                                {/* Project */}
+                                <li className="timeline-item ps-6 border-transparent">
+                                  <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                                    <i className="bx bx-map"></i>
+                                  </span>
+                                  <div className="timeline-event ps-1">
+                                    <div className="timeline-header">
+                                      <small className="text-primary text-uppercase">Project</small>
+                                    </div>
+                                    <h6 className="my-50">{job.project}</h6>
+                                    <p className="text-body mb-0">{job.title}</p>
+                                  </div>
+                                </li>
+                              </ul>
+
+                              {/* Divider */}
+                              {i < list.length - 1 && (
+                                <div className="border-1 border-light border-top border-dashed my-4"></div>
+                              )}
+                            </React.Fragment>
+                          ))}
+                        </div>
+                      )}
                     </div>
-                  </li>
-                  <li className="timeline-item ps-6 border-transparent">
-                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
-                      <i className="bx bx-map"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-primary text-uppercase">Receiver</small>
-                      </div>
-                      <h6 className="my-50">Barry Schowalter</h6>
-                      <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
-                    </div>
-                  </li>
-                </ul>
-
-                <div className="border-1 border-light border-top border-dashed my-4"></div>
-
-                {/* Entry 2 */}
-                <ul className="timeline mb-0">
-                  <li className="timeline-item ps-6 border-left-dashed">
-                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
-                      <i className="bx bx-check-circle"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-success text-uppercase">Sender</small>
-                      </div>
-                      <h6 className="my-50">Veronica Herman</h6>
-                      <p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
-                    </div>
-                  </li>
-                  <li className="timeline-item ps-6 border-transparent">
-                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
-                      <i className="bx bx-map"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-primary text-uppercase">Receiver</small>
-                      </div>
-                      <h6 className="my-50">Helen Jacobs</h6>
-                      <p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-
-              {/* ---------------------- PREPARING TAB ---------------------- */}
-              <div className="tab-pane fade" id="tab-preparing">
-
-                {/* Entry 1 */}
-                <ul className="timeline mb-0">
-                  <li className="timeline-item ps-6 border-left-dashed">
-                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
-                      <i className="bx bx-time-five"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-warning text-uppercase">Sender</small>
-                      </div>
-                      <h6 className="my-50">Oliver Grant</h6>
-                      <p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
-                    </div>
-                  </li>
-
-                  <li className="timeline-item ps-6 border-transparent">
-                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
-                      <i className="bx bx-map"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-primary text-uppercase">Receiver</small>
-                      </div>
-                      <h6 className="my-50">Samantha Lee</h6>
-                      <p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
-                    </div>
-                  </li>
-                </ul>
-
-                <div className="border-1 border-light border-top border-dashed my-4"></div>
-
-                {/* Entry 2 */}
-                <ul className="timeline mb-0">
-                  <li className="timeline-item ps-6 border-left-dashed">
-                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
-                      <i className="bx bx-time-five"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-warning text-uppercase">Sender</small>
-                      </div>
-                      <h6 className="my-50">Marcus Howard</h6>
-                      <p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
-                    </div>
-                  </li>
-
-                  <li className="timeline-item ps-6 border-transparent">
-                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
-                      <i className="bx bx-map"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-primary text-uppercase">Receiver</small>
-                      </div>
-                      <h6 className="my-50">Daniel Foster</h6>
-                      <p className="text-body mb-0">312 Marina, California(CA), 94109</p>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-
-              {/* ---------------------- SHIPPING TAB ---------------------- */}
-              <div className="tab-pane fade" id="tab-shipping">
-
-                {/* Entry 1 */}
-                <ul className="timeline mb-0">
-                  <li className="timeline-item ps-6 border-left-dashed">
-                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
-                      <i className="bx bx-package"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-info text-uppercase">Sender</small>
-                      </div>
-                      <h6 className="my-50">James Carter</h6>
-                      <p className="text-body mb-0">441 Market St, California(CA), 94111</p>
-                    </div>
-                  </li>
-
-                  <li className="timeline-item ps-6 border-transparent">
-                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
-                      <i className="bx bx-map"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-primary text-uppercase">Receiver</small>
-                      </div>
-                      <h6 className="my-50">Linda Moore</h6>
-                      <p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
-                    </div>
-                  </li>
-                </ul>
-
-                <div className="border-1 border-light border-top border-dashed my-4"></div>
-
-                {/* Entry 2 */}
-                <ul className="timeline mb-0">
-                  <li className="timeline-item ps-6 border-left-dashed">
-                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
-                      <i className="bx bx-package"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-info text-uppercase">Sender</small>
-                      </div>
-                      <h6 className="my-50">Sarah Bennett</h6>
-                      <p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
-                    </div>
-                  </li>
-
-                  <li className="timeline-item ps-6 border-transparent">
-                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
-                      <i className="bx bx-map"></i>
-                    </span>
-                    <div className="timeline-event ps-1">
-                      <div className="timeline-header">
-                        <small className="text-primary text-uppercase">Receiver</small>
-                      </div>
-                      <h6 className="my-50">George Simmons</h6>
-                      <p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-
+                  );
+                })}
             </div>
           </div>
         </div>
-
       </div>
     </div>
   );
diff --git a/src/components/Directory/ManageContact.jsx b/src/components/Directory/ManageContact.jsx
index 56dd6e70..7229230c 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
@@ -456,15 +457,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,16 +483,17 @@ 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>
             )}
diff --git a/src/components/ServiceProject/ServiceProjectBranch/ManageBranch.jsx b/src/components/ServiceProject/ServiceProjectBranch/ManageBranch.jsx
index 7b51d616..e39b0603 100644
--- a/src/components/ServiceProject/ServiceProjectBranch/ManageBranch.jsx
+++ b/src/components/ServiceProject/ServiceProjectBranch/ManageBranch.jsx
@@ -113,7 +113,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
             <input
               type="text"
               id="branchName"
-              className="form-control form-control-sm"
+              className="form-control form-control-md"
               {...register("branchName")}
               placeholder="Enter Branch"
             />
@@ -147,7 +147,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
             <input
               type="text"
               id="googleMapUrl"
-              className="form-control form-control-sm"
+              className="form-control form-control-md"
               {...register("googleMapUrl")}
             />
             {errors.googleMapUrl && (
@@ -183,7 +183,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
                     <input
                       type="text"
                       placeholder="Contact Name"
-                      className="form-control form-control-sm"
+                      className="form-control form-control-md"
                       value={item.contactPerson}
                       onChange={(e) => {
                         const list = [...contacts];
@@ -198,7 +198,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
                     <input
                       type="text"
                       placeholder="Designation"
-                      className="form-control form-control-sm"
+                      className="form-control form-control-md"
                       value={item.designation}
                       onChange={(e) => {
                         const list = [...contacts];
@@ -220,7 +220,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
                     <input
                       type="text"
                       placeholder="Number"
-                      className="form-control form-control-sm"
+                      className="form-control form-control-md"
                       maxLength={10}
                       value={num}
                       onChange={(e) => {
@@ -267,7 +267,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
                     <input
                       type="email"
                       placeholder="Email"
-                      className="form-control form-control-sm"
+                      className="form-control form-control-md"
                       value={email}
                       onChange={(e) => {
                         const list = [...contacts];
@@ -328,7 +328,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
             </Label>
             <textarea
               id="address"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("address")}
             />
             {errors.address && (
diff --git a/src/components/ServiceProject/ServiceProjectProfile.jsx b/src/components/ServiceProject/ServiceProjectProfile.jsx
index 6ef359ff..cebaaf6d 100644
--- a/src/components/ServiceProject/ServiceProjectProfile.jsx
+++ b/src/components/ServiceProject/ServiceProjectProfile.jsx
@@ -7,6 +7,7 @@ import GlobalModel from "../common/GlobalModel";
 import { SpinnerLoader } from "../common/Loader";
 import ServiceBranch from "./ServiceProjectBranch/ServiceBranch";
 import ServiceProfile from "./ServiceProfile";
+import ServiceJobs from "../Dashboard/ServiceJobs";
 
 const ServiceProjectProfile = () => {
   const { projectId } = useParams();
@@ -40,6 +41,9 @@ const ServiceProjectProfile = () => {
         <div className="col-md-6 col-lg-7 order-2 mb-6">
           <ServiceBranch />
         </div>
+        <div className="col-md-6 col-lg-5 order-2 mb-6">
+          <ServiceJobs/>
+        </div>
       </div>
     </>
   );
diff --git a/src/hooks/useDashboard_Data.jsx b/src/hooks/useDashboard_Data.jsx
index 8b3863df..fb20d806 100644
--- a/src/hooks/useDashboard_Data.jsx
+++ b/src/hooks/useDashboard_Data.jsx
@@ -202,3 +202,13 @@ export const useGetCollectionOverview = (projectId) => {
     },
   });
 };
+
+export const useJobsProgression = (projectId) => {
+  return useQuery({
+    queryKey: ["serviceProjectJobs", projectId],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getJobsProgression(projectId);
+      return resp.data;
+    },
+  });
+};
\ No newline at end of file
diff --git a/src/repositories/GlobalRepository.jsx b/src/repositories/GlobalRepository.jsx
index e95a109a..39046f37 100644
--- a/src/repositories/GlobalRepository.jsx
+++ b/src/repositories/GlobalRepository.jsx
@@ -84,7 +84,9 @@ const GlobalRepository = {
 
   getAttendanceOverview: (projectId, days) => api.get(`/api/dashboard/attendance-overview/${projectId}?days=${days}`),
 
-  getCollectionOverview:(projectId) =>api.get(`/api/Dashboard/collection-overview`)
+  getCollectionOverview:(projectId) =>api.get(`/api/Dashboard/collection-overview`),
+  
+  getJobsProgression: (projectId) => api.get(`/api/Dashboard/job/progression${projectId ? `?projectId=${projectId}` : ""}`),
 
 };
 
diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx
index fa766551..071c5a30 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",
+];
\ No newline at end of file