From be9971aaab1ad695f9c3daa67fa626d43fae8ea7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 31 May 2024 20:56:29 +0000
Subject: [PATCH 1/7] CI: Bump version to v5.3.0-81.24

---
 source/backend/api/Pims.Api.csproj | 4 ++--
 source/frontend/package.json       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/backend/api/Pims.Api.csproj b/source/backend/api/Pims.Api.csproj
index eda1469bb4..7bfd4a576a 100644
--- a/source/backend/api/Pims.Api.csproj
+++ b/source/backend/api/Pims.Api.csproj
@@ -2,8 +2,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <UserSecretsId>0ef6255f-9ea0-49ec-8c65-c172304b4926</UserSecretsId>
-    <Version>5.3.0-81.23</Version>
-    <Version>5.3.0-81.23</Version>
+    <Version>5.3.0-81.24</Version>
+    <Version>5.3.0-81.24</Version>
     <AssemblyVersion>5.3.0.81</AssemblyVersion>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
     <ProjectGuid>16BC0468-78F6-4C91-87DA-7403C919E646</ProjectGuid>
diff --git a/source/frontend/package.json b/source/frontend/package.json
index e18561c70d..aca0bcef61 100644
--- a/source/frontend/package.json
+++ b/source/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "5.3.0-81.23",
+  "version": "5.3.0-81.24",
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "1.0.1",

From 513f7bcf5272a27af143d9e8bde4cc3b60ea64b4 Mon Sep 17 00:00:00 2001
From: devinleighsmith <41091511+devinleighsmith@users.noreply.github.com>
Date: Fri, 31 May 2024 14:13:50 -0700
Subject: [PATCH 2/7] modify tooltip render direction to avoid clipping.
 (#4069)

* modify tooltip render direction to avoid clipping.

* also correct remarks section.

---------

Co-authored-by: Smith <devin.smith@quartech.com>
---
 .../frontend/src/features/leases/add/LeaseDetailSubForm.tsx | 1 +
 .../detail/CompensationRequisitionDetailView.tsx            | 2 +-
 .../CompensationRequisitionDetailView.test.tsx.snap         | 6 +++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/source/frontend/src/features/leases/add/LeaseDetailSubForm.tsx b/source/frontend/src/features/leases/add/LeaseDetailSubForm.tsx
index b452544858..c129ab96db 100644
--- a/source/frontend/src/features/leases/add/LeaseDetailSubForm.tsx
+++ b/source/frontend/src/features/leases/add/LeaseDetailSubForm.tsx
@@ -104,6 +104,7 @@ export const LeaseDetailSubForm: React.FunctionComponent<ILeaseDetailsSubFormPro
                 <li>Archived: File to be archived as per ARCS/ORCS.</li>
               </ul>
             }
+            placement="right"
           ></TooltipIcon>
         }
         required
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
index 10a8c01859..80f9286c82 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
@@ -352,7 +352,7 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
 
       <Section>
         <SectionField label="Detailed remarks" labelWidth="12">
-          {compensation.detailedRemarks}
+          <p style={{ whiteSpace: 'pre-wrap' }}>{compensation.detailedRemarks}</p>
         </SectionField>
       </Section>
 
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
index 01d6994561..080b8bc4e4 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
@@ -936,7 +936,11 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
           </div>
           <div
             class="c8 text-left col"
-          />
+          >
+            <p
+              style="white-space: pre-wrap;"
+            />
+          </div>
         </div>
       </div>
     </div>

From 37170e96654c8ec917a0c55c4c652eed6c0050e0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 31 May 2024 21:14:15 +0000
Subject: [PATCH 3/7] CI: Bump version to v5.3.0-81.25

---
 source/backend/api/Pims.Api.csproj | 4 ++--
 source/frontend/package.json       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/backend/api/Pims.Api.csproj b/source/backend/api/Pims.Api.csproj
index 7bfd4a576a..233786930d 100644
--- a/source/backend/api/Pims.Api.csproj
+++ b/source/backend/api/Pims.Api.csproj
@@ -2,8 +2,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <UserSecretsId>0ef6255f-9ea0-49ec-8c65-c172304b4926</UserSecretsId>
-    <Version>5.3.0-81.24</Version>
-    <Version>5.3.0-81.24</Version>
+    <Version>5.3.0-81.25</Version>
+    <Version>5.3.0-81.25</Version>
     <AssemblyVersion>5.3.0.81</AssemblyVersion>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
     <ProjectGuid>16BC0468-78F6-4C91-87DA-7403C919E646</ProjectGuid>
diff --git a/source/frontend/package.json b/source/frontend/package.json
index aca0bcef61..941b6c6add 100644
--- a/source/frontend/package.json
+++ b/source/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "5.3.0-81.24",
+  "version": "5.3.0-81.25",
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "1.0.1",

From 3eb73a3c94da6f673bdea2cbe15b651a4dd41519 Mon Sep 17 00:00:00 2001
From: Manuel Rodriguez <marobej@gmail.com>
Date: Fri, 31 May 2024 15:06:46 -0700
Subject: [PATCH 4/7] psp-8499 | Updated historical number rendering for leases
 (#4050)

* Updated historical number rendering for leases

* Fixed tests

* Updated placeholder and duplicate logic for Historical File #
---
 .../leases/list/LeaseFilter/LeaseFilter.tsx   |  2 +-
 .../leases/list/LeaseListView.test.tsx        |  6 +-
 .../LeaseSearchResults/LeaseSearchResults.tsx | 91 ++----------------
 .../LeaseSearchResults.test.tsx.snap          | 22 +----
 .../__snapshots__/LeaseListView.test.tsx.snap |  2 +-
 .../acquisition/common/AcquisitionHeader.tsx  |  8 +-
 .../disposition/common/DispositionHeader.tsx  |  8 +-
 .../mapSideBar/lease/common/LeaseHeader.tsx   |  5 +-
 .../property/MotiInventoryHeader.tsx          |  5 +-
 .../research/common/ResearchHeader.tsx        |  8 +-
 .../header/HistoricalNumberContainer.tsx      |  4 +-
 .../header/HistoricalNumberFieldView.tsx      | 87 +++++++++++++++++
 .../header/HistoricalNumberSectionView.tsx    | 96 +------------------
 .../properties/filter/PropertyFilter.tsx      |  5 +-
 .../properties/list/PropertyListView.test.tsx | 42 +++++---
 .../src/features/properties/list/columns.tsx  |  3 +-
 16 files changed, 153 insertions(+), 241 deletions(-)
 create mode 100644 source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberFieldView.tsx

diff --git a/source/frontend/src/features/leases/list/LeaseFilter/LeaseFilter.tsx b/source/frontend/src/features/leases/list/LeaseFilter/LeaseFilter.tsx
index f4d286efa9..787b609dd4 100644
--- a/source/frontend/src/features/leases/list/LeaseFilter/LeaseFilter.tsx
+++ b/source/frontend/src/features/leases/list/LeaseFilter/LeaseFilter.tsx
@@ -130,7 +130,7 @@ export const LeaseFilter: React.FunctionComponent<React.PropsWithChildren<ILease
                           {
                             label: 'Historical File #',
                             key: 'historical',
-                            placeholder: 'Enter a LIS or PS file Number',
+                            placeholder: 'Enter a Historical file# (LIS, PS, etc.)',
                           },
                         ]}
                         className="idir-input-group"
diff --git a/source/frontend/src/features/leases/list/LeaseListView.test.tsx b/source/frontend/src/features/leases/list/LeaseListView.test.tsx
index 92965651e1..9985136301 100644
--- a/source/frontend/src/features/leases/list/LeaseListView.test.tsx
+++ b/source/frontend/src/features/leases/list/LeaseListView.test.tsx
@@ -223,7 +223,7 @@ describe('Lease and License List View', () => {
       }),
     );
 
-    expect(await findByText(/0309-001;/i)).toBeInTheDocument();
+    expect(await findByText(/0309-001/i)).toBeInTheDocument();
   });
 
   it('searches historical file number for PS', async () => {
@@ -253,7 +253,7 @@ describe('Lease and License List View', () => {
                   123,
                   '0309-000',
                   ApiGen_CodeTypes_HistoricalFileNumberTypes.PSNO.toString(),
-                  'PS #',
+                  'PS',
                 ),
               ],
             },
@@ -275,7 +275,7 @@ describe('Lease and License List View', () => {
       }),
     );
 
