From 834e0926759e5a5319161bf9ec3572d07a9f1879 Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Wed, 18 Dec 2024 10:41:20 -0800
Subject: [PATCH 1/6] Changes for PSP-9710 and PSP-9313

---
 .../src/components/common/Section/Section.tsx |  2 +-
 .../common/Section/SectionStyles.tsx          |  2 +-
 .../common/{ => buttons}/EditButton.tsx       | 15 ++++--
 .../common/buttons/EditPropertiesButton.tsx   |  4 +-
 .../common/buttons/RemoveButton.tsx           | 36 +++++++++++---
 .../components/common/buttons/ViewButton.tsx  | 33 +++++++++++++
 .../src/components/common/form/NotesModal.tsx |  4 +-
 .../ToggleSaveInput/ToggleSaveInputView.tsx   | 18 +++++--
 .../ContactResultComponent/columns.tsx        | 19 +++----
 .../contacts/contact/detail/Container.tsx     | 11 ++---
 .../leases/detail/LeaseEditButton.tsx         |  2 +-
 .../DepositsReceivedContainer/columns.tsx     | 11 ++---
 .../DepositsReturnedContainer/columns.tsx     | 12 ++---
 .../table/payments/paymentsColumns.tsx        | 22 ++++-----
 .../payment/table/periods/periodColumns.tsx   | 18 +++----
 .../acquisition/common/AcquisitionMenu.tsx    |  2 +-
 .../tabs/agreement/detail/AgreementView.tsx   | 17 +++----
 .../form8/Form8PaymentItemsSubForm.tsx        | 12 ++---
 .../details/ExpropriationForm8Details.tsx     | 16 +++---
 .../detail/AcquisitionSummaryView.tsx         |  4 +-
 .../stakeholders/detail/StakeHolderView.tsx   |  4 +-
 .../update/InterestHolderSubForm.tsx          | 12 ++---
 .../update/UpdateStakeHolderForm.tsx          | 12 ++---
 .../CompensationRequisitionDetailView.tsx     |  3 +-
 .../mapSideBar/compensation/list/columns.tsx  | 38 ++++----------
 .../financials/FinancialActivitiesSubForm.tsx | 14 ++----
 .../disposition/common/DispositionMenu.tsx    |  2 +-
 .../detail/DispositionSummaryView.tsx         |  4 +-
 .../tabs/offersAndSale/OffersAndSaleView.tsx  |  2 +-
 .../DispositionOfferDetails.tsx               | 14 ++----
 .../form/DispositionSalePurchasersSubForm.tsx | 12 ++---
 .../detail/ConsultationListView.tsx           | 27 +++++-----
 .../project/add/ProductsArrayForm.tsx         | 14 ++----
 .../detail/ProjectSummaryView.tsx             |  4 +-
 .../detail/PropertyDetailsTabView.tsx         |  3 +-
 .../detail/PropertyActivityDetailView.tsx     |  3 +-
 .../list/ManagementActivitiesList.tsx         | 34 +++++--------
 .../detail/PropertyContactList.tsx            | 12 ++---
 .../summary/PropertyManagementDetailView.tsx  |  2 +-
 .../tabs/takes/detail/TakesDetailView.tsx     | 38 +++++++-------
 .../research/common/ResearchMenu.tsx          |  2 +-
 .../details/ResearchSummaryView.tsx           |  3 +-
 .../tabs/checklist/detail/ChecklistView.tsx   |  4 +-
 .../notes/list/NoteResults/columns.tsx        | 49 +++++++++----------
 .../src/features/properties/list/columns.tsx  |  4 +-
 source/frontend/src/utils/columnUtils.tsx     | 13 ++---
 46 files changed, 283 insertions(+), 306 deletions(-)
 rename source/frontend/src/components/common/{ => buttons}/EditButton.tsx (63%)
 create mode 100644 source/frontend/src/components/common/buttons/ViewButton.tsx

