diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css
index 3a8406cb..bc11b42b 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.60rem;
-  font-size: 0.875rem;  /* ~14px */
+  font-size: 0.875rem;
+  /* ~14px */
   border-radius: var(--bs-border-radius);
 }
 
@@ -28,14 +33,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);
 }
@@ -43,6 +51,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);
 }
@@ -50,24 +59,27 @@
 .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)
+  border-bottom: 2px solid var(--bs-table-border-color);
 }
 
-.text-royalblue{
-color: #1796e3;
+.text-gary-80 {
+  color: var(--bs-gray-500)
+}
+
+.text-royalblue {
+  color: #1796e3;
 }
 
 .text-md {
-font-size: 2rem;
+  font-size: 2rem;
 }
 
 .text-md-b {
-font-weight: normal;
+  font-weight: normal;
 }
+
 .stepper-container {
   position: relative;
 }
@@ -131,7 +143,7 @@ font-weight: normal;
 }
 
 /* Make line green for completed sections */
-.timeline-item.completed ~ .timeline-line-horizontal {
+.timeline-item.completed~.timeline-line-horizontal {
   background-color: var(--bs-success);
 }
 
@@ -152,10 +164,12 @@ font-weight: normal;
     transform: scale(1);
     opacity: 0.6;
   }
+
   70% {
     transform: scale(1.5);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 0;
@@ -164,75 +178,307 @@ font-weight: normal;
 
 
 
-.text-xxs { font-size: 0.55rem; }       /* 8px */
-.text-xs { font-size: 0.75rem; }       /* 12px */
-.text-sm { font-size: 0.875rem; }      /* 14px */
-.text-base { font-size: 1rem; }        /* 16px */
-.text-lg { font-size: 1.125rem; }      /* 18px */
-.text-xl { font-size: 1.25rem; }       /* 20px */
-.text-2xl { font-size: 1.5rem; }       /* 24px */
-.text-3xl { font-size: 1.875rem; }     /* 30px */
-.text-4xl { font-size: 2.25rem; }      /* 36px */
-.text-5xl { font-size: 3rem; }         /* 48px */
-.text-6xl { font-size: 3.75rem; }      /* 60px */
-.text-7xl { font-size: 4.5rem; }       /* 72px */
-.text-8xl { font-size: 6rem; }         /* 96px */
-.text-9xl { font-size: 8rem; }         /* 128px */
+.text-xxs {
+  font-size: 0.55rem;
+}
+
+/* 8px */
+.text-xs {
+  font-size: 0.75rem;
+}
+
+/* 12px */
+.text-sm {
+  font-size: 0.875rem;
+}
+
+/* 14px */
+.text-base {
+  font-size: 1rem;
+}
+
+/* 16px */
+.text-lg {
+  font-size: 1.125rem;
+}
+
+/* 18px */
+.text-xl {
+  font-size: 1.25rem;
+}
+
+/* 20px */
+.text-2xl {
+  font-size: 1.5rem;
+}
+
+/* 24px */
+.text-3xl {
+  font-size: 1.875rem;
+}
+
+/* 30px */
+.text-4xl {
+  font-size: 2.25rem;
+}
+
+/* 36px */
+.text-5xl {
+  font-size: 3rem;
+}
+
+/* 48px */
+.text-6xl {
+  font-size: 3.75rem;
+}
+
+/* 60px */
+.text-7xl {
+  font-size: 4.5rem;
+}
+
+/* 72px */
+.text-8xl {
+  font-size: 6rem;
+}
+
+/* 96px */
+.text-9xl {
+  font-size: 8rem;
+}
+
+/* 128px */
 
 
 /*  */
 
-.w-0     { width: 0px; }
-.w-px    { width: 1px; }
-.w-1     { width: 0.25rem; }  /* 4px */
-.w-2     { width: 0.5rem; }   /* 8px */
-.w-3     { width: 0.75rem; }  /* 12px */
-.w-4     { width: 1rem; }     /* 16px */
-.w-5     { width: 1.25rem; }  /* 20px */
-.w-6     { width: 1.5rem; }   /* 24px */
-.w-8     { width: 2rem; }     /* 32px */
-.w-10    { width: 2.5rem; }   /* 40px */
-.w-12    { width: 3rem; }     /* 48px */
-.w-16    { width: 4rem; }     /* 64px */
-.w-20    { width: 5rem; }     /* 80px */
-.w-24    { width: 6rem; }     /* 96px */
-.w-32    { width: 8rem; }     /* 128px */
-.w-40    { width: 10rem; }    /* 160px */
-.w-48    { width: 12rem; }    /* 192px */
-.w-56    { width: 14rem; }    /* 224px */
-.w-64    { width: 16rem; }    /* 256px */
-.w-auto  { width: auto; }
-.w-full  { width: 100%; }
-.w-screen{ width: 100vw; }
-.w-min   { width: min-content; }
-.w-max   { width: max-content; }
+.w-0 {
+  width: 0px;
+}
+
+.w-px {
+  width: 1px;
+}
+
+.w-1 {
+  width: 0.25rem;
+}
+
+/* 4px */
+.w-2 {
+  width: 0.5rem;
+}
+
+/* 8px */
+.w-3 {
+  width: 0.75rem;
+}
+
+/* 12px */
+.w-4 {
+  width: 1rem;
+}
+
+/* 16px */
+.w-5 {
+  width: 1.25rem;
+}
+
+/* 20px */
+.w-6 {
+  width: 1.5rem;
+}
+
+/* 24px */
+.w-8 {
+  width: 2rem;
+}
+
+/* 32px */
+.w-10 {
+  width: 2.5rem;
+}
+
+/* 40px */
+.w-12 {
+  width: 3rem;
+}
+
+/* 48px */
+.w-16 {
+  width: 4rem;
+}
+
+/* 64px */
+.w-20 {
+  width: 5rem;
+}
+
+/* 80px */
+.w-24 {
+  width: 6rem;
+}
+
+/* 96px */
+.w-32 {
+  width: 8rem;
+}
+
+/* 128px */
+.w-40 {
+  width: 10rem;
+}
+
+/* 160px */
+.w-48 {
+  width: 12rem;
+}
+
+/* 192px */
+.w-56 {
+  width: 14rem;
+}
+
+/* 224px */
+.w-64 {
+  width: 16rem;
+}
+
+/* 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 */
-.h-2     { height: 0.5rem; }   /* 8px */
-.h-3     { height: 0.75rem; }  /* 12px */
-.h-4     { height: 1rem; }     /* 16px */
-.h-5     { height: 1.25rem; }  /* 20px */
-.h-6     { height: 1.5rem; }   /* 24px */
-.h-8     { height: 2rem; }     /* 32px */
-.h-10    { height: 2.5rem; }   /* 40px */
-.h-12    { height: 3rem; }     /* 48px */
-.h-16    { height: 4rem; }     /* 64px */
-.h-20    { height: 5rem; }     /* 80px */
-.h-24    { height: 6rem; }     /* 96px */
-.h-32    { height: 8rem; }     /* 128px */
-.h-40    { height: 10rem; }    /* 160px */
-.h-48    { height: 12rem; }    /* 192px */
-.h-56    { height: 14rem; }    /* 224px */
-.h-64    { height: 16rem; }    /* 256px */
-.h-auto  { height: auto; }
-.h-full  { height: 100%; }
-.h-screen{ height: 100vh; }
-.h-min   { height: min-content; }
-.h-max   { height: max-content; }
+.h-0 {
+  height: 0px;
+}
+
+.h-px {
+  height: 1px;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
+/* 4px */
+.h-2 {
+  height: 0.5rem;
+}
+
+/* 8px */
+.h-3 {
+  height: 0.75rem;
+}
+
+/* 12px */
+.h-4 {
+  height: 1rem;
+}
+
+/* 16px */
+.h-5 {
+  height: 1.25rem;
+}
+
+/* 20px */
+.h-6 {
+  height: 1.5rem;
+}
+
+/* 24px */
+.h-8 {
+  height: 2rem;
+}
+
+/* 32px */
+.h-10 {
+  height: 2.5rem;
+}
+
+/* 40px */
+.h-12 {
+  height: 3rem;
+}
+
+/* 48px */
+.h-16 {
+  height: 4rem;
+}
+
+/* 64px */
+.h-20 {
+  height: 5rem;
+}
+
+/* 80px */
+.h-24 {
+  height: 6rem;
+}
+
+/* 96px */
+.h-32 {
+  height: 8rem;
+}
+
+/* 128px */
+.h-40 {
+  height: 10rem;
+}
+
+/* 160px */
+.h-48 {
+  height: 12rem;
+}
+
+/* 192px */
+.h-56 {
+  height: 14rem;
+}
+
+/* 224px */
+.h-64 {
+  height: 16rem;
+}
+
+/* 256px */
+.h-auto {
+  height: auto;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.h-min {
+  height: min-content;
+}
+
+.h-max {
+  height: max-content;
+}
 
 .vh-50 {
   height: 50vh !important;
@@ -243,230 +489,796 @@ font-weight: normal;
 /* ==========================
    Base Font Sizes (mobile first)
    ========================== */
-.text-xxs { font-size: 0.55rem; }   /* 8px */
-.text-xs  { font-size: 0.75rem; }   /* 12px */
-.text-sm  { font-size: 0.875rem; }  /* 14px */
-.text-base{ font-size: 1rem; }      /* 16px */
-.text-lg  { font-size: 1.125rem; }  /* 18px */
-.text-xl  { font-size: 1.25rem; }   /* 20px */
-.text-2xl { font-size: 1.5rem; }    /* 24px */
-.text-3xl { font-size: 1.875rem; }  /* 30px */
-.text-4xl { font-size: 2.25rem; }   /* 36px */
-.text-5xl { font-size: 3rem; }      /* 48px */
-.text-6xl { font-size: 3.75rem; }   /* 60px */
-.text-7xl { font-size: 4.5rem; }    /* 72px */
-.text-8xl { font-size: 6rem; }      /* 96px */
-.text-9xl { font-size: 8rem; }      /* 128px */
+.text-xxs {
+  font-size: 0.55rem;
+}
+
+/* 8px */
+.text-xs {
+  font-size: 0.75rem;
+}
+
+/* 12px */
+.text-sm {
+  font-size: 0.875rem;
+}
+
+/* 14px */
+.text-base {
+  font-size: 1rem;
+}
+
+/* 16px */
+.text-lg {
+  font-size: 1.125rem;
+}
+
+/* 18px */
+.text-xl {
+  font-size: 1.25rem;
+}
+
+/* 20px */
+.text-2xl {
+  font-size: 1.5rem;
+}
+
+/* 24px */
+.text-3xl {
+  font-size: 1.875rem;
+}
+
+/* 30px */
+.text-4xl {
+  font-size: 2.25rem;
+}
+
+/* 36px */
+.text-5xl {
+  font-size: 3rem;
+}
+
+/* 48px */
+.text-6xl {
+  font-size: 3.75rem;
+}
+
+/* 60px */
+.text-7xl {
+  font-size: 4.5rem;
+}
+
+/* 72px */
+.text-8xl {
+  font-size: 6rem;
+}
+
+/* 96px */
+.text-9xl {
+  font-size: 8rem;
+}
+
+/* 128px */
 
 /* ==========================
    Base Heights
    ========================== */
-.h-0     { height: 0; }
-.h-px    { height: 1px; }
-.h-1     { height: 0.25rem; }  /* 4px */
-.h-2     { height: 0.5rem; }   /* 8px */
-.h-3     { height: 0.75rem; }  /* 12px */
-.h-4     { height: 1rem; }     /* 16px */
-.h-5     { height: 1.25rem; }  /* 20px */
-.h-6     { height: 1.5rem; }   /* 24px */
-.h-8     { height: 2rem; }     /* 32px */
-.h-10    { height: 2.5rem; }   /* 40px */
-.h-12    { height: 3rem; }     /* 48px */
-.h-16    { height: 4rem; }     /* 64px */
-.h-20    { height: 5rem; }     /* 80px */
-.h-24    { height: 6rem; }     /* 96px */
-.h-32    { height: 8rem; }     /* 128px */
-.h-40    { height: 10rem; }    /* 160px */
-.h-48    { height: 12rem; }    /* 192px */
-.h-56    { height: 14rem; }    /* 224px */
-.h-64    { height: 16rem; }    /* 256px */
-.h-70    { height: 20rem; }    /* 256px */
-.h-74    { max-height: 35rem; }    /* 256px */
-.h-full  { height: 100%; }
+.h-0 {
+  height: 0;
+}
 
-.h-screen{ height: 100vh; }
+.h-px {
+  height: 1px;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
+/* 4px */
+.h-2 {
+  height: 0.5rem;
+}
+
+/* 8px */
+.h-3 {
+  height: 0.75rem;
+}
+
+/* 12px */
+.h-4 {
+  height: 1rem;
+}
+
+/* 16px */
+.h-5 {
+  height: 1.25rem;
+}
+
+/* 20px */
+.h-6 {
+  height: 1.5rem;
+}
+
+/* 24px */
+.h-8 {
+  height: 2rem;
+}
+
+/* 32px */
+.h-10 {
+  height: 2.5rem;
+}
+
+/* 40px */
+.h-12 {
+  height: 3rem;
+}
+
+/* 48px */
+.h-16 {
+  height: 4rem;
+}
+
+/* 64px */
+.h-20 {
+  height: 5rem;
+}
+
+/* 80px */
+.h-24 {
+  height: 6rem;
+}
+
+/* 96px */
+.h-32 {
+  height: 8rem;
+}
+
+/* 128px */
+.h-40 {
+  height: 10rem;
+}
+
+/* 160px */
+.h-48 {
+  height: 12rem;
+}
+
+/* 192px */
+.h-56 {
+  height: 14rem;
+}
+
+/* 224px */
+.h-64 {
+  height: 16rem;
+}
+
+/* 256px */
+.h-70 {
+  height: 20rem;
+}
+
+/* 256px */
+.h-74 {
+  max-height: 35rem;
+}
+
+/* 256px */
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
 
 /* ==========================
    Base Widths
    ========================== */
-.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; }
+.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;
+}
 
 /* ==========================
    Responsive Variants
    ========================== */
-@media (min-width: 576px) { /* sm */
+@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; }
+  .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;
+  }
 
   /* Height */
-  .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; }
+  .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;
+  }
 
   /* Width */
-  .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; }
+  .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 */
+@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; }
+  .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;
+  }
 
   /* Height */
-  .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; }
+  .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;
+  }
 
   /* Width */
-  .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; }
+  .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 */
+@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; }
+  .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;
+  }
 
   /* Height */
-  .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; }
+  .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;
+  }
 
   /* Width */
-  .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; }
+  .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 */
+@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; }
+  .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;
+  }
 
   /* Height */
-  .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; }
+  .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;
+  }
 
   /* Width */
-  .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; }
+  .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;
+  }
 }
 
 
 /* ------------------------Text------------------------- */
 @media (min-width: 576px) {
-  .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; }
+  .fs-sm-1 {
+    font-size: calc(1.3rem + 1.6vw) !important;
+  }
 
-  .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; }
+  .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;
+  }
+
+  .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;
+  }
 }
 
 /* 💻 Medium devices (≥768px) */
 @media (min-width: 768px) {
-  .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; }
+  .fs-md-1 {
+    font-size: calc(1.4125rem + 1.95vw) !important;
+  }
 
-  .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; }
+  .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;
+  }
+
+  .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;
+  }
 }
+
+
+/* For Chrome, Edge, Safari */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-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/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/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