From 0dd2b20599bee90cab888d4ae48e0c6a41d54762 Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Sat, 15 Jun 2024 09:10:58 -0700
Subject: [PATCH 1/3] PSP-7499

---
 .../ContactFilterComponent.tsx                |  88 ++--
 .../ContactFilterComponent.test.tsx.snap      | 265 ++++++------
 .../ContactManagerView/ContactManagerView.tsx |  16 +-
 .../ContactResultComponent.test.tsx.snap      | 253 +++++------
 .../ContactResultComponent/columns.tsx        |  37 +-
 .../ContactManagerView.test.tsx.snap          | 310 +++++++-------
 .../ContactListView.test.tsx.snap             | 399 +++++++++---------
 7 files changed, 727 insertions(+), 641 deletions(-)

diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
index 04fbe1ae19..aac35d0b04 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
@@ -2,13 +2,14 @@ import { Form, Formik } from 'formik';
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { FaRegBuilding, FaRegUser } from 'react-icons/fa';
+import { FaCircle } from 'react-icons/fa';
 import styled from 'styled-components';
 
-import Active from '@/assets/images/active.svg?react';
 import { ResetButton, SearchButton } from '@/components/common/buttons';
 import ActiveFilterCheck from '@/components/common/form/ActiveFilterCheck';
 import { RadioGroup } from '@/components/common/form/RadioGroup';
 import { InlineInput } from '@/components/common/form/styles';
+import { VerticalBar } from '@/components/common/VerticalBar';
 import { IContactFilter } from '@/components/contact/ContactManagerView/IContactFilter';
 
 export const defaultFilter: IContactFilter = {
@@ -80,37 +81,17 @@ export const ContactFilterComponent: React.FunctionComponent<
               />
             </Col>
             <Col>
-              <Row>
+              <Row className="ml-5">
                 <Col className="pl-0">
                   <StyledNameInput field="summary" placeholder="Name of person or organization" />
                 </Col>
-                <Col md="auto" className="pl-0">
-                  <StyledCityInput field="municipality" label="City" />
-                </Col>
-              </Row>
-            </Col>
-            <Col xs="auto">
-              <Row className="align-items-center">
-                <StyledColButton xs="auto">
-                  <SearchButton
-                    type="button"
-                    disabled={isSubmitting}
-                    onClick={() => {
-                      submitForm();
-                    }}
-                  />
-                </StyledColButton>
-                <StyledColButton xs="auto">
-                  <ResetButton
-                    type=""
-                    disabled={isSubmitting}
-                    onClick={() => {
-                      resetForm({ values: { ...defaultFilter, searchBy: values.searchBy } });
-                      resetFilter(values);
-                    }}
+                <Col className="pl-0">
+                  <StyledCityInput
+                    field="municipality"
+                    label="City"
+                    placeholder="City of contact's address"
                   />
-                </StyledColButton>
-
+                </Col>
                 <Col className="pl-0">
                   {showActiveSelector && (
                     <>
@@ -118,13 +99,47 @@ export const ContactFilterComponent: React.FunctionComponent<
                         fieldName="activeContactsOnly"
                         setFilter={setFilter}
                       />
-                      <Active />
-                      <span>Show active contacts only</span>
+                      <ActiveIndicator>
+                        <FaCircle size={16} />
+                      </ActiveIndicator>
+                      <span>
+                        <b>Active</b> contacts only
+                      </span>
                     </>
                   )}
                 </Col>
               </Row>
             </Col>
+            <Col xs="auto" className="ml-2">
+              <Row>
+                <Col className="pr-0">
+                  <VerticalBar />
+                </Col>
+                <Col>
+                  <Row>
+                    <StyledColButton>
+                      <SearchButton
+                        type="button"
+                        disabled={isSubmitting}
+                        onClick={() => {
+                          submitForm();
+                        }}
+                      />
+                    </StyledColButton>
+                    <StyledColButton>
+                      <ResetButton
+                        type=""
+                        disabled={isSubmitting}
+                        onClick={() => {
+                          resetForm({ values: { ...defaultFilter, searchBy: values.searchBy } });
+                          resetFilter(values);
+                        }}
+                      />
+                    </StyledColButton>
+                  </Row>
+                </Col>
+              </Row>
+            </Col>
           </Row>
         </StyledFilterBoxForm>
       )}
@@ -194,12 +209,12 @@ const StyledFilterBoxForm = styled(Form)`
   background-color: ${({ theme }) => theme.css.filterBoxColor};
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 85em;
+  max-width: 110em;
 `;
 
 const StyledColButton = styled(Col)`
   padding-right: 0rem;
-  padding-left: 0rem;
+  padding-left: 1rem;
 `;
 
 export const StyledNameInput = styled(InlineInput)`
@@ -207,5 +222,12 @@ export const StyledNameInput = styled(InlineInput)`
 `;
 
 export const StyledCityInput = styled(InlineInput)`
-  max-width: 20rem;
+  max-width: 40rem;
+`;
+
+export const ActiveIndicator = styled.div`
+  display: inline-block;
+  margin: 0rem 0.5rem;
+  padding: 0.2rem;
+  color: ${props => props.theme.bcTokens.iconsColorSuccess};
 `;
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 fb2f2a0229..4dc1e8b11e 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
@@ -6,7 +6,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c7.btn {
+  .c9.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,49 +37,49 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   height: 3.8rem;
 }
 
-.c7.btn:hover {
+.c9.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c7.btn:focus {
+.c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c7.btn.btn-primary {
+.c9.btn.btn-primary {
   border: none;
 }
 
-.c7.btn.btn-secondary {
+.c9.btn.btn-secondary {
   background: none;
 }
 
-.c7.btn.btn-info {
+.c9.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c7.btn.btn-info:hover,
-.c7.btn.btn-info:active,
-.c7.btn.btn-info:focus {
+.c9.btn.btn-info:hover,
+.c9.btn.btn-info:active,
+.c9.btn.btn-info:focus {
   background: none;
 }
 
-.c7.btn.btn-light {
+.c9.btn.btn-light {
   border: none;
 }
 
-.c7.btn.btn-dark {
+.c9.btn.btn-dark {
   border: none;
 }
 
-.c7.btn.btn-link {
+.c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -100,9 +100,9 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   padding: 0;
 }
 
-.c7.btn.btn-link:hover,
-.c7.btn.btn-link:active,
-.c7.btn.btn-link:focus {
+.c9.btn.btn-link:hover,
+.c9.btn.btn-link:active,
+.c9.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +111,14 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   outline: none;
 }
 
-.c7.btn.btn-link:disabled,
-.c7.btn.btn-link.disabled {
+.c9.btn.btn-link:disabled,
+.c9.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c7.btn:disabled,
-.c7.btn:disabled:hover {
+.c9.btn:disabled,
+.c9.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,15 +129,15 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   opacity: 0.65;
 }
 
-.c7.Button .Button__icon {
+.c9.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c7.Button--icon-only:focus {
+.c9.Button--icon-only:focus {
   outline: none;
 }
 
-.c7.Button--icon-only .Button__icon {
+.c9.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
@@ -217,15 +217,22 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   margin-bottom: unset;
 }
 
+.c7 {
+  border-left: 1px solid white;
+  font-size: 3.4rem;
+  margin: 0 36px 0 36px;
+  vertical-align: top;
+}
+
 .c0 {
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 85em;
+  max-width: 110em;
 }
 
-.c6 {
+.c8 {
   padding-right: 0rem;
-  padding-left: 0rem;
+  padding-left: 1rem;
 }
 
 .c4 {
@@ -233,7 +240,13 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 }
 
 .c5 {
-  max-width: 20rem;
+  max-width: 40rem;
+}
+
+.c6 {
+  display: inline-block;
+  margin: 0rem 0.5rem;
+  padding: 0.2rem;
 }
 
 <form
@@ -391,7 +404,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
         class="col"
       >
         <div
-          class="row"
+          class="ml-5 row"
         >
           <div
             class="pl-0 col"
@@ -410,7 +423,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
             </div>
           </div>
           <div
-            class="pl-0 col-md-auto"
+            class="pl-0 col"
           >
             <div
               class="c3 c5 input form-group"
@@ -425,77 +438,12 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
                 class="form-control"
                 id="input-municipality"
                 name="municipality"
+                placeholder="City of contact's address"
                 title=""
                 value=""
               />
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="col-auto"
-      >
-        <div
-          class="align-items-center row"
-        >
-          <div
-            class="c6 col-auto"
-          >
-            <button
-              class="c7 Button Button--icon-only primary btn btn-primary"
-              data-testid="search"
-              id="search-button"
-              title="search"
-              type="button"
-            >
-              <div
-                class="Button__icon"
-              >
-                <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="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-              </div>
-            </button>
-          </div>
-          <div
-            class="c6 col-auto"
-          >
-            <button
-              class="c7 Button Button--icon-only btn btn-info"
-              data-testid="reset-button"
-              id="reset-button"
-              title="reset-button"
-              type="button"
-            >
-              <div
-                class="Button__icon"
-              >
-                <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="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
-                  />
-                </svg>
-              </div>
-            </button>
-          </div>
           <div
             class="pl-0 col"
           >
@@ -519,42 +467,113 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
                 </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"
+            <div
+              class="c6"
             >
-              <g
-                transform="translate(1, 1)"
+              <svg
+                fill="currentColor"
+                height="16"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 512 512"
+                width="16"
+                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>
+                <path
+                  d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                />
+              </svg>
+            </div>
             <span>
-              Show active contacts only
+              <b>
+                Active
+              </b>
+               contacts only
             </span>
           </div>
         </div>
       </div>
+      <div
+        class="ml-2 col-auto"
+      >
+        <div
+          class="row"
+        >
+          <div
+            class="pr-0 col"
+          >
+            <span
+              class="c7"
+            />
+          </div>
+          <div
+            class="col"
+          >
+            <div
+              class="row"
+            >
+              <div
+                class="c8 col"
+              >
+                <button
+                  class="c9 Button Button--icon-only primary btn btn-primary"
+                  data-testid="search"
+                  id="search-button"
+                  title="search"
+                  type="button"
+                >
+                  <div
+                    class="Button__icon"
+                  >
+                    <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="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                      />
+                    </svg>
+                  </div>
+                </button>
+              </div>
+              <div
+                class="c8 col"
+              >
+                <button
+                  class="c9 Button Button--icon-only btn btn-info"
+                  data-testid="reset-button"
+                  id="reset-button"
+                  title="reset-button"
+                  type="button"
+                >
+                  <div
+                    class="Button__icon"
+                  >
+                    <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="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
+                      />
+                    </svg>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </form>
 </DocumentFragment>
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactManagerView.tsx b/source/frontend/src/components/contact/ContactManagerView/ContactManagerView.tsx
index c4ee3945fd..1be9414404 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactManagerView.tsx
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactManagerView.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { IoMdPersonAdd } from 'react-icons/io';
+import { FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router';
 import { toast } from 'react-toastify';
 import styled from 'styled-components';
@@ -96,11 +96,13 @@ const ContactManagerView = ({
             restrictContactType={restrictContactType}
           />
         </Col>
+      </Row>
+      <Row>
         {showAddButton && hasClaim(Claims.CONTACT_ADD) && (
           <Col xs="auto" xl="3" className="pl-0">
             <StyledPrimaryButton onClick={() => history.push('/contact/new')}>
-              <IoMdPersonAdd color="white" className="mr-3" />
-              <span>Add new contact</span>
+              <FaPlus className="mr-3" />
+              &nbsp;Add new contact
             </StyledPrimaryButton>
           </Col>
         )}
@@ -131,8 +133,8 @@ const ContactManagerView = ({
 export default ContactManagerView;
 
 const StyledPrimaryButton = styled(Button)`
