diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap
index a68f718c78..c158b27590 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 }
 
 <div />
-  .c9.btn {
+  .c10.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -43,19 +43,19 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c9.btn .Button__value {
+.c10.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c9.btn:hover {
+.c10.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c9.btn:focus {
+.c10.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -63,31 +63,31 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   box-shadow: none;
 }
 
-.c9.btn.btn-primary {
+.c10.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c9.btn.btn-primary:hover,
-.c9.btn.btn-primary:active,
-.c9.btn.btn-primary:focus {
+.c10.btn.btn-primary:hover,
+.c10.btn.btn-primary:active,
+.c10.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c9.btn.btn-secondary {
+.c10.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c9.btn.btn-secondary:hover,
-.c9.btn.btn-secondary:active,
-.c9.btn.btn-secondary:focus {
+.c10.btn.btn-secondary:hover,
+.c10.btn.btn-secondary:active,
+.c10.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c9.btn.btn-info {
+.c10.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -95,66 +95,66 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   padding-right: 0.6rem;
 }
 
-.c9.btn.btn-info:hover,
-.c9.btn.btn-info:active,
-.c9.btn.btn-info:focus {
+.c10.btn.btn-info:hover,
+.c10.btn.btn-info:active,
+.c10.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c9.btn.btn-light {
+.c10.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c9.btn.btn-light:hover,
-.c9.btn.btn-light:active,
-.c9.btn.btn-light:focus {
+.c10.btn.btn-light:hover,
+.c10.btn.btn-light:active,
+.c10.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c9.btn.btn-dark {
+.c10.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c9.btn.btn-dark:hover,
-.c9.btn.btn-dark:active,
-.c9.btn.btn-dark:focus {
+.c10.btn.btn-dark:hover,
+.c10.btn.btn-dark:active,
+.c10.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c9.btn.btn-danger {
+.c10.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c9.btn.btn-danger:hover,
-.c9.btn.btn-danger:active,
-.c9.btn.btn-danger:focus {
+.c10.btn.btn-danger:hover,
+.c10.btn.btn-danger:active,
+.c10.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c9.btn.btn-warning {
+.c10.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c9.btn.btn-warning:hover,
-.c9.btn.btn-warning:active,
-.c9.btn.btn-warning:focus {
+.c10.btn.btn-warning:hover,
+.c10.btn.btn-warning:active,
+.c10.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c9.btn.btn-link {
+.c10.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -178,9 +178,9 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   text-decoration: underline;
 }
 
-.c9.btn.btn-link:hover,
-.c9.btn.btn-link:active,
-.c9.btn.btn-link:focus {
+.c10.btn.btn-link:hover,
+.c10.btn.btn-link:active,
+.c10.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -190,15 +190,15 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   outline: none;
 }
 
-.c9.btn.btn-link:disabled,
-.c9.btn.btn-link.disabled {
+.c10.btn.btn-link:disabled,
+.c10.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c9.btn:disabled,
-.c9.btn:disabled:hover {
+.c10.btn:disabled,
+.c10.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -210,18 +210,31 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   cursor: not-allowed;
 }
 
-.c9.Button .Button__icon {
+.c10.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c9.Button--icon-only:focus {
+.c10.Button--icon-only:focus {
   outline: none;
 }
 
-.c9.Button--icon-only .Button__icon {
+.c10.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-right: 0.6rem;
+  color: #42814A;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -250,6 +263,17 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   flex-wrap: nowrap;
 }
 
+.c6 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 0;
+}
+
 .c1.form-group {
   display: -webkit-box;
   display: -webkit-flex;
@@ -298,7 +322,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   margin-bottom: unset;
 }
 
-.c7 {
+.c8 {
   border-left: 1px solid white;
   font-size: 3.4rem;
   margin: 0 36px 0 36px;
@@ -312,7 +336,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   max-width: 85%;
 }
 
-.c8 {
+.c9 {
   padding-right: 0rem;
   padding-left: 1rem;
 }
@@ -325,13 +349,6 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   max-width: 25rem;
 }
 
-.c6 {
-  display: inline-block;
-  margin: 0rem 0.5rem;
-  padding: 0.2rem;
-  color: #42814A;
-}
-
 @media only screen and (max-width:1199px) {
   .c0 {
     max-width: 50%;
@@ -540,51 +557,61 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
             </div>
           </div>
           <div
-            class="pl-0 col"
+            class="pl-4 col"
           >
             <div
-              class="d-inline-block m-0 form-group"
+              class="c2 c6"
             >
               <div
-                class="check-field"
+                class="d-inline-block m-0 form-group"
               >
                 <div
-                  class="form-check"
+                  class="check-field"
                 >
-                  <input
-                    checked=""
-                    class="form-check-input position-static"
-                    id="input-activeContactsOnly"
-                    name="activeContactsOnly"
-                    type="checkbox"
-                    value="true"
-                  />
+                  <div
+                    class="form-check"
+                  >
+                    <input
+                      checked=""
+                      class="form-check-input position-static"
+                      id="input-activeContactsOnly"
+                      name="activeContactsOnly"
+                      type="checkbox"
+                      value="true"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="c6"
-            >
-              <svg
-                fill="currentColor"
-                height="16"
-                stroke="currentColor"
-                stroke-width="0"
-                viewBox="0 0 512 512"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="c7"
+                data-testid="active-indicator"
+              >
+                <svg
+                  fill="currentColor"
+                  height="16"
+                  stroke="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 512 512"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    Active
+                  </title>
+                  <path
+                    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                  />
+                </svg>
+              </div>
+              <span
+                class="ml-1"
               >
-                <path
-                  d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
-                />
-              </svg>
+                <b>
+                  Active
+                </b>
+                 contacts only
+              </span>
             </div>
-            <span>
-              <b>
-                Active
-              </b>
-               contacts only
-            </span>
           </div>
         </div>
       </div>
@@ -598,7 +625,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
             class="pr-0 col-auto"
           >
             <span
-              class="c7"
+              class="c8"
             />
           </div>
           <div
@@ -608,10 +635,10 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
               class="row"
             >
               <div
-                class="c8 col-auto"
+                class="c9 col-auto"
               >
                 <button
-                  class="c9 Button Button--icon-only primary btn btn-primary"
+                  class="c10 Button Button--icon-only primary btn btn-primary"
                   data-testid="search"
                   id="search-button"
                   title="search"
@@ -637,10 +664,10 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
                 </button>
               </div>
               <div
-                class="c8 col-auto"
+                class="c9 col-auto"
               >
                 <button
-                  class="c9 Button Button--icon-only btn btn-info"
+                  class="c10 Button Button--icon-only btn btn-info"
                   data-testid="reset-button"
                   id="reset-button"
                   title="reset-button"
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
index 19b12bfab3..3858623cad 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c7.btn {
+  .c8.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,19 +35,19 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c7.btn .Button__value {
+.c8.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c7.btn:hover {
+.c8.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c7.btn:focus {
+.c8.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -55,31 +55,31 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   box-shadow: none;
 }
 
-.c7.btn.btn-primary {
+.c8.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c7.btn.btn-primary:hover,
-.c7.btn.btn-primary:active,
-.c7.btn.btn-primary:focus {
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:active,
+.c8.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c7.btn.btn-secondary {
+.c8.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c7.btn.btn-secondary:hover,
-.c7.btn.btn-secondary:active,
-.c7.btn.btn-secondary:focus {
+.c8.btn.btn-secondary:hover,
+.c8.btn.btn-secondary:active,
+.c8.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c7.btn.btn-info {
+.c8.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -87,66 +87,66 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   padding-right: 0.6rem;
 }
 
-.c7.btn.btn-info:hover,
-.c7.btn.btn-info:active,
-.c7.btn.btn-info:focus {
+.c8.btn.btn-info:hover,
+.c8.btn.btn-info:active,
+.c8.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c7.btn.btn-light {
+.c8.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c7.btn.btn-light:hover,
-.c7.btn.btn-light:active,
-.c7.btn.btn-light:focus {
+.c8.btn.btn-light:hover,
+.c8.btn.btn-light:active,
+.c8.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c7.btn.btn-dark {
+.c8.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c7.btn.btn-dark:hover,
-.c7.btn.btn-dark:active,
-.c7.btn.btn-dark:focus {
+.c8.btn.btn-dark:hover,
+.c8.btn.btn-dark:active,
+.c8.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c7.btn.btn-danger {
+.c8.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c7.btn.btn-danger:hover,
-.c7.btn.btn-danger:active,
-.c7.btn.btn-danger:focus {
+.c8.btn.btn-danger:hover,
+.c8.btn.btn-danger:active,
+.c8.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c7.btn.btn-warning {
+.c8.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c7.btn.btn-warning:hover,
-.c7.btn.btn-warning:active,
-.c7.btn.btn-warning:focus {
+.c8.btn.btn-warning:hover,
+.c8.btn.btn-warning:active,
+.c8.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c7.btn.btn-link {
+.c8.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -170,9 +170,9 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   text-decoration: underline;
 }
 
-.c7.btn.btn-link:hover,
-.c7.btn.btn-link:active,
-.c7.btn.btn-link:focus {
+.c8.btn.btn-link:hover,
+.c8.btn.btn-link:active,
+.c8.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -182,15 +182,15 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   outline: none;
 }
 
-.c7.btn.btn-link:disabled,
-.c7.btn.btn-link.disabled {
+.c8.btn.btn-link:disabled,
+.c8.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c7.btn:disabled,
-.c7.btn:disabled:hover {
+.c8.btn:disabled,
+.c8.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -202,66 +202,66 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   cursor: not-allowed;
 }
 
-.c7.Button .Button__icon {
+.c8.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c7.Button--icon-only:focus {
+.c8.Button--icon-only:focus {
   outline: none;
 }
 
-.c7.Button--icon-only .Button__icon {
+.c8.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c8.c8.btn {
+.c9.c9.btn {
   background-color: unset;
   border: none;
 }
 
-.c8.c8.btn:hover,
-.c8.c8.btn:focus,
-.c8.c8.btn:active {
+.c9.c9.btn:hover,
+.c9.c9.btn:focus,
+.c9.c9.btn:active {
   background-color: unset;
   outline: none;
   box-shadow: none;
 }
 
-.c8.c8.btn svg {
+.c9.c9.btn svg {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
 
-.c8.c8.btn svg:hover {
+.c9.c9.btn svg:hover {
   -webkit-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
 
-.c8.c8.btn.btn-primary svg {
+.c9.c9.btn.btn-primary svg {
   color: #013366;
 }
 
-.c8.c8.btn.btn-primary svg:hover {
+.c9.c9.btn.btn-primary svg:hover {
   color: #013366;
 }
 
-.c8.c8.btn.btn-light svg {
+.c9.c9.btn.btn-light svg {
   color: var(--surface-color-primary-button-default);
 }
 
-.c8.c8.btn.btn-light svg:hover {
+.c9.c9.btn.btn-light svg:hover {
   color: #CE3E39;
 }
 
-.c8.c8.btn.btn-info svg {
+.c9.c9.btn.btn-info svg {
   color: var(--surface-color-primary-button-default);
 }
 
-.c8.c8.btn.btn-info svg:hover {
+.c9.c9.btn.btn-info svg:hover {
   color: var(--surface-color-primary-button-hover);
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -300,7 +300,33 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   height: 1.6rem;
 }
 
-.c6 {
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-right: 0.6rem;
+  color: #42814A;
+}
+
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-right: 0.6rem;
+  color: #9F9D9C;
+}
+
+.c7 {
   -webkit-box-pack: space-around;
   -webkit-justify-content: space-around;
   -ms-flex-pack: space-around;
@@ -308,15 +334,15 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   width: 100%;
 }
 
-.c3 {
+.c4 {
   color: #606060;
 }
 
-.c3.active {
+.c4.active {
   color: #42814A;
 }
 
-.c4 a {
+.c5 a {
   font-weight: bold;
   color: #428bca !important;
 }
@@ -689,10 +715,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 active"
+              class="c3"
+              data-testid="active-indicator"
             >
               <svg
-                class="mr-2"
                 fill="currentColor"
                 height="10"
                 stroke="currentColor"
@@ -701,6 +727,9 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
                 width="10"
                 xmlns="http://www.w3.org/2000/svg"
               >
+                <title>
+                  Active
+                </title>
                 <path
                   d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
                 />
@@ -714,7 +743,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 active"
+              class="c4 active"
             >
               <svg
                 fill="currentColor"
@@ -738,7 +767,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c4"
+              class="c5"
             >
               <a
                 href="/contact/1"
@@ -808,10 +837,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c5 c6"
+              class="c6 c7"
             >
               <button
-                class="c7 Button c8 btn btn-primary"
+                class="c8 Button c9 btn btn-primary"
                 data-testid="view-button"
                 title="View Contact"
                 type="button"
@@ -869,10 +898,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 active"
+              class="c3"
+              data-testid="active-indicator"
             >
               <svg
-                class="mr-2"
                 fill="currentColor"
                 height="10"
                 stroke="currentColor"
@@ -881,6 +910,9 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
                 width="10"
                 xmlns="http://www.w3.org/2000/svg"
               >
+                <title>
+                  Active
+                </title>
                 <path
                   d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
                 />
@@ -894,7 +926,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 active"
+              class="c4 active"
             >
               <svg
                 fill="currentColor"
@@ -918,7 +950,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c4"
+              class="c5"
             >
               <a
                 href="/contact/2"
@@ -988,10 +1020,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c5 c6"
+              class="c6 c7"
             >
               <button
-                class="c7 Button c8 btn btn-primary"
+                class="c8 Button c9 btn btn-primary"
                 data-testid="view-button"
                 title="View Contact"
                 type="button"
@@ -1049,10 +1081,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 inactive"
+              class="c10"
+              data-testid="active-indicator"
             >
               <svg
-                class="mr-2"
                 fill="currentColor"
                 height="10"
                 stroke="currentColor"
@@ -1061,6 +1093,9 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
                 width="10"
                 xmlns="http://www.w3.org/2000/svg"
               >
+                <title>
+                  Inactive
+                </title>
                 <path
                   d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
                 />
@@ -1074,7 +1109,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 inactive"
+              class="c4 inactive"
             >
               <svg
                 fill="currentColor"
@@ -1098,7 +1133,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c4"
+              class="c5"
             >
               <a
                 href="/contact/3"
@@ -1168,10 +1203,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c5 c6"
+              class="c6 c7"
             >
               <button
-                class="c7 Button c8 btn btn-primary"
+                class="c8 Button c9 btn btn-primary"
                 data-testid="view-button"
                 title="View Contact"
                 type="button"
diff --git a/source/frontend/src/components/contact/ContactManagerView/__snapshots__/ContactManagerView.test.tsx.snap b/source/frontend/src/components/contact/ContactManagerView/__snapshots__/ContactManagerView.test.tsx.snap
index f4a2f87bbb..63200295c5 100644
--- a/source/frontend/src/components/contact/ContactManagerView/__snapshots__/ContactManagerView.test.tsx.snap
+++ b/source/frontend/src/components/contact/ContactManagerView/__snapshots__/ContactManagerView.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 }
 
 <div />
-  .c9.btn {
+  .c10.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -43,19 +43,19 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c9.btn .Button__value {
+.c10.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c9.btn:hover {
+.c10.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c9.btn:focus {
+.c10.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -63,31 +63,31 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   box-shadow: none;
 }
 
-.c9.btn.btn-primary {
+.c10.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c9.btn.btn-primary:hover,
-.c9.btn.btn-primary:active,
-.c9.btn.btn-primary:focus {
+.c10.btn.btn-primary:hover,
+.c10.btn.btn-primary:active,
+.c10.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c9.btn.btn-secondary {
+.c10.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c9.btn.btn-secondary:hover,
-.c9.btn.btn-secondary:active,
-.c9.btn.btn-secondary:focus {
+.c10.btn.btn-secondary:hover,
+.c10.btn.btn-secondary:active,
+.c10.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c9.btn.btn-info {
+.c10.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -95,66 +95,66 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   padding-right: 0.6rem;
 }
 
-.c9.btn.btn-info:hover,
-.c9.btn.btn-info:active,
-.c9.btn.btn-info:focus {
+.c10.btn.btn-info:hover,
+.c10.btn.btn-info:active,
+.c10.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c9.btn.btn-light {
+.c10.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c9.btn.btn-light:hover,
-.c9.btn.btn-light:active,
-.c9.btn.btn-light:focus {
+.c10.btn.btn-light:hover,
+.c10.btn.btn-light:active,
+.c10.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c9.btn.btn-dark {
+.c10.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c9.btn.btn-dark:hover,
-.c9.btn.btn-dark:active,
-.c9.btn.btn-dark:focus {
+.c10.btn.btn-dark:hover,
+.c10.btn.btn-dark:active,
+.c10.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c9.btn.btn-danger {
+.c10.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c9.btn.btn-danger:hover,
-.c9.btn.btn-danger:active,
-.c9.btn.btn-danger:focus {
+.c10.btn.btn-danger:hover,
+.c10.btn.btn-danger:active,
+.c10.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c9.btn.btn-warning {
+.c10.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c9.btn.btn-warning:hover,
-.c9.btn.btn-warning:active,
-.c9.btn.btn-warning:focus {
+.c10.btn.btn-warning:hover,
+.c10.btn.btn-warning:active,
+.c10.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c9.btn.btn-link {
+.c10.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -178,9 +178,9 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   text-decoration: underline;
 }
 
-.c9.btn.btn-link:hover,
-.c9.btn.btn-link:active,
-.c9.btn.btn-link:focus {
+.c10.btn.btn-link:hover,
+.c10.btn.btn-link:active,
+.c10.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -190,15 +190,15 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   outline: none;
 }
 
-.c9.btn.btn-link:disabled,
-.c9.btn.btn-link.disabled {
+.c10.btn.btn-link:disabled,
+.c10.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c9.btn:disabled,
-.c9.btn:disabled:hover {
+.c10.btn:disabled,
+.c10.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -210,18 +210,31 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   cursor: not-allowed;
 }
 
-.c9.Button .Button__icon {
+.c10.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c9.Button--icon-only:focus {
+.c10.Button--icon-only:focus {
   outline: none;
 }
 
-.c9.Button--icon-only .Button__icon {
+.c10.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-right: 0.6rem;
+  color: #42814A;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -240,7 +253,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -259,12 +272,12 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   margin-left: 0.5rem;
 }
 
-.c12 {
+.c13 {
   width: 1.6rem;
   height: 1.6rem;
 }
 
-.c11 {
+.c12 {
   width: 1.6rem;
   height: 1.6rem;
 }
@@ -279,7 +292,18 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   flex-wrap: nowrap;
 }
 
-.c13 {
+.c6 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 0;
+}
+
+.c14 {
   font-size: 1.4rem;
   color: #42814A;
 }
@@ -332,7 +356,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   margin-bottom: unset;
 }
 
-.c7 {
+.c8 {
   border-left: 1px solid white;
   font-size: 3.4rem;
   margin: 0 36px 0 36px;
@@ -346,7 +370,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   max-width: 85%;
 }
 
-.c8 {
+.c9 {
   padding-right: 0rem;
   padding-left: 1rem;
 }
@@ -359,13 +383,6 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   max-width: 25rem;
 }
 
-.c6 {
-  display: inline-block;
-  margin: 0rem 0.5rem;
-  padding: 0.2rem;
-  color: #42814A;
-}
-
 @media only screen and (max-width:1199px) {
   .c0 {
     max-width: 50%;
@@ -581,51 +598,61 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="pl-0 col"
+                  class="pl-4 col"
                 >
                   <div
-                    class="d-inline-block m-0 form-group"
+                    class="c2 c6"
                   >
                     <div
-                      class="check-field"
+                      class="d-inline-block m-0 form-group"
                     >
                       <div
-                        class="form-check"
+                        class="check-field"
                       >
-                        <input
-                          checked=""
-                          class="form-check-input position-static"
-                          id="input-activeContactsOnly"
-                          name="activeContactsOnly"
-                          type="checkbox"
-                          value="true"
-                        />
+                        <div
+                          class="form-check"
+                        >
+                          <input
+                            checked=""
+                            class="form-check-input position-static"
+                            id="input-activeContactsOnly"
+                            name="activeContactsOnly"
+                            type="checkbox"
+                            value="true"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="c6"
-                  >
-                    <svg
-                      fill="currentColor"
-                      height="16"
-                      stroke="currentColor"
-                      stroke-width="0"
-                      viewBox="0 0 512 512"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="c7"
+                      data-testid="active-indicator"
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="16"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 512 512"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <title>
+                          Active
+                        </title>
+                        <path
+                          d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                        />
+                      </svg>
+                    </div>
+                    <span
+                      class="ml-1"
                     >
-                      <path
-                        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
-                      />
-                    </svg>
+                      <b>
+                        Active
+                      </b>
+                       contacts only
+                    </span>
                   </div>
-                  <span>
-                    <b>
-                      Active
-                    </b>
-                     contacts only
-                  </span>
                 </div>
               </div>
             </div>
@@ -639,7 +666,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                   class="pr-0 col-auto"
                 >
                   <span
-                    class="c7"
+                    class="c8"
                   />
                 </div>
                 <div
@@ -649,10 +676,10 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     class="row"
                   >
                     <div
-                      class="c8 col-auto"
+                      class="c9 col-auto"
                     >
                       <button
-                        class="c9 Button Button--icon-only primary btn btn-primary"
+                        class="c10 Button Button--icon-only primary btn btn-primary"
                         data-testid="search"
                         id="search-button"
                         title="search"
@@ -678,10 +705,10 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                       </button>
                     </div>
                     <div
-                      class="c8 col-auto"
+                      class="c9 col-auto"
                     >
                       <button
-                        class="c9 Button Button--icon-only btn btn-info"
+                        class="c10 Button Button--icon-only btn btn-info"
                         data-testid="reset-button"
                         id="reset-button"
                         title="reset-button"
@@ -782,11 +809,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 Summary
                 <div
-                  class="c10"
+                  class="c11"
                   data-testid="sort-column-summary"
                 >
                   <svg
-                    class="c11"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -801,7 +828,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c12"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -828,11 +855,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 First name
                 <div
-                  class="c10"
+                  class="c11"
                   data-testid="sort-column-firstName"
                 >
                   <svg
-                    class="c11"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -847,7 +874,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c12"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -874,11 +901,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 Last name
                 <div
-                  class="c10"
+                  class="c11"
                   data-testid="sort-column-surname"
                 >
                   <svg
-                    class="c11"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -893,7 +920,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c12"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -920,11 +947,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 Organization
                 <div
-                  class="c10"
+                  class="c11"
                   data-testid="sort-column-organizationName"
                 >
                   <svg
-                    class="c11"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -939,7 +966,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c12"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -990,11 +1017,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 City
                 <div
-                  class="c10"
+                  class="c11"
                   data-testid="sort-column-municipalityName"
                 >
                   <svg
-                    class="c11"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -1009,7 +1036,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c12"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -1067,7 +1094,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
           class="ml-auto align-self-center col-auto"
         >
           <p
-            class="c13"
+            class="c14"
           >
             0 selected
           </p>
diff --git a/source/frontend/src/features/admin/users/__snapshots__/ManageUsersPage.test.tsx.snap b/source/frontend/src/features/admin/users/__snapshots__/ManageUsersPage.test.tsx.snap
index 092cfdac0c..545682d7d4 100644
--- a/source/frontend/src/features/admin/users/__snapshots__/ManageUsersPage.test.tsx.snap
+++ b/source/frontend/src/features/admin/users/__snapshots__/ManageUsersPage.test.tsx.snap
@@ -214,54 +214,54 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
   margin-right: 0;
 }
 
-.c5.c5.btn {
+.c8.c8.btn {
   background-color: unset;
   border: none;
 }
 
-.c5.c5.btn:hover,
-.c5.c5.btn:focus,
-.c5.c5.btn:active {
+.c8.c8.btn:hover,
+.c8.c8.btn:focus,
+.c8.c8.btn:active {
   background-color: unset;
   outline: none;
   box-shadow: none;
 }
 
-.c5.c5.btn svg {
+.c8.c8.btn svg {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
 
-.c5.c5.btn svg:hover {
+.c8.c8.btn svg:hover {
   -webkit-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
 
-.c5.c5.btn.btn-primary svg {
+.c8.c8.btn.btn-primary svg {
   color: #013366;
 }
 
-.c5.c5.btn.btn-primary svg:hover {
+.c8.c8.btn.btn-primary svg:hover {
   color: #013366;
 }
 
-.c5.c5.btn.btn-light svg {
+.c8.c8.btn.btn-light svg {
   color: var(--surface-color-primary-button-default);
 }
 
-.c5.c5.btn.btn-light svg:hover {
+.c8.c8.btn.btn-light svg:hover {
   color: #CE3E39;
 }
 
-.c5.c5.btn.btn-info svg {
+.c8.c8.btn.btn-info svg {
   color: var(--surface-color-primary-button-default);
 }
 
-.c5.c5.btn.btn-info svg:hover {
+.c8.c8.btn.btn-info svg:hover {
   color: var(--surface-color-primary-button-hover);
 }
 
-.c8 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -280,21 +280,21 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
   margin-left: 0.5rem;
 }
 
-.c10 {
+.c13 {
   width: 1.6rem;
   height: 1.6rem;
 }
 
-.c9 {
+.c12 {
   width: 1.6rem;
   height: 1.6rem;
 }
 
-.c11 {
+.c14 {
   margin-top: 0.3rem;
 }
 
-.c12 {
+.c15 {
   min-width: 5rem;
   max-width: 5rem;
   margin-left: 1rem;
@@ -303,14 +303,35 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
   padding: 0;
 }
 
-.c12:-moz-read-only {
+.c15:-moz-read-only {
   background: white;
 }
 
-.c12:read-only {
+.c15:read-only {
   background: white;
 }
 
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.c6 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 0;
+}
+
 .c2 {
   color: #474543;
   font-family: 'BCSans-Bold';
@@ -326,6 +347,19 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
   border-radius: 0.5rem;
 }
 
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-right: 0.6rem;
+  color: #42814A;
+}
+
 .c0 {
   background-color: #fff;
   display: -webkit-box;
@@ -342,7 +376,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
   padding: 0;
 }
 
-.c6 {
+.c9 {
   padding: 1.6rem 3.2rem;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -352,7 +386,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
   overflow-x: auto;
 }
 
-.c7 {
+.c10 {
   padding: 1.5rem;
 }
 
@@ -687,60 +721,58 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                   class="col"
                 >
                   <div
-                    class="d-inline-block m-0 form-group"
+                    class="c5 c6"
                   >
                     <div
-                      class="check-field"
+                      class="d-inline-block m-0 form-group"
                     >
                       <div
-                        class="form-check"
+                        class="check-field"
                       >
-                        <input
-                          checked=""
-                          class="form-check-input position-static"
-                          id="input-activeOnly"
-                          name="activeOnly"
-                          type="checkbox"
-                          value="true"
-                        />
+                        <div
+                          class="form-check"
+                        >
+                          <input
+                            checked=""
+                            class="form-check-input position-static"
+                            id="input-activeOnly"
+                            name="activeOnly"
+                            type="checkbox"
+                            value="true"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <svg
-                    height="10"
-                    overflow="visible"
-                    preserveAspectRatio="none"
-                    viewBox="0 0 10 10"
-                    width="10"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      transform="translate(1, 1)"
+                    <div
+                      class="c7"
+                      data-testid="active-indicator"
                     >
-                      <defs>
-                        <path
-                          d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                          id="path-1635974705144170"
-                          vector-effect="non-scaling-stroke"
-                        />
-                      </defs>
-                      <g
-                        transform="translate(0, 0)"
+                      <svg
+                        fill="currentColor"
+                        height="16"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 512 512"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
+                        <title>
+                          Active
+                        </title>
                         <path
-                          d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                          style="stroke: rgb(255, 255, 255); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; fill: rgb(146, 237, 36);"
-                          vector-effect="non-scaling-stroke"
+                          d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
                         />
-                      </g>
-                    </g>
-                  </svg>
-                  <span
-                    class="ml-1"
-                  >
-                    Show active users only
-                  </span>
+                      </svg>
+                    </div>
+                    <span
+                      class="ml-1"
+                    >
+                      <b>
+                        Active
+                      </b>
+                       users only
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -751,7 +783,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
         class="align-items-center d-flex col-md-4"
       >
         <button
-          class="c4 Button c5 btn btn-primary"
+          class="c4 Button c8 btn btn-primary"
           type="button"
         >
           <div
@@ -776,7 +808,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
       </div>
     </div>
     <div
-      class="c6 c7"
+      class="c9 c10"
     >
       <div
         class="table"
@@ -802,11 +834,11 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
               >
                 Active
                 <div
-                  class="c8"
+                  class="c11"
                   data-testid="sort-column-isDisabled"
                 >
                   <svg
-                    class="c9"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -821,7 +853,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -848,11 +880,11 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
               >
                 IDIR/BCeID
                 <div
-                  class="c8"
+                  class="c11"
                   data-testid="sort-column-businessIdentifierValue"
                 >
                   <svg
-                    class="c9"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -867,7 +899,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -894,11 +926,11 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
               >
                 First name
                 <div
-                  class="c8"
+                  class="c11"
                   data-testid="sort-column-firstName"
                 >
                   <svg
-                    class="c9"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -913,7 +945,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -940,11 +972,11 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
               >
                 Last name
                 <div
-                  class="c8"
+                  class="c11"
                   data-testid="sort-column-surname"
                 >
                   <svg
-                    class="c9"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -959,7 +991,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -986,11 +1018,11 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
               >
                 Email
                 <div
-                  class="c8"
+                  class="c11"
                   data-testid="sort-column-email"
                 >
                   <svg
-                    class="c9"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -1005,7 +1037,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -1032,11 +1064,11 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
               >
                 Position
                 <div
-                  class="c8"
+                  class="c11"
                   data-testid="sort-column-position"
                 >
                   <svg
-                    class="c9"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -1051,7 +1083,7 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c13"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -1147,36 +1179,27 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                 style="box-sizing: border-box; flex: 60 0 auto; min-width: 30px; width: 60px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
                 title="Click IDIR/BCeID link to view User Information page"
               >
-                <svg
-                  height="10"
-                  overflow="visible"
-                  preserveAspectRatio="none"
-                  viewBox="0 0 10 10"
-                  width="10"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                <div
+                  class="c7"
+                  data-testid="active-indicator"
                 >
-                  <g
-                    transform="translate(1, 1)"
+                  <svg
+                    fill="currentColor"
+                    height="10"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 512 512"
+                    width="10"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <defs>
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        id="path-1635974705144170"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </defs>
-                    <g
-                      transform="translate(0, 0)"
-                    >
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        style="stroke: rgb(255, 255, 255); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; fill: rgb(146, 237, 36);"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </g>
-                  </g>
-                </svg>
+                    <title>
+                      Active
+                    </title>
+                    <path
+                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="td"
@@ -1337,36 +1360,27 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                 style="box-sizing: border-box; flex: 60 0 auto; min-width: 30px; width: 60px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
                 title="Click IDIR/BCeID link to view User Information page"
               >
-                <svg
-                  height="10"
-                  overflow="visible"
-                  preserveAspectRatio="none"
-                  viewBox="0 0 10 10"
-                  width="10"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                <div
+                  class="c7"
+                  data-testid="active-indicator"
                 >
-                  <g
-                    transform="translate(1, 1)"
+                  <svg
+                    fill="currentColor"
+                    height="10"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 512 512"
+                    width="10"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <defs>
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        id="path-1635974705144170"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </defs>
-                    <g
-                      transform="translate(0, 0)"
-                    >
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        style="stroke: rgb(255, 255, 255); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; fill: rgb(146, 237, 36);"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </g>
-                  </g>
-                </svg>
+                    <title>
+                      Active
+                    </title>
+                    <path
+                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="td"
@@ -1525,36 +1539,27 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                 style="box-sizing: border-box; flex: 60 0 auto; min-width: 30px; width: 60px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
                 title="Click IDIR/BCeID link to view User Information page"
               >
-                <svg
-                  height="10"
-                  overflow="visible"
-                  preserveAspectRatio="none"
-                  viewBox="0 0 10 10"
-                  width="10"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                <div
+                  class="c7"
+                  data-testid="active-indicator"
                 >
-                  <g
-                    transform="translate(1, 1)"
+                  <svg
+                    fill="currentColor"
+                    height="10"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 512 512"
+                    width="10"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <defs>
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        id="path-1635974705144170"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </defs>
-                    <g
-                      transform="translate(0, 0)"
-                    >
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        style="stroke: rgb(255, 255, 255); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; fill: rgb(146, 237, 36);"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </g>
-                  </g>
-                </svg>
+                    <title>
+                      Active
+                    </title>
+                    <path
+                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="td"
@@ -1715,36 +1720,27 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                 style="box-sizing: border-box; flex: 60 0 auto; min-width: 30px; width: 60px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
                 title="Click IDIR/BCeID link to view User Information page"
               >
-                <svg
-                  height="10"
-                  overflow="visible"
-                  preserveAspectRatio="none"
-                  viewBox="0 0 10 10"
-                  width="10"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                <div
+                  class="c7"
+                  data-testid="active-indicator"
                 >
-                  <g
-                    transform="translate(1, 1)"
+                  <svg
+                    fill="currentColor"
+                    height="10"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 512 512"
+                    width="10"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <defs>
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        id="path-1635974705144170"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </defs>
-                    <g
-                      transform="translate(0, 0)"
-                    >
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        style="stroke: rgb(255, 255, 255); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; fill: rgb(146, 237, 36);"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </g>
-                  </g>
-                </svg>
+                    <title>
+                      Active
+                    </title>
+                    <path
+                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="td"
@@ -1899,36 +1895,27 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                 style="box-sizing: border-box; flex: 60 0 auto; min-width: 30px; width: 60px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
                 title="Click IDIR/BCeID link to view User Information page"
               >
-                <svg
-                  height="10"
-                  overflow="visible"
-                  preserveAspectRatio="none"
-                  viewBox="0 0 10 10"
-                  width="10"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                <div
+                  class="c7"
+                  data-testid="active-indicator"
                 >
-                  <g
-                    transform="translate(1, 1)"
+                  <svg
+                    fill="currentColor"
+                    height="10"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 512 512"
+                    width="10"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <defs>
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        id="path-1635974705144170"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </defs>
-                    <g
-                      transform="translate(0, 0)"
-                    >
-                      <path
-                        d="M4 0 C6.207660097976 0 8 1.7923399020239998 8 4 C8 6.207660097976 6.207660097976 8 4 8 C1.7923399020239998 8 0 6.207660097976 0 4 C0 1.7923399020239998 1.7923399020239998 0 4 0 Z"
-                        style="stroke: rgb(255, 255, 255); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; fill: rgb(146, 237, 36);"
-                        vector-effect="non-scaling-stroke"
-                      />
-                    </g>
-                  </g>
-                </svg>
+                    <title>
+                      Active
+                    </title>
+                    <path
+                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                    />
+                  </svg>
+                </div>
               </div>
               <div
                 class="td"
@@ -2099,19 +2086,19 @@ exports[`Manage Users Component > Snapshot matches 1`] = `
                 class="d-flex"
               >
                 <span
-                  class="c11"
+                  class="c14"
                 >
                   Show
                 </span>
                 <input
-                  class="c12 form-control"
+                  class="c15 form-control"
                   data-testid="input-page-size"
                   readonly=""
                   type="number"
                   value="10"
                 />
                 <span
-                  class="c11"
+                  class="c14"
                 >
                   Entries
                 </span>
diff --git a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
index 3a9f239655..49c916a02e 100644
--- a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
+++ b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Contact List View > matches snapshot 1`] = `
 }
 
 <div />
-  .c13.btn {
+  .c14.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -43,19 +43,19 @@ exports[`Contact List View > matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c13.btn .Button__value {
+.c14.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c13.btn:hover {
+.c14.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c13.btn:focus {
+.c14.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -63,31 +63,31 @@ exports[`Contact List View > matches snapshot 1`] = `
   box-shadow: none;
 }
 
-.c13.btn.btn-primary {
+.c14.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c13.btn.btn-primary:hover,
-.c13.btn.btn-primary:active,
-.c13.btn.btn-primary:focus {
+.c14.btn.btn-primary:hover,
+.c14.btn.btn-primary:active,
+.c14.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c13.btn.btn-secondary {
+.c14.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c13.btn.btn-secondary:hover,
-.c13.btn.btn-secondary:active,
-.c13.btn.btn-secondary:focus {
+.c14.btn.btn-secondary:hover,
+.c14.btn.btn-secondary:active,
+.c14.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c13.btn.btn-info {
+.c14.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -95,66 +95,66 @@ exports[`Contact List View > matches snapshot 1`] = `
   padding-right: 0.6rem;
 }
 
-.c13.btn.btn-info:hover,
-.c13.btn.btn-info:active,
-.c13.btn.btn-info:focus {
+.c14.btn.btn-info:hover,
+.c14.btn.btn-info:active,
+.c14.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c13.btn.btn-light {
+.c14.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c13.btn.btn-light:hover,
-.c13.btn.btn-light:active,
-.c13.btn.btn-light:focus {
+.c14.btn.btn-light:hover,
+.c14.btn.btn-light:active,
+.c14.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c13.btn.btn-dark {
+.c14.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c13.btn.btn-dark:hover,
-.c13.btn.btn-dark:active,
-.c13.btn.btn-dark:focus {
+.c14.btn.btn-dark:hover,
+.c14.btn.btn-dark:active,
+.c14.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c13.btn.btn-danger {
+.c14.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c13.btn.btn-danger:hover,
-.c13.btn.btn-danger:active,
-.c13.btn.btn-danger:focus {
+.c14.btn.btn-danger:hover,
+.c14.btn.btn-danger:active,
+.c14.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c13.btn.btn-warning {
+.c14.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c13.btn.btn-warning:hover,
-.c13.btn.btn-warning:active,
-.c13.btn.btn-warning:focus {
+.c14.btn.btn-warning:hover,
+.c14.btn.btn-warning:active,
+.c14.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c13.btn.btn-link {
+.c14.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -178,9 +178,9 @@ exports[`Contact List View > matches snapshot 1`] = `
   text-decoration: underline;
 }
 
-.c13.btn.btn-link:hover,
-.c13.btn.btn-link:active,
-.c13.btn.btn-link:focus {
+.c14.btn.btn-link:hover,
+.c14.btn.btn-link:active,
+.c14.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -190,15 +190,15 @@ exports[`Contact List View > matches snapshot 1`] = `
   outline: none;
 }
 
-.c13.btn.btn-link:disabled,
-.c13.btn.btn-link.disabled {
+.c14.btn.btn-link:disabled,
+.c14.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c13.btn:disabled,
-.c13.btn:disabled:hover {
+.c14.btn:disabled,
+.c14.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -210,65 +210,78 @@ exports[`Contact List View > matches snapshot 1`] = `
   cursor: not-allowed;
 }
 
-.c13.Button .Button__icon {
+.c14.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c13.Button--icon-only:focus {
+.c14.Button--icon-only:focus {
   outline: none;
 }
 
-.c13.Button--icon-only .Button__icon {
+.c14.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c20.c20.btn {
+.c21.c21.btn {
   background-color: unset;
   border: none;
 }
 
-.c20.c20.btn:hover,
-.c20.c20.btn:focus,
-.c20.c20.btn:active {
+.c21.c21.btn:hover,
+.c21.c21.btn:focus,
+.c21.c21.btn:active {
   background-color: unset;
   outline: none;
   box-shadow: none;
 }
 
-.c20.c20.btn svg {
+.c21.c21.btn svg {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
 
-.c20.c20.btn svg:hover {
+.c21.c21.btn svg:hover {
   -webkit-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
 
-.c20.c20.btn.btn-primary svg {
+.c21.c21.btn.btn-primary svg {
   color: #013366;
 }
 
-.c20.c20.btn.btn-primary svg:hover {
+.c21.c21.btn.btn-primary svg:hover {
   color: #013366;
 }
 
-.c20.c20.btn.btn-light svg {
+.c21.c21.btn.btn-light svg {
   color: var(--surface-color-primary-button-default);
 }
 
-.c20.c20.btn.btn-light svg:hover {
+.c21.c21.btn.btn-light svg:hover {
   color: #CE3E39;
 }
 
-.c20.c20.btn.btn-info svg {
+.c21.c21.btn.btn-info svg {
   color: var(--surface-color-primary-button-default);
 }
 
-.c20.c20.btn.btn-info svg:hover {
+.c21.c21.btn.btn-info svg:hover {
   color: var(--surface-color-primary-button-hover);
 }
 
+.c11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-right: 0.6rem;
+  color: #42814A;
+}
+
 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -287,7 +300,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c14 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -306,21 +319,21 @@ exports[`Contact List View > matches snapshot 1`] = `
   margin-left: 0.5rem;
 }
 
-.c16 {
+.c17 {
   width: 1.6rem;
   height: 1.6rem;
 }
 
-.c15 {
+.c16 {
   width: 1.6rem;
   height: 1.6rem;
 }
 
-.c21 {
+.c22 {
   margin-top: 0.3rem;
 }
 
-.c22 {
+.c23 {
   min-width: 5rem;
   max-width: 5rem;
   margin-left: 1rem;
@@ -329,11 +342,11 @@ exports[`Contact List View > matches snapshot 1`] = `
   padding: 0;
 }
 
-.c22:-moz-read-only {
+.c23:-moz-read-only {
   background: white;
 }
 
-.c22:read-only {
+.c23:read-only {
   background: white;
 }
 
@@ -347,6 +360,17 @@ exports[`Contact List View > matches snapshot 1`] = `
   flex-wrap: nowrap;
 }
 
+.c10 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 0;
+}
+
 .c3 {
   color: #474543;
   font-family: 'BCSans-Bold';
@@ -405,7 +429,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   margin-bottom: unset;
 }
 
-.c11 {
+.c12 {
   border-left: 1px solid white;
   font-size: 3.4rem;
   margin: 0 36px 0 36px;
@@ -419,7 +443,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   max-width: 85%;
 }
 
-.c12 {
+.c13 {
   padding-right: 0rem;
   padding-left: 1rem;
 }
@@ -432,13 +456,6 @@ exports[`Contact List View > matches snapshot 1`] = `
   max-width: 25rem;
 }
 
-.c10 {
-  display: inline-block;
-  margin: 0rem 0.5rem;
-  padding: 0.2rem;
-  color: #42814A;
-}
-
 .c1 {
   width: 100%;
   -webkit-box-flex: 1;
@@ -448,7 +465,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   overflow-y: auto;
 }
 
-.c19 {
+.c20 {
   -webkit-box-pack: space-around;
   -webkit-justify-content: space-around;
   -ms-flex-pack: space-around;
@@ -456,15 +473,15 @@ exports[`Contact List View > matches snapshot 1`] = `
   width: 100%;
 }
 
-.c17 {
+.c18 {
   color: #606060;
 }
 
-.c17.active {
+.c18.active {
   color: #42814A;
 }
 
-.c18 a {
+.c19 a {
   font-weight: bold;
   color: #428bca !important;
 }
@@ -734,51 +751,61 @@ exports[`Contact List View > matches snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="pl-0 col"
+                      class="pl-4 col"
                     >
                       <div
-                        class="d-inline-block m-0 form-group"
+                        class="c6 c10"
                       >
                         <div
-                          class="check-field"
+                          class="d-inline-block m-0 form-group"
                         >
                           <div
-                            class="form-check"
+                            class="check-field"
                           >
-                            <input
-                              checked=""
-                              class="form-check-input position-static"
-                              id="input-activeContactsOnly"
-                              name="activeContactsOnly"
-                              type="checkbox"
-                              value="true"
-                            />
+                            <div
+                              class="form-check"
+                            >
+                              <input
+                                checked=""
+                                class="form-check-input position-static"
+                                id="input-activeContactsOnly"
+                                name="activeContactsOnly"
+                                type="checkbox"
+                                value="true"
+                              />
+                            </div>
                           </div>
                         </div>
-                      </div>
-                      <div
-                        class="c10"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="16"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          viewBox="0 0 512 512"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <div
+                          class="c11"
+                          data-testid="active-indicator"
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="16"
+                            stroke="currentColor"
+                            stroke-width="0"
+                            viewBox="0 0 512 512"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <title>
+                              Active
+                            </title>
+                            <path
+                              d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                            />
+                          </svg>
+                        </div>
+                        <span
+                          class="ml-1"
                         >
-                          <path
-                            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
-                          />
-                        </svg>
+                          <b>
+                            Active
+                          </b>
+                           contacts only
+                        </span>
                       </div>
-                      <span>
-                        <b>
-                          Active
-                        </b>
-                         contacts only
-                      </span>
                     </div>
                   </div>
                 </div>
@@ -792,7 +819,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                       class="pr-0 col-auto"
                     >
                       <span
-                        class="c11"
+                        class="c12"
                       />
                     </div>
                     <div
@@ -802,10 +829,10 @@ exports[`Contact List View > matches snapshot 1`] = `
                         class="row"
                       >
                         <div
-                          class="c12 col-auto"
+                          class="c13 col-auto"
                         >
                           <button
-                            class="c13 Button Button--icon-only primary btn btn-primary"
+                            class="c14 Button Button--icon-only primary btn btn-primary"
                             data-testid="search"
                             id="search-button"
                             title="search"
@@ -831,10 +858,10 @@ exports[`Contact List View > matches snapshot 1`] = `
                           </button>
                         </div>
                         <div
-                          class="c12 col-auto"
+                          class="c13 col-auto"
                         >
                           <button
-                            class="c13 Button Button--icon-only btn btn-info"
+                            class="c14 Button Button--icon-only btn btn-info"
                             data-testid="reset-button"
                             id="reset-button"
                             title="reset-button"
@@ -915,11 +942,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     Summary
                     <div
-                      class="c14"
+                      class="c15"
                       data-testid="sort-column-summary"
                     >
                       <svg
-                        class="c15"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -934,7 +961,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c16"
+                        class="c17"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -961,11 +988,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     First name
                     <div
-                      class="c14"
+                      class="c15"
                       data-testid="sort-column-firstName"
                     >
                       <svg
-                        class="c15"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -980,7 +1007,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c16"
+                        class="c17"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -1007,11 +1034,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     Last name
                     <div
-                      class="c14"
+                      class="c15"
                       data-testid="sort-column-surname"
                     >
                       <svg
-                        class="c15"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -1026,7 +1053,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c16"
+                        class="c17"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -1053,11 +1080,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     Organization
                     <div
-                      class="c14"
+                      class="c15"
                       data-testid="sort-column-organizationName"
                     >
                       <svg
-                        class="c15"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -1072,7 +1099,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c16"
+                        class="c17"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -1123,11 +1150,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     City
                     <div
-                      class="c14"
+                      class="c15"
                       data-testid="sort-column-municipalityName"
                     >
                       <svg
-                        class="c15"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -1142,7 +1169,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c16"
+                        class="c17"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -1203,10 +1230,10 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="c17 active"
+                      class="c11"
+                      data-testid="active-indicator"
                     >
                       <svg
-                        class="mr-2"
                         fill="currentColor"
                         height="10"
                         stroke="currentColor"
@@ -1215,6 +1242,9 @@ exports[`Contact List View > matches snapshot 1`] = `
                         width="10"
                         xmlns="http://www.w3.org/2000/svg"
                       >
+                        <title>
+                          Active
+                        </title>
                         <path
                           d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
                         />
@@ -1228,7 +1258,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="c17 active"
+                      class="c18 active"
                     >
                       <svg
                         fill="currentColor"
@@ -1252,7 +1282,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="c18"
+                      class="c19"
                     >
                       <a
                         href="/contact/1"
@@ -1318,10 +1348,10 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="c6 c19"
+                      class="c6 c20"
                     >
                       <button
-                        class="c13 Button c20 btn btn-primary"
+                        class="c14 Button c21 btn btn-primary"
                         data-testid="view-button"
                         title="View Contact"
                         type="button"
@@ -1376,19 +1406,19 @@ exports[`Contact List View > matches snapshot 1`] = `
                     class="d-flex"
                   >
                     <span
-                      class="c21"
+                      class="c22"
                     >
                       Show
                     </span>
                     <input
-                      class="c22 form-control"
+                      class="c23 form-control"
                       data-testid="input-page-size"
                       readonly=""
                       type="number"
                       value="10"
                     />
                     <span
-                      class="c21"
+                      class="c22"
                     >
                       Entries
                     </span>
diff --git a/source/frontend/src/features/leases/reports/aggregated/__snapshots__/ExportAggregatedLeasesContainer.test.tsx.snap b/source/frontend/src/features/leases/reports/aggregated/__snapshots__/ExportAggregatedLeasesContainer.test.tsx.snap
index e778fd21b3..9d6f454b34 100644
--- a/source/frontend/src/features/leases/reports/aggregated/__snapshots__/ExportAggregatedLeasesContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/reports/aggregated/__snapshots__/ExportAggregatedLeasesContainer.test.tsx.snap
@@ -6,7 +6,262 @@ exports[`ExportAggregatedLeasesContainer component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c2 {
+  .c3.btn {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0.4rem 1.2rem;
+  border: 0.2rem solid transparent;
+  border-radius: 0.4rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1.8rem;
+  font-family: 'BCSans','Noto Sans',Verdana,Arial,sans-serif;
+  font-weight: 700;
+  -webkit-letter-spacing: 0.1rem;
+  -moz-letter-spacing: 0.1rem;
+  -ms-letter-spacing: 0.1rem;
+  letter-spacing: 0.1rem;
+  cursor: pointer;
+}
+
+.c3.btn .Button__value {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.c3.btn:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  opacity: 0.8;
+}
+
+.c3.btn:focus {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: #2E5DD7;
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c3.btn.btn-secondary {
+  color: #013366;
+  background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-info {
+  color: #9F9D9C;
+  border: none;
+  background: none;
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+}
+
+.c3.btn.btn-info:hover,
+.c3.btn.btn-info:active,
+.c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
+  background: none;
+}
+
+.c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
+  border: none;
+}
+
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
+  border: none;
+}
+
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c3.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;
+  text-decoration: none;
+  min-height: 2.5rem;
+  line-height: 3rem;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-letter-spacing: unset;
+  -moz-letter-spacing: unset;
+  -ms-letter-spacing: unset;
+  letter-spacing: unset;
+  text-align: left;
+  padding: 0;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c3.btn.btn-link:hover,
+.c3.btn.btn-link:active,
+.c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  border: none;
+  background: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.c3.btn.btn-link:disabled,
+.c3.btn.btn-link.disabled {
+  color: #9F9D9C;
+  background: none;
+  pointer-events: none;
+}
+
+.c3.btn:disabled,
+.c3.btn:disabled:hover {
+  color: #9F9D9C;
+  background-color: #EDEBE9;
+  box-shadow: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c3.Button .Button__icon {
+  margin-right: 1.6rem;
+}
+
+.c3.Button--icon-only:focus {
+  outline: none;
+}
+
+.c3.Button--icon-only .Button__icon {
+  margin-right: 0;
+}
+
+.c4.c4.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c4.c4.btn:hover,
+.c4.c4.btn:focus,
+.c4.c4.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c4.c4.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c4.c4.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c4.c4.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c4.c4.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c4.c4.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c4.c4.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c4.c4.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c4.c4.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24,17 +279,6 @@ exports[`ExportAggregatedLeasesContainer component > renders as expected 1`] = `
   flex-shrink: 0;
 }
 
-.c3 {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #428bca;
-}
-
-.c3:hover {
-  cursor: pointer;
-}
-
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -55,10 +299,10 @@ exports[`ExportAggregatedLeasesContainer component > renders as expected 1`] = `
   >
     <li>
       <div
-        class="c1"
+        class="c1 align-items-center"
       >
         <div
-          class="c2 form-group"
+          class="c2 mb-0 form-group"
         >
           <label
             class="form-label"
@@ -295,23 +539,30 @@ exports[`ExportAggregatedLeasesContainer component > renders as expected 1`] = `
             </option>
           </select>
         </div>
-        <svg
-          class="c3"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 512 512"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          class="c3 Button c4 btn btn-primary"
+          data-testid="download-button"
+          title="Export Aggregated Report"
+          type="button"
         >
-          <title>
-            Export Aggregated Report
-          </title>
-          <path
-            d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-          />
-        </svg>
+          <div
+            class="Button__value"
+          >
+            <svg
+              fill="currentColor"
+              height="20"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
+          </div>
+        </button>
       </div>
     </li>
   </ul>
diff --git a/source/frontend/src/features/leases/reports/payments/__snapshots__/ExportLeasePaymentsContainer.test.tsx.snap b/source/frontend/src/features/leases/reports/payments/__snapshots__/ExportLeasePaymentsContainer.test.tsx.snap
index a97b0adfd3..13a1e5d7bb 100644
--- a/source/frontend/src/features/leases/reports/payments/__snapshots__/ExportLeasePaymentsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/reports/payments/__snapshots__/ExportLeasePaymentsContainer.test.tsx.snap
@@ -6,7 +6,262 @@ exports[`ExportLeasePaymentsContainer component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c2 {
+  .c3.btn {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0.4rem 1.2rem;
+  border: 0.2rem solid transparent;
+  border-radius: 0.4rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1.8rem;
+  font-family: 'BCSans','Noto Sans',Verdana,Arial,sans-serif;
+  font-weight: 700;
+  -webkit-letter-spacing: 0.1rem;
+  -moz-letter-spacing: 0.1rem;
+  -ms-letter-spacing: 0.1rem;
+  letter-spacing: 0.1rem;
+  cursor: pointer;
+}
+
+.c3.btn .Button__value {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.c3.btn:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  opacity: 0.8;
+}
+
+.c3.btn:focus {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: #2E5DD7;
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c3.btn.btn-secondary {
+  color: #013366;
+  background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-info {
+  color: #9F9D9C;
+  border: none;
+  background: none;
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+}
+
+.c3.btn.btn-info:hover,
+.c3.btn.btn-info:active,
+.c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
+  background: none;
+}
+
+.c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
+  border: none;
+}
+
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
+  border: none;
+}
+
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c3.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;
+  text-decoration: none;
+  min-height: 2.5rem;
+  line-height: 3rem;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-letter-spacing: unset;
+  -moz-letter-spacing: unset;
+  -ms-letter-spacing: unset;
+  letter-spacing: unset;
+  text-align: left;
+  padding: 0;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c3.btn.btn-link:hover,
+.c3.btn.btn-link:active,
+.c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  border: none;
+  background: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.c3.btn.btn-link:disabled,
+.c3.btn.btn-link.disabled {
+  color: #9F9D9C;
+  background: none;
+  pointer-events: none;
+}
+
+.c3.btn:disabled,
+.c3.btn:disabled:hover {
+  color: #9F9D9C;
+  background-color: #EDEBE9;
+  box-shadow: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c3.Button .Button__icon {
+  margin-right: 1.6rem;
+}
+
+.c3.Button--icon-only:focus {
+  outline: none;
+}
+
+.c3.Button--icon-only .Button__icon {
+  margin-right: 0;
+}
+
+.c4.c4.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c4.c4.btn:hover,
+.c4.c4.btn:focus,
+.c4.c4.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c4.c4.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c4.c4.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c4.c4.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c4.c4.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c4.c4.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c4.c4.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c4.c4.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c4.c4.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24,17 +279,6 @@ exports[`ExportLeasePaymentsContainer component > renders as expected 1`] = `
   flex-shrink: 0;
 }
 
-.c3 {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  color: #428bca;
-}
-
-.c3:hover {
-  cursor: pointer;
-}
-
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -55,10 +299,10 @@ exports[`ExportLeasePaymentsContainer component > renders as expected 1`] = `
   >
     <li>
       <div
-        class="c1"
+        class="c1 align-items-center"
       >
         <div
-          class="c2 form-group"
+          class="c2 mb-0 form-group"
         >
           <label
             class="form-label"
@@ -295,23 +539,30 @@ exports[`ExportLeasePaymentsContainer component > renders as expected 1`] = `
             </option>
           </select>
         </div>
-        <svg
-          class="c3"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 512 512"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          class="c3 Button c4 btn btn-primary"
+          data-testid="download-button"
+          title="Export Lease Payments Report"
+          type="button"
         >
-          <title>
-            Export Lease Payments Report
-          </title>
-          <path
-            d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-          />
-        </svg>
+          <div
+            class="Button__value"
+          >
+            <svg
+              fill="currentColor"
+              height="20"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+              />
+            </svg>
+          </div>
+        </button>
       </div>
     </li>
   </ul>