-    expect(await findByText(/0309-000;/i)).toBeInTheDocument();
+    expect(await findByText(/0309-000/i)).toBeInTheDocument();
   });
 
   it('searches historical file number for OTHER', async () => {
diff --git a/source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx b/source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx
index 2047ff7ad7..1f556965c7 100644
--- a/source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx
+++ b/source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx
@@ -1,4 +1,3 @@
-import { groupBy } from 'lodash';
 import moment from 'moment';
 import { useCallback } from 'react';
 import { Tooltip } from 'react-bootstrap';
@@ -10,8 +9,7 @@ import styled from 'styled-components';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import { ColumnWithProps, renderTypeCode, Table } from '@/components/Table';
 import { TableSort } from '@/components/Table/TableSort';
-import { ApiGen_CodeTypes_HistoricalFileNumberTypes } from '@/models/api/generated/ApiGen_CodeTypes_HistoricalFileNumberTypes';
-import { ApiGen_Concepts_HistoricalFileNumber } from '@/models/api/generated/ApiGen_Concepts_HistoricalFileNumber';
+import { HistoricalNumberFieldView } from '@/features/mapSideBar/shared/header/HistoricalNumberFieldView';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
 import { exists, prettyFormatDate } from '@/utils';
 import { formatApiPersonNames } from '@/utils/personUtils';
@@ -117,79 +115,16 @@ const columns: ColumnWithProps<ApiGen_Concepts_Lease>[] = [
     align: 'left',
     clickable: false,
     sortable: false,
-    width: 10,
-    maxWidth: 20,
+    width: 30,
+    maxWidth: 30,
     Cell: (props: CellProps<ApiGen_Concepts_Lease>) => {
-      // File numbers types to display
-      const numberTypes: string[] = [
-        ApiGen_CodeTypes_HistoricalFileNumberTypes.LISNO.toString(),
-        ApiGen_CodeTypes_HistoricalFileNumberTypes.PSNO.toString(),
-        ApiGen_CodeTypes_HistoricalFileNumberTypes.OTHER.toString(),
-      ];
-
       // Get unique file numbers from lease properties
-      const fileNumbers: ApiGen_Concepts_HistoricalFileNumber[] = [];
-      props.row.original.fileProperties?.forEach(fl => {
-        fl.property.historicalFileNumbers?.forEach(number => {
-          if (numberTypes.includes(number.historicalFileNumberTypeCode.id)) {
-            if (
-              !fileNumbers.find(
-                x =>
-                  x.historicalFileNumber === number.historicalFileNumber &&
-                  x.historicalFileNumberTypeCode.id === number.historicalFileNumberTypeCode.id,
-              )
-            ) {
-              fileNumbers.push(number);
-            }
-          }
-        });
-      });
-
-      const groupByType = groupBy(fileNumbers, x => x.historicalFileNumberTypeCode.id);
-
-      let lisNumbers = '';
-      let psNumbers = '';
-      let otherNumbers = '';
-      if (groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.LISNO.toString()]?.length) {
-        lisNumbers = groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.LISNO.toString()]
-          .map(x => x.historicalFileNumber)
-          .join(', ');
-      }
-
-      if (groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.PSNO.toString()]?.length) {
-        psNumbers = groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.PSNO.toString()]
-          .map(x => x.historicalFileNumber)
-          .join(', ');
-      }
+      const fileNumbers =
+        props.row.original?.fileProperties
+          ?.flatMap(fl => fl?.property?.historicalFileNumbers)
+          .filter(exists) ?? [];
 
-      if (groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.OTHER.toString()]?.length) {
-        otherNumbers = groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.OTHER.toString()]
-          .map(x => x.historicalFileNumber)
-          .join(', ');
-      }
-
-      return (
-        <FileNumbersDiv>
-          {lisNumbers ? (
-            <label>
-              <span>LIS: </span>
-              {lisNumbers};
-            </label>
-          ) : null}
-          {psNumbers ? (
-            <label>
-              <span>PS: </span>
-              {psNumbers};
-            </label>
-          ) : null}
-          {otherNumbers ? (
-            <label>
-              <span>OTHER: </span>
-              {otherNumbers}.
-            </label>
-          ) : null}
-        </FileNumbersDiv>
-      );
+      return <HistoricalNumberFieldView historicalNumbers={fileNumbers} />;
     },
   },
   {
@@ -240,16 +175,6 @@ export function LeaseSearchResults(props: ILeaseSearchResultsProps) {
   );
 }
 
-const FileNumbersDiv = styled('div')`
-  label {
-    display: inline-block;
-
-    span {
-      font-weight: bold;
-    }
-  }
-`;
-
 const ExpiredIcon = styled('span')`
   color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault};
 `;
diff --git a/source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap b/source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap
index 7839e1badf..7dc540810a 100644
--- a/source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap
+++ b/source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap
@@ -39,14 +39,6 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
   border-radius: 0.4rem;
 }
 
-.c4 label {
-  display: inline-block;
-}
-
-.c4 label span {
-  font-weight: bold;
-}
-
 <div
     class="table"
     data-testid="leasesTable"
@@ -226,7 +218,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
           class="th"
           colspan="1"
           role="columnheader"
-          style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
+          style="box-sizing: border-box; flex: 30 0 auto; min-width: 30px; width: 30px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
         >
           <div
             class="sortable-column"
@@ -384,12 +376,10 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 30 0 auto; min-width: 30px; width: 30px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <div
-              class="c4"
-            />
+            <div />
           </div>
           <div
             class="td"
@@ -497,12 +487,10 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 30 0 auto; min-width: 30px; width: 30px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <div
-              class="c4"
-            />
+            <div />
           </div>
           <div
             class="td"