-  margin: 0.4rem 0.6rem;
-  white-space: nowrap;
-  display: inline-block;
-  gap: 1rem;
+  margin: 2rem 1.5rem;
+  &.btn.btn-primary {
+    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
+  }
 `;
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 8c75c3247a..e859c4aa21 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 />
-  .c5.btn {
+  .c6.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,49 +37,49 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   height: 3.8rem;
 }
 
-.c5.btn:hover {
+.c6.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c5.btn:focus {
+.c6.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c5.btn.btn-primary {
+.c6.btn.btn-primary {
   border: none;
 }
 
-.c5.btn.btn-secondary {
+.c6.btn.btn-secondary {
   background: none;
 }
 
-.c5.btn.btn-info {
+.c6.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c5.btn.btn-info:hover,
-.c5.btn.btn-info:active,
-.c5.btn.btn-info:focus {
+.c6.btn.btn-info:hover,
+.c6.btn.btn-info:active,
+.c6.btn.btn-info:focus {
   background: none;
 }
 
-.c5.btn.btn-light {
+.c6.btn.btn-light {
   border: none;
 }
 
-.c5.btn.btn-dark {
+.c6.btn.btn-dark {
   border: none;
 }
 
-.c5.btn.btn-link {
+.c6.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -100,9 +100,9 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   padding: 0;
 }
 
-.c5.btn.btn-link:hover,
-.c5.btn.btn-link:active,
-.c5.btn.btn-link:focus {
+.c6.btn.btn-link:hover,
+.c6.btn.btn-link:active,
+.c6.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +111,14 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   outline: none;
 }
 
-.c5.btn.btn-link:disabled,
-.c5.btn.btn-link.disabled {
+.c6.btn.btn-link:disabled,
+.c6.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c5.btn:disabled,
-.c5.btn:disabled:hover {
+.c6.btn:disabled,
+.c6.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,42 +129,42 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   opacity: 0.65;
 }
 
-.c5.Button .Button__icon {
+.c6.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c5.Button--icon-only:focus {
+.c6.Button--icon-only:focus {
   outline: none;
 }
 
-.c5.Button--icon-only .Button__icon {
+.c6.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c6.c6.btn {
+.c7.c7.btn {
   background-color: unset;
   border: none;
 }
 
-.c6.c6.btn:hover,
-.c6.c6.btn:focus,
-.c6.c6.btn:active {
+.c7.c7.btn:hover,
+.c7.c7.btn:focus,
+.c7.c7.btn:active {
   background-color: unset;
   outline: none;
   box-shadow: none;
 }
 
-.c6.c6.btn svg {
+.c7.c7.btn svg {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
 
-.c6.c6.btn svg:hover {
+.c7.c7.btn svg:hover {
   -webkit-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
 
-.c3 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -203,7 +203,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   height: 1.6rem;
 }
 
-.c4 {
+.c5 {
   -webkit-box-pack: space-around;
   -webkit-justify-content: space-around;
   -ms-flex-pack: space-around;
@@ -211,6 +211,11 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   width: 100%;
 }
 
+.c3 a {
+  font-weight: bold;
+  color: !important;
+}
+
 <div
     class="table"
     data-testid="contactsTable"
@@ -258,7 +263,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
           class="th"
           colspan="1"
           role="columnheader"
-          style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
+          style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
         >
           <div
             class="sortable-column"
@@ -578,41 +583,29 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 10 0 auto; min-width: 10px; width: 10px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <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="active"
             >
-              <g
-                transform="translate(1, 1)"
+              <svg
+                class="mr-2"
+                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>
+                <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"
             role="cell"
-            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             <svg
@@ -635,11 +628,15 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 80 0 auto; min-width: 30px; width: 80px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <a
-              href="/contact/1"
+            <div
+              class="c3"
             >
-              summary
-            </a>
+              <a
+                href="/contact/1"
+              >
+                summary
+              </a>
+            </div>
           </div>
           <div
             class="td"
@@ -702,10 +699,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 c4"
+              class="c4 c5"
             >
               <button
-                class="c5 Button c6 btn btn-light"
+                class="c6 Button c7 btn btn-light"
                 title="View Contact"
                 type="button"
               >
@@ -769,41 +766,29 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 10 0 auto; min-width: 10px; width: 10px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <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="active"
             >
-              <g
-                transform="translate(1, 1)"
+              <svg
+                class="mr-2"
+                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>
+                <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"
             role="cell"
-            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             <svg
@@ -826,11 +811,15 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 80 0 auto; min-width: 30px; width: 80px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <a
-              href="/contact/2"
+            <div
+              class="c3"
             >
-              summary
-            </a>
+              <a
+                href="/contact/2"
+              >
+                summary
+              </a>
+            </div>
           </div>
           <div
             class="td"
@@ -893,10 +882,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 c4"
+              class="c4 c5"
             >
               <button
-                class="c5 Button c6 btn btn-light"
+                class="c6 Button c7 btn btn-light"
                 title="View Contact"
                 type="button"
               >
@@ -960,41 +949,29 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 10 0 auto; min-width: 10px; width: 10px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <svg
-              height="10"
-              overflow="visible"
-              preserveAspectRatio="none"
-              viewBox="0 0 10.999999999999995 10"
-              width="10.999999999999995"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
+            <div
+              class="inactive"
             >
-              <g
-                transform="translate(1, 1)"
+              <svg
+                class="mr-2"
+                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.499999999999997 0 C6.983617610222995 0 8.999999999999995 1.7923399020239998 8.999999999999995 4 C8.999999999999995 6.207660097976 6.983617610222995 8 4.499999999999997 8 C2.016382389776999 8 0 6.207660097976 0 4 C0 1.7923399020239998 2.016382389776999 0 4.499999999999997 0 Z"
-                    id="path-1636147294005408"
-                    vector-effect="non-scaling-stroke"
-                  />
-                </defs>
-                <g
-                  transform="translate(0, 0)"
-                >
-                  <path
-                    d="M4.499999999999997 0 C6.983617610222995 0 8.999999999999995 1.7923399020239998 8.999999999999995 4 C8.999999999999995 6.207660097976 6.983617610222995 8 4.499999999999997 8 C2.016382389776999 8 0 6.207660097976 0 4 C0 1.7923399020239998 2.016382389776999 0 4.499999999999997 0 Z"
-                    style="stroke: rgb(92, 89, 89); stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; fill: rgb(255, 255, 255);"
-                    vector-effect="non-scaling-stroke"
-                  />
-                </g>
-              </g>
-            </svg>
+                <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"
             role="cell"
-            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             <svg
@@ -1017,11 +994,15 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 80 0 auto; min-width: 30px; width: 80px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <a
-              href="/contact/3"
+            <div
+              class="c3"
             >
-              summary
-            </a>
+              <a
+                href="/contact/3"
+              >
+                summary
+              </a>
+            </div>
           </div>
           <div
             class="td"
@@ -1084,10 +1065,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 c4"
+              class="c4 c5"
             >
               <button
-                class="c5 Button c6 btn btn-light"
+                class="c6 Button c7 btn btn-light"
                 title="View Contact"
                 type="button"
               >
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
index 6c3e5b0c48..2c4c891542 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
@@ -1,11 +1,11 @@
 import { FaRegBuilding, FaRegUser } from 'react-icons/fa';
-import { MdContactMail, MdEdit } from 'react-icons/md';
+import { FaCircle } from 'react-icons/fa';
+import { FaEdit } from 'react-icons/fa';
+import { MdContactMail } from 'react-icons/md';
 import { Link, useHistory } from 'react-router-dom';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import Active from '@/assets/images/active.svg?react';
-import Inactive from '@/assets/images/inactive.svg?react';
 import { StyledIconButton } from '@/components/common/buttons';
 import { InlineFlexDiv } from '@/components/common/styles';
 import { ColumnWithProps } from '@/components/Table';
@@ -22,13 +22,16 @@ const columns: ColumnWithProps<IContactSearchResult>[] = [
     width: 10,
     maxWidth: 10,
     minWidth: 10,
-    Cell: (props: CellProps<IContactSearchResult>) =>
-      props.row.original.isDisabled ? <Inactive /> : <Active />,
+    Cell: (props: CellProps<IContactSearchResult>) => (
+      <StatusIndicators className={props.row.original.isDisabled ? 'inactive' : 'active'}>
+        <FaCircle size={10} className="mr-2" />
+      </StatusIndicators>
+    ),
   },
   {
     Header: '',
     id: 'id',
-    align: 'right',
+    align: 'center',
     width: 20,
     maxWidth: 20,
     Cell: (props: CellProps<IContactSearchResult>) =>
@@ -45,7 +48,11 @@ const columns: ColumnWithProps<IContactSearchResult>[] = [
     Cell: (props: CellProps<IContactSearchResult>) => {
       const { hasClaim } = useKeycloakWrapper();
       if (hasClaim(Claims.CONTACT_VIEW)) {
-        return <Link to={`/contact/${props.row.original.id}`}>{props.row.original.summary}</Link>;
+        return (
+          <SummaryLink>
+            <Link to={`/contact/${props.row.original.id}`}>{props.row.original.summary}</Link>
+          </SummaryLink>
+        );
       }
       return stringToFragment(props.row.original.summary);
     },
@@ -121,7 +128,7 @@ const columns: ColumnWithProps<IContactSearchResult>[] = [
               variant="light"
               onClick={() => history.push(`/contact/${props.row.original.id}/edit`)}
             >
-              <MdEdit size={22} />
+              <FaEdit size={22} />
             </StyledIconButton>
           )}
 
@@ -144,4 +151,18 @@ const StyledDiv = styled(InlineFlexDiv)`
   width: 100%;
 `;
 
+export const StatusIndicators = styled.div`
+  color: ${props => props.theme.css.borderOutlineColor};
+  &.active {
+    color: ${props => props.theme.bcTokens.iconsColorSuccess};
+  }
+`;
+
+export const SummaryLink = styled.div`
+  a {
+    font-weight: bold;
+    color: ${props => props.theme.css.activeActionColor} !important;
+  }
+`;
+
 export default columns;
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 7c1ee6aaab..8be15efef1 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
@@ -6,7 +6,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c7.btn {
+  .c9.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,49 +37,49 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   height: 3.8rem;
 }
 
-.c7.btn:hover {
+.c9.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c7.btn:focus {
+.c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c7.btn.btn-primary {
+.c9.btn.btn-primary {
   border: none;
 }
 
-.c7.btn.btn-secondary {
+.c9.btn.btn-secondary {
   background: none;
 }
 
-.c7.btn.btn-info {
+.c9.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c7.btn.btn-info:hover,
-.c7.btn.btn-info:active,
-.c7.btn.btn-info:focus {
+.c9.btn.btn-info:hover,
+.c9.btn.btn-info:active,
+.c9.btn.btn-info:focus {
   background: none;
 }
 
-.c7.btn.btn-light {
+.c9.btn.btn-light {
   border: none;
 }
 
-.c7.btn.btn-dark {
+.c9.btn.btn-dark {
   border: none;
 }
 
-.c7.btn.btn-link {
+.c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -100,9 +100,9 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   padding: 0;
 }
 
-.c7.btn.btn-link:hover,
-.c7.btn.btn-link:active,
-.c7.btn.btn-link:focus {
+.c9.btn.btn-link:hover,
+.c9.btn.btn-link:active,
+.c9.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +111,14 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   outline: none;
 }
 
-.c7.btn.btn-link:disabled,
-.c7.btn.btn-link.disabled {
+.c9.btn.btn-link:disabled,
+.c9.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c7.btn:disabled,
-.c7.btn:disabled:hover {
+.c9.btn:disabled,
+.c9.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,15 +129,15 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   opacity: 0.65;
 }
 
-.c7.Button .Button__icon {
+.c9.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c7.Button--icon-only:focus {
+.c9.Button--icon-only:focus {
   outline: none;
 }
 
-.c7.Button--icon-only .Button__icon {
+.c9.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
@@ -159,7 +159,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c8 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -178,12 +178,12 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   margin-left: 0.5rem;
 }
 
-.c10 {
+.c12 {
   width: 1.6rem;
   height: 1.6rem;
 }
 
-.c9 {
+.c11 {
   width: 1.6rem;
   height: 1.6rem;
 }
@@ -198,7 +198,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   flex-wrap: nowrap;
 }
 
-.c11 {
+.c13 {
   font-size: 1.4rem;
 }
 
@@ -250,15 +250,22 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   margin-bottom: unset;
 }
 
+.c7 {
+  border-left: 1px solid white;
+  font-size: 3.4rem;
+  margin: 0 36px 0 36px;
+  vertical-align: top;
+}
+
 .c0 {
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 85em;
+  max-width: 110em;
 }
 
-.c6 {
+.c8 {
   padding-right: 0rem;
-  padding-left: 0rem;
+  padding-left: 1rem;
 }
 
 .c4 {
@@ -266,7 +273,13 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 }
 
 .c5 {
-  max-width: 20rem;
+  max-width: 40rem;
+}
+
+.c6 {
+  display: inline-block;
+  margin: 0rem 0.5rem;
+  padding: 0.2rem;
 }
 
 <div>
@@ -431,7 +444,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               class="col"
             >
               <div
-                class="row"
+                class="ml-5 row"
               >
                 <div
                   class="pl-0 col"
@@ -450,7 +463,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="pl-0 col-md-auto"
+                  class="pl-0 col"
                 >
                   <div
                     class="c3 c5 input form-group"
@@ -465,77 +478,12 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                       class="form-control"
                       id="input-municipality"
                       name="municipality"
+                      placeholder="City of contact's address"
                       title=""
                       value=""
                     />
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              class="col-auto"
-            >
-              <div
-                class="align-items-center row"
-              >
-                <div
-                  class="c6 col-auto"
-                >
-                  <button
-                    class="c7 Button Button--icon-only primary btn btn-primary"
-                    data-testid="search"
-                    id="search-button"
-                    title="search"
-                    type="button"
-                  >
-                    <div
-                      class="Button__icon"
-                    >
-                      <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="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                        />
-                      </svg>
-                    </div>
-                  </button>
-                </div>
-                <div
-                  class="c6 col-auto"
-                >
-                  <button
-                    class="c7 Button Button--icon-only btn btn-info"
-                    data-testid="reset-button"
-                    id="reset-button"
-                    title="reset-button"
-                    type="button"
-                  >
-                    <div
-                      class="Button__icon"
-                    >
-                      <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="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
-                        />
-                      </svg>
-                    </div>
-                  </button>
-                </div>
                 <div
                   class="pl-0 col"
                 >
@@ -559,46 +507,120 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                       </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"
+                  <div
+                    class="c6"
                   >
-                    <g
-                      transform="translate(1, 1)"
+                    <svg
+                      fill="currentColor"
+                      height="16"
+                      stroke="currentColor"
+                      stroke-width="0"
+                      viewBox="0 0 512 512"
+                      width="16"
+                      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>
+                      <path
+                        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                      />
+                    </svg>
+                  </div>
                   <span>
-                    Show active contacts only
+                    <b>
+                      Active
+                    </b>
+                     contacts only
                   </span>
                 </div>
               </div>
             </div>
+            <div
+              class="ml-2 col-auto"
+            >
+              <div
+                class="row"
+              >
+                <div
+                  class="pr-0 col"
+                >
+                  <span
+                    class="c7"
+                  />
+                </div>
+                <div
+                  class="col"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="c8 col"
+                    >
+                      <button
+                        class="c9 Button Button--icon-only primary btn btn-primary"
+                        data-testid="search"
+                        id="search-button"
+                        title="search"
+                        type="button"
+                      >
+                        <div
+                          class="Button__icon"
+                        >
+                          <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="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      class="c8 col"
+                    >
+                      <button
+                        class="c9 Button Button--icon-only btn btn-info"
+                        data-testid="reset-button"
+                        id="reset-button"
+                        title="reset-button"
+                        type="button"
+                      >
+                        <div
+                          class="Button__icon"
+                        >
+                          <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="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
+                            />
+                          </svg>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </form>
       </div>
     </div>
+    <div
+      class="row"
+    />
     <div>
       <div
         class="table"
@@ -647,7 +669,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               class="th"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
+              style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             >
               <div
                 class="sortable-column"
@@ -664,11 +686,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 Summary
                 <div
-                  class="c8"
+                  class="c10"
                   data-testid="sort-column-summary"
                 >
                   <svg
-                    class="c9"
+                    class="c11"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -683,7 +705,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -710,11 +732,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 First name
                 <div
-                  class="c8"
+                  class="c10"
                   data-testid="sort-column-firstName"
                 >
                   <svg
-                    class="c9"
+                    class="c11"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -729,7 +751,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -756,11 +778,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 Last name
                 <div
-                  class="c8"
+                  class="c10"
                   data-testid="sort-column-surname"
                 >
                   <svg
-                    class="c9"
+                    class="c11"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -775,7 +797,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -802,11 +824,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 Organization
                 <div
-                  class="c8"
+                  class="c10"
                   data-testid="sort-column-organizationName"
                 >
                   <svg
-                    class="c9"
+                    class="c11"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -821,7 +843,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -872,11 +894,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               >
                 City
                 <div
-                  class="c8"
+                  class="c10"
                   data-testid="sort-column-municipalityName"
                 >
                   <svg
-                    class="c9"
+                    class="c11"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -891,7 +913,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     />
                   </svg>
                   <svg
-                    class="c10"
+                    class="c12"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -949,7 +971,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
           class="ml-auto align-self-center col-auto"
         >
           <p
-            class="c11"
+            class="c13"
           >
             0 selected
           </p>
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 c9484c81d9..c589bacc0a 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
@@ -6,7 +6,7 @@ exports[`Contact List View > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c11.btn {
+  .c13.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,49 +37,49 @@ exports[`Contact List View > matches snapshot 1`] = `
   height: 3.8rem;
 }
 
-.c11.btn:hover {
+.c13.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c11.btn:focus {
+.c13.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c11.btn.btn-primary {
+.c13.btn.btn-primary {
   border: none;
 }
 
-.c11.btn.btn-secondary {
+.c13.btn.btn-secondary {
   background: none;
 }
 
-.c11.btn.btn-info {
+.c13.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c11.btn.btn-info:hover,
-.c11.btn.btn-info:active,
-.c11.btn.btn-info:focus {
+.c13.btn.btn-info:hover,
+.c13.btn.btn-info:active,
+.c13.btn.btn-info:focus {
   background: none;
 }
 
-.c11.btn.btn-light {
+.c13.btn.btn-light {
   border: none;
 }
 
-.c11.btn.btn-dark {
+.c13.btn.btn-dark {
   border: none;
 }
 
-.c11.btn.btn-link {
+.c13.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -100,9 +100,9 @@ exports[`Contact List View > matches snapshot 1`] = `
   padding: 0;
 }
 
