From 2784ebe3d9bc4aa781de8219ec8521593d3e193e Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Tue, 21 May 2024 18:21:05 -0700
Subject: [PATCH 1/6] Removed repeated styles and improved padding

---
 .../mapSideBar/acquisition/AcquisitionView.tsx      | 13 +------------
 .../acquisition/add/AddAcquisitionContainer.tsx     | 13 +------------
 .../common/UpdateAcquisitionAgreementForm.tsx       | 11 +----------
 .../update/UpdateCompensationRequisitionForm.tsx    | 11 +----------
 .../tabs/expropriation/form8/UpdateForm8Form.tsx    | 11 +----------
 .../update/UpdateAcquisitionContainer.tsx           | 13 +------------
 .../mapSideBar/disposition/DispositionView.tsx      | 13 +------------
 .../disposition/add/AddDispositionContainerView.tsx | 13 +------------
 .../form/DispositionAppraisalForm.tsx               | 11 +----------
 .../dispositionOffer/form/DispositionOfferForm.tsx  | 11 +----------
 .../update/UpdateDispostionSaleView.tsx             | 11 +----------
 .../features/mapSideBar/lease/LeaseContainer.tsx    | 13 +------------
 .../mapSideBar/project/ProjectContainerView.tsx     | 13 +------------
 .../update/UpdatePropertyDetailsContainer.tsx       | 13 +------------
 .../activity/detail/PropertyActivityDetailView.tsx  | 11 +----------
 .../activity/edit/PropertyActivityEditForm.tsx      | 11 +----------
 .../update/PropertyContactEditForm.tsx              | 13 +------------
 .../update/summary/PropertyManagementUpdateForm.tsx | 13 +------------
 .../update/UpdatePropertyResearchContainer.tsx      | 13 +------------
 .../features/mapSideBar/research/ResearchView.tsx   | 13 +------------
 .../research/add/AddResearchContainer.tsx           | 13 +------------
 .../fileDetails/update/UpdateSummaryContainer.tsx   | 13 +------------
 .../src/features/mapSideBar/shared/styles.ts        | 10 ++++++++++
 23 files changed, 32 insertions(+), 248 deletions(-)
 create mode 100644 source/frontend/src/features/mapSideBar/shared/styles.ts

diff --git a/source/frontend/src/features/mapSideBar/acquisition/AcquisitionView.tsx b/source/frontend/src/features/mapSideBar/acquisition/AcquisitionView.tsx
index ebb9164063..2bc8866943 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/AcquisitionView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/AcquisitionView.tsx
@@ -10,7 +10,6 @@ import {
   useLocation,
   useRouteMatch,
 } from 'react-router-dom';
-import styled from 'styled-components';
 
 import RealEstateAgent from '@/assets/images/real-estate-agent.svg?react';
 import { FileTypes } from '@/constants';
@@ -28,6 +27,7 @@ import { FilePropertyRouter } from '../router/FilePropertyRouter';
 import { FileTabType } from '../shared/detail/FileTabs';
 import { PropertyForm } from '../shared/models';
 import SidebarFooter from '../shared/SidebarFooter';
+import { StyledFormWrapper } from '../shared/styles';
 import UpdateProperties from '../shared/update/properties/UpdateProperties';
 import { AcquisitionContainerState } from './AcquisitionContainer';
 import { isAcquisitionFile } from './add/models';
@@ -248,15 +248,4 @@ const getEditTitle = (
   return 'Acquisition File';
 };
 
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
-
 export default AcquisitionView;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/AddAcquisitionContainer.tsx b/source/frontend/src/features/mapSideBar/acquisition/add/AddAcquisitionContainer.tsx
index 2f37cb0532..74f253bc87 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/AddAcquisitionContainer.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/AddAcquisitionContainer.tsx
@@ -2,7 +2,6 @@ import { FormikProps } from 'formik/dist/types';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 
 import RealEstateAgent from '@/assets/images/real-estate-agent.svg?react';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
@@ -17,6 +16,7 @@ import { featuresetToMapProperty } from '@/utils/mapPropertyUtils';
 
 import { PropertyForm } from '../../shared/models';
 import SidebarFooter from '../../shared/SidebarFooter';
+import { StyledFormWrapper } from '../../shared/styles';
 import { useAddAcquisitionFormManagement } from '../hooks/useAddAcquisitionFormManagement';
 import { AddAcquisitionForm } from './AddAcquisitionForm';
 import { AcquisitionForm } from './models';
@@ -228,14 +228,3 @@ export const AddAcquisitionContainer: React.FC<IAddAcquisitionContainerProps> =
 };
 
 export default AddAcquisitionContainer;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx
index c6cf0e039a..b15d17cc2a 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 
 import AcquisitionAgreementForm from '../form/AcquisitionAgreementForm';
@@ -81,16 +82,6 @@ const UpdateAcquisitionAgreementForm: React.FunctionComponent<
 
 export default UpdateAcquisitionAgreementForm;
 
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
   background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx
index 8ad5be0aec..015514134d 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx
@@ -21,6 +21,7 @@ import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { PayeeOption } from '@/features/mapSideBar/acquisition/models/PayeeOptionModel';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 import { IAutocompletePrediction } from '@/interfaces/IAutocomplete';
 import { ApiGen_Concepts_AcquisitionFile } from '@/models/api/generated/ApiGen_Concepts_AcquisitionFile';
@@ -392,16 +393,6 @@ const generateFiscalYearOptions = () => {
   return options;
 };
 
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
   background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx
index 5d45342c46..8bcf39c9b3 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx
@@ -9,6 +9,7 @@ import { SectionField } from '@/components/common/Section/SectionField';
 import { RestrictContactType } from '@/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent';
 import { PayeeOption } from '@/features/mapSideBar/acquisition/models/PayeeOptionModel';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 import { ApiGen_Concepts_ExpropriationPayment } from '@/models/api/generated/ApiGen_Concepts_ExpropriationPayment';
 
@@ -133,16 +134,6 @@ export const UpdateForm8Form: React.FC<IForm8FormProps> = ({
 
 export default UpdateForm8Form;
 
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
   background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/UpdateAcquisitionContainer.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/UpdateAcquisitionContainer.tsx
index c2b91ca98e..ed99af7025 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/UpdateAcquisitionContainer.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/UpdateAcquisitionContainer.tsx
@@ -3,8 +3,8 @@ import { FormikHelpers, FormikProps } from 'formik';
 import React from 'react';
 import { FaExclamationCircle } from 'react-icons/fa';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { useAcquisitionProvider } from '@/hooks/repositories/useAcquisitionProvider';
 import useApiUserOverride from '@/hooks/useApiUserOverride';
 import { useModalContext } from '@/hooks/useModalContext';
@@ -107,14 +107,3 @@ export const UpdateAcquisitionContainer = React.forwardRef<
 });
 
 export default UpdateAcquisitionContainer;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/disposition/DispositionView.tsx b/source/frontend/src/features/mapSideBar/disposition/DispositionView.tsx
index 5db0ea2d20..02ae503383 100644
--- a/source/frontend/src/features/mapSideBar/disposition/DispositionView.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/DispositionView.tsx
@@ -10,7 +10,6 @@ import {
   useLocation,
   useRouteMatch,
 } from 'react-router-dom';
-import styled from 'styled-components';
 
 import RealEstateAgent from '@/assets/images/real-estate-agent.svg?react';
 import { FileTypes } from '@/constants';
@@ -28,6 +27,7 @@ import FilePropertyRouter from '../router/FilePropertyRouter';
 import { FileTabType } from '../shared/detail/FileTabs';
 import { PropertyForm } from '../shared/models';
 import SidebarFooter from '../shared/SidebarFooter';
+import { StyledFormWrapper } from '../shared/styles';
 import UpdateProperties from '../shared/update/properties/UpdateProperties';
 import { DispositionHeader } from './common/DispositionHeader';
 import DispositionMenu from './common/DispositionMenu';
@@ -231,15 +231,4 @@ const getEditTitle = (
   return 'Disposition File';
 };
 
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
-
 export default DispositionView;
diff --git a/source/frontend/src/features/mapSideBar/disposition/add/AddDispositionContainerView.tsx b/source/frontend/src/features/mapSideBar/disposition/add/AddDispositionContainerView.tsx
index cee97472b5..a19355be1c 100644
--- a/source/frontend/src/features/mapSideBar/disposition/add/AddDispositionContainerView.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/add/AddDispositionContainerView.tsx
@@ -1,12 +1,12 @@
 import { FormikHelpers, FormikProps } from 'formik';
 import { MdAirlineStops } from 'react-icons/md';
-import styled from 'styled-components';
 
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 
 import MapSideBarLayout from '../../layout/MapSideBarLayout';
 import { PropertyForm } from '../../shared/models';
 import SidebarFooter from '../../shared/SidebarFooter';
+import { StyledFormWrapper } from '../../shared/styles';
 import DispositionForm from '../form/DispositionForm';
 import { DispositionFormModel } from '../models/DispositionFormModel';
 
@@ -71,14 +71,3 @@ const AddDispositionContainerView: React.FunctionComponent<IAddDispositionContai
 };
 
 export default AddDispositionContainerView;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionAppraisal/form/DispositionAppraisalForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionAppraisal/form/DispositionAppraisalForm.tsx
index f92e0ae4d5..a9db6e66ea 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionAppraisal/form/DispositionAppraisalForm.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionAppraisal/form/DispositionAppraisalForm.tsx
@@ -9,6 +9,7 @@ import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { DispositionAppraisalFormModel } from '@/features/mapSideBar/disposition/models/DispositionAppraisalFormModel';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 import { IApiError } from '@/interfaces/IApiError';
 import { ApiGen_Concepts_DispositionFileAppraisal } from '@/models/api/generated/ApiGen_Concepts_DispositionFileAppraisal';
@@ -125,16 +126,6 @@ const DispositionAppraisalForm: React.FC<IDispositionAppraisalFormProps> = ({
 
 export default DispositionAppraisalForm;
 
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
   background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/form/DispositionOfferForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/form/DispositionOfferForm.tsx
index 9778149090..f05cdc1462 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/form/DispositionOfferForm.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/form/DispositionOfferForm.tsx
@@ -14,6 +14,7 @@ import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import * as API from '@/constants/API';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import useLookupCodeHelpers from '@/hooks/useLookupCodeHelpers';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 import { IApiError } from '@/interfaces/IApiError';
@@ -159,16 +160,6 @@ const DispositionOfferForm: React.FC<IDispositionOfferFormProps> = ({
 
 export default DispositionOfferForm;
 
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
   background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/UpdateDispostionSaleView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/UpdateDispostionSaleView.tsx
index 1d65ad1ac1..8dcdcb9c65 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/UpdateDispostionSaleView.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/UpdateDispostionSaleView.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { DispositionSaleFormModel } from '@/features/mapSideBar/disposition/models/DispositionSaleFormModel';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 import { IApiError } from '@/interfaces/IApiError';
 import { ApiGen_Concepts_DispositionFileSale } from '@/models/api/generated/ApiGen_Concepts_DispositionFileSale';
@@ -102,16 +103,6 @@ const UpdateDispositionSaleView: React.FC<IUpdateDispositionSaleViewProps> = ({
 
 export default UpdateDispositionSaleView;
 
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
   background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;
diff --git a/source/frontend/src/features/mapSideBar/lease/LeaseContainer.tsx b/source/frontend/src/features/mapSideBar/lease/LeaseContainer.tsx
index 435b2879a0..461d3b1b54 100644
--- a/source/frontend/src/features/mapSideBar/lease/LeaseContainer.tsx
+++ b/source/frontend/src/features/mapSideBar/lease/LeaseContainer.tsx
@@ -1,6 +1,5 @@
 import { FormikProps } from 'formik';
 import React, { useCallback, useContext, useEffect, useReducer, useRef, useState } from 'react';
-import styled from 'styled-components';
 import * as Yup from 'yup';
 
 import Fence from '@/assets/images/fence.svg?react';
@@ -23,6 +22,7 @@ import { LeaseFormModel } from '@/features/leases/models';
 import { SideBarContext } from '../context/sidebarContext';
 import MapSideBarLayout from '../layout/MapSideBarLayout';
 import SidebarFooter from '../shared/SidebarFooter';
+import { StyledFormWrapper } from '../shared/styles';
 import LeaseHeader from './common/LeaseHeader';
 import { LeaseFileTabNames } from './detail/LeaseFileTabs';
 import ViewSelector from './ViewSelector';
@@ -281,14 +281,3 @@ export const LeaseContainer: React.FC<ILeaseContainerProps> = ({ leaseId, onClos
 };
 
 export default LeaseContainer;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 2rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/project/ProjectContainerView.tsx b/source/frontend/src/features/mapSideBar/project/ProjectContainerView.tsx
index 9e0d80d55c..5217aeb7bf 100644
--- a/source/frontend/src/features/mapSideBar/project/ProjectContainerView.tsx
+++ b/source/frontend/src/features/mapSideBar/project/ProjectContainerView.tsx
@@ -1,13 +1,13 @@
 import { FormikProps } from 'formik';
 import { useCallback, useRef } from 'react';
 import { FaBriefcase } from 'react-icons/fa';
-import styled from 'styled-components';
 
 import GenericModal from '@/components/common/GenericModal';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import MapSideBarLayout from '@/features/mapSideBar/layout/MapSideBarLayout';
 
 import SidebarFooter from '../shared/SidebarFooter';
+import { StyledFormWrapper } from '../shared/styles';
 import ProjectHeader from './common/ProjectHeader';
 import { IProjectContainerViewProps } from './ProjectContainer';
 import ViewSelector from './ViewSelector';
@@ -117,14 +117,3 @@ const ProjectContainerView: React.FC<IProjectContainerViewProps> = ({
 };
 
 export default ProjectContainerView;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsContainer.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsContainer.tsx
index d8057638f4..d45ebb6b23 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsContainer.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsContainer.tsx
@@ -3,10 +3,10 @@ import { Formik, FormikHelpers, FormikProps } from 'formik';
 import isNumber from 'lodash/isNumber';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import * as API from '@/constants/API';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { useHistoricalNumberRepository } from '@/hooks/repositories/useHistoricalNumberRepository';
 import { usePimsPropertyRepository } from '@/hooks/repositories/usePimsPropertyRepository';
 import { useQueryMapLayersByLocation } from '@/hooks/repositories/useQueryMapLayersByLocation';
@@ -174,14 +174,3 @@ export const UpdatePropertyDetailsContainer = React.forwardRef<
     </Formik>
   );
 });
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/detail/PropertyActivityDetailView.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/detail/PropertyActivityDetailView.tsx
index a51d7834c1..0840a64579 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/detail/PropertyActivityDetailView.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/detail/PropertyActivityDetailView.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { MdClose } from 'react-icons/md';
 import { useHistory } from 'react-router-dom';
 import ReactVisibilitySensor from 'react-visibility-sensor';
-import styled from 'styled-components';
 
 import ContactLink from '@/components/common/ContactLink';
 import EditButton from '@/components/common/EditButton';
@@ -14,6 +13,7 @@ import { StyledEditWrapper, StyledSummarySection } from '@/components/common/Sec
 import * as Styled from '@/components/common/styles';
 import { Claims } from '@/constants/index';
 import DocumentListContainer from '@/features/documents/list/DocumentListContainer';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
 import { ApiGen_CodeTypes_DocumentRelationType } from '@/models/api/generated/ApiGen_CodeTypes_DocumentRelationType';
 import { ApiGen_Concepts_PropertyActivity } from '@/models/api/generated/ApiGen_Concepts_PropertyActivity';
@@ -176,12 +176,3 @@ export const PropertyActivityDetailView: React.FunctionComponent<
     return <></>;
   }
 };
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-`;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/edit/PropertyActivityEditForm.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/edit/PropertyActivityEditForm.tsx
index 392750d558..18d1814f92 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/edit/PropertyActivityEditForm.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/edit/PropertyActivityEditForm.tsx
@@ -2,7 +2,6 @@ import clsx from 'classnames';
 import { Formik, FormikProps } from 'formik';
 import React, { ChangeEvent, useMemo, useRef, useState } from 'react';
 import ReactVisibilitySensor from 'react-visibility-sensor';
-import styled from 'styled-components';
 
 import { CancelConfirmationModal } from '@/components/common/CancelConfirmationModal';
 import { FastDatePicker, Input, Select, SelectOption } from '@/components/common/form';
@@ -17,6 +16,7 @@ import * as Styled from '@/components/common/styles';
 import { RestrictContactType } from '@/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent';
 import { PROP_MGMT_ACTIVITY_STATUS_TYPES, PROP_MGMT_ACTIVITY_TYPES } from '@/constants/API';
 import SaveCancelButtons from '@/features/leases/SaveCancelButtons';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import useLookupCodeHelpers from '@/hooks/useLookupCodeHelpers';
 import { useModalManagement } from '@/hooks/useModalManagement';
 import { ApiGen_Concepts_PropertyActivity } from '@/models/api/generated/ApiGen_Concepts_PropertyActivity';
@@ -215,12 +215,3 @@ export const PropertyActivityEditForm: React.FunctionComponent<
     </ReactVisibilitySensor>
   );
 };
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-`;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/PropertyContactEditForm.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/PropertyContactEditForm.tsx
index fa5a16d531..dc81723caf 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/PropertyContactEditForm.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/PropertyContactEditForm.tsx
@@ -1,6 +1,5 @@
 import { Formik, FormikProps } from 'formik';
 import React, { useMemo, useState } from 'react';
-import styled from 'styled-components';
 
 import { Input, Select, SelectOption, TextArea } from '@/components/common/form';
 import { ContactInputContainer } from '@/components/common/form/ContactInput/ContactInputContainer';
@@ -11,6 +10,7 @@ import { SectionField } from '@/components/common/Section/SectionField';
 import { StyledSummarySection } from '@/components/common/Section/SectionStyles';
 import { formatContactSearchResult } from '@/features/contacts/contactUtils';
 import { useOrganizationRepository } from '@/features/contacts/repositories/useOrganizationRepository';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { IContactSearchResult } from '@/interfaces';
 import { ApiGen_Concepts_PersonOrganization } from '@/models/api/generated/ApiGen_Concepts_PersonOrganization';
 import { ApiGen_Concepts_PropertyContact } from '@/models/api/generated/ApiGen_Concepts_PropertyContact';
@@ -133,14 +133,3 @@ export const PropertyContactEditForm = React.forwardRef<
     </StyledFormWrapper>
   );
 });
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/PropertyManagementUpdateForm.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/PropertyManagementUpdateForm.tsx
index 478e9d9c9c..d5f4aaadda 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/PropertyManagementUpdateForm.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/PropertyManagementUpdateForm.tsx
@@ -1,6 +1,5 @@
 import { Formik, FormikProps } from 'formik';
 import React from 'react';