diff --git a/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap b/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
index 84714ee67a..4a2a287fca 100644
--- a/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
+++ b/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
@@ -1016,7 +1016,7 @@ exports[`Lease and License List View > matches snapshot 1`] = `
               class="th"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
+              style="box-sizing: border-box; flex: 30 0 auto; min-width: 30px; width: 30px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             >
               <div
                 class="sortable-column"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx
index 92cf2ed4a7..1e87f5a571 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx
@@ -11,7 +11,7 @@ import { exists } from '@/utils';
 import { formatMinistryProject } from '@/utils/formUtils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
 
 export interface IAcquisitionHeaderProps {
   acquisitionFile?: ApiGen_Concepts_AcquisitionFile;
@@ -49,11 +49,7 @@ export const AcquisitionHeader: React.FunctionComponent<
             </>
           )}
         </HeaderField>
-        <HistoricalNumbersContainer
-          propertyIds={propertyIds}
-          displayValuesOnly={false}
-          View={HistoricalNumberFieldView}
-        />
+        <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
       </Col>
       <Col>
         <StyledFiller>
diff --git a/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx b/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx
index 7becefde18..ae5dd14dc1 100644
--- a/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx
@@ -10,7 +10,7 @@ import { ApiGen_Concepts_DispositionFile } from '@/models/api/generated/ApiGen_C
 import { exists } from '@/utils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
 
 export interface IDispositionHeaderProps {
   dispositionFile?: ApiGen_Concepts_DispositionFile;
@@ -32,11 +32,7 @@ export const DispositionHeader: React.FunctionComponent<
         <HeaderField label="File:" labelWidth={leftColumnLabel} contentWidth="9">
           D-{dispositionFile?.fileNumber}
         </HeaderField>
-        <HistoricalNumbersContainer
-          propertyIds={propertyIds}
-          displayValuesOnly={false}
-          View={HistoricalNumberFieldView}
-        />
+        <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
       </Col>
       <Col xs="5">
         <StyledFiller>
diff --git a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx
index b00010b9af..ee1b05ab81 100644
--- a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx
@@ -19,7 +19,7 @@ import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Le
 import { exists, prettyFormatDate } from '@/utils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
 import { LeaseHeaderTenants } from './LeaseHeaderTenants';
 
 export interface ILeaseHeaderProps {
@@ -74,8 +74,7 @@ export const LeaseHeader: React.FC<ILeaseHeaderProps> = ({ lease, lastUpdatedBy
           </Row>
           <HistoricalNumbersContainer
             propertyIds={propertyIds}
-            displayValuesOnly={false}
-            View={HistoricalNumberFieldView}
+            View={HistoricalNumberSectionView}
           />
         </Col>
 
diff --git a/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx b/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx
index e5a2cce772..c42f541377 100644
--- a/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx
@@ -16,7 +16,7 @@ import { exists, formatApiAddress, pidFormatter } from '@/utils';
 import { mapFeatureToProperty } from '@/utils/mapPropertyUtils';
 
 import HistoricalNumbersContainer from '../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../shared/header/HistoricalNumberSectionView';
 
 export interface IMotiInventoryHeaderProps {
   isLoading: boolean;
@@ -69,8 +69,7 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
           </HeaderField>
           {exists(apiProperty) && (
             <HistoricalNumbersContainer
-              View={HistoricalNumberFieldView}
-              displayValuesOnly={false}
+              View={HistoricalNumberSectionView}
               propertyIds={[apiProperty?.id]}
             />
           )}
diff --git a/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx b/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
index 494bdcf1e9..8b00abf10f 100644
--- a/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
@@ -10,7 +10,7 @@ import { ApiGen_Concepts_ResearchFile } from '@/models/api/generated/ApiGen_Conc
 import { exists } from '@/utils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
 
 export interface IResearchHeaderProps {
   researchFile?: ApiGen_Concepts_ResearchFile;
@@ -64,11 +64,7 @@ const ResearchHeader: React.FunctionComponent<
         <HeaderField label="Ministry district:" labelWidth={leftColumnLabel} contentWidth="9">
           {districts}
         </HeaderField>
-        <HistoricalNumbersContainer
-          propertyIds={propertyIds}
-          displayValuesOnly={false}
-          View={HistoricalNumberFieldView}
-        />
+        <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
       </Col>
       <Col>
         <StyledFiller>
diff --git a/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberContainer.tsx b/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberContainer.tsx
index 33ea68bcfe..451f9e2830 100644
--- a/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberContainer.tsx
+++ b/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberContainer.tsx
@@ -7,12 +7,10 @@ import { IHistoricalNumbersViewProps } from './HistoricalNumberSectionView';
 
 export interface IHistoricalNumbersContainerProps {
   propertyIds: number[];
-  displayValuesOnly: boolean;
   View: React.FunctionComponent<IHistoricalNumbersViewProps>;
 }
 const HistoricalNumbersContainer: React.FC<IHistoricalNumbersContainerProps> = ({
   propertyIds,
-  displayValuesOnly,
   View,
 }) => {
   const [historicalNumbers, setHistoricalNumbers] = useState<
@@ -36,6 +34,6 @@ const HistoricalNumbersContainer: React.FC<IHistoricalNumbersContainerProps> = (
     });
   }, [propertyIds, getHistoricalExecute]);
 
-  return <View historicalNumbers={historicalNumbers} valuesOnly={displayValuesOnly} />;
+  return <View historicalNumbers={historicalNumbers} />;
 };
 export default HistoricalNumbersContainer;
diff --git a/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberFieldView.tsx b/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberFieldView.tsx
new file mode 100644
index 0000000000..ecd7c648f8
--- /dev/null
+++ b/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberFieldView.tsx
@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import styled from 'styled-components';
+
+import ExpandableTextList from '@/components/common/ExpandableTextList';
+import { Dictionary } from '@/interfaces/Dictionary';
+import { ApiGen_Base_CodeType } from '@/models/api/generated/ApiGen_Base_CodeType';
+import { ApiGen_CodeTypes_HistoricalFileNumberTypes } from '@/models/api/generated/ApiGen_CodeTypes_HistoricalFileNumberTypes';
+import { ApiGen_Concepts_HistoricalFileNumber } from '@/models/api/generated/ApiGen_Concepts_HistoricalFileNumber';
+import { exists } from '@/utils';
+
+export interface IHistoricalNumbersViewProps {
+  historicalNumbers: ApiGen_Concepts_HistoricalFileNumber[];
+}
+
+interface HistoricalGroup {
+  historicalType: ApiGen_Base_CodeType<string>;
+  historicalValues: Dictionary<ApiGen_Concepts_HistoricalFileNumber>;
+  otherDescription: string;
+  propertyKey: string;
+}
+
+export const HistoricalNumberFieldView: React.FC<IHistoricalNumbersViewProps> = ({
+  historicalNumbers,
+}) => {
+  const uniqueNumbers = useMemo(() => {
+    const flatNumberDictionary: Dictionary<HistoricalGroup> = historicalNumbers
+      .filter(exists)
+      .reduce((accumulator, h) => {
+        const historicalTypeKey = `[${h.historicalFileNumberTypeCode.id}-${h.otherHistFileNumberTypeCode}]`;
+        if (!(historicalTypeKey in accumulator)) {
+          accumulator[historicalTypeKey] = {
+            historicalType: h.historicalFileNumberTypeCode,
+            historicalValues: {},
+            otherDescription: h.otherHistFileNumberTypeCode,
+            key: '',
+          };
+        }
+
+        const historicalValueKey = `[${h.historicalFileNumber}][${h.historicalFileNumberTypeCode.id}][${h.otherHistFileNumberTypeCode}]`;
+        if (!(historicalValueKey in accumulator[historicalTypeKey])) {
+          accumulator[historicalTypeKey].historicalValues[historicalValueKey] = h;
+          accumulator[historicalTypeKey].key += h.propertyId;
+        }
+        return accumulator;
+      }, {});
+
+    const flatNumberArray = Object.values(flatNumberDictionary);
+
+    return flatNumberArray.sort(
+      (a, b) => a.historicalType.displayOrder - b.historicalType.displayOrder,
+    );
+  }, [historicalNumbers]);
+
+  return (
+    <ExpandableTextList<HistoricalGroup>
+      items={uniqueNumbers}
+      keyFunction={(p, index: number) =>
+        `historical-group-${p.historicalType.id}-${p.propertyKey}-${index}`
+      }
+      renderFunction={p => (
+        <>
+          <StyledLabel key={`historical-group-${p.historicalType.id}`} className="pr-2">
+            {p.historicalType.id === ApiGen_CodeTypes_HistoricalFileNumberTypes.OTHER
+              ? p.otherDescription
+              : p.historicalType.description}
+            :
+          </StyledLabel>
+
+          {Object.values(p.historicalValues).map((historicalValue, index) => {
+            return (
+              <span key={index}>
+                {historicalValue.historicalFileNumber}
+                {index + 1 < Object.values(p.historicalValues).length && <span>, </span>}
+              </span>
+            );
+          })}
+        </>
+      )}
+      delimiter={'; '}
+      maxCollapsedLength={2}
+    />
+  );
+};
+
+export const StyledLabel = styled.label`
+  font-weight: bold;
+`;
diff --git a/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberSectionView.tsx b/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberSectionView.tsx
index b2adcd22f6..677b85591b 100644
--- a/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberSectionView.tsx
+++ b/source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberSectionView.tsx
@@ -1,106 +1,18 @@
-import { useMemo } from 'react';
-import styled from 'styled-components';
-
-import ExpandableTextList from '@/components/common/ExpandableTextList';
 import { HeaderField } from '@/components/common/HeaderField/HeaderField';
-import { Dictionary } from '@/interfaces/Dictionary';
-import { ApiGen_Base_CodeType } from '@/models/api/generated/ApiGen_Base_CodeType';
 import { ApiGen_Concepts_HistoricalFileNumber } from '@/models/api/generated/ApiGen_Concepts_HistoricalFileNumber';
-import { exists } from '@/utils';
+
+import { HistoricalNumberFieldView } from './HistoricalNumberFieldView';
 
 export interface IHistoricalNumbersViewProps {
-  valuesOnly: boolean;
   historicalNumbers: ApiGen_Concepts_HistoricalFileNumber[];
 }
 
-interface HistoricalGroup {
-  historicalType: ApiGen_Base_CodeType<string>;
-  historicalValues: Dictionary<ApiGen_Concepts_HistoricalFileNumber>;
-}
-
-const HistoricalNumberFieldView: React.FC<IHistoricalNumbersViewProps> = ({
+export const HistoricalNumberSectionView: React.FC<IHistoricalNumbersViewProps> = ({
   historicalNumbers,
-  valuesOnly,
 }) => {
-  const uniqueNumbers = useMemo(() => {
-    const flatNumberArray: Dictionary<HistoricalGroup> = historicalNumbers
-      .filter(exists)
-      .reduce((accumulator, h) => {
-        const historicalTypeKey = `[${h.historicalFileNumberTypeCode.description}]`;
-        if (!(historicalTypeKey in accumulator)) {
-          accumulator[historicalTypeKey] = {
-            historicalType: h.historicalFileNumberTypeCode,
-            historicalValues: {},
-          };
-        }
-
-        const historicalValueKey = `[${h.historicalFileNumberTypeCode.description}][${h.historicalFileNumber}]`;
-        accumulator[historicalTypeKey].historicalValues[historicalValueKey] = h;
-        return accumulator;
-      }, {} as Dictionary<HistoricalGroup>);
-
-    return Object.values(flatNumberArray).sort(p => p.historicalType.displayOrder);
-  }, [historicalNumbers]);
-
-  if (valuesOnly) {
-    return (
-      <ExpandableTextList<HistoricalGroup>
-        items={uniqueNumbers}
-        keyFunction={(p, index: number) => `historical-number-${p.historicalType.id}-${index}`}
-        renderFunction={p => (
-          <>
-            <StyledLabel key={`historical-group-${p.historicalType.id}`} className="pr-2">
-              {p.historicalType.description}:
-            </StyledLabel>
-
-            {Object.values(p.historicalValues).map((historicalValue, index) => {
-              return (
-                <span key={index}>
-                  {historicalValue.historicalFileNumber}
-                  {index + 1 < Object.values(p.historicalValues).length && <span>, </span>}
-                </span>
-              );
-            })}
-          </>
-        )}
-        delimiter={'; '}
-        maxCollapsedLength={2}
-      />
-    );
-  }
-
   return (
     <HeaderField label="Historical File #:" labelWidth="3" contentWidth="9">
-      <>
-        <ExpandableTextList<HistoricalGroup>
-          items={uniqueNumbers}
-          keyFunction={(p, index: number) => `historical-number-${p.historicalType.id}-${index}`}
-          renderFunction={p => (
-            <>
-              <StyledLabel key={`historical-group-${p.historicalType.id}`} className="pr-2">
-                {p.historicalType.description}:
-              </StyledLabel>
-
-              {Object.values(p.historicalValues).map((historicalValue, index) => {
-                return (
-                  <span key={index}>
-                    {historicalValue.historicalFileNumber}
-                    {index + 1 < Object.values(p.historicalValues).length && <span>, </span>}
-                  </span>
-                );
-              })}
-            </>
-          )}
-          delimiter={'; '}
-          maxCollapsedLength={2}
-        />
-      </>
+      <HistoricalNumberFieldView historicalNumbers={historicalNumbers} />
     </HeaderField>
   );
 };
-
-export default HistoricalNumberFieldView;
-
-export const StyledLabel = styled.label`
-  font-weight: bold;
-`;
diff --git a/source/frontend/src/features/properties/filter/PropertyFilter.tsx b/source/frontend/src/features/properties/filter/PropertyFilter.tsx
index 2c69e45ec5..1deb060204 100644
--- a/source/frontend/src/features/properties/filter/PropertyFilter.tsx
+++ b/source/frontend/src/features/properties/filter/PropertyFilter.tsx
@@ -155,7 +155,10 @@ export const PropertyFilter: React.FC<React.PropsWithChildren<IPropertyFilterPro
                 <Input field="planNumber" placeholder="Enter a plan number"></Input>
               )}
               {values.searchBy === 'historical' && (
-                <Input field="historical" placeholder="Enter a LIS or PS file Number"></Input>
+                <Input
+                  field="historical"
+                  placeholder="Enter a historical file# (LIS, PS, etc.)"
+                ></Input>
               )}
             </StyledCol>
             <Col xs="auto">
diff --git a/source/frontend/src/features/properties/list/PropertyListView.test.tsx b/source/frontend/src/features/properties/list/PropertyListView.test.tsx
index b12fb4cb0c..2492bede1b 100644
--- a/source/frontend/src/features/properties/list/PropertyListView.test.tsx
+++ b/source/frontend/src/features/properties/list/PropertyListView.test.tsx
@@ -29,6 +29,7 @@ import { ApiGen_Concepts_PropertyView } from '@/models/api/generated/ApiGen_Conc
 import { useApiHistoricalNumbers } from '@/hooks/pims-api/useApiHistoricalNumbers';
 import { ApiGen_Concepts_HistoricalFileNumber } from '@/models/api/generated/ApiGen_Concepts_HistoricalFileNumber';
 import { ApiGen_CodeTypes_HistoricalFileNumberTypes } from '@/models/api/generated/ApiGen_CodeTypes_HistoricalFileNumberTypes';
+import { useHistoricalNumberRepository } from '@/hooks/repositories/useHistoricalNumberRepository';
 
 // Set all module functions to vi.fn
 
@@ -50,12 +51,25 @@ vi.mocked(useApiGeocoder).mockReturnValue({
   ) => Promise<AxiosResponse<IGeocoderPidsResponse, any>>,
 } as unknown as ReturnType<typeof useApiGeocoder>);
 
-const mockApiGetHistoricalFileNumbersApi = vi.fn();
-vi.mocked(useApiHistoricalNumbers).mockReturnValue({
-  getByPropertyId: mockApiGetHistoricalFileNumbersApi as (
-    propertyId: number,
-  ) => Promise<AxiosResponse<ApiGen_Concepts_HistoricalFileNumber[], any>>,
-} as unknown as ReturnType<typeof useApiHistoricalNumbers>);
+const mockGetPropertyHistoricalNumbersExecute = vi.fn().mockResolvedValue([]);
+
+vi.mock('@/hooks/repositories/useHistoricalNumberRepository');
+vi.mocked(useHistoricalNumberRepository).mockReturnValue({
+  getPropertyHistoricalNumbers: {
+    error: null,
+    response: [],
+    execute: mockGetPropertyHistoricalNumbersExecute,
+    loading: false,
+    status: 200,
+  },
+  updatePropertyHistoricalNumbers: {
+    error: null,
+    response: [],
+    execute: vi.fn().mockResolvedValue([]),
+    loading: false,
+    status: 200,
+  },
+});
 
 const mockAxios = new MockAdapter(axios);
 const history = createMemoryHistory();
@@ -97,15 +111,15 @@ const setupMockApi = (properties?: ApiGen_Concepts_PropertyView[]) => {
     },
   } as any);
 
-  mockApiGetHistoricalFileNumbersApi.mockResolvedValue({
-    data: [
+  for (let i = 0; i < mockProperties.length; i++) {
+    mockGetPropertyHistoricalNumbersExecute.mockResolvedValueOnce([
       {
-        id: 100,
-        propertyId: 1,
+        id: mockProperties[i].id * 100,
+        propertyId: mockProperties[i].id,
         property: null,
         historicalFileNumberTypeCode: {
           id: ApiGen_CodeTypes_HistoricalFileNumberTypes.LISNO.toString(),
-          description: 'LIS #',
+          description: 'LIS',
           isDisabled: false,
           displayOrder: 1,
         },
@@ -120,8 +134,8 @@ const setupMockApi = (properties?: ApiGen_Concepts_PropertyView[]) => {
         appCreateUserGuid: null,
         rowVersion: 1,
       },
-    ],
-  });
+    ]);
+  }
 };
 
 describe('Property list view', () => {
@@ -131,7 +145,7 @@ describe('Property list view', () => {
     mockAxios.onAny().reply(200, {});
 
     mockApiGetPropertiesPagedApi.mockClear();
-    mockApiGetHistoricalFileNumbersApi.mockClear();
+    mockGetPropertyHistoricalNumbersExecute.mockClear();
   });
 
   afterEach(() => {
diff --git a/source/frontend/src/features/properties/list/columns.tsx b/source/frontend/src/features/properties/list/columns.tsx
index 059912da5a..6c61f349d3 100644
--- a/source/frontend/src/features/properties/list/columns.tsx
+++ b/source/frontend/src/features/properties/list/columns.tsx
@@ -11,7 +11,7 @@ import TooltipIcon from '@/components/common/TooltipIcon';
 import { ColumnWithProps } from '@/components/Table';
 import { AreaUnitTypes, Claims } from '@/constants/index';
 import HistoricalNumbersContainer from '@/features/mapSideBar/shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '@/features/mapSideBar/shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberFieldView } from '@/features/mapSideBar/shared/header/HistoricalNumberFieldView';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
 import { ApiGen_Concepts_PropertyView } from '@/models/api/generated/ApiGen_Concepts_PropertyView';
 import { ILookupCode } from '@/store/slices/lookupCodes';
@@ -70,7 +70,6 @@ export const columns = ({
       return (
         <HistoricalNumbersContainer
           propertyIds={propertyArrayId}
-          displayValuesOnly={true}
           View={HistoricalNumberFieldView}
         />
       );

From 48e7a8cbfaaf33f1decbcb256f009ffeb392c761 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 31 May 2024 22:07:09 +0000
Subject: [PATCH 5/7] CI: Bump version to v5.3.0-81.26

---
 source/backend/api/Pims.Api.csproj | 4 ++--
 source/frontend/package.json       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/backend/api/Pims.Api.csproj b/source/backend/api/Pims.Api.csproj
index 233786930d..7b3c1694b4 100644
--- a/source/backend/api/Pims.Api.csproj
+++ b/source/backend/api/Pims.Api.csproj
@@ -2,8 +2,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <UserSecretsId>0ef6255f-9ea0-49ec-8c65-c172304b4926</UserSecretsId>
-    <Version>5.3.0-81.25</Version>
-    <Version>5.3.0-81.25</Version>
+    <Version>5.3.0-81.26</Version>
+    <Version>5.3.0-81.26</Version>
     <AssemblyVersion>5.3.0.81</AssemblyVersion>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
     <ProjectGuid>16BC0468-78F6-4C91-87DA-7403C919E646</ProjectGuid>
diff --git a/source/frontend/package.json b/source/frontend/package.json
index 941b6c6add..96dbd8c248 100644
--- a/source/frontend/package.json
+++ b/source/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "5.3.0-81.25",
+  "version": "5.3.0-81.26",
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "1.0.1",

From 3a5937083beb6d305be45257f763ebf38be37871 Mon Sep 17 00:00:00 2001
From: devinleighsmith <41091511+devinleighsmith@users.noreply.github.com>
Date: Fri, 31 May 2024 15:26:50 -0700
Subject: [PATCH 6/7] Features/psp 7494 (#4068)

* Updated the deposts page

* Fixed stylings for buttons and margin for collapsable section

* updated snaps

* PR comment updates.

---------

Co-authored-by: FuriousLlama <marobej@gmail.com>
Co-authored-by: Smith <devin.smith@quartech.com>
Co-authored-by: Alejandro Sanchez <emailforasr@gmail.com>
---
 .../src/assets/scss/_variables.module.scss    |   3 +-
 .../src/components/common/Section/Section.tsx |   2 +-
 .../components/common/SectionListHeader.tsx   |   3 +-
 .../frontend/src/components/common/styles.ts  |   3 +
 .../CreateOrganizationForm.test.tsx.snap      |   6 +-
 .../CreatePersonForm.test.tsx.snap            |   6 +-
 .../CreateContactContainer.test.tsx.snap      |   6 +-
 .../UpdateOrganizationForm.test.tsx.snap      |   6 +-
 .../UpdatePersonForm.test.tsx.snap            |   6 +-
 .../UpdateContactContainer.test.tsx.snap      |   6 +-
 .../DocumentListView.test.tsx.snap            |   2 +-
 .../AddLeaseContainer.test.tsx.snap           |   2 +-
 .../DepositsContainer.test.tsx.snap           | 179 +++--------------
 .../components/DepositNotes/DepositNotes.tsx  |  35 ++--
 .../__snapshots__/DepositNotes.test.tsx.snap  |   2 +-
 .../DepositsReceivedContainer.tsx             |  28 +--
 .../DepositsReceivedContainer.test.tsx.snap   | 185 +++---------------
 .../DepositsReceivedContainer/columns.tsx     |  57 ++----
 .../DepositsReturnedContainer/columns.tsx     |  28 +--
 .../DetailAdministration.test.tsx.snap        |   4 +-
 .../DetailDocumentation.test.tsx.snap         |   4 +-
 .../PropertiesInformation.test.tsx.snap       |   2 +-
 .../__snapshots__/DocumentsPage.test.tsx.snap |   2 +-
 .../__snapshots__/AgreementView.test.tsx.snap |   4 +-
 ...nsationRequisitionDetailView.test.tsx.snap |   6 +-
 .../CompensationListView.test.tsx.snap        |   2 +-
 ...eCompensationRequisitionForm.test.tsx.snap |   4 +-
 .../StakeHolderView.test.tsx.snap             |   4 +-
 .../OffersAndSaleView.test.tsx.snap           |   2 +-
 .../ProjectSummaryView.test.tsx.snap          |   6 +-
 .../PropertyAssociationTabView.test.tsx.snap  |   8 +-
 .../OperationSectionView.test.tsx.snap        |   4 +-
 .../__snapshots__/OperationView.test.tsx.snap |   2 +-
 ...ManagementActivitiesListView.test.tsx.snap |   2 +-
 .../PropertyContactListView.test.tsx.snap     |   2 +-
 ...PropertyManagementDetailView.test.tsx.snap |   2 +-
 .../TakeUpdateForm.test.tsx.snap              |   2 +-
 .../__snapshots__/ChecklistView.test.tsx.snap |  12 +-
 .../__snapshots__/NoteListView.test.tsx.snap  |   2 +-
 39 files changed, 181 insertions(+), 460 deletions(-)

diff --git a/source/frontend/src/assets/scss/_variables.module.scss b/source/frontend/src/assets/scss/_variables.module.scss
index 339e97bca1..f87fcd61a0 100644
--- a/source/frontend/src/assets/scss/_variables.module.scss
+++ b/source/frontend/src/assets/scss/_variables.module.scss
@@ -10,8 +10,9 @@
   highlightBackgroundColor: $highlight-background-color;
   // buttons
   borderOutlineColor: $border-outline-color;
-
+  
   // Colors
+  pimsGreen80: $pims-green-80;
   warningBackgroundColor: $warning-background-color;
   numberBackgroundColor: $number-background-color;
   dangerBackgroundColor: $danger-background-color;
diff --git a/source/frontend/src/components/common/Section/Section.tsx b/source/frontend/src/components/common/Section/Section.tsx
index 1fd1889bad..899c11e570 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="1">
+              <Col xs="auto" className="pl-8">
                 {isCollapsed && (
                   <ArrowDropDownIcon
                     title={`expand-${title ?? 'section'}`}
diff --git a/source/frontend/src/components/common/SectionListHeader.tsx b/source/frontend/src/components/common/SectionListHeader.tsx
index 7f39eecae0..157a02991f 100644
--- a/source/frontend/src/components/common/SectionListHeader.tsx
+++ b/source/frontend/src/components/common/SectionListHeader.tsx
@@ -12,6 +12,7 @@ export interface ISectionListHeaderProps {
   addButtonIcon?: JSX.Element;
   onAdd?: () => void;
   claims: Claims[];
+  'data-testId'?: string;
 }
 
 export const SectionListHeader: React.FunctionComponent<
@@ -27,7 +28,7 @@ export const SectionListHeader: React.FunctionComponent<
       </Col>
       <Col xs="auto" className="my-1">
         {hasClaim(props.claims) && (
-          <StyledSectionAddButton onClick={onClick}>
+          <StyledSectionAddButton onClick={onClick} data-testid={props['data-testId']}>
             {props.addButtonIcon}
             &nbsp;{props.addButtonText ?? 'Add'}
           </StyledSectionAddButton>
diff --git a/source/frontend/src/components/common/styles.ts b/source/frontend/src/components/common/styles.ts
index ab2455ad8f..b35706e6c8 100644
--- a/source/frontend/src/components/common/styles.ts
+++ b/source/frontend/src/components/common/styles.ts
@@ -106,6 +106,9 @@ export const StyledAddButton = styled(Button)`
   &.btn.btn-primary:active {
     background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
   }
