diff --git a/frontend/src/components/Style.css b/frontend/src/components/Style.css
index 1c6621f81..36ee57bc7 100644
--- a/frontend/src/components/Style.css
+++ b/frontend/src/components/Style.css
@@ -17,7 +17,6 @@
 
 .banner p {
   margin: 0;
-  /* padding: 5px 0; */
   font-size: 12px;
 }
 
@@ -55,20 +54,9 @@ li.clickableUserDetails:hover {
   --cds-text-secondary: black;
 }
 
-<<<<<<< Updated upstream
-.inputSearch , .inputSearch ,.inputText {
-  --cds-text-primary: black;
-  /*width: 100%;*/
-=======
-.inputText {
-  /* @extend .inputCommon; if using SCSS */
-  width: 100%;
-}
-
 .inputSearch {
-  /* @extend .inputCommon; */
->>>>>>> Stashed changes
   width: 50%;
+  --cds-text-primary: black;
   --cds-text-secondary: black;
   --cds-icon-primary: black;
 }
@@ -97,33 +85,17 @@ button {
   border-radius: 2px;
   padding: 5px 10px;
 }
-<<<<<<< Updated upstream
 
 .add_button {
   align-self: flex-start;
   display: flex;
   align-items: center;
   margin-top: 0.5rem;
-=======
-  /* Creating common class between add_button  and  remove_button so the can use common properties */
-.buttonBase {
-  border: 1px solid;
-  display: flex;
-  align-items: center;
-}
-
-.add_button {
-  /* @extend .buttonBase; */
->>>>>>> Stashed changes
   color: rgb(0, 208, 255);
   border: 1px solid rgb(0, 208, 255);
 }
 
 .remove-btn {
-<<<<<<< Updated upstream
-=======
-  /* @extend .buttonBase; */
->>>>>>> Stashed changes
   color: red;
   border: 1px solid red;
 }
@@ -132,39 +104,22 @@ button {
   display: flex;
   justify-content: space-between;
 }
-<<<<<<< Updated upstream
 
 .ruleBody {
   border: 0.5px solid #295785;
   border-radius: 5px;
-=======
- /* Creating  or introducing  a new common class (e.g., .commonBoundary)  for use common properties od
-  rule.body and .gridBoundary */
-.commonBoundary {
-  border: 0.5px solid #295785;
-  border-radius: 5px;
-}
-
-.ruleBody {
-  /* @extend .commonBoundary; */
->>>>>>> Stashed changes
   margin: 2%;
   padding: 0.5%;
 }
 
 .gridBoundary {
-<<<<<<< Updated upstream
   border: 0.5px solid #295785;
   border-radius: 5px;
-=======
-  /* @extend .commonBoundary; */
->>>>>>> Stashed changes
   padding: 1%;
   box-shadow: 4px 2px 4px #d3d3d3;
   margin-bottom: 1%;
 }
 
-<<<<<<< Updated upstream
 .columnBoundary {
   border: 0.5px solid #295785;
   border-radius: 5px;
@@ -173,37 +128,13 @@ button {
   width: 120%;
 }
 
-=======
-
-/*Create a common class for these shared properties (e.g., .boundary) */
-
-.boundary {
-  border-radius: 5px;
-  border: 0.5px solid #295785;
-  margin: 2%; 
-  padding: 1%;
-}
-
-.columnBoundary {
-  /* @extend .boundary;  */
-  width: 120%;
-}
-
-.section {
- 
-  border-color: green;
-  border-radius: 3px;
-  margin: 0.5%;
-}
-
-
->>>>>>> Stashed changes
 .inlineDiv {
   display: flex;
   margin-top: 2%;
   margin-bottom: 3%;
   margin-left: 1%;
 }
+
 .section {
   border: 0.5px solid green;
   border-radius: 3px;
@@ -233,51 +164,25 @@ button {
 }
 
 .middleAlign {
-<<<<<<< Updated upstream
-  height: 100%;
-  display: flex;
-=======
-
->>>>>>> Stashed changes
   align-items: center;
   justify-content: center;
 }
 
 .middleAlignHorizontal {
-<<<<<<< Updated upstream
-  display: flex;
-  /* align-items: center; */
-=======
- 
->>>>>>> Stashed changes
   justify-content: center;
 }
+
 .middleAlignVertical {
-<<<<<<< Updated upstream
-  height: 100%;
-  display: flex;
-=======
-  
->>>>>>> Stashed changes
   align-items: center;
-  /* justify-content: center; */
 }
+
 .bottomAlign {
-<<<<<<< Updated upstream
-=======
-  /* @extend .flexCenter; */
-  align-items: flex-end;
->>>>>>> Stashed changes
   height: 100%;
   display: flex;
   align-items: flex-end;
-  /* justify-content: center; */
 }
 
 .formInlineDiv {
-  /* display: flex;
-  flex-wrap: nowrap;
-  width: 100%; */
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 2%;
@@ -299,13 +204,11 @@ button {
 }
 
 .sampleInfo {
-  /* margin-left: 0%;  */
   margin-left: 0%;
   margin-right: 0%;
 }
 
 .referralRow {
-  /* margin-right: 50%; */
   margin-left: 5%;
   width: 100%;
 }
@@ -314,88 +217,23 @@ button {
   margin-right: 20px;
 }
 
-/* .resultValue {
- 
-  margin-left: 5%;
-  width: 100%;
-}
-
-.currentResultValue {
- 
-  margin-left: 5%;
-  width: 100%;
-} */
-
 .referralReason {
   margin-left: 25%;
   margin-right: 5%;
   width: 100%;
 }
+
 .institute {
   margin-left: 5%;
   margin-right: 5%;
   width: 100%;
 }
 
-<<<<<<< Updated upstream
-/* Results */
-.inputText {
-  --cds-text-primary: black;
-=======
-.resultPageContent {
-  /* @extend .contentMargins; */
-  margin-right: 0%; /* Override if needed */
-}
-
-.searchLabNumber,
-.sampleInfo {
-  /* @extend .contentMargins; */
-  margin-left: 0%; /* Overrides */
-  margin-right: 0%;
-}
-
-
-/* Use common class for Shared  properties */
-.inputCommon {
-  --cds-text-primary: black;
-  --cds-text-secondary: black;
-}
-
-.inputText {
-  /* @extend .inputCommon; */
->>>>>>> Stashed changes
-  width: 100%;
-  --cds-text-secondary: black;
-  /* margin-top: 0.1%; */
-}
-
 .inputText2 {
-<<<<<<< Updated upstream
-=======
-  /* @extend .inputCommon; */
-  width: 380px;
-  padding-left: 1%;
-}
-
-
-.inputCommon {
->>>>>>> Stashed changes
   --cds-text-primary: black;
   width: 380px;
   --cds-text-secondary: black;
-<<<<<<< Updated upstream
   padding-left: 1%;
-  /* margin-top: 0.1%; */
-=======
-}
-
-.inputSelect,
-.inputSelect2,
-.selectSampleType {
-  /* @extend .inputCommon; */
-  --cds-text-primary: black;
-  --cds-text-secondary: black;
->>>>>>> Stashed changes
 }
 
 .inputSelect {
@@ -426,58 +264,6 @@ button {
   padding-top: 5%;
 }
 
-button {
-  background: none;
-  outline: none;
-  cursor: pointer;
-  font-weight: 500;
-  border-radius: 2px;
-  padding: 5px 10px;
-}
-
-<<<<<<< Updated upstream
-=======
-/*  We can Cerate a common class for add and  remove buttons  */
-.buttonBase {
-  background: none;
-  outline: none;
-  cursor: pointer;
-  font-weight: 500;
-  border-radius: 2px;
-  padding: 5px 10px;
-}
-
-.add_button,
-.remove-btn {
-  /* @extend .buttonBase; */
-  background: none;
-  outline: none;
-  cursor: pointer;
-  font-weight: 500;
-  border-radius: 2px;
-  padding: 5px 10px;
-}
-
->>>>>>> Stashed changes
-.add_button {
-  align-self: flex-start;
-  display: flex;
-  align-items: center;
-  margin-top: 0.5rem;
-  color: rgb(0, 208, 255);
-  border: 1px solid rgb(0, 208, 255);
-}
-
-.remove-btn {
-  color: red;
-  border: 1px solid red;
-}
-
-.services {
-  display: flex;
-  justify-content: space-between;
-}
-
 .resultBody {
   border: 0.5px solid #295785;
   border-radius: 5px;
@@ -485,29 +271,6 @@ button {
   padding: 0.5%;
 }
 
-<<<<<<< Updated upstream
-.inlineDiv {
-=======
-/* Create ac common class for inlineDiv and result  */
-.flexSpaceBetween {
->>>>>>> Stashed changes
-  display: flex;
-  margin-top: 2%;
-  margin-bottom: 3%;
-  margin-left: 1%;
-}
-
-<<<<<<< Updated upstream
-=======
-.inlineDiv,
-.results {
-  /* @extend .flexSpaceBetween; */
-  display: flex;
-  justify-content: space-between;
-}
-
-
->>>>>>> Stashed changes
 .section {
   border: 0.5px solid green;
   border-radius: 3px;
@@ -522,16 +285,12 @@ button {
   margin-top: 0.25rem;
 }
 
-.errorMessage::before {
-  content: " ";
-  font-size: 10px;
-}
-
 .requiredFieldIndicator {
   color: red;
 }
+
 .toastDisplay {
-  position: fixed; /*or fixed*/
+  position: fixed;
   top: 47px;
   right: 0px;
   z-index: 10;
@@ -550,38 +309,11 @@ button {
   text-align: justify;
   padding: 0.6875rem 1rem;
 }
-<<<<<<< Updated upstream
-
-.error {
-  font-size: 12px;
-  color: red;
-  margin-bottom: 0.25rem;
-  /* width: 150px; */
-  /* 
-	  &:before {
-	    content: " ";
-	    font-size: 10px;
-	  } */
-=======
-/*  Creating a common class for errorMessage and error  */
-.errorBase {
-  font-size: 12px;
-  color: red;
-  margin-bottom: 0.25rem;
-}
-
-.errorMessage {
-  /* @extend .errorBase; */
-  width: 150px;
-  margin-top: 0.25rem;
-}
 
 .error {
-  /* @extend .errorBase; */
   font-size: 12px;
   color: red;
   margin-bottom: 0.25rem;
->>>>>>> Stashed changes
 }
 
 .second-row {
@@ -592,9 +324,11 @@ button {
 .first-row {
   max-width: 500px;
 }
+
 .searchResultsBtn {
   margin: 10px !important;
 }
+
 .advancedSearchResultsBtn {
   margin: 10px !important;
 }
@@ -646,118 +380,309 @@ button {
 
 .custom-sidenav-button {
   box-sizing: border-box;
-  margin: 0;
-  border: 0;
+  margin-bottom: 8px;
+  padding: 10px;
+  width: 100%;
+  text-align: left;
+}
+
+.custom-dropdown {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 5px;
+  width: 200px;
   cursor: pointer;
+}
+
+.custom-dropdown:hover {
+  border-color: #007aff;
+}
+
+.custom-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-tooltip .tooltip-text {
+  visibility: hidden;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.custom-tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+.custom-badge {
+  display: inline-block;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #fff;
+  background-color: #007aff;
+  border-radius: 12px;
+}
+
+.card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+.card {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.card h3 {
+  margin-top: 0;
+}
+
+.card p {
+  margin-bottom: 0;
+  color: #555;
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border-radius: 8px;
+  width: 50%;
+  max-width: 500px;
+  padding: 20px;
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.modal-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  background-color: var(--cds-background-hover, #072655);
-  color: var(--cds-text-secondary, #ffffff);
-  transition:
-    color 110ms,
-    background-color 110ms,
-    outline 110ms;
-  -webkit-user-select: none;
-  user-select: none;
-  width: 100%;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 10px;
+}
+
+.modal-header h2 {
+  margin: 0;
+}
+
+.modal-body {
+  padding: 10px 0;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 10px;
 }
 
-<<<<<<< Updated upstream
+.btn-primary {
+  background-color: #007aff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.btn-primary:hover {
+  background-color: #005bb5;
+}
+
+.btn-secondary {
+  background-color: #f4f4f4;
+  color: #555;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.btn-secondary:hover {
+  background-color: #e0e0e0;
+}
 .custom-sidenav-button {
-  pointer-events: auto;
-=======
-.custom-sidenav-button,
-.cds--side-nav__link-text {
-  /* @extend .sidenavButtonBase; */
   box-sizing: border-box;
   margin: 0;
-  border: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  background-color: var(--cds-background-hover, #072655);
-  color: var(--cds-text-secondary, #ffffff);
-  transition: color 110ms, background-color 110ms, outline 110ms;
-  -webkit-user-select: none;
-  user-select: none;
+  padding: 10px;
   width: 100%;
->>>>>>> Stashed changes
+  text-align: left;
 }
 
-.custom-sidenav-button:hover {
-  background-color: var(--cds-background, #295785);
+.custom-dropdown {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 5px;
+  width: 200px;
+  cursor: pointer;
 }
 
-.cds--side-nav__link a {
-  pointer-events: auto;
-  text-decoration: none !important;
+.custom-dropdown:hover {
+  border-color: #007aff;
 }
 
-.cds--side-nav__link a:hover {
-  background-color: var(--cds-background, #295785);
+.custom-tooltip {
+  position: relative;
+  display: inline-block;
 }
 
-.reduced-padding-nav-menu-item > a.cds--side-nav__link {
-  padding-left: 1rem !important;
+.custom-tooltip .tooltip-text {
+  visibility: hidden;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.custom-tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+.custom-badge {
+  display: inline-block;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #fff;
+  background-color: #007aff;
+  border-radius: 12px;
 }
 
-.top-level-menu-item > a {
-  pointer-events: auto !important;
-  text-decoration: none !important;
+.card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 16px;
 }
 
-.top-level-menu-item > a:hover {
-  background-color: var(--cds-background-hover, #072655);
+.card {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-#mainHeader .cds--side-nav__link {
-  pointer-events: none;
+.card h3 {
+  margin-top: 0;
 }
 
-@media screen and (max-width: 792px) {
-  .banner h5 {
-    font-size: 1.8vw;
-  }
-  .banner p {
-    font-size: 1.4vw;
-  }
-  .formInlineDiv {
-    grid-template-columns: 1fr;
-  }
+.card p {
+  margin-bottom: 0;
+  color: #555;
 }
-@media screen and (max-width: 550px) {
-  .adminPageContent {
-    margin-left: 15%;
-  }
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border-radius: 8px;
+  width: 50%;
+  max-width: 500px;
+  padding: 20px;
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
-@media screen and (max-width: 460px) {
-  .inlineDiv {
-    flex-direction: column;
-  }
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
 }
-@media screen and (max-width: 500px) {
-  .adminPageContent {
-    margin-left: 17%;
-  }
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 10px;
 }
 
-@media screen and (max-width: 322px) {
-  .logo {
-    height: 35px;
-  }
+.modal-header h2 {
+  margin: 0;
+}
+
+.modal-body {
+  padding: 10px 0;
+}
 
-  #header-logo {
-    margin-left: 0px;
-  }
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 10px;
+}
 
-  .banner p {
-    font-size: 1.6vw;
-  }
+.btn-primary {
+  background-color: #007aff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s;
 }
 
-@media screen and (max-width: 375px) {
-  .headerPanel {
-    width: 14rem;
-  }
+.btn-primary:hover {
+  background-color: #005bb5;
 }
+
+.btn-secondary {
+  background-color: #f4f4f4;
+  color: #555;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.btn-secondary:hover {
+  background-color: #e0e0e0;
+}
+
+