-import styled from 'styled-components';
 
 import { Multiselect, TextArea } from '@/components/common/form';
 import { YesNoSelect } from '@/components/common/form/YesNoSelect';
@@ -9,6 +8,7 @@ import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { StyledSummarySection } from '@/components/common/Section/SectionStyles';
 import * as API from '@/constants/API';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { useLookupCodeHelpers } from '@/hooks/useLookupCodeHelpers';
 import { ApiGen_Concepts_PropertyManagement } from '@/models/api/generated/ApiGen_Concepts_PropertyManagement';
 
@@ -80,14 +80,3 @@ export const PropertyManagementUpdateForm = React.forwardRef<
     </StyledFormWrapper>
   );
 });
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/UpdatePropertyResearchContainer.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/UpdatePropertyResearchContainer.tsx
index 19910cee39..4ddb6370b9 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/UpdatePropertyResearchContainer.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/UpdatePropertyResearchContainer.tsx
@@ -1,7 +1,7 @@
 import { Formik, FormikProps } from 'formik';
 import { forwardRef } from 'react';
-import styled from 'styled-components';
 
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { ApiGen_Concepts_ResearchFileProperty } from '@/models/api/generated/ApiGen_Concepts_ResearchFileProperty';
 
 import { useUpdatePropertyResearch } from '../hooks/useUpdatePropertyResearch';
@@ -53,14 +53,3 @@ export const UpdatePropertyResearchContainer = forwardRef<
 });
 
 export default UpdatePropertyResearchContainer;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/research/ResearchView.tsx b/source/frontend/src/features/mapSideBar/research/ResearchView.tsx
index e8665be4a0..69a21a074e 100644
--- a/source/frontend/src/features/mapSideBar/research/ResearchView.tsx
+++ b/source/frontend/src/features/mapSideBar/research/ResearchView.tsx
@@ -2,7 +2,6 @@ import { FormikProps } from 'formik';
 import { useContext } from 'react';
 import { MdTopic } from 'react-icons/md';
 import { matchPath, Route, useHistory, useRouteMatch } from 'react-router-dom';
-import styled from 'styled-components';
 
 import { FileTypes } from '@/constants';
 import FileLayout from '@/features/mapSideBar/layout/FileLayout';
@@ -17,6 +16,7 @@ import FilePropertyRouter from '../router/FilePropertyRouter';
 import { FileTabType } from '../shared/detail/FileTabs';
 import { PropertyForm } from '../shared/models';
 import SidebarFooter from '../shared/SidebarFooter';
+import { StyledFormWrapper } from '../shared/styles';
 import UpdateProperties from '../shared/update/properties/UpdateProperties';
 import ResearchHeader from './common/ResearchHeader';
 import ResearchMenu from './common/ResearchMenu';
@@ -141,14 +141,3 @@ const ResearchView: React.FunctionComponent<IResearchViewProps> = props => {
 };
 
 export default ResearchView;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/research/add/AddResearchContainer.tsx b/source/frontend/src/features/mapSideBar/research/add/AddResearchContainer.tsx
index bcdd7f4bb4..5e0d839d01 100644
--- a/source/frontend/src/features/mapSideBar/research/add/AddResearchContainer.tsx
+++ b/source/frontend/src/features/mapSideBar/research/add/AddResearchContainer.tsx
@@ -3,7 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { MdTopic } from 'react-icons/md';
 import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 
 import ConfirmNavigation from '@/components/common/ConfirmNavigation';
 import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
@@ -20,6 +19,7 @@ import { featuresetToMapProperty } from '@/utils/mapPropertyUtils';
 
 import { PropertyForm } from '../../shared/models';
 import SidebarFooter from '../../shared/SidebarFooter';
+import { StyledFormWrapper } from '../../shared/styles';
 import { useAddResearch } from '../hooks/useAddResearch';
 import { AddResearchFileYupSchema } from './AddResearchFileYupSchema';
 import AddResearchForm from './AddResearchForm';
@@ -227,14 +227,3 @@ export const AddResearchContainer: React.FunctionComponent<IAddResearchContainer
 };
 
 export default AddResearchContainer;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryContainer.tsx b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryContainer.tsx
index 721fb16047..940861a417 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryContainer.tsx
+++ b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryContainer.tsx
@@ -1,7 +1,7 @@
 import { Formik, FormikProps } from 'formik';
 import { forwardRef } from 'react';
-import styled from 'styled-components';
 
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { ApiGen_Concepts_ResearchFile } from '@/models/api/generated/ApiGen_Concepts_ResearchFile';
 
 import { useUpdateResearch } from '../../../hooks/useUpdateResearch';
@@ -52,14 +52,3 @@ export const UpdateResearchContainer = forwardRef<FormikProps<any>, IUpdateResea
 );
 
 export default UpdateResearchContainer;
-
-const StyledFormWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-`;
diff --git a/source/frontend/src/features/mapSideBar/shared/styles.ts b/source/frontend/src/features/mapSideBar/shared/styles.ts
new file mode 100644
index 0000000000..1bef7c40c5
--- /dev/null
+++ b/source/frontend/src/features/mapSideBar/shared/styles.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const StyledFormWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
+`;

From 201c4d65af98bec017b200e6c5b53df0f8e768f1 Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Tue, 21 May 2024 18:22:00 -0700
Subject: [PATCH 2/6] Updated input to match styled mocups and icons

---
 .../src/components/common/Section/Section.tsx |  4 +--
 .../src/components/common/TabView.tsx         | 32 +++++++++++++++--
 .../components/common/form/AsyncTypeahead.tsx |  4 +--
 .../components/common/form/FastDatePicker.tsx |  7 ++--
 .../src/components/common/form/Form.scss      | 17 +++++----
 .../src/components/common/form/Select.scss    | 27 ++++++++++++++
 .../frontend/src/components/common/styles.ts  | 36 +++----------------
 .../src/features/mapSideBar/MapSideBar.tsx    |  3 +-
 .../research/common/ResearchHeader.tsx        |  3 --
 .../notes/list/NoteResults/columns.tsx        |  4 +--
 10 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/source/frontend/src/components/common/Section/Section.tsx b/source/frontend/src/components/common/Section/Section.tsx
index 0584e605e6..1fd1889bad 100644
--- a/source/frontend/src/components/common/Section/Section.tsx
+++ b/source/frontend/src/components/common/Section/Section.tsx
@@ -83,8 +83,8 @@ export const StyledSectionHeader = styled.h2<{ isStyledHeader?: boolean }>`
 `;
 
 const StyledFormSection = styled.div<{ noPadding?: boolean }>`
-  margin: ${props => (props.noPadding === true ? '' : '1.5rem')};
-  padding: ${props => (props.noPadding === true ? '' : '1.5rem')};
+  margin: ${props => (props.noPadding === true ? '' : '1.6rem')};
+  padding: ${props => (props.noPadding === true ? '' : '1.6rem')};
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/components/common/TabView.tsx b/source/frontend/src/components/common/TabView.tsx
index 255e26fe4b..e95c6f225d 100644
--- a/source/frontend/src/components/common/TabView.tsx
+++ b/source/frontend/src/components/common/TabView.tsx
@@ -1,14 +1,13 @@
 import { TabsProps } from 'react-bootstrap';
+import { Tabs as BsTabs } from 'react-bootstrap';
 import styled from 'styled-components';
 
-import * as Styled from '@/components/common/styles';
-
 const TabView: React.FunctionComponent<
   React.PropsWithChildren<TabsProps & { className?: string }>
 > = ({ children, className, ...props }) => {
   return (
     <StyledTabWrapper className={className}>
-      <Styled.Tabs {...props}>{children}</Styled.Tabs>
+      <StyledTabs {...props}>{children}</StyledTabs>
     </StyledTabWrapper>
   );
 };
@@ -26,4 +25,31 @@ const StyledTabWrapper = styled.div`
   height: 100%;
 `;
 
+const StyledTabs = styled(BsTabs)`
+  background-color: white;
+  color: ${props => props.theme.css.linkColor};
+  font-size: 1.4rem;
+  border-color: transparent;
+  .nav-tabs {
+    height: auto;
+  }
+  .nav-item {
+    color: ${props => props.theme.css.linkColor};
+    min-width: 5rem;
+    padding: 0.1rem 1.2rem;
+
+    &:hover {
+      color: ${props => props.theme.css.linkHoverColor};
+      border-color: transparent;
+      text-decoration: underline;
+    }
+    &.active {
+      background-color: ${props => props.theme.css.highlightBackgroundColor};
+      font-family: 'BCSans-Bold';
+      color: ${props => props.theme.css.linkHoverColor};
+      border-color: transparent;
+    }
+  }
+`;
+
 export default TabView;
diff --git a/source/frontend/src/components/common/form/AsyncTypeahead.tsx b/source/frontend/src/components/common/form/AsyncTypeahead.tsx
index 48c97e70e5..ba0f9b22fb 100644
--- a/source/frontend/src/components/common/form/AsyncTypeahead.tsx
+++ b/source/frontend/src/components/common/form/AsyncTypeahead.tsx
@@ -139,8 +139,8 @@ function AsyncTypeaheadInner<T extends TypeaheadModel>(
           {/* hide the search icon when user is interacting with typeahead control */}
           {({ selected, isMenuShown }: TypeaheadManagerChildProps) =>
             isLoading || isMenuShown || selected.length > 0 ? null : (
-              <div className="rbt-aux">
-                <FaSearch size="2.5rem" color="#bcbec5" />
+              <div className="rbt-aux pr-3">
+                <FaSearch size="1.6rem" color="#bcbec5" />
               </div>
             )
           }
diff --git a/source/frontend/src/components/common/form/FastDatePicker.tsx b/source/frontend/src/components/common/form/FastDatePicker.tsx
index 4bca9366b8..c3feae07f7 100644
--- a/source/frontend/src/components/common/form/FastDatePicker.tsx
+++ b/source/frontend/src/components/common/form/FastDatePicker.tsx
@@ -123,18 +123,19 @@ const FormikDatePicker: FunctionComponent<React.PropsWithChildren<FastDatePicker
 
 const StyledGroup = styled(Form.Group)`
   .react-datepicker__calendar-icon {
-    width: 3rem;
+    width: 2.4rem;
     height: 3rem;
     margin-top: 0.5rem;
+    margin-right: 1.2rem;
     right: 0;
     fill: ${props => props.theme.css.linkColor};
     pointer-events: none;
   }
   .react-datepicker__view-calendar-icon input {
-    padding: 0.6rem 1rem 0.5rem 0.6rem;
+    padding: 0.8rem 1.2rem 0.8rem 1.2rem;
   }
   .react-datepicker-wrapper {
-    max-width: 16rem;
+    max-width: 17rem;
   }
 `;
 
diff --git a/source/frontend/src/components/common/form/Form.scss b/source/frontend/src/components/common/form/Form.scss
index 7a81ee7a69..e295d90d6c 100644
--- a/source/frontend/src/components/common/form/Form.scss
+++ b/source/frontend/src/components/common/form/Form.scss
@@ -36,23 +36,26 @@ $fc-invalid-bg: #f2f2f2;
   text-align: right;
 }
 
+.form-group {
+  margin-bottom: 1.2rem;
+  //padding-bottom: 0px;
+}
+
 .form-control-sm {
   height: calc(1.5em + 0.8rem + 2px);
   padding: 0.4rem 0.58rem;
   font-size: 1.4rem;
   line-height: 1.5;
   border-radius: 0.3rem;
+  text-indent: 20px;
 }
 
 .form-control {
   font-size: 1.6rem;
-  padding: 0.6rem 1.2rem;
-  height: calc(1.5em + 1.2rem + 2px);
+  padding-left: 1.2rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  height: 3.8rem;
   border-radius: 0.4rem;
   text-overflow: ellipsis;
 }
-
-.form-select:not(.is-invalid),
-.form-control:not(.is-invalid) {
-  border: 0.1rem solid #606060;
-}
diff --git a/source/frontend/src/components/common/form/Select.scss b/source/frontend/src/components/common/form/Select.scss
index 2f8bfe7823..6054ece370 100644
--- a/source/frontend/src/components/common/form/Select.scss
+++ b/source/frontend/src/components/common/form/Select.scss
@@ -1,6 +1,33 @@
+@import '@/assets/scss/colors.scss';
+
 .form-select {
+  align-items: center;
+
+  // Selects have an extra padding added by the browser. Removing and manually center it prevents letter clipping.
+  padding-top: 0px;
+  padding-bottom: 0px;
+
+
+  // Custom dropdown icon requires clearning the browser's style
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  // Same path as MdArrowDropDown
+  background-image: url("data:image/svg+xml,<svg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' class='sc-jIILKH kTbtSw' height='1.6rem' width='1.6rem' xmlns='http://www.w3.org/2000/svg'><path fill='none' d='M0 0h24v24H0z'></path><path d='M7 10l5 5 5-5z'></path></svg>");
+  background-repeat: no-repeat;
+  // sizes below set by trial-and-error to look good
+  background-position-x: calc(100% - 0.8rem);
+  background-position-y: 6px;
+  padding-right: 3.5rem;
+
   min-width: 9.5rem;
+
   .option {
     padding: 0.5rem;
   }
 }
+
+.form-select:not(.is-invalid),
+.form-control:not(.is-invalid) {
+  border: 0.1rem solid #606060;
+}
diff --git a/source/frontend/src/components/common/styles.ts b/source/frontend/src/components/common/styles.ts
index fd32f8af7b..ab2455ad8f 100644
--- a/source/frontend/src/components/common/styles.ts
+++ b/source/frontend/src/components/common/styles.ts
@@ -1,6 +1,5 @@
 import { CSSProperties } from 'react';
 import { Breadcrumb as BsBreadcrumb } from 'react-bootstrap';
-import { Tabs as BsTabs } from 'react-bootstrap';
 import styled, { css } from 'styled-components';
 
 import { LoadingBackdropProps } from '@/components/common/LoadingBackdrop';
@@ -67,33 +66,6 @@ export const FlexBox = styled.div<IFlexBoxProps>`
     `}
 `;
 
-export const Tabs = styled(BsTabs)`
-  background-color: white;
-  color: ${props => props.theme.css.linkColor};
-  font-size: 1.4rem;
-  border-color: transparent;
-  .nav-tabs {
-    height: auto;
-  }
-  .nav-item {
-    color: ${props => props.theme.css.linkColor};
-    min-width: 5rem;
-    padding: 0.1rem 0.6rem;
-
-    &:hover {
-      color: ${props => props.theme.css.linkHoverColor};
-      border-color: transparent;
-      text-decoration: underline;
-    }
-    &.active {
-      background-color: ${props => props.theme.css.highlightBackgroundColor};
-      font-family: 'BCSans-Bold';
-      color: ${props => props.theme.css.linkHoverColor};
-      border-color: transparent;
-    }
-  }
-`;
-
 export const H1 = styled.h1`
   color: ${props => props.theme.bcTokens.typographyColorSecondary};
   font-family: 'BCSans-Bold';
@@ -101,7 +73,7 @@ export const H1 = styled.h1`
   border-bottom: solid 0.5rem ${props => props.theme.css.headerBorderColor};
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 `;
 
 export const H2 = styled.h2`
@@ -111,17 +83,17 @@ export const H2 = styled.h2`
   border-bottom: solid 0.2rem ${props => props.theme.css.headerBorderColor};
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 `;
 
 export const H3 = styled.h3`
   color: ${props => props.theme.css.headerTextColor};
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem ${props => props.theme.css.actionColor};
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 `;
 
 export const FilterBoxForm = styled(Form)`
diff --git a/source/frontend/src/features/mapSideBar/MapSideBar.tsx b/source/frontend/src/features/mapSideBar/MapSideBar.tsx
index b259481379..c68e6fe2b7 100644
--- a/source/frontend/src/features/mapSideBar/MapSideBar.tsx
+++ b/source/frontend/src/features/mapSideBar/MapSideBar.tsx
@@ -51,8 +51,7 @@ const StyledMapSideBar = styled.div<{ show: boolean; fullWidth: boolean }>`
   }
   min-width: ${props => (props.fullWidth ? `100%` : `93rem`)};
   margin-left: ${props => (props.show ? `0rem` : `-93rem`)};
-  padding: 1.4rem 1.6rem;
-  padding-bottom: 0rem;
+  padding: 1.6rem;
   overflow: hidden;
   transition: 1s;
   width: ${props => (props.show ? `100%` : `0`)};
diff --git a/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx b/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
index bbfedf82e6..6cb4bc5dab 100644
--- a/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
@@ -69,9 +69,6 @@ const ResearchHeader: React.FunctionComponent<
       <Col>
         <StyledFiller>
           <AuditSection lastUpdatedBy={props.lastUpdatedBy} baseAudit={researchFile} />
-          <HeaderField className="justify-content-end" label="Status:">
-            {researchFile?.fileStatusTypeCode?.description}
-          </HeaderField>
           {exists(researchFile?.fileStatusTypeCode) && (
             <StatusField statusCodeType={researchFile.fileStatusTypeCode} />
           )}