-.c11.btn.btn-link:hover,
-.c11.btn.btn-link:active,
-.c11.btn.btn-link:focus {
+.c13.btn.btn-link:hover,
+.c13.btn.btn-link:active,
+.c13.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +111,14 @@ exports[`Contact List View > matches snapshot 1`] = `
   outline: none;
 }
 
-.c11.btn.btn-link:disabled,
-.c11.btn.btn-link.disabled {
+.c13.btn.btn-link:disabled,
+.c13.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c11.btn:disabled,
-.c11.btn:disabled:hover {
+.c13.btn:disabled,
+.c13.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,37 +129,37 @@ exports[`Contact List View > matches snapshot 1`] = `
   opacity: 0.65;
 }
 
-.c11.Button .Button__icon {
+.c13.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c11.Button--icon-only:focus {
+.c13.Button--icon-only:focus {
   outline: none;
 }
 
-.c11.Button--icon-only .Button__icon {
+.c13.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c16.c16.btn {
+.c19.c19.btn {
   background-color: unset;
   border: none;
 }
 
-.c16.c16.btn:hover,
-.c16.c16.btn:focus,
-.c16.c16.btn:active {
+.c19.c19.btn:hover,
+.c19.c19.btn:focus,
+.c19.c19.btn:active {
   background-color: unset;
   outline: none;
   box-shadow: none;
 }
 
-.c16.c16.btn svg {
+.c19.c19.btn svg {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
 
-.c16.c16.btn svg:hover {
+.c19.c19.btn svg:hover {
   -webkit-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
@@ -182,7 +182,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c12 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,27 +201,27 @@ exports[`Contact List View > matches snapshot 1`] = `
   margin-left: 0.5rem;
 }
 
-.c14 {
+.c16 {
   width: 1.6rem;
   height: 1.6rem;
 }
 
-.c13 {
+.c15 {
   width: 1.6rem;
   height: 1.6rem;
 }
 
-.c17 {
+.c20 {
   margin-top: 0.3rem;
 }
 
-.c18 {
+.c21 {
   width: 7.5rem;
   margin-left: 1rem;
   margin-right: 1rem;
 }
 
-.c18:disabled {
+.c21:disabled {
   background: white;
 }
 
@@ -283,15 +283,22 @@ exports[`Contact List View > matches snapshot 1`] = `
   margin-bottom: unset;
 }
 
+.c11 {
+  border-left: 1px solid white;
+  font-size: 3.4rem;
+  margin: 0 36px 0 36px;
+  vertical-align: top;
+}
+
 .c4 {
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 85em;
+  max-width: 110em;
 }
 
-.c10 {
+.c12 {
   padding-right: 0rem;
-  padding-left: 0rem;
+  padding-left: 1rem;
 }
 
 .c8 {
@@ -299,7 +306,13 @@ exports[`Contact List View > matches snapshot 1`] = `
 }
 
 .c9 {
-  max-width: 20rem;
+  max-width: 40rem;
+}
+
+.c10 {
+  display: inline-block;
+  margin: 0rem 0.5rem;
+  padding: 0.2rem;
 }
 
 .c1 {
@@ -311,7 +324,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   overflow-y: auto;
 }
 
-.c15 {
+.c18 {
   -webkit-box-pack: space-around;
   -webkit-justify-content: space-around;
   -ms-flex-pack: space-around;
@@ -319,6 +332,11 @@ exports[`Contact List View > matches snapshot 1`] = `
   width: 100%;
 }
 
+.c17 a {
+  font-weight: bold;
+  color: !important;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -519,7 +537,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                   class="col"
                 >
                   <div
-                    class="row"
+                    class="ml-5 row"
                   >
                     <div
                       class="pl-0 col"
@@ -538,7 +556,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="pl-0 col-md-auto"
+                      class="pl-0 col"
                     >
                       <div
                         class="c7 c9 input form-group"
@@ -553,77 +571,12 @@ exports[`Contact List View > matches snapshot 1`] = `
                           class="form-control"
                           id="input-municipality"
                           name="municipality"
+                          placeholder="City of contact's address"
                           title=""
                           value=""
                         />
                       </div>
                     </div>
-                  </div>
-                </div>
-                <div
-                  class="col-auto"
-                >
-                  <div
-                    class="align-items-center row"
-                  >
-                    <div
-                      class="c10 col-auto"
-                    >
-                      <button
-                        class="c11 Button Button--icon-only primary btn btn-primary"
-                        data-testid="search"
-                        id="search-button"
-                        title="search"
-                        type="button"
-                      >
-                        <div
-                          class="Button__icon"
-                        >
-                          <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="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      class="c10 col-auto"
-                    >
-                      <button
-                        class="c11 Button Button--icon-only btn btn-info"
-                        data-testid="reset-button"
-                        id="reset-button"
-                        title="reset-button"
-                        type="button"
-                      >
-                        <div
-                          class="Button__icon"
-                        >
-                          <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="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
                     <div
                       class="pl-0 col"
                     >
@@ -647,46 +600,120 @@ exports[`Contact List View > matches snapshot 1`] = `
                           </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"
+                      <div
+                        class="c10"
                       >
-                        <g
-                          transform="translate(1, 1)"
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 512 512"
+                          width="16"
+                          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>
+                          <path
+                            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
+                          />
+                        </svg>
+                      </div>
                       <span>
-                        Show active contacts only
+                        <b>
+                          Active
+                        </b>
+                         contacts only
                       </span>
                     </div>
                   </div>
                 </div>
+                <div
+                  class="ml-2 col-auto"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="pr-0 col"
+                    >
+                      <span
+                        class="c11"
+                      />
+                    </div>
+                    <div
+                      class="col"
+                    >
+                      <div
+                        class="row"
+                      >
+                        <div
+                          class="c12 col"
+                        >
+                          <button
+                            class="c13 Button Button--icon-only primary btn btn-primary"
+                            data-testid="search"
+                            id="search-button"
+                            title="search"
+                            type="button"
+                          >
+                            <div
+                              class="Button__icon"
+                            >
+                              <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="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                                />
+                              </svg>
+                            </div>
+                          </button>
+                        </div>
+                        <div
+                          class="c12 col"
+                        >
+                          <button
+                            class="c13 Button Button--icon-only btn btn-info"
+                            data-testid="reset-button"
+                            id="reset-button"
+                            title="reset-button"
+                            type="button"
+                          >
+                            <div
+                              class="Button__icon"
+                            >
+                              <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="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
+                                />
+                              </svg>
+                            </div>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </form>
           </div>
         </div>
+        <div
+          class="row"
+        />
         <div>
           <div
             class="table"
@@ -715,7 +742,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                   class="th"
                   colspan="1"
                   role="columnheader"
-                  style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
+                  style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
                 >
                   <div
                     class="sortable-column"
@@ -732,11 +759,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     Summary
                     <div
-                      class="c12"
+                      class="c14"
                       data-testid="sort-column-summary"
                     >
                       <svg
-                        class="c13"
+                        class="c15"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -751,7 +778,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c14"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -778,11 +805,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     First name
                     <div
-                      class="c12"
+                      class="c14"
                       data-testid="sort-column-firstName"
                     >
                       <svg
-                        class="c13"
+                        class="c15"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -797,7 +824,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c14"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -824,11 +851,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     Last name
                     <div
-                      class="c12"
+                      class="c14"
                       data-testid="sort-column-surname"
                     >
                       <svg
-                        class="c13"
+                        class="c15"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -843,7 +870,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c14"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -870,11 +897,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     Organization
                     <div
-                      class="c12"
+                      class="c14"
                       data-testid="sort-column-organizationName"
                     >
                       <svg
-                        class="c13"
+                        class="c15"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -889,7 +916,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c14"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -940,11 +967,11 @@ exports[`Contact List View > matches snapshot 1`] = `
                   >
                     City
                     <div
-                      class="c12"
+                      class="c14"
                       data-testid="sort-column-municipalityName"
                     >
                       <svg
-                        class="c13"
+                        class="c15"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -959,7 +986,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         />
                       </svg>
                       <svg
-                        class="c14"
+                        class="c16"
                         fill="currentColor"
                         height="1em"
                         stroke="currentColor"
@@ -1019,41 +1046,29 @@ exports[`Contact List View > matches snapshot 1`] = `
                     style="box-sizing: border-box; flex: 10 0 auto; min-width: 10px; width: 10px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
                     title=""
                   >
-                    <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="active"
                     >
-                      <g
-                        transform="translate(1, 1)"
+                      <svg
+                        class="mr-2"
+                        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>
+                        <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"
                     role="cell"
-                    style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: right; text-align: right; flex-wrap: wrap; align-items: center; display: flex;"
+                    style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
                     title=""
                   >
                     <svg
@@ -1076,11 +1091,15 @@ exports[`Contact List View > matches snapshot 1`] = `
                     style="box-sizing: border-box; flex: 80 0 auto; min-width: 30px; width: 80px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
                     title=""
                   >
-                    <a
-                      href="/contact/1"
+                    <div
+                      class="c17"
                     >
-                      summary
-                    </a>
+                      <a
+                        href="/contact/1"
+                      >
+                        summary
+                      </a>
+                    </div>
                   </div>
                   <div
                     class="td"
@@ -1143,10 +1162,10 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="c6 c15"
+                      class="c6 c18"
                     >
                       <button
-                        class="c11 Button c16 btn btn-light"
+                        class="c13 Button c19 btn btn-light"
                         title="View Contact"
                         type="button"
                       >
@@ -1208,18 +1227,18 @@ exports[`Contact List View > matches snapshot 1`] = `
                     class="d-flex"
                   >
                     <span
-                      class="c17"
+                      class="c20"
                     >
                       Show
                     </span>
                     <input
-                      class="c18 form-control form-control-sm"
+                      class="c21 form-control form-control-sm"
                       disabled=""
                       type="number"
                       value="10"
                     />
                     <span
-                      class="c17"
+                      class="c20"
                     >
                       Entries
                     </span>

From c2eaf10d3c5947e287fecd9085915067e6c77928 Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Tue, 18 Jun 2024 13:38:36 -0700
Subject: [PATCH 2/3] Contact List spacing and icon changes

---
 .../ContactFilterComponent.tsx                | 16 ++--
 .../ContactFilterComponent.test.tsx.snap      | 16 ++--
 .../ContactResultComponent.test.tsx.snap      | 84 +++++++++++--------
 .../ContactResultComponent/columns.tsx        | 10 ++-
 .../ContactManagerView.test.tsx.snap          | 16 ++--
 .../ContactListView.test.tsx.snap             | 44 +++++-----
 6 files changed, 105 insertions(+), 81 deletions(-)

diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
index aac35d0b04..4c03df38d9 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
@@ -80,7 +80,7 @@ export const ContactFilterComponent: React.FunctionComponent<
                 radioValues={getRestrictedRadioValues(restrictContactType)}
               />
             </Col>
-            <Col>
+            <Col xl="auto">
               <Row className="ml-5">
                 <Col className="pl-0">
                   <StyledNameInput field="summary" placeholder="Name of person or organization" />
@@ -110,14 +110,14 @@ export const ContactFilterComponent: React.FunctionComponent<
                 </Col>
               </Row>
             </Col>
-            <Col xs="auto" className="ml-2">
+            <Col md="auto" className="ml-2">
               <Row>
-                <Col className="pr-0">
+                <Col className="pr-0" xs="auto">
                   <VerticalBar />
                 </Col>
                 <Col>
                   <Row>
-                    <StyledColButton>
+                    <StyledColButton xs="auto">
                       <SearchButton
                         type="button"
                         disabled={isSubmitting}
@@ -126,7 +126,7 @@ export const ContactFilterComponent: React.FunctionComponent<
                         }}
                       />
                     </StyledColButton>
-                    <StyledColButton>
+                    <StyledColButton xs="auto">
                       <ResetButton
                         type=""
                         disabled={isSubmitting}
@@ -209,7 +209,7 @@ const StyledFilterBoxForm = styled(Form)`
   background-color: ${({ theme }) => theme.css.filterBoxColor};
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 110em;
+  max-width: 85%;
 `;
 
 const StyledColButton = styled(Col)`
@@ -218,11 +218,11 @@ const StyledColButton = styled(Col)`
 `;
 
 export const StyledNameInput = styled(InlineInput)`
-  max-width: 32em;
+  max-width: 30em;
 `;
 
 export const StyledCityInput = styled(InlineInput)`
-  max-width: 40rem;
+  max-width: 25rem;
 `;
 
 export const ActiveIndicator = styled.div`
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 4dc1e8b11e..fb289ddb4c 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
@@ -227,7 +227,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 .c0 {
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 110em;
+  max-width: 85%;
 }
 
 .c8 {
@@ -236,11 +236,11 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 }
 
 .c4 {
-  max-width: 32em;
+  max-width: 30em;
 }
 
 .c5 {
-  max-width: 40rem;
+  max-width: 25rem;
 }
 
 .c6 {
@@ -401,7 +401,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class="col"
+        class="col-xl-auto"
       >
         <div
           class="ml-5 row"
@@ -494,13 +494,13 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class="ml-2 col-auto"
+        class="ml-2 col-md-auto"
       >
         <div
           class="row"
         >
           <div
-            class="pr-0 col"
+            class="pr-0 col-auto"
           >
             <span
               class="c7"
@@ -513,7 +513,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
               class="row"
             >
               <div
-                class="c8 col"
+                class="c8 col-auto"
               >
                 <button
                   class="c9 Button Button--icon-only primary btn btn-primary"
@@ -542,7 +542,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
                 </button>
               </div>
               <div
-                class="c8 col"
+                class="c8 col-auto"
               >
                 <button
                   class="c9 Button Button--icon-only btn btn-info"
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 e859c4aa21..ec51c6a8d9 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
@@ -608,19 +608,23 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <svg
-              fill="currentColor"
-              height="20"
-              stroke="currentColor"
-              stroke-width="0"
-              viewBox="0 0 448 512"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="active"
             >
-              <path
-                d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="20"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 448 512"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="td clickable"
@@ -791,19 +795,23 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <svg
-              fill="currentColor"
-              height="20"
-              stroke="currentColor"
-              stroke-width="0"
-              viewBox="0 0 448 512"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="active"
             >
-              <path
-                d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="20"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 448 512"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="td clickable"
@@ -974,19 +982,23 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <svg
-              fill="currentColor"
-              height="20"
-              stroke="currentColor"
-              stroke-width="0"
-              viewBox="0 0 448 512"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="inactive"
             >
-              <path
-                d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="20"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 448 512"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                />
+              </svg>
+            </div>
           </div>
           <div
             class="td clickable"
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
index 2c4c891542..874a3260bc 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
@@ -35,7 +35,15 @@ const columns: ColumnWithProps<IContactSearchResult>[] = [
     width: 20,
     maxWidth: 20,
     Cell: (props: CellProps<IContactSearchResult>) =>
-      isPersonResult(props.row.original) ? <FaRegUser size={20} /> : <FaRegBuilding size={20} />,
+      isPersonResult(props.row.original) ? (
+        <StatusIndicators className={props.row.original.isDisabled ? 'inactive' : 'active'}>
+          <FaRegUser size={20} />
+        </StatusIndicators>
+      ) : (
+        <StatusIndicators className={props.row.original.isDisabled ? 'inactive' : 'active'}>
+          <FaRegBuilding size={20} />
+        </StatusIndicators>
+      ),
   },
   {
     Header: 'Summary',
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 8be15efef1..965d75e1bb 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
@@ -260,7 +260,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 .c0 {
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 110em;
+  max-width: 85%;
 }
 
 .c8 {
@@ -269,11 +269,11 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 }
 
 .c4 {
-  max-width: 32em;
+  max-width: 30em;
 }
 
 .c5 {
-  max-width: 40rem;
+  max-width: 25rem;
 }
 
 .c6 {
@@ -441,7 +441,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               </div>
             </div>
             <div
-              class="col"
+              class="col-xl-auto"
             >
               <div
                 class="ml-5 row"
@@ -534,13 +534,13 @@ exports[`ContactManagerView > matches snapshot 1`] = `
               </div>
             </div>
             <div
-              class="ml-2 col-auto"
+              class="ml-2 col-md-auto"
             >
               <div
                 class="row"
               >
                 <div
-                  class="pr-0 col"
+                  class="pr-0 col-auto"
                 >
                   <span
                     class="c7"
@@ -553,7 +553,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                     class="row"
                   >
                     <div
-                      class="c8 col"
+                      class="c8 col-auto"
                     >
                       <button
                         class="c9 Button Button--icon-only primary btn btn-primary"
@@ -582,7 +582,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
                       </button>
                     </div>
                     <div
-                      class="c8 col"
+                      class="c8 col-auto"
                     >
                       <button
                         class="c9 Button Button--icon-only btn btn-info"
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 c589bacc0a..67431a6546 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
@@ -293,7 +293,7 @@ exports[`Contact List View > matches snapshot 1`] = `
 .c4 {
   border-radius: 0.4rem;
   padding: 1rem;
-  max-width: 110em;
+  max-width: 85%;
 }
 
 .c12 {
@@ -302,11 +302,11 @@ exports[`Contact List View > matches snapshot 1`] = `
 }
 
 .c8 {
-  max-width: 32em;
+  max-width: 30em;
 }
 
 .c9 {
-  max-width: 40rem;
+  max-width: 25rem;
 }
 
 .c10 {
@@ -534,7 +534,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="col"
+                  class="col-xl-auto"
                 >
                   <div
                     class="ml-5 row"
@@ -627,13 +627,13 @@ exports[`Contact List View > matches snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="ml-2 col-auto"
+                  class="ml-2 col-md-auto"
                 >
                   <div
                     class="row"
                   >
                     <div
-                      class="pr-0 col"
+                      class="pr-0 col-auto"
                     >
                       <span
                         class="c11"
@@ -646,7 +646,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                         class="row"
                       >
                         <div
-                          class="c12 col"
+                          class="c12 col-auto"
                         >
                           <button
                             class="c13 Button Button--icon-only primary btn btn-primary"
@@ -675,7 +675,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                           </button>
                         </div>
                         <div
-                          class="c12 col"
+                          class="c12 col-auto"
                         >
                           <button
                             class="c13 Button Button--icon-only btn btn-info"
@@ -1071,19 +1071,23 @@ exports[`Contact List View > matches snapshot 1`] = `
                     style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
                     title=""
                   >
-                    <svg
-                      fill="currentColor"
-                      height="20"
-                      stroke="currentColor"
-                      stroke-width="0"
-                      viewBox="0 0 448 512"
-                      width="20"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="active"
                     >
-                      <path
-                        d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
-                      />
-                    </svg>
+                      <svg
+                        fill="currentColor"
+                        height="20"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 448 512"
+                        width="20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                        />
+                      </svg>
+                    </div>
                   </div>
                   <div
                     class="td clickable"

From 8dd8ec54090d5a8b46df5d703699672132271dc0 Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Tue, 25 Jun 2024 12:15:32 -0700
Subject: [PATCH 3/3] Minor changes on the responsiveness of the Contact filter
 to accomodate Selecting Contacts view

---
 .../ContactFilterComponent.tsx                |  30 +-
 .../ContactFilterComponent.test.tsx.snap      | 296 +++++++++--------
 .../ContactManagerView.test.tsx.snap          | 296 +++++++++--------
 .../ContactListView.test.tsx.snap             | 305 +++++++++---------
 4 files changed, 492 insertions(+), 435 deletions(-)

diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
index 4c03df38d9..e18515b468 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
@@ -71,20 +71,22 @@ export const ContactFilterComponent: React.FunctionComponent<
             }
           }}
         >
-          <Row>
-            <Col xs="auto">
-              <RadioGroup
-                label="Search by:"
-                field="searchBy"
-                radioGroupClassName="pb-3"
-                radioValues={getRestrictedRadioValues(restrictContactType)}
-              />
-            </Col>
+          <Row className="p-5">
+            <Row className="pb-5">
+              <Col xs="auto">
+                <RadioGroup
+                  label="Search by:"
+                  field="searchBy"
+                  radioGroupClassName="pb-3"
+                  radioValues={getRestrictedRadioValues(restrictContactType)}
+                />
+              </Col>
+              <Col lg="auto" className="pl-0">
+                <StyledNameInput field="summary" placeholder="Name of person or organization" />
+              </Col>
+            </Row>
             <Col xl="auto">
-              <Row className="ml-5">
-                <Col className="pl-0">
-                  <StyledNameInput field="summary" placeholder="Name of person or organization" />
-                </Col>
+              <Row className="ml-10">
                 <Col className="pl-0">
                   <StyledCityInput
                     field="municipality"
@@ -210,6 +212,8 @@ const StyledFilterBoxForm = styled(Form)`
   border-radius: 0.4rem;
   padding: 1rem;
   max-width: 85%;
+  @media only screen and (max-width: 1199px) {
+  max-width: 50%;
 `;
 
 const StyledColButton = styled(Col)`
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 fb289ddb4c..afa09f6407 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
@@ -2,10 +2,18 @@
 
 exports[`ContactFilterComponent > matches snapshot 1`] = `
 <DocumentFragment>
-  <div
+  @media only screen and (max-width:1199px) {
+
+}
+
+<div
     class="Toastify"
   />
-  <div />
+  @media only screen and (max-width:1199px) {
+
+}
+
+<div />
   .c9.btn {
   display: -webkit-box;
   display: -webkit-flex;
@@ -249,179 +257,189 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   padding: 0.2rem;
 }
 
+@media only screen and (max-width:1199px) {
+  .c0 {
+    max-width: 50%;
+  }
+}
+
 <form
     action="#"
     class="c0"
   >
     <div
-      class="row"
+      class="p-5 row"
     >
       <div
-        class="col-auto"
+        class="pb-5 row"
       >
         <div
-          class="c1 form-group"
+          class="col-auto"
         >
-          <label
-            class="form-label"
-            for="searchBy"
-          >
-            Search by:
-          </label>
           <div
-            class="radio-group"
+            class="c1 form-group"
           >
+            <label
+              class="form-label"
+              for="searchBy"
+            >
+              Search by:
+            </label>
             <div
-              class="c2 pb-3"
+              class="radio-group"
             >
               <div
-                class="form-check"
+                class="c2 pb-3"
               >
-                <input
-                  class="form-check-input position-static"
-                  data-testid="radio-searchby-[object object]"
-                  id="input-organizations"
-                  name="searchBy"
-                  type="radio"
-                  value="organizations"
-                />
-              </div>
-              <label
-                class="form-check-label form-label"
-                for="searchBy"
-              >
-                <svg
-                  fill="currentColor"
-                  height="20"
-                  stroke="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 448 512"
-                  width="20"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="form-check"
                 >
-                  <path
-                    d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                  <input
+                    class="form-check-input position-static"
+                    data-testid="radio-searchby-[object object]"
+                    id="input-organizations"
+                    name="searchBy"
+                    type="radio"
+                    value="organizations"
                   />
-                </svg>
-                <span>
-                  Organizations
-                </span>
-              </label>
-            </div>
-            <div
-              class="c2 pb-3"
-            >
-              <div
-                class="form-check"
-              >
-                <input
-                  class="form-check-input position-static"
-                  data-testid="radio-searchby-[object object]"
-                  id="input-persons"
-                  name="searchBy"
-                  type="radio"
-                  value="persons"
-                />
+                </div>
+                <label
+                  class="form-check-label form-label"
+                  for="searchBy"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="20"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 448 512"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                    />
+                  </svg>
+                  <span>
+                    Organizations
+                  </span>
+                </label>
               </div>
-              <label
-                class="form-check-label form-label"
-                for="searchBy"
+              <div
+                class="c2 pb-3"
               >
-                <svg
-                  fill="currentColor"
-                  height="20"
-                  stroke="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 448 512"
-                  width="20"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="form-check"
                 >
-                  <path
-                    d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                  <input
+                    class="form-check-input position-static"
+                    data-testid="radio-searchby-[object object]"
+                    id="input-persons"
+                    name="searchBy"
+                    type="radio"
+                    value="persons"
                   />
-                </svg>
-                <span>
-                  Individuals
-                </span>
-              </label>
-            </div>
-            <div
-              class="c2 pb-3"
-            >
-              <div
-                class="form-check"
-              >
-                <input
-                  checked=""
-                  class="form-check-input position-static"
-                  data-testid="radio-searchby-[object object]"
-                  id="input-all"
-                  name="searchBy"
-                  type="radio"
-                  value="all"
-                />
+                </div>
+                <label
+                  class="form-check-label form-label"
+                  for="searchBy"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="20"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 448 512"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                    />
+                  </svg>
+                  <span>
+                    Individuals
+                  </span>
+                </label>
               </div>
-              <label
-                class="form-check-label form-label"
-                for="searchBy"
+              <div
+                class="c2 pb-3"
               >
-                <svg
-                  fill="currentColor"
-                  height="20"
-                  stroke="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 448 512"
-                  width="20"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="form-check"
                 >
-                  <path
-                    d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                  <input
+                    checked=""
+                    class="form-check-input position-static"
+                    data-testid="radio-searchby-[object object]"
+                    id="input-all"
+                    name="searchBy"
+                    type="radio"
+                    value="all"
                   />
-                </svg>
-                +
-                <svg
-                  fill="currentColor"
-                  height="20"
-                  stroke="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 448 512"
-                  width="20"
-                  xmlns="http://www.w3.org/2000/svg"
+                </div>
+                <label
+                  class="form-check-label form-label"
+                  for="searchBy"
                 >
-                  <path
-                    d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
-                  />
-                </svg>
-                <span>
-                  All
-                </span>
-              </label>
+                  <svg
+                    fill="currentColor"
+                    height="20"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 448 512"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                    />
+                  </svg>
+                  +
+                  <svg
+                    fill="currentColor"
+                    height="20"
+                    stroke="currentColor"
+                    stroke-width="0"
+                    viewBox="0 0 448 512"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                    />
+                  </svg>
+                  <span>
+                    All
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
         </div>
+        <div
+          class="pl-0 col-lg-auto"
+        >
+          <div
+            class="c3 c4 input form-group"
+          >
+            <input
+              class="form-control"
+              id="input-summary"
+              name="summary"
+              placeholder="Name of person or organization"
+              title=""
+              value=""
+            />
+          </div>
+        </div>
       </div>
       <div
         class="col-xl-auto"
       >
         <div
-          class="ml-5 row"
+          class="ml-10 row"
         >
-          <div
-            class="pl-0 col"
-          >
-            <div
-              class="c3 c4 input form-group"
-            >
-              <input
-                class="form-control"
-                id="input-summary"
-                name="summary"
-                placeholder="Name of person or organization"
-                title=""
-                value=""
-              />
-            </div>
-          </div>
           <div
             class="pl-0 col"
           >
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 965d75e1bb..e276e0e64d 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
@@ -2,10 +2,18 @@
 
 exports[`ContactManagerView > matches snapshot 1`] = `
 <DocumentFragment>
-  <div
+  @media only screen and (max-width:1199px) {
+
+}
+
+<div
     class="Toastify"
   />
-  <div />
+  @media only screen and (max-width:1199px) {
+
+}
+
+<div />
   .c9.btn {
   display: -webkit-box;
   display: -webkit-flex;
@@ -282,6 +290,12 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   padding: 0.2rem;
 }
 
+@media only screen and (max-width:1199px) {
+  .c0 {
+    max-width: 50%;
+  }
+}
+
 <div>
     <div
       class="row"
@@ -294,174 +308,178 @@ exports[`ContactManagerView > matches snapshot 1`] = `
           class="c0"
         >
           <div
-            class="row"
+            class="p-5 row"
           >
             <div
-              class="col-auto"
+              class="pb-5 row"
             >
               <div
-                class="c1 form-group"
+                class="col-auto"
               >
-                <label
-                  class="form-label"
-                  for="searchBy"
-                >
-                  Search by:
-                </label>
                 <div
-                  class="radio-group"
+                  class="c1 form-group"
                 >
+                  <label
+                    class="form-label"
+                    for="searchBy"
+                  >
+                    Search by:
+                  </label>
                   <div
-                    class="c2 pb-3"
+                    class="radio-group"
                   >
                     <div
-                      class="form-check"
+                      class="c2 pb-3"
                     >
-                      <input
-                        class="form-check-input position-static"
-                        data-testid="radio-searchby-[object object]"
-                        id="input-organizations"
-                        name="searchBy"
-                        type="radio"
-                        value="organizations"
-                      />
-                    </div>
-                    <label
-                      class="form-check-label form-label"
-                      for="searchBy"
-                    >
-                      <svg
-                        fill="currentColor"
-                        height="20"
-                        stroke="currentColor"
-                        stroke-width="0"
-                        viewBox="0 0 448 512"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="form-check"
                       >
-                        <path
-                          d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                        <input
+                          class="form-check-input position-static"
+                          data-testid="radio-searchby-[object object]"
+                          id="input-organizations"
+                          name="searchBy"
+                          type="radio"
+                          value="organizations"
                         />
-                      </svg>
-                      <span>
-                        Organizations
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    class="c2 pb-3"
-                  >
-                    <div
-                      class="form-check"
-                    >
-                      <input
-                        class="form-check-input position-static"
-                        data-testid="radio-searchby-[object object]"
-                        id="input-persons"
-                        name="searchBy"
-                        type="radio"
-                        value="persons"
-                      />
+                      </div>
+                      <label
+                        class="form-check-label form-label"
+                        for="searchBy"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="20"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 448 512"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                          />
+                        </svg>
+                        <span>
+                          Organizations
+                        </span>
+                      </label>
                     </div>
-                    <label
-                      class="form-check-label form-label"
-                      for="searchBy"
+                    <div
+                      class="c2 pb-3"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="20"
-                        stroke="currentColor"
-                        stroke-width="0"
-                        viewBox="0 0 448 512"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="form-check"
                       >
-                        <path
-                          d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                        <input
+                          class="form-check-input position-static"
+                          data-testid="radio-searchby-[object object]"
+                          id="input-persons"
+                          name="searchBy"
+                          type="radio"
+                          value="persons"
                         />
-                      </svg>
-                      <span>
-                        Individuals
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    class="c2 pb-3"
-                  >
-                    <div
-                      class="form-check"
-                    >
-                      <input
-                        checked=""
-                        class="form-check-input position-static"
-                        data-testid="radio-searchby-[object object]"
-                        id="input-all"
-                        name="searchBy"
-                        type="radio"
-                        value="all"
-                      />
+                      </div>
+                      <label
+                        class="form-check-label form-label"
+                        for="searchBy"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="20"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 448 512"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                          />
+                        </svg>
+                        <span>
+                          Individuals
+                        </span>
+                      </label>
                     </div>
-                    <label
-                      class="form-check-label form-label"
-                      for="searchBy"
+                    <div
+                      class="c2 pb-3"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="20"
-                        stroke="currentColor"
-                        stroke-width="0"
-                        viewBox="0 0 448 512"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="form-check"
                       >
-                        <path
-                          d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                        <input
+                          checked=""
+                          class="form-check-input position-static"
+                          data-testid="radio-searchby-[object object]"
+                          id="input-all"
+                          name="searchBy"
+                          type="radio"
+                          value="all"
                         />
-                      </svg>
-                      +
-                      <svg
-                        fill="currentColor"
-                        height="20"
-                        stroke="currentColor"
-                        stroke-width="0"
-                        viewBox="0 0 448 512"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
+                      </div>
+                      <label
+                        class="form-check-label form-label"
+                        for="searchBy"
                       >
-                        <path
-                          d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
-                        />
-                      </svg>
-                      <span>
-                        All
-                      </span>
-                    </label>
+                        <svg
+                          fill="currentColor"
+                          height="20"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 448 512"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                          />
+                        </svg>
+                        +
+                        <svg
+                          fill="currentColor"
+                          height="20"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 448 512"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                          />
+                        </svg>
+                        <span>
+                          All
+                        </span>
+                      </label>
+                    </div>
                   </div>
                 </div>
               </div>
+              <div
+                class="pl-0 col-lg-auto"
+              >
+                <div
+                  class="c3 c4 input form-group"
+                >
+                  <input
+                    class="form-control"
+                    id="input-summary"
+                    name="summary"
+                    placeholder="Name of person or organization"
+                    title=""
+                    value=""
+                  />
+                </div>
+              </div>
             </div>
             <div
               class="col-xl-auto"
             >
               <div
-                class="ml-5 row"
+                class="ml-10 row"
               >
-                <div
-                  class="pl-0 col"
-                >
-                  <div
-                    class="c3 c4 input form-group"
-                  >
-                    <input
-                      class="form-control"
-                      id="input-summary"
-                      name="summary"
-                      placeholder="Name of person or organization"
-                      title=""
-                      value=""
-                    />
-                  </div>
-                </div>
                 <div
                   class="pl-0 col"
                 >
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 bc3f9bc730..bf7ec6f067 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
@@ -2,11 +2,18 @@
 
 exports[`Contact List View > matches snapshot 1`] = `
 <DocumentFragment>
-  <div
+  @media only screen and (max-width:1199px) {
+
+}
+
+<div
     class="Toastify"
   />
-  <div />
-  .c13.btn {
+  @media only screen and (max-width:1199px) {
+
+}
+
+<div />
   .c13.btn {
   display: -webkit-box;
   display: -webkit-flex;
@@ -216,8 +223,9 @@ exports[`Contact List View > matches snapshot 1`] = `
   margin-top: 0.3rem;
 }
 
-.c18 {
-  width: 7.5rem;
+.c21 {
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
   text-align: center;
@@ -367,6 +375,12 @@ exports[`Contact List View > matches snapshot 1`] = `
   text-align: left;
 }
 
+@media only screen and (max-width:1199px) {
+  .c4 {
+    max-width: 50%;
+  }
+}
+
 <div
     class="c0"
   >
@@ -390,174 +404,178 @@ exports[`Contact List View > matches snapshot 1`] = `
               class="c4"
             >
               <div
-                class="row"
+                class="p-5 row"
               >
                 <div
-                  class="col-auto"
+                  class="pb-5 row"
                 >
                   <div
-                    class="c5 form-group"
+                    class="col-auto"
                   >
-                    <label
-                      class="form-label"
-                      for="searchBy"
-                    >
-                      Search by:
-                    </label>
                     <div
-                      class="radio-group"
+                      class="c5 form-group"
                     >
+                      <label
+                        class="form-label"
+                        for="searchBy"
+                      >
+                        Search by:
+                      </label>
                       <div
-                        class="c6 pb-3"
+                        class="radio-group"
                       >
                         <div
-                          class="form-check"
+                          class="c6 pb-3"
                         >
-                          <input
-                            class="form-check-input position-static"
-                            data-testid="radio-searchby-[object object]"
-                            id="input-organizations"
-                            name="searchBy"
-                            type="radio"
-                            value="organizations"
-                          />
-                        </div>
-                        <label
-                          class="form-check-label form-label"
-                          for="searchBy"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="20"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            viewBox="0 0 448 512"
-                            width="20"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="form-check"
                           >
-                            <path
-                              d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                            <input
+                              class="form-check-input position-static"
+                              data-testid="radio-searchby-[object object]"
+                              id="input-organizations"
+                              name="searchBy"
+                              type="radio"
+                              value="organizations"
                             />
-                          </svg>
-                          <span>
-                            Organizations
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="c6 pb-3"
-                      >
-                        <div
-                          class="form-check"
-                        >
-                          <input
-                            class="form-check-input position-static"
-                            data-testid="radio-searchby-[object object]"
-                            id="input-persons"
-                            name="searchBy"
-                            type="radio"
-                            value="persons"
-                          />
+                          </div>
+                          <label
+                            class="form-check-label form-label"
+                            for="searchBy"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="20"
+                              stroke="currentColor"
+                              stroke-width="0"
+                              viewBox="0 0 448 512"
+                              width="20"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                              />
+                            </svg>
+                            <span>
+                              Organizations
+                            </span>
+                          </label>
                         </div>
-                        <label
-                          class="form-check-label form-label"
-                          for="searchBy"
+                        <div
+                          class="c6 pb-3"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="20"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            viewBox="0 0 448 512"
-                            width="20"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="form-check"
                           >
-                            <path
-                              d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                            <input
+                              class="form-check-input position-static"
+                              data-testid="radio-searchby-[object object]"
+                              id="input-persons"
+                              name="searchBy"
+                              type="radio"
+                              value="persons"
                             />
-                          </svg>
-                          <span>
-                            Individuals
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="c6 pb-3"
-                      >
-                        <div
-                          class="form-check"
-                        >
-                          <input
-                            checked=""
-                            class="form-check-input position-static"
-                            data-testid="radio-searchby-[object object]"
-                            id="input-all"
-                            name="searchBy"
-                            type="radio"
-                            value="all"
-                          />
+                          </div>
+                          <label
+                            class="form-check-label form-label"
+                            for="searchBy"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="20"
+                              stroke="currentColor"
+                              stroke-width="0"
+                              viewBox="0 0 448 512"
+                              width="20"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                              />
+                            </svg>
+                            <span>
+                              Individuals
+                            </span>
+                          </label>
                         </div>
-                        <label
-                          class="form-check-label form-label"
-                          for="searchBy"
+                        <div
+                          class="c6 pb-3"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="20"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            viewBox="0 0 448 512"
-                            width="20"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="form-check"
                           >
-                            <path
-                              d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                            <input
+                              checked=""
+                              class="form-check-input position-static"
+                              data-testid="radio-searchby-[object object]"
+                              id="input-all"
+                              name="searchBy"
+                              type="radio"
+                              value="all"
                             />
-                          </svg>
-                          +
-                          <svg
-                            fill="currentColor"
-                            height="20"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            viewBox="0 0 448 512"
-                            width="20"
-                            xmlns="http://www.w3.org/2000/svg"
+                          </div>
+                          <label
+                            class="form-check-label form-label"
+                            for="searchBy"
                           >
-                            <path
-                              d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
-                            />
-                          </svg>
-                          <span>
-                            All
-                          </span>
-                        </label>
+                            <svg
+                              fill="currentColor"
+                              height="20"
+                              stroke="currentColor"
+                              stroke-width="0"
+                              viewBox="0 0 448 512"
+                              width="20"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
+                              />
+                            </svg>
+                            +
+                            <svg
+                              fill="currentColor"
+                              height="20"
+                              stroke="currentColor"
+                              stroke-width="0"
+                              viewBox="0 0 448 512"
+                              width="20"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
+                              />
+                            </svg>
+                            <span>
+                              All
+                            </span>
+                          </label>
+                        </div>
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="pl-0 col-lg-auto"
+                  >
+                    <div
+                      class="c7 c8 input form-group"
+                    >
+                      <input
+                        class="form-control"
+                        id="input-summary"
+                        name="summary"
+                        placeholder="Name of person or organization"
+                        title=""
+                        value=""
+                      />
+                    </div>
+                  </div>
                 </div>
                 <div
                   class="col-xl-auto"
                 >
                   <div
-                    class="ml-5 row"
+                    class="ml-10 row"
                   >
-                    <div
-                      class="pl-0 col"
-                    >
-                      <div
-                        class="c7 c8 input form-group"
-                      >
-                        <input
-                          class="form-control"
-                          id="input-summary"
-                          name="summary"
-                          placeholder="Name of person or organization"
-                          title=""
-                          value=""
-                        />
-                      </div>
-                    </div>
                     <div
                       class="pl-0 col"
                     >
@@ -1239,8 +1257,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                       Show
                     </span>
                     <input
-                      class="c18 form-control form-control-sm"
-                      disabled=""
+                      class="c21 form-control"
                       type="number"
                       value="10"
                     />