diff --git a/source/frontend/src/components/common/Section/Section.tsx b/source/frontend/src/components/common/Section/Section.tsx
index 5d0e7b2dbc..88c56f97c6 100644
--- a/source/frontend/src/components/common/Section/Section.tsx
+++ b/source/frontend/src/components/common/Section/Section.tsx
@@ -42,7 +42,7 @@ export const Section: React.FC<
           <Row className="no-gutters">
             <Col>{header}</Col>
             {isCollapsable && (
-              <Col xs="auto" className="pl-8 d-flex align-items-end">
+              <Col xs="auto" className="pl-2 d-flex align-items-end">
                 {isCollapsed && (
                   <ArrowDropDownIcon
                     title={`expand-${title ?? 'section'}`}
diff --git a/source/frontend/src/components/common/Section/SectionStyles.tsx b/source/frontend/src/components/common/Section/SectionStyles.tsx
index f1010e4b5f..d1d74c4b5b 100644
--- a/source/frontend/src/components/common/Section/SectionStyles.tsx
+++ b/source/frontend/src/components/common/Section/SectionStyles.tsx
@@ -75,8 +75,8 @@ export const StyledSummarySection = styled.div`
 
 export const StyledEditWrapper = styled.div`
   color: ${props => props.theme.css.primary};
-
   text-align: right;
+  overflow: hidden;
 `;
 
 export const StyledSubtleText = styled.p`
diff --git a/source/frontend/src/components/common/EditButton.tsx b/source/frontend/src/components/common/buttons/EditButton.tsx
similarity index 63%
rename from source/frontend/src/components/common/EditButton.tsx
rename to source/frontend/src/components/common/buttons/EditButton.tsx
index 78806d91b9..b54cdc1ba5 100644
--- a/source/frontend/src/components/common/EditButton.tsx
+++ b/source/frontend/src/components/common/buttons/EditButton.tsx
@@ -1,11 +1,14 @@
-import { Button } from 'react-bootstrap';
 import { FaEdit } from 'react-icons/fa';
+import { CSSProperties } from 'styled-components';
+
+import { StyledIconButton } from './IconButton';
 
 interface IEditButtonProps {
   onClick: () => void;
   title?: string;
   icon?: React.ReactNode;
   dataTestId?: string | null;
+  style?: CSSProperties | null;
 }
 
 export const EditButton: React.FunctionComponent<React.PropsWithChildren<IEditButtonProps>> = ({
@@ -13,16 +16,18 @@ export const EditButton: React.FunctionComponent<React.PropsWithChildren<IEditBu
   title,
   icon,
   dataTestId,
+  style,
 }) => {
   return (
-    <Button
-      variant="link"
+    <StyledIconButton
+      variant="primary"
       title={title ?? 'edit'}
       onClick={onClick}
       data-testid={dataTestId ?? 'edit-button'}
+      style={style}
     >
-      {icon ?? <FaEdit size={'2rem'} />}
-    </Button>
+      {icon ?? <FaEdit size={22} />}
+    </StyledIconButton>
   );
 };
 
diff --git a/source/frontend/src/components/common/buttons/EditPropertiesButton.tsx b/source/frontend/src/components/common/buttons/EditPropertiesButton.tsx
index 5da4943eb4..e9e8f8a7eb 100644
--- a/source/frontend/src/components/common/buttons/EditPropertiesButton.tsx
+++ b/source/frontend/src/components/common/buttons/EditPropertiesButton.tsx
@@ -7,8 +7,8 @@ export const EditPropertiesIcon: React.FC = () => {
 };
 
 const EditMapMarkerButton = styled(EditMapMarkerIcon)`
-  fill: ${props => props.theme.css.iconBlueAction};
+  fill: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault};
   &:hover {
-    fill: ${props => props.theme.css.iconBlueHover};
+    fill: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonHover};
   }
 `;
diff --git a/source/frontend/src/components/common/buttons/RemoveButton.tsx b/source/frontend/src/components/common/buttons/RemoveButton.tsx
index 22df0ce57e..a25e2e1a9e 100644
--- a/source/frontend/src/components/common/buttons/RemoveButton.tsx
+++ b/source/frontend/src/components/common/buttons/RemoveButton.tsx
@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+import { ButtonProps } from 'react-bootstrap';
+import { FaTrash } from 'react-icons/fa';
 import { MdClose } from 'react-icons/md';
 import styled, { css } from 'styled-components';
 
 import { StyledIconButton } from './IconButton';
 import { LinkButton } from './LinkButton';
 
-interface IRemoveButtonProps {
+interface IRemoveButtonProps extends ButtonProps {
   label?: string;
+  title?: string;
   dataTestId?: string | null;
   fontSize?: string;
+  icon?: React.ReactNode;
+  style?: CSSProperties | null;
   onRemove: () => void;
 }
 
@@ -26,6 +31,22 @@ export const RemoveButton: React.FunctionComponent<React.PropsWithChildren<IRemo
   );
 };
 
+export const RemoveIconButton: React.FunctionComponent<
+  React.PropsWithChildren<IRemoveButtonProps>
+> = ({ onRemove, title, icon, dataTestId, style }) => {
+  return (
+    <StyledRemoveIconButton
+      variant="primary"
+      title={title ?? 'edit'}
+      onClick={onRemove}
+      data-testid={dataTestId ?? 'edit-button'}
+      style={style}
+    >
+      {icon ?? <FaTrash size={22} />}
+    </StyledRemoveIconButton>
+  );
+};
+
 // Support font-size override for remove buttons
 export const StyledRemoveLinkButton = styled(LinkButton)<{ $fontSize?: string }>`
   &&.btn {
@@ -60,20 +81,19 @@ export const StyledRemoveIconButton = styled(StyledIconButton)`
   &&.btn {
     &.btn-primary {
       svg {
-        color: ${({ theme }) => theme.bcTokens.iconsColorDisabled};
+        color: #aaaaaa !important;
       }
       text-decoration: none;
       line-height: unset;
       .text {
         display: none;
       }
-      &:hover,
-      &:active,
-      &:focus {
-        color: #d8292f;
+      svg:hover,
+      svg:active,
+      svg:focus {
+        color: #d8292f !important;
         text-decoration: none;
         opacity: unset;
-        display: flex;
         flex-direction: row;
         .text {
           display: inline;
diff --git a/source/frontend/src/components/common/buttons/ViewButton.tsx b/source/frontend/src/components/common/buttons/ViewButton.tsx
new file mode 100644
index 0000000000..67a46bc636
--- /dev/null
+++ b/source/frontend/src/components/common/buttons/ViewButton.tsx
@@ -0,0 +1,33 @@
+import { ButtonProps } from 'react-bootstrap/Button';
+import { FaEye } from 'react-icons/fa';
+import { CSSProperties } from 'styled-components';
+
+import { StyledIconButton } from './IconButton';
+
+interface IViewButtonProps extends ButtonProps {
+  onClick: () => void;
+  title?: string;
+  icon?: React.ReactNode;
+  dataTestId?: string | null;
+  style?: CSSProperties | null;
+}
+
+export const ViewButton: React.FunctionComponent<React.PropsWithChildren<IViewButtonProps>> = ({
+  onClick,
+  title,
+  icon,
+  dataTestId,
+  style,
+}) => (
+  <StyledIconButton
+    variant="primary"
+    title={title ?? 'edit'}
+    onClick={onClick}
+    data-testid={dataTestId ?? 'view-button'}
+    style={style}
+  >
+    {icon ?? <FaEye size={22} />}
+  </StyledIconButton>
+);
+
+export default ViewButton;
diff --git a/source/frontend/src/components/common/form/NotesModal.tsx b/source/frontend/src/components/common/form/NotesModal.tsx
index c02acd7d90..b45e0843aa 100644
--- a/source/frontend/src/components/common/form/NotesModal.tsx
+++ b/source/frontend/src/components/common/form/NotesModal.tsx
@@ -1,7 +1,7 @@
 import { Formik } from 'formik';
 import { ReactNode } from 'react';
 import React from 'react';
-import { FaRegFileAlt } from 'react-icons/fa';
+import { FaEye } from 'react-icons/fa';
 import * as Yup from 'yup';
 
 import { StyledIconButton } from '@/components/common/buttons';
@@ -70,7 +70,7 @@ export const NotesModal = <T,>({
         setDisplayModal(true);
       }}
     >
-      <FaRegFileAlt />
+      <FaEye size={22} />
     </StyledIconButton>
   );
 };
diff --git a/source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx b/source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx
index 996b137286..ccdb607efd 100644
--- a/source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx
+++ b/source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { Button, Form, Spinner } from 'react-bootstrap';
 import { FaCheck } from 'react-icons/fa';
 import NumberFormat from 'react-number-format';
+import styled from 'styled-components';
 
 import { formatMoney } from '@/utils';
 
-import EditButton from '../../EditButton';
+import EditButton from '../../buttons/EditButton';
 
 /**
  * Non formik form that allows a user to toggle between a value and an input and save the input.
@@ -65,9 +66,20 @@ export const ToggleSaveInputView: React.FC<IToggleSaveInputViewProps> = ({
   } else {
     return (
       <>
-        {asCurrency ? formatMoney(Number(value)) : value}
-        <EditButton onClick={() => setIsEditing(true)} />
+        <StyledCompensationContainer>
+          {asCurrency ? formatMoney(Number(value)) : value}
+          <EditButton onClick={() => setIsEditing(true)} />
+        </StyledCompensationContainer>
       </>
     );
   }
 };
+
+export const StyledCompensationContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  align-items: center;
+`;
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
index 855c6fa1e7..e2ee674eac 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
@@ -1,12 +1,11 @@
 import { FaRegBuilding, FaRegUser } from 'react-icons/fa';
 import { FaCircle } from 'react-icons/fa';
-import { FaEdit } from 'react-icons/fa';
-import { MdContactMail } from 'react-icons/md';
 import { Link, useHistory } from 'react-router-dom';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import { StyledIconButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/buttons/EditButton';
+import ViewButton from '@/components/common/buttons/ViewButton';
 import { InlineFlexDiv } from '@/components/common/styles';
 import { ColumnWithProps } from '@/components/Table';
 import { Claims } from '@/constants/claims';
@@ -131,23 +130,17 @@ const columns: ColumnWithProps<IContactSearchResult>[] = [
       return (
         <StyledDiv>
           {hasClaim(Claims.CONTACT_EDIT) && (
-            <StyledIconButton
+            <EditButton
               title="Edit Contact"
-              variant="light"
               onClick={() => history.push(`/contact/${props.row.original.id}/edit`)}
-            >
-              <FaEdit size={22} />
-            </StyledIconButton>
+            />
           )}
 
           {hasClaim(Claims.CONTACT_VIEW) && (
-            <StyledIconButton
+            <ViewButton
               title="View Contact"
-              variant="light"
               onClick={() => history.push(`/contact/${props.row.original.id}`)}
-            >
-              <MdContactMail size={22} />
-            </StyledIconButton>
+            />
           )}
         </StyledDiv>
       );
diff --git a/source/frontend/src/features/contacts/contact/detail/Container.tsx b/source/frontend/src/features/contacts/contact/detail/Container.tsx
index 19c10a46d3..790882895c 100644
--- a/source/frontend/src/features/contacts/contact/detail/Container.tsx
+++ b/source/frontend/src/features/contacts/contact/detail/Container.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaEdit, FaWindowClose } from 'react-icons/fa';
+import { FaWindowClose } from 'react-icons/fa';
 import { MdContactMail } from 'react-icons/md';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { StyledIconButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/buttons/EditButton';
 import { ProtectedComponent } from '@/components/common/ProtectedComponent';
 import { H1 } from '@/components/common/styles';
 import { Claims } from '@/constants/claims';
@@ -52,13 +52,10 @@ const ContactViewContainer: React.FunctionComponent<
         <Styled.RowAligned>
           <Col md="auto" className="ml-auto">
             <ProtectedComponent hideIfNotAuthorized claims={[Claims.CONTACT_EDIT]}>
-              <StyledIconButton
+              <EditButton
                 title="Edit Contact"
-                variant="light"
                 onClick={() => history.push(`/contact/${props?.match?.params?.id}/edit`)}
-              >
-                <FaEdit size={22} />
-              </StyledIconButton>
+              />
             </ProtectedComponent>
           </Col>
         </Styled.RowAligned>
diff --git a/source/frontend/src/features/leases/detail/LeaseEditButton.tsx b/source/frontend/src/features/leases/detail/LeaseEditButton.tsx
index cd498ca5c1..7a4a0df19c 100644
--- a/source/frontend/src/features/leases/detail/LeaseEditButton.tsx
+++ b/source/frontend/src/features/leases/detail/LeaseEditButton.tsx
@@ -16,7 +16,7 @@ export const LeaseEditButton: React.FunctionComponent<
     <ProtectedComponent hideIfNotAuthorized claims={[Claims.LEASE_EDIT]}>
       {!isEditing && !!onEdit && (
         <LinkButton onClick={onEdit} className="float-right">
-          <FaEdit size={'2rem'} />
+          <FaEdit size={22} />
         </LinkButton>
       )}
     </ProtectedComponent>
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/columns.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/columns.tsx
index 8f4a63f3b0..427d7fc604 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/columns.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/columns.tsx
@@ -1,10 +1,9 @@
-import { FaTrash } from 'react-icons/fa';
 import { MdUndo } from 'react-icons/md';
 import { Link } from 'react-router-dom';
 import { CellProps } from 'react-table';
 
-import { LinkButton, StyledRemoveLinkButton } from '@/components/common/buttons';
-import EditButton from '@/components/common/EditButton';
+import { LinkButton, RemoveIconButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/buttons/EditButton';
 import { InlineFlexDiv } from '@/components/common/styles';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import { ColumnWithProps, renderDate, renderMoney } from '@/components/Table';
@@ -87,10 +86,10 @@ function depositActions(
           />
         )}
         {hasClaim(Claims.LEASE_EDIT) && original.depositReturnCount === 0 && (
-          <StyledRemoveLinkButton
+          <RemoveIconButton
             title="delete deposit"
-            icon={<FaTrash size={20} id={`delete-deposit-${index}`} title="document deposit" />}
-            onClick={() => original?.id && onDelete(original.id)}
+            id={`delete-deposit-${index}`}
+            onRemove={() => original?.id && onDelete(original.id)}
           />
         )}
       </InlineFlexDiv>
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx
index 36ac5e69b9..daa1f60693 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx
@@ -1,10 +1,9 @@
-import { FaTrash } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import { StyledRemoveLinkButton } from '@/components/common/buttons';
-import EditButton from '@/components/common/EditButton';
+import { RemoveIconButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/buttons/EditButton';
 import { InlineFlexDiv } from '@/components/common/styles';
 import { ColumnWithProps, renderDate, renderMoney } from '@/components/Table';
 import Claims from '@/constants/claims';
@@ -77,10 +76,10 @@ function depositActions(onEdit: (id: number) => void, onDelete: (id: number) =>
           <EditButton title="edit deposit return" onClick={() => onEdit(original.id)} />
         )}
         {hasClaim(Claims.LEASE_EDIT) && (
-          <StyledRemoveLinkButton
+          <RemoveIconButton
             title="delete deposit return"
-            icon={<FaTrash size={20} id={`delete-deposit-${index}`} title="document deposit" />}
-            onClick={() => original?.id && onDelete(original.id)}
+            id={`delete-deposit-${index}`}
+            onRemove={() => original?.id && onDelete(original.id)}
           />
         )}
       </StyledIcons>
@@ -173,6 +172,5 @@ const StyledIcons = styled(InlineFlexDiv)`
   }
   .btn.btn-primary {
     background-color: transparent;
-    padding: 0;
   }
 `;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/paymentsColumns.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/paymentsColumns.tsx
index 61387d9a20..b383fce13b 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/paymentsColumns.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/paymentsColumns.tsx
@@ -1,9 +1,9 @@
-import { FaTrash } from 'react-icons/fa';
-import { MdEdit, MdReceipt } from 'react-icons/md';
+import { MdReceipt } from 'react-icons/md';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import { Button } from '@/components/common/buttons/Button';
+import { RemoveIconButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/buttons/EditButton';
 import NotesModal from '@/components/common/form/NotesModal';
 import { InlineFlexDiv } from '@/components/common/styles';
 import TooltipIcon from '@/components/common/TooltipIcon';
@@ -27,18 +27,14 @@ const actualsActions = (
     return (
       <StyledIcons>
         {hasClaim(Claims.LEASE_EDIT) && (
-          <Button
-            title="edit actual"
-            icon={<MdEdit size={24} id={`edit-actual-${index}`} title="edit actual" />}
-            onClick={() => onEdit(original)}
-          ></Button>
+          <EditButton title="edit payment" onClick={() => onEdit(original)} />
         )}
         {hasClaim(Claims.LEASE_EDIT) && (
-          <Button
-            title="delete actual"
-            icon={<FaTrash size={24} id={`delete-actual-${index}`} title="delete actual" />}
-            onClick={() => original.id && onDelete(original)}
-          ></Button>
+          <RemoveIconButton
+            title="delete payment"
+            id={`delete-actual-${index}`}
+            onRemove={() => original.id && onDelete(original)}
+          />
         )}
       </StyledIcons>
     );
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx
index 5679e80b80..3d1202d5d7 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx
@@ -1,12 +1,11 @@
 import moment from 'moment';
-import { FaTrash } from 'react-icons/fa';
 import { IoMdRefreshCircle } from 'react-icons/io';
-import { MdEdit } from 'react-icons/md';
 import { TbArrowWaveRightUp } from 'react-icons/tb';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import { Button } from '@/components/common/buttons/Button';
+import { RemoveIconButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/buttons/EditButton';
 import { InlineFlexDiv } from '@/components/common/styles';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
@@ -174,20 +173,15 @@ const paymentActions = (
     return (
       <StyledIcons>
         {hasClaim(Claims.LEASE_EDIT) && (
-          <Button
-            title="edit period"
-            icon={<MdEdit size={24} id={`edit-period-${index}`} title="edit period" />}
-            onClick={() => onEdit(original)}
-          ></Button>
+          <EditButton title="edit period" onClick={() => onEdit(original)} />
         )}
         {hasClaim(Claims.LEASE_EDIT) &&
           original.payments.length <= 0 &&
           original.statusTypeCode?.id !== LeasePeriodStatusTypes.EXERCISED && (
-            <Button
+            <RemoveIconButton
               title="delete period"
-              icon={<FaTrash size={24} id={`delete-period-${index}`} title="delete period" />}
-              onClick={() => original.id && onDelete(original)}
-            ></Button>
+              onRemove={() => original.id && onDelete(original)}
+            />
           )}
         {hasClaim(Claims.LEASE_EDIT) &&
           (original.payments.length > 0 ||
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionMenu.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionMenu.tsx
index e23006e54d..f7d97dad9e 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionMenu.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionMenu.tsx
@@ -3,9 +3,9 @@ import { Col, Row } from 'react-bootstrap';
 import { FaCaretRight } from 'react-icons/fa';
 import styled from 'styled-components';
 
+import EditButton from '@/components/common/buttons/EditButton';
 import { EditPropertiesIcon } from '@/components/common/buttons/EditPropertiesButton';
 import { LinkButton } from '@/components/common/buttons/LinkButton';
-import EditButton from '@/components/common/EditButton';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import { Claims, Roles } from '@/constants/index';
 import { useKeycloakWrapper } from '@/hooks/useKeycloakWrapper';
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
index cfe33029f8..f0b3828a75 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
@@ -1,9 +1,9 @@
-import { FaMailBulk, FaPlus, FaTrash } from 'react-icons/fa';
+import { FaEdit, FaMailBulk, FaPlus, FaTrash } from 'react-icons/fa';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { StyledRemoveLinkButton } from '@/components/common/buttons/RemoveButton';
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
+import { RemoveIconButton } from '@/components/common/buttons/RemoveButton';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
@@ -97,12 +97,13 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                                 onClick={() =>
                                   history.push(`${match.url}/${agreement.agreementId}/update`)
                                 }
+                                icon={<FaEdit size={'2rem'} />}
                               />
-                              <StyledRemoveLinkButton
+                              <RemoveIconButton
                                 title="Delete Agreement"
                                 data-testid={`agreements[${index}].delete-btn`}
-                                variant="light"
-                                onClick={() => {
+                                icon={<FaTrash size={'1.75rem'} />}
+                                onRemove={() => {
                                   setModalContent({
                                     ...getDeleteModalProps(),
                                     variant: 'error',
@@ -121,9 +122,7 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                                   });
                                   setDisplayModal(true);
                                 }}
-                              >
-                                <FaTrash size="2rem" />
-                              </StyledRemoveLinkButton>
+                              />
                             </>
                           )}
                       </StyledButtonContainer>
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
index 95fff8d092..b119cce161 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
@@ -1,8 +1,7 @@
 import { FieldArray, FormikProps, useFormikContext } from 'formik';
-import { FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
 
-import { LinkButton, StyledRemoveLinkButton } from '@/components/common/buttons';
+import { LinkButton, RemoveIconButton } from '@/components/common/buttons';
 import { FastCurrencyInput, Select } from '@/components/common/form';
 import { YesNoSelect } from '@/components/common/form/YesNoSelect';
 import { SectionField } from '@/components/common/Section/SectionField';
@@ -77,11 +76,10 @@ export const Form8PaymentItemsSubForm: React.FunctionComponent<IForm8PaymentItem
               <div key={index} data-testid={`paymentItems[${index}]`}>
                 <StyledSubHeader>
                   <label>Payment Item {index + 1}</label>
-                  <StyledRemoveLinkButton
+                  <RemoveIconButton
                     title="Delete Payment Item"
                     data-testid={`paymentItems[${index}].delete-button`}
-                    variant="light"
-                    onClick={() => {
+                    onRemove={() => {
                       setModalContent({
                         ...getDeleteModalProps(),
                         title: 'Remove Payment Item',
@@ -97,9 +95,7 @@ export const Form8PaymentItemsSubForm: React.FunctionComponent<IForm8PaymentItem
                       });
                       setDisplayModal(true);
                     }}
-                  >
-                    <FaTrash size="2rem" />
-                  </StyledRemoveLinkButton>
+                  />
                 </StyledSubHeader>
 
                 <SectionField label="Item" labelWidth="4" required>
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
index 940e2fc569..25e84ad0ef 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
@@ -1,10 +1,10 @@
 import { Col, Row } from 'react-bootstrap';
-import { FaExternalLinkAlt, FaMoneyCheck, FaTrash } from 'react-icons/fa';
+import { FaExternalLinkAlt, FaMoneyCheck } from 'react-icons/fa';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { StyledRemoveLinkButton } from '@/components/common/buttons';
-import EditButton from '@/components/common/EditButton';
+import { RemoveIconButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/buttons/EditButton';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { H3, StyledSectionAddButton } from '@/components/common/styles';
@@ -64,12 +64,12 @@ export const ExpropriationForm8Details: React.FunctionComponent<
                 title="Edit form 8"
                 dataTestId={`form8[${form8Index}].edit-form8`}
                 onClick={() => history.push(`${match.url}/${form8.id}`)}
+                style={{ float: 'right' }}
               />
-              <StyledRemoveLinkButton
+              <RemoveIconButton
                 title="Delete Form 8"
                 data-testid={`form8[${form8Index}].delete-form8`}
-                variant="light"
-                onClick={() => {
+                onRemove={() => {
                   setModalContent({
                     ...getDeleteModalProps(),
                     title: 'Remove Form 8',
@@ -85,9 +85,7 @@ export const ExpropriationForm8Details: React.FunctionComponent<
                   });
                   setDisplayModal(true);
                 }}
-              >
-                <FaTrash size="2rem" />
-              </StyledRemoveLinkButton>
+              />
             </>
           )}
         </StyledSubHeader>
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/AcquisitionSummaryView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/AcquisitionSummaryView.tsx
index d99db2373d..e570c85f30 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/AcquisitionSummaryView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/AcquisitionSummaryView.tsx
@@ -3,7 +3,7 @@ import { FaExternalLinkAlt } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { StyledEditWrapper, StyledSummarySection } from '@/components/common/Section/SectionStyles';
@@ -74,7 +74,7 @@ const AcquisitionSummaryView: React.FC<IAcquisitionSummaryViewProps> = ({
     <StyledSummarySection>
       <StyledEditWrapper className="mr-3 my-1">
         {hasClaim(Claims.ACQUISITION_EDIT) && canEditDetails() ? (
-          <EditButton title="Edit acquisition file" onClick={onEdit} />
+          <EditButton title="Edit acquisition file" onClick={onEdit} style={{ float: 'right' }} />
         ) : null}
         {!canEditDetails() && (
           <TooltipIcon
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/StakeHolderView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/StakeHolderView.tsx
index dd5cce81ff..0395da282a 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/StakeHolderView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/StakeHolderView.tsx
@@ -1,4 +1,4 @@
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
@@ -43,7 +43,7 @@ export const StakeHolderView: React.FunctionComponent<IStakeHolderViewProps> = (
         <LoadingBackdrop show={loading} parentScreen={true} />
         <StyledEditWrapper className="mr-3 my-1">
           {keycloak.hasClaim(Claims.ACQUISITION_EDIT) && statusSolver.canEditStakeholders() ? (
-            <EditButton title="Edit Interests" onClick={onEdit} />
+            <EditButton title="Edit Interests" onClick={onEdit} style={{ float: 'right' }} />
           ) : null}
         </StyledEditWrapper>
         <Section isCollapsable initiallyExpanded header="Interests">
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/InterestHolderSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/InterestHolderSubForm.tsx
index 795470e13a..1a3a976768 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/InterestHolderSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/InterestHolderSubForm.tsx
@@ -1,9 +1,8 @@
 import { FieldArrayRenderProps, FormikErrors, getIn, useFormikContext } from 'formik';
 import { Fragment, useEffect } from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaTrash } from 'react-icons/fa';
 
-import { StyledRemoveLinkButton } from '@/components/common/buttons';
+import { RemoveIconButton } from '@/components/common/buttons';
 import { DisplayError, Select } from '@/components/common/form';
 import { SelectOption } from '@/components/common/form';
 import { ContactInputContainer } from '@/components/common/form/ContactInput/ContactInputContainer';
@@ -88,15 +87,12 @@ export const InterestHolderSubForm: React.FunctionComponent<IInterestHolderProps
             ></ContactInputContainer>
           </Col>
           <Col xs="auto">
-            <StyledRemoveLinkButton
+            <RemoveIconButton
               title="Remove Interest"
-              variant="light"
-              onClick={() => {
+              onRemove={() => {
                 arrayHelpers.remove(index);
               }}
-            >
-              <FaTrash size="2rem" />
-            </StyledRemoveLinkButton>
+            />
           </Col>
           {getIn(errors, `interestHolders.${index}.contact`) && (
             <DisplayError field={`interestHolders.${index}.contact`} />
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/UpdateStakeHolderForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/UpdateStakeHolderForm.tsx
index ef598da270..9397e8b042 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/UpdateStakeHolderForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/UpdateStakeHolderForm.tsx
@@ -1,9 +1,8 @@
 import { FieldArray, Formik, FormikHelpers, FormikProps, getIn } from 'formik';
 import { Fragment } from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaTrash } from 'react-icons/fa';
 
-import { Button, StyledRemoveLinkButton } from '@/components/common/buttons';
+import { Button, RemoveIconButton } from '@/components/common/buttons';
 import { DisplayError } from '@/components/common/form';
 import { ContactInputContainer } from '@/components/common/form/ContactInput/ContactInputContainer';
 import ContactInputView from '@/components/common/form/ContactInput/ContactInputView';
@@ -153,15 +152,12 @@ export const UpdateStakeHolderForm: React.FunctionComponent<IUpdateStakeHolderFo
                               ></ContactInputContainer>
                             </Col>
                             <Col xs="auto">
-                              <StyledRemoveLinkButton
+                              <RemoveIconButton
                                 title="Remove Interest"
-                                variant="light"
-                                onClick={() => {
+                                onRemove={() => {
                                   arrayHelpers.remove(index);
                                 }}
-                              >
-                                <FaTrash size="2rem" />
-                              </StyledRemoveLinkButton>
+                              />
                             </Col>
                             {getIn(errors, `nonInterestPayees.${index}.contact`) && (
                               <DisplayError field={`nonInterestPayees.${index}.contact`} />
diff --git a/source/frontend/src/features/mapSideBar/compensation/detail/CompensationRequisitionDetailView.tsx b/source/frontend/src/features/mapSideBar/compensation/detail/CompensationRequisitionDetailView.tsx
index b093e47cc7..9caa614c72 100644
--- a/source/frontend/src/features/mapSideBar/compensation/detail/CompensationRequisitionDetailView.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/detail/CompensationRequisitionDetailView.tsx
@@ -5,7 +5,7 @@ import { FaExternalLinkAlt, FaMoneyCheck } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
 import { HeaderField } from '@/components/common/HeaderField/HeaderField';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
@@ -191,6 +191,7 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
       onClick={() => {
         setEditMode(true);
       }}
+      style={{ float: 'right' }}
     />
   );
 
diff --git a/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx b/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
index b1bee2ee69..b2c19b28de 100644
--- a/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
@@ -1,9 +1,8 @@
-import { FaEye, FaTrash } from 'react-icons/fa';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import { LinkButton, StyledRemoveIconButton } from '@/components/common/buttons';
-import { Button } from '@/components/common/buttons/Button';
+import { LinkButton, RemoveIconButton } from '@/components/common/buttons';
+import ViewButton from '@/components/common/buttons/ViewButton';
 import { InlineFlexDiv } from '@/components/common/styles';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import { ColumnWithProps } from '@/components/Table';
@@ -98,28 +97,21 @@ export function createCompensationTableColumns(
         return (
           <StyledDiv className="no-gutters">
             {hasClaim(Claims.COMPENSATION_REQUISITION_VIEW) && (
-              <Button
-                icon={
-                  <FaEye
-                    size={24}
-                    id={`compensation-view-${cellProps.row.id}`}
-                    data-testid={`compensation-view-${cellProps.row.id}`}
-                    title="Compensation view details"
-                  />
-                }
+              <ViewButton
+                dataTestId={`compensation-view-${cellProps.row.id}`}
+                title="Compensation view details"
+                id={`compensation-view-${cellProps.row.id}`}
                 onClick={() => cellProps.row.original.id && onShow(cellProps.row.original.id)}
-              ></Button>
+              />
             )}
             {hasClaim(Claims.COMPENSATION_REQUISITION_DELETE) &&
               canEditDetails(cellProps.row.original.isDraft) && (
-                <StyledRemoveIconButton
+                <RemoveIconButton
                   id={`compensation-delete-${cellProps.row.id}`}
                   data-testid={`compensation-delete-${cellProps.row.id}`}
-                  onClick={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
+                  onRemove={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
                   title="Delete Compensation"
-                >
-                  <FaTrash size="2rem" />
-                </StyledRemoveIconButton>
+                />
               )}
             {hasClaim(Claims.COMPENSATION_REQUISITION_DELETE) &&
               !canEditDetails(cellProps.row.original.isDraft) && (
@@ -141,16 +133,6 @@ const StyledDiv = styled(InlineFlexDiv)`
   justify-content: space-around;
   width: 100%;
 
-  [id^='compensation-view'] {
-    color: ${props => props.theme.css.activeActionColor};
-  }
-  [id^='compensation-delete'] {
-    color: ${props => props.theme.css.activeActionColor};
-    :hover {
-      color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault};
-    }
-  }
-
   .btn.btn-primary {
     background-color: transparent;
     padding: 0;
diff --git a/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx b/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
index 1f4cc293fe..247730680a 100644
--- a/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
@@ -1,9 +1,8 @@
 import { FieldArray, FormikProps, useFormikContext } from 'formik';
 import { useState } from 'react';
-import { FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
 
-import { LinkButton, StyledRemoveLinkButton } from '@/components/common/buttons';
+import { LinkButton, RemoveIconButton } from '@/components/common/buttons';
 import { FastCurrencyInput } from '@/components/common/form';
 import { Select, SelectOption } from '@/components/common/form/Select';
 import { TypeaheadSelect } from '@/components/common/form/TypeaheadSelect';
@@ -88,17 +87,14 @@ export const FinancialActivitiesSubForm: React.FunctionComponent<
                 <>
                   <StyledSubHeader>
                     <label>Activity {index + 1}</label>
-                    <StyledRemoveLinkButton
-                      title="Delete financial activity"
+                    <RemoveIconButton
+                      title="Delete Financial Activity"
                       data-testid={`activity[${index}].delete-button`}
-                      variant="light"
-                      onClick={() => {
+                      onRemove={() => {
                         setRowToDelete(index);
                         setShowModal(true);
                       }}
-                    >
-                      <FaTrash size="2rem" />
-                    </StyledRemoveLinkButton>
+                    />
                   </StyledSubHeader>
 
                   <SectionField label="Code & Description" labelWidth="4" required>
diff --git a/source/frontend/src/features/mapSideBar/disposition/common/DispositionMenu.tsx b/source/frontend/src/features/mapSideBar/disposition/common/DispositionMenu.tsx
index 816af41846..ec9c201dad 100644
--- a/source/frontend/src/features/mapSideBar/disposition/common/DispositionMenu.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/common/DispositionMenu.tsx
@@ -3,9 +3,9 @@ import { Col, Row } from 'react-bootstrap';
 import { FaCaretRight } from 'react-icons/fa';
 import styled from 'styled-components';
 
+import EditButton from '@/components/common/buttons/EditButton';
 import { EditPropertiesIcon } from '@/components/common/buttons/EditPropertiesButton';
 import { LinkButton } from '@/components/common/buttons/LinkButton';
-import EditButton from '@/components/common/EditButton';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import { Claims, Roles } from '@/constants/index';
 import { useKeycloakWrapper } from '@/hooks/useKeycloakWrapper';
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/DispositionSummaryView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/DispositionSummaryView.tsx
index e3c7063d5a..d0d1048405 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/DispositionSummaryView.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/DispositionSummaryView.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { FaExternalLinkAlt } from 'react-icons/fa';
 
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { StyledEditWrapper, StyledSummarySection } from '@/components/common/Section/SectionStyles';
@@ -48,7 +48,7 @@ export const DispositionSummaryView: React.FunctionComponent<IDispositionSummary
         {keycloak.hasClaim(Claims.DISPOSITION_EDIT) &&
         dispositionFile !== undefined &&
         canEditDetails() ? (
-          <EditButton title="Edit disposition file" onClick={onEdit} />
+          <EditButton title="Edit disposition file" onClick={onEdit} style={{ float: 'right' }} />
         ) : null}
         {keycloak.hasClaim(Claims.DISPOSITION_EDIT) &&
         dispositionFile !== undefined &&
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
index 02a918c141..7769601f3f 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
@@ -3,7 +3,7 @@ import { FaPlus } from 'react-icons/fa';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
index d5e97a9261..c27882af26 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
@@ -1,9 +1,8 @@
-import { FaTrash } from 'react-icons/fa';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { StyledRemoveLinkButton } from '@/components/common/buttons/RemoveButton';
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
+import { RemoveIconButton } from '@/components/common/buttons/RemoveButton';
 import { SectionField } from '@/components/common/Section/SectionField';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import { Claims, Roles } from '@/constants';
@@ -55,11 +54,10 @@ const DispositionOfferDetails: React.FunctionComponent<IDispositionOfferDetailsP
               dataTestId={`Offer[${index}].edit-btn`}
               onClick={() => history.push(`${match.url}/offers/${dispositionOffer.id}/update`)}
             />
-            <StyledRemoveLinkButton
+            <RemoveIconButton
               title="Delete Offer"
               data-testid={`Offer[${index}].delete-btn`}
-              variant="light"
-              onClick={() => {
+              onRemove={() => {
                 setModalContent({
                   ...getDeleteModalProps(),
                   variant: 'error',
@@ -78,9 +76,7 @@ const DispositionOfferDetails: React.FunctionComponent<IDispositionOfferDetailsP
                 });
                 setDisplayModal(true);
               }}
-            >
-              <FaTrash size="2rem" />
-            </StyledRemoveLinkButton>
+            />
           </>
         )}
         {keycloak.hasClaim(Claims.DISPOSITION_EDIT) && !canEditDetails() && (
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
index 9905052a63..e2fd1c9a16 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
@@ -1,9 +1,8 @@
 import { FieldArray, useFormikContext } from 'formik';
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaTrash } from 'react-icons/fa';
 
-import { LinkButton, StyledRemoveLinkButton } from '@/components/common/buttons';
+import { LinkButton, RemoveIconButton } from '@/components/common/buttons';
 import { ContactInputContainer } from '@/components/common/form/ContactInput/ContactInputContainer';
 import ContactInputView from '@/components/common/form/ContactInput/ContactInputView';
 import { PrimaryContactSelector } from '@/components/common/form/PrimaryContactSelector/PrimaryContactSelector';
@@ -41,11 +40,10 @@ const DispositionSalePurchaserSubForm: React.FunctionComponent<
                     ></ContactInputContainer>
                   </Col>
                   <Col xs="auto" xl="2" className="pl-3 mt-2">
-                    <StyledRemoveLinkButton
+                    <RemoveIconButton
                       title="Remove Purchaser"
                       data-testid={`dispositionPurchasers.${index}.remove-button`}
-                      variant="light"
-                      onClick={() => {
+                      onRemove={() => {
                         setModalContent({
                           ...getDeleteModalProps(),
                           title: 'Remove Purchaser',
@@ -62,9 +60,7 @@ const DispositionSalePurchaserSubForm: React.FunctionComponent<
                         });
                         setDisplayModal(true);
                       }}
-                    >
-                      <FaTrash size="2rem" />
-                    </StyledRemoveLinkButton>
+                    />
                   </Col>
                 </Row>
 
diff --git a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
index d7c1e45b06..0e9edf7d47 100644
--- a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
+++ b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaCheckCircle, FaExclamationCircle, FaPlus, FaTimesCircle, FaTrash } from 'react-icons/fa';
+import { FaCheckCircle, FaExclamationCircle, FaPlus, FaTimesCircle } from 'react-icons/fa';
 import styled from 'styled-components';
 
-import { StyledRemoveLinkButton } from '@/components/common/buttons/RemoveButton';
+import EditButton from '@/components/common/buttons/EditButton';
+import { RemoveIconButton } from '@/components/common/buttons/RemoveButton';
 import ContactFieldContainer from '@/components/common/ContactFieldContainer';
-import EditButton from '@/components/common/EditButton';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
@@ -106,11 +106,10 @@ export const ConsultationListView: React.FunctionComponent<IConsultationListView
                         {keycloak.hasClaim(Claims.LEASE_EDIT) && (
                           <>
                             <Col xs="auto" className="px-1">
-                              <StyledRemoveLinkButton
+                              <RemoveIconButton
                                 title="Delete Consultation"
                                 data-testid={`consultations[${index}].delete-btn`}
-                                variant="light"
-                                onClick={() => {
+                                onRemove={() => {
                                   setModalContent({
                                     ...getDeleteModalProps(),
                                     variant: 'error',
@@ -129,16 +128,16 @@ export const ConsultationListView: React.FunctionComponent<IConsultationListView
                                   });
                                   setDisplayModal(true);
                                 }}
-                              >
-                                <FaTrash size="2rem" />
-                              </StyledRemoveLinkButton>
+                              />
                             </Col>
                             <Col xs="auto" className="px-2">
-                              <EditButton
-                                title="Edit Consultation"
-                                dataTestId={`consultations[${index}].edit-btn`}
-                                onClick={() => onEdit(consultation.id)}
-                              />
+                              <StyledButtonContainer>
+                                <EditButton
+                                  title="Edit Consultation"
+                                  dataTestId={`consultations[${index}].edit-btn`}
+                                  onClick={() => onEdit(consultation.id)}
+                                />
+                              </StyledButtonContainer>
                             </Col>
                           </>
                         )}
diff --git a/source/frontend/src/features/mapSideBar/project/add/ProductsArrayForm.tsx b/source/frontend/src/features/mapSideBar/project/add/ProductsArrayForm.tsx
index 53d719f284..b950f99009 100644
--- a/source/frontend/src/features/mapSideBar/project/add/ProductsArrayForm.tsx
+++ b/source/frontend/src/features/mapSideBar/project/add/ProductsArrayForm.tsx
@@ -1,10 +1,9 @@
 import { FieldArray, FieldArrayRenderProps, FormikProps, useFormikContext } from 'formik';
 import React, { useRef, useState } from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
 
-import { LinkButton, StyledRemoveLinkButton } from '@/components/common/buttons';
+import { LinkButton, RemoveIconButton } from '@/components/common/buttons';
 import GenericModal from '@/components/common/GenericModal';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
@@ -75,13 +74,10 @@ export const ProductsArrayForm: React.FunctionComponent<IProductsArrayFormProps>
                     <Row className="align-items-end pb-4">
                       <Col />
                       <Col xs="auto">
-                        <StyledRemoveLinkButton
-                          title="Delete Project"
-                          variant="light"
-                          onClick={() => handleRemove(index)}
-                        >
-                          <FaTrash size="2rem" />
-                        </StyledRemoveLinkButton>
+                        <RemoveIconButton
+                          title="Delete Product"
+                          onRemove={() => handleRemove(index)}
+                        />
                       </Col>
                     </Row>
                     <ProductSubForm
diff --git a/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/ProjectSummaryView.tsx b/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/ProjectSummaryView.tsx
index babc29939a..69f42fda41 100644
--- a/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/ProjectSummaryView.tsx
+++ b/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/ProjectSummaryView.tsx
@@ -1,4 +1,4 @@
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { StyledEditWrapper, StyledSummarySection } from '@/components/common/Section/SectionStyles';
@@ -22,7 +22,7 @@ const ProjectSummaryView: React.FunctionComponent<
     <StyledSummarySection>
       <StyledEditWrapper className="mr-3 my-1">
         {keycloak.hasClaim(Claims.PROJECT_EDIT) && project !== undefined ? (
-          <EditButton title="Edit project" onClick={onEdit} />
+          <EditButton title="Edit project" onClick={onEdit} style={{ float: 'right' }} />
         ) : null}
       </StyledEditWrapper>
       <Section header="Project Details" isCollapsable initiallyExpanded>
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/PropertyDetailsTabView.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/PropertyDetailsTabView.tsx
index 2ab10c650d..b0762aa254 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/PropertyDetailsTabView.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/PropertyDetailsTabView.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Col, Form, Row } from 'react-bootstrap';
 import { useHistory } from 'react-router-dom';
 
-import { EditButton } from '@/components/common/EditButton';
+import { EditButton } from '@/components/common/buttons/EditButton';
 import { readOnlyMultiSelectStyle } from '@/components/common/form';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
@@ -76,6 +76,7 @@ export const PropertyDetailsTabView: React.FunctionComponent<IPropertyDetailsTab
               query.set('edit', 'true');
               history.push({ search: query.toString() });
             }}
+            style={{ float: 'right' }}
           />
         ) : null}
         {hasClaim(Claims.PROPERTY_EDIT) && propertyIsRetired ? (
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 0840a64579..f533361647 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
@@ -4,8 +4,8 @@ import { MdClose } from 'react-icons/md';
 import { useHistory } from 'react-router-dom';
 import ReactVisibilitySensor from 'react-visibility-sensor';
 
+import EditButton from '@/components/common/buttons/EditButton';
 import ContactLink from '@/components/common/ContactLink';
-import EditButton from '@/components/common/EditButton';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
@@ -85,6 +85,7 @@ export const PropertyActivityDetailView: React.FunctionComponent<
                           `/mapview/sidebar/property/${props.propertyId}/management/activity/${props.activity?.id}/edit`,
                         );
                       }}
+                      style={{ float: 'right' }}
                     />
                   )}
                 </StyledEditWrapper>
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
index 4d1f800579..56154b557c 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { FaEye, FaInfoCircle, FaTrash } from 'react-icons/fa';
+import { FaInfoCircle } from 'react-icons/fa';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import { LinkButton } from '@/components/common/buttons';
-import { StyledRemoveIconButton } from '@/components/common/buttons/RemoveButton';
+import { RemoveIconButton } from '@/components/common/buttons/RemoveButton';
+import ViewButton from '@/components/common/buttons/ViewButton';
+import { InlineFlexDiv } from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import { ColumnWithProps, Table } from '@/components/Table';
 import { TableSort } from '@/components/Table/TableSort';
@@ -87,29 +88,22 @@ export function createTableColumns(
         return (
           <StyledDiv>
             {hasClaim(Claims.MANAGEMENT_VIEW) && (
-              <LinkButton
+              <ViewButton
                 data-testid={`activity-view-${activityRow.id}`}
-                icon={
-                  <FaEye
-                    size="2rem"
-                    id={`activity-view-${cellProps.row.id}`}
-                    title="property-activity view details"
-                  />
-                }
                 onClick={() => activityRow?.id && onView(activityRow.activityId)}
+                id={`activity-view-${cellProps.row.id}`}
+                title="property-activity view details"
               />
             )}
             {hasClaim(Claims.MANAGEMENT_DELETE) &&
             activityRow?.activityStatusType?.id ===
               PropertyManagementActivityStatusTypes.NOTSTARTED ? (
-              <StyledRemoveIconButton
+              <RemoveIconButton
                 id={`activity-delete-${cellProps.row.id}`}
                 data-testid={`activity-delete-${activityRow.id}`}
-                onClick={() => activityRow.id && onDelete(activityRow.id)}
+                onRemove={() => activityRow.id && onDelete(activityRow.id)}
                 title="Delete"
-              >
-                <FaTrash size="2rem" />
-              </StyledRemoveIconButton>
+              />
             ) : (
               <TooltipWrapper
                 tooltipId={`activity-delete-tooltip-${activityRow.id}`}
@@ -155,11 +149,7 @@ const ManagementActivitiesList: React.FunctionComponent<IManagementActivitiesLis
 
 export default ManagementActivitiesList;
 
-const StyledDiv = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.25rem;
+const StyledDiv = styled(InlineFlexDiv)`
+  justify-content: center;
   width: 80%;
 `;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
index f63fdf2113..8dc5ce410b 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaEdit, FaTrash } from 'react-icons/fa';
+import { FaEdit } from 'react-icons/fa';
 import { CellProps } from 'react-table';
 
 import { LinkButton } from '@/components/common/buttons/LinkButton';
-import { StyledRemoveIconButton } from '@/components/common/buttons/RemoveButton';
+import { RemoveIconButton } from '@/components/common/buttons/RemoveButton';
 import { StyledLink } from '@/components/maps/leaflet/LayerPopup/styles';
 import { ColumnWithProps, Table } from '@/components/Table';
 import Claims from '@/constants/claims';
@@ -114,14 +114,12 @@ export function createContactTableColumns(
               </Col>
             )}
             {hasClaim(Claims.PROPERTY_EDIT) && (
-              <StyledRemoveIconButton
+              <RemoveIconButton
                 id={`contact-delete-${cellProps.row.id}`}
                 data-testid={`contact-delete-${cellProps.row.id}`}
-                onClick={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
+                onRemove={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
                 title="Delete contact"
-              >
-                <FaTrash size="2rem" />
-              </StyledRemoveIconButton>
+              />
             )}
           </Row>
         );
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/PropertyManagementDetailView.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/PropertyManagementDetailView.tsx
index d5c24a1371..342442d21e 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/PropertyManagementDetailView.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/PropertyManagementDetailView.tsx
@@ -1,7 +1,7 @@
 import { Col, Row } from 'react-bootstrap';
 import { useHistory } from 'react-router-dom';
 
-import { EditButton } from '@/components/common/EditButton';
+import { EditButton } from '@/components/common/buttons/EditButton';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { MultiselectTextList } from '@/components/common/MultiselectTextList';
 import { Section } from '@/components/common/Section/Section';
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/TakesDetailView.tsx b/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/TakesDetailView.tsx
index 24d4300f8d..aa1672d36f 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/TakesDetailView.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/TakesDetailView.tsx
@@ -1,13 +1,13 @@
 import { Col, Row } from 'react-bootstrap';
-import { FaPlus, FaTrash } from 'react-icons/fa';
+import { FaPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 
-import { StyledRemoveLinkButton } from '@/components/common/buttons';
-import EditButton from '@/components/common/EditButton';
+import { RemoveIconButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/buttons/EditButton';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
-import { StyledEditWrapper, StyledSummarySection } from '@/components/common/Section/SectionStyles';
+import { StyledSummarySection } from '@/components/common/Section/SectionStyles';
 import { SectionListHeader } from '@/components/common/SectionListHeader';
 import { H2 } from '@/components/common/styles';
 import TooltipIcon from '@/components/common/TooltipIcon';
@@ -123,22 +123,20 @@ export const TakesDetailView: React.FunctionComponent<ITakesDetailViewProps> = (
                 <Row>
                   <Col md="10">Take {index + 1}</Col>
                   <Col md="2" className="d-flex align-items-center justify-content-end">
-                    <StyledEditWrapper>
-                      {onEdit !== undefined && canEditTakes(take) ? (
-                        <EditButton title="Edit take" onClick={() => onEdit(take.id)} />
-                      ) : null}
-                      {!canEditTakes(take) && (
-                        <TooltipIcon
-                          toolTipId={`${fileProperty?.fileId || 0}-summary-cannot-edit-tooltip`}
-                          toolTip="Retired records are referenced for historical purposes only and cannot be edited or deleted. If the take has been added in error, contact your system administrator to re-open the file, which will allow take deletion"
-                        />
-                      )}
-                    </StyledEditWrapper>
+                    {onEdit !== undefined && canEditTakes(take) ? (
+                      <EditButton title="Edit take" onClick={() => onEdit(take.id)} />
+                    ) : null}
+                    {!canEditTakes(take) && (
+                      <TooltipIcon
+                        toolTipId={`${fileProperty?.fileId || 0}-summary-cannot-edit-tooltip`}
+                        toolTip="Retired records are referenced for historical purposes only and cannot be edited or deleted. If the take has been added in error, contact your system administrator to re-open the file, which will allow take deletion"
+                      />
+                    )}
+
                     {canEditTakes(take) && (
-                      <StyledRemoveLinkButton
+                      <RemoveIconButton
                         title="Remove take"
-                        variant="light"
-                        onClick={() => {
+                        onRemove={() => {
                           setModalContent({
                             ...getDeleteModalProps(),
                             handleOk: () => {
@@ -148,9 +146,7 @@ export const TakesDetailView: React.FunctionComponent<ITakesDetailViewProps> = (
                           });
                           setDisplayModal(true);
                         }}
-                      >
-                        <FaTrash size="2rem" />
-                      </StyledRemoveLinkButton>
+                      />
                     )}
                   </Col>
                 </Row>
diff --git a/source/frontend/src/features/mapSideBar/research/common/ResearchMenu.tsx b/source/frontend/src/features/mapSideBar/research/common/ResearchMenu.tsx
index 5a551eb41e..38ac802356 100644
--- a/source/frontend/src/features/mapSideBar/research/common/ResearchMenu.tsx
+++ b/source/frontend/src/features/mapSideBar/research/common/ResearchMenu.tsx
@@ -3,8 +3,8 @@ import { FaCaretRight } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import { LinkButton } from '@/components/common/buttons';
+import { EditButton } from '@/components/common/buttons/EditButton';
 import { EditPropertiesIcon } from '@/components/common/buttons/EditPropertiesButton';
-import { EditButton } from '@/components/common/EditButton';
 import { Claims } from '@/constants/index';
 import { useKeycloakWrapper } from '@/hooks/useKeycloakWrapper';
 
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx
index 0e539dc957..0587ef2473 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx
+++ b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/ResearchSummaryView.tsx
@@ -1,4 +1,4 @@
-import EditButton from '@/components/common/EditButton';
+import EditButton from '@/components/common/buttons/EditButton';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { StyledEditWrapper, StyledSummarySection } from '@/components/common/Section/SectionStyles';
@@ -86,6 +86,7 @@ const ResearchSummaryView: React.FunctionComponent<IResearchSummaryViewProps> =
             onClick={() => {
               props.setEditMode(true);
             }}
+            style={{ float: 'right' }}
           />
         ) : null}
       </StyledEditWrapper>
diff --git a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/ChecklistView.tsx b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/ChecklistView.tsx
index 9af48157c5..3451e420b6 100644
--- a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/ChecklistView.tsx
+++ b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/ChecklistView.tsx
@@ -3,7 +3,7 @@ import { Col, Row } from 'react-bootstrap';
 import { FiCheck, FiMinus, FiX } from 'react-icons/fi';
 import styled from 'styled-components';
 
-import { EditButton } from '@/components/common/EditButton';
+import { EditButton } from '@/components/common/buttons/EditButton';
 import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { StyledEditWrapper, StyledSummarySection } from '@/components/common/Section/SectionStyles';
@@ -47,7 +47,7 @@ export const ChecklistView: React.FC<IChecklistViewProps> = ({
       {showEditButton && (
         <StyledEditWrapper className="mr-3 my-1">
           {keycloak.hasClaim(editClaim) ? (
-            <EditButton title="Edit checklist" onClick={onEdit} />
+            <EditButton title="Edit checklist" onClick={onEdit} style={{ float: 'right' }} />
           ) : null}
         </StyledEditWrapper>
       )}
diff --git a/source/frontend/src/features/notes/list/NoteResults/columns.tsx b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
index 605149c04d..a27e4c7413 100644
--- a/source/frontend/src/features/notes/list/NoteResults/columns.tsx
+++ b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
@@ -1,10 +1,9 @@
-import { FaTrash } from 'react-icons/fa';
-import { ImFileText2 } from 'react-icons/im';
+import { Col, Row } from 'react-bootstrap';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import { StyledIconButton, StyledRemoveLinkButton } from '@/components/common/buttons';
-import { InlineFlexDiv } from '@/components/common/styles';
+import { RemoveIconButton } from '@/components/common/buttons';
+import ViewButton from '@/components/common/buttons/ViewButton';
 import { ColumnWithProps, DateCell } from '@/components/Table';
 import { Claims } from '@/constants/index';
 import { useKeycloakWrapper } from '@/hooks/useKeycloakWrapper';
@@ -52,26 +51,24 @@ export function createTableColumns(
 
         return (
           <StyledDiv>
-            {hasClaim(Claims.NOTE_VIEW) && (
-              <StyledIconButton
-                title="View Note"
-                variant="light"
-                onClick={() => onShowDetails(cellProps.row.original)}
-                className="pl-0"
-              >
-                <ImFileText2 size="2rem" />
-              </StyledIconButton>
-            )}
-
-            {hasClaim(Claims.NOTE_DELETE) && !cellProps.row.original.isSystemGenerated && (
-              <StyledRemoveLinkButton
-                title="Delete Note"
-                variant="light"
-                onClick={() => onDelete(cellProps.row.original)}
-              >
-                <FaTrash size="2rem" />
-              </StyledRemoveLinkButton>
-            )}
+            <Col xs={1} className="p-0">
+              {' '}
+              {hasClaim(Claims.NOTE_VIEW) && (
+                <ViewButton
+                  onClick={() => onShowDetails(cellProps.row.original)}
+                  title="View Note"
+                />
+              )}
+            </Col>
+            <Col xs={1} className="p-0">
+              {hasClaim(Claims.NOTE_DELETE) && !cellProps.row.original.isSystemGenerated && (
+                <RemoveIconButton
+                  title="Delete Note"
+                  variant="primary"
+                  onRemove={() => onDelete(cellProps.row.original)}
+                />
+              )}
+            </Col>
           </StyledDiv>
         );
       },
@@ -81,7 +78,7 @@ export function createTableColumns(
   return columns;
 }
 
-const StyledDiv = styled(InlineFlexDiv)`
-  justify-content: space-around;
+const StyledDiv = styled(Row)`
+  justify-content: space-evenly;
   width: 100%;
 `;
diff --git a/source/frontend/src/features/properties/list/columns.tsx b/source/frontend/src/features/properties/list/columns.tsx
index 6c61f349d3..03362eb789 100644
--- a/source/frontend/src/features/properties/list/columns.tsx
+++ b/source/frontend/src/features/properties/list/columns.tsx
@@ -179,10 +179,10 @@ export const columns = ({
             <StyledIconButton
               data-testid="view-prop-tab"
               title="View Property Info"
-              variant="light"
+              variant="primary"
             >
               <Link to={`/mapview/sidebar/property/${property.id}?pid=${property.pid}`}>
-                <FaEye />
+                <FaEye size={22} />
               </Link>
             </StyledIconButton>
           )}
diff --git a/source/frontend/src/utils/columnUtils.tsx b/source/frontend/src/utils/columnUtils.tsx
index f266f32bb9..85358275d8 100644
--- a/source/frontend/src/utils/columnUtils.tsx
+++ b/source/frontend/src/utils/columnUtils.tsx
@@ -1,8 +1,7 @@
 import difference from 'lodash/difference';
 import map from 'lodash/map';
-import { FaTrash } from 'react-icons/fa';
 
-import { StyledRemoveLinkButton } from '@/components/common/buttons/RemoveButton';
+import { RemoveIconButton } from '@/components/common/buttons/RemoveButton';
 
 import { ColumnWithProps } from '../components/Table/types';
 
@@ -24,16 +23,12 @@ export const getColumnsWithRemove = <T extends object>(
     accessor: 'id' as any,
     maxWidth: 35,
     Cell: (props: any) => (
-      <StyledRemoveLinkButton
+      <RemoveIconButton
         title="Click to remove"
-        style={{ cursor: 'pointer' }}
-        variant="light"
-        onClick={() => {
+        onRemove={() => {
           setRows(difference(map(props.rows, 'original'), [props.row.original]));
         }}
-      >
-        <FaTrash size="1.6rem" />
-      </StyledRemoveLinkButton>
+      />
     ),
   });
   return cols;

From 859606576ca6199938fc10bb56718dc6c617c367 Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Wed, 18 Dec 2024 13:07:28 -0800
Subject: [PATCH 2/6] Updated Snapshots and unit tests

---
 .../common/buttons/RemoveButton.tsx           |   2 +-
 .../ToggleSaveInputView.test.tsx.snap         | 322 +++++++++-
 .../__snapshots__/NotesModal.test.tsx.snap    |   8 +-
 .../ContactResultComponent.test.tsx.snap      |  45 +-
 .../__snapshots__/SideNavbar.test.tsx.snap    | 590 ------------------
 .../FilterContentForm.test.tsx.snap           |  10 +-
 .../CreateOrganizationForm.test.tsx.snap      |   6 +-
 .../CreatePersonForm.test.tsx.snap            |   6 +-
 .../CreateContactContainer.test.tsx.snap      |   6 +-
 .../UpdateOrganizationForm.test.tsx.snap      |   6 +-
 .../UpdatePersonForm.test.tsx.snap            |   6 +-
 .../UpdateContactContainer.test.tsx.snap      |   6 +-
 .../ContactListView.test.tsx.snap             |  15 +-
 .../DocumentListView.test.tsx.snap            |   2 +-
 .../DepositsContainer.test.tsx.snap           |   2 +-
 .../__snapshots__/DepositNotes.test.tsx.snap  |   2 +-
 .../DepositsReturnedContainer.test.tsx.snap   |   1 -
 .../DetailAdministration.test.tsx.snap        |   4 +-
 .../DetailFeeDetermination.test.tsx.snap      |   4 +-
 .../PropertiesInformation.test.tsx.snap       |   2 +-
 .../__snapshots__/DocumentsPage.test.tsx.snap |   2 +-
 .../payment/PeriodPaymentsContainer.test.tsx  |   6 +-
 .../PeriodPaymentsContainer.test.tsx.snap     | 228 +++++--
 .../table/payments/PaymentsView.test.tsx      |  10 +-
 .../PaymentPeriodsView.test.tsx.snap          | 114 +++-
 .../AcquisitionView.test.tsx.snap             |   1 +
 .../AcquisitionMenu.test.tsx.snap             | 195 +++---
 .../AcquisitionFileTabs.test.tsx.snap         |   1 +
 .../tabs/agreement/detail/AgreementView.tsx   |   2 +-
 .../__snapshots__/AgreementView.test.tsx.snap |   4 +-
 .../form8/Form8PaymentItemsSubForm.tsx        |   2 +-
 .../details/ExpropriationForm8Details.tsx     |   2 +-
 .../AcquisitionSummaryView.test.tsx.snap      |   1 +
 .../StakeHolderView.test.tsx.snap             |   5 +-
 .../UpdateStakeHolderForm.test.tsx.snap       |  96 ++-
 ...nsationRequisitionDetailView.test.tsx.snap |   6 +-
 .../CompensationListView.test.tsx.snap        | 328 +++++++++-
 .../mapSideBar/compensation/list/columns.tsx  |   2 +-
 ...eCompensationRequisitionForm.test.tsx.snap |   4 +-
 .../financials/FinancialActivitiesSubForm.tsx |   2 +-
 .../DispositionView.test.tsx.snap             |   1 +
 .../DispositionFileTabs.test.tsx.snap         |   1 +
 .../DispositionSummaryView.test.tsx.snap      |   1 +
 .../OffersAndSaleView.test.tsx.snap           |   2 +-
 .../DispositionOfferDetails.tsx               |   2 +-
 .../form/DispositionSalePurchasersSubForm.tsx |   2 +-
 .../detail/ConsultationListView.tsx           |   2 +-
 .../ConsultationListView.test.tsx.snap        | 253 +++++---
 .../AddProjectForm.test.tsx.snap              | 130 ++--
 .../ProjectSummaryView.test.tsx.snap          |   7 +-
 .../PropertyAssociationTabView.test.tsx.snap  |   8 +-
 .../OperationSectionView.test.tsx.snap        |   4 +-
 .../__snapshots__/OperationView.test.tsx.snap |   2 +-
 .../list/ManagementActivitiesList.tsx         |   4 +-
 ...ManagementActivitiesListView.test.tsx.snap | 209 ++++---
 .../detail/PropertyContactList.tsx            |   2 +-
 .../PropertyContactListView.test.tsx.snap     |  27 +-
 ...PropertyManagementDetailView.test.tsx.snap |   3 +-
 .../TakesDetailView.test.tsx.snap             |  96 ++-
 .../TakeUpdateForm.test.tsx.snap              |   2 +-
 .../ResearchContainer.test.tsx.snap           |   1 +
 .../__snapshots__/ResearchMenu.test.tsx.snap  | 195 +++---
 .../ResearchTabsContainer.test.tsx.snap       |   1 +
 .../ResearchSummaryView.test.tsx.snap         |   1 +
 .../__snapshots__/ChecklistView.test.tsx.snap |  13 +-
 .../__snapshots__/NoteResults.test.tsx.snap   | 388 +++++++-----
 .../notes/list/NoteResults/columns.tsx        |   1 -
 .../__snapshots__/NoteListView.test.tsx.snap  |   2 +-
 68 files changed, 1988 insertions(+), 1428 deletions(-)

diff --git a/source/frontend/src/components/common/buttons/RemoveButton.tsx b/source/frontend/src/components/common/buttons/RemoveButton.tsx
index a25e2e1a9e..45f36d93f9 100644
--- a/source/frontend/src/components/common/buttons/RemoveButton.tsx
+++ b/source/frontend/src/components/common/buttons/RemoveButton.tsx
@@ -39,7 +39,7 @@ export const RemoveIconButton: React.FunctionComponent<
       variant="primary"
       title={title ?? 'edit'}
       onClick={onRemove}
-      data-testid={dataTestId ?? 'edit-button'}
+      data-testid={dataTestId ?? 'remove-button'}
       style={style}
     >
       {icon ?? <FaTrash size={22} />}
diff --git a/source/frontend/src/components/common/form/ToggleSaveInput/__snapshots__/ToggleSaveInputView.test.tsx.snap b/source/frontend/src/components/common/form/ToggleSaveInput/__snapshots__/ToggleSaveInputView.test.tsx.snap
index dd7225285f..8ff61aa60f 100644
--- a/source/frontend/src/components/common/form/ToggleSaveInput/__snapshots__/ToggleSaveInputView.test.tsx.snap
+++ b/source/frontend/src/components/common/form/ToggleSaveInput/__snapshots__/ToggleSaveInputView.test.tsx.snap
@@ -6,25 +6,311 @@ exports[`TogleSaveInputView component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  <button
-    class="btn btn-link"
-    data-testid="edit-button"
-    title="edit"
-    type="button"
+  .c1.btn {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0.4rem 1.2rem;
+  border: 0.2rem solid transparent;
+  border-radius: 0.4rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1.8rem;
+  font-family: 'BCSans','Noto Sans',Verdana,Arial,sans-serif;
+  font-weight: 700;
+  -webkit-letter-spacing: 0.1rem;
+  -moz-letter-spacing: 0.1rem;
+  -ms-letter-spacing: 0.1rem;
+  letter-spacing: 0.1rem;
+  cursor: pointer;
+}
+
+.c1.btn .Button__value {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.c1.btn:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  opacity: 0.8;
+}
+
+.c1.btn:focus {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: #2E5DD7;
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.c1.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c1.btn.btn-primary:hover,
+.c1.btn.btn-primary:active,
+.c1.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c1.btn.btn-secondary {
+  color: #013366;
+  background: none;
+  border-color: #013366;
+}
+
+.c1.btn.btn-secondary:hover,
+.c1.btn.btn-secondary:active,
+.c1.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c1.btn.btn-info {
+  color: #9F9D9C;
+  border: none;
+  background: none;
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+}
+
+.c1.btn.btn-info:hover,
+.c1.btn.btn-info:active,
+.c1.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
+  background: none;
+}
+
+.c1.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
+  border: none;
+}
+
+.c1.btn.btn-light:hover,
+.c1.btn.btn-light:active,
+.c1.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c1.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
+  border: none;
+}
+
+.c1.btn.btn-dark:hover,
+.c1.btn.btn-dark:active,
+.c1.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c1.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-danger:hover,
+.c1.btn.btn-danger:active,
+.c1.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c1.btn.btn-warning:hover,
+.c1.btn.btn-warning:active,
+.c1.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c1.btn.btn-link {
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: var(--surface-color-primary-button-default);
+  background: none;
+  border: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  min-height: 2.5rem;
+  line-height: 3rem;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-letter-spacing: unset;
+  -moz-letter-spacing: unset;
+  -ms-letter-spacing: unset;
+  letter-spacing: unset;
+  text-align: left;
+  padding: 0;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1.btn.btn-link:hover,
+.c1.btn.btn-link:active,
+.c1.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  border: none;
+  background: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.c1.btn.btn-link:disabled,
+.c1.btn.btn-link.disabled {
+  color: #9F9D9C;
+  background: none;
+  pointer-events: none;
+}
+
+.c1.btn:disabled,
+.c1.btn:disabled:hover {
+  color: #9F9D9C;
+  background-color: #EDEBE9;
+  box-shadow: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c1.Button .Button__icon {
+  margin-right: 1.6rem;
+}
+
+.c1.Button--icon-only:focus {
+  outline: none;
+}
+
+.c1.Button--icon-only .Button__icon {
+  margin-right: 0;
+}
+
+.c2.c2.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c2.c2.btn:hover,
+.c2.c2.btn:focus,
+.c2.c2.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c2.c2.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c2.c2.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c2.c2.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c2.c2.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c2.c2.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c2.c2.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c2.c2.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c2.c2.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+    class="c0"
   >
-    <svg
-      fill="currentColor"
-      height="2rem"
-      stroke="currentColor"
-      stroke-width="0"
-      viewBox="0 0 576 512"
-      width="2rem"
-      xmlns="http://www.w3.org/2000/svg"
+    <button
+      class="c1 Button c2 btn btn-primary"
+      data-testid="edit-button"
+      title="edit"
+      type="button"
     >
-      <path
-        d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-      />
-    </svg>
-  </button>
+      <div
+        class="Button__value"
+      >
+        <svg
+          fill="currentColor"
+          height="22"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 576 512"
+          width="22"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
 </DocumentFragment>
 `;
diff --git a/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap b/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap
index 8e65c118d1..3e29c69f89 100644
--- a/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap
+++ b/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap
@@ -271,15 +271,15 @@ exports[`NotesModal component > renders as expected 1`] = `
     >
       <svg
         fill="currentColor"
-        height="1em"
+        height="22"
         stroke="currentColor"
         stroke-width="0"
-        viewBox="0 0 384 512"
-        width="1em"
+        viewBox="0 0 576 512"
+        width="22"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+          d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
         />
       </svg>
     </div>
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
index cfa8dd2dd0..0e8e8e59c8 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
@@ -811,7 +811,8 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
               class="c5 c6"
             >
               <button
-                class="c7 Button c8 btn btn-light"
+                class="c7 Button c8 btn btn-primary"
+                data-testid="view-button"
                 title="View Contact"
                 type="button"
               >
@@ -823,20 +824,12 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
                     height="22"
                     stroke="currentColor"
                     stroke-width="0"
-                    viewBox="0 0 24 24"
+                    viewBox="0 0 576 512"
                     width="22"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M21 8V7l-3 2-3-2v1l3 2 3-2zm1-5H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm8-6h-8V6h8v6z"
+                      d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                     />
                   </svg>
                 </div>
@@ -998,7 +991,8 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
               class="c5 c6"
             >
               <button
-                class="c7 Button c8 btn btn-light"
+                class="c7 Button c8 btn btn-primary"
+                data-testid="view-button"
                 title="View Contact"
                 type="button"
               >
@@ -1010,20 +1004,12 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
                     height="22"
                     stroke="currentColor"
                     stroke-width="0"
-                    viewBox="0 0 24 24"
+                    viewBox="0 0 576 512"
                     width="22"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M21 8V7l-3 2-3-2v1l3 2 3-2zm1-5H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm8-6h-8V6h8v6z"
+                      d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                     />
                   </svg>
                 </div>
@@ -1185,7 +1171,8 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
               class="c5 c6"
             >
               <button
-                class="c7 Button c8 btn btn-light"
+                class="c7 Button c8 btn btn-primary"
+                data-testid="view-button"
                 title="View Contact"
                 type="button"
               >
@@ -1197,20 +1184,12 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
                     height="22"
                     stroke="currentColor"
                     stroke-width="0"
-                    viewBox="0 0 24 24"
+                    viewBox="0 0 576 512"
                     width="22"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M21 8V7l-3 2-3-2v1l3 2 3-2zm1-5H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm8-6h-8V6h8v6z"
+                      d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                     />
                   </svg>
                 </div>
diff --git a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
index 785e9ebc34..d5a7e41ddc 100644
--- a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
+++ b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
@@ -356,596 +356,6 @@ exports[`SideNavbar display and logic > renders 1`] = `
   min-width: max-content;
 }
 
-.c3.active svg {
-  fill: #FDB913;
-}
-
-@media (max-width:1225px) {
-  .c6 {
-    width: 32rem;
-  }
-
-  .c6.show {
-    -webkit-transform: translateX(32rem);
-    -ms-transform: translateX(32rem);
-    transform: translateX(32rem);
-  }
-}
-
-<div>
-  <div
-    class="Toastify"
-  />
-  <div />
-  <div
-    class="c0"
-  >
-    <div
-      class="c1"
-    >
-      <div
-        class="c2 nav-item"
-        data-testid="nav-tooltip-mapview"
-      >
-        <a
-          class="c3 nav-link"
-          href="#"
-          role="button"
-        >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 12.6826C10.7569 12.6826 9.75 13.6907 9.75 14.9326C9.75 16.1746 10.7569 17.1826 12 17.1826C13.2431 17.1826 14.25 16.1746 14.25 14.9326C14.25 13.6907 13.2431 12.6826 12 12.6826Z"
-            />
-            <path
-              d="M12.1725 0L0 12.825L3.075 12.7725V24H20.925V12.54L24 12.4875L12.1725 0ZM12.375 24C12 24 11.625 24 11.625 24C7.65 18.18 6.75 17.1375 6.75 15C6.75 12.0675 9.0975 9.6975 12 9.6975C14.9025 9.6975 17.25 12.075 17.25 15C17.25 17.1375 16.35 18.18 12.375 24Z"
-            />
-          </svg>
-        </a>
-      </div>
-      <div
-        class="c2 nav-item"
-        data-testid="nav-tooltip-project"
-      >
-        <a
-          class="c3 nav-link"
-          href="#"
-          role="button"
-        >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M24 14.3972H15V15.9905C15 16.8726 14.3333 17.5839 13.5067 17.5839H10.5067C9.68 17.5839 9.01333 16.8726 9.01333 15.9905V14.3972H0V20.7991C0 22.5631 1.34667 24 3 24H21C22.6533 24 24 22.5631 24 20.7991V14.3972ZM6 2.8026V4.80853H3C1.34667 4.80853 0 6.2454 0 8.00948V12.018H24V8.00948C24 6.2454 22.6533 4.80853 21 4.80853H18V2.8026C18 1.25192 16.8267 0 15.3733 0H8.62667C7.17333 0 6 1.25192 6 2.8026ZM8.62667 2.40427H15.3733C15.5733 2.40427 15.7467 2.58921 15.7467 2.8026V4.80853H8.25333V2.8026C8.25333 2.58921 8.42667 2.40427 8.62667 2.40427Z"
-            />
-          </svg>
-        </a>
-      </div>
-      <div
-        class="c2 nav-item"
-        data-testid="nav-tooltip-research"
-      >
-        <a
-          class="c3 nav-link"
-          href="#"
-          role="button"
-        >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.2118 13.0611H4.80296V10.1458H19.2118V13.0611ZM14.4089 19.7098H4.80296V16.7765H14.4089V19.7098ZM21.6059 4.75623H16.803H12L9.60591 0H2.39409C0 0 0 3.1546 0 4.75623V21.0847C0 22.6863 1.06404 24 2.39409 24H21.6059C22.9212 24 24 22.6863 24 21.0847V7.67157C24 6.06993 22.9212 4.75623 21.6059 4.75623Z"
-            />
-          </svg>
-        </a>
-      </div>
-      <div
-        class="c2 nav-item"
-        data-testid="nav-tooltip-acquisition"
-      >
-        <a
-          class="c3 nav-link"
-          href="#"
-          role="button"
-        >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M16.5896 7.61509H15.446V6.44474H16.5896V7.61509ZM16.5896 9.95579H15.446V8.78544H16.5896V9.95579ZM14.3024 7.61509H13.1588V6.44474H14.3024V7.61509ZM14.3024 9.95579H13.1588V8.78544H14.3024V9.95579ZM14.8666 0L6.8615 5.85175V8.78544H9.14867L18.4498 12.6086C19.7306 13.1391 20.5845 14.4031 20.5845 15.8075H22.8717V5.85175L14.8666 0ZM21.7281 18.1482H13.723L11.3291 17.29L11.7103 16.1821L13.723 16.9623H16.9403C17.6874 16.9623 18.2973 16.3381 18.2973 15.5735C18.2973 14.9961 17.9466 14.4812 17.413 14.2783L9.10292 11.1105H6.84625V21.6593L14.8513 23.9844L24 20.4734C24 19.1782 22.9784 18.1327 21.7128 18.1327L21.7281 18.1482ZM0 24H5.32433V11.1261H0V24Z"
-            />
-          </svg>
-        </a>
-      </div>
-      <div
-        class="c2 nav-item"
-        data-testid="nav-tooltip-leases&licences"
-      >
-        <a
-          class="c3 nav-link"
-          href="#"
-          role="button"
-        >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M18.6667 15H16V12H18.6667V15ZM18.6667 21H16V18H18.6667V21ZM5.33333 18H8V21H5.33333V18ZM5.33333 12H8V15H5.33333V12ZM5.33333 5.72331L6.66667 4.22329L7.45333 5.11164L8 5.72331V8.98544H5.33333V5.72331ZM13.3333 18V21H10.6667V18H13.3333ZM10.6667 15V12H13.3333V15H10.6667ZM12 4.22329L12.7867 5.11164L13.3333 5.72331V8.98544H10.6667V5.72331L11.2133 5.11164L12 4.22329ZM17.3333 4.22329L18.6667 5.72331V8.98544H16V5.72331L16.5467 5.11164L17.3333 4.22329ZM24 12V9.00001H21.3333V4.5L17.3333 0L14.6667 3L12 0L9.33333 3L6.66667 0L2.66667 4.5V9.00001H0V12H2.66667V15H0V18H2.66667V24H21.3333V18H24V15H21.3333V12H24Z"
-            />
-          </svg>
-        </a>
-      </div>
-      <div
-        class="c2 nav-item"
-        data-testid="nav-tooltip-disposition"
-      >
-        <a
-          class="c3 nav-link"
-          href="#"
-          role="button"
-        >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M21.3987 5.625C18.1918 7.77086 14.3226 15.3433 14.3226 21.1389H16.9566V24H7.59054V21.1389H10.4516C10.4516 15 6 6.75 0 6.75V3.61114C6.75 3.61114 10.4516 9 12.2598 14.25C13.875 9 15.871 5.625 19.7419 2.84712H14.8748V0H24V9.98597H21.3987V6V5.625Z"
-            />
-          </svg>
-        </a>
-      </div>
-      <div
-        class="c2 nav-item"
-        data-testid="nav-tooltip-subdivision&consolidation"
-      >
-        <a
-          class="c3 nav-link"
-          href="#"
-          role="button"
-        >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M14.5455 11.4112V0H2.56725C1.15289 0 0 1.60885 0 3.58259V20.4174C0 22.3912 1.15289 24 2.56725 24H4.99186L14.5455 11.4112Z"
-            />
-            <path
-              d="M21.6022 0H18.0722V12C18.0722 12.0994 18.0611 12.1989 18.05 12.2983L9.45459 24L21.6022 24C22.9232 24 24 22.3923 24 20.4199V3.58011C24 1.62431 22.9232 0 21.6022 0Z"
-            />
-          </svg>
-        </a>
-      </div>
-      <span
-        class="to-bottom"
-      >
-        <button
-          class="c4 Button Button--icon-only c5 btn btn-light"
-          title="expand"
-          type="button"
-        >
-          <div
-            class="Button__icon"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              stroke="currentColor"
-              stroke-width="0"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-              <path
-                d="M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6z"
-              />
-              <path
-                d="m13 6-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z"
-              />
-            </svg>
-          </div>
-        </button>
-      </span>
-    </div>
-    <div
-      class="c6"
-      data-testid="side-tray"
-    >
-      <div
-        class="c7"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`SideNavbar display and logic > renders 2`] = `
-.c4.btn {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 0.4rem 1.2rem;
-  border: 0.2rem solid transparent;
-  border-radius: 0.4rem;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 1.8rem;
-  font-family: 'BCSans','Noto Sans',Verdana,Arial,sans-serif;
-  font-weight: 700;
-  -webkit-letter-spacing: 0.1rem;
-  -moz-letter-spacing: 0.1rem;
-  -ms-letter-spacing: 0.1rem;
-  letter-spacing: 0.1rem;
-  cursor: pointer;
-}
-
-.c4.btn .Button__value {
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-}
-
-.c4.btn:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  opacity: 0.8;
-}
-
-.c4.btn:focus {
-  outline-width: 2px;
-  outline-style: solid;
-  outline-color: #2E5DD7;
-  outline-offset: 2px;
-  box-shadow: none;
-}
-
-.c4.btn.btn-primary {
-  color: #FFFFFF;
-  background-color: #013366;
-}
-
-.c4.btn.btn-primary:hover,
-.c4.btn.btn-primary:active,
-.c4.btn.btn-primary:focus {
-  background-color: #1E5189;
-}
-
-.c4.btn.btn-secondary {
-  color: #013366;
-  background: none;
-  border-color: #013366;
-}
-
-.c4.btn.btn-secondary:hover,
-.c4.btn.btn-secondary:active,
-.c4.btn.btn-secondary:focus {
-  color: #FFFFFF;
-  background-color: #013366;
-}
-
-.c4.btn.btn-info {
-  color: #9F9D9C;
-  border: none;
-  background: none;
-  padding-left: 0.6rem;
-  padding-right: 0.6rem;
-}
-
-.c4.btn.btn-info:hover,
-.c4.btn.btn-info:active,
-.c4.btn.btn-info:focus {
-  color: var(--surface-color-primary-button-hover);
-  background: none;
-}
-
-.c4.btn.btn-light {
-  color: #FFFFFF;
-  background-color: #606060;
-  border: none;
-}
-
-.c4.btn.btn-light:hover,
-.c4.btn.btn-light:active,
-.c4.btn.btn-light:focus {
-  color: #FFFFFF;
-  background-color: #606060;
-}
-
-.c4.btn.btn-dark {
-  color: #FFFFFF;
-  background-color: #474543;
-  border: none;
-}
-
-.c4.btn.btn-dark:hover,
-.c4.btn.btn-dark:active,
-.c4.btn.btn-dark:focus {
-  color: #FFFFFF;
-  background-color: #474543;
-}
-
-.c4.btn.btn-danger {
-  color: #FFFFFF;
-  background-color: #CE3E39;
-}
-
-.c4.btn.btn-danger:hover,
-.c4.btn.btn-danger:active,
-.c4.btn.btn-danger:focus {
-  color: #FFFFFF;
-  background-color: #CE3E39;
-}
-
-.c4.btn.btn-warning {
-  color: #FFFFFF;
-  background-color: #FCBA19;
-  border-color: #FCBA19;
-}
-
-.c4.btn.btn-warning:hover,
-.c4.btn.btn-warning:active,
-.c4.btn.btn-warning:focus {
-  color: #FFFFFF;
-  border-color: #FCBA19;
-  background-color: #FCBA19;
-}
-
-.c4.btn.btn-link {
-  font-size: 1.6rem;
-  font-weight: 400;
-  color: var(--surface-color-primary-button-default);
-  background: none;
-  border: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  min-height: 2.5rem;
-  line-height: 3rem;
-  -webkit-box-pack: left;
-  -webkit-justify-content: left;
-  -ms-flex-pack: left;
-  justify-content: left;
-  -webkit-letter-spacing: unset;
-  -moz-letter-spacing: unset;
-  -ms-letter-spacing: unset;
-  letter-spacing: unset;
-  text-align: left;
-  padding: 0;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c4.btn.btn-link:hover,
-.c4.btn.btn-link:active,
-.c4.btn.btn-link:focus {
-  color: var(--surface-color-primary-button-hover);
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border: none;
-  background: none;
-  box-shadow: none;
-  outline: none;
-}
-
-.c4.btn.btn-link:disabled,
-.c4.btn.btn-link.disabled {
-  color: #9F9D9C;
-  background: none;
-  pointer-events: none;
-}
-
-.c4.btn:disabled,
-.c4.btn:disabled:hover {
-  color: #9F9D9C;
-  background-color: #EDEBE9;
-  box-shadow: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-.c4.Button .Button__icon {
-  margin-right: 1.6rem;
-}
-
-.c4.Button--icon-only:focus {
-  outline: none;
-}
-
-.c4.Button--icon-only .Button__icon {
-  margin-right: 0;
-}
-
-.c5.btn.btn-light.Button {
-  padding: 0;
-  border: 0.1rem solid #9F9D9C;
-  background-color: white;
-  color: #474543;
-}
-
-.c5.btn.btn-light.Button:focus,
-.c5.btn.btn-light.Button:active {
-  background-color: white;
-  color: #474543;
-}
-
-.c5.btn,
-.c5 .Button__icon,
-.c5 svg {
-  max-width: 2.4rem;
-  min-width: 2.4rem;
-  max-height: 2.4rem;
-  min-height: 2.4rem;
-  font-size: 1.4rem;
-}
-
-.c1 {
-  height: calc( 100vh - 7.2rem - 4.4rem );
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-top: 1.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  grid-area: iconbar;
-  background-color: #003366;
-  -webkit-transition: 0.5s width;
-  transition: 0.5s width;
-  width: 6rem;
-}
-
-.c1 label {
-  color: white;
-  min-width: 8rem;
-}
-
-.c1.expanded {
-  width: 16rem;
-}
-
-.c1 .nav-item svg {
-  min-width: 2.4rem;
-}
-
-.c1 .to-bottom {
-  margin-top: auto;
-  margin-bottom: 1.6rem;
-}
-
-.c1 .nav-link {
-  padding: 0.8rem 1.6rem;
-}
-
-.c0 {
-  z-index: 1000;
-  position: relative;
-}
-
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 100%;
-}
-
-.c7 a {
-  font-size: 1.7rem;
-}
-
-.c6 {
-  height: 100%;
-  overflow-y: auto;
-  position: absolute;
-  top: 0;
-  right: 0;
-  background-color: white;
-  z-index: -1;
-  width: 64rem;
-  padding: 0.8rem 1.6rem;
-  text-align: left;
-  -webkit-transition: -webkit-transform 0.3s ease-in-out;
-  -webkit-transition: transform 0.3s ease-in-out;
-  transition: transform 0.3s ease-in-out;
-  box-shadow: 0.3rem 0 0.4rem rgba(0,0,0,0.2);
-}
-
-.c6.show {
-  -webkit-transform: translateX(64rem);
-  -ms-transform: translateX(64rem);
-  transform: translateX(64rem);
-}
-
-.c2 {
-  width: 100%;
-  margin-bottom: 2rem;
-  fill: #f2f2f2;
-}
-
-.c2:hover label {
-  color: #8ec6ff;
-}
-
-.c2:hover svg {
-  fill: #8ec6ff;
-}
-
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c3 svg {
-  fill: white;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
-
 .c3.active svg {
   fill: #fdb913;
 }
diff --git a/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/__snapshots__/FilterContentForm.test.tsx.snap b/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/__snapshots__/FilterContentForm.test.tsx.snap
index ab9355bac0..8dfaca5427 100644
--- a/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/__snapshots__/FilterContentForm.test.tsx.snap
+++ b/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/__snapshots__/FilterContentForm.test.tsx.snap
@@ -329,7 +329,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
             Show Ownership
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -614,7 +614,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
             Project
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -726,7 +726,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
             Tenure
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -1116,7 +1116,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
             Lease / Licence
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -1688,7 +1688,7 @@ exports[`FilterContentForm component > renders as expected 1`] = `
             Anomaly
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
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 fed21d1de1..45da1bd970 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
@@ -762,7 +762,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Mailing Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c10"
@@ -1016,7 +1016,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c10"
@@ -1270,7 +1270,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c10"
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 c1e64288d7..ca51252d64 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
@@ -906,7 +906,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c12"
@@ -1160,7 +1160,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c12"
@@ -1414,7 +1414,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c12"
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 7d41aa684c..1c7f2c2380 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
@@ -1123,7 +1123,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     </div>
                   </div>
                   <div
-                    class="pl-8 d-flex align-items-end col-auto"
+                    class="pl-2 d-flex align-items-end col-auto"
                   >
                     <svg
                       class="c20"
@@ -1377,7 +1377,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     Property Address
                   </div>
                   <div
-                    class="pl-8 d-flex align-items-end col-auto"
+                    class="pl-2 d-flex align-items-end col-auto"
                   >
                     <svg
                       class="c20"
@@ -1631,7 +1631,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     Billing Address
                   </div>
                   <div
-                    class="pl-8 d-flex align-items-end col-auto"
+                    class="pl-2 d-flex align-items-end col-auto"
                   >
                     <svg
                       class="c20"
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 cfec03d320..2960ab22b2 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
@@ -878,7 +878,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Mailing Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c10"
@@ -1132,7 +1132,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c10"
@@ -1386,7 +1386,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c10"
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 10cd1e8210..3fdd2c9ba0 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
@@ -979,7 +979,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c13"
@@ -1233,7 +1233,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c13"
@@ -1487,7 +1487,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c13"
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 b1958ad399..b7d1ba0e50 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
@@ -1126,7 +1126,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     </div>
                   </div>
                   <div
-                    class="pl-8 d-flex align-items-end col-auto"
+                    class="pl-2 d-flex align-items-end col-auto"
                   >
                     <svg
                       class="c19"
@@ -1380,7 +1380,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     Property Address
                   </div>
                   <div
-                    class="pl-8 d-flex align-items-end col-auto"
+                    class="pl-2 d-flex align-items-end col-auto"
                   >
                     <svg
                       class="c19"
@@ -1634,7 +1634,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     Billing Address
                   </div>
                   <div
-                    class="pl-8 d-flex align-items-end col-auto"
+                    class="pl-2 d-flex align-items-end col-auto"
                   >
                     <svg
                       class="c19"
diff --git a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
index 78669bc126..94f61226c4 100644
--- a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
+++ b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
@@ -1293,7 +1293,8 @@ exports[`Contact List View > matches snapshot 1`] = `
                       class="c6 c19"
                     >
                       <button
-                        class="c13 Button c20 btn btn-light"
+                        class="c13 Button c20 btn btn-primary"
+                        data-testid="view-button"
                         title="View Contact"
                         type="button"
                       >
@@ -1305,20 +1306,12 @@ exports[`Contact List View > matches snapshot 1`] = `
                             height="22"
                             stroke="currentColor"
                             stroke-width="0"
-                            viewBox="0 0 24 24"
+                            viewBox="0 0 576 512"
                             width="22"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M0 0h24v24H0z"
-                              fill="none"
-                            />
-                            <path
-                              d="M0 0h24v24H0z"
-                              fill="none"
-                            />
-                            <path
-                              d="M21 8V7l-3 2-3-2v1l3 2 3-2zm1-5H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm8-6h-8V6h8v6z"
+                              d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                             />
                           </svg>
                         </div>
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 7b4ecdff3e..930c304f7a 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
@@ -368,7 +368,7 @@ exports[`Document List View > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c3"
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 bf4781f524..7472b35931 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
@@ -350,7 +350,7 @@ exports[`DepositsContainer > renders as expected 1`] = `
             </span>
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c4"
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 4d62b76767..00dc22fdf3 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
@@ -44,7 +44,7 @@ exports[`DepositNotes component > renders as expected 1`] = `
           </span>
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c2"
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 7a4d94dd9e..4d60cfd147 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
@@ -45,7 +45,6 @@ exports[`DepositsReturnedContainer component > renders as expected 1`] = `
 
 .c3 .btn.btn-primary {
   background-color: transparent;
-  padding: 0;
 }
 
 <div
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 de521ca74c..e950be914e 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
@@ -57,7 +57,7 @@ exports[`DetailAdministration component > renders a complete lease as expected 1
           Administration
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c2"
@@ -505,7 +505,7 @@ exports[`DetailAdministration component > renders minimally as expected 1`] = `
           Administration
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c2"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap
index b1c5e44aa6..fbaab5901e 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`DetailFeeDetermination component > renders a complete lease as expected
           Fee Determination
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c2"
@@ -330,7 +330,7 @@ exports[`DetailFeeDetermination component > renders minimally as expected 1`] =
           Fee Determination
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c2"
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 3cc3cf47e4..3ddcf5b02b 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
@@ -73,7 +73,7 @@ exports[`LeasePropertiesInformation component > renders as expected 1`] = `
           Property Information
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c2"
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 db4b1781a4..4e65a951d8 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
@@ -315,7 +315,7 @@ exports[`Lease Documents Page > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c3"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.test.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.test.tsx
index ae42ef7d5c..82936f1605 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.test.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/PeriodPaymentsContainer.test.tsx
@@ -477,7 +477,7 @@ describe('PeriodsPaymentsContainer component', () => {
 
       const expander = await findByTestId('table-row-expander-');
       await act(async () => userEvent.click(expander));
-      const editButton = await findAllByTitle('edit actual');
+      const editButton = await findAllByTitle('edit payment');
       await act(async () => {
         userEvent.click(editButton[0]);
       });
@@ -506,7 +506,7 @@ describe('PeriodsPaymentsContainer component', () => {
       const expander = getByTestId('table-row-expander-');
       await act(async () => userEvent.click(expander));
 
-      const deleteButton = (await findAllByTitle('delete actual'))[0];
+      const deleteButton = (await findAllByTitle('delete payment'))[0];
       await act(async () => userEvent.click(deleteButton));
       const warning = getByText('You are about to delete a payment. Do you wish to continue?');
       expect(warning).toBeVisible();
@@ -529,7 +529,7 @@ describe('PeriodsPaymentsContainer component', () => {
       const expander = getByTestId('table-row-expander-');
       await act(async () => userEvent.click(expander));
 
-      const deleteButton = (await findAllByTitle('delete actual'))[0];
+      const deleteButton = (await findAllByTitle('delete payment'))[0];
       await act(async () => userEvent.click(deleteButton));
       const warning = getByText('You are about to delete a payment. Do you wish to continue?');
       expect(warning).toBeVisible();
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/PeriodPaymentsContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/PeriodPaymentsContainer.test.tsx.snap
index d1a599a309..275311671e 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/PeriodPaymentsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/PeriodPaymentsContainer.test.tsx.snap
@@ -910,6 +910,86 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
   margin-right: 0;
 }
 
+.c8.c8.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c8.c8.btn:hover,
+.c8.c8.btn:focus,
+.c8.c8.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c8.c8.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c8.c8.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c9.c9.btn.btn-primary {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: unset;
+}
+
+.c9.c9.btn.btn-primary svg {
+  color: #aaaaaa !important;
+}
+
+.c9.c9.btn.btn-primary .text {
+  display: none;
+}
+
+.c9.c9.btn.btn-primary svg:hover,
+.c9.c9.btn.btn-primary svg:active,
+.c9.c9.btn.btn-primary svg:focus {
+  color: #d8292f !important;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: unset;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c9.c9.btn.btn-primary svg:hover .text,
+.c9.c9.btn.btn-primary svg:active .text,
+.c9.c9.btn.btn-primary svg:focus .text {
+  display: inline;
+  line-height: 2rem;
+}
+
 .c1 {
   font-weight: bold;
   color: var(--theme-blue-100);
@@ -1458,57 +1538,47 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
                   class="c6 c7"
                 >
                   <button
-                    class="c3 Button Button--icon-only btn btn-primary"
+                    class="c3 Button c8 btn btn-primary"
+                    data-testid="edit-button"
                     title="edit period"
                     type="button"
                   >
                     <div
-                      class="Button__icon"
+                      class="Button__value"
                     >
                       <svg
                         fill="currentColor"
-                        height="24"
-                        id="edit-period-0"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
-                        viewBox="0 0 24 24"
-                        width="24"
+                        viewBox="0 0 576 512"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title>
-                          edit period
-                        </title>
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
                         <path
-                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
                         />
                       </svg>
                     </div>
                   </button>
                   <button
-                    class="c3 Button Button--icon-only btn btn-primary"
+                    class="c3 Button c8 c9 btn btn-primary"
+                    data-testid="remove-button"
                     title="delete period"
                     type="button"
                   >
                     <div
-                      class="Button__icon"
+                      class="Button__value"
                     >
                       <svg
                         fill="currentColor"
-                        height="24"
-                        id="delete-period-0"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
                         viewBox="0 0 448 512"
-                        width="24"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title>
-                          delete period
-                        </title>
                         <path
                           d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
                         />
@@ -1743,6 +1813,86 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
   margin-right: 0;
 }
 
+.c8.c8.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c8.c8.btn:hover,
+.c8.c8.btn:focus,
+.c8.c8.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c8.c8.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c8.c8.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c9.c9.btn.btn-primary {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: unset;
+}
+
+.c9.c9.btn.btn-primary svg {
+  color: #aaaaaa !important;
+}
+
+.c9.c9.btn.btn-primary .text {
+  display: none;
+}
+
+.c9.c9.btn.btn-primary svg:hover,
+.c9.c9.btn.btn-primary svg:active,
+.c9.c9.btn.btn-primary svg:focus {
+  color: #d8292f !important;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: unset;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c9.c9.btn.btn-primary svg:hover .text,
+.c9.c9.btn.btn-primary svg:active .text,
+.c9.c9.btn.btn-primary svg:focus .text {
+  display: inline;
+  line-height: 2rem;
+}
+
 .c1 {
   font-weight: bold;
   color: var(--theme-blue-100);
@@ -2291,57 +2441,47 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
                   class="c6 c7"
                 >
                   <button
-                    class="c3 Button Button--icon-only btn btn-primary"
+                    class="c3 Button c8 btn btn-primary"
+                    data-testid="edit-button"
                     title="edit period"
                     type="button"
                   >
                     <div
-                      class="Button__icon"
+                      class="Button__value"
                     >
                       <svg
                         fill="currentColor"
-                        height="24"
-                        id="edit-period-0"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
-                        viewBox="0 0 24 24"
-                        width="24"
+                        viewBox="0 0 576 512"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title>
-                          edit period
-                        </title>
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
                         <path
-                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
                         />
                       </svg>
                     </div>
                   </button>
                   <button
-                    class="c3 Button Button--icon-only btn btn-primary"
+                    class="c3 Button c8 c9 btn btn-primary"
+                    data-testid="remove-button"
                     title="delete period"
                     type="button"
                   >
                     <div
-                      class="Button__icon"
+                      class="Button__value"
                     >
                       <svg
                         fill="currentColor"
-                        height="24"
-                        id="delete-period-0"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
                         viewBox="0 0 448 512"
-                        width="24"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title>
-                          delete period
-                        </title>
                         <path
                           d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
                         />
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/PaymentsView.test.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/PaymentsView.test.tsx
index 6766c195f7..aa8b77a4c6 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/PaymentsView.test.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/PaymentsView.test.tsx
@@ -118,7 +118,7 @@ describe('PaymentsView component', () => {
         claims: [Claims.LEASE_DELETE],
       });
 
-      const editButton = await queryByTitle('edit actual');
+      const editButton = await queryByTitle('edit payment');
       expect(editButton).toBeNull();
     });
 
@@ -130,7 +130,7 @@ describe('PaymentsView component', () => {
         claims: [Claims.LEASE_EDIT],
       });
 
-      const editButton = await findAllByTitle('edit actual');
+      const editButton = await findAllByTitle('edit payment');
       expect(editButton[0]).toBeVisible();
     });
 
@@ -153,7 +153,7 @@ describe('PaymentsView component', () => {
         initialValues: getDefaultLeaseWithPeriodsPayments(),
         claims: [Claims.LEASE_EDIT],
       });
-      const deleteButton = await findAllByTitle('delete actual');
+      const deleteButton = await findAllByTitle('delete payment');
       expect(deleteButton[0]).toBeVisible();
     });
   });
@@ -276,7 +276,7 @@ describe('PaymentsView component', () => {
         initialValues: getDefaultLeaseWithPeriodsPayments(),
         isReceivable: false,
       });
-      const editButton = await findAllByTitle('edit actual');
+      const editButton = await findAllByTitle('edit payment');
       await act(async () => userEvent.click(editButton[0]));
       expect(onEdit).toHaveBeenCalledWith(defaultTestFormLeasePayment);
     });
@@ -289,7 +289,7 @@ describe('PaymentsView component', () => {
         isReceivable: false,
         claims: [Claims.LEASE_EDIT],
       });
-      const deleteButton = await findAllByTitle('delete actual');
+      const deleteButton = await findAllByTitle('delete payment');
       await act(async () => userEvent.click(deleteButton[0]));
       expect(onDelete).toHaveBeenCalledWith(defaultTestFormLeasePayment);
     });
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/__snapshots__/PaymentPeriodsView.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/__snapshots__/PaymentPeriodsView.test.tsx.snap
index fffaa70b5d..3ad4038bce 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/__snapshots__/PaymentPeriodsView.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/__snapshots__/PaymentPeriodsView.test.tsx.snap
@@ -822,6 +822,86 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
   margin-right: 0;
 }
 
+.c8.c8.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c8.c8.btn:hover,
+.c8.c8.btn:focus,
+.c8.c8.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c8.c8.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c8.c8.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c9.c9.btn.btn-primary {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: unset;
+}
+
+.c9.c9.btn.btn-primary svg {
+  color: #aaaaaa !important;
+}
+
+.c9.c9.btn.btn-primary .text {
+  display: none;
+}
+
+.c9.c9.btn.btn-primary svg:hover,
+.c9.c9.btn.btn-primary svg:active,
+.c9.c9.btn.btn-primary svg:focus {
+  color: #d8292f !important;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  opacity: unset;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c9.c9.btn.btn-primary svg:hover .text,
+.c9.c9.btn.btn-primary svg:active .text,
+.c9.c9.btn.btn-primary svg:focus .text {
+  display: inline;
+  line-height: 2rem;
+}
+
 .c1 {
   font-weight: bold;
   color: var(--theme-blue-100);
@@ -1370,57 +1450,47 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
                   class="c6 c7"
                 >
                   <button
-                    class="c3 Button Button--icon-only btn btn-primary"
+                    class="c3 Button c8 btn btn-primary"
+                    data-testid="edit-button"
                     title="edit period"
                     type="button"
                   >
                     <div
-                      class="Button__icon"
+                      class="Button__value"
                     >
                       <svg
                         fill="currentColor"
-                        height="24"
-                        id="edit-period-0"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
-                        viewBox="0 0 24 24"
-                        width="24"
+                        viewBox="0 0 576 512"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title>
-                          edit period
-                        </title>
-                        <path
-                          d="M0 0h24v24H0z"
-                          fill="none"
-                        />
                         <path
-                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                          d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
                         />
                       </svg>
                     </div>
                   </button>
                   <button
-                    class="c3 Button Button--icon-only btn btn-primary"
+                    class="c3 Button c8 c9 btn btn-primary"
+                    data-testid="remove-button"
                     title="delete period"
                     type="button"
                   >
                     <div
-                      class="Button__icon"
+                      class="Button__value"
                     >
                       <svg
                         fill="currentColor"
-                        height="24"
-                        id="delete-period-0"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
                         viewBox="0 0 448 512"
-                        width="24"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title>
-                          delete period
-                        </title>
                         <path
                           d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
                         />
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 006bbe89bb..8b6cdbf5f0 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
@@ -444,6 +444,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 
 .c31 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c33 {
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap
index a6bee72b71..b1837d11f6 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c7.btn {
+  .c5.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,19 +35,19 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c7.btn .Button__value {
+.c5.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c7.btn:hover {
+.c5.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c7.btn:focus {
+.c5.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -55,31 +55,31 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   box-shadow: none;
 }
 
-.c7.btn.btn-primary {
+.c5.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c7.btn.btn-primary:hover,
-.c7.btn.btn-primary:active,
-.c7.btn.btn-primary:focus {
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c7.btn.btn-secondary {
+.c5.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c7.btn.btn-secondary:hover,
-.c7.btn.btn-secondary:active,
-.c7.btn.btn-secondary:focus {
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c7.btn.btn-info {
+.c5.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -87,66 +87,66 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   padding-right: 0.6rem;
 }
 
-.c7.btn.btn-info:hover,
-.c7.btn.btn-info:active,
-.c7.btn.btn-info:focus {
+.c5.btn.btn-info:hover,
+.c5.btn.btn-info:active,
+.c5.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c7.btn.btn-light {
+.c5.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c7.btn.btn-light:hover,
-.c7.btn.btn-light:active,
-.c7.btn.btn-light:focus {
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c7.btn.btn-dark {
+.c5.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c7.btn.btn-dark:hover,
-.c7.btn.btn-dark:active,
-.c7.btn.btn-dark:focus {
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c7.btn.btn-danger {
+.c5.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c7.btn.btn-danger:hover,
-.c7.btn.btn-danger:active,
-.c7.btn.btn-danger:focus {
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c7.btn.btn-warning {
+.c5.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c7.btn.btn-warning:hover,
-.c7.btn.btn-warning:active,
-.c7.btn.btn-warning:focus {
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c7.btn.btn-link {
+.c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -170,9 +170,9 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   text-decoration: underline;
 }
 
-.c7.btn.btn-link:hover,
-.c7.btn.btn-link:active,
-.c7.btn.btn-link:focus {
+.c5.btn.btn-link:hover,
+.c5.btn.btn-link:active,
+.c5.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -182,15 +182,15 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   outline: none;
 }
 
-.c7.btn.btn-link:disabled,
-.c7.btn.btn-link.disabled {
+.c5.btn.btn-link:disabled,
+.c5.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c7.btn:disabled,
-.c7.btn:disabled:hover {
+.c5.btn:disabled,
+.c5.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -202,24 +202,71 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   cursor: not-allowed;
 }
 
-.c7.Button .Button__icon {
+.c5.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c7.Button--icon-only:focus {
+.c5.Button--icon-only:focus {
   outline: none;
 }
 
-.c7.Button--icon-only .Button__icon {
+.c5.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c5 {
-  fill: #007bff;
+.c6.c6.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c6.c6.btn:hover,
+.c6.c6.btn:focus,
+.c6.c6.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c6.c6.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c6.c6.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c6.c6.btn.btn-primary svg {
+  color: #013366;
 }
 
-.c5:hover {
-  fill: #0056b3;
+.c6.c6.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c6.c6.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c6.c6.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c6.c6.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c6.c6.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c7 {
+  fill: #013366;
+}
+
+.c7:hover {
+  fill: #1E5189;
 }
 
 .c0 {
@@ -251,7 +298,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   font-size: 1.4rem;
 }
 
-.c6 {
+.c8 {
   background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
@@ -273,7 +320,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   align-items: center;
 }
 
-.c6.selected {
+.c8.selected {
   background-color: #FCBA19;
 }
 
@@ -326,31 +373,35 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
           Properties
         </span>
         <button
-          class="btn btn-link"
+          class="c5 Button c6 btn btn-primary"
           data-testid="edit-button"
           title="Change properties"
           type="button"
         >
-          <svg
-            class="c5"
-            data-name="Layer 2"
-            height="2.4rem"
-            id="Layer_2"
-            viewBox="0 0 56.95 85.87"
-            width="2.4rem"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            class="Button__value"
           >
-            <defs />
-            <g
-              data-name="PDF preview"
-              id="PDF_preview"
+            <svg
+              class="c7"
+              data-name="Layer 2"
+              height="2.4rem"
+              id="Layer_2"
+              viewBox="0 0 56.95 85.87"
+              width="2.4rem"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                class="cls-1"
-                d="M55.16,5.56l-3.76-3.77c-2.39-2.39-6.25-2.39-8.64,0h0l-4.62,4.62s.68,.43,1.61,1.04L17,30.68l-1.24-1.83-.23,.23c.05-.05,.09-.11,.15-.16L38.13,6.41C22.22-.8-1.23,7.37,.05,30.58c1.08,19.67,26.62,55.29,26.62,55.29,0,0,24.8-35.75,25.6-55.29,.18-4.48-.53-8.4-1.91-11.75l-22.29,22.5s-.06,.05-.09,.08l.18-.18-1.51-1.05,22.67-23.17c.36,.57,.71,1.17,1.05,1.8l4.81-4.63c2.39-2.39,2.39-6.25,0-8.64Zm-14.73,2.36c1.49,1,3.3,2.27,4.08,3.02,.03,.02,.07,.07,.1,.1l-24.17,24.7-2.96-4.36L40.44,7.93Zm-12.99,33.95c-.87,.71-1.87,1.25-2.95,1.58l-11.49,3.38c-.8,.23-3.92,2.38-4.51,1.78-.59-.59,1.44-3.83,1.67-4.64l3.38-11.49c.32-1.08,.86-2.08,1.57-2.94l5.16,6.81,7.17,5.52Zm-1.51-2.16l-4.9-3.39L45.19,11.64c.87,.92,2.26,2.54,3.65,4.67l-22.91,23.41Z"
-              />
-            </g>
-          </svg>
+              <defs />
+              <g
+                data-name="PDF preview"
+                id="PDF_preview"
+              >
+                <path
+                  class="cls-1"
+                  d="M55.16,5.56l-3.76-3.77c-2.39-2.39-6.25-2.39-8.64,0h0l-4.62,4.62s.68,.43,1.61,1.04L17,30.68l-1.24-1.83-.23,.23c.05-.05,.09-.11,.15-.16L38.13,6.41C22.22-.8-1.23,7.37,.05,30.58c1.08,19.67,26.62,55.29,26.62,55.29,0,0,24.8-35.75,25.6-55.29,.18-4.48-.53-8.4-1.91-11.75l-22.29,22.5s-.06,.05-.09,.08l.18-.18-1.51-1.05,22.67-23.17c.36,.57,.71,1.17,1.05,1.8l4.81-4.63c2.39-2.39,2.39-6.25,0-8.64Zm-14.73,2.36c1.49,1,3.3,2.27,4.08,3.02,.03,.02,.07,.07,.1,.1l-24.17,24.7-2.96-4.36L40.44,7.93Zm-12.99,33.95c-.87,.71-1.87,1.25-2.95,1.58l-11.49,3.38c-.8,.23-3.92,2.38-4.51,1.78-.59-.59,1.44-3.83,1.67-4.64l3.38-11.49c.32-1.08,.86-2.08,1.57-2.94l5.16,6.81,7.17,5.52Zm-1.51-2.16l-4.9-3.39L45.19,11.64c.87,.92,2.26,2.54,3.65,4.67l-22.91,23.41Z"
+                />
+              </g>
+            </svg>
+          </div>
         </button>
       </div>
     </div>
@@ -365,7 +416,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
         class="pr-2 col-auto"
       >
         <div
-          class="c6"
+          class="c8"
         >
           1
         </div>
@@ -374,7 +425,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
         class="col"
       >
         <button
-          class="c7 Button btn btn-link"
+          class="c5 Button btn btn-link"
           title="View"
           type="button"
         >
@@ -397,7 +448,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
         class="pr-2 col-auto"
       >
         <div
-          class="c6"
+          class="c8"
         >
           2
         </div>
@@ -406,7 +457,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
         class="col"
       >
         <button
-          class="c7 Button btn btn-link"
+          class="c5 Button btn btn-link"
           title="View"
           type="button"
         >
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 e90ecd106a..d0ebf8afb1 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
@@ -64,6 +64,7 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
 
 .c3 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c5 {
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
index f0b3828a75..3386903593 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
@@ -101,7 +101,7 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                               />
                               <RemoveIconButton
                                 title="Delete Agreement"
-                                data-testid={`agreements[${index}].delete-btn`}
+                                dataTestId={`agreements[${index}].delete-btn`}
                                 icon={<FaTrash size={'1.75rem'} />}
                                 onRemove={() => {
                                   setModalContent({
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 631ccb72f1..9b50c51906 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
@@ -439,7 +439,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="pl-8 d-flex align-items-end col-auto"
+                  class="pl-2 d-flex align-items-end col-auto"
                 >
                   <svg
                     class="c9"
@@ -752,7 +752,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="pl-8 d-flex align-items-end col-auto"
+                  class="pl-2 d-flex align-items-end col-auto"
                 >
                   <svg
                     class="c9"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
index b119cce161..c223922c5c 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
@@ -78,7 +78,7 @@ export const Form8PaymentItemsSubForm: React.FunctionComponent<IForm8PaymentItem
                   <label>Payment Item {index + 1}</label>
                   <RemoveIconButton
                     title="Delete Payment Item"
-                    data-testid={`paymentItems[${index}].delete-button`}
+                    dataTestId={`paymentItems[${index}].delete-button`}
                     onRemove={() => {
                       setModalContent({
                         ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
index 25e84ad0ef..8c9fa5ea81 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
@@ -68,7 +68,7 @@ export const ExpropriationForm8Details: React.FunctionComponent<
               />
               <RemoveIconButton
                 title="Delete Form 8"
-                data-testid={`form8[${form8Index}].delete-form8`}
+                dataTestId={`form8[${form8Index}].delete-form8`}
                 onRemove={() => {
                   setModalContent({
                     ...getDeleteModalProps(),
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 526378ef54..0bae480941 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
@@ -13,6 +13,7 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = `
 
 .c1 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c3 {
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 740e340828..ae1a67bf31 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
@@ -19,6 +19,7 @@ exports[`StakeHolderView component > renders as expected 1`] = `
 
 .c1 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c3 {
@@ -57,7 +58,7 @@ exports[`StakeHolderView component > renders as expected 1`] = `
             Interests
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c4"
@@ -361,7 +362,7 @@ exports[`StakeHolderView component > renders as expected 1`] = `
             Non-interest Payees
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c3"
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 737d6f49d9..5b934decd3 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
@@ -215,35 +215,81 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 }
 
 .c9.c9.btn {
-  color: #aaaaaa;
+  background-color: unset;
+  border: none;
+}
+
+.c9.c9.btn:hover,
+.c9.c9.btn:focus,
+.c9.c9.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c9.c9.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c9.c9.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c9.c9.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c9.c9.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c9.c9.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c9.c9.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c9.c9.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c9.c9.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c10.c10.btn.btn-primary {
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c9.c9.btn .text {
+.c10.c10.btn.btn-primary svg {
+  color: #aaaaaa !important;
+}
+
+.c10.c10.btn.btn-primary .text {
   display: none;
 }
 
-.c9.c9.btn:hover,
-.c9.c9.btn:active,
-.c9.c9.btn:focus {
-  color: #d8292f;
+.c10.c10.btn.btn-primary svg:hover,
+.c10.c10.btn.btn-primary svg:active,
+.c10.c10.btn.btn-primary svg:focus {
+  color: #d8292f !important;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.c9.c9.btn:hover .text,
-.c9.c9.btn:active .text,
-.c9.c9.btn:focus .text {
+.c10.c10.btn.btn-primary svg:hover .text,
+.c10.c10.btn.btn-primary svg:active .text,
+.c10.c10.btn.btn-primary svg:focus .text {
   display: inline;
   line-height: 2rem;
 }
@@ -323,7 +369,7 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
   font-weight: bold;
 }
 
-.c10 {
+.c11 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -479,7 +525,8 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
                 class="col-auto"
               >
                 <button
-                  class="c7 Button c9 btn btn-link"
+                  class="c7 Button c9 c10 btn btn-primary"
+                  data-testid="remove-button"
                   title="Remove Interest"
                   type="button"
                 >
@@ -488,11 +535,11 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
                   >
                     <svg
                       fill="currentColor"
-                      height="2rem"
+                      height="22"
                       stroke="currentColor"
                       stroke-width="0"
                       viewBox="0 0 448 512"
-                      width="2rem"
+                      width="22"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
@@ -950,7 +997,7 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
                       title=""
                     >
                       <div
-                        class="c10"
+                        class="c11"
                       >
                         PID: 023-214-937
                       </div>
@@ -988,7 +1035,7 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
                       title=""
                     >
                       <div
-                        class="c10"
+                        class="c11"
                       >
                         PID: 024-996-777
                       </div>
@@ -1109,7 +1156,8 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
                 class="col-auto"
               >
                 <button
-                  class="c7 Button c9 btn btn-link"
+                  class="c7 Button c9 c10 btn btn-primary"
+                  data-testid="remove-button"
                   title="Remove Interest"
                   type="button"
                 >
@@ -1118,11 +1166,11 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
                   >
                     <svg
                       fill="currentColor"
-                      height="2rem"
+                      height="22"
                       stroke="currentColor"
                       stroke-width="0"
                       viewBox="0 0 448 512"
-                      width="2rem"
+                      width="22"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
@@ -1580,7 +1628,7 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
                       title=""
                     >
                       <div
-                        class="c10"
+                        class="c11"
                       >
                         PID: 023-214-937
                       </div>
@@ -1618,7 +1666,7 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
                       title=""
                     >
                       <div
-                        class="c10"
+                        class="c11"
                       >
                         PID: 024-996-777
                       </div>
diff --git a/source/frontend/src/features/mapSideBar/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
index 9f20af92f5..c8b57e948b 100644
--- a/source/frontend/src/features/mapSideBar/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
@@ -754,7 +754,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             Financial Coding
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c11"
@@ -937,7 +937,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             Payment
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c11"
@@ -1059,7 +1059,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             Financial Activities
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c11"
diff --git a/source/frontend/src/features/mapSideBar/compensation/list/__snapshots__/CompensationListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
index ac6c68ee8d..0ca580611f 100644
--- a/source/frontend/src/features/mapSideBar/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
@@ -6,7 +6,285 @@ exports[`compensation list view > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c2 {
+  .c7.btn {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0.4rem 1.2rem;
+  border: 0.2rem solid transparent;
+  border-radius: 0.4rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1.8rem;
+  font-family: 'BCSans','Noto Sans',Verdana,Arial,sans-serif;
+  font-weight: 700;
+  -webkit-letter-spacing: 0.1rem;
+  -moz-letter-spacing: 0.1rem;
+  -ms-letter-spacing: 0.1rem;
+  letter-spacing: 0.1rem;
+  cursor: pointer;
+}
+
+.c7.btn .Button__value {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.c7.btn:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  opacity: 0.8;
+}
+
+.c7.btn:focus {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: #2E5DD7;
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c7.btn.btn-secondary {
+  color: #013366;
+  background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-info {
+  color: #9F9D9C;
+  border: none;
+  background: none;
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+}
+
+.c7.btn.btn-info:hover,
+.c7.btn.btn-info:active,
+.c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
+  background: none;
+}
+
+.c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
+  border: none;
+}
+
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
+  border: none;
+}
+
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c7.btn.btn-link {
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: var(--surface-color-primary-button-default);
+  background: none;
+  border: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  min-height: 2.5rem;
+  line-height: 3rem;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-letter-spacing: unset;
+  -moz-letter-spacing: unset;
+  -ms-letter-spacing: unset;
+  letter-spacing: unset;
+  text-align: left;
+  padding: 0;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c7.btn.btn-link:hover,
+.c7.btn.btn-link:active,
+.c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  border: none;
+  background: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.c7.btn.btn-link:disabled,
+.c7.btn.btn-link.disabled {
+  color: #9F9D9C;
+  background: none;
+  pointer-events: none;
+}
+
+.c7.btn:disabled,
+.c7.btn:disabled:hover {
+  color: #9F9D9C;
+  background-color: #EDEBE9;
+  box-shadow: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c7.Button .Button__icon {
+  margin-right: 1.6rem;
+}
+
+.c7.Button--icon-only:focus {
+  outline: none;
+}
+
+.c7.Button--icon-only .Button__icon {
+  margin-right: 0;
+}
+
+.c8.c8.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c8.c8.btn:hover,
+.c8.c8.btn:focus,
+.c8.c8.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c8.c8.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c8.c8.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
   font-weight: bold;
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
@@ -150,27 +428,35 @@ exports[`compensation list view > renders as expected 1`] = `
         <div
           class="c5 text-right d-flex justify-content-end col"
         >
-          $0.00
-          <button
-            class="btn btn-link"
-            data-testid="edit-button"
-            title="edit"
-            type="button"
+          <div
+            class="c6"
           >
-            <svg
-              fill="currentColor"
-              height="2rem"
-              stroke="currentColor"
-              stroke-width="0"
-              viewBox="0 0 576 512"
-              width="2rem"
-              xmlns="http://www.w3.org/2000/svg"
+            $0.00
+            <button
+              class="c7 Button c8 btn btn-primary"
+              data-testid="edit-button"
+              title="edit"
+              type="button"
             >
-              <path
-                d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-              />
-            </svg>
-          </button>
+              <div
+                class="Button__value"
+              >
+                <svg
+                  fill="currentColor"
+                  height="22"
+                  stroke="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 576 512"
+                  width="22"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
         </div>
       </div>
       <hr />
@@ -321,7 +607,7 @@ exports[`compensation list view > renders as expected 1`] = `
           Requisitions in this file (H120)
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c2"
diff --git a/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx b/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
index b2c19b28de..a217c475c7 100644
--- a/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
@@ -108,7 +108,7 @@ export function createCompensationTableColumns(
               canEditDetails(cellProps.row.original.isDraft) && (
                 <RemoveIconButton
                   id={`compensation-delete-${cellProps.row.id}`}
-                  data-testid={`compensation-delete-${cellProps.row.id}`}
+                  dataTestId={`compensation-delete-${cellProps.row.id}`}
                   onRemove={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
                   title="Delete Compensation"
                 />
diff --git a/source/frontend/src/features/mapSideBar/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
index d015c2f5d9..086c53fd10 100644
--- a/source/frontend/src/features/mapSideBar/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
@@ -1217,7 +1217,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               Payment
             </div>
             <div
-              class="pl-8 d-flex align-items-end col-auto"
+              class="pl-2 d-flex align-items-end col-auto"
             >
               <svg
                 class="c12"
@@ -1524,7 +1524,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               Activities
             </div>
             <div
-              class="pl-8 d-flex align-items-end col-auto"
+              class="pl-2 d-flex align-items-end col-auto"
             >
               <svg
                 class="c12"
diff --git a/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx b/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
index 247730680a..ade7643d77 100644
--- a/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
@@ -89,7 +89,7 @@ export const FinancialActivitiesSubForm: React.FunctionComponent<
                     <label>Activity {index + 1}</label>
                     <RemoveIconButton
                       title="Delete Financial Activity"
-                      data-testid={`activity[${index}].delete-button`}
+                      dataTestId={`activity[${index}].delete-button`}
                       onRemove={() => {
                         setRowToDelete(index);
                         setShowModal(true);
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 1ae443086e..6fc7fbcfcf 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
@@ -411,6 +411,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 
 .c31 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c35 {
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 4c4b3fa4cc..1baf25206f 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
@@ -64,6 +64,7 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
 
 .c3 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c7 {
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 5da768d72d..99ccd29647 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
@@ -13,6 +13,7 @@ exports[`DispositionSummaryView component > matches snapshot 1`] = `
 
 .c1 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c5 {
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 e7a30b4dec..9ebae227cb 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
@@ -145,7 +145,7 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c3"
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
index c27882af26..9c3d423ed6 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
@@ -56,7 +56,7 @@ const DispositionOfferDetails: React.FunctionComponent<IDispositionOfferDetailsP
             />
             <RemoveIconButton
               title="Delete Offer"
-              data-testid={`Offer[${index}].delete-btn`}
+              dataTestId={`Offer[${index}].delete-btn`}
               onRemove={() => {
                 setModalContent({
                   ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
index e2fd1c9a16..ded0361c65 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
@@ -42,7 +42,7 @@ const DispositionSalePurchaserSubForm: React.FunctionComponent<
                   <Col xs="auto" xl="2" className="pl-3 mt-2">
                     <RemoveIconButton
                       title="Remove Purchaser"
-                      data-testid={`dispositionPurchasers.${index}.remove-button`}
+                      dataTestId={`dispositionPurchasers.${index}.remove-button`}
                       onRemove={() => {
                         setModalContent({
                           ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
index 0e9edf7d47..e9e72652c7 100644
--- a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
+++ b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
@@ -108,7 +108,7 @@ export const ConsultationListView: React.FunctionComponent<IConsultationListView
                             <Col xs="auto" className="px-1">
                               <RemoveIconButton
                                 title="Delete Consultation"
-                                data-testid={`consultations[${index}].delete-btn`}
+                                dataTestId={`consultations[${index}].delete-btn`}
                                 onRemove={() => {
                                   setModalContent({
                                     ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/__snapshots__/ConsultationListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/__snapshots__/ConsultationListView.test.tsx.snap
index c73698704a..53bc07216e 100644
--- a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/__snapshots__/ConsultationListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/__snapshots__/ConsultationListView.test.tsx.snap
@@ -215,47 +215,93 @@ exports[`ConsultationListView component > renders as expected 1`] = `
 }
 
 .c11.c11.btn {
-  color: #aaaaaa;
+  background-color: unset;
+  border: none;
+}
+
+.c11.c11.btn:hover,
+.c11.c11.btn:focus,
+.c11.c11.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c11.c11.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c11.c11.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c11.c11.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c11.c11.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c11.c11.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c11.c11.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c11.c11.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c11.c11.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c12.c12.btn.btn-primary {
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c11.c11.btn .text {
+.c12.c12.btn.btn-primary svg {
+  color: #aaaaaa !important;
+}
+
+.c12.c12.btn.btn-primary .text {
   display: none;
 }
 
-.c11.c11.btn:hover,
-.c11.c11.btn:active,
-.c11.c11.btn:focus {
-  color: #d8292f;
+.c12.c12.btn.btn-primary svg:hover,
+.c12.c12.btn.btn-primary svg:active,
+.c12.c12.btn.btn-primary svg:focus {
+  color: #d8292f !important;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.c11.c11.btn:hover .text,
-.c11.c11.btn:active .text,
-.c11.c11.btn:focus .text {
+.c12.c12.btn.btn-primary svg:hover .text,
+.c12.c12.btn.btn-primary svg:active .text,
+.c12.c12.btn.btn-primary svg:focus .text {
   display: inline;
   line-height: 2rem;
 }
 
-.c13.required::before {
+.c15.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c12 {
+.c14 {
   font-weight: bold;
 }
 
@@ -324,6 +370,29 @@ exports[`ConsultationListView component > renders as expected 1`] = `
   margin: 0;
 }
 
+.c13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c10 {
   border: solid 0.2rem var(--theme-blue-90);
   margin-bottom: 1.5rem;
@@ -430,7 +499,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c9"
@@ -493,7 +562,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c9"
@@ -556,7 +625,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c9"
@@ -619,7 +688,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c9"
@@ -697,7 +766,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c9"
@@ -754,7 +823,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                             class="px-1 col-auto"
                           >
                             <button
-                              class="c4 Button c11 btn btn-link"
+                              class="c4 Button c11 c12 btn btn-primary"
                               data-testid="consultations[0].delete-btn"
                               title="Delete Consultation"
                               type="button"
@@ -764,11 +833,11 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                               >
                                 <svg
                                   fill="currentColor"
-                                  height="2rem"
+                                  height="22"
                                   stroke="currentColor"
                                   stroke-width="0"
                                   viewBox="0 0 448 512"
-                                  width="2rem"
+                                  width="22"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
                                   <path
@@ -781,26 +850,34 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                           <div
                             class="px-2 col-auto"
                           >
-                            <button
-                              class="btn btn-link"
-                              data-testid="consultations[0].edit-btn"
-                              title="Edit Consultation"
-                              type="button"
+                            <div
+                              class="c13"
                             >
-                              <svg
-                                fill="currentColor"
-                                height="2rem"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                viewBox="0 0 576 512"
-                                width="2rem"
-                                xmlns="http://www.w3.org/2000/svg"
+                              <button
+                                class="c4 Button c11 btn btn-primary"
+                                data-testid="consultations[0].edit-btn"
+                                title="Edit Consultation"
+                                type="button"
                               >
-                                <path
-                                  d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-                                />
-                              </svg>
-                            </button>
+                                <div
+                                  class="Button__value"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="22"
+                                    stroke="currentColor"
+                                    stroke-width="0"
+                                    viewBox="0 0 576 512"
+                                    width="22"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -817,7 +894,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Requested on:
                         <span>
@@ -845,7 +922,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     >
                       Jan 1, 2024
                     </div>
@@ -857,7 +934,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Contact:
                         <span>
@@ -885,7 +962,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     />
                   </div>
                   <div
@@ -895,13 +972,13 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Response received:
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     >
                       Yes
                     </div>
@@ -913,13 +990,13 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Response received on:
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     >
                       Dec 1, 2024
                     </div>
@@ -931,7 +1008,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Comments:
                         <span>
@@ -959,7 +1036,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     >
                       test comment
                     </div>
@@ -995,7 +1072,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                             class="px-1 col-auto"
                           >
                             <button
-                              class="c4 Button c11 btn btn-link"
+                              class="c4 Button c11 c12 btn btn-primary"
                               data-testid="consultations[1].delete-btn"
                               title="Delete Consultation"
                               type="button"
@@ -1005,11 +1082,11 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                               >
                                 <svg
                                   fill="currentColor"
-                                  height="2rem"
+                                  height="22"
                                   stroke="currentColor"
                                   stroke-width="0"
                                   viewBox="0 0 448 512"
-                                  width="2rem"
+                                  width="22"
                                   xmlns="http://www.w3.org/2000/svg"
                                 >
                                   <path
@@ -1022,26 +1099,34 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                           <div
                             class="px-2 col-auto"
                           >
-                            <button
-                              class="btn btn-link"
-                              data-testid="consultations[1].edit-btn"
-                              title="Edit Consultation"
-                              type="button"
+                            <div
+                              class="c13"
                             >
-                              <svg
-                                fill="currentColor"
-                                height="2rem"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                viewBox="0 0 576 512"
-                                width="2rem"
-                                xmlns="http://www.w3.org/2000/svg"
+                              <button
+                                class="c4 Button c11 btn btn-primary"
+                                data-testid="consultations[1].edit-btn"
+                                title="Edit Consultation"
+                                type="button"
                               >
-                                <path
-                                  d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-                                />
-                              </svg>
-                            </button>
+                                <div
+                                  class="Button__value"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="22"
+                                    stroke="currentColor"
+                                    stroke-width="0"
+                                    viewBox="0 0 576 512"
+                                    width="22"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -1058,7 +1143,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Requested on:
                         <span>
@@ -1086,7 +1171,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     >
                       Jan 1, 2024
                     </div>
@@ -1098,7 +1183,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Contact:
                         <span>
@@ -1126,7 +1211,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     />
                   </div>
                   <div
@@ -1136,13 +1221,13 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Response received:
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     >
                       Yes
                     </div>
@@ -1154,13 +1239,13 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Response received on:
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     >
                       Dec 1, 2024
                     </div>
@@ -1172,7 +1257,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       class="pr-0 text-left col-4"
                     >
                       <label
-                        class="c12"
+                        class="c14"
                       >
                         Comments:
                         <span>
@@ -1200,7 +1285,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                       </label>
                     </div>
                     <div
-                      class="c13 text-left col"
+                      class="c15 text-left col"
                     >
                       test comment
                     </div>
@@ -1237,7 +1322,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c9"
@@ -1300,7 +1385,7 @@ exports[`ConsultationListView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
                   class="c9"
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 3018261e56..a0637de356 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
@@ -921,40 +921,86 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 }
 
 .c8.c8.btn {
-  color: #aaaaaa;
+  background-color: unset;
+  border: none;
+}
+
+.c8.c8.btn:hover,
+.c8.c8.btn:focus,
+.c8.c8.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c8.c8.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c8.c8.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c9.c9.btn.btn-primary {
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c8.c8.btn .text {
+.c9.c9.btn.btn-primary svg {
+  color: #aaaaaa !important;
+}
+
+.c9.c9.btn.btn-primary .text {
   display: none;
 }
 
-.c8.c8.btn:hover,
-.c8.c8.btn:active,
-.c8.c8.btn:focus {
-  color: #d8292f;
+.c9.c9.btn.btn-primary svg:hover,
+.c9.c9.btn.btn-primary svg:active,
+.c9.c9.btn.btn-primary svg:focus {
+  color: #d8292f !important;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.c8.c8.btn:hover .text,
-.c8.c8.btn:active .text,
-.c8.c8.btn:focus .text {
+.c9.c9.btn.btn-primary svg:hover .text,
+.c9.c9.btn.btn-primary svg:active .text,
+.c9.c9.btn.btn-primary svg:focus .text {
   display: inline;
   line-height: 2rem;
 }
 
-.c9 .react-datepicker__calendar-icon {
+.c10 .react-datepicker__calendar-icon {
   width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
@@ -964,19 +1010,19 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
   pointer-events: none;
 }
 
-.c9 .react-datepicker__view-calendar-icon input {
+.c10 .react-datepicker__view-calendar-icon input {
   padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
-.c9 .react-datepicker-wrapper {
+.c10 .react-datepicker-wrapper {
   max-width: 17rem;
 }
 
-.c10.c10.form-control.is-valid {
+.c11.c11.form-control.is-valid {
   background-image: none;
 }
 
-.c10.c10.form-control.is-invalid {
+.c11.c11.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
@@ -1010,13 +1056,13 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
   font-weight: bold;
 }
 
-.c11 textarea.form-control {
+.c12 textarea.form-control {
   min-width: 80rem;
   height: 7rem;
   resize: none;
 }
 
-.c12 {
+.c13 {
   border-bottom: 0.1rem solid grey;
 }
 
@@ -1476,8 +1522,9 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                 class="col-auto"
               >
                 <button
-                  class="c7 Button c8 btn btn-link"
-                  title="Delete Project"
+                  class="c7 Button c8 c9 btn btn-primary"
+                  data-testid="remove-button"
+                  title="Delete Product"
                   type="button"
                 >
                   <div
@@ -1485,11 +1532,11 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                   >
                     <svg
                       fill="currentColor"
-                      height="2rem"
+                      height="22"
                       stroke="currentColor"
                       stroke-width="0"
                       viewBox="0 0 448 512"
-                      width="2rem"
+                      width="22"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
@@ -1586,7 +1633,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                 class="c4 text-left col-4"
               >
                 <div
-                  class="c9 form-group"
+                  class="c10 form-group"
                 >
                   <div
                     class="react-datepicker-wrapper d-block"
@@ -1605,7 +1652,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                       </svg>
                       <input
                         autocomplete="off"
-                        class="c10 form-control date-picker"
+                        class="c11 form-control date-picker"
                         id="datepicker-products.0.startDate"
                         name="products.0.startDate"
                         placeholder="MMM DD, YYYY"
@@ -1677,7 +1724,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                     class="c4 text-left col"
                   >
                     <div
-                      class="c9 form-group"
+                      class="c10 form-group"
                     >
                       <div
                         class="react-datepicker-wrapper d-block"
@@ -1696,7 +1743,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                           </svg>
                           <input
                             autocomplete="off"
-                            class="c10 form-control date-picker"
+                            class="c11 form-control date-picker"
                             id="datepicker-products.0.costEstimateDate"
                             name="products.0.costEstimateDate"
                             placeholder="MMM DD, YYYY"
@@ -1726,7 +1773,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                 class="c4 text-left col"
               >
                 <div
-                  class="c11 textarea input form-group"
+                  class="c12 textarea input form-group"
                 >
                   <textarea
                     class="form-control"
@@ -1755,7 +1802,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                 class="c4 text-left col"
               >
                 <div
-                  class="c11 textarea input form-group"
+                  class="c12 textarea input form-group"
                 >
                   <textarea
                     class="form-control"
@@ -1769,7 +1816,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
               </div>
             </div>
             <div
-              class="c12 my-5"
+              class="c13 my-5"
             />
           </div>
           <div>
@@ -1783,8 +1830,9 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                 class="col-auto"
               >
                 <button
-                  class="c7 Button c8 btn btn-link"
-                  title="Delete Project"
+                  class="c7 Button c8 c9 btn btn-primary"
+                  data-testid="remove-button"
+                  title="Delete Product"
                   type="button"
                 >
                   <div
@@ -1792,11 +1840,11 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                   >
                     <svg
                       fill="currentColor"
-                      height="2rem"
+                      height="22"
                       stroke="currentColor"
                       stroke-width="0"
                       viewBox="0 0 448 512"
-                      width="2rem"
+                      width="22"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
@@ -1893,7 +1941,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                 class="c4 text-left col-4"
               >
                 <div
-                  class="c9 form-group"
+                  class="c10 form-group"
                 >
                   <div
                     class="react-datepicker-wrapper d-block"
@@ -1912,7 +1960,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                       </svg>
                       <input
                         autocomplete="off"
-                        class="c10 form-control date-picker"
+                        class="c11 form-control date-picker"
                         id="datepicker-products.1.startDate"
                         name="products.1.startDate"
                         placeholder="MMM DD, YYYY"
@@ -1984,7 +2032,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                     class="c4 text-left col"
                   >
                     <div
-                      class="c9 form-group"
+                      class="c10 form-group"
                     >
                       <div
                         class="react-datepicker-wrapper d-block"
@@ -2003,7 +2051,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                           </svg>
                           <input
                             autocomplete="off"
-                            class="c10 form-control date-picker"
+                            class="c11 form-control date-picker"
                             id="datepicker-products.1.costEstimateDate"
                             name="products.1.costEstimateDate"
                             placeholder="MMM DD, YYYY"
@@ -2033,7 +2081,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                 class="c4 text-left col"
               >
                 <div
-                  class="c11 textarea input form-group"
+                  class="c12 textarea input form-group"
                 >
                   <textarea
                     class="form-control"
@@ -2062,7 +2110,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
                 class="c4 text-left col"
               >
                 <div
-                  class="c11 textarea input form-group"
+                  class="c12 textarea input form-group"
                 >
                   <textarea
                     class="form-control"
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 822cbbfc0f..212bc956f2 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
@@ -19,6 +19,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 
 .c1 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c3 {
@@ -76,7 +77,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
             Project Details
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c4"
@@ -140,7 +141,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
             Associated Codes
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c4"
@@ -237,7 +238,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
               Associated Products
             </div>
             <div
-              class="pl-8 d-flex align-items-end col-auto"
+              class="pl-2 d-flex align-items-end col-auto"
             >
               <svg
                 class="c4"
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 805d5e5ecf..3ecfda8b90 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
@@ -122,7 +122,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
             </div>
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c4"
@@ -352,7 +352,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
             </div>
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c4"
@@ -582,7 +582,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
             </div>
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c4"
@@ -810,7 +810,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
             </div>
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c4"
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 7d2950a3e5..077c18a2ce 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
@@ -102,7 +102,7 @@ exports[`Operation section view > matches snapshot 1`] = `
               </div>
             </div>
             <div
-              class="pl-8 d-flex align-items-end col-auto"
+              class="pl-2 d-flex align-items-end col-auto"
             >
               <svg
                 class="c6"
@@ -524,7 +524,7 @@ exports[`Operation section view > matches snapshot 1`] = `
               </div>
             </div>
             <div
-              class="pl-8 d-flex align-items-end col-auto"
+              class="pl-2 d-flex align-items-end col-auto"
             >
               <svg
                 class="c6"
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/propertyOperation/__snapshots__/OperationView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/propertyOperation/__snapshots__/OperationView.test.tsx.snap
index e3194dc023..6832dca157 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/propertyOperation/__snapshots__/OperationView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/propertyOperation/__snapshots__/OperationView.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`Subdivision detail view > matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c4"
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
index 56154b557c..32e77993d8 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
@@ -89,7 +89,7 @@ export function createTableColumns(
           <StyledDiv>
             {hasClaim(Claims.MANAGEMENT_VIEW) && (
               <ViewButton
-                data-testid={`activity-view-${activityRow.id}`}
+                dataTestId={`activity-view-${activityRow.id}`}
                 onClick={() => activityRow?.id && onView(activityRow.activityId)}
                 id={`activity-view-${cellProps.row.id}`}
                 title="property-activity view details"
@@ -100,7 +100,7 @@ export function createTableColumns(
               PropertyManagementActivityStatusTypes.NOTSTARTED ? (
               <RemoveIconButton
                 id={`activity-delete-${cellProps.row.id}`}
-                data-testid={`activity-delete-${activityRow.id}`}
+                dataTestId={`activity-delete-${activityRow.id}`}
                 onRemove={() => activityRow.id && onDelete(activityRow.id)}
                 title="Delete"
               />
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 a41945745b..e0b9920d5e 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
@@ -6,7 +6,7 @@ exports[`Activities list view > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c8.btn {
+  .c9.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,19 +35,19 @@ exports[`Activities list view > renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c8.btn .Button__value {
+.c9.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c8.btn:hover {
+.c9.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c8.btn:focus {
+.c9.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -55,31 +55,31 @@ exports[`Activities list view > renders as expected 1`] = `
   box-shadow: none;
 }
 
-.c8.btn.btn-primary {
+.c9.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c8.btn.btn-primary:hover,
-.c8.btn.btn-primary:active,
-.c8.btn.btn-primary:focus {
+.c9.btn.btn-primary:hover,
+.c9.btn.btn-primary:active,
+.c9.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c8.btn.btn-secondary {
+.c9.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c8.btn.btn-secondary:hover,
-.c8.btn.btn-secondary:active,
-.c8.btn.btn-secondary:focus {
+.c9.btn.btn-secondary:hover,
+.c9.btn.btn-secondary:active,
+.c9.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c8.btn.btn-info {
+.c9.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -87,66 +87,66 @@ exports[`Activities list view > renders as expected 1`] = `
   padding-right: 0.6rem;
 }
 
-.c8.btn.btn-info:hover,
-.c8.btn.btn-info:active,
-.c8.btn.btn-info:focus {
+.c9.btn.btn-info:hover,
+.c9.btn.btn-info:active,
+.c9.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c8.btn.btn-light {
+.c9.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c8.btn.btn-light:hover,
-.c8.btn.btn-light:active,
-.c8.btn.btn-light:focus {
+.c9.btn.btn-light:hover,
+.c9.btn.btn-light:active,
+.c9.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c8.btn.btn-dark {
+.c9.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c8.btn.btn-dark:hover,
-.c8.btn.btn-dark:active,
-.c8.btn.btn-dark:focus {
+.c9.btn.btn-dark:hover,
+.c9.btn.btn-dark:active,
+.c9.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c8.btn.btn-danger {
+.c9.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c8.btn.btn-danger:hover,
-.c8.btn.btn-danger:active,
-.c8.btn.btn-danger:focus {
+.c9.btn.btn-danger:hover,
+.c9.btn.btn-danger:active,
+.c9.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c8.btn.btn-warning {
+.c9.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c8.btn.btn-warning:hover,
-.c8.btn.btn-warning:active,
-.c8.btn.btn-warning:focus {
+.c9.btn.btn-warning:hover,
+.c9.btn.btn-warning:active,
+.c9.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c8.btn.btn-link {
+.c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -170,9 +170,9 @@ exports[`Activities list view > renders as expected 1`] = `
   text-decoration: underline;
 }
 
-.c8.btn.btn-link:hover,
-.c8.btn.btn-link:active,
-.c8.btn.btn-link:focus {
+.c9.btn.btn-link:hover,
+.c9.btn.btn-link:active,
+.c9.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -182,15 +182,15 @@ exports[`Activities list view > renders as expected 1`] = `
   outline: none;
 }
 
-.c8.btn.btn-link:disabled,
-.c8.btn.btn-link.disabled {
+.c9.btn.btn-link:disabled,
+.c9.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c8.btn:disabled,
-.c8.btn:disabled:hover {
+.c9.btn:disabled,
+.c9.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -202,18 +202,65 @@ exports[`Activities list view > renders as expected 1`] = `
   cursor: not-allowed;
 }
 
-.c8.Button .Button__icon {
+.c9.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c8.Button--icon-only:focus {
+.c9.Button--icon-only:focus {
   outline: none;
 }
 
-.c8.Button--icon-only .Button__icon {
+.c9.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
+.c10.c10.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c10.c10.btn:hover,
+.c10.c10.btn:focus,
+.c10.c10.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c10.c10.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c10.c10.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c10.c10.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c10.c10.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c10.c10.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c10.c10.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c10.c10.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c10.c10.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c3 {
   float: right;
   cursor: pointer;
@@ -264,11 +311,11 @@ exports[`Activities list view > renders as expected 1`] = `
   height: 1.6rem;
 }
 
-.c9 {
+.c11 {
   margin-top: 0.3rem;
 }
 
-.c10 {
+.c12 {
   min-width: 5rem;
   max-width: 5rem;
   margin-left: 1rem;
@@ -277,10 +324,20 @@ exports[`Activities list view > renders as expected 1`] = `
   padding: 0;
 }
 
-.c10:disabled {
+.c12:disabled {
   background: white;
 }
 
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
 .c2 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -297,23 +354,11 @@ exports[`Activities list view > renders as expected 1`] = `
   margin: 0;
 }
 
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-bottom: 0.25rem;
+.c8 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   width: 80%;
 }
 
@@ -343,7 +388,7 @@ exports[`Activities list view > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c3"
@@ -632,29 +677,26 @@ exports[`Activities list view > renders as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c7"
+                  class="c7 c8"
                 >
                   <button
-                    class="c8 Button Button--icon-only btn btn-link"
+                    class="c9 Button c10 btn btn-primary"
                     data-testid="activity-view-1"
+                    title="property-activity view details"
                     type="button"
                   >
                     <div
-                      class="Button__icon"
+                      class="Button__value"
                     >
                       <svg
                         fill="currentColor"
-                        height="2rem"
-                        id="activity-view-0"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
                         viewBox="0 0 576 512"
-                        width="2rem"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title>
-                          property-activity view details
-                        </title>
                         <path
                           d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                         />
@@ -724,29 +766,26 @@ exports[`Activities list view > renders as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c7"
+                  class="c7 c8"
                 >
                   <button
-                    class="c8 Button Button--icon-only btn btn-link"
+                    class="c9 Button c10 btn btn-primary"
                     data-testid="activity-view-2"
+                    title="property-activity view details"
                     type="button"
                   >
                     <div
-                      class="Button__icon"
+                      class="Button__value"
                     >
                       <svg
                         fill="currentColor"
-                        height="2rem"
-                        id="activity-view-1"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
                         viewBox="0 0 576 512"
-                        width="2rem"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <title>
-                          property-activity view details
-                        </title>
                         <path
                           d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                         />
@@ -799,17 +838,17 @@ exports[`Activities list view > renders as expected 1`] = `
                 class="d-flex"
               >
                 <span
-                  class="c9"
+                  class="c11"
                 >
                   Show
                 </span>
                 <input
-                  class="c10 form-control"
+                  class="c12 form-control"
                   type="number"
                   value="10"
                 />
                 <span
-                  class="c9"
+                  class="c11"
                 >
                   Entries
                 </span>
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
index 8dc5ce410b..e871b2453c 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
@@ -116,7 +116,7 @@ export function createContactTableColumns(
             {hasClaim(Claims.PROPERTY_EDIT) && (
               <RemoveIconButton
                 id={`contact-delete-${cellProps.row.id}`}
-                data-testid={`contact-delete-${cellProps.row.id}`}
+                dataTestId={`contact-delete-${cellProps.row.id}`}
                 onRemove={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
                 title="Delete contact"
               />
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 706536f8fa..1012009ce9 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
@@ -268,32 +268,28 @@ exports[`PropertyContactListView component > renders as expected when provided v
 }
 
 .c9.c9.btn.btn-primary svg {
-  color: #9F9D9C;
+  color: #aaaaaa !important;
 }
 
 .c9.c9.btn.btn-primary .text {
   display: none;
 }
 
-.c9.c9.btn.btn-primary:hover,
-.c9.c9.btn.btn-primary:active,
-.c9.c9.btn.btn-primary:focus {
-  color: #d8292f;
+.c9.c9.btn.btn-primary svg:hover,
+.c9.c9.btn.btn-primary svg:active,
+.c9.c9.btn.btn-primary svg:focus {
+  color: #d8292f !important;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.c9.c9.btn.btn-primary:hover .text,
-.c9.c9.btn.btn-primary:active .text,
-.c9.c9.btn.btn-primary:focus .text {
+.c9.c9.btn.btn-primary svg:hover .text,
+.c9.c9.btn.btn-primary svg:active .text,
+.c9.c9.btn.btn-primary svg:focus .text {
   display: inline;
   line-height: 2rem;
 }
@@ -424,7 +420,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
           </div>
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c6"
@@ -597,7 +593,6 @@ exports[`PropertyContactListView component > renders as expected when provided v
                   <button
                     class="c3 Button c8 c9 btn btn-primary"
                     data-testid="contact-delete-0"
-                    id="contact-delete-0"
                     title="Delete contact"
                     type="button"
                   >
@@ -606,11 +601,11 @@ exports[`PropertyContactListView component > renders as expected when provided v
                     >
                       <svg
                         fill="currentColor"
-                        height="2rem"
+                        height="22"
                         stroke="currentColor"
                         stroke-width="0"
                         viewBox="0 0 448 512"
-                        width="2rem"
+                        width="22"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
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 0b9230a7e7..7cf169d581 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
@@ -14,6 +14,7 @@ exports[`PropertyManagementDetailView component > renders as expected when provi
 
 .c2 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c1 {
@@ -72,7 +73,7 @@ exports[`PropertyManagementDetailView component > renders as expected when provi
           </div>
         </div>
         <div
-          class="pl-8 d-flex align-items-end col-auto"
+          class="pl-2 d-flex align-items-end col-auto"
         >
           <svg
             class="c3"
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 5240bbf578..f54c315419 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
@@ -16,7 +16,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
   margin-bottom: 2.4rem;
 }
 
-.c10 {
+.c9 {
   float: right;
   cursor: pointer;
   font-size: 3.2rem;
@@ -27,10 +27,6 @@ exports[`TakesDetailView component > renders as expected 1`] = `
   padding-top: 1rem;
 }
 
-.c9 {
-  text-align: right;
-}
-
 .c8 {
   font-weight: bold;
   color: var(--theme-blue-100);
@@ -79,7 +75,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
   margin: 0;
 }
 
-.c13 {
+.c12 {
   max-width: 25rem;
   padding: 1rem;
   background-color: #f2f2f2;
@@ -87,7 +83,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c14 {
+.c13 {
   max-width: 25rem;
   padding: 1rem;
   background-color: #f2f2f2;
@@ -95,14 +91,14 @@ exports[`TakesDetailView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c11.form-section {
+.c10.form-section {
   margin-left: 0;
   margin-right: 0;
   padding-left: 0;
   padding-right: 0;
 }
 
-.c12 {
+.c11 {
   border: 0.1rem solid lightgrey;
   border-radius: 0.5rem;
 }
@@ -260,38 +256,34 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                   <div
                     class="d-flex align-items-center justify-content-end col-md-2"
                   >
-                    <div
-                      class="c9"
+                    <span
+                      class="tooltip-icon"
+                      data-testid="tooltip-icon-1-summary-cannot-edit-tooltip"
+                      id="1-summary-cannot-edit-tooltip"
                     >
-                      <span
+                      <svg
                         class="tooltip-icon"
-                        data-testid="tooltip-icon-1-summary-cannot-edit-tooltip"
-                        id="1-summary-cannot-edit-tooltip"
+                        fill="currentColor"
+                        height="1em"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 512 512"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <svg
-                          class="tooltip-icon"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
-                          />
-                        </svg>
-                      </span>
-                    </div>
+                        <path
+                          d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
+                        />
+                      </svg>
+                    </span>
                   </div>
                 </div>
               </div>
               <div
-                class="pl-8 d-flex align-items-end col-auto"
+                class="pl-2 d-flex align-items-end col-auto"
               >
                 <svg
-                  class="c10"
+                  class="c9"
                   fill="currentColor"
                   height="1em"
                   stroke="currentColor"
@@ -406,7 +398,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
               />
             </div>
             <div
-              class="c1 form-section c11"
+              class="c1 form-section c10"
             >
               <h2
                 class="c8"
@@ -425,7 +417,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                 class="collapse show"
               >
                 <div
-                  class="c1 form-section c12"
+                  class="c1 form-section c11"
                 >
                   <div
                     class="collapse show"
@@ -492,7 +484,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c13"
+                              class="c12"
                             >
                               <div
                                 class="row"
@@ -528,7 +520,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class="row"
@@ -606,7 +598,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c1 form-section c12"
+                  class="c1 form-section c11"
                 >
                   <div
                     class="collapse show"
@@ -651,7 +643,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c13"
+                              class="c12"
                             >
                               <div
                                 class="row"
@@ -687,7 +679,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class="row"
@@ -743,7 +735,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c1 form-section c12"
+                  class="c1 form-section c11"
                 >
                   <div
                     class="collapse show"
@@ -806,7 +798,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c13"
+                              class="c12"
                             >
                               <div
                                 class="row"
@@ -842,7 +834,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class="row"
@@ -898,7 +890,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c1 form-section c12"
+                  class="c1 form-section c11"
                 >
                   <div
                     class="collapse show"
@@ -943,7 +935,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c13"
+                              class="c12"
                             >
                               <div
                                 class="row"
@@ -979,7 +971,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class="row"
@@ -1035,7 +1027,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c1 form-section c12"
+                  class="c1 form-section c11"
                 >
                   <div
                     class="collapse show"
@@ -1080,7 +1072,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c13"
+                              class="c12"
                             >
                               <div
                                 class="row"
@@ -1116,7 +1108,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class="row"
@@ -1174,7 +1166,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
               </div>
             </div>
             <div
-              class="c1 form-section c11"
+              class="c1 form-section c10"
             >
               <h2
                 class="c8"
@@ -1193,7 +1185,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                 class="collapse show"
               >
                 <div
-                  class="c1 form-section c12"
+                  class="c1 form-section c11"
                 >
                   <div
                     class="collapse show"
@@ -1238,7 +1230,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c13"
+                              class="c12"
                             >
                               <div
                                 class="row"
@@ -1274,7 +1266,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
                             class="col"
                           >
                             <div
-                              class="c14"
+                              class="c13"
                             >
                               <div
                                 class="row"
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 f354727e5e..60f32c4802 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
@@ -177,7 +177,7 @@ exports[`TakeUpdateForm component > renders as expected 1`] = `
             Update Take
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c3"
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 30756c0866..f0c2e0072e 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
@@ -406,6 +406,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 
 .c31 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c33 {
diff --git a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap
index e8c6b08a55..cb5ed02183 100644
--- a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
     class="Toastify"
   />
   <div />
-  .c7.btn {
+  .c5.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,19 +35,19 @@ exports[`ResearchMenu component > renders as expected when provided no research
   cursor: pointer;
 }
 
-.c7.btn .Button__value {
+.c5.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c7.btn:hover {
+.c5.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c7.btn:focus {
+.c5.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -55,31 +55,31 @@ exports[`ResearchMenu component > renders as expected when provided no research
   box-shadow: none;
 }
 
-.c7.btn.btn-primary {
+.c5.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c7.btn.btn-primary:hover,
-.c7.btn.btn-primary:active,
-.c7.btn.btn-primary:focus {
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c7.btn.btn-secondary {
+.c5.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c7.btn.btn-secondary:hover,
-.c7.btn.btn-secondary:active,
-.c7.btn.btn-secondary:focus {
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c7.btn.btn-info {
+.c5.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -87,66 +87,66 @@ exports[`ResearchMenu component > renders as expected when provided no research
   padding-right: 0.6rem;
 }
 
-.c7.btn.btn-info:hover,
-.c7.btn.btn-info:active,
-.c7.btn.btn-info:focus {
+.c5.btn.btn-info:hover,
+.c5.btn.btn-info:active,
+.c5.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c7.btn.btn-light {
+.c5.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c7.btn.btn-light:hover,
-.c7.btn.btn-light:active,
-.c7.btn.btn-light:focus {
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c7.btn.btn-dark {
+.c5.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c7.btn.btn-dark:hover,
-.c7.btn.btn-dark:active,
-.c7.btn.btn-dark:focus {
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c7.btn.btn-danger {
+.c5.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c7.btn.btn-danger:hover,
-.c7.btn.btn-danger:active,
-.c7.btn.btn-danger:focus {
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c7.btn.btn-warning {
+.c5.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c7.btn.btn-warning:hover,
-.c7.btn.btn-warning:active,
-.c7.btn.btn-warning:focus {
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c7.btn.btn-link {
+.c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -170,9 +170,9 @@ exports[`ResearchMenu component > renders as expected when provided no research
   text-decoration: underline;
 }
 
-.c7.btn.btn-link:hover,
-.c7.btn.btn-link:active,
-.c7.btn.btn-link:focus {
+.c5.btn.btn-link:hover,
+.c5.btn.btn-link:active,
+.c5.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -182,15 +182,15 @@ exports[`ResearchMenu component > renders as expected when provided no research
   outline: none;
 }
 
-.c7.btn.btn-link:disabled,
-.c7.btn.btn-link.disabled {
+.c5.btn.btn-link:disabled,
+.c5.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c7.btn:disabled,
-.c7.btn:disabled:hover {
+.c5.btn:disabled,
+.c5.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -202,24 +202,71 @@ exports[`ResearchMenu component > renders as expected when provided no research
   cursor: not-allowed;
 }
 
-.c7.Button .Button__icon {
+.c5.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c7.Button--icon-only:focus {
+.c5.Button--icon-only:focus {
   outline: none;
 }
 
-.c7.Button--icon-only .Button__icon {
+.c5.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c5 {
-  fill: #007bff;
+.c6.c6.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c6.c6.btn:hover,
+.c6.c6.btn:focus,
+.c6.c6.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c6.c6.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c6.c6.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c6.c6.btn.btn-primary svg {
+  color: #013366;
 }
 
-.c5:hover {
-  fill: #0056b3;
+.c6.c6.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c6.c6.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c6.c6.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c6.c6.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c6.c6.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c7 {
+  fill: #013366;
+}
+
+.c7:hover {
+  fill: #1E5189;
 }
 
 .c0 {
@@ -251,7 +298,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
   font-size: 1.4rem;
 }
 
-.c6 {
+.c8 {
   background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
@@ -273,7 +320,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
   align-items: center;
 }
 
-.c6.selected {
+.c8.selected {
   background-color: #FCBA19;
 }
 
@@ -326,31 +373,35 @@ exports[`ResearchMenu component > renders as expected when provided no research
           Properties
         </span>
         <button
-          class="btn btn-link"
+          class="c5 Button c6 btn btn-primary"
           data-testid="edit-button"
           title="Change properties"
           type="button"
         >
-          <svg
-            class="c5"
-            data-name="Layer 2"
-            height="2.4rem"
-            id="Layer_2"
-            viewBox="0 0 56.95 85.87"
-            width="2.4rem"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            class="Button__value"
           >
-            <defs />
-            <g
-              data-name="PDF preview"
-              id="PDF_preview"
+            <svg
+              class="c7"
+              data-name="Layer 2"
+              height="2.4rem"
+              id="Layer_2"
+              viewBox="0 0 56.95 85.87"
+              width="2.4rem"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                class="cls-1"
-                d="M55.16,5.56l-3.76-3.77c-2.39-2.39-6.25-2.39-8.64,0h0l-4.62,4.62s.68,.43,1.61,1.04L17,30.68l-1.24-1.83-.23,.23c.05-.05,.09-.11,.15-.16L38.13,6.41C22.22-.8-1.23,7.37,.05,30.58c1.08,19.67,26.62,55.29,26.62,55.29,0,0,24.8-35.75,25.6-55.29,.18-4.48-.53-8.4-1.91-11.75l-22.29,22.5s-.06,.05-.09,.08l.18-.18-1.51-1.05,22.67-23.17c.36,.57,.71,1.17,1.05,1.8l4.81-4.63c2.39-2.39,2.39-6.25,0-8.64Zm-14.73,2.36c1.49,1,3.3,2.27,4.08,3.02,.03,.02,.07,.07,.1,.1l-24.17,24.7-2.96-4.36L40.44,7.93Zm-12.99,33.95c-.87,.71-1.87,1.25-2.95,1.58l-11.49,3.38c-.8,.23-3.92,2.38-4.51,1.78-.59-.59,1.44-3.83,1.67-4.64l3.38-11.49c.32-1.08,.86-2.08,1.57-2.94l5.16,6.81,7.17,5.52Zm-1.51-2.16l-4.9-3.39L45.19,11.64c.87,.92,2.26,2.54,3.65,4.67l-22.91,23.41Z"
-              />
-            </g>
-          </svg>
+              <defs />
+              <g
+                data-name="PDF preview"
+                id="PDF_preview"
+              >
+                <path
+                  class="cls-1"
+                  d="M55.16,5.56l-3.76-3.77c-2.39-2.39-6.25-2.39-8.64,0h0l-4.62,4.62s.68,.43,1.61,1.04L17,30.68l-1.24-1.83-.23,.23c.05-.05,.09-.11,.15-.16L38.13,6.41C22.22-.8-1.23,7.37,.05,30.58c1.08,19.67,26.62,55.29,26.62,55.29,0,0,24.8-35.75,25.6-55.29,.18-4.48-.53-8.4-1.91-11.75l-22.29,22.5s-.06,.05-.09,.08l.18-.18-1.51-1.05,22.67-23.17c.36,.57,.71,1.17,1.05,1.8l4.81-4.63c2.39-2.39,2.39-6.25,0-8.64Zm-14.73,2.36c1.49,1,3.3,2.27,4.08,3.02,.03,.02,.07,.07,.1,.1l-24.17,24.7-2.96-4.36L40.44,7.93Zm-12.99,33.95c-.87,.71-1.87,1.25-2.95,1.58l-11.49,3.38c-.8,.23-3.92,2.38-4.51,1.78-.59-.59,1.44-3.83,1.67-4.64l3.38-11.49c.32-1.08,.86-2.08,1.57-2.94l5.16,6.81,7.17,5.52Zm-1.51-2.16l-4.9-3.39L45.19,11.64c.87,.92,2.26,2.54,3.65,4.67l-22.91,23.41Z"
+                />
+              </g>
+            </svg>
+          </div>
         </button>
       </div>
     </div>
@@ -365,7 +416,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
         class="pr-2 col-auto"
       >
         <div
-          class="c6"
+          class="c8"
         >
           1
         </div>
@@ -374,7 +425,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
         class="col"
       >
         <button
-          class="c7 Button btn btn-link"
+          class="c5 Button btn btn-link"
           title="View"
           type="button"
         >
@@ -397,7 +448,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
         class="pr-2 col-auto"
       >
         <div
-          class="c6"
+          class="c8"
         >
           2
         </div>
@@ -406,7 +457,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
         class="col"
       >
         <button
-          class="c7 Button btn btn-link"
+          class="c5 Button btn btn-link"
           title="View"
           type="button"
         >
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 080d30247d..6df0c447f1 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
@@ -13,6 +13,7 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
 
 .c3 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c5 {
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 a6392f5521..2e6ac8e1fc 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
@@ -13,6 +13,7 @@ exports[`ResearchSummaryView component > renders as expected when research file
 
 .c1 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c3 {
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 2cc07806ba..375112a657 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
@@ -19,6 +19,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
 
 .c1 {
   text-align: right;
+  overflow: hidden;
 }
 
 .c4 {
@@ -125,7 +126,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             File Initiation
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -562,7 +563,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Active File Management
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -1766,7 +1767,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Crown Land
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -1811,7 +1812,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Section 3 - Agreement
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -2384,7 +2385,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Section 6 - Expropriation
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
@@ -2932,7 +2933,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Acquisition Completion
           </div>
           <div
-            class="pl-8 d-flex align-items-end col-auto"
+            class="pl-2 d-flex align-items-end col-auto"
           >
             <svg
               class="c5"
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 00fc875fc5..aa118e2c01 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
@@ -6,7 +6,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c5.btn {
+  .c4.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,19 +35,19 @@ exports[`Note Results Table > matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c5.btn .Button__value {
+.c4.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c5.btn:hover {
+.c4.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c5.btn:focus {
+.c4.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -55,31 +55,31 @@ exports[`Note Results Table > matches snapshot 1`] = `
   box-shadow: none;
 }
 
-.c5.btn.btn-primary {
+.c4.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c5.btn.btn-primary:hover,
-.c5.btn.btn-primary:active,
-.c5.btn.btn-primary:focus {
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c5.btn.btn-secondary {
+.c4.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c5.btn.btn-secondary:hover,
-.c5.btn.btn-secondary:active,
-.c5.btn.btn-secondary:focus {
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c5.btn.btn-info {
+.c4.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -87,66 +87,66 @@ exports[`Note Results Table > matches snapshot 1`] = `
   padding-right: 0.6rem;
 }
 
-.c5.btn.btn-info:hover,
-.c5.btn.btn-info:active,
-.c5.btn.btn-info:focus {
+.c4.btn.btn-info:hover,
+.c4.btn.btn-info:active,
+.c4.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c5.btn.btn-light {
+.c4.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c5.btn.btn-light:hover,
-.c5.btn.btn-light:active,
-.c5.btn.btn-light:focus {
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c5.btn.btn-dark {
+.c4.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c5.btn.btn-dark:hover,
-.c5.btn.btn-dark:active,
-.c5.btn.btn-dark:focus {
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c5.btn.btn-danger {
+.c4.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c5.btn.btn-danger:hover,
-.c5.btn.btn-danger:active,
-.c5.btn.btn-danger:focus {
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c5.btn.btn-warning {
+.c4.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c5.btn.btn-warning:hover,
-.c5.btn.btn-warning:active,
-.c5.btn.btn-warning:focus {
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c5.btn.btn-link {
+.c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -170,9 +170,9 @@ exports[`Note Results Table > matches snapshot 1`] = `
   text-decoration: underline;
 }
 
-.c5.btn.btn-link:hover,
-.c5.btn.btn-link:active,
-.c5.btn.btn-link:focus {
+.c4.btn.btn-link:hover,
+.c4.btn.btn-link:active,
+.c4.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -182,15 +182,15 @@ exports[`Note Results Table > matches snapshot 1`] = `
   outline: none;
 }
 
-.c5.btn.btn-link:disabled,
-.c5.btn.btn-link.disabled {
+.c4.btn.btn-link:disabled,
+.c4.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c5.btn:disabled,
-.c5.btn:disabled:hover {
+.c4.btn:disabled,
+.c4.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -202,62 +202,98 @@ exports[`Note Results Table > matches snapshot 1`] = `
   cursor: not-allowed;
 }
 
-.c5.Button .Button__icon {
+.c4.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c5.Button--icon-only:focus {
+.c4.Button--icon-only:focus {
   outline: none;
 }
 
-.c5.Button--icon-only .Button__icon {
+.c4.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c6.c6.btn {
-  color: #aaaaaa;
+.c5.c5.btn {
+  background-color: unset;
+  border: none;
+}
+
+.c5.c5.btn:hover,
+.c5.c5.btn:focus,
+.c5.c5.btn:active {
+  background-color: unset;
+  outline: none;
+  box-shadow: none;
+}
+
+.c5.c5.btn svg {
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.c5.c5.btn svg:hover {
+  -webkit-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.c5.c5.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c5.c5.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c5.c5.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c5.c5.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c5.c5.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c5.c5.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c6.c6.btn.btn-primary {
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c6.c6.btn .text {
+.c6.c6.btn.btn-primary svg {
+  color: #aaaaaa !important;
+}
+
+.c6.c6.btn.btn-primary .text {
   display: none;
 }
 
-.c6.c6.btn:hover,
-.c6.c6.btn:active,
-.c6.c6.btn:focus {
-  color: #d8292f;
+.c6.c6.btn.btn-primary svg:hover,
+.c6.c6.btn.btn-primary svg:active,
+.c6.c6.btn.btn-primary svg:focus {
+  color: #d8292f !important;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.c6.c6.btn:hover .text,
-.c6.c6.btn:active .text,
-.c6.c6.btn:focus .text {
+.c6.c6.btn.btn-primary svg:hover .text,
+.c6.c6.btn.btn-primary svg:active .text,
+.c6.c6.btn.btn-primary svg:focus .text {
   display: inline;
   line-height: 2rem;
 }
 
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -287,11 +323,11 @@ exports[`Note Results Table > matches snapshot 1`] = `
   height: 1.6rem;
 }
 
-.c4 {
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
+.c3 {
+  -webkit-box-pack: space-evenly;
+  -webkit-justify-content: space-evenly;
+  -ms-flex-pack: space-evenly;
+  justify-content: space-evenly;
   width: 100%;
 }
 
@@ -469,31 +505,41 @@ exports[`Note Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 c4"
+              class="c3 row"
             >
-              <button
-                class="c5 Button c6 btn btn-link"
-                title="Delete Note"
-                type="button"
+              <div
+                class="p-0 col-1"
+              >
+                 
+              </div>
+              <div
+                class="p-0 col-1"
               >
-                <div
-                  class="Button__value"
+                <button
+                  class="c4 Button c5 c6 btn btn-primary"
+                  data-testid="remove-button"
+                  title="Delete Note"
+                  type="button"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="2rem"
-                    stroke="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 448 512"
-                    width="2rem"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="Button__value"
                   >
-                    <path
-                      d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
-                    />
-                  </svg>
-                </div>
-              </button>
+                    <svg
+                      fill="currentColor"
+                      height="22"
+                      stroke="currentColor"
+                      stroke-width="0"
+                      viewBox="0 0 448 512"
+                      width="22"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
+                      />
+                    </svg>
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -537,31 +583,41 @@ exports[`Note Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 c4"
+              class="c3 row"
             >
-              <button
-                class="c5 Button c6 btn btn-link"
-                title="Delete Note"
-                type="button"
+              <div
+                class="p-0 col-1"
+              >
+                 
+              </div>
+              <div
+                class="p-0 col-1"
               >
-                <div
-                  class="Button__value"
+                <button
+                  class="c4 Button c5 c6 btn btn-primary"
+                  data-testid="remove-button"
+                  title="Delete Note"
+                  type="button"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="2rem"
-                    stroke="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 448 512"
-                    width="2rem"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="Button__value"
                   >
-                    <path
-                      d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
-                    />
-                  </svg>
-                </div>
-              </button>
+                    <svg
+                      fill="currentColor"
+                      height="22"
+                      stroke="currentColor"
+                      stroke-width="0"
+                      viewBox="0 0 448 512"
+                      width="22"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
+                      />
+                    </svg>
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -605,31 +661,41 @@ exports[`Note Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 c4"
+              class="c3 row"
             >
-              <button
-                class="c5 Button c6 btn btn-link"
-                title="Delete Note"
-                type="button"
+              <div
+                class="p-0 col-1"
               >
-                <div
-                  class="Button__value"
+                 
+              </div>
+              <div
+                class="p-0 col-1"
+              >
+                <button
+                  class="c4 Button c5 c6 btn btn-primary"
+                  data-testid="remove-button"
+                  title="Delete Note"
+                  type="button"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="2rem"
-                    stroke="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 448 512"
-                    width="2rem"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="Button__value"
                   >
-                    <path
-                      d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
-                    />
-                  </svg>
-                </div>
-              </button>
+                    <svg
+                      fill="currentColor"
+                      height="22"
+                      stroke="currentColor"
+                      stroke-width="0"
+                      viewBox="0 0 448 512"
+                      width="22"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
+                      />
+                    </svg>
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -673,31 +739,41 @@ exports[`Note Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3 c4"
+              class="c3 row"
             >
-              <button
-                class="c5 Button c6 btn btn-link"
-                title="Delete Note"
-                type="button"
+              <div
+                class="p-0 col-1"
+              >
+                 
+              </div>
+              <div
+                class="p-0 col-1"
               >
-                <div
-                  class="Button__value"
+                <button
+                  class="c4 Button c5 c6 btn btn-primary"
+                  data-testid="remove-button"
+                  title="Delete Note"
+                  type="button"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="2rem"
-                    stroke="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 448 512"
-                    width="2rem"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="Button__value"
                   >
-                    <path
-                      d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
-                    />
-                  </svg>
-                </div>
-              </button>
+                    <svg
+                      fill="currentColor"
+                      height="22"
+                      stroke="currentColor"
+                      stroke-width="0"
+                      viewBox="0 0 448 512"
+                      width="22"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
+                      />
+                    </svg>
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/source/frontend/src/features/notes/list/NoteResults/columns.tsx b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
index a27e4c7413..31c1c1d096 100644
--- a/source/frontend/src/features/notes/list/NoteResults/columns.tsx
+++ b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
@@ -64,7 +64,6 @@ export function createTableColumns(
               {hasClaim(Claims.NOTE_DELETE) && !cellProps.row.original.isSystemGenerated && (
                 <RemoveIconButton
                   title="Delete Note"
-                  variant="primary"
                   onRemove={() => onDelete(cellProps.row.original)}
                 />
               )}
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 e148c5e085..f76ed96a64 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
@@ -140,7 +140,7 @@ exports[`Note List View > renders as expected 1`] = `
               </div>
             </div>
             <div
-              class="pl-8 d-flex align-items-end col-auto"
+              class="pl-2 d-flex align-items-end col-auto"
             >
               <svg
                 class="c6"

From 189f5e88ba5cf35f9c75a32d1a681a9a3ad65d65 Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Wed, 18 Dec 2024 13:14:08 -0800
Subject: [PATCH 3/6] Updating AgreementView.ts

---
 .../acquisition/tabs/agreement/detail/AgreementView.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
index 66363a5277..80de581875 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
@@ -1,4 +1,4 @@
-import { FaFileContract, FaPlus, FaTrash } from 'react-icons/fa';
+import { FaEdit, FaFileContract, FaPlus, FaTrash } from 'react-icons/fa';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 

From a1d974d641cdc120703c05a65d9bc8b1b80dab20 Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Wed, 18 Dec 2024 13:33:22 -0800
Subject: [PATCH 4/6] Adding IDs to delete buttons on periodColumns.tsx

---
 .../detail/LeasePages/payment/table/periods/periodColumns.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx
index 3d1202d5d7..6365081cf1 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx
@@ -180,6 +180,7 @@ const paymentActions = (
           original.statusTypeCode?.id !== LeasePeriodStatusTypes.EXERCISED && (
             <RemoveIconButton
               title="delete period"
+              id={`edit-period-${index}`}
               onRemove={() => original.id && onDelete(original)}
             />
           )}

From 4a9395758fde317833afc01933987e9ceeaf4185 Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Mon, 23 Dec 2024 13:22:52 -0800
Subject: [PATCH 5/6] Fix of PR observations

---
 .../common/buttons/RemoveButton.tsx           | 29 +++++++++----------
 .../components/common/buttons/ViewButton.tsx  | 20 +++++--------
 .../ToggleSaveInput/ToggleSaveInputView.tsx   |  6 ++--
 .../notes/list/NoteResults/columns.tsx        |  1 -
 4 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/source/frontend/src/components/common/buttons/RemoveButton.tsx b/source/frontend/src/components/common/buttons/RemoveButton.tsx
index 45f36d93f9..8072e89a6e 100644
--- a/source/frontend/src/components/common/buttons/RemoveButton.tsx
+++ b/source/frontend/src/components/common/buttons/RemoveButton.tsx
@@ -10,39 +10,36 @@ import { LinkButton } from './LinkButton';
 interface IRemoveButtonProps extends ButtonProps {
   label?: string;
   title?: string;
-  dataTestId?: string | null;
+  'data-testId'?: string;
   fontSize?: string;
   icon?: React.ReactNode;
   style?: CSSProperties | null;
   onRemove: () => void;
 }
 
-export const RemoveButton: React.FunctionComponent<React.PropsWithChildren<IRemoveButtonProps>> = ({
-  label,
-  dataTestId,
-  fontSize,
-  onRemove,
-}) => {
+export const RemoveButton: React.FunctionComponent<
+  React.PropsWithChildren<IRemoveButtonProps>
+> = props => {
   return (
-    <StyledRemoveLinkButton $fontSize={fontSize} onClick={onRemove}>
-      <MdClose data-testid={dataTestId ?? 'remove-button'} size="2rem" title="remove" />{' '}
-      <span className="text">{label ?? 'Remove'}</span>
+    <StyledRemoveLinkButton $fontSize={props.fontSize} onClick={props.onRemove}>
+      <MdClose data-testid={props['data-testId'] ?? 'remove-button'} size="2rem" title="remove" />{' '}
+      <span className="text">{props.label ?? 'Remove'}</span>
     </StyledRemoveLinkButton>
   );
 };
 
 export const RemoveIconButton: React.FunctionComponent<
   React.PropsWithChildren<IRemoveButtonProps>
-> = ({ onRemove, title, icon, dataTestId, style }) => {
+> = props => {
   return (
     <StyledRemoveIconButton
       variant="primary"
-      title={title ?? 'edit'}
-      onClick={onRemove}
-      data-testid={dataTestId ?? 'remove-button'}
-      style={style}
+      title={props.title ?? 'remove'}
+      onClick={props.onRemove}
+      data-testid={props['data-testId'] ?? 'remove-button'}
+      style={props.style}
     >
-      {icon ?? <FaTrash size={22} />}
+      {props.icon ?? <FaTrash size={22} />}
     </StyledRemoveIconButton>
   );
 };
diff --git a/source/frontend/src/components/common/buttons/ViewButton.tsx b/source/frontend/src/components/common/buttons/ViewButton.tsx
index 67a46bc636..f2d4f7a9a2 100644
--- a/source/frontend/src/components/common/buttons/ViewButton.tsx
+++ b/source/frontend/src/components/common/buttons/ViewButton.tsx
@@ -12,21 +12,17 @@ interface IViewButtonProps extends ButtonProps {
   style?: CSSProperties | null;
 }
 
-export const ViewButton: React.FunctionComponent<React.PropsWithChildren<IViewButtonProps>> = ({
-  onClick,
-  title,
-  icon,
-  dataTestId,
-  style,
-}) => (
+export const ViewButton: React.FunctionComponent<
+  React.PropsWithChildren<IViewButtonProps>
+> = props => (
   <StyledIconButton
     variant="primary"
-    title={title ?? 'edit'}
-    onClick={onClick}
-    data-testid={dataTestId ?? 'view-button'}
-    style={style}
+    title={props.title ?? 'view'}
+    onClick={props.onClick}
+    data-testid={props['data-testId'] ?? 'view-button'}
+    style={props.style}
   >
-    {icon ?? <FaEye size={22} />}
+    {props.icon ?? <FaEye size={22} />}
   </StyledIconButton>
 );
 
diff --git a/source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx b/source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx
index ccdb607efd..d1e149516a 100644
--- a/source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx
+++ b/source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx
@@ -66,16 +66,16 @@ export const ToggleSaveInputView: React.FC<IToggleSaveInputViewProps> = ({
   } else {
     return (
       <>
-        <StyledCompensationContainer>
+        <StyledToggleContainer>
           {asCurrency ? formatMoney(Number(value)) : value}
           <EditButton onClick={() => setIsEditing(true)} />
-        </StyledCompensationContainer>
+        </StyledToggleContainer>
       </>
     );
   }
 };
 
-export const StyledCompensationContainer = styled.div`
+export const StyledToggleContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
diff --git a/source/frontend/src/features/notes/list/NoteResults/columns.tsx b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
index 31c1c1d096..41cb253b20 100644
--- a/source/frontend/src/features/notes/list/NoteResults/columns.tsx
+++ b/source/frontend/src/features/notes/list/NoteResults/columns.tsx
@@ -52,7 +52,6 @@ export function createTableColumns(
         return (
           <StyledDiv>
             <Col xs={1} className="p-0">
-              {' '}
               {hasClaim(Claims.NOTE_VIEW) && (
                 <ViewButton
                   onClick={() => onShowDetails(cellProps.row.original)}

From e552cf147c228be2fa021ef2e6508d7ec24d589d Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Mon, 23 Dec 2024 14:23:09 -0800
Subject: [PATCH 6/6] Changing data-testId props

---
 .../components/common/buttons/EditButton.tsx  | 22 ++++++++-----------
 .../components/common/buttons/ViewButton.tsx  |  2 +-
 .../features/leases/add/RenewalSubForm.tsx    |  2 +-
 .../UpdateAcquisitionOwnersSubForm.tsx        |  2 +-
 .../UpdateAcquisitionTeamSubForm.tsx          |  2 +-
 .../tabs/agreement/detail/AgreementView.tsx   |  4 ++--
 .../form8/Form8PaymentItemsSubForm.tsx        |  2 +-
 .../details/ExpropriationForm8Details.tsx     |  4 ++--
 .../mapSideBar/compensation/list/columns.tsx  |  4 ++--
 .../financials/FinancialActivitiesSubForm.tsx |  2 +-
 .../form/DispositionTeamSubForm.tsx           |  2 +-
 .../tabs/offersAndSale/OffersAndSaleView.tsx  |  4 ++--
 .../DispositionOfferDetails.tsx               |  4 ++--
 .../form/DispositionSalePurchasersSubForm.tsx |  2 +-
 .../detail/ConsultationListView.tsx           |  4 ++--
 .../update/UpdateHistoricalNumbersSubForm.tsx |  2 +-
 .../list/ManagementActivitiesList.tsx         |  4 ++--
 .../detail/PropertyContactList.tsx            |  2 +-
 .../__snapshots__/NoteResults.test.tsx.snap   | 16 ++++----------
 19 files changed, 37 insertions(+), 49 deletions(-)

diff --git a/source/frontend/src/components/common/buttons/EditButton.tsx b/source/frontend/src/components/common/buttons/EditButton.tsx
index b54cdc1ba5..b018c5bdf8 100644
--- a/source/frontend/src/components/common/buttons/EditButton.tsx
+++ b/source/frontend/src/components/common/buttons/EditButton.tsx
@@ -7,26 +7,22 @@ interface IEditButtonProps {
   onClick: () => void;
   title?: string;
   icon?: React.ReactNode;
-  dataTestId?: string | null;
+  'data-testId'?: string;
   style?: CSSProperties | null;
 }
 
-export const EditButton: React.FunctionComponent<React.PropsWithChildren<IEditButtonProps>> = ({
-  onClick,
-  title,
-  icon,
-  dataTestId,
-  style,
-}) => {
+export const EditButton: React.FunctionComponent<
+  React.PropsWithChildren<IEditButtonProps>
+> = props => {
   return (
     <StyledIconButton
       variant="primary"
-      title={title ?? 'edit'}
-      onClick={onClick}
-      data-testid={dataTestId ?? 'edit-button'}
-      style={style}
+      title={props.title ?? 'edit'}
+      onClick={props.onClick}
+      data-testid={props['data-testId'] ?? 'edit-button'}
+      style={props.style}
     >
-      {icon ?? <FaEdit size={22} />}
+      {props.icon ?? <FaEdit size={22} />}
     </StyledIconButton>
   );
 };
diff --git a/source/frontend/src/components/common/buttons/ViewButton.tsx b/source/frontend/src/components/common/buttons/ViewButton.tsx
index f2d4f7a9a2..8787c895ff 100644
--- a/source/frontend/src/components/common/buttons/ViewButton.tsx
+++ b/source/frontend/src/components/common/buttons/ViewButton.tsx
@@ -8,7 +8,7 @@ interface IViewButtonProps extends ButtonProps {
   onClick: () => void;
   title?: string;
   icon?: React.ReactNode;
-  dataTestId?: string | null;
+  'data-testId'?: string;
   style?: CSSProperties | null;
 }
 
diff --git a/source/frontend/src/features/leases/add/RenewalSubForm.tsx b/source/frontend/src/features/leases/add/RenewalSubForm.tsx
index 4547f7f8a4..efe598491a 100644
--- a/source/frontend/src/features/leases/add/RenewalSubForm.tsx
+++ b/source/frontend/src/features/leases/add/RenewalSubForm.tsx
@@ -86,7 +86,7 @@ export const RenewalSubForm: React.FunctionComponent<IRenewalSubFormProps> = ({
                 </Col>
                 <Col xs="2" className="pt-2">
                   <RemoveButton
-                    dataTestId={`renewal.${index}.remove-button`}
+                    data-testId={`renewal.${index}.remove-button`}
                     onRemove={() => {
                       setModalContent({
                         ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/UpdateAcquisitionOwnersSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/UpdateAcquisitionOwnersSubForm.tsx
index dfc64c4f92..d9cc1e598a 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/UpdateAcquisitionOwnersSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/UpdateAcquisitionOwnersSubForm.tsx
@@ -65,7 +65,7 @@ const UpdateAcquisitionOwnersSubForm: React.FC<{ isSubFile?: boolean }> = ({
                   <ButtonDiv>
                     <RemoveButton
                       label={isSubFile ? 'Remove Sub-interest' : 'Remove Owner'}
-                      dataTestId={`owners[${index}]-remove-button`}
+                      data-testId={`owners[${index}]-remove-button`}
                       onRemove={() => {
                         setRemoveIndex(index);
                         setShowRemoveModal(true);
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/UpdateAcquisitionTeamSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/UpdateAcquisitionTeamSubForm.tsx
index a0c754a140..7200f76292 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/UpdateAcquisitionTeamSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/UpdateAcquisitionTeamSubForm.tsx
@@ -52,7 +52,7 @@ export const UpdateAcquisitionTeamSubForm: React.FunctionComponent<
                 </Col>
                 <Col xs="auto" xl="2" className="pl-0 mt-2">
                   <RemoveButton
-                    dataTestId={`team.${index}.remove-button`}
+                    data-testId={`team.${index}.remove-button`}
                     onRemove={() => {
                       setRemoveIndex(index);
                       setShowRemoveMemberModal(true);
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
index 80de581875..ab339622f7 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
@@ -94,7 +94,7 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                             <>
                               <EditButton
                                 title="Edit Agreement"
-                                dataTestId={`agreements[${index}].edit-btn`}
+                                data-testId={`agreements[${index}].edit-btn`}
                                 onClick={() =>
                                   history.push(`${match.url}/${agreement.agreementId}/update`)
                                 }
@@ -102,7 +102,7 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                               />
                               <RemoveIconButton
                                 title="Delete Agreement"
-                                dataTestId={`agreements[${index}].delete-btn`}
+                                data-testId={`agreements[${index}].delete-btn`}
                                 icon={<FaTrash size={'1.75rem'} />}
                                 onRemove={() => {
                                   setModalContent({
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
index c223922c5c..24cc4a233d 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
@@ -78,7 +78,7 @@ export const Form8PaymentItemsSubForm: React.FunctionComponent<IForm8PaymentItem
                   <label>Payment Item {index + 1}</label>
                   <RemoveIconButton
                     title="Delete Payment Item"
-                    dataTestId={`paymentItems[${index}].delete-button`}
+                    data-testId={`paymentItems[${index}].delete-button`}
                     onRemove={() => {
                       setModalContent({
                         ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
index 08c7fd9a5e..20a1c63b9b 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
@@ -63,13 +63,13 @@ export const ExpropriationForm8Details: React.FunctionComponent<
             <>
               <EditButton
                 title="Edit form 8"
-                dataTestId={`form8[${form8Index}].edit-form8`}
+                data-testId={`form8[${form8Index}].edit-form8`}
                 onClick={() => history.push(`${match.url}/${form8.id}`)}
                 style={{ float: 'right' }}
               />
               <RemoveIconButton
                 title="Delete Form 8"
-                dataTestId={`form8[${form8Index}].delete-form8`}
+                data-testId={`form8[${form8Index}].delete-form8`}
                 onRemove={() => {
                   setModalContent({
                     ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx b/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
index a217c475c7..d2509d30cd 100644
--- a/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
@@ -98,7 +98,7 @@ export function createCompensationTableColumns(
           <StyledDiv className="no-gutters">
             {hasClaim(Claims.COMPENSATION_REQUISITION_VIEW) && (
               <ViewButton
-                dataTestId={`compensation-view-${cellProps.row.id}`}
+                data-testId={`compensation-view-${cellProps.row.id}`}
                 title="Compensation view details"
                 id={`compensation-view-${cellProps.row.id}`}
                 onClick={() => cellProps.row.original.id && onShow(cellProps.row.original.id)}
@@ -108,7 +108,7 @@ export function createCompensationTableColumns(
               canEditDetails(cellProps.row.original.isDraft) && (
                 <RemoveIconButton
                   id={`compensation-delete-${cellProps.row.id}`}
-                  dataTestId={`compensation-delete-${cellProps.row.id}`}
+                  data-testId={`compensation-delete-${cellProps.row.id}`}
                   onRemove={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
                   title="Delete Compensation"
                 />
diff --git a/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx b/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
index ade7643d77..128fb42ae3 100644
--- a/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
@@ -89,7 +89,7 @@ export const FinancialActivitiesSubForm: React.FunctionComponent<
                     <label>Activity {index + 1}</label>
                     <RemoveIconButton
                       title="Delete Financial Activity"
-                      dataTestId={`activity[${index}].delete-button`}
+                      data-testId={`activity[${index}].delete-button`}
                       onRemove={() => {
                         setRowToDelete(index);
                         setShowModal(true);
diff --git a/source/frontend/src/features/mapSideBar/disposition/form/DispositionTeamSubForm.tsx b/source/frontend/src/features/mapSideBar/disposition/form/DispositionTeamSubForm.tsx
index 3170e972cb..ca85b2602a 100644
--- a/source/frontend/src/features/mapSideBar/disposition/form/DispositionTeamSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/form/DispositionTeamSubForm.tsx
@@ -53,7 +53,7 @@ const DispositionTeamSubForm: React.FunctionComponent<React.PropsWithChildren<un
                 </Col>
                 <Col xs="auto" xl="2" className="pl-0 mt-2">
                   <RemoveButton
-                    dataTestId={`team.${index}.remove-button`}
+                    data-testId={`team.${index}.remove-button`}
                     onRemove={() => {
                       setModalContent({
                         ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
index 7769601f3f..498ac6f380 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
@@ -71,7 +71,7 @@ const OffersAndSaleView: React.FunctionComponent<IOffersAndSaleViewProps> = ({
             {keycloak.hasClaim(Claims.DISPOSITION_EDIT) && canEditDetails() && (
               <EditButton
                 title="Edit Appraisal"
-                dataTestId={`appraisal-edit-btn`}
+                data-testId={`appraisal-edit-btn`}
                 onClick={() => {
                   history.push(`${match.url}/appraisal/update`);
                 }}
@@ -166,7 +166,7 @@ const OffersAndSaleView: React.FunctionComponent<IOffersAndSaleViewProps> = ({
             {keycloak.hasClaim(Claims.DISPOSITION_EDIT) && canEditDetails() && (
               <EditButton
                 title="Edit Sale"
-                dataTestId={`sale-edit-btn`}
+                data-testId={`sale-edit-btn`}
                 onClick={() => {
                   history.push(`${match.url}/sale/update`);
                 }}
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
index 9c3d423ed6..6aeac522c4 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
@@ -51,12 +51,12 @@ const DispositionOfferDetails: React.FunctionComponent<IDispositionOfferDetailsP
           <>
             <EditButton
               title="Edit Offer"
-              dataTestId={`Offer[${index}].edit-btn`}
+              data-testId={`Offer[${index}].edit-btn`}
               onClick={() => history.push(`${match.url}/offers/${dispositionOffer.id}/update`)}
             />
             <RemoveIconButton
               title="Delete Offer"
-              dataTestId={`Offer[${index}].delete-btn`}
+              data-testId={`Offer[${index}].delete-btn`}
               onRemove={() => {
                 setModalContent({
                   ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
index ded0361c65..0e736c8b43 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
@@ -42,7 +42,7 @@ const DispositionSalePurchaserSubForm: React.FunctionComponent<
                   <Col xs="auto" xl="2" className="pl-3 mt-2">
                     <RemoveIconButton
                       title="Remove Purchaser"
-                      dataTestId={`dispositionPurchasers.${index}.remove-button`}
+                      data-testId={`dispositionPurchasers.${index}.remove-button`}
                       onRemove={() => {
                         setModalContent({
                           ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
index e9e72652c7..9f762f0163 100644
--- a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
+++ b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
@@ -108,7 +108,7 @@ export const ConsultationListView: React.FunctionComponent<IConsultationListView
                             <Col xs="auto" className="px-1">
                               <RemoveIconButton
                                 title="Delete Consultation"
-                                dataTestId={`consultations[${index}].delete-btn`}
+                                data-testId={`consultations[${index}].delete-btn`}
                                 onRemove={() => {
                                   setModalContent({
                                     ...getDeleteModalProps(),
@@ -134,7 +134,7 @@ export const ConsultationListView: React.FunctionComponent<IConsultationListView
                               <StyledButtonContainer>
                                 <EditButton
                                   title="Edit Consultation"
-                                  dataTestId={`consultations[${index}].edit-btn`}
+                                  data-testId={`consultations[${index}].edit-btn`}
                                   onClick={() => onEdit(consultation.id)}
                                 />
                               </StyledButtonContainer>
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdateHistoricalNumbersSubForm.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdateHistoricalNumbersSubForm.tsx
index f8d8e8a949..3be8ac6509 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdateHistoricalNumbersSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdateHistoricalNumbersSubForm.tsx
@@ -54,7 +54,7 @@ export const UpdateHistoricalNumbersSubForm: React.FC<IUpdateHistoricalNumbersSu
                 </Col>
                 <Col xs="auto" xl="2" className="pl-0">
                   <RemoveButton
-                    dataTestId={`historical-number-remove-button-${index}`}
+                    data-testId={`historical-number-remove-button-${index}`}
                     onRemove={() => {
                       arrayHelpers.remove(index);
                     }}
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
index 32e77993d8..27696eab0e 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
@@ -89,7 +89,7 @@ export function createTableColumns(
           <StyledDiv>
             {hasClaim(Claims.MANAGEMENT_VIEW) && (
               <ViewButton
-                dataTestId={`activity-view-${activityRow.id}`}
+                data-testId={`activity-view-${activityRow.id}`}
                 onClick={() => activityRow?.id && onView(activityRow.activityId)}
                 id={`activity-view-${cellProps.row.id}`}
                 title="property-activity view details"
@@ -100,7 +100,7 @@ export function createTableColumns(
               PropertyManagementActivityStatusTypes.NOTSTARTED ? (
               <RemoveIconButton
                 id={`activity-delete-${cellProps.row.id}`}
-                dataTestId={`activity-delete-${activityRow.id}`}
+                data-testId={`activity-delete-${activityRow.id}`}
                 onRemove={() => activityRow.id && onDelete(activityRow.id)}
                 title="Delete"
               />
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
index e871b2453c..b687bf683e 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
@@ -116,7 +116,7 @@ export function createContactTableColumns(
             {hasClaim(Claims.PROPERTY_EDIT) && (
               <RemoveIconButton
                 id={`contact-delete-${cellProps.row.id}`}
-                dataTestId={`contact-delete-${cellProps.row.id}`}
+                data-testId={`contact-delete-${cellProps.row.id}`}
                 onRemove={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
                 title="Delete contact"
               />
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 aa118e2c01..2473ffce8a 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
@@ -509,9 +509,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
             >
               <div
                 class="p-0 col-1"
-              >
-                 
-              </div>
+              />
               <div
                 class="p-0 col-1"
               >
@@ -587,9 +585,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
             >
               <div
                 class="p-0 col-1"
-              >
-                 
-              </div>
+              />
               <div
                 class="p-0 col-1"
               >
@@ -665,9 +661,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
             >
               <div
                 class="p-0 col-1"
-              >
-                 
-              </div>
+              />
               <div
                 class="p-0 col-1"
               >
@@ -743,9 +737,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
             >
               <div
                 class="p-0 col-1"
-              >
-                 
-              </div>
+              />
               <div
                 class="p-0 col-1"
               >