+  &.btn.btn-primary:hover {
+    background-color: ${props => props.theme.css.pimsGreen80};
+  }
 `;
 
 export const StyledSectionAddButton = styled(StyledAddButton)`
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 9364dbb9b7..7ef10a5c7c 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
@@ -688,7 +688,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Mailing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"
@@ -942,7 +942,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"
@@ -1196,7 +1196,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 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 6814ac29b2..cb091b0841 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
@@ -853,7 +853,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c12"
@@ -1107,7 +1107,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c12"
@@ -1361,7 +1361,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 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 7de30dfe4c..04817553bb 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
@@ -1067,7 +1067,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     </div>
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c20"
@@ -1321,7 +1321,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     Property Address
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c20"
@@ -1575,7 +1575,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
                     Billing Address
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c20"
diff --git a/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap
index c20a51051f..a96391db9b 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
@@ -806,7 +806,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Mailing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"
@@ -1060,7 +1060,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c10"
@@ -1314,7 +1314,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 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 2c7c5aad51..265e89fa0d 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
@@ -926,7 +926,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c13"
@@ -1180,7 +1180,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 Property Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c13"
@@ -1434,7 +1434,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
                 Billing Address
               </div>
               <div
-                class="col-1"
+                class="pl-8 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 63cb798c64..d632836656 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
@@ -1070,7 +1070,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     </div>
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c19"
@@ -1324,7 +1324,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     Property Address
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c19"
@@ -1578,7 +1578,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
                     Billing Address
                   </div>
                   <div
