diff --git a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/__snapshots__/ConsultationListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/__snapshots__/ConsultationListView.test.tsx.snap
index e32ddbc68d..63b2a0bf9e 100644
--- a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/__snapshots__/ConsultationListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/__snapshots__/ConsultationListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`ConsultationListView component > renders as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`ConsultationListView component > renders as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -141,20 +211,20 @@ exports[`ConsultationListView component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c11.c11.btn {
+.c12.c12.btn {
   color: #aaaaaa;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c11.c11.btn .text {
+.c12.c12.btn .text {
   display: none;
 }
 
-.c11.c11.btn:hover,
-.c11.c11.btn:active,
-.c11.c11.btn:focus {
+.c12.c12.btn:hover,
+.c12.c12.btn:active,
+.c12.c12.btn:focus {
   color: #d8292f;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -168,42 +238,56 @@ exports[`ConsultationListView component > renders as expected 1`] = `
   flex-direction: row;
 }
 
-.c11.c11.btn:hover .text,
-.c11.c11.btn:active .text,
-.c11.c11.btn:focus .text {
+.c12.c12.btn:hover .text,
+.c12.c12.btn:active .text,
+.c12.c12.btn:focus .text {
   display: inline;
   line-height: 2rem;
 }
 
-.c13.required::before {
+.c14.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c12 {
+.c13 {
   font-weight: bold;
 }
 
-.c5.c5 {
+.c5.btn.btn-primary,
+.c5.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c6.c6 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
-.c9 {
+.c10 {
   float: right;
   cursor: pointer;
+  font-size: 3.2rem;
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -215,7 +299,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c6 {
+.c7 {
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -237,13 +321,14 @@ exports[`ConsultationListView component > renders as expected 1`] = `
   margin: 0;
 }
 
-.c10 {
-  border: solid 0.2rem;
+.c11 {
+  border: solid 0.2rem var(--theme-blue-90);
   margin-bottom: 1.5rem;
   border-radius: 0.5rem;
 }
 
-.c8 {
+.c9 {
+  background-color: #428bca;
   color: white;
   font-size: 1.4rem;
   border-radius: 50%;
@@ -265,7 +350,19 @@ exports[`ConsultationListView component > renders as expected 1`] = `
   align-items: center;
 }
 
-.c7 svg {
+.c8 svg.info {
+  color: #053662;
+}
+
+.c8 svg.error {
+  color: #CE3E39;
+}
+
+.c8 svg.ok {
+  color: #2e8540;
+}
+
+.c8 svg {
   vertical-align: baseline;
 }
 
@@ -296,7 +393,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="my-1 col-auto"
               >
                 <button
-                  class="c4 Button c5 btn btn-primary"
+                  class="c4 Button c5 c6 btn btn-primary"
                   type="button"
                 >
                   <div
@@ -327,7 +424,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
         class="collapse show"
       >
         <div
-          class="c6 form-section"
+          class="c7 form-section"
         >
           <h2
             class="c2"
@@ -339,7 +436,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c7 row"
+                  class="c8 row"
                 >
                   <div
                     class="col-auto"
@@ -368,7 +465,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c6 form-section"
+          class="c7 form-section"
         >
           <h2
             class="c2"
@@ -380,7 +477,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c7 row"
+                  class="c8 row"
                 >
                   <div
                     class="col-auto"
@@ -409,7 +506,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c6 form-section"
+          class="c7 form-section"
         >
           <h2
             class="c2"
@@ -421,7 +518,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c7 row"
+                  class="c8 row"
                 >
                   <div
                     class="col-auto"
@@ -450,7 +547,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c6 form-section"
+          class="c7 form-section"
         >
           <h2
             class="c2"
@@ -462,7 +559,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c7 row"
+                  class="c8 row"
                 >
                   <div
                     class="col-auto"
@@ -491,7 +588,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c6 form-section"
+          class="c7 form-section"
         >
           <h2
             class="c2"
@@ -503,7 +600,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c7 row"
+                  class="c8 row"
                 >
                   <div
                     class="col-auto"
@@ -533,7 +630,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                     class="px-0 col"
                   >
                     <div
-                      class="c8"
+                      class="c9"
                     >
                       2
                     </div>
@@ -544,7 +641,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="pl-8 d-flex align-items-end col-auto"
               >
                 <svg
-                  class="c9"
+                  class="c10"
                   fill="currentColor"
                   height="1em"
                   stroke="currentColor"
@@ -571,7 +668,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
             class="collapse"
           >
             <div
-              class="c10"
+              class="c11"
             >
               <div
                 class="c1 form-section"
@@ -598,7 +695,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                             class="px-1 col-auto"
                           >
                             <button
-                              class="c4 Button c11 btn btn-link"
+                              class="c4 Button c12 btn btn-link"
                               data-testid="consultations[0].delete-btn"
                               title="Delete Consultation"
                               type="button"
@@ -661,7 +758,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Requested on:
                         <span>
@@ -689,7 +786,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     >
                       Jan 1, 2024
                     </div>
@@ -701,7 +798,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Contact:
                         <span>
@@ -729,7 +826,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     />
                   </div>
                   <div
@@ -739,13 +836,13 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Response received:
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     >
                       Yes
                     </div>
@@ -757,13 +854,13 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Response received on:
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     >
                       Dec 1, 2024
                     </div>
@@ -775,7 +872,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Comments:
                         <span>
@@ -803,7 +900,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     >
                       test comment
                     </div>
@@ -812,7 +909,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
               </div>
             </div>
             <div
-              class="c10"
+              class="c11"
             >
               <div
                 class="c1 form-section"
@@ -839,7 +936,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                             class="px-1 col-auto"
                           >
                             <button
-                              class="c4 Button c11 btn btn-link"
+                              class="c4 Button c12 btn btn-link"
                               data-testid="consultations[1].delete-btn"
                               title="Delete Consultation"
                               type="button"
@@ -902,7 +999,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Requested on:
                         <span>
@@ -930,7 +1027,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     >
                       Jan 1, 2024
                     </div>
@@ -942,7 +1039,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Contact:
                         <span>
@@ -970,7 +1067,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     />
                   </div>
                   <div
@@ -980,13 +1077,13 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Response received:
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     >
                       Yes
                     </div>
@@ -998,13 +1095,13 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Response received on:
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     >
                       Dec 1, 2024
                     </div>
@@ -1016,7 +1113,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c13"
                       >
                         Comments:
                         <span>
@@ -1044,7 +1141,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c14 text-left col"
                     >
                       test comment
                     </div>
@@ -1055,7 +1152,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c6 form-section"
+          class="c7 form-section"
         >
           <h2
             class="c2"
@@ -1067,7 +1164,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c7 row"
+                  class="c8 row"
                 >
                   <div
                     class="col-auto"
@@ -1096,7 +1193,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c6 form-section"
+          class="c7 form-section"
         >
           <h2
             class="c2"
@@ -1108,7 +1205,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c7 row"
+                  class="c8 row"
                 >
                   <div
                     class="col-auto"