diff --git a/source/frontend/src/components/common/EditButton.tsx b/source/frontend/src/components/common/EditButton.tsx
deleted file mode 100644
index 78806d91b9..0000000000
--- a/source/frontend/src/components/common/EditButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button } from 'react-bootstrap';
-import { FaEdit } from 'react-icons/fa';
-
-interface IEditButtonProps {
-  onClick: () => void;
-  title?: string;
-  icon?: React.ReactNode;
-  dataTestId?: string | null;
-}
-
-export const EditButton: React.FunctionComponent<React.PropsWithChildren<IEditButtonProps>> = ({
-  onClick,
-  title,
-  icon,
-  dataTestId,
-}) => {
-  return (
-    <Button
-      variant="link"
-      title={title ?? 'edit'}
-      onClick={onClick}
-      data-testid={dataTestId ?? 'edit-button'}
-    >
-      {icon ?? <FaEdit size={'2rem'} />}
-    </Button>
-  );
-};
-
-export default EditButton;
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/buttons/EditButton.tsx b/source/frontend/src/components/common/buttons/EditButton.tsx
new file mode 100644
index 0000000000..b018c5bdf8
--- /dev/null
+++ b/source/frontend/src/components/common/buttons/EditButton.tsx
@@ -0,0 +1,30 @@
+import { FaEdit } from 'react-icons/fa';
+import { CSSProperties } from 'styled-components';
+
+import { StyledIconButton } from './IconButton';
+
+interface IEditButtonProps {
+  onClick: () => void;
+  title?: string;
+  icon?: React.ReactNode;
+  'data-testId'?: string;
+  style?: CSSProperties | null;
+}
+
+export const EditButton: React.FunctionComponent<
+  React.PropsWithChildren<IEditButtonProps>
+> = props => {
+  return (
+    <StyledIconButton
+      variant="primary"
+      title={props.title ?? 'edit'}
+      onClick={props.onClick}
+      data-testid={props['data-testId'] ?? 'edit-button'}
+      style={props.style}
+    >
+      {props.icon ?? <FaEdit size={22} />}
+    </StyledIconButton>
+  );
+};
+
+export default EditButton;
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..8072e89a6e 100644
--- a/source/frontend/src/components/common/buttons/RemoveButton.tsx
+++ b/source/frontend/src/components/common/buttons/RemoveButton.tsx
@@ -1,31 +1,49 @@
-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;
-  dataTestId?: string | null;
+  title?: string;
+  '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>
+> = props => {
+  return (
+    <StyledRemoveIconButton
+      variant="primary"
+      title={props.title ?? 'remove'}
+      onClick={props.onRemove}
+      data-testid={props['data-testId'] ?? 'remove-button'}
+      style={props.style}
+    >
+      {props.icon ?? <FaTrash size={22} />}
+    </StyledRemoveIconButton>
+  );
+};
+
 // Support font-size override for remove buttons
 export const StyledRemoveLinkButton = styled(LinkButton)<{ $fontSize?: string }>`
   &&.btn {
@@ -60,20 +78,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..8787c895ff
--- /dev/null
+++ b/source/frontend/src/components/common/buttons/ViewButton.tsx
@@ -0,0 +1,29 @@
+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;
+  'data-testId'?: string;
+  style?: CSSProperties | null;
+}
+
+export const ViewButton: React.FunctionComponent<
+  React.PropsWithChildren<IViewButtonProps>
+> = props => (
+  <StyledIconButton
+    variant="primary"
+    title={props.title ?? 'view'}
+    onClick={props.onClick}
+    data-testid={props['data-testId'] ?? 'view-button'}
+    style={props.style}
+  >
+    {props.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..d1e149516a 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)} />
+        <StyledToggleContainer>
+          {asCurrency ? formatMoney(Number(value)) : value}
+          <EditButton onClick={() => setIsEditing(true)} />
+        </StyledToggleContainer>
       </>
     );
   }
 };
+
+export const StyledToggleContainer = 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/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/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/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/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/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 4e065a7d53..856a4ae0ed 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
@@ -1315,7 +1315,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"
                       >
@@ -1327,20 +1328,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/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/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/__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/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/__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/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/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/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/__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/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/periodColumns.tsx
index 5679e80b80..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
@@ -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,16 @@ 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>
+              id={`edit-period-${index}`}
+              onRemove={() => original.id && onDelete(original)}
+            />
           )}
         {hasClaim(Claims.LEASE_EDIT) &&
           (original.payments.length > 0 ||
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 436212a8bd..13c6d56f10 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/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/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/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/__snapshots__/AcquisitionFileTabs.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap
index daec44a1d6..392b3458a0 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 2e16e2b9bb..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
@@ -1,9 +1,9 @@
-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';
 
-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';
@@ -94,16 +94,17 @@ 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`)
                                 }
+                                icon={<FaEdit size={'2rem'} />}
                               />
-                              <StyledRemoveLinkButton
+                              <RemoveIconButton
                                 title="Delete Agreement"