diff --git a/source/frontend/src/features/notes/list/NoteResults/columns.tsx b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
index a3b2e6066c..605149c04d 100644
--- a/source/frontend/src/features/notes/list/NoteResults/columns.tsx
+++ b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
@@ -36,8 +36,8 @@ export function createTableColumns(
       accessor: 'appLastUpdateUserid',
       align: 'center',
       sortable: true,
-      minWidth: 28,
-      maxWidth: 28,
+      minWidth: 34,
+      maxWidth: 34,
     },
 
     {

From f304ced7543a3b53dd208f8ae3ac31b3db029af5 Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Wed, 22 May 2024 11:36:21 -0700
Subject: [PATCH 3/6] Updated Styling for multiselect and contact input

---
 .../components/common/form/ContactInput.tsx   | 58 ++++++++++++------
 .../form/ContactInput/ContactInputView.tsx    | 60 +++++++++++++------
 .../components/common/form/Multiselect.tsx    |  3 +
 .../fileDetails/update/UpdateSummaryForm.tsx  |  3 +
 4 files changed, 88 insertions(+), 36 deletions(-)

diff --git a/source/frontend/src/components/common/form/ContactInput.tsx b/source/frontend/src/components/common/form/ContactInput.tsx
index 3fb83df285..1b9c8e4d49 100644
--- a/source/frontend/src/components/common/form/ContactInput.tsx
+++ b/source/frontend/src/components/common/form/ContactInput.tsx
@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { Button } from '@/components/common/buttons/Button';
 import { Input } from '@/components/common/form';
 import { IContactSearchResult } from '@/interfaces';
-import { isValidId } from '@/utils';
+import { exists, isValidId } from '@/utils';
 import { formatNames } from '@/utils/personUtils';
 
 import { LinkButton } from '../buttons';
@@ -66,17 +66,26 @@ export const ContactInput: React.FC<React.PropsWithChildren<ContactInputProps>>
       <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
         <Row>
           <Col>
-            <StyledDiv className={error ? 'is-invalid' : ''}>
+            <StyledInputLikeDiv
+              className={error ? 'is-invalid' : ''}
+              $hasContact={exists(contactInfo)}
+              onClick={() => {
+                if (!exists(contactInfo)) {
+                  setShowContactManager(true);
+                }
+              }}
+            >
               {text}
-              <StyledRemoveLinkButton
-                onClick={() => {
-                  onClear();
-                }}
-                disabled={contactInfo === undefined}
-              >
-                <MdClose size="2rem" title="remove" />
-              </StyledRemoveLinkButton>
-            </StyledDiv>
+              {exists(contactInfo) && (
+                <StyledRemoveLinkButton
+                  onClick={() => {
+                    onClear();
+                  }}
+                >
+                  <MdClose size="2rem" title="remove" />
+                </StyledRemoveLinkButton>
+              )}
+            </StyledInputLikeDiv>
             <Input
               field={field + '.id'}
               placeholder="Select from Contacts"
@@ -100,31 +109,44 @@ export const ContactInput: React.FC<React.PropsWithChildren<ContactInputProps>>
   );
 };
 
-const StyledDiv = styled.div`
+const StyledInputLikeDiv = styled.div<{ $hasContact: boolean }>`
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
-  min-height: 2.5em;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+
   background-image: none;
-  color: ${props => props.theme.bcTokens.typographyColorSecondary};
+  color: ${props =>
+    props.$hasContact
+      ? props.theme.bcTokens.typographyColorSecondary
+      : props.theme.bcTokens.typographyColorPlaceholder};
   border: ${props => props.theme.css.borderOutlineColor} solid 0.1rem;
   &.is-invalid {
     border: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault} solid 0.1rem;
   }