-                    class="col-1"
+                    class="pl-8 col-auto"
                   >
                     <svg
                       class="c19"
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 a1d9b1199d..c6c0f38145 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
@@ -263,7 +263,7 @@ exports[`Document List View > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c3"
diff --git a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
index f01e3923d3..183a26f85d 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
@@ -2330,7 +2330,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
                 Consultation
               </div>
               <div
-                class="col-1"
+                class="pl-8 col-auto"
               >
                 <svg
                   class="c25"
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 993504477f..07bf491686 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
@@ -6,142 +6,7 @@ exports[`DepositsContainer > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c3.btn {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 0.4rem 1.2rem;
-  min-height: 3rem;
-  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;
-  height: 3.8rem;
-}
-
-.c3.btn:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  opacity: 0.8;
-}
-
-.c3.btn:focus {
-  outline-width: 0.4rem;
-  outline-style: solid;
-  outline-offset: 1px;
-  box-shadow: none;
-}
-
-.c3.btn.btn-primary {
-  border: none;
-}
-
-.c3.btn.btn-secondary {
-  background: none;
-}
-
-.c3.btn.btn-info {
-  border: none;
-  background: none;
-  padding-left: 0.6rem;
-  padding-right: 0.6rem;
-}
-
-.c3.btn.btn-info:hover,
-.c3.btn.btn-info:active,
-.c3.btn.btn-info:focus {
-  background: none;
-}
-
-.c3.btn.btn-light {
-  border: none;
-}
-
-.c3.btn.btn-dark {
-  border: none;
-}
-
-.c3.btn.btn-link {
-  font-size: 1.6rem;
-  font-weight: 400;
-  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;
-}
-
-.c3.btn.btn-link:hover,
-.c3.btn.btn-link:active,
-.c3.btn.btn-link:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border: none;
-  background: none;
-  box-shadow: none;
-  outline: none;
-}
-
-.c3.btn.btn-link:disabled,
-.c3.btn.btn-link.disabled {
-  background: none;
-  pointer-events: none;
-}
-
-.c3.btn:disabled,
-.c3.btn:disabled:hover {
-  box-shadow: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-.c3.Button .Button__icon {
-  margin-right: 1.6rem;
-}
-
-.c3.Button--icon-only:focus {
-  outline: none;
-}
-
-.c3.Button--icon-only .Button__icon {
-  margin-right: 0;
-}
-
-.c4 {
+  .c4 {
   float: right;
   cursor: pointer;
 }
@@ -160,6 +25,22 @@ exports[`DepositsContainer > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
+.c3 {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: end;
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: end;
+  min-height: 4.5rem;
+}
+
+.c3 .btn {
+  margin: 0;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -187,24 +68,24 @@ exports[`DepositsContainer > renders as expected 1`] = `
           <div
             class="col"
           >
-            Deposits Received
+            <div
+              class="c3 no-gutters row"
+            >
+              <div
+                class="px-2 my-1 col-auto"
+              >
+                Deposits Received
+              </div>
+              <div
+                class="my-1 col-auto"
+              />
+            </div>
           </div>
         </div>
       </h2>
       <div
         class="collapse show"
       >
-        <button
-          class="c3 Button Button--disabled mb-4 px-5 btn btn-secondary"
-          disabled=""
-          type="button"
-        >
-          <div
-            class="Button__value"
-          >
-            Add a deposit
-          </div>
-        </button>
         <div
           class="table"
           data-testid="securityDepositsTable"
@@ -467,7 +348,7 @@ exports[`DepositsContainer > renders as expected 1`] = `
             </span>
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c4"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/DepositNotes.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/DepositNotes.tsx
index 74fbf4830a..39c99f47e5 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/DepositNotes.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/DepositNotes.tsx
@@ -1,10 +1,11 @@
 import { getIn, useFormikContext } from 'formik';
 import { FunctionComponent, PropsWithChildren, useState } from 'react';
-import { FaPencilAlt } from 'react-icons/fa';
+import { FaEdit } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import { TextArea } from '@/components/common/form';
 import { Section } from '@/components/common/Section/Section';
+import { SectionListHeader } from '@/components/common/SectionListHeader';
 import { Claims } from '@/constants/index';
 import SaveCancelButtons from '@/features/leases/SaveCancelButtons';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
@@ -35,19 +36,21 @@ export const DepositNotes: FunctionComponent<PropsWithChildren<IDepositNotesProp
       isCollapsable={collapsed}
       initiallyExpanded={false}
       header={
-        <>
+        hasClaim(Claims.LEASE_EDIT) && disabled ? (
+          <SectionListHeader
+            claims={[Claims.LEASE_EDIT]}
+            title="Deposit Notes"
+            addButtonText="Edit Notes"
+            addButtonIcon={<FaEdit size={'2rem'} />}
+            data-testId="edit-notes"
+            onAdd={() => {
+              onEdit();
+              setCollapsed(false);
+            }}
+          />
+        ) : (
           <span>Deposit Notes</span>
-          {hasClaim(Claims.LEASE_EDIT) && disabled && (
-            <EditButton
-              data-testid="edit-notes"
-              className="ml-2"
-              onClick={() => {
-                onEdit();
-                setCollapsed(false);
-              }}
-            />
-          )}
-        </>
+        )
       }
     >
       <TextArea rows={5} disabled={disabled} field="returnNotes" />
@@ -65,12 +68,6 @@ export const DepositNotes: FunctionComponent<PropsWithChildren<IDepositNotesProp
   );
 };
 
-const EditButton = styled(FaPencilAlt)`
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
 const StyledButtons = styled(SaveCancelButtons)`
   background-color: transparent;
 `;
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 fe3dc4ccd4..95dd7273be 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
@@ -42,7 +42,7 @@ exports[`DepositNotes component > renders as expected 1`] = `
           </span>
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c2"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/DepositsReceivedContainer.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/DepositsReceivedContainer.tsx
index 6c969fb7b1..9d976d1bfb 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/DepositsReceivedContainer.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/DepositsReceivedContainer.tsx
@@ -1,8 +1,9 @@
-import { Button } from '@/components/common/buttons/Button';
+import { FaPlus } from 'react-icons/fa';
+
 import { Section } from '@/components/common/Section/Section';
+import { SectionListHeader } from '@/components/common/SectionListHeader';
 import { Table } from '@/components/Table';
 import Claims from '@/constants/claims';
-import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
 import { ApiGen_Concepts_SecurityDeposit } from '@/models/api/generated/ApiGen_Concepts_SecurityDeposit';
 
 import { DepositListEntry, getColumns } from './columns';
@@ -18,21 +19,24 @@ export interface IDepositsReceivedContainerProps {
 const DepositsReceivedContainer: React.FC<
   React.PropsWithChildren<IDepositsReceivedContainerProps>
 > = ({ securityDeposits, onAdd, onEdit, onDelete, onReturn }) => {
-  const { hasClaim } = useKeycloakWrapper();
   const columns = getColumns({ onEdit, onDelete, onReturn });
   const dataSource = securityDeposits.map<DepositListEntry>(d => {
     return new DepositListEntry(d);
   });
   return (
-    <Section header="Deposits Received">
-      <Button
-        variant="secondary"
-        onClick={() => onAdd()}
-        className="mb-4 px-5"
-        disabled={!hasClaim(Claims.LEASE_ADD)}
-      >
-        Add a deposit
-      </Button>
+    <Section
+      header={
+        <SectionListHeader
+          claims={[Claims.LEASE_ADD]}
+          title="Deposits Received"
+          addButtonText="Add a deposit"
+          addButtonIcon={<FaPlus size={'2rem'} />}
+          onAdd={() => {
+            onAdd();
+          }}
+        />
+      }
+    >
       <Table<DepositListEntry>
         name="securityDepositsTable"
         columns={columns}
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
index c58c0688be..3c890a4a20 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
@@ -6,142 +6,7 @@ exports[`DepositsReceivedContainer component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c2.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;
-  min-height: 3rem;
-  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;
-  height: 3.8rem;
-}
-
-.c2.btn:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  opacity: 0.8;
-}
-
-.c2.btn:focus {
-  outline-width: 0.4rem;
-  outline-style: solid;
-  outline-offset: 1px;
-  box-shadow: none;
-}
-
-.c2.btn.btn-primary {
-  border: none;
-}
-
-.c2.btn.btn-secondary {
-  background: none;
-}
-
-.c2.btn.btn-info {
-  border: none;
-  background: none;
-  padding-left: 0.6rem;
-  padding-right: 0.6rem;
-}
-
-.c2.btn.btn-info:hover,
-.c2.btn.btn-info:active,
-.c2.btn.btn-info:focus {
-  background: none;
-}
-
-.c2.btn.btn-light {
-  border: none;
-}
-
-.c2.btn.btn-dark {
-  border: none;
-}
-
-.c2.btn.btn-link {
-  font-size: 1.6rem;
-  font-weight: 400;
-  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;
-}
-
-.c2.btn.btn-link:hover,
-.c2.btn.btn-link:active,
-.c2.btn.btn-link:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  border: none;
-  background: none;
-  box-shadow: none;
-  outline: none;
-}
-
-.c2.btn.btn-link:disabled,
-.c2.btn.btn-link.disabled {
-  background: none;
-  pointer-events: none;
-}
-
-.c2.btn:disabled,
-.c2.btn:disabled:hover {
-  box-shadow: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-.c2.Button .Button__icon {
-  margin-right: 1.6rem;
-}
-
-.c2.Button--icon-only:focus {
-  outline: none;
-}
-
-.c2.Button--icon-only .Button__icon {
-  margin-right: 0;
-}
-
-.c1 {
+  .c1 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
   margin-bottom: 2rem;
@@ -165,16 +30,20 @@ exports[`DepositsReceivedContainer component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.c2 {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: end;
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: end;
+  min-height: 4.5rem;
 }
 
-.c4 .btn.btn-primary {
-  background-color: transparent;
-  padding: 0;
+.c2 .btn {
+  margin: 0;
 }
 
 <div
@@ -189,24 +58,24 @@ exports[`DepositsReceivedContainer component > renders as expected 1`] = `
         <div
           class="col"
         >
-          Deposits Received
+          <div
+            class="c2 no-gutters row"
+          >
+            <div
+              class="px-2 my-1 col-auto"
+            >
+              Deposits Received
+            </div>
+            <div
+              class="my-1 col-auto"
+            />
+          </div>
         </div>
       </div>
     </h2>
     <div
       class="collapse show"
     >
-      <button
-        class="c2 Button Button--disabled mb-4 px-5 btn btn-secondary"
-        disabled=""
-        type="button"
-      >
-        <div
-          class="Button__value"
-        >
-          Add a deposit
-        </div>
-      </button>
       <div
         class="table"
         data-testid="securityDepositsTable"
@@ -355,7 +224,7 @@ exports[`DepositsReceivedContainer component > renders as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c3 c4"
+                  class="c3"
                 />
               </div>
             </div>
@@ -419,7 +288,7 @@ Integer nec odio.
                 title=""
               >
                 <div
-                  class="c3 c4"
+                  class="c3"
                 />
               </div>
             </div>
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 6dde1f7c51..77657c8ad4 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,10 @@
 import { FaTrash } from 'react-icons/fa';
-import { MdEdit, MdUndo } from 'react-icons/md';
+import { MdUndo } from 'react-icons/md';
 import { Link } from 'react-router-dom';
 import { CellProps } from 'react-table';
-import styled from 'styled-components';
 
-import { Button } from '@/components/common/buttons/Button';
+import { LinkButton, StyledRemoveLinkButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/EditButton';
 import { InlineFlexDiv } from '@/components/common/styles';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import { ColumnWithProps, renderDate, renderMoney } from '@/components/Table';
@@ -68,35 +68,32 @@ function depositActions(
   return function ({ row: { original, index } }: CellProps<DepositListEntry, string>) {
     const { hasClaim } = useKeycloakWrapper();
     return (
-      <StyledIcons>
-        {hasClaim(Claims.LEASE_EDIT) && original.depositReturnCount === 0 && (
-          <Button
-            title="delete deposit"
-            icon={<FaTrash size={24} id={`delete-deposit-${index}`} title="delete deposit" />}
-            onClick={() => original.id && onDelete(original.id)}
-          ></Button>
-        )}
+      <InlineFlexDiv>
         {hasClaim(Claims.LEASE_EDIT) && original.depositReturnCount > 0 && (
           <TooltipIcon
             toolTipId={`no-delete-tooltip-${original.id}`}
             toolTip="A deposit with associated return(s) cannot be deleted. To delete this deposit first delete any associated return(s)."
+            innerClassName="mt-3"
           />
         )}
         {hasClaim(Claims.LEASE_EDIT) && (
-          <Button
-            title="edit deposit"
-            icon={<MdEdit size={24} id={`edit-deposit-${index}`} title="edit deposit" />}
-            onClick={() => onEdit(original.id)}
-          ></Button>
+          <EditButton title="edit deposit" onClick={() => onEdit(original.id)} />
         )}
         {hasClaim(Claims.LEASE_ADD) && (
-          <Button
+          <LinkButton
             title="return deposit"
-            icon={<MdUndo size={24} id={`return-deposit-${index}`} title="return deposit" />}
+            icon={<MdUndo size={20} id={`return-deposit-${index}`} title="return deposit" />}
             onClick={() => onReturn(original.id)}
-          ></Button>
+          />
+        )}
+        {hasClaim(Claims.LEASE_EDIT) && original.depositReturnCount === 0 && (
+          <StyledRemoveLinkButton
+            title="delete deposit"
+            icon={<FaTrash size={20} id={`delete-deposit-${index}`} title="document deposit" />}
+            onClick={() => original?.id && onDelete(original.id)}
+          />
         )}
-      </StyledIcons>
+      </InlineFlexDiv>
     );
   };
 }
@@ -151,23 +148,3 @@ export const getColumns = ({
     },
   ];
 };
-
-const StyledIcons = styled(InlineFlexDiv)`
-  align-items: center;
-  [id^='edit-deposit'] {
-    color: ${props => props.theme.css.activeActionColor};
-  }
-  [id^='return-deposit'] {
-    color: ${props => props.theme.css.activeActionColor};
-  }
-  [id^='delete-deposit'] {
-    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/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx
index c93d3a3c43..36ac5e69b9 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,10 @@
 import { FaTrash } from 'react-icons/fa';
-import { MdEdit } from 'react-icons/md';
 import { Link } from 'react-router-dom';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
-import { Button } from '@/components/common/buttons/Button';
+import { StyledRemoveLinkButton } from '@/components/common/buttons';
+import EditButton from '@/components/common/EditButton';
 import { InlineFlexDiv } from '@/components/common/styles';
 import { ColumnWithProps, renderDate, renderMoney } from '@/components/Table';
 import Claims from '@/constants/claims';
@@ -74,26 +74,14 @@ function depositActions(onEdit: (id: number) => void, onDelete: (id: number) =>
     return (
       <StyledIcons>
         {hasClaim(Claims.LEASE_EDIT) && (
-          <Button
-            title="delete deposit return"
-            icon={
-              <FaTrash
-                size={24}
-                id={`delete-depositreturn-${index}`}
-                title="delete depositreturn"
-              />
-            }
-            onClick={() => original.id && onDelete(original.id)}
-          ></Button>
+          <EditButton title="edit deposit return" onClick={() => onEdit(original.id)} />
         )}
         {hasClaim(Claims.LEASE_EDIT) && (
-          <Button
-            title="edit deposit return"
-            icon={
-              <MdEdit size={24} id={`edit-depositreturn-${index}`} title="edit depositreturn" />
-            }
-            onClick={() => onEdit(original.id)}
-          ></Button>
+          <StyledRemoveLinkButton
+            title="delete deposit return"
+            icon={<FaTrash size={20} id={`delete-deposit-${index}`} title="document deposit" />}
+            onClick={() => original?.id && onDelete(original.id)}
+          />
         )}
       </StyledIcons>
     );
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 18e8dd5c10..0c9068a113 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
@@ -55,7 +55,7 @@ exports[`DetailAdministration component > renders a complete lease as expected 1
           Administration
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c2"
@@ -406,7 +406,7 @@ exports[`DetailAdministration component > renders minimally as expected 1`] = `
           Administration
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c2"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailDocumentation.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailDocumentation.test.tsx.snap
index a89e0bb9f4..17113df7e5 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailDocumentation.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailDocumentation.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`DetailDocumentation component > renders a complete lease as expected 1`
           Documentation
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c2"
@@ -254,7 +254,7 @@ exports[`DetailDocumentation component > renders minimally as expected 1`] = `
           Documentation
         </div>
         <div
-          class="col-1"
+          class="pl-8 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 160cdc977e..8835a01577 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
@@ -69,7 +69,7 @@ exports[`PropertiesInformation component > renders as expected 1`] = `
           Property Information
         </div>
         <div
-          class="col-1"
+          class="pl-8 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 17620da607..46511e7f72 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
@@ -239,7 +239,7 @@ exports[`Lease Documents Page > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c3"
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 5a1535e311..a6d8fa9155 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
@@ -352,7 +352,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="col-1"
+                  class="pl-8 col-auto"
                 >
                   <svg
                     class="c8"
@@ -667,7 +667,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="col-1"
+                  class="pl-8 col-auto"
                 >
                   <svg
                     class="c8"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
index 080b8bc4e4..d5c52f5e72 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
@@ -588,7 +588,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             Financial Coding
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c9"
@@ -764,7 +764,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             Payment
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c9"
@@ -886,7 +886,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             Financial Activities
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c9"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/__snapshots__/CompensationListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
index 0006e7f451..8569d09720 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
@@ -320,7 +320,7 @@ exports[`compensation list view > renders as expected 1`] = `
           Requisitions in this file (H120)
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c2"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
index e6350c6fde..2284d746f9 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
@@ -932,7 +932,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               Payment
             </div>
             <div
-              class="col-1"
+              class="pl-8 col-auto"
             >
               <svg
                 class="c10"
@@ -1243,7 +1243,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               Activities
             </div>
             <div
-              class="col-1"
+              class="pl-8 col-auto"
             >
               <svg
                 class="c10"
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 c9132ac87e..84dcedf54c 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
@@ -51,7 +51,7 @@ exports[`StakeHolderView component > renders as expected 1`] = `
             Interests
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c3"
@@ -359,7 +359,7 @@ exports[`StakeHolderView component > renders as expected 1`] = `
             Non-interest Payees
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c3"
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 35e1e2c16a..fee8397041 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
@@ -141,7 +141,7 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c3"
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 41d7d4a6b5..0ed9d9a879 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
@@ -73,7 +73,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
             Project Details
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c4"
@@ -137,7 +137,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
             Associated Codes
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c4"
@@ -234,7 +234,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
               Associated Products
             </div>
             <div
-              class="col-1"
+              class="pl-8 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 83770ebcca..0f111704c8 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
@@ -118,7 +118,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
             </div>
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c4"
@@ -348,7 +348,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
             </div>
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c4"
@@ -578,7 +578,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
             </div>
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c4"
@@ -806,7 +806,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
             </div>
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c4"
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap
index c535296e5f..3d7345c6b9 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
@@ -99,7 +99,7 @@ exports[`Operation section view > matches snapshot 1`] = `
               </div>
             </div>
             <div
-              class="col-1"
+              class="pl-8 col-auto"
             >
               <svg
                 class="c6"
@@ -518,7 +518,7 @@ exports[`Operation section view > matches snapshot 1`] = `
               </div>
             </div>
             <div
-              class="col-1"
+              class="pl-8 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 a175f9f1db..0b573bfd72 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
@@ -66,7 +66,7 @@ exports[`Subdivision detail view > matches snapshot 1`] = `
           </div>
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c4"
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 b1d1ff126c..253ec886b8 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
@@ -235,7 +235,7 @@ exports[`Activities list view > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c3"
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 3edce4965b..ffed316537 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
@@ -293,7 +293,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
           </div>
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c5"
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 7c1faaa3ee..028b350361 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
@@ -55,7 +55,7 @@ exports[`PropertyManagementDetailView component > renders as expected when provi
           Summary
         </div>
         <div
-          class="col-1"
+          class="pl-8 col-auto"
         >
           <svg
             class="c2"
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 0bd72dbfed..d7bf41de57 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
@@ -171,7 +171,7 @@ exports[`TakeUpdateForm component > renders as expected 1`] = `
             Update Take
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c3"
diff --git a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap
index c313e6d65f..024f38cacb 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
@@ -116,7 +116,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             File Initiation
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c5"
@@ -555,7 +555,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Active File Management
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c5"
@@ -1769,7 +1769,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Crown Land
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c5"
@@ -1814,7 +1814,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Section 3 - Agreement
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c5"
@@ -2391,7 +2391,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Section 6 - Expropriation
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c5"
@@ -2947,7 +2947,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
             Acquisition Completion
           </div>
           <div
-            class="col-1"
+            class="pl-8 col-auto"
           >
             <svg
               class="c5"
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 6ce14d423f..4784b61833 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
@@ -138,7 +138,7 @@ exports[`Note List View > renders as expected 1`] = `
               </div>
             </div>
             <div
-              class="col-1"
+              class="pl-8 col-auto"
             >
               <svg
                 class="c6"

From 29129d92acc52bf2a8c1fa87d277b3a3ce41a16a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 31 May 2024 22:27:13 +0000
Subject: [PATCH 7/7] CI: Bump version to v5.3.0-81.27

---
 source/backend/api/Pims.Api.csproj | 4 ++--
 source/frontend/package.json       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/backend/api/Pims.Api.csproj b/source/backend/api/Pims.Api.csproj
index 7b3c1694b4..fa133b2fb5 100644
--- a/source/backend/api/Pims.Api.csproj
+++ b/source/backend/api/Pims.Api.csproj
@@ -2,8 +2,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <UserSecretsId>0ef6255f-9ea0-49ec-8c65-c172304b4926</UserSecretsId>
-    <Version>5.3.0-81.26</Version>
-    <Version>5.3.0-81.26</Version>
+    <Version>5.3.0-81.27</Version>
+    <Version>5.3.0-81.27</Version>
     <AssemblyVersion>5.3.0.81</AssemblyVersion>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
     <ProjectGuid>16BC0468-78F6-4C91-87DA-7403C919E646</ProjectGuid>
diff --git a/source/frontend/package.json b/source/frontend/package.json
index 96dbd8c248..d59d2171ca 100644
--- a/source/frontend/package.json
+++ b/source/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "5.3.0-81.26",
+  "version": "5.3.0-81.27",
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "1.0.1",