-                                data-testid={`agreements[${index}].delete-btn`}
-                                variant="light"
-                                onClick={() => {
+                                data-testId={`agreements[${index}].delete-btn`}
+                                icon={<FaTrash size={'1.75rem'} />}
+                                onRemove={() => {
                                   setModalContent({
                                     ...getDeleteModalProps(),
                                     variant: 'error',
@@ -122,9 +123,7 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                                   });
                                   setDisplayModal(true);
                                 }}
-                              >
-                                <FaTrash size="2rem" />
-                              </StyledRemoveLinkButton>
+                              />
                             </>
                           )}
                       </StyledButtonContainer>
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 1184be4b0b..6b27bc6d89 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
@@ -440,7 +440,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"
@@ -754,7 +754,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 95fff8d092..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
@@ -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={() => {
+                    data-testId={`paymentItems[${index}].delete-button`}
+                    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 4d9d338000..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
@@ -1,10 +1,10 @@
 import { Col, Row } from 'react-bootstrap';
-import { FaExternalLinkAlt, FaFileContract, FaTrash } from 'react-icons/fa';
+import { FaExternalLinkAlt, FaFileContract } 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';
@@ -63,14 +63,14 @@ 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' }}
               />
-              <StyledRemoveLinkButton
+              <RemoveIconButton
                 title="Delete Form 8"
-                data-testid={`form8[${form8Index}].delete-form8`}
-                variant="light"
-                onClick={() => {
+                data-testId={`form8[${form8Index}].delete-form8`}
+                onRemove={() => {
                   setModalContent({
                     ...getDeleteModalProps(),
                     title: 'Remove Form 8',
@@ -86,9 +86,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 ab9b60622a..296e6676a2 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/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap
index b6967b994d..d89ccd0683 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/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/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/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/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/CompensationRequisitionDetailView.tsx b/source/frontend/src/features/mapSideBar/compensation/detail/CompensationRequisitionDetailView.tsx
index ffc4b1f8f5..c3cc36dee9 100644
--- a/source/frontend/src/features/mapSideBar/compensation/detail/CompensationRequisitionDetailView.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/detail/CompensationRequisitionDetailView.tsx
@@ -4,7 +4,7 @@ import { FaExternalLinkAlt, FaFileContract } 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';
@@ -190,6 +190,7 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
       onClick={() => {
         setEditMode(true);
       }}
+      style={{ float: 'right' }}
     />
   );
 
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 c75e9ce073..1a6eb271b6 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
@@ -755,7 +755,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"
@@ -938,7 +938,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"
@@ -1060,7 +1060,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 b1bee2ee69..d2509d30cd 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
+                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)}
-              ></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)}
+                  data-testId={`compensation-delete-${cellProps.row.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/__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 1f4cc293fe..128fb42ae3 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"
-                      data-testid={`activity[${index}].delete-button`}
-                      variant="light"
-                      onClick={() => {
+                    <RemoveIconButton
+                      title="Delete Financial Activity"
+                      data-testId={`activity[${index}].delete-button`}
+                      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/__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/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/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/__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/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/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/OffersAndSaleView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
index 02a918c141..498ac6f380 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';
@@ -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/__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 d5e97a9261..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
@@ -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';
@@ -52,14 +51,13 @@ 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`)}
             />
-            <StyledRemoveLinkButton
+            <RemoveIconButton
               title="Delete Offer"
-              data-testid={`Offer[${index}].delete-btn`}
-              variant="light"
-              onClick={() => {
+              data-testId={`Offer[${index}].delete-btn`}
+              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..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
@@ -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={() => {
+                      data-testId={`dispositionPurchasers.${index}.remove-button`}
+                      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..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
@@ -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={() => {
+                                data-testId={`consultations[${index}].delete-btn`}
+                                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"
+                                  data-testId={`consultations[${index}].edit-btn`}
+                                  onClick={() => onEdit(consultation.id)}
+                                />
+                              </StyledButtonContainer>
                             </Col>
                           </>
                         )}
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/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/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/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/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/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/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/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/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..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
@@ -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
-                data-testid={`activity-view-${activityRow.id}`}
-                icon={
-                  <FaEye
-                    size="2rem"
-                    id={`activity-view-${cellProps.row.id}`}
-                    title="property-activity view details"
-                  />
-                }
+              <ViewButton
+                data-testId={`activity-view-${activityRow.id}`}
                 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)}
+                data-testId={`activity-delete-${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/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 f63fdf2113..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
@@ -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)}
+                data-testId={`contact-delete-${cellProps.row.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/__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/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/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/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/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/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/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/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/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/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/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..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
@@ -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,39 @@ 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="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 +581,39 @@ 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="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 +657,39 @@ 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="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>
@@ -673,31 +733,39 @@ 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="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 605149c04d..41cb253b20 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,22 @@ 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"
+                  onRemove={() => onDelete(cellProps.row.original)}
+                />
+              )}
+            </Col>
           </StyledDiv>
         );
       },
@@ -81,7 +76,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/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"
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;