+
+  cursor: ${props => (props.$hasContact ? 'default' : 'pointer')};
 `;
 
 export const StyledRemoveLinkButton = styled(LinkButton)`
   &&.btn {
     position: absolute;
     top: calc(50% - 1.4rem);
-    right: 0.4rem;
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    padding-right: 1.2rem;
+    height: 1.6rem;
+    right: 0rem;
+
     color: ${props => props.theme.bcTokens.iconsColorDisabled};
     text-decoration: none;
     line-height: unset;
     .text {
       display: none;
     }
+
     &:hover,
     &:active,
     &:focus {
diff --git a/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx b/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx
index b8338b70f0..80b6332e03 100644
--- a/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx
+++ b/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx
@@ -12,6 +12,7 @@ import {
 } from '@/components/contact/ContactManagerModal';
 import { formatContactSearchResult } from '@/features/contacts/contactUtils';
 import { IContactSearchResult } from '@/interfaces';
+import { isValidString } from '@/utils';
 
 import { DisplayError } from '../DisplayError';
 import { Input } from '../Input';
@@ -59,18 +60,27 @@ const ContactInputView: React.FunctionComponent<IContactInputViewProps> = ({
         <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
           <Row>
             <Col>
-              <StyledDiv className={!!error && !!touch ? 'is-invalid' : ''}>
+              <StyledInputLikeDiv
+                className={!!error && !!touch ? 'is-invalid' : ''}
+                $hasContact={isValidString(contactInfo?.id)}
+                onClick={() => {
+                  if (!isValidString(contactInfo?.id)) {
+                    setShowContactManager(true);
+                  }
+                }}
+              >
                 {text}
-                <StyledRemoveLinkButton
-                  onClick={() => {
-                    onClear();
-                  }}
-                  disabled={contactInfo === undefined}
-                  title="remove"
-                >
-                  <MdClose size="2rem" />
-                </StyledRemoveLinkButton>
-              </StyledDiv>
+                {isValidString(contactInfo?.id) && (
+                  <StyledRemoveLinkButton
+                    onClick={() => {
+                      onClear();
+                    }}
+                    title="remove"
+                  >
+                    <MdClose size="2rem" title="remove" />
+                  </StyledRemoveLinkButton>
+                )}
+              </StyledInputLikeDiv>
               <Input
                 field={field + '.id'}
                 placeholder="Select from Contacts"
@@ -109,30 +119,44 @@ const ContactInputView: React.FunctionComponent<IContactInputViewProps> = ({
 
 export default ContactInputView;
 
-const StyledDiv = styled.div`
-  background: none;
+const StyledInputLikeDiv = styled.div<{ $hasContact: boolean }>`
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
-  color: ${props => props.theme.bcTokens.typographyColorSecondary};
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+
+  background-image: none;
+  color: ${props =>
+    props.$hasContact
+      ? props.theme.bcTokens.typographyColorSecondary
+      : props.theme.bcTokens.typographyColorPlaceholder};
   border: ${props => props.theme.css.borderOutlineColor} solid 0.1rem;
   &.is-invalid {
     border: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault} solid 0.1rem;
   }
+
+  cursor: ${props => (props.$hasContact ? 'default' : 'pointer')};
 `;
 
 const StyledRemoveLinkButton = styled(LinkButton)`
   &&.btn {
     position: absolute;
     top: calc(50% - 1.4rem);
-    right: 0.4rem;
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    padding-right: 1.2rem;
+    height: 1.6rem;
+    right: 0rem;
+
     color: ${props => props.theme.bcTokens.iconsColorDisabled};
     text-decoration: none;
     line-height: unset;
     .text {
       display: none;
     }
+
     &:hover,
     &:active,
     &:focus {
diff --git a/source/frontend/src/components/common/form/Multiselect.tsx b/source/frontend/src/components/common/form/Multiselect.tsx
index e0409331fe..85636c9abc 100644
--- a/source/frontend/src/components/common/form/Multiselect.tsx
+++ b/source/frontend/src/components/common/form/Multiselect.tsx
@@ -148,6 +148,9 @@ const defaultStyle = {
   searchBox: {
     background: 'white',
     border: '1px solid #606060',
+    paddingTop: '0.8rem',
+    paddingBottom: '0.8rem',
+    paddingLeft: '1.2rem',
   },
 };
 
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryForm.tsx b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryForm.tsx
index b0248891a9..cedd7c0acf 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryForm.tsx
+++ b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/UpdateSummaryForm.tsx
@@ -134,6 +134,9 @@ const UpdateSummaryForm: React.FunctionComponent<IUpdateSummaryFormProps> = prop
               searchBox: {
                 background: 'white',
                 border: '1px solid #606060',
+                paddingTop: '0.8rem',
+                paddingBottom: '0.8rem',
+                paddingLeft: '1.2rem',
               },
             }}
           />

From 14b5cfb0a6dc36f90de1a7d27e9fd530d19c15d4 Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Wed, 22 May 2024 11:36:58 -0700
Subject: [PATCH 4/6] linting

---
 source/frontend/src/assets/scss/_variables.module.scss     | 1 -
 source/frontend/src/components/common/form/Select.scss     | 1 -
 .../src/features/leases/add/LeaseDetailSubForm.test.tsx    | 7 ++++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/source/frontend/src/assets/scss/_variables.module.scss b/source/frontend/src/assets/scss/_variables.module.scss
index cf87286e17..339e97bca1 100644
--- a/source/frontend/src/assets/scss/_variables.module.scss
+++ b/source/frontend/src/assets/scss/_variables.module.scss
@@ -29,7 +29,6 @@
   slideOutBlue: $slide-out-blue;
   filterBoxColor: $filter-box-color;
 
-
   filterBoxColor: $filter-box-color;
 
   completedColor: $completed-color;
diff --git a/source/frontend/src/components/common/form/Select.scss b/source/frontend/src/components/common/form/Select.scss
index 6054ece370..61fcc7c72f 100644
--- a/source/frontend/src/components/common/form/Select.scss
+++ b/source/frontend/src/components/common/form/Select.scss
@@ -7,7 +7,6 @@
   padding-top: 0px;
   padding-bottom: 0px;
 
-
   // Custom dropdown icon requires clearning the browser's style
   -webkit-appearance: none;
   -moz-appearance: none;
diff --git a/source/frontend/src/features/leases/add/LeaseDetailSubForm.test.tsx b/source/frontend/src/features/leases/add/LeaseDetailSubForm.test.tsx
index 8c160abbbf..b3f2a534e5 100644
--- a/source/frontend/src/features/leases/add/LeaseDetailSubForm.test.tsx
+++ b/source/frontend/src/features/leases/add/LeaseDetailSubForm.test.tsx
@@ -126,7 +126,12 @@ describe('LeaseDetailSubForm component', () => {
     const { container, getTerminationReason } = await setup({});
 
     await act(async () => {
-      fillInput(container, 'statusTypeCode', ApiGen_CodeTypes_LeaseStatusTypes.TERMINATED, 'select');
+      fillInput(
+        container,
+        'statusTypeCode',
+        ApiGen_CodeTypes_LeaseStatusTypes.TERMINATED,
+        'select',
+      );
     });
 
     expect(getTerminationReason()).toBeInTheDocument();

From ea5901bff9e8284fc65177e7a18bb50fca84d14d Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Wed, 22 May 2024 11:55:43 -0700
Subject: [PATCH 5/6] Regenerated snaps

---
 .../ContactInput/ContactInputView.test.tsx    |  14 +-
 .../form/ContactInput/ContactInputView.tsx    |   2 +-
 .../ContactInputView.test.tsx.snap            |  20 +-
 .../ProjectSelector.test.tsx.snap             |   6 +-
 .../__snapshots__/Multiselect.test.tsx.snap   |   2 +-
 .../MapSelectorContainer.test.tsx.snap        |  60 +++---
 ...opertySearchSelectorFormView.test.tsx.snap |  12 +-
 ...ropertySelectorPidSearchView.test.tsx.snap |   4 +-
 .../AcquisitionFilter.test.tsx.snap           |   2 +-
 .../AccessRequestPage.test.tsx.snap           |   2 +-
 ...tTemplateManagementContainer.test.tsx.snap |   4 +-
 .../EditUserContainer.test.tsx.snap           |   4 +-
 .../__snapshots__/EditUserForm.test.tsx.snap  |   4 +-
 .../__snapshots__/EditUserPage.test.tsx.snap  |   6 +-
 .../AddFinancialCodeForm.test.tsx.snap        |   7 +-
 .../UpdateFinancialCodeForm.test.tsx.snap     |   7 +-
 .../CreateOrganizationForm.test.tsx.snap      |   4 +-
 .../CreatePersonForm.test.tsx.snap            |  10 +-
 .../CreateContactContainer.test.tsx.snap      |  12 +-
 .../UpdateOrganizationForm.test.tsx.snap      |   4 +-
 .../UpdatePersonForm.test.tsx.snap            |   4 +-
 .../UpdateContactContainer.test.tsx.snap      |  12 +-
 .../DocumentListView.test.tsx.snap            |   4 +-
 .../HelpModalContentContainer.test.tsx.snap   |   4 +-
 .../AddLeaseContainer.test.tsx.snap           |  75 +++----
 .../AdministrationSubForm.test.tsx.snap       |  11 +-
 .../LeaseDetailSubForm.test.tsx.snap          |  17 +-
 .../DepositsContainer.test.tsx.snap           |   4 +-
 .../__snapshots__/DepositNotes.test.tsx.snap  |   4 +-
 .../DepositsReceivedContainer.test.tsx.snap   |   4 +-
 .../DepositsReturnedContainer.test.tsx.snap   |   4 +-
 .../ReceivedDepositForm.test.tsx.snap         | 136 ++----------
 .../ReturnDepositForm.test.tsx.snap           | 136 ++----------
 .../DetailAdministration.test.tsx.snap        |   8 +-
 .../DetailDocumentation.test.tsx.snap         |   8 +-
 .../PropertiesInformation.test.tsx.snap       |   4 +-
 .../__snapshots__/DocumentsPage.test.tsx.snap |   4 +-
 .../AddImprovementsContainer.test.tsx.snap    |   8 +-
 .../ImprovementsContainer.test.tsx.snap       |   4 +-
 .../__snapshots__/Insurance.test.tsx.snap     |  15 +-
 .../EditInsuranceContainer.test.tsx.snap      |  11 +-
 .../TermsPaymentsContainer.test.tsx.snap      |   8 +-
 .../__snapshots__/PaymentForm.test.tsx.snap   |  14 +-
 .../term/__snapshots__/TermForm.test.tsx.snap |  14 +-
 .../__snapshots__/TermsForm.test.tsx.snap     |   8 +-
 .../ViewTenantForm.test.tsx.snap              |   4 +-
 .../__snapshots__/LeaseFilter.test.tsx.snap   |   7 +-
 .../__snapshots__/LeaseListView.test.tsx.snap |   7 +-
 .../AcquisitionView.test.tsx.snap             | 106 +++++-----
 ...AcquisitionPropertiesSubForm.test.tsx.snap |  64 +++---
 .../AddAcquisitionContainer.test.tsx.snap     | 197 ++++++------------
 .../AddAcquisitionForm.test.tsx.snap          | 159 ++++----------
 .../AcquisitionFileTabs.test.tsx.snap         |  48 ++---
 ...dateAcquisitionAgreementForm.test.tsx.snap |  46 ++--
 .../__snapshots__/AgreementView.test.tsx.snap |   4 +-
 ...nsationRequisitionDetailView.test.tsx.snap |   4 +-
 .../CompensationListView.test.tsx.snap        |   8 +-
 ...eCompensationRequisitionForm.test.tsx.snap |  18 +-
 .../ExpropriationForm1.test.tsx.snap          |  59 +-----
 .../ExpropriationForm5.test.tsx.snap          |  59 +-----
 .../ExpropriationForm8Details.test.tsx.snap   |   8 +-
 .../ExpropriationForm9.test.tsx.snap          |  59 +-----
 .../AcquisitionSummaryView.test.tsx.snap      |   4 +-
 .../UpdateAcquisitionForm.test.tsx.snap       |  28 ++-
 .../StakeHolderView.test.tsx.snap             |   8 +-
 .../UpdateStakeHolderForm.test.tsx.snap       |  21 +-
 .../AddConsolidationView.test.tsx.snap        |  62 +++---
 .../DispositionView.test.tsx.snap             |  92 ++++----
 .../AddDispositionContainerView.test.tsx.snap | 111 +++++-----
 ...DispositionPropertiesSubForm.test.tsx.snap |  64 +++---
 .../DispositionFileTabs.test.tsx.snap         |  36 ++--
 .../DispositionSummaryView.test.tsx.snap      |   4 +-
 .../UpdateDispositionForm.test.tsx.snap       |  28 ++-
 .../OffersAndSaleView.test.tsx.snap           |  12 +-
 .../DispositionSaleForm.test.tsx.snap         | 133 +++---------
 .../UpdateDispositionSaleView.test.tsx.snap   | 176 +++++-----------
 .../ProjectContainerView.test.tsx.snap        |  86 ++++----
 .../AddProjectContainer.test.tsx.snap         |   6 +-
 .../AddProjectForm.test.tsx.snap              |  15 +-
 .../ProjectTabsContainer.test.tsx.snap        |  32 +--
 .../ProjectSummaryView.test.tsx.snap          |   4 +-
 .../PropertyAssociationTabView.test.tsx.snap  |   4 +-
 .../OperationSectionView.test.tsx.snap        |   8 +-
 ...datePropertyDetailsContainer.test.tsx.snap |  46 ++--
 .../UpdatePropertyDetailsForm.test.tsx.snap   |  10 +-
 ...ManagementActivitiesListView.test.tsx.snap |   4 +-
 .../PropertyContactListView.test.tsx.snap     |   4 +-
 ...PropertyManagementDetailView.test.tsx.snap |   4 +-
 .../PropertyContactEditForm.test.tsx.snap     |   6 +-
 ...PropertyManagementUpdateForm.test.tsx.snap |   8 +-
 .../PropertyResearchTabView.test.tsx.snap     |   4 +-
 .../UpdatePropertyForm.test.tsx.snap          |   4 +-
 .../TakesDetailView.test.tsx.snap             |   6 +-
 .../TakeUpdateForm.test.tsx.snap              |  11 +-
 .../ResearchContainer.test.tsx.snap           | 112 ++++------
 .../AddResearchContainer.test.tsx.snap        |  98 +++++----
 .../AddResearchForm.test.tsx.snap             |  60 +++---
 .../ResearchProperties.test.tsx.snap          |  60 +++---
 .../ResearchHeader.test.tsx.snap              |  16 --
 .../ResearchTabsContainer.test.tsx.snap       |  34 +--
 .../ResearchSummaryView.test.tsx.snap         |   4 +-
 .../UpdateSummaryForm.test.tsx.snap           |  29 ++-
 .../__snapshots__/ChecklistView.test.tsx.snap |   4 +-
 .../UpdateChecklistForm.test.tsx.snap         |   4 +-
 .../UpdateProperties.test.tsx.snap            |  62 +++---
 .../AddSubdivisionView.test.tsx.snap          |  62 +++---
 .../__snapshots__/NoteResults.test.tsx.snap   |  20 +-
 .../__snapshots__/NoteListView.test.tsx.snap  |   8 +-
 .../__snapshots__/MapContainer.test.tsx.snap  |   3 +-
 .../ResearchFilter.test.tsx.snap              |   7 +-
 .../ResearchListView.test.tsx.snap            |   7 +-
 111 files changed, 1292 insertions(+), 1903 deletions(-)

diff --git a/source/frontend/src/components/common/form/ContactInput/ContactInputView.test.tsx b/source/frontend/src/components/common/form/ContactInput/ContactInputView.test.tsx
index 1a41f4edcc..6c3eae9cb1 100644
--- a/source/frontend/src/components/common/form/ContactInput/ContactInputView.test.tsx
+++ b/source/frontend/src/components/common/form/ContactInput/ContactInputView.test.tsx
@@ -22,7 +22,7 @@ describe('ContactInputView component', () => {
       <Formik
         onSubmit={noop}
         initialValues={
-          props.initialValues ?? ({ test: { firstName: 'blah', surname: 'blah' } } as any)
+          props.initialValues ?? ({ test: { id:'234', firstName: 'blah', surname: 'blah' } } as any)
         }
       >
         <ContactInputView {...{ ...props }} />
@@ -102,25 +102,25 @@ describe('ContactInputView component', () => {
   });
 
   it('calls onClear when cancel clicked', async () => {
-    const { getByTitle } = setup({
+    const { queryByTitle } = setup({
       contactManagerProps: { display: false, setSelectedRows: setSelectedRows, selectedRows: [] },
       field: 'test',
       setShowContactManager: setShowContactManager,
       onClear: clear,
     });
-    const icon = getByTitle('remove');
+    const icon = queryByTitle('remove');
     await act(async () => userEvent.click(icon));
     expect(clear).toHaveBeenCalled();
   });
 
-  it('remove button disabled when no contact selected', async () => {
-    const { getByTitle } = setup({
+  it('remove button not present when no contact selected', async () => {
+    const { queryByTitle } = setup({
       contactManagerProps: { display: false, setSelectedRows: setSelectedRows, selectedRows: [] },
       field: 'invalid',
       setShowContactManager: setShowContactManager,
       onClear: clear,
     });
-    const icon = getByTitle('remove');
-    expect(icon).toBeDisabled();
+    const icon = queryByTitle('remove');
+    expect(icon).not.toBeInTheDocument();
   });
 });
diff --git a/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx b/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx
index 80b6332e03..3215da7892 100644
--- a/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx
+++ b/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx
@@ -77,7 +77,7 @@ const ContactInputView: React.FunctionComponent<IContactInputViewProps> = ({
                     }}
                     title="remove"
                   >
-                    <MdClose size="2rem" title="remove" />
+                    <MdClose size="2rem" />
                   </StyledRemoveLinkButton>
                 )}
               </StyledInputLikeDiv>
diff --git a/source/frontend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap b/source/frontend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap
index 4a51042593..4320da520a 100644
--- a/source/frontend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap
+++ b/source/frontend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap
@@ -142,12 +142,15 @@ exports[`ContactInputView component > renders as expected 1`] = `
 }
 
 .c0 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: default;
 }
 
 .c0.is-invalid {
@@ -157,7 +160,11 @@ exports[`ContactInputView component > renders as expected 1`] = `
 .c2.c2.btn {
   position: absolute;
   top: calc(50% - 1.4rem);
-  right: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-right: 1.2rem;
+  height: 1.6rem;
+  right: 0rem;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -224,7 +231,8 @@ exports[`ContactInputView component > renders as expected 1`] = `
             id="input-test.id"
             name="test.id"
             placeholder="Select from Contacts"
-            value=""
+            title="234"
+            value="234"
           />
         </div>
       </div>
diff --git a/source/frontend/src/components/common/form/ProjectSelector/__snapshots__/ProjectSelector.test.tsx.snap b/source/frontend/src/components/common/form/ProjectSelector/__snapshots__/ProjectSelector.test.tsx.snap
index 0ce2cb7a6f..24899f891f 100644
--- a/source/frontend/src/components/common/form/ProjectSelector/__snapshots__/ProjectSelector.test.tsx.snap
+++ b/source/frontend/src/components/common/form/ProjectSelector/__snapshots__/ProjectSelector.test.tsx.snap
@@ -45,17 +45,17 @@ exports[`ProjectSelector component > renders as expected 1`] = `
         />
       </div>
       <div
-        class="rbt-aux"
+        class="rbt-aux pr-3"
       >
         <svg
           color="#bcbec5"
           fill="currentColor"
-          height="2.5rem"
+          height="1.6rem"
           stroke="currentColor"
           stroke-width="0"
           style="color: rgb(188, 190, 197);"
           viewBox="0 0 512 512"
-          width="2.5rem"
+          width="1.6rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
diff --git a/source/frontend/src/components/common/form/__snapshots__/Multiselect.test.tsx.snap b/source/frontend/src/components/common/form/__snapshots__/Multiselect.test.tsx.snap
index 0e0fae9843..8ba49a01ab 100644
--- a/source/frontend/src/components/common/form/__snapshots__/Multiselect.test.tsx.snap
+++ b/source/frontend/src/components/common/form/__snapshots__/Multiselect.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`Multiselect component > renders as expected 1`] = `
       >
         <div
           class="search-wrapper searchWrapper "
-          style="background: white; border: 1px solid #606060;"
+          style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
         >
           <input
             autocomplete="off"
diff --git a/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap b/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
index cb1c8c37e6..574b936869 100644
--- a/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
@@ -163,44 +163,18 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
   font-size: 1.4rem;
 }
 
-.c2 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c2 .nav-tabs {
-  height: auto;
-}
-
-.c2 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c2 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c2 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c4 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -256,6 +230,32 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
   position: relative;
 }
 
+.c2 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c2 .nav-tabs {
+  height: auto;
+}
+
+.c2 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c2 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c2 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c1 {
   height: auto;
 }
diff --git a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
index 1466d8ab6d..eecc7b8201 100644
--- a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
@@ -161,11 +161,11 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 
 .c1 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -182,8 +182,8 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -353,8 +353,8 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySelectorPidSearchView.test.tsx.snap b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySelectorPidSearchView.test.tsx.snap
index 8fd02329ea..4be4d9d226 100644
--- a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySelectorPidSearchView.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySelectorPidSearchView.test.tsx.snap
@@ -160,8 +160,8 @@ exports[`PropertySearchPidSelector component > renders correctly 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/acquisition/list/AcquisitionFilter/__snapshots__/AcquisitionFilter.test.tsx.snap b/source/frontend/src/features/acquisition/list/AcquisitionFilter/__snapshots__/AcquisitionFilter.test.tsx.snap
index 5a623209b7..48b00ce1ea 100644
--- a/source/frontend/src/features/acquisition/list/AcquisitionFilter/__snapshots__/AcquisitionFilter.test.tsx.snap
+++ b/source/frontend/src/features/acquisition/list/AcquisitionFilter/__snapshots__/AcquisitionFilter.test.tsx.snap
@@ -276,7 +276,7 @@ exports[`Acquisition Filter > matches snapshot 1`] = `
                 >
                   <div
                     class="search-wrapper searchWrapper "
-                    style="background: white; border: 1px solid #606060;"
+                    style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                   >
                     <input
                       autocomplete="off"
diff --git a/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap b/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap
index 465cca92f8..021e5dfa0f 100644
--- a/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap
+++ b/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap
@@ -157,7 +157,7 @@ exports[`AccessRequestPage > renders correctly 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c4.form-group {
diff --git a/source/frontend/src/features/admin/document-template/__snapshots__/DocumentTemplateManagementContainer.test.tsx.snap b/source/frontend/src/features/admin/document-template/__snapshots__/DocumentTemplateManagementContainer.test.tsx.snap
index ba50514d09..08c1a67a5d 100644
--- a/source/frontend/src/features/admin/document-template/__snapshots__/DocumentTemplateManagementContainer.test.tsx.snap
+++ b/source/frontend/src/features/admin/document-template/__snapshots__/DocumentTemplateManagementContainer.test.tsx.snap
@@ -16,8 +16,8 @@ exports[`DocumentTemplateManagementContainer component > matches snapshot 1`] =
 }
 
 .c4 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserContainer.test.tsx.snap b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserContainer.test.tsx.snap
index 8dd3384a37..52e32eb7db 100644
--- a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserContainer.test.tsx.snap
+++ b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserContainer.test.tsx.snap
@@ -471,7 +471,7 @@ exports[`EditUserContainer component > makes a request based on the user id 1`]
             >
               <div
                 class="search-wrapper searchWrapper "
-                style="background: white; border: 1px solid #606060;"
+                style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
               >
                 <input
                   autocomplete="off"
@@ -601,7 +601,7 @@ exports[`EditUserContainer component > makes a request based on the user id 1`]
             >
               <div
                 class="search-wrapper searchWrapper "
-                style="background: white; border: 1px solid #606060;"
+                style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
               >
                 <input
                   autocomplete="off"
diff --git a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserForm.test.tsx.snap b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserForm.test.tsx.snap
index fc3ef318a5..fca01f8d8d 100644
--- a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserForm.test.tsx.snap
+++ b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserForm.test.tsx.snap
@@ -476,7 +476,7 @@ exports[`EditUserForm component > renders as expected 1`] = `
             >
               <div
                 class="search-wrapper searchWrapper "
-                style="background: white; border: 1px solid #606060;"
+                style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
               >
                 <span
                   class="chip  false false"
@@ -649,7 +649,7 @@ exports[`EditUserForm component > renders as expected 1`] = `
             >
               <div
                 class="search-wrapper searchWrapper "
-                style="background: white; border: 1px solid #606060;"
+                style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
               >
                 <span
                   class="chip  false false"
diff --git a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap
index ec03386dc0..9bdc6c0efc 100644
--- a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap
+++ b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap
@@ -157,7 +157,7 @@ exports[`Edit user page > EditUserPage renders 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c4.form-group {
@@ -519,7 +519,7 @@ exports[`Edit user page > EditUserPage renders 1`] = `
                   >
                     <div
                       class="search-wrapper searchWrapper "
-                      style="background: white; border: 1px solid #606060;"
+                      style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                     >
                       <input
                         autocomplete="off"
@@ -589,7 +589,7 @@ exports[`Edit user page > EditUserPage renders 1`] = `
                   >
                     <div
                       class="search-wrapper searchWrapper "
-                      style="background: white; border: 1px solid #606060;"
+                      style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                     >
                       <input
                         autocomplete="off"
diff --git a/source/frontend/src/features/admin/financial-codes/add/__snapshots__/AddFinancialCodeForm.test.tsx.snap b/source/frontend/src/features/admin/financial-codes/add/__snapshots__/AddFinancialCodeForm.test.tsx.snap
index 565ad23c90..2ebac2192b 100644
--- a/source/frontend/src/features/admin/financial-codes/add/__snapshots__/AddFinancialCodeForm.test.tsx.snap
+++ b/source/frontend/src/features/admin/financial-codes/add/__snapshots__/AddFinancialCodeForm.test.tsx.snap
@@ -142,19 +142,20 @@ exports[`AddFinancialCode form > renders as expected 1`] = `
 }
 
 .c3 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c3 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c3 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c4.c4.form-control.is-valid {
diff --git a/source/frontend/src/features/admin/financial-codes/update/__snapshots__/UpdateFinancialCodeForm.test.tsx.snap b/source/frontend/src/features/admin/financial-codes/update/__snapshots__/UpdateFinancialCodeForm.test.tsx.snap
index 5006684775..ac8d7f5f12 100644
--- a/source/frontend/src/features/admin/financial-codes/update/__snapshots__/UpdateFinancialCodeForm.test.tsx.snap
+++ b/source/frontend/src/features/admin/financial-codes/update/__snapshots__/UpdateFinancialCodeForm.test.tsx.snap
@@ -142,19 +142,20 @@ exports[`UpdateFinancialCode form > renders as expected 1`] = `
 }
 
 .c3 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c3 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c3 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c4.c4.form-control.is-valid {
diff --git a/source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap
index e3c7ef35a1..3be611d489 100644
--- a/source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap
@@ -199,8 +199,8 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap
index 2fcdd7f8b9..f667587ca5 100644
--- a/source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap
@@ -244,8 +244,8 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -472,17 +472,17 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                       />
                     </div>
                     <div
-                      class="rbt-aux"
+                      class="rbt-aux pr-3"
                     >
                       <svg
                         color="#bcbec5"
                         fill="currentColor"
-                        height="2.5rem"
+                        height="1.6rem"
                         stroke="currentColor"
                         stroke-width="0"
                         style="color: rgb(188, 190, 197);"
                         viewBox="0 0 512 512"
-                        width="2.5rem"
+                        width="1.6rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
diff --git a/source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap b/source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap
index c85dbbd4dc..fa185d1034 100644
--- a/source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap
@@ -216,7 +216,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c4 {
@@ -284,8 +284,8 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 }
 
 .c11 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -686,17 +686,17 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                           />
                         </div>
                         <div
-                          class="rbt-aux"
+                          class="rbt-aux pr-3"
                         >
                           <svg
                             color="#bcbec5"
                             fill="currentColor"
-                            height="2.5rem"
+                            height="1.6rem"
                             stroke="currentColor"
                             stroke-width="0"
                             style="color: rgb(188, 190, 197);"
                             viewBox="0 0 512 512"
-                            width="2.5rem"
+                            width="1.6rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
diff --git a/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap
index 3113844708..de881bdd77 100644
--- a/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap
@@ -199,8 +199,8 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap
index 66efa78e6b..1b9e898ad7 100644
--- a/source/frontend/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap
@@ -203,8 +203,8 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap b/source/frontend/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap
index 49b290851e..978e5fc29e 100644
--- a/source/frontend/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap
@@ -206,7 +206,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c4 {
@@ -270,8 +270,8 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 }
 
 .c9 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -689,17 +689,17 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                           />
                         </div>
                         <div
-                          class="rbt-aux"
+                          class="rbt-aux pr-3"
                         >
                           <svg
                             color="#bcbec5"
                             fill="currentColor"
-                            height="2.5rem"
+                            height="1.6rem"
                             stroke="currentColor"
                             stroke-width="0"
                             style="color: rgb(188, 190, 197);"
                             viewBox="0 0 512 512"
-                            width="2.5rem"
+                            width="1.6rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
diff --git a/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap b/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
index 95a196d27f..e78dfcf636 100644
--- a/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
+++ b/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
@@ -153,8 +153,8 @@ exports[`Document List View > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/help/containers/__snapshots__/HelpModalContentContainer.test.tsx.snap b/source/frontend/src/features/help/containers/__snapshots__/HelpModalContentContainer.test.tsx.snap
index 45577808c9..0794dd0af7 100644
--- a/source/frontend/src/features/help/containers/__snapshots__/HelpModalContentContainer.test.tsx.snap
+++ b/source/frontend/src/features/help/containers/__snapshots__/HelpModalContentContainer.test.tsx.snap
@@ -8,11 +8,11 @@ exports[`HelpModalContentContainer component > renders correctly 1`] = `
   <div />
   .c0 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c1 {
diff --git a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
index 499dbc20d0..c275e3693b 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -227,19 +227,20 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 }
 
 .c7 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c7 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c7 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c8.c8.form-control.is-valid {
@@ -308,39 +309,13 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
   font-size: 1.4rem;
 }
 
-.c12 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c12 .nav-tabs {
-  height: auto;
-}
-
-.c12 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c12 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c12 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c13 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c0 {
@@ -369,8 +344,8 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -426,6 +401,32 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
   position: relative;
 }
 
+.c12 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c12 .nav-tabs {
+  height: auto;
+}
+
+.c12 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c12 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c12 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c11 {
   height: auto;
 }
@@ -531,17 +532,17 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
                       />
                     </div>
                     <div
-                      class="rbt-aux"
+                      class="rbt-aux pr-3"
                     >
                       <svg
                         color="#bcbec5"
                         fill="currentColor"
-                        height="2.5rem"
+                        height="1.6rem"
                         stroke="currentColor"
                         stroke-width="0"
                         style="color: rgb(188, 190, 197);"
                         viewBox="0 0 512 512"
-                        width="2.5rem"
+                        width="1.6rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
diff --git a/source/frontend/src/features/leases/add/__snapshots__/AdministrationSubForm.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/AdministrationSubForm.test.tsx.snap
index aa14f77401..62f3dddd22 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/AdministrationSubForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/AdministrationSubForm.test.tsx.snap
@@ -7,19 +7,20 @@ exports[`AdministrationSubForm component > renders as expected 1`] = `
   />
   <div />
   .c5 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c5 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c5 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c6.c6.form-control.is-valid {
@@ -55,8 +56,8 @@ exports[`AdministrationSubForm component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/add/__snapshots__/LeaseDetailSubForm.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/LeaseDetailSubForm.test.tsx.snap
index 4bc531c4bd..71f2a80cb0 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/LeaseDetailSubForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/LeaseDetailSubForm.test.tsx.snap
@@ -11,19 +11,20 @@ exports[`LeaseDetailSubForm component > renders as expected 1`] = `
 }
 
 .c4 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c4 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c4 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c5.c5.form-control.is-valid {
@@ -35,8 +36,8 @@ exports[`LeaseDetailSubForm component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -109,17 +110,17 @@ exports[`LeaseDetailSubForm component > renders as expected 1`] = `
                 />
               </div>
               <div
-                class="rbt-aux"
+                class="rbt-aux pr-3"
               >
                 <svg
                   color="#bcbec5"
                   fill="currentColor"
-                  height="2.5rem"
+                  height="1.6rem"
                   stroke="currentColor"
                   stroke-width="0"
                   style="color: rgb(188, 190, 197);"
                   viewBox="0 0 512 512"
-                  width="2.5rem"
+                  width="1.6rem"
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/__snapshots__/DepositsContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/__snapshots__/DepositsContainer.test.tsx.snap
index f257c4063d..02bd4ec4f2 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/__snapshots__/DepositsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/__snapshots__/DepositsContainer.test.tsx.snap
@@ -153,8 +153,8 @@ exports[`DepositsContainer > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/__snapshots__/DepositNotes.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/__snapshots__/DepositNotes.test.tsx.snap
index 0d837919a4..768cc26f22 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/__snapshots__/DepositNotes.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/__snapshots__/DepositNotes.test.tsx.snap
@@ -18,8 +18,8 @@ exports[`DepositNotes component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
index 0c9cb9d4cd..c58c0688be 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
@@ -148,8 +148,8 @@ exports[`DepositsReceivedContainer component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/__snapshots__/DepositsReturnedContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/__snapshots__/DepositsReturnedContainer.test.tsx.snap
index 56da4e79fa..b36a25db73 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/__snapshots__/DepositsReturnedContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/__snapshots__/DepositsReturnedContainer.test.tsx.snap
@@ -13,8 +13,8 @@ exports[`DepositsReturnedContainer component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/receivedDepositModal/__snapshots__/ReceivedDepositForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/receivedDepositModal/__snapshots__/ReceivedDepositForm.test.tsx.snap
index 9c21da58ff..062b6141fa 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/receivedDepositModal/__snapshots__/ReceivedDepositForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/receivedDepositModal/__snapshots__/ReceivedDepositForm.test.tsx.snap
@@ -142,19 +142,20 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
 }
 
 .c3 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c3 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c3 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c5.c5.form-control.is-valid {
@@ -184,39 +185,20 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
 
 .c6 {
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
-  min-height: 2.5em;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
   background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c6.is-invalid {
   border: solid 0.1rem;
 }
 
-.c8.c8.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c8.c8.btn .text {
-  display: none;
-}
-
-.c8.c8.btn:hover,
-.c8.c8.btn:active,
-.c8.c8.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c2.required::before {
   content: '*';
   position: absolute;
@@ -429,36 +411,6 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
                 class="c6"
               >
                 Select from contacts
-                <button
-                  class="c7 Button Button--disabled c8 btn btn-link"
-                  disabled=""
-                  type="button"
-                >
-                  <div
-                    class="Button__value"
-                  >
-                    <svg
-                      fill="currentColor"
-                      height="2rem"
-                      stroke="currentColor"
-                      stroke-width="0"
-                      viewBox="0 0 24 24"
-                      width="2rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <title>
-                        remove
-                      </title>
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                      />
-                    </svg>
-                  </div>
-                </button>
               </div>
               <div
                 class="d-none input form-group"
@@ -664,19 +616,20 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
 }
 
 .c3 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c3 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c3 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c5.c5.form-control.is-valid {
@@ -706,39 +659,20 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
 
 .c6 {
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
-  min-height: 2.5em;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
   background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c6.is-invalid {
   border: solid 0.1rem;
 }
 
-.c8.c8.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c8.c8.btn .text {
-  display: none;
-}
-
-.c8.c8.btn:hover,
-.c8.c8.btn:active,
-.c8.c8.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c2.required::before {
   content: '*';
   position: absolute;
@@ -951,36 +885,6 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
                 class="c6"
               >
                 Select from contacts
-                <button
-                  class="c7 Button Button--disabled c8 btn btn-link"
-                  disabled=""
-                  type="button"
-                >
-                  <div
-                    class="Button__value"
-                  >
-                    <svg
-                      fill="currentColor"
-                      height="2rem"
-                      stroke="currentColor"
-                      stroke-width="0"
-                      viewBox="0 0 24 24"
-                      width="2rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <title>
-                        remove
-                      </title>
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                      />
-                    </svg>
-                  </div>
-                </button>
               </div>
               <div
                 class="d-none input form-group"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/__snapshots__/ReturnDepositForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/__snapshots__/ReturnDepositForm.test.tsx.snap
index d388515154..3a78eebdef 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/__snapshots__/ReturnDepositForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/__snapshots__/ReturnDepositForm.test.tsx.snap
@@ -176,19 +176,20 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
 }
 
 .c1 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c1 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c1 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c3.c3.form-control.is-valid {
@@ -218,39 +219,20 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
 
 .c7 {
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
-  min-height: 2.5em;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
   background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c7.is-invalid {
   border: solid 0.1rem;
 }
 
-.c9.c9.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c9.c9.btn .text {
-  display: none;
-}
-
-.c9.c9.btn:hover,
-.c9.c9.btn:active,
-.c9.c9.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c0 .form-group {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -532,36 +514,6 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
                 class="c7"
               >
                 Select from contacts
-                <button
-                  class="c8 Button Button--disabled c9 btn btn-link"
-                  disabled=""
-                  type="button"
-                >
-                  <div
-                    class="Button__value"
-                  >
-                    <svg
-                      fill="currentColor"
-                      height="2rem"
-                      stroke="currentColor"
-                      stroke-width="0"
-                      viewBox="0 0 24 24"
-                      width="2rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <title>
-                        remove
-                      </title>
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                      />
-                    </svg>
-                  </div>
-                </button>
               </div>
               <div
                 class="d-none input form-group"
@@ -786,19 +738,20 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
 }
 
 .c1 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c1 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c1 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c3.c3.form-control.is-valid {
@@ -828,39 +781,20 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
 
 .c7 {
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
-  min-height: 2.5em;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
   background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c7.is-invalid {
   border: solid 0.1rem;
 }
 
-.c9.c9.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c9.c9.btn .text {
-  display: none;
-}
-
-.c9.c9.btn:hover,
-.c9.c9.btn:active,
-.c9.c9.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c0 .form-group {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -1142,36 +1076,6 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
                 class="c7"
               >
                 Select from contacts
-                <button
-                  class="c8 Button Button--disabled c9 btn btn-link"
-                  disabled=""
-                  type="button"
-                >
-                  <div
-                    class="Button__value"
-                  >
-                    <svg
-                      fill="currentColor"
-                      height="2rem"
-                      stroke="currentColor"
-                      stroke-width="0"
-                      viewBox="0 0 24 24"
-                      width="2rem"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <title>
-                        remove
-                      </title>
-                      <path
-                        d="M0 0h24v24H0z"
-                        fill="none"
-                      />
-                      <path
-                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                      />
-                    </svg>
-                  </div>
-                </button>
               </div>
               <div
                 class="d-none input form-group"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailAdministration.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailAdministration.test.tsx.snap
index 524718eb96..fa5e3ebe57 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailAdministration.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailAdministration.test.tsx.snap
@@ -18,8 +18,8 @@ exports[`DetailAdministration component > renders a complete lease as expected 1
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -369,8 +369,8 @@ exports[`DetailAdministration component > renders minimally as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailDocumentation.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailDocumentation.test.tsx.snap
index aa226fe52b..a3bbf6079d 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailDocumentation.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailDocumentation.test.tsx.snap
@@ -18,8 +18,8 @@ exports[`DetailDocumentation component > renders a complete lease as expected 1`
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -221,8 +221,8 @@ exports[`DetailDocumentation component > renders minimally as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
index c7764031fb..9c2efaf39f 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
@@ -18,8 +18,8 @@ exports[`PropertiesInformation component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/documents/__snapshots__/DocumentsPage.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/documents/__snapshots__/DocumentsPage.test.tsx.snap
index 63f8f33db6..319bb722e3 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/documents/__snapshots__/DocumentsPage.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/documents/__snapshots__/DocumentsPage.test.tsx.snap
@@ -153,8 +153,8 @@ exports[`Lease Documents Page > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/AddImprovementsContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/AddImprovementsContainer.test.tsx.snap
index 9a9a5ca48d..11ff5f4722 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/AddImprovementsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/AddImprovementsContainer.test.tsx.snap
@@ -13,8 +13,8 @@ exports[`Add Improvements container component > displays the improvement types i
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -442,8 +442,8 @@ exports[`Add Improvements container component > renders as expected 1`] = `
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/ImprovementsContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/ImprovementsContainer.test.tsx.snap
index 250185b627..e93003fd34 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/ImprovementsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/ImprovementsContainer.test.tsx.snap
@@ -7,8 +7,8 @@ exports[`Improvements Container component > renders as expected 1`] = `
   />
   <div />
   .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/insurance/details/__snapshots__/Insurance.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/insurance/details/__snapshots__/Insurance.test.tsx.snap
index 36ab7e9be5..c514ce101a 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/insurance/details/__snapshots__/Insurance.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/insurance/details/__snapshots__/Insurance.test.tsx.snap
@@ -17,8 +17,8 @@ exports[`Edit Lease Insurance > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -36,19 +36,20 @@ exports[`Edit Lease Insurance > renders as expected 1`] = `
 }
 
 .c5 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c5 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c5 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c6.c6.form-control.is-valid {
@@ -332,8 +333,8 @@ exports[`Lease Insurance > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/__snapshots__/EditInsuranceContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/__snapshots__/EditInsuranceContainer.test.tsx.snap
index 44e57ec188..86ceb11afc 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/__snapshots__/EditInsuranceContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/__snapshots__/EditInsuranceContainer.test.tsx.snap
@@ -17,8 +17,8 @@ exports[`Edit Lease Insurance > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -36,19 +36,20 @@ exports[`Edit Lease Insurance > renders as expected 1`] = `
 }
 
 .c5 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c5 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c5 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c6.c6.form-control.is-valid {
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/TermsPaymentsContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/TermsPaymentsContainer.test.tsx.snap
index 2431b79508..45813eded9 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/TermsPaymentsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/TermsPaymentsContainer.test.tsx.snap
@@ -340,8 +340,8 @@ exports[`TermsPaymentsContainer component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -996,8 +996,8 @@ exports[`TermsPaymentsContainer component > renders with data as expected 1`] =
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/payment/__snapshots__/PaymentForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/payment/__snapshots__/PaymentForm.test.tsx.snap
index 2f51451b1f..cd181403df 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/payment/__snapshots__/PaymentForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/payment/__snapshots__/PaymentForm.test.tsx.snap
@@ -7,19 +7,20 @@ exports[`PaymentForm component > renders as expected 1`] = `
   />
   <div />
   .c1 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c1 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c1 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c2.c2.form-control.is-valid {
@@ -336,19 +337,20 @@ exports[`PaymentForm component > renders with data as expected 1`] = `
   />
   <div />
   .c1 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c1 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c1 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c2.c2.form-control.is-valid {
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/term/__snapshots__/TermForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/term/__snapshots__/TermForm.test.tsx.snap
index 652ad58d36..674a85de0d 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/term/__snapshots__/TermForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/term/__snapshots__/TermForm.test.tsx.snap
@@ -7,19 +7,20 @@ exports[`TermForm component > renders as expected 1`] = `
   />
   <div />
   .c1 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c1 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c1 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c2.c2.form-control.is-valid {
@@ -462,19 +463,20 @@ exports[`TermForm component > renders with data as expected 1`] = `
   />
   <div />
   .c1 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c1 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c1 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c2.c2.form-control.is-valid {
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/terms/__snapshots__/TermsForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/table/terms/__snapshots__/TermsForm.test.tsx.snap
index 4242225738..d6c7554298 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/terms/__snapshots__/TermsForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/terms/__snapshots__/TermsForm.test.tsx.snap
@@ -13,8 +13,8 @@ exports[`TermsForm component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -469,8 +469,8 @@ exports[`TermsForm component > renders with data as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/tenant/__snapshots__/ViewTenantForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/tenant/__snapshots__/ViewTenantForm.test.tsx.snap
index aec51045e2..9d2f1e482a 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/tenant/__snapshots__/ViewTenantForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/tenant/__snapshots__/ViewTenantForm.test.tsx.snap
@@ -27,8 +27,8 @@ exports[`Tenant component > renders as expected 1`] = `
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/leases/list/LeaseFilter/__snapshots__/LeaseFilter.test.tsx.snap b/source/frontend/src/features/leases/list/LeaseFilter/__snapshots__/LeaseFilter.test.tsx.snap
index 42d106485c..f8a3971241 100644
--- a/source/frontend/src/features/leases/list/LeaseFilter/__snapshots__/LeaseFilter.test.tsx.snap
+++ b/source/frontend/src/features/leases/list/LeaseFilter/__snapshots__/LeaseFilter.test.tsx.snap
@@ -142,19 +142,20 @@ exports[`Lease Filter > matches snapshot 1`] = `
 }
 
 .c3 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c3 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c3 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c4.c4.form-control.is-valid {
diff --git a/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap b/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
index 19eebb62f4..84714ee67a 100644
--- a/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
+++ b/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
@@ -165,19 +165,20 @@ exports[`Lease and License List View > matches snapshot 1`] = `
 }
 
 .c8 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c8 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c8 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c9.c9.form-control.is-valid {
diff --git a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
index ae46bfab69..bbb916a3da 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -323,7 +323,21 @@ exports[`AcquisitionView component > renders as expected 1`] = `
       </div>
     </div>
   </div>
-  .c12 {
+  .c11 {
+  height: 100%;
+}
+
+.c11 .tab-content {
+  border-radius: 0 0.4rem 0.4rem 0.4rem;
+  height: calc(100% - 2.5rem);
+  overflow-y: auto;
+}
+
+.c11 .tab-content .tab-pane {
+  position: relative;
+}
+
+.c12 {
   background-color: white;
   font-size: 1.4rem;
   border-color: transparent;
@@ -335,7 +349,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 
 .c12 .nav-item {
   min-width: 5rem;
-  padding: 0.1rem 0.6rem;
+  padding: 0.1rem 1.2rem;
 }
 
 .c12 .nav-item:hover {
@@ -349,6 +363,22 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   border-color: transparent;
 }
 
+.c2 {
+  height: 100%;
+}
+
+.c3 {
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}
+
+.c9 {
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}
+
 .c20 {
   width: 100%;
   height: 100%;
@@ -375,36 +405,6 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   justify-content: center;
 }
 
-.c11 {
-  height: 100%;
-}
-
-.c11 .tab-content {
-  border-radius: 0 0.4rem 0.4rem 0.4rem;
-  height: calc(100% - 2.5rem);
-  overflow-y: auto;
-}
-
-.c11 .tab-content .tab-pane {
-  position: relative;
-}
-
-.c2 {
-  height: 100%;
-}
-
-.c3 {
-  overflow: auto;
-  height: 100%;
-  width: 100%;
-}
-
-.c9 {
-  overflow: auto;
-  height: 100%;
-  width: 100%;
-}
-
 .c0 {
   width: 100%;
   position: relative;
@@ -419,6 +419,23 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   width: 100%;
 }
 
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
+}
+
 .c13 {
   padding-top: 1rem;
 }
@@ -434,8 +451,8 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 }
 
 .c15 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -524,25 +541,6 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   align-items: center;
 }
 
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-}
-
 <div
     class="c0"
   >
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
index e9db85c06f..c8e4347e4e 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
@@ -168,44 +168,18 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
   font-size: 1.4rem;
 }
 
-.c2 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c2 .nav-tabs {
-  height: auto;
-}
-
-.c2 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c2 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c2 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c4 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -261,6 +235,32 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
   position: relative;
 }
 
+.c2 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c2 .nav-tabs {
+  height: auto;
+}
+
+.c2 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c2 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c2 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c1 {
   height: auto;
 }
@@ -953,8 +953,8 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
index ca6b46c5b8..4f7f528296 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -225,19 +225,20 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 }
 
 .c9 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c9 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c9 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c10.c10.form-control.is-valid {
@@ -270,39 +271,13 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
   font-size: 1.4rem;
 }
 
-.c13 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c13 .nav-tabs {
-  height: auto;
-}
-
-.c13 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c13 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c13 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c14 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c25 {
@@ -325,40 +300,39 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
   width: 100%;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
+}
+
 .c26 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c26.is-invalid {
   border: solid 0.1rem;
 }
 
-.c27.c27.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c27.c27.btn .text {
-  display: none;
-}
-
-.c27.c27.btn:hover,
-.c27.c27.btn:active,
-.c27.c27.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c5 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
@@ -366,8 +340,8 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 }
 
 .c4 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -423,6 +397,32 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
   position: relative;
 }
 
+.c13 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c13 .nav-tabs {
+  height: auto;
+}
+
+.c13 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c13 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c13 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c12 {
   height: auto;
 }
@@ -471,25 +471,6 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
   max-width: 25rem;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-}
-
 <div
     class="c0"
   >
@@ -571,17 +552,17 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
                         />
                       </div>
                       <div
-                        class="rbt-aux"
+                        class="rbt-aux pr-3"
                       >
                         <svg
                           color="#bcbec5"
                           fill="currentColor"
-                          height="2.5rem"
+                          height="1.6rem"
                           stroke="currentColor"
                           stroke-width="0"
                           style="color: rgb(188, 190, 197);"
                           viewBox="0 0 512 512"
-                          width="2.5rem"
+                          width="1.6rem"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
@@ -1746,33 +1727,6 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
                           class="c26"
                         >
                           Select from contacts
-                          <button
-                            class="c21 Button c27 btn btn-link"
-                            title="remove"
-                            type="button"
-                          >
-                            <div
-                              class="Button__value"
-                            >
-                              <svg
-                                fill="currentColor"
-                                height="2rem"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                viewBox="0 0 24 24"
-                                width="2rem"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M0 0h24v24H0z"
-                                  fill="none"
-                                />
-                                <path
-                                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                                />
-                              </svg>
-                            </div>
-                          </button>
                         </div>
                         <div
                           class="d-none input form-group"
@@ -1847,33 +1801,6 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
                           class="c26"
                         >
                           Select from contacts
-                          <button
-                            class="c21 Button c27 btn btn-link"
-                            title="remove"
-                            type="button"
-                          >
-                            <div
-                              class="Button__value"
-                            >
-                              <svg
-                                fill="currentColor"
-                                height="2rem"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                viewBox="0 0 24 24"
-                                width="2rem"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M0 0h24v24H0z"
-                                  fill="none"
-                                />
-                                <path
-                                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                                />
-                              </svg>
-                            </div>
-                          </button>
                         </div>
                         <div
                           class="d-none input form-group"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
index 161407ee31..04014d72dc 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
@@ -146,19 +146,20 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c6 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c6 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c6 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c7.c7.form-control.is-valid {
@@ -191,39 +192,13 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
   font-size: 1.4rem;
 }
 
-.c10 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c10 .nav-tabs {
-  height: auto;
-}
-
-.c10 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c10 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c10 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c11 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c22 {
@@ -233,39 +208,21 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c23 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c23.is-invalid {
   border: solid 0.1rem;
 }
 
-.c24.c24.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c24.c24.btn .text {
-  display: none;
-}
-
-.c24.c24.btn:hover,
-.c24.c24.btn:active,
-.c24.c24.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c2 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
@@ -273,8 +230,8 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -330,6 +287,32 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
   position: relative;
 }
 
+.c10 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c10 .nav-tabs {
+  height: auto;
+}
+
+.c10 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c10 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c10 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c9 {
   height: auto;
 }
@@ -450,17 +433,17 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
                   />
                 </div>
                 <div
-                  class="rbt-aux"
+                  class="rbt-aux pr-3"
                 >
                   <svg
                     color="#bcbec5"
                     fill="currentColor"
-                    height="2.5rem"
+                    height="1.6rem"
                     stroke="currentColor"
                     stroke-width="0"
                     style="color: rgb(188, 190, 197);"
                     viewBox="0 0 512 512"
-                    width="2.5rem"
+                    width="1.6rem"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
@@ -1631,33 +1614,6 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
                     class="c23"
                   >
                     Select from contacts
-                    <button
-                      class="c18 Button c24 btn btn-link"
-                      title="remove"
-                      type="button"
-                    >
-                      <div
-                        class="Button__value"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="2rem"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          viewBox="0 0 24 24"
-                          width="2rem"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M0 0h24v24H0z"
-                            fill="none"
-                          />
-                          <path
-                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                          />
-                        </svg>
-                      </div>
-                    </button>
                   </div>
                   <div
                     class="d-none input form-group"
@@ -1732,33 +1688,6 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
                     class="c23"
                   >
                     Select from contacts
-                    <button
-                      class="c18 Button c24 btn btn-link"
-                      title="remove"
-                      type="button"
-                    >
-                      <div
-                        class="Button__value"
-                      >
-                        <svg
-                          fill="currentColor"
-                          height="2rem"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          viewBox="0 0 24 24"
-                          width="2rem"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M0 0h24v24H0z"
-                            fill="none"
-                          />
-                          <path
-                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                          />
-                        </svg>
-                      </div>
-                    </button>
                   </div>
                   <div
                     class="d-none input form-group"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap
index dcba7962db..e2a0f47302 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap
@@ -6,7 +6,21 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c1 {
+  .c0 {
+  height: 100%;
+}
+
+.c0 .tab-content {
+  border-radius: 0 0.4rem 0.4rem 0.4rem;
+  height: calc(100% - 2.5rem);
+  overflow-y: auto;
+}
+
+.c0 .tab-content .tab-pane {
+  position: relative;
+}
+
+.c1 {
   background-color: white;
   font-size: 1.4rem;
   border-color: transparent;
@@ -18,7 +32,7 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
 
 .c1 .nav-item {
   min-width: 5rem;
-  padding: 0.1rem 0.6rem;
+  padding: 0.1rem 1.2rem;
 }
 
 .c1 .nav-item:hover {
@@ -32,26 +46,6 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
   border-color: transparent;
 }
 
-.c9 {
-  font-size: 1.6rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0 {
-  height: 100%;
-}
-
-.c0 .tab-content {
-  border-radius: 0 0.4rem 0.4rem 0.4rem;
-  height: calc(100% - 2.5rem);
-  overflow-y: auto;
-}
-
-.c0 .tab-content .tab-pane {
-  position: relative;
-}
-
 .c2 {
   padding-top: 1rem;
 }
@@ -67,13 +61,19 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
 }
 
 .c4 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
 }
 
+.c9 {
+  font-size: 1.6rem;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
 .c7.required::before {
   content: '*';
   position: absolute;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/__snapshots__/UpdateAcquisitionAgreementForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/__snapshots__/UpdateAcquisitionAgreementForm.test.tsx.snap
index 6315e51f6c..8f98a1030f 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/__snapshots__/UpdateAcquisitionAgreementForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/__snapshots__/UpdateAcquisitionAgreementForm.test.tsx.snap
@@ -142,19 +142,20 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
 }
 
 .c5 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c5 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c5 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c6.c6.form-control.is-valid {
@@ -174,6 +175,23 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   z-index: 10;
 }
 
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
+}
+
 .c2 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
@@ -181,8 +199,8 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -227,24 +245,6 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   margin-left: 0.5rem;
 }
 
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 1rem;
-}
-
 .c9 {
   margin-right: 1rem;
   padding-bottom: 1rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
index 93331b58a0..ff4a49a6a2 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
@@ -157,8 +157,8 @@ exports[`AgreementView component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
index 480cb9ab97..850213989e 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
@@ -157,8 +157,8 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/__snapshots__/CompensationListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
index 800bc8708a..a459edb2ee 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
@@ -13,8 +13,8 @@ exports[`compensation list view > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -298,8 +298,8 @@ exports[`compensation list view > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
index 3ea47008b6..1acdd03fa7 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
@@ -146,19 +146,20 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
 }
 
 .c6 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c6 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c6 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c7.c7.form-control.is-valid {
@@ -185,8 +186,8 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -227,7 +228,6 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
   text-align: left;
   height: 100%;
   overflow-y: auto;
-  padding-bottom: 1rem;
 }
 
 .c12 {
@@ -362,17 +362,17 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
                     />
                   </div>
                   <div
-                    class="rbt-aux"
+                    class="rbt-aux pr-3"
                   >
                     <svg
                       color="#bcbec5"
                       fill="currentColor"
-                      height="2.5rem"
+                      height="1.6rem"
                       stroke="currentColor"
                       stroke-width="0"
                       style="color: rgb(188, 190, 197);"
                       viewBox="0 0 512 512"
-                      width="2.5rem"
+                      width="1.6rem"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap
index c0919aa851..520acda4c8 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap
@@ -142,39 +142,21 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 }
 
 .c2 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c2.is-invalid {
   border: solid 0.1rem;
 }
 
-.c4.c4.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c4.c4.btn .text {
-  display: none;
-}
-
-.c4.c4.btn:hover,
-.c4.c4.btn:active,
-.c4.c4.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c1.required::before {
   content: '*';
   position: absolute;
@@ -214,33 +196,6 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
               class="c2"
             >
               Select from contacts
-              <button
-                class="c3 Button c4 btn btn-link"
-                title="remove"
-                type="button"
-              >
-                <div
-                  class="Button__value"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="2rem"
-                    stroke="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 24 24"
-                    width="2rem"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                    />
-                  </svg>
-                </div>
-              </button>
             </div>
             <div
               class="d-none input form-group"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form5/__snapshots__/ExpropriationForm5.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form5/__snapshots__/ExpropriationForm5.test.tsx.snap
index 517f19a58f..2b2aa62e00 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form5/__snapshots__/ExpropriationForm5.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form5/__snapshots__/ExpropriationForm5.test.tsx.snap
@@ -142,39 +142,21 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 }
 
 .c2 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c2.is-invalid {
   border: solid 0.1rem;
 }
 
-.c4.c4.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c4.c4.btn .text {
-  display: none;
-}
-
-.c4.c4.btn:hover,
-.c4.c4.btn:active,
-.c4.c4.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c1.required::before {
   content: '*';
   position: absolute;
@@ -214,33 +196,6 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
               class="c2"
             >
               Select from contacts
-              <button
-                class="c3 Button c4 btn btn-link"
-                title="remove"
-                type="button"
-              >
-                <div
-                  class="Button__value"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="2rem"
-                    stroke="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 24 24"
-                    width="2rem"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                    />
-                  </svg>
-                </div>
-              </button>
             </div>
             <div
               class="d-none input form-group"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/__snapshots__/ExpropriationForm8Details.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/__snapshots__/ExpropriationForm8Details.test.tsx.snap
index 4ce0bdf4b1..834d18c92b 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/__snapshots__/ExpropriationForm8Details.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/__snapshots__/ExpropriationForm8Details.test.tsx.snap
@@ -143,11 +143,11 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
 
 .c9 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c4.c4 {
@@ -157,8 +157,8 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap
index dc01b45220..94511a935a 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap
@@ -142,39 +142,21 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 }
 
 .c2 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c2.is-invalid {
   border: solid 0.1rem;
 }
 
-.c4.c4.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c4.c4.btn .text {
-  display: none;
-}
-
-.c4.c4.btn:hover,
-.c4.c4.btn:active,
-.c4.c4.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
 .c1.required::before {
   content: '*';
   position: absolute;
@@ -214,33 +196,6 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
               class="c2"
             >
               Select from contacts
-              <button
-                class="c3 Button c4 btn btn-link"
-                title="remove"
-                type="button"
-              >
-                <div
-                  class="Button__value"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="2rem"
-                    stroke="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 24 24"
-                    width="2rem"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                    />
-                  </svg>
-                </div>
-              </button>
             </div>
             <div
               class="d-none input form-group"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap
index fa96950b73..edc7e50145 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap
@@ -21,8 +21,8 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = `
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/__snapshots__/UpdateAcquisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/__snapshots__/UpdateAcquisitionForm.test.tsx.snap
index 50fb67f386..efcd634d72 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/__snapshots__/UpdateAcquisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/__snapshots__/UpdateAcquisitionForm.test.tsx.snap
@@ -146,19 +146,20 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c6 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c6 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c6 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c7.c7.form-control.is-valid {
@@ -303,12 +304,15 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c8 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: default;
 }
 
 .c8.is-invalid {
@@ -318,7 +322,11 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 .c10.c10.btn {
   position: absolute;
   top: calc(50% - 1.4rem);
-  right: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-right: 1.2rem;
+  height: 1.6rem;
+  right: 0rem;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -343,8 +351,8 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/__snapshots__/StakeHolderView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/__snapshots__/StakeHolderView.test.tsx.snap
index 2591d029bd..6e2868db5d 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/__snapshots__/StakeHolderView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/__snapshots__/StakeHolderView.test.tsx.snap
@@ -26,8 +26,8 @@ exports[`StakeHolderView component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -334,8 +334,8 @@ exports[`StakeHolderView component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/__snapshots__/UpdateStakeHolderForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/__snapshots__/UpdateStakeHolderForm.test.tsx.snap
index 861c51997c..76dc3b8fb4 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/__snapshots__/UpdateStakeHolderForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/__snapshots__/UpdateStakeHolderForm.test.tsx.snap
@@ -176,12 +176,15 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 }
 
 .c6 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: default;
 }
 
 .c6.is-invalid {
@@ -191,7 +194,11 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 .c8.c8.btn {
   position: absolute;
   top: calc(50% - 1.4rem);
-  right: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-right: 1.2rem;
+  height: 1.6rem;
+  right: 0rem;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -220,8 +227,8 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap b/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap
index f4272d8b8f..dbd3d32751 100644
--- a/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c3 {
@@ -96,39 +96,13 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
       class="c3"
     />
   </div>
-  .c7 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c7 .nav-tabs {
-  height: auto;
-}
-
-.c7 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c7 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c7 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
-.c4 {
+  .c4 {
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c9 {
@@ -138,8 +112,8 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -165,6 +139,32 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
   position: relative;
 }
 
+.c7 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c7 .nav-tabs {
+  height: auto;
+}
+
+.c7 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c7 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c7 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c6 {
   height: auto;
 }
diff --git a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
index a65e732f53..b69cb918cf 100644
--- a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -302,6 +302,34 @@ exports[`DispositionView component > renders as expected 1`] = `
   width: 100%;
 }
 
+.c0 {
+  width: 100%;
+  position: relative;
+  overflow: auto;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.c1 {
+  height: 100%;
+  width: 100%;
+}
+
+.c11 {
+  height: 100%;
+}
+
+.c11 .tab-content {
+  border-radius: 0 0.4rem 0.4rem 0.4rem;
+  height: calc(100% - 2.5rem);
+  overflow-y: auto;
+}
+
+.c11 .tab-content .tab-pane {
+  position: relative;
+}
+
 .c12 {
   background-color: white;
   font-size: 1.4rem;
@@ -314,7 +342,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 
 .c12 .nav-item {
   min-width: 5rem;
-  padding: 0.1rem 0.6rem;
+  padding: 0.1rem 1.2rem;
 }
 
 .c12 .nav-item:hover {
@@ -328,34 +356,23 @@ exports[`DispositionView component > renders as expected 1`] = `
   border-color: transparent;
 }
 
-.c0 {
-  width: 100%;
-  position: relative;
-  overflow: auto;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c1 {
-  height: 100%;
-  width: 100%;
-}
-
-.c11 {
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
   height: 100%;
-}
-
-.c11 .tab-content {
-  border-radius: 0 0.4rem 0.4rem 0.4rem;
-  height: calc(100% - 2.5rem);
   overflow-y: auto;
 }
 
-.c11 .tab-content .tab-pane {
-  position: relative;
-}
-
 .c13 {
   padding-top: 1rem;
 }
@@ -371,8 +388,8 @@ exports[`DispositionView component > renders as expected 1`] = `
 }
 
 .c15 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -455,25 +472,6 @@ exports[`DispositionView component > renders as expected 1`] = `
   line-height: 2.2rem;
 }
 
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-}
-
 <div
     class="c0"
   >
diff --git a/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
index fe1289f5a2..de86bb15cd 100644
--- a/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -227,19 +227,20 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 }
 
 .c9 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c9 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c9 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c10.c10.form-control.is-valid {
@@ -272,39 +273,13 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
   font-size: 1.4rem;
 }
 
-.c13 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c13 .nav-tabs {
-  height: auto;
-}
-
-.c13 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c13 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c13 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c14 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c0 {
@@ -321,6 +296,23 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
   width: 100%;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
+}
+
 .c5 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
@@ -328,8 +320,8 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 }
 
 .c4 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -385,6 +377,32 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
   position: relative;
 }
 
+.c13 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c13 .nav-tabs {
+  height: auto;
+}
+
+.c13 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c13 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c13 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c12 {
   height: auto;
 }
@@ -428,25 +446,6 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
   max-width: 25rem;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-}
-
 <div
     class="c0"
   >
@@ -528,17 +527,17 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
                         />
                       </div>
                       <div
-                        class="rbt-aux"
+                        class="rbt-aux pr-3"
                       >
                         <svg
                           color="#bcbec5"
                           fill="currentColor"
-                          height="2.5rem"
+                          height="1.6rem"
                           stroke="currentColor"
                           stroke-width="0"
                           style="color: rgb(188, 190, 197);"
                           viewBox="0 0 512 512"
-                          width="2.5rem"
+                          width="1.6rem"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
diff --git a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
index 7ace473dd8..cdfbd014fb 100644
--- a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
@@ -168,44 +168,18 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
   font-size: 1.4rem;
 }
 
-.c2 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c2 .nav-tabs {
-  height: auto;
-}
-
-.c2 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c2 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c2 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c4 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -261,6 +235,32 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
   position: relative;
 }
 
+.c2 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c2 .nav-tabs {
+  height: auto;
+}
+
+.c2 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c2 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c2 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c1 {
   height: auto;
 }
@@ -953,8 +953,8 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap
index daa8bd2a85..1dc4af6995 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap
@@ -6,7 +6,21 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c1 {
+  .c0 {
+  height: 100%;
+}
+
+.c0 .tab-content {
+  border-radius: 0 0.4rem 0.4rem 0.4rem;
+  height: calc(100% - 2.5rem);
+  overflow-y: auto;
+}
+
+.c0 .tab-content .tab-pane {
+  position: relative;
+}
+
+.c1 {
   background-color: white;
   font-size: 1.4rem;
   border-color: transparent;
@@ -18,7 +32,7 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
 
 .c1 .nav-item {
   min-width: 5rem;
-  padding: 0.1rem 0.6rem;
+  padding: 0.1rem 1.2rem;
 }
 
 .c1 .nav-item:hover {
@@ -32,20 +46,6 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
   border-color: transparent;
 }
 
-.c0 {
-  height: 100%;
-}
-
-.c0 .tab-content {
-  border-radius: 0 0.4rem 0.4rem 0.4rem;
-  height: calc(100% - 2.5rem);
-  overflow-y: auto;
-}
-
-.c0 .tab-content .tab-pane {
-  position: relative;
-}
-
 .c2 {
   padding-top: 1rem;
 }
@@ -61,8 +61,8 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
 }
 
 .c4 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap
index 9be515add0..0ffc97abf1 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap
@@ -21,8 +21,8 @@ exports[`DispositionSummaryView component > matches snapshot 1`] = `
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/__snapshots__/UpdateDispositionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/__snapshots__/UpdateDispositionForm.test.tsx.snap
index ff8cdff63f..3ab4902c3c 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/__snapshots__/UpdateDispositionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/__snapshots__/UpdateDispositionForm.test.tsx.snap
@@ -146,19 +146,20 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 }
 
 .c6 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c6 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c6 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c7.c7.form-control.is-valid {
@@ -210,8 +211,8 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -229,12 +230,15 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 }
 
 .c8 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: default;
 }
 
 .c8.is-invalid {
@@ -244,7 +248,11 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 .c10.c10.btn {
   position: absolute;
   top: calc(50% - 1.4rem);
-  right: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-right: 1.2rem;
+  height: 1.6rem;
+  right: 0rem;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/__snapshots__/OffersAndSaleView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/__snapshots__/OffersAndSaleView.test.tsx.snap
index 81b706a32d..db2f1d116b 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/__snapshots__/OffersAndSaleView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/__snapshots__/OffersAndSaleView.test.tsx.snap
@@ -13,8 +13,8 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -92,8 +92,8 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -182,8 +182,8 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/__snapshots__/DispositionSaleForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/__snapshots__/DispositionSaleForm.test.tsx.snap
index dd1fcb49ac..96c1c69c9f 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/__snapshots__/DispositionSaleForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/__snapshots__/DispositionSaleForm.test.tsx.snap
@@ -141,65 +141,48 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c7 .react-datepicker__calendar-icon {
-  width: 3rem;
+.c6 .react-datepicker__calendar-icon {
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
-.c7 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+.c6 .react-datepicker__view-calendar-icon input {
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
-.c7 .react-datepicker-wrapper {
-  max-width: 16rem;
+.c6 .react-datepicker-wrapper {
+  max-width: 17rem;
 }
 
-.c8.c8.form-control.is-valid {
+.c7.c7.form-control.is-valid {
   background-image: none;
 }
 
-.c8.c8.form-control.is-invalid {
+.c7.c7.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
 .c5 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c5.is-invalid {
   border: solid 0.1rem;
 }
 
-.c6.c6.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c6.c6.btn .text {
-  display: none;
-}
-
-.c6.c6.btn:hover,
-.c6.c6.btn:active,
-.c6.c6.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
-.c9 .react-datepicker__calendar-icon {
+.c8 .react-datepicker__calendar-icon {
   width: 3rem;
   height: 3rem;
   margin-top: 0.5rem;
@@ -207,28 +190,28 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
   pointer-events: none;
 }
 
-.c9 .react-datepicker__view-calendar-icon input {
+.c8 .react-datepicker__view-calendar-icon input {
   padding: 0.6rem 1rem 0.5rem 0.6rem;
 }
 
-.c9 .react-datepicker-wrapper {
+.c8 .react-datepicker-wrapper {
   max-width: 16rem;
 }
 
-.c9 .react-datepicker-year-header {
+.c8 .react-datepicker-year-header {
   font-size: 1.6rem;
   padding: 0.55rem 0;
 }
 
-.c9 .react-datepicker__navigation {
+.c8 .react-datepicker__navigation {
   top: 0.39rem;
 }
 
-.c10.c10.form-control.is-valid {
+.c9.c9.form-control.is-valid {
   background-image: none;
 }
 
-.c10.c10.form-control.is-invalid {
+.c9.c9.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
@@ -239,8 +222,8 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -332,33 +315,6 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
                   class="c5"
                 >
                   Select from contacts
-                  <button
-                    class="c4 Button c6 btn btn-link"
-                    title="remove"
-                    type="button"
-                  >
-                    <div
-                      class="Button__value"
-                    >
-                      <svg
-                        fill="currentColor"
-                        height="2rem"
-                        stroke="currentColor"
-                        stroke-width="0"
-                        viewBox="0 0 24 24"
-                        width="2rem"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
-                        <path
-                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                        />
-                      </svg>
-                    </div>
-                  </button>
                 </div>
                 <div
                   class="d-none input form-group"
@@ -432,33 +388,6 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
                   class="c5"
                 >
                   Select from contacts
-                  <button
-                    class="c4 Button c6 btn btn-link"
-                    title="remove"
-                    type="button"
-                  >
-                    <div
-                      class="Button__value"
-                    >
-                      <svg
-                        fill="currentColor"
-                        height="2rem"
-                        stroke="currentColor"
-                        stroke-width="0"
-                        viewBox="0 0 24 24"
-                        width="2rem"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
-                        <path
-                          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                        />
-                      </svg>
-                    </div>
-                  </button>
                 </div>
                 <div
                   class="d-none input form-group"
@@ -544,7 +473,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
           class="c3 text-left col-5"
         >
           <div
-            class="c7 form-group"
+            class="c6 form-group"
           >
             <div
               class="react-datepicker-wrapper d-block"
@@ -563,7 +492,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
                 </svg>
                 <input
                   autocomplete="off"
-                  class="c8 form-control date-picker"
+                  class="c7 form-control date-picker"
                   id="datepicker-finalConditionRemovalDate"
                   name="finalConditionRemovalDate"
                   placeholder="MMM DD, YYYY"
@@ -591,7 +520,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
           class="c3 text-left col-5"
         >
           <div
-            class="c7 form-group"
+            class="c6 form-group"
           >
             <div
               class="react-datepicker-wrapper d-block"
@@ -610,7 +539,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
                 </svg>
                 <input
                   autocomplete="off"
-                  class="c8 form-control date-picker"
+                  class="c7 form-control date-picker"
                   id="datepicker-saleCompletionDate"
                   name="saleCompletionDate"
                   placeholder="MMM DD, YYYY"
@@ -638,7 +567,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
           class="c3 text-left col-5"
         >
           <div
-            class="c9 form-group"
+            class="c8 form-group"
           >
             <div
               class="react-datepicker-wrapper d-block"
@@ -656,7 +585,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
                   />
                 </svg>
                 <input
-                  class="c10 form-control"
+                  class="c9 form-control"
                   id="datepicker-saleFiscalYear"
                   name="saleFiscalYear"
                   placeholder="YYYY"
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/__snapshots__/UpdateDispositionSaleView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/__snapshots__/UpdateDispositionSaleView.test.tsx.snap
index a9b5276c0b..ea613db13d 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/__snapshots__/UpdateDispositionSaleView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/__snapshots__/UpdateDispositionSaleView.test.tsx.snap
@@ -141,31 +141,32 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c8 .react-datepicker__calendar-icon {
-  width: 3rem;
+.c7 .react-datepicker__calendar-icon {
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
-.c8 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+.c7 .react-datepicker__view-calendar-icon input {
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
-.c8 .react-datepicker-wrapper {
-  max-width: 16rem;
+.c7 .react-datepicker-wrapper {
+  max-width: 17rem;
 }
 
-.c9.c9.form-control.is-valid {
+.c8.c8.form-control.is-valid {
   background-image: none;
 }
 
-.c9.c9.form-control.is-invalid {
+.c8.c8.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
-.c13 {
+.c12 {
   position: -webkit-sticky;
   position: sticky;
   padding-top: 2rem;
@@ -174,41 +175,40 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   z-index: 10;
 }
 
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
+}
+
 .c6 {
-  background: none;
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
+  background-image: none;
   border: solid 0.1rem;
+  cursor: pointer;
 }
 
 .c6.is-invalid {
   border: solid 0.1rem;
 }
 
-.c7.c7.btn {
-  position: absolute;
-  top: calc(50% - 1.4rem);
-  right: 0.4rem;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: unset;
-}
-
-.c7.c7.btn .text {
-  display: none;
-}
-
-.c7.c7.btn:hover,
-.c7.c7.btn:active,
-.c7.c7.btn:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  opacity: unset;
-}
-
-.c10 .react-datepicker__calendar-icon {
+.c9 .react-datepicker__calendar-icon {
   width: 3rem;
   height: 3rem;
   margin-top: 0.5rem;
@@ -216,28 +216,28 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   pointer-events: none;
 }
 
-.c10 .react-datepicker__view-calendar-icon input {
+.c9 .react-datepicker__view-calendar-icon input {
   padding: 0.6rem 1rem 0.5rem 0.6rem;
 }
 
-.c10 .react-datepicker-wrapper {
+.c9 .react-datepicker-wrapper {
   max-width: 16rem;
 }
 
-.c10 .react-datepicker-year-header {
+.c9 .react-datepicker-year-header {
   font-size: 1.6rem;
   padding: 0.55rem 0;
 }
 
-.c10 .react-datepicker__navigation {
+.c9 .react-datepicker__navigation {
   top: 0.39rem;
 }
 
-.c11.c11.form-control.is-valid {
+.c10.c10.form-control.is-valid {
   background-image: none;
 }
 
-.c11.c11.form-control.is-invalid {
+.c10.c10.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
@@ -248,8 +248,8 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -266,25 +266,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   font-weight: bold;
 }
 
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 1rem;
-}
-
-.c12 {
+.c11 {
   margin-right: 1rem;
   padding-bottom: 1rem;
   z-index: 0;
@@ -371,33 +353,6 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                       class="c6"
                     >
                       Select from contacts
-                      <button
-                        class="c5 Button c7 btn btn-link"
-                        title="remove"
-                        type="button"
-                      >
-                        <div
-                          class="Button__value"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="2rem"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            viewBox="0 0 24 24"
-                            width="2rem"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M0 0h24v24H0z"
-                              fill="none"
-                            />
-                            <path
-                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                            />
-                          </svg>
-                        </div>
-                      </button>
                     </div>
                     <div
                       class="d-none input form-group"
@@ -471,33 +426,6 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                       class="c6"
                     >
                       Select from contacts
-                      <button
-                        class="c5 Button c7 btn btn-link"
-                        title="remove"
-                        type="button"
-                      >
-                        <div
-                          class="Button__value"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="2rem"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            viewBox="0 0 24 24"
-                            width="2rem"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M0 0h24v24H0z"
-                              fill="none"
-                            />
-                            <path
-                              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                            />
-                          </svg>
-                        </div>
-                      </button>
                     </div>
                     <div
                       class="d-none input form-group"
@@ -583,7 +511,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="c4 text-left col-5"
             >
               <div
-                class="c8 form-group"
+                class="c7 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -602,7 +530,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c9 form-control date-picker"
+                      class="c8 form-control date-picker"
                       id="datepicker-finalConditionRemovalDate"
                       name="finalConditionRemovalDate"
                       placeholder="MMM DD, YYYY"
@@ -630,7 +558,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="c4 text-left col-5"
             >
               <div
-                class="c8 form-group"
+                class="c7 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -649,7 +577,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c9 form-control date-picker"
+                      class="c8 form-control date-picker"
                       id="datepicker-saleCompletionDate"
                       name="saleCompletionDate"
                       placeholder="MMM DD, YYYY"
@@ -677,7 +605,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="c4 text-left col-5"
             >
               <div
-                class="c10 form-group"
+                class="c9 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -695,7 +623,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                       />
                     </svg>
                     <input
-                      class="c11 form-control"
+                      class="c10 form-control"
                       id="datepicker-saleFiscalYear"
                       name="saleFiscalYear"
                       placeholder="YYYY"
@@ -1118,10 +1046,10 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
       </div>
     </div>
     <div
-      class="c12"
+      class="c11"
     >
       <div
-        class="c13 justify-content-end mb-12 mt-12 p-0 no-gutters row"
+        class="c12 justify-content-end mb-12 mt-12 p-0 no-gutters row"
       >
         <div
           class="pr-3 col-auto"
diff --git a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
index a1f34e964c..09d51b3e61 100644
--- a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -281,33 +281,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
       </div>
     </div>
   </div>
-  .c4 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c4 .nav-tabs {
-  height: auto;
-}
-
-.c4 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c4 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c4 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
-.c0 {
+  .c0 {
   width: 100%;
   position: relative;
   overflow: auto;
@@ -321,20 +295,6 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   width: 100%;
 }
 
-.c3 {
-  height: 100%;
-}
-
-.c3 .tab-content {
-  border-radius: 0 0.4rem 0.4rem 0.4rem;
-  height: calc(100% - 2.5rem);
-  overflow-y: auto;
-}
-
-.c3 .tab-content .tab-pane {
-  position: relative;
-}
-
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -350,8 +310,46 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   text-align: left;
   height: 100%;
   overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
+}
+
+.c3 {
+  height: 100%;
+}
+
+.c3 .tab-content {
+  border-radius: 0 0.4rem 0.4rem 0.4rem;
+  height: calc(100% - 2.5rem);
+  overflow-y: auto;
+}
+
+.c3 .tab-content .tab-pane {
+  position: relative;
+}
+
+.c4 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c4 .nav-tabs {
+  height: auto;
+}
+
+.c4 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c4 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c4 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
 }
 
 <div
diff --git a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
index d0f1574cfd..177cd86fb9 100644
--- a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -240,8 +240,8 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
index 9d9ee2e05a..b631893276 100644
--- a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
@@ -152,8 +152,8 @@ exports[`AddProjectForm component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -773,19 +773,20 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 }
 
 .c9 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c9 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c9 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c10.c10.form-control.is-valid {
@@ -841,8 +842,8 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap
index 524ca87c00..a0979c0bb0 100644
--- a/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap
@@ -6,7 +6,21 @@ exports[`Project Tabs component > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c1 {
+  .c0 {
+  height: 100%;
+}
+
+.c0 .tab-content {
+  border-radius: 0 0.4rem 0.4rem 0.4rem;
+  height: calc(100% - 2.5rem);
+  overflow-y: auto;
+}
+
+.c0 .tab-content .tab-pane {
+  position: relative;
+}
+
+.c1 {
   background-color: white;
   font-size: 1.4rem;
   border-color: transparent;
@@ -18,7 +32,7 @@ exports[`Project Tabs component > matches snapshot 1`] = `
 
 .c1 .nav-item {
   min-width: 5rem;
-  padding: 0.1rem 0.6rem;
+  padding: 0.1rem 1.2rem;
 }
 
 .c1 .nav-item:hover {
@@ -32,20 +46,6 @@ exports[`Project Tabs component > matches snapshot 1`] = `
   border-color: transparent;
 }
 
-.c0 {
-  height: 100%;
-}
-
-.c0 .tab-content {
-  border-radius: 0 0.4rem 0.4rem 0.4rem;
-  height: calc(100% - 2.5rem);
-  overflow-y: auto;
-}
-
-.c0 .tab-content .tab-pane {
-  position: relative;
-}
-
 <div
     class="c0"
   >
diff --git a/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/__snapshots__/ProjectSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/__snapshots__/ProjectSummaryView.test.tsx.snap
index 05b73aea50..b7fc629655 100644
--- a/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/__snapshots__/ProjectSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/__snapshots__/ProjectSummaryView.test.tsx.snap
@@ -26,8 +26,8 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/PropertyAssociationTabView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/PropertyAssociationTabView.test.tsx.snap
index 1df6d98d48..935424f245 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/PropertyAssociationTabView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/PropertyAssociationTabView.test.tsx.snap
@@ -22,8 +22,8 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap
index ab6c8d8f93..616a54e712 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap
@@ -24,8 +24,8 @@ exports[`Operation section view > matches snapshot 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -443,8 +443,8 @@ exports[`Operation section view > matches snapshot 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsContainer.test.tsx.snap
index 738f7d09a2..9bc8575de7 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsContainer.test.tsx.snap
@@ -190,6 +190,23 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
+}
+
 .c12.form-group {
   display: -webkit-box;
   display: -webkit-flex;
@@ -245,8 +262,8 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -292,25 +309,6 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   text-align: left;
 }
 
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-}
-
 <div
     class="c0"
   >
@@ -1056,7 +1054,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                   >
                     <div
                       class="search-wrapper searchWrapper "
-                      style="background: white; border: 1px solid #606060;"
+                      style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                     >
                       <span
                         class="chip  false false"
@@ -1231,7 +1229,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                   >
                     <div
                       class="search-wrapper searchWrapper "
-                      style="background: white; border: 1px solid #606060;"
+                      style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                     >
                       <span
                         class="chip  false false"
@@ -1492,7 +1490,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                   >
                     <div
                       class="search-wrapper searchWrapper "
-                      style="background: white; border: 1px solid #606060;"
+                      style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                     >
                       <span
                         class="chip  false false"
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsForm.test.tsx.snap
index 84ae7436f6..2faa68fbbe 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsForm.test.tsx.snap
@@ -245,8 +245,8 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -1034,7 +1034,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                 >
                   <div
                     class="search-wrapper searchWrapper "
-                    style="background: white; border: 1px solid #606060;"
+                    style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                   >
                     <span
                       class="chip  false false"
@@ -1209,7 +1209,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                 >
                   <div
                     class="search-wrapper searchWrapper "
-                    style="background: white; border: 1px solid #606060;"
+                    style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                   >
                     <span
                       class="chip  false false"
@@ -1470,7 +1470,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                 >
                   <div
                     class="search-wrapper searchWrapper "
-                    style="background: white; border: 1px solid #606060;"
+                    style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                   >
                     <span
                       class="chip  false false"
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
index 65b266d8f0..200111aa92 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
@@ -153,8 +153,8 @@ exports[`Activities list view > renders as expected 1`] = `
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
index e57ca02e28..1b04ca709e 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
@@ -215,8 +215,8 @@ exports[`PropertyContactListView component > renders as expected when provided v
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap
index ad5e525740..9536adbe3f 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap
@@ -22,8 +22,8 @@ exports[`PropertyManagementDetailView component > renders as expected when provi
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/__snapshots__/PropertyContactEditForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/__snapshots__/PropertyContactEditForm.test.tsx.snap
index c8e9502113..dbe5798119 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/__snapshots__/PropertyContactEditForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/__snapshots__/PropertyContactEditForm.test.tsx.snap
@@ -17,8 +17,8 @@ exports[`PropertyContactEditForm component > renders as expected when provided v
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -50,8 +50,6 @@ exports[`PropertyContactEditForm component > renders as expected when provided v
   text-align: left;
   height: 100%;
   overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
 }
 
 <div
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/__snapshots__/PropertyManagementUpdateForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/__snapshots__/PropertyManagementUpdateForm.test.tsx.snap
index 443c698517..0e79a038dd 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/__snapshots__/PropertyManagementUpdateForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/__snapshots__/PropertyManagementUpdateForm.test.tsx.snap
@@ -17,8 +17,8 @@ exports[`PropertyManagementUpdateForm component > renders as expected 1`] = `
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -50,8 +50,6 @@ exports[`PropertyManagementUpdateForm component > renders as expected 1`] = `
   text-align: left;
   height: 100%;
   overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
 }
 
 <div
@@ -105,7 +103,7 @@ exports[`PropertyManagementUpdateForm component > renders as expected 1`] = `
                   >
                     <div
                       class="search-wrapper searchWrapper "
-                      style="background: white; border: 1px solid #606060;"
+                      style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                     >
                       <input
                         autocomplete="off"
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/__snapshots__/PropertyResearchTabView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/__snapshots__/PropertyResearchTabView.test.tsx.snap
index 8b7f19f7ce..8b712c8678 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/__snapshots__/PropertyResearchTabView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/__snapshots__/PropertyResearchTabView.test.tsx.snap
@@ -13,8 +13,8 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/__snapshots__/UpdatePropertyForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/__snapshots__/UpdatePropertyForm.test.tsx.snap
index aac2284805..45aaf2dfd0 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/__snapshots__/UpdatePropertyForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/__snapshots__/UpdatePropertyForm.test.tsx.snap
@@ -17,8 +17,8 @@ exports[`UpdatePropertyForm component > renders as expected when provided no res
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/__snapshots__/TakesDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/__snapshots__/TakesDetailView.test.tsx.snap
index 09621d57ab..9fdb7062d3 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/__snapshots__/TakesDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/__snapshots__/TakesDetailView.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c0 {
@@ -20,8 +20,8 @@ exports[`TakesDetailView component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/takes/update/__snapshots__/TakeUpdateForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/takes/update/__snapshots__/TakeUpdateForm.test.tsx.snap
index 0940a127a5..be6cf4bcd4 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/takes/update/__snapshots__/TakeUpdateForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/takes/update/__snapshots__/TakeUpdateForm.test.tsx.snap
@@ -7,19 +7,20 @@ exports[`TakeUpdateForm component > renders as expected 1`] = `
   />
   <div />
   .c6 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c6 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c6 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c7.c7.form-control.is-valid {
@@ -104,8 +105,8 @@ exports[`TakeUpdateForm component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
index 945248f048..2c78f5999f 100644
--- a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
@@ -11,39 +11,30 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c22 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c22 .nav-tabs {
-  height: auto;
-}
-
-.c22 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c22 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c22 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c0 {
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
+}
+
+.c20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
 }
 
 .c12 {
@@ -104,6 +95,32 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   position: relative;
 }
 
+.c22 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c22 .nav-tabs {
+  height: auto;
+}
+
+.c22 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c22 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c22 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c23 {
   padding-top: 1rem;
 }
@@ -119,8 +136,8 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 }
 
 .c25 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -246,25 +263,6 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   line-height: 2.2rem;
 }
 
-.c20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-}
-
 <body>
   <div>
     <div
@@ -490,24 +488,6 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                 </span>
               </div>
             </div>
-            <div
-              class="justify-content-end row"
-            >
-              <div
-                class="pr-0 text-left col-auto"
-              >
-                <strong>
-                  <label>
-                    Status:
-                  </label>
-                </strong>
-              </div>
-              <div
-                class="pl-1 text-left col-auto"
-              >
-                Active
-              </div>
-            </div>
             <div
               class="c7 no-gutters justify-content-end align-items-end row"
             >
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
index df0bd5d9d8..a33c939d4d 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c2 {
@@ -244,39 +244,13 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
   font-size: 1.4rem;
 }
 
-.c15 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c15 .nav-tabs {
-  height: auto;
-}
-
-.c15 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c15 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c15 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c16 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c0 {
@@ -293,6 +267,23 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
   width: 100%;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+  height: 100%;
+  overflow-y: auto;
+}
+
 .c11 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
@@ -300,8 +291,8 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 }
 
 .c4 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -395,6 +386,32 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
   position: relative;
 }
 
+.c15 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c15 .nav-tabs {
+  height: auto;
+}
+
+.c15 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c15 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c15 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c14 {
   height: auto;
 }
@@ -434,25 +451,6 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
   padding-bottom: 0.5rem;
 }
 
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: left;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-}
-
 <div
     class="c0"
   >
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
index 8f2886c216..6f2086c5da 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
@@ -163,39 +163,13 @@ exports[`AddResearchForm component > renders as expected 1`] = `
   font-size: 1.4rem;
 }
 
-.c12 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c12 .nav-tabs {
-  height: auto;
-}
-
-.c12 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c12 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c12 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c13 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c8 {
@@ -205,8 +179,8 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -300,6 +274,32 @@ exports[`AddResearchForm component > renders as expected 1`] = `
   position: relative;
 }
 
+.c12 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c12 .nav-tabs {
+  height: auto;
+}
+
+.c12 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c12 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c12 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c11 {
   height: auto;
 }
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
index edb9d8736f..1f30345438 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
@@ -215,39 +215,13 @@ exports[`ResearchProperties component > renders as expected when provided no pro
   font-size: 1.4rem;
 }
 
-.c4 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c4 .nav-tabs {
-  height: auto;
-}
-
-.c4 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c4 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c4 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c5 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c1 {
@@ -257,8 +231,8 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 }
 
 .c0 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -314,6 +288,32 @@ exports[`ResearchProperties component > renders as expected when provided no pro
   position: relative;
 }
 
+.c4 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c4 .nav-tabs {
+  height: auto;
+}
+
+.c4 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c4 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c4 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c3 {
   height: auto;
 }
diff --git a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap
index 4778a97adc..aeb59cbdde 100644
--- a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap
@@ -175,22 +175,6 @@ exports[`ResearchHeader component > renders as expected when provided no researc
             </span>
           </div>
         </div>
-        <div
-          class="justify-content-end row"
-        >
-          <div
-            class="pr-0 text-left col-auto"
-          >
-            <strong>
-              <label>
-                Status:
-              </label>
-            </strong>
-          </div>
-          <div
-            class="pl-1 text-left col-auto"
-          />
-        </div>
       </div>
     </div>
   </div>
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap
index 9f39df79c2..e644e039a9 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap
@@ -21,13 +21,27 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
 }
 
 .c4 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
 }
 
+.c0 {
+  height: 100%;
+}
+
+.c0 .tab-content {
+  border-radius: 0 0.4rem 0.4rem 0.4rem;
+  height: calc(100% - 2.5rem);
+  overflow-y: auto;
+}
+
+.c0 .tab-content .tab-pane {
+  position: relative;
+}
+
 .c1 {
   background-color: white;
   font-size: 1.4rem;
@@ -40,7 +54,7 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
 
 .c1 .nav-item {
   min-width: 5rem;
-  padding: 0.1rem 0.6rem;
+  padding: 0.1rem 1.2rem;
 }
 
 .c1 .nav-item:hover {
@@ -54,20 +68,6 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
   border-color: transparent;
 }
 
-.c0 {
-  height: 100%;
-}
-
-.c0 .tab-content {
-  border-radius: 0 0.4rem 0.4rem 0.4rem;
-  height: calc(100% - 2.5rem);
-  overflow-y: auto;
-}
-
-.c0 .tab-content .tab-pane {
-  position: relative;
-}
-
 .c7.required::before {
   content: '*';
   position: absolute;
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/__snapshots__/ResearchSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/__snapshots__/ResearchSummaryView.test.tsx.snap
index d3592d9f9d..be0fdc0124 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/__snapshots__/ResearchSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/__snapshots__/ResearchSummaryView.test.tsx.snap
@@ -21,8 +21,8 @@ exports[`ResearchSummaryView component > renders as expected when research file
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/__snapshots__/UpdateSummaryForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/__snapshots__/UpdateSummaryForm.test.tsx.snap
index 7dcaa97122..a0be5e7d95 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/__snapshots__/UpdateSummaryForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/__snapshots__/UpdateSummaryForm.test.tsx.snap
@@ -142,19 +142,20 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 }
 
 .c11 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c11 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c11 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c13.c13.form-control.is-valid {
@@ -194,12 +195,14 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 
 .c14 {
   position: relative;
-  border-radius: 0.3rem;
-  padding: 0.6rem;
-  padding-right: 2.1rem;
-  min-height: 2.5em;
+  border-radius: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-left: 1.2rem;
+  padding-right: 2.8rem;
   background-image: none;
   border: solid 0.1rem;
+  cursor: default;
 }
 
 .c14.is-invalid {
@@ -209,7 +212,11 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 .c15.c15.btn {
   position: absolute;
   top: calc(50% - 1.4rem);
-  right: 0.4rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  padding-right: 1.2rem;
+  height: 1.6rem;
+  right: 0rem;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -286,8 +293,8 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -688,7 +695,7 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
               >
                 <div
                   class="search-wrapper searchWrapper "
-                  style="background: white; border: 1px solid #606060;"
+                  style="background: white; border: 1px solid #606060; padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 1.2rem;"
                 >
                   <input
                     autocomplete="off"
diff --git a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap
index 89add14af3..f9ff3dfbee 100644
--- a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap
@@ -26,8 +26,8 @@ exports[`ChecklistView component > renders as expected 1`] = `
 }
 
 .c2 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/update/__snapshots__/UpdateChecklistForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/update/__snapshots__/UpdateChecklistForm.test.tsx.snap
index de8cba6ab4..bc50168423 100644
--- a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/update/__snapshots__/UpdateChecklistForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/update/__snapshots__/UpdateChecklistForm.test.tsx.snap
@@ -17,8 +17,8 @@ exports[`UpdateChecklist form > renders as expected 1`] = `
 }
 
 .c1 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
diff --git a/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
index b0915dd79c..64db63b93c 100644
--- a/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
@@ -210,48 +210,22 @@ exports[`UpdateProperties component > renders as expected 1`] = `
   font-size: 1.4rem;
 }
 
-.c6 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c6 .nav-tabs {
-  height: auto;
-}
-
-.c6 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c6 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c6 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
 .c0 {
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c8 {
   font-family: 'BCSans-Bold';
-  font-size: 2rem;
+  font-size: 2.2rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c19 {
@@ -261,8 +235,8 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 }
 
 .c7 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -318,6 +292,32 @@ exports[`UpdateProperties component > renders as expected 1`] = `
   position: relative;
 }
 
+.c6 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c6 .nav-tabs {
+  height: auto;
+}
+
+.c6 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c6 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c6 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c5 {
   height: auto;
 }
diff --git a/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap
index ded83dce5e..99c1bff05b 100644
--- a/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
   border-bottom: solid 0.5rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c3 {
@@ -96,39 +96,13 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
       class="c3"
     />
   </div>
-  .c7 {
-  background-color: white;
-  font-size: 1.4rem;
-  border-color: transparent;
-}
-
-.c7 .nav-tabs {
-  height: auto;
-}
-
-.c7 .nav-item {
-  min-width: 5rem;
-  padding: 0.1rem 0.6rem;
-}
-
-.c7 .nav-item:hover {
-  border-color: transparent;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c7 .nav-item.active {
-  font-family: 'BCSans-Bold';
-  border-color: transparent;
-}
-
-.c4 {
+  .c4 {
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
   border-bottom: solid 0.2rem;
   width: 100%;
   text-align: left;
-  margin-bottom: 2rem;
+  margin-bottom: 2.4rem;
 }
 
 .c9 {
@@ -138,8 +112,8 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -165,6 +139,32 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
   position: relative;
 }
 
+.c7 {
+  background-color: white;
+  font-size: 1.4rem;
+  border-color: transparent;
+}
+
+.c7 .nav-tabs {
+  height: auto;
+}
+
+.c7 .nav-item {
+  min-width: 5rem;
+  padding: 0.1rem 1.2rem;
+}
+
+.c7 .nav-item:hover {
+  border-color: transparent;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c7 .nav-item.active {
+  font-family: 'BCSans-Bold';
+  border-color: transparent;
+}
+
 .c6 {
   height: auto;
 }
diff --git a/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap b/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
index e539a682e8..5f4f3a6be9 100644
--- a/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
+++ b/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
@@ -233,7 +233,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
       <div
         class="tr"
         role="row"
-        style="display: flex; flex: 1 0 auto; min-width: 112px;"
+        style="display: flex; flex: 1 0 auto; min-width: 118px;"
       >
         <div
           class="th"
@@ -297,7 +297,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           class="th"
           colspan="1"
           role="columnheader"
-          style="box-sizing: border-box; flex: 28 0 auto; min-width: 28px; width: 28px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+          style="box-sizing: border-box; flex: 34 0 auto; min-width: 34px; width: 34px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
         >
           <div
             class="sortable-column"
@@ -363,7 +363,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
         <div
           class="tr"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 112px;"
+          style="display: flex; flex: 1 0 auto; min-width: 118px;"
         >
           <div
             class="td"
@@ -384,7 +384,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 28 0 auto; min-width: 28px; width: 28px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 34 0 auto; min-width: 34px; width: 34px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             test user1
@@ -431,7 +431,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
         <div
           class="tr"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 112px;"
+          style="display: flex; flex: 1 0 auto; min-width: 118px;"
         >
           <div
             class="td"
@@ -452,7 +452,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 28 0 auto; min-width: 28px; width: 28px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 34 0 auto; min-width: 34px; width: 34px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             test user2
@@ -499,7 +499,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
         <div
           class="tr"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 112px;"
+          style="display: flex; flex: 1 0 auto; min-width: 118px;"
         >
           <div
             class="td"
@@ -520,7 +520,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 28 0 auto; min-width: 28px; width: 28px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 34 0 auto; min-width: 34px; width: 34px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             test user4
@@ -567,7 +567,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
         <div
           class="tr"
           role="row"
-          style="display: flex; flex: 1 0 auto; min-width: 112px;"
+          style="display: flex; flex: 1 0 auto; min-width: 118px;"
         >
           <div
             class="td"
@@ -588,7 +588,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 28 0 auto; min-width: 28px; width: 28px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 34 0 auto; min-width: 34px; width: 34px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
             test user2
diff --git a/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap b/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
index 774d0eb0f1..fb39497b4d 100644
--- a/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
+++ b/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
@@ -18,8 +18,8 @@ exports[`Note List View > renders as expected 1`] = `
 }
 
 .c3 {
-  margin: 1.5rem;
-  padding: 1.5rem;
+  margin: 1.6rem;
+  padding: 1.6rem;
   background-color: white;
   text-align: left;
   border-radius: 0.5rem;
@@ -178,7 +178,7 @@ exports[`Note List View > renders as expected 1`] = `
               <div
                 class="tr"
                 role="row"
-                style="display: flex; flex: 1 0 auto; min-width: 112px;"
+                style="display: flex; flex: 1 0 auto; min-width: 118px;"
               >
                 <div
                   class="th"
@@ -227,7 +227,7 @@ exports[`Note List View > renders as expected 1`] = `
                   class="th"
                   colspan="1"
                   role="columnheader"
-                  style="box-sizing: border-box; flex: 28 0 auto; min-width: 28px; width: 28px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
+                  style="box-sizing: border-box; flex: 34 0 auto; min-width: 34px; width: 34px; justify-content: center; text-align: center; flex-wrap: wrap; align-items: center; display: flex;"
                 >
                   <div
                     class="sortable-column"
diff --git a/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap b/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap
index 4b20f2b911..25ccdfcbb9 100644
--- a/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap
+++ b/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap
@@ -338,8 +338,7 @@ exports[`MapContainer > Renders the map 1`] = `
   flex-flow: column;
   min-width: 93rem;
   margin-left: -93rem;
-  padding: 1.4rem 1.6rem;
-  padding-bottom: 0rem;
+  padding: 1.6rem;
   overflow: hidden;
   -webkit-transition: 1s;
   transition: 1s;
diff --git a/source/frontend/src/features/research/list/ResearchFilter/__snapshots__/ResearchFilter.test.tsx.snap b/source/frontend/src/features/research/list/ResearchFilter/__snapshots__/ResearchFilter.test.tsx.snap
index 36ab98d8aa..ed64a4f8e5 100644
--- a/source/frontend/src/features/research/list/ResearchFilter/__snapshots__/ResearchFilter.test.tsx.snap
+++ b/source/frontend/src/features/research/list/ResearchFilter/__snapshots__/ResearchFilter.test.tsx.snap
@@ -142,19 +142,20 @@ exports[`Research Filter > matches snapshot 1`] = `
 }
 
 .c4 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c4 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c4 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c6.c6.form-control.is-valid {
diff --git a/source/frontend/src/features/research/list/__snapshots__/ResearchListView.test.tsx.snap b/source/frontend/src/features/research/list/__snapshots__/ResearchListView.test.tsx.snap
index ece66a8fd9..b91ad7e330 100644
--- a/source/frontend/src/features/research/list/__snapshots__/ResearchListView.test.tsx.snap
+++ b/source/frontend/src/features/research/list/__snapshots__/ResearchListView.test.tsx.snap
@@ -142,19 +142,20 @@ exports[`Research List View > matches snapshot 1`] = `
 }
 
 .c9 .react-datepicker__calendar-icon {
-  width: 3rem;
+  width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
+  margin-right: 1.2rem;
   right: 0;
   pointer-events: none;
 }
 
 .c9 .react-datepicker__view-calendar-icon input {
-  padding: 0.6rem 1rem 0.5rem 0.6rem;
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
 .c9 .react-datepicker-wrapper {
-  max-width: 16rem;
+  max-width: 17rem;
 }
 
 .c11.c11.form-control.is-valid {

From 30e6e8c89d32eda9fa229a0db86d7304f92ed6e3 Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Wed, 22 May 2024 12:24:33 -0700
Subject: [PATCH 6/6] Updated remove button alignment on project subform

---
 .../research/common/updateProjects/UpdateProjectsSubForm.tsx  | 4 ++--
 .../__snapshots__/UpdateProjectsSubForm.test.tsx.snap         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/frontend/src/features/mapSideBar/research/common/updateProjects/UpdateProjectsSubForm.tsx b/source/frontend/src/features/mapSideBar/research/common/updateProjects/UpdateProjectsSubForm.tsx
index e7a2404ed3..4cd1211de4 100644
--- a/source/frontend/src/features/mapSideBar/research/common/updateProjects/UpdateProjectsSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/research/common/updateProjects/UpdateProjectsSubForm.tsx
@@ -29,10 +29,10 @@ export const UpdateProjectsSubForm: React.FC<IUpdateProjectsSubFormProps> = ({ f
           {projects.map((_, index) => (
             <SectionField key={`project-row-${index}`} label="Ministry project">
               <Row>
-                <Col xs="auto" xl="9">
+                <Col xs="9">
                   <ProjectSelector field={`${field}[${index}].project`} />
                 </Col>
-                <Col xs="auto" xl="3" className="pl-0 mt-2">
+                <Col xs="auto" className="p-0 m-0">
                   <RemoveButton onRemove={() => arrayHelpers.remove(index)} />
                 </Col>
               </Row>
diff --git a/source/frontend/src/features/mapSideBar/research/common/updateProjects/__snapshots__/UpdateProjectsSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/updateProjects/__snapshots__/UpdateProjectsSubForm.test.tsx.snap
index b2b6c079cd..adcfef797c 100644
--- a/source/frontend/src/features/mapSideBar/research/common/updateProjects/__snapshots__/UpdateProjectsSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/common/updateProjects/__snapshots__/UpdateProjectsSubForm.test.tsx.snap
@@ -364,7 +364,7 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
         class="row"
       >
         <div
-          class="col-xl-9 col-auto"
+          class="col-9"
         >
           <div
             class="c2 form-group"
@@ -424,7 +424,7 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
           </div>
         </div>
         <div
-          class="pl-0 mt-2 col-xl-3 col-auto"
+          class="p-0 m-0 col-auto"
         >
           <button
             class="c3 Button c4 btn btn-link"