diff --git a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
index 97e6c36f90..fe3fe23c61 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
@@ -214,32 +214,32 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c29 {
+.c30 {
   height: 100%;
 }
 
-.c29 .tab-content {
+.c30 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
   background-color: #f2f2f2;
 }
 
-.c29 .tab-content .tab-pane {
+.c30 .tab-content .tab-pane {
   position: relative;
 }
 
-.c30 {
+.c31 {
   background-color: white;
   color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
 
-.c30 .nav-tabs {
+.c31 .nav-tabs {
   height: auto;
 }
 
-.c30 .nav-item {
+.c31 .nav-item {
   color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.3rem;
@@ -247,7 +247,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   margin-left: 0.1rem;
 }
 
-.c30 .nav-item:hover {
+.c31 .nav-item:hover {
   color: #f2f2f2;
   background-color: #1e5189;
   border-color: transparent;
@@ -257,7 +257,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   text-shadow: 0.1rem 0 0 currentColor;
 }
 
-.c30 .nav-item.active {
+.c31 .nav-item.active {
   border-radius: 0.4rem;
   color: #f2f2f2;
   background-color: #053662;
@@ -265,23 +265,23 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   text-shadow: 0.1rem 0 0 currentColor;
 }
 
-.c19 {
+.c20 {
   height: 100%;
 }
 
-.c20 {
+.c21 {
   overflow: auto;
   height: 100%;
   width: 22rem;
 }
 
-.c27 {
+.c28 {
   overflow: auto;
   height: 100%;
   width: 100%;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -301,7 +301,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   margin-bottom: 2.4rem;
 }
 
-.c38 {
+.c39 {
   color: #474543;
   font-size: 1.6rem;
   -webkit-text-decoration: none;
@@ -320,7 +320,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   border-bottom: solid 0.5rem #3470B1;
 }
 
-.c39 {
+.c40 {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -407,7 +407,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   width: 100%;
   position: relative;
   overflow: auto;
@@ -437,7 +437,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   align-items: end;
 }
 
-.c28 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -454,24 +454,24 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   overflow-y: auto;
 }
 
-.c31 {
+.c32 {
   background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
-.c32 {
+.c33 {
   text-align: right;
   overflow: hidden;
 }
 
-.c34 {
+.c35 {
   font-weight: bold;
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2.4rem;
 }
 
-.c33 {
+.c34 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -479,28 +479,28 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c36.required::before {
+.c37.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c35 {
+.c36 {
   font-weight: bold;
 }
 
-.c14 {
+.c15 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c12 {
+.c13 {
   font-weight: bold;
   white-space: nowrap;
 }
 
-.c17 {
+.c18 {
   font-family: 'BCSans-Bold';
   font-size: 1.4rem;
   border-radius: 0.4rem;
@@ -519,7 +519,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   background-color: #dff0d8;
 }
 
-.c15 {
+.c16 {
   margin-top: auto;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -533,7 +533,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   border-bottom-width: 0.1rem;
 }
 
-.c13 {
+.c14 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -544,7 +544,11 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   flex-direction: column;
 }
 
-.c21 {
+.c12 {
+  max-width: 60rem;
+}
+
+.c22 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -562,28 +566,28 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   flex-direction: column;
 }
 
-.c23 {
+.c24 {
   min-height: 2.5rem;
   line-height: 3rem;
 }
 
-.c22 {
+.c23 {
   font-size: 1.4rem;
   font-weight: normal;
   cursor: pointer;
   padding-bottom: 0.5rem;
 }
 
-.c22.selected {
+.c23.selected {
   font-weight: bold;
   cursor: default;
 }
 
-.c22 div.Button__value {
+.c23 div.Button__value {
   font-size: 1.4rem;
 }
 
-.c26 {
+.c27 {
   background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
@@ -605,11 +609,11 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   align-items: center;
 }
 
-.c26.selected {
+.c27.selected {
   background-color: #FCBA19;
 }
 
-.c24 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -626,14 +630,14 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   border-bottom: 1px solid #606060;
 }
 
-.c25 {
+.c26 {
   font-weight: bold;
   font-size: 1.6rem;
   color: #474543;
   line-height: 2.2rem;
 }
 
-.c37 {
+.c38 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -745,7 +749,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
           class="c11 no-gutters row"
         >
           <div
-            class="col-8"
+            class="c12 col-8"
           >
             <div
               class="row"
@@ -754,7 +758,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                 class="pr-0 text-left col-3"
               >
                 <label
-                  class="c12"
+                  class="c13"
                 >
                   File:
                 </label>
@@ -772,7 +776,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                 class="pr-0 text-left col-3"
               >
                 <label
-                  class="c12"
+                  class="c13"
                 >
                   Ministry project:
                 </label>
@@ -790,7 +794,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                 class="pr-0 text-left col-3"
               >
                 <label
-                  class="c12"
+                  class="c13"
                 >
                   Ministry product:
                 </label>
@@ -809,7 +813,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                 class="pr-0 text-left col-3"
               >
                 <label
-                  class="c12"
+                  class="c13"
                 >
                   Historical file #:
                 </label>
@@ -823,7 +827,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
             class="col"
           >
             <div
-              class="c13"
+              class="c14"
             >
               <div
                 class="no-gutters row"
@@ -832,7 +836,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                   class="text-right col"
                 >
                   <span
-                    class="c14"
+                    class="c15"
                   >
                     <strong>
                       Created: 
@@ -857,7 +861,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                   class="text-right col"
                 >
                   <span
-                    class="c14"
+                    class="c15"
                   >
                     <strong>
                       Updated: 
@@ -876,7 +880,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="c15"
+                class="c16"
               >
                 <div
                   class="no-gutters justify-content-end align-items-end row"
@@ -888,14 +892,14 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                     class="align-self-end d-flex col-auto"
                   >
                     <span
-                      class="c14"
+                      class="c15"
                     >
                       <b>
                         File:
                       </b>
                     </span>
                     <div
-                      class="c16 c17"
+                      class="c17 c18"
                     >
                       <svg
                         fill="currentColor"
@@ -924,23 +928,23 @@ exports[`AcquisitionView component > renders as expected 1`] = `
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19 no-gutters row"
+          class="c20 no-gutters row"
         >
           <div
-            class="c20 d-flex flex-column col-auto"
+            class="c21 d-flex flex-column col-auto"
           >
             <div
-              class="c21"
+              class="c22"
             >
               <div
-                class="c22 no-gutters selected row"
+                class="c23 no-gutters selected row"
                 data-testid="menu-item-row-0"
               >
                 <div
-                  class="c23 col"
+                  class="c24 col"
                 >
                   <span
                     title="File Details"
@@ -949,17 +953,17 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                   </span>
                 </div>
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   <span
-                    class="c25"
+                    class="c26"
                   >
                     Properties
                   </span>
                 </div>
               </div>
               <div
-                class="c22 no-gutters row"
+                class="c23 no-gutters row"
                 data-testid="menu-item-row-1"
               >
                 <div
@@ -969,7 +973,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                   class="pr-2 col-auto"
                 >
                   <div
-                    class="c26"
+                    class="c27"
                   >
                     1
                   </div>
@@ -991,7 +995,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="c22 no-gutters row"
+                class="c23 no-gutters row"
                 data-testid="menu-item-row-2"
               >
                 <div
@@ -1001,7 +1005,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                   class="pr-2 col-auto"
                 >
                   <div
-                    class="c26"
+                    class="c27"
                   >
                     2
                   </div>
@@ -1025,16 +1029,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
             </div>
           </div>
           <div
-            class="c27 col"
+            class="c28 col"
           >
             <div
-              class="c28"
+              class="c29"
             >
               <div
-                class="c29"
+                class="c30"
               >
                 <nav
-                  class="c30 nav nav-tabs"
+                  class="c31 nav nav-tabs"
                   role="tablist"
                 >
                   <a
@@ -1083,16 +1087,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                     role="tabpanel"
                   >
                     <div
-                      class="c31"
+                      class="c32"
                     >
                       <div
-                        class="c32 mr-3 my-1"
+                        class="c33 mr-3 my-1"
                       />
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c34"
+                          class="c35"
                         >
                           <div
                             class="no-gutters row"
@@ -1114,13 +1118,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Ministry project:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               001 - Hwy 14 Expansion - Vancouver Island but it's really long so it can wrap around if it has to
                             </div>
@@ -1132,13 +1136,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Product:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               00048 MISCELLANEOUS CLAIMS
                             </div>
@@ -1150,22 +1154,22 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Funding:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             />
                           </div>
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c34"
+                          class="c35"
                         >
                           <div
                             class="no-gutters row"
@@ -1187,13 +1191,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 File progress(es):
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                               data-testid="prg-file-progress-status"
                             >
                               <div>
@@ -1241,13 +1245,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Appraisal:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                               data-testid="prg-appraisal-status"
                             >
                               Received
@@ -1260,13 +1264,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Legal survey:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                               data-testid="prg-legal-survey-status"
                             />
                           </div>
@@ -1277,13 +1281,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Type of taking:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                               data-testid="prg-taking-type-status"
                             >
                               <div>
@@ -1331,23 +1335,23 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Expropriation risk:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                               data-testid="prg-expropiation-risk-status"
                             />
                           </div>
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c34"
+                          class="c35"
                         >
                           <div
                             class="no-gutters row"
@@ -1369,13 +1373,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Assigned date:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                               data-testid="assigned-date"
                             >
                               Dec 18, 2024
@@ -1388,7 +1392,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Delivery date:
                                 <span>
@@ -1416,7 +1420,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               Jul 29, 2022
                             </div>
@@ -1428,7 +1432,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Estimated date:
                                 <span>
@@ -1456,7 +1460,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               Jul 10, 2024
                             </div>
@@ -1468,13 +1472,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Possession date:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               Jul 10, 2025
                             </div>
@@ -1482,10 +1486,10 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c34"
+                          class="c35"
                         >
                           <div
                             class="no-gutters row"
@@ -1507,13 +1511,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Acquisition file name:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               Test ACQ File
                             </div>
@@ -1525,7 +1529,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Historical file number:
                                 <span>
@@ -1553,7 +1557,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               legacy file number
                             </div>
@@ -1565,13 +1569,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Physical file status:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             />
                           </div>
                           <div
@@ -1581,13 +1585,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Acquisition type:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               Consensual Agreement
                             </div>
@@ -1599,13 +1603,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Ministry region:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               South Coast Region
                             </div>
@@ -1613,10 +1617,10 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c34"
+                          class="c35"
                         >
                           <div
                             class="no-gutters row"
@@ -1638,16 +1642,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Negotiation agent:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               <a
-                                class="c37"
+                                class="c38"
                                 href="/contact/P1"
                                 rel="noopener noreferrer"
                                 target="_blank"
@@ -1679,16 +1683,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Negotiation agent:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               <a
-                                class="c37"
+                                class="c38"
                                 href="/contact/P3"
                                 rel="noopener noreferrer"
                                 target="_blank"
@@ -1716,10 +1720,10 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c34"
+                          class="c35"
                         >
                           <div
                             class="no-gutters row"
@@ -1735,12 +1739,12 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                           class="collapse show"
                         >
                           <p
-                            class="c38"
+                            class="c39"
                           >
                             Each property in this file should be owned by the owner(s) in this section
                           </p>
                           <div
-                            class="c39"
+                            class="c40"
                           >
                             <div
                               class="spinner-border text-warning"
@@ -1754,16 +1758,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Owner solicitor:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               <a
-                                class="c37"
+                                class="c38"
                                 href="/contact/O1"
                                 rel="noopener noreferrer"
                                 target="_blank"
@@ -1795,16 +1799,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Primary contact:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               <a
-                                class="c37"
+                                class="c38"
                                 href="/contact/P1"
                                 rel="noopener noreferrer"
                                 target="_blank"
@@ -1836,16 +1840,16 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Owner representative:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               <a
-                                class="c37"
+                                class="c38"
                                 href="/contact/P2"
                                 rel="noopener noreferrer"
                                 target="_blank"
@@ -1877,13 +1881,13 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-4"
                             >
                               <label
-                                class="c35"
+                                class="c36"
                               >
                                 Comment:
                               </label>
                             </div>
                             <div
-                              class="c36 text-left col"
+                              class="c37 text-left col"
                             >
                               test representative comment
                             </div>
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx
index 1e87f5a571..dbffce6f6c 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx
@@ -12,6 +12,7 @@ import { formatMinistryProject } from '@/utils/formUtils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
 import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
+import { StyledLeftHeaderPane } from '../../shared/header/styles';
 
 export interface IAcquisitionHeaderProps {
   acquisitionFile?: ApiGen_Concepts_AcquisitionFile;
@@ -27,7 +28,7 @@ export const AcquisitionHeader: React.FunctionComponent<
 
   return (
     <StyledRow className="no-gutters">
-      <Col xs="8">
+      <StyledLeftHeaderPane xs="8">
         <HeaderField label="File:" labelWidth={leftColumnLabel} contentWidth="9">
           {acquisitionFile?.fileNumber} - {acquisitionFile?.fileName}
         </HeaderField>
@@ -50,7 +51,7 @@ export const AcquisitionHeader: React.FunctionComponent<
           )}
         </HeaderField>
         <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
-      </Col>
+      </StyledLeftHeaderPane>
       <Col>
         <StyledFiller>
           <AuditSection lastUpdatedBy={lastUpdatedBy} baseAudit={acquisitionFile} />
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap
index 072beaad36..839a5df4b1 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
     class="Toastify"
   />
   <div />
-  .c3 {
+  .c4 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c1 {
+.c2 {
   font-weight: bold;
   white-space: nowrap;
 }
@@ -24,7 +24,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
   border-bottom-width: 0.1rem;
 }
 
-.c2 {
+.c3 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -35,11 +35,15 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
   flex-direction: column;
 }
 
+.c1 {
+  max-width: 60rem;
+}
+
 <div
     class="c0 no-gutters row"
   >
     <div
-      class="col-8"
+      class="c1 col-8"
     >
       <div
         class="row"
@@ -48,7 +52,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             File:
           </label>
@@ -66,7 +70,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             Ministry project:
           </label>
@@ -82,7 +86,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             Ministry product:
           </label>
@@ -99,7 +103,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             Historical file #:
           </label>
@@ -113,7 +117,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
       class="col"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           class="no-gutters row"
@@ -122,7 +126,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
             class="text-right col"
           >
             <span
-              class="c3"
+              class="c4"
             >
               <strong>
                 Created: 
@@ -147,7 +151,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
             class="text-right col"
           >
             <span
-              class="c3"
+              class="c4"
             >
               <strong>
                 Updated: 
diff --git a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
index 9387b8e527..5bbfc7e838 100644
--- a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
@@ -214,23 +214,23 @@ exports[`DispositionView component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c19 {
+.c20 {
   height: 100%;
 }
 
-.c20 {
+.c21 {
   overflow: auto;
   height: 100%;
   width: 22rem;
 }
 
-.c27 {
+.c28 {
   overflow: auto;
   height: 100%;
   width: 100%;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -323,7 +323,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   width: 100%;
   position: relative;
   overflow: auto;
@@ -353,32 +353,32 @@ exports[`DispositionView component > renders as expected 1`] = `
   align-items: end;
 }
 
-.c29 {
+.c30 {
   height: 100%;
 }
 
-.c29 .tab-content {
+.c30 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
   background-color: #f2f2f2;
 }
 
-.c29 .tab-content .tab-pane {
+.c30 .tab-content .tab-pane {
   position: relative;
 }
 
-.c30 {
+.c31 {
   background-color: white;
   color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
 
-.c30 .nav-tabs {
+.c31 .nav-tabs {
   height: auto;
 }
 
-.c30 .nav-item {
+.c31 .nav-item {
   color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.3rem;
@@ -386,7 +386,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   margin-left: 0.1rem;
 }
 
-.c30 .nav-item:hover {
+.c31 .nav-item:hover {
   color: #f2f2f2;
   background-color: #1e5189;
   border-color: transparent;
@@ -396,7 +396,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   text-shadow: 0.1rem 0 0 currentColor;
 }
 
-.c30 .nav-item.active {
+.c31 .nav-item.active {
   border-radius: 0.4rem;
   color: #f2f2f2;
   background-color: #053662;
@@ -404,7 +404,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   text-shadow: 0.1rem 0 0 currentColor;
 }
 
-.c28 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -421,24 +421,24 @@ exports[`DispositionView component > renders as expected 1`] = `
   overflow-y: auto;
 }
 
-.c31 {
+.c32 {
   background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
-.c32 {
+.c33 {
   text-align: right;
   overflow: hidden;
 }
 
-.c36 {
+.c37 {
   font-weight: bold;
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2.4rem;
 }
 
-.c33 {
+.c34 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -446,33 +446,33 @@ exports[`DispositionView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c35.required::before {
+.c36.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c34 {
+.c35 {
   font-weight: bold;
 }
 
-.c37 {
+.c38 {
   padding: 0 0.4rem;
   display: block;
 }
 
-.c14 {
+.c15 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c12 {
+.c13 {
   font-weight: bold;
   white-space: nowrap;
 }
 
-.c17 {
+.c18 {
   font-family: 'BCSans-Bold';
   font-size: 1.4rem;
   border-radius: 0.4rem;
@@ -491,7 +491,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   background-color: #fef1d8;
 }
 
-.c15 {
+.c16 {
   margin-top: auto;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -505,7 +505,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   border-bottom-width: 0.1rem;
 }
 
-.c13 {
+.c14 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -516,7 +516,11 @@ exports[`DispositionView component > renders as expected 1`] = `
   flex-direction: column;
 }
 
-.c21 {
+.c12 {
+  max-width: 60rem;
+}
+
+.c22 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -534,28 +538,28 @@ exports[`DispositionView component > renders as expected 1`] = `
   flex-direction: column;
 }
 
-.c23 {
+.c24 {
   min-height: 2.5rem;
   line-height: 3rem;
 }
 
-.c22 {
+.c23 {
   font-size: 1.4rem;
   font-weight: normal;
   cursor: pointer;
   padding-bottom: 0.5rem;
 }
 
-.c22.selected {
+.c23.selected {
   font-weight: bold;
   cursor: default;
 }
 
-.c22 div.Button__value {
+.c23 div.Button__value {
   font-size: 1.4rem;
 }
 
-.c26 {
+.c27 {
   background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
@@ -577,11 +581,11 @@ exports[`DispositionView component > renders as expected 1`] = `
   align-items: center;
 }
 
-.c26.selected {
+.c27.selected {
   background-color: #FCBA19;
 }
 
-.c24 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -598,7 +602,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   border-bottom: 1px solid #606060;
 }
 
-.c25 {
+.c26 {
   font-weight: bold;
   font-size: 1.6rem;
   color: #474543;
@@ -718,7 +722,7 @@ exports[`DispositionView component > renders as expected 1`] = `
           class="c11 no-gutters row"
         >
           <div
-            class="col-7"
+            class="c12 col-7"
           >
             <div
               class="row"
@@ -727,7 +731,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                 class="pr-0 text-left col-3"
               >
                 <label
-                  class="c12"
+                  class="c13"
                 >
                   File:
                 </label>
@@ -745,7 +749,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                 class="pr-0 text-left col-3"
               >
                 <label
-                  class="c12"
+                  class="c13"
                 >
                   Historical file #:
                 </label>
@@ -759,7 +763,7 @@ exports[`DispositionView component > renders as expected 1`] = `
             class="col-5"
           >
             <div
-              class="c13"
+              class="c14"
             >
               <div
                 class="no-gutters row"
@@ -768,7 +772,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                   class="text-right col"
                 >
                   <span
-                    class="c14"
+                    class="c15"
                   >
                     <strong>
                       Created: 
@@ -793,7 +797,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                   class="text-right col"
                 >
                   <span
-                    class="c14"
+                    class="c15"
                   >
                     <strong>
                       Updated: 
@@ -812,7 +816,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                 </div>
               </div>
               <div
-                class="c15"
+                class="c16"
               >
                 <div
                   class="no-gutters justify-content-end align-items-end row"
@@ -824,14 +828,14 @@ exports[`DispositionView component > renders as expected 1`] = `
                     class="align-self-end d-flex col-auto"
                   >
                     <span
-                      class="c14"
+                      class="c15"
                     >
                       <b>
                         File:
                       </b>
                     </span>
                     <div
-                      class="c16 c17"
+                      class="c17 c18"
                     >
                       <svg
                         fill="currentColor"
@@ -860,23 +864,23 @@ exports[`DispositionView component > renders as expected 1`] = `
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19 no-gutters row"
+          class="c20 no-gutters row"
         >
           <div
-            class="c20 d-flex flex-column col-auto"
+            class="c21 d-flex flex-column col-auto"
           >
             <div
-              class="c21"
+              class="c22"
             >
               <div
-                class="c22 no-gutters selected row"
+                class="c23 no-gutters selected row"
                 data-testid="menu-item-row-0"
               >
                 <div
-                  class="c23 col"
+                  class="c24 col"
                 >
                   <span
                     title="File Details"
@@ -885,17 +889,17 @@ exports[`DispositionView component > renders as expected 1`] = `
                   </span>
                 </div>
                 <div
-                  class="c24"
+                  class="c25"
                 >
                   <span
-                    class="c25"
+                    class="c26"
                   >
                     Properties
                   </span>
                 </div>
               </div>
               <div
-                class="c22 no-gutters row"
+                class="c23 no-gutters row"
                 data-testid="menu-item-row-1"
               >
                 <div
@@ -905,7 +909,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                   class="pr-2 col-auto"
                 >
                   <div
-                    class="c26"
+                    class="c27"
                   >
                     1
                   </div>
@@ -929,16 +933,16 @@ exports[`DispositionView component > renders as expected 1`] = `
             </div>
           </div>
           <div
-            class="c27 col"
+            class="c28 col"
           >
             <div
-              class="c28"
+              class="c29"
             >
               <div
-                class="c29"
+                class="c30"
               >
                 <nav
-                  class="c30 nav nav-tabs"
+                  class="c31 nav nav-tabs"
                   role="tablist"
                 >
                   <a
@@ -978,13 +982,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                     role="tabpanel"
                   >
                     <div
-                      class="c31"
+                      class="c32"
                     >
                       <div
-                        class="c32 mr-3 my-1"
+                        class="c33 mr-3 my-1"
                       />
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <div
                           class="collapse show"
@@ -996,13 +1000,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Status:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               Draft
                             </div>
@@ -1010,10 +1014,10 @@ exports[`DispositionView component > renders as expected 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c36"
+                          class="c37"
                         >
                           <div
                             class="no-gutters row"
@@ -1035,13 +1039,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Ministry project:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                               data-testid="dsp-project"
                             >
                               00048 - CLAIMS
@@ -1054,13 +1058,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Product:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                               data-testid="dsp-product"
                             >
                               00055 AVALANCHE  &  PROGRAM REVIEW
@@ -1073,22 +1077,22 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Funding:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             />
                           </div>
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c36"
+                          class="c37"
                         >
                           <div
                             class="no-gutters row"
@@ -1110,13 +1114,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Assigned date:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               Apr 26, 2025
                             </div>
@@ -1128,13 +1132,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Disposition completed date:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               May 28, 1956
                             </div>
@@ -1142,10 +1146,10 @@ exports[`DispositionView component > renders as expected 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c36"
+                          class="c37"
                         >
                           <div
                             class="no-gutters row"
@@ -1167,13 +1171,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Disposition file name:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               Test Disposition File
                             </div>
@@ -1185,7 +1189,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Reference number:
                                 <span>
@@ -1213,7 +1217,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               FILE_REFERENCE 8128827 3EAD56A
                             </div>
@@ -1225,13 +1229,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Disposition status:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             />
                           </div>
                           <div
@@ -1241,13 +1245,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Disposition type:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               Road Closure
                             </div>
@@ -1259,7 +1263,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Initiating document:
                                 <span>
@@ -1287,7 +1291,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               Surplus Declaration
                             </div>
@@ -1299,7 +1303,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Initiating document date:
                                 <span>
@@ -1327,7 +1331,7 @@ exports[`DispositionView component > renders as expected 1`] = `
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               Jun 29, 1917
                             </div>
@@ -1339,13 +1343,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Physical file status:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               Pending Litigation
                             </div>
@@ -1357,13 +1361,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Initiating branch:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               PLMB
                             </div>
@@ -1375,13 +1379,13 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Ministry region:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               Cannot determine
                             </div>
@@ -1389,10 +1393,10 @@ exports[`DispositionView component > renders as expected 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c33 form-section"
+                        class="c34 form-section"
                       >
                         <h2
-                          class="c36"
+                          class="c37"
                         >
                           <div
                             class="no-gutters row"
@@ -1414,16 +1418,16 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 MoTI Solicitor:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               <a
-                                class="c37"
+                                class="c38"
                                 href="/contact/P6"
                                 rel="noopener noreferrer"
                                 target="_blank"
@@ -1455,16 +1459,16 @@ exports[`DispositionView component > renders as expected 1`] = `
                               class="pr-0 text-left col-5"
                             >
                               <label
-                                class="c34"
+                                class="c35"
                               >
                                 Negotiation agent:
                               </label>
                             </div>
                             <div
-                              class="c35 text-left col"
+                              class="c36 text-left col"
                             >
                               <a
-                                class="c37"
+                                class="c38"
                                 href="/contact/P9"
                                 rel="noopener noreferrer"
                                 target="_blank"
diff --git a/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx b/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx
index ae5dd14dc1..3bb815bd6b 100644
--- a/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx
@@ -11,6 +11,7 @@ import { exists } from '@/utils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
 import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
+import { StyledLeftHeaderPane } from '../../shared/header/styles';
 
 export interface IDispositionHeaderProps {
   dispositionFile?: ApiGen_Concepts_DispositionFile;
@@ -28,12 +29,12 @@ export const DispositionHeader: React.FunctionComponent<
 
   return (
     <StyledRow className="no-gutters">
-      <Col xs={leftColumnWidth}>
+      <StyledLeftHeaderPane xs={leftColumnWidth}>
         <HeaderField label="File:" labelWidth={leftColumnLabel} contentWidth="9">
           D-{dispositionFile?.fileNumber}
         </HeaderField>
         <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
-      </Col>
+      </StyledLeftHeaderPane>
       <Col xs="5">
         <StyledFiller>
           <AuditSection lastUpdatedBy={lastUpdatedBy} baseAudit={dispositionFile} />
diff --git a/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap
index 56f9137c43..9d7dbc8a5e 100644
--- a/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`DispositionHeader component > renders as expected when no data is provi
     class="Toastify"
   />
   <div />
-  .c3 {
+  .c4 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c1 {
+.c2 {
   font-weight: bold;
   white-space: nowrap;
 }
@@ -24,7 +24,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi
   border-bottom-width: 0.1rem;
 }
 
-.c2 {
+.c3 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -35,11 +35,15 @@ exports[`DispositionHeader component > renders as expected when no data is provi
   flex-direction: column;
 }
 
+.c1 {
+  max-width: 60rem;
+}
+
 <div
     class="c0 no-gutters row"
   >
     <div
-      class="col-7"
+      class="c1 col-7"
     >
       <div
         class="row"
@@ -48,7 +52,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             File:
           </label>
@@ -66,7 +70,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             Historical file #:
           </label>
@@ -80,7 +84,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi
       class="col-5"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           class="no-gutters row"
@@ -89,7 +93,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi
             class="text-right col"
           >
             <span
-              class="c3"
+              class="c4"
             >
               <strong>
                 Created: 
@@ -114,7 +118,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi
             class="text-right col"
           >
             <span
-              class="c3"
+              class="c4"
             >
               <strong>
                 Updated: 
diff --git a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx
index 066c2cc083..07c5f7c685 100644
--- a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx
@@ -23,6 +23,7 @@ import { exists, prettyFormatDate } from '@/utils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
 import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
+import { StyledLeftHeaderPane } from '../../shared/header/styles';
 import { LeaseHeaderStakeholders } from './LeaseHeaderTenants';
 
 export interface ILeaseHeaderProps {
@@ -42,7 +43,7 @@ export const LeaseHeader: React.FC<ILeaseHeaderProps> = ({ lease, lastUpdatedBy
   return (
     <Container>
       <Row className="no-gutters">
-        <Col xs="8">
+        <StyledLeftHeaderPane xs="8">
           <HeaderField label="Lease/Licence #" labelWidth="4" contentWidth="8">
             <span className="pr-4">{lease?.lFileNo ?? ''}</span>
             <StyledGreenText>{lease?.paymentReceivableType?.description ?? ''}</StyledGreenText>
@@ -93,7 +94,7 @@ export const LeaseHeader: React.FC<ILeaseHeaderProps> = ({ lease, lastUpdatedBy
               />
             </Col>
           </HistoricalRow>
-        </Col>
+        </StyledLeftHeaderPane>
 
         <Col>
           <StyledFiller>
diff --git a/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap
index 9c526b463a..4168f99209 100644
--- a/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
     class="Toastify"
   />
   <div />
-  .c3.btn {
+  .c4.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,19 +35,19 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
   cursor: pointer;
 }
 
-.c3.btn .Button__value {
+.c4.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c3.btn:hover {
+.c4.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c3.btn:focus {
+.c4.btn:focus {
   outline-width: 2px;
   outline-style: solid;
   outline-color: #2E5DD7;
@@ -55,31 +55,31 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
   box-shadow: none;
 }
 
-.c3.btn.btn-primary {
+.c4.btn.btn-primary {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c3.btn.btn-primary:hover,
-.c3.btn.btn-primary:active,
-.c3.btn.btn-primary:focus {
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
   background-color: #1E5189;
 }
 
-.c3.btn.btn-secondary {
+.c4.btn.btn-secondary {
   color: #013366;
   background: none;
   border-color: #013366;
 }
 
-.c3.btn.btn-secondary:hover,
-.c3.btn.btn-secondary:active,
-.c3.btn.btn-secondary:focus {
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
   color: #FFFFFF;
   background-color: #013366;
 }
 
-.c3.btn.btn-info {
+.c4.btn.btn-info {
   color: #9F9D9C;
   border: none;
   background: none;
@@ -87,66 +87,66 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
   padding-right: 0.6rem;
 }
 
-.c3.btn.btn-info:hover,
-.c3.btn.btn-info:active,
-.c3.btn.btn-info:focus {
+.c4.btn.btn-info:hover,
+.c4.btn.btn-info:active,
+.c4.btn.btn-info:focus {
   color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c3.btn.btn-light {
+.c4.btn.btn-light {
   color: #FFFFFF;
   background-color: #606060;
   border: none;
 }
 
-.c3.btn.btn-light:hover,
-.c3.btn.btn-light:active,
-.c3.btn.btn-light:focus {
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
   color: #FFFFFF;
   background-color: #606060;
 }
 
-.c3.btn.btn-dark {
+.c4.btn.btn-dark {
   color: #FFFFFF;
   background-color: #474543;
   border: none;
 }
 
-.c3.btn.btn-dark:hover,
-.c3.btn.btn-dark:active,
-.c3.btn.btn-dark:focus {
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
   color: #FFFFFF;
   background-color: #474543;
 }
 
-.c3.btn.btn-danger {
+.c4.btn.btn-danger {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c3.btn.btn-danger:hover,
-.c3.btn.btn-danger:active,
-.c3.btn.btn-danger:focus {
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
   color: #FFFFFF;
   background-color: #CE3E39;
 }
 
-.c3.btn.btn-warning {
+.c4.btn.btn-warning {
   color: #FFFFFF;
   background-color: #FCBA19;
   border-color: #FCBA19;
 }
 
-.c3.btn.btn-warning:hover,
-.c3.btn.btn-warning:active,
-.c3.btn.btn-warning:focus {
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
   color: #FFFFFF;
   border-color: #FCBA19;
   background-color: #FCBA19;
 }
 
-.c3.btn.btn-link {
+.c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   color: var(--surface-color-primary-button-default);
@@ -170,9 +170,9 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
   text-decoration: underline;
 }
 
-.c3.btn.btn-link:hover,
-.c3.btn.btn-link:active,
-.c3.btn.btn-link:focus {
+.c4.btn.btn-link:hover,
+.c4.btn.btn-link:active,
+.c4.btn.btn-link:focus {
   color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -182,15 +182,15 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
   outline: none;
 }
 
-.c3.btn.btn-link:disabled,
-.c3.btn.btn-link.disabled {
+.c4.btn.btn-link:disabled,
+.c4.btn.btn-link.disabled {
   color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c3.btn:disabled,
-.c3.btn:disabled:hover {
+.c4.btn:disabled,
+.c4.btn:disabled:hover {
   color: #9F9D9C;
   background-color: #EDEBE9;
   box-shadow: none;
@@ -202,29 +202,29 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
   cursor: not-allowed;
 }
 
-.c3.Button .Button__icon {
+.c4.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c3.Button--icon-only:focus {
+.c4.Button--icon-only:focus {
   outline: none;
 }
 
-.c3.Button--icon-only .Button__icon {
+.c4.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c6 {
+.c7 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c1 {
+.c2 {
   font-weight: bold;
   white-space: nowrap;
 }
 
-.c5 {
+.c6 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -235,7 +235,11 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
   flex-direction: column;
 }
 
-.c4 {
+.c1 {
+  max-width: 60rem;
+}
+
+.c5 {
   margin-right: -1.25rem;
 }
 
@@ -247,7 +251,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
   border-bottom-width: 0.1rem;
 }
 
-.c2 {
+.c3 {
   font-weight: bold;
   color: #42814A;
 }
@@ -259,7 +263,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
       class="no-gutters row"
     >
       <div
-        class="col-8"
+        class="c1 col-8"
       >
         <div
           class="row"
@@ -268,7 +272,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
             class="pr-0 text-left col-4"
           >
             <label
-              class="c1"
+              class="c2"
             >
               Lease/Licence #
             </label>
@@ -282,7 +286,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
               L-0000001
             </span>
             <span
-              class="c2"
+              class="c3"
             >
               Receivable
             </span>
@@ -295,7 +299,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
             class="pr-0 text-left col-4"
           >
             <label
-              class="c1"
+              class="c2"
             >
               Property:
             </label>
@@ -311,7 +315,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
             class="pr-0 text-left col-4"
           >
             <label
-              class="c1"
+              class="c2"
             >
               Tenant:
             </label>
@@ -324,7 +328,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
               <br />
             </span>
             <button
-              class="c3 Button btn btn-link"
+              class="c4 Button btn btn-link"
               data-testid="expand"
               type="button"
             >
@@ -343,7 +347,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
             class="pr-0 text-left col-4"
           >
             <label
-              class="c1"
+              class="c2"
             >
               Commencement:
               <span>
@@ -377,7 +381,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
             class="pr-0 text-left col-auto"
           >
             <label
-              class="c1"
+              class="c2"
             >
               Expiry:
               <span>
@@ -416,7 +420,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
           />
         </div>
         <div
-          class="c4 row"
+          class="c5 row"
         >
           <div
             class="col"
@@ -428,7 +432,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
                 class="pr-0 text-left col-4"
               >
                 <label
-                  class="c1"
+                  class="c2"
                 >
                   Historical file #:
                 </label>
@@ -444,7 +448,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
         class="col"
       >
         <div
-          class="c5"
+          class="c6"
         >
           <div
             class="no-gutters row"
@@ -453,7 +457,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
               class="text-right col"
             >
               <span
-                class="c6"
+                class="c7"
               >
                 <strong>
                   Created: 
@@ -478,7 +482,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
               class="text-right col"
             >
               <span
-                class="c6"
+                class="c7"
               >
                 <strong>
                   Updated: 
diff --git a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
index 489bca981a..752752713f 100644
--- a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
@@ -214,7 +214,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   margin-right: 0;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -307,7 +307,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   width: 100%;
   position: relative;
   overflow: auto;
@@ -337,7 +337,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   align-items: end;
 }
 
-.c19 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -354,17 +354,17 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   overflow-y: auto;
 }
 
-.c14 {
+.c15 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c12 {
+.c13 {
   font-weight: bold;
   white-space: nowrap;
 }
 
-.c17 {
+.c18 {
   font-family: 'BCSans-Bold';
   font-size: 1.4rem;
   border-radius: 0.4rem;
@@ -383,7 +383,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   background-color: #dff0d8;
 }
 
-.c15 {
+.c16 {
   margin-top: auto;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -397,7 +397,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   border-bottom-width: 0.1rem;
 }
 
-.c13 {
+.c14 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -408,32 +408,36 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   flex-direction: column;
 }
 
-.c20 {
+.c12 {
+  max-width: 60rem;
+}
+
+.c21 {
   height: 100%;
 }
 
-.c20 .tab-content {
+.c21 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
   background-color: #f2f2f2;
 }
 
-.c20 .tab-content .tab-pane {
+.c21 .tab-content .tab-pane {
   position: relative;
 }
 
-.c21 {
+.c22 {
   background-color: white;
   color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
 
-.c21 .nav-tabs {
+.c22 .nav-tabs {
   height: auto;
 }
 
-.c21 .nav-item {
+.c22 .nav-item {
   color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.3rem;
@@ -441,7 +445,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   margin-left: 0.1rem;
 }
 
-.c21 .nav-item:hover {
+.c22 .nav-item:hover {
   color: #f2f2f2;
   background-color: #1e5189;
   border-color: transparent;
@@ -451,7 +455,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   text-shadow: 0.1rem 0 0 currentColor;
 }
 
-.c21 .nav-item.active {
+.c22 .nav-item.active {
   border-radius: 0.4rem;
   color: #f2f2f2;
   background-color: #053662;
@@ -564,7 +568,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
           class="c11 no-gutters row"
         >
           <div
-            class="col-7"
+            class="c12 col-7"
           >
             <div
               class="row"
@@ -573,7 +577,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
                 class="pr-0 text-left col-3"
               >
                 <label
-                  class="c12"
+                  class="c13"
                 >
                   Project:
                 </label>
@@ -591,7 +595,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
                 class="pr-0 text-left col-3"
               >
                 <label
-                  class="c12"
+                  class="c13"
                 >
                   MoTI region:
                 </label>
@@ -607,7 +611,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
             class="col"
           >
             <div
-              class="c13"
+              class="c14"
             >
               <div
                 class="no-gutters row"
@@ -616,7 +620,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
                   class="text-right col"
                 >
                   <span
-                    class="c14"
+                    class="c15"
                   >
                     <strong>
                       Created: 
@@ -641,7 +645,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
                   class="text-right col"
                 >
                   <span
-                    class="c14"
+                    class="c15"
                   >
                     <strong>
                       Updated: 
@@ -660,7 +664,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c15"
+                class="c16"
               >
                 <div
                   class="no-gutters justify-content-end align-items-end row"
@@ -672,12 +676,12 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
                     class="align-self-end d-flex col-auto"
                   >
                     <span
-                      class="c14"
+                      class="c15"
                     >
                       <b />
                     </span>
                     <div
-                      class="c16 c17"
+                      class="c17 c18"
                     >
                       <svg
                         fill="currentColor"
@@ -706,16 +710,16 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class="c18"
+        class="c19"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
             <nav
-              class="c21 nav nav-tabs"
+              class="c22 nav nav-tabs"
               role="tablist"
             />
             <div
diff --git a/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.tsx b/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.tsx
index 8311670837..7e20590c1e 100644
--- a/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/project/common/ProjectHeader.tsx
@@ -7,6 +7,8 @@ import { StyledFiller, StyledRow } from '@/components/common/HeaderField/styles'
 import { ApiGen_Concepts_Project } from '@/models/api/generated/ApiGen_Concepts_Project';
 import { exists } from '@/utils';
 
+import { StyledLeftHeaderPane } from '../../shared/header/styles';
+
 export interface IProjectHeaderProps {
   project?: ApiGen_Concepts_Project;
 }
@@ -16,14 +18,14 @@ const ProjectHeader: React.FunctionComponent<React.PropsWithChildren<IProjectHea
 }) => {
   return (
     <StyledRow className="no-gutters">
-      <Col xs="7">
+      <StyledLeftHeaderPane xs="7">
         <HeaderField label="Project:" labelWidth="3" contentWidth="9">
           {project?.code} {project?.description}
         </HeaderField>
         <HeaderField label="MoTI region:" labelWidth="3" contentWidth="9">
           {project?.regionCode?.description}
         </HeaderField>
-      </Col>
+      </StyledLeftHeaderPane>
       <Col>
         <StyledFiller>
           <AuditSection baseAudit={project} />
diff --git a/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap
index f938044066..89e861f530 100644
--- a/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap
@@ -6,17 +6,17 @@ exports[`ProjectHeader component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c3 {
+  .c4 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c1 {
+.c2 {
   font-weight: bold;
   white-space: nowrap;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -26,7 +26,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c6 {
+.c7 {
   font-family: 'BCSans-Bold';
   font-size: 1.4rem;
   border-radius: 0.4rem;
@@ -45,7 +45,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
   background-color: #dff0d8;
 }
 
-.c4 {
+.c5 {
   margin-top: auto;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -59,7 +59,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
   border-bottom-width: 0.1rem;
 }
 
-.c2 {
+.c3 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -70,11 +70,15 @@ exports[`ProjectHeader component > renders as expected 1`] = `
   flex-direction: column;
 }
 
+.c1 {
+  max-width: 60rem;
+}
+
 <div
     class="c0 no-gutters row"
   >
     <div
-      class="col-7"
+      class="c1 col-7"
     >
       <div
         class="row"
@@ -83,7 +87,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             Project:
           </label>
@@ -101,7 +105,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             MoTI region:
           </label>
@@ -117,7 +121,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
       class="col"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           class="no-gutters row"
@@ -126,7 +130,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
             class="text-right col"
           >
             <span
-              class="c3"
+              class="c4"
             >
               <strong>
                 Created: 
@@ -151,7 +155,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
             class="text-right col"
           >
             <span
-              class="c3"
+              class="c4"
             >
               <strong>
                 Updated: 
@@ -170,7 +174,7 @@ exports[`ProjectHeader component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c4"
+          class="c5"
         >
           <div
             class="no-gutters justify-content-end align-items-end row"
@@ -182,12 +186,12 @@ exports[`ProjectHeader component > renders as expected 1`] = `
               class="align-self-end d-flex col-auto"
             >
               <span
-                class="c3"
+                class="c4"
               >
                 <b />
               </span>
               <div
-                class="c5 c6"
+                class="c6 c7"
               >
                 <svg
                   fill="currentColor"
diff --git a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
index 5eb2efd820..0504425c33 100644
--- a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
@@ -209,7 +209,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -246,7 +246,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c28 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -263,17 +263,17 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   overflow-y: auto;
 }
 
-.c19 {
+.c20 {
   height: 100%;
 }
 
-.c20 {
+.c21 {
   overflow: auto;
   height: 100%;
   width: 22rem;
 }
 
-.c27 {
+.c28 {
   overflow: auto;
   height: 100%;
   width: 100%;
@@ -335,7 +335,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   align-items: center;
 }
 
-.c18 {
+.c19 {
   width: 100%;
   position: relative;
   overflow: auto;
@@ -365,32 +365,32 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   align-items: end;
 }
 
-.c29 {
+.c30 {
   height: 100%;
 }
 
-.c29 .tab-content {
+.c30 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
   background-color: #f2f2f2;
 }
 
-.c29 .tab-content .tab-pane {
+.c30 .tab-content .tab-pane {
   position: relative;
 }
 
-.c30 {
+.c31 {
   background-color: white;
   color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
 
-.c30 .nav-tabs {
+.c31 .nav-tabs {
   height: auto;
 }
 
-.c30 .nav-item {
+.c31 .nav-item {
   color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.3rem;
@@ -398,7 +398,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   margin-left: 0.1rem;
 }
 
-.c30 .nav-item:hover {
+.c31 .nav-item:hover {
   color: #f2f2f2;
   background-color: #1e5189;
   border-color: transparent;
@@ -408,7 +408,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   text-shadow: 0.1rem 0 0 currentColor;
 }
 
-.c30 .nav-item.active {
+.c31 .nav-item.active {
   border-radius: 0.4rem;
   color: #f2f2f2;
   background-color: #053662;
@@ -416,24 +416,24 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   text-shadow: 0.1rem 0 0 currentColor;
 }
 
-.c31 {
+.c32 {
   background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
-.c32 {
+.c33 {
   text-align: right;
   overflow: hidden;
 }
 
-.c34 {
+.c35 {
   font-weight: bold;
   color: var(--theme-blue-100);
   border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2.4rem;
 }
 
-.c33 {
+.c34 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -441,28 +441,28 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c36.required::before {
+.c37.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c35 {
+.c36 {
   font-weight: bold;
 }
 
-.c14 {
+.c15 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c12 {
+.c13 {
   font-weight: bold;
   white-space: nowrap;
 }
 
-.c17 {
+.c18 {
   font-family: 'BCSans-Bold';
   font-size: 1.4rem;
   border-radius: 0.4rem;
@@ -481,7 +481,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   background-color: #dff0d8;
 }
 
-.c15 {
+.c16 {
   margin-top: auto;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -495,7 +495,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   border-bottom-width: 0.1rem;
 }
 
-.c13 {
+.c14 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -506,7 +506,11 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   flex-direction: column;
 }
 
-.c21 {
+.c12 {
+  max-width: 60rem;
+}
+
+.c22 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -524,28 +528,28 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   flex-direction: column;
 }
 
-.c23 {
+.c24 {
   min-height: 2.5rem;
   line-height: 3rem;
 }
 
-.c22 {
+.c23 {
   font-size: 1.4rem;
   font-weight: normal;
   cursor: pointer;
   padding-bottom: 0.5rem;
 }
 
-.c22.selected {
+.c23.selected {
   font-weight: bold;
   cursor: default;
 }
 
-.c22 div.Button__value {
+.c23 div.Button__value {
   font-size: 1.4rem;
 }
 
-.c26 {
+.c27 {
   background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
@@ -567,11 +571,11 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   align-items: center;
 }
 
-.c26.selected {
+.c27.selected {
   background-color: #FCBA19;
 }
 
-.c24 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -588,7 +592,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   border-bottom: 1px solid #606060;
 }
 
-.c25 {
+.c26 {
   font-weight: bold;
   font-size: 1.6rem;
   color: #474543;
@@ -702,7 +706,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
             class="c11 no-gutters row"
           >
             <div
-              class="col-7"
+              class="c12 col-8"
             >
               <div
                 class="row"
@@ -711,7 +715,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                   class="pr-0 text-left col-3"
                 >
                   <label
-                    class="c12"
+                    class="c13"
                   >
                     File #:
                   </label>
@@ -729,7 +733,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                   class="pr-0 text-left col-3"
                 >
                   <label
-                    class="c12"
+                    class="c13"
                   >
                     File name:
                   </label>
@@ -747,7 +751,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                   class="pr-0 text-left col-3"
                 >
                   <label
-                    class="c12"
+                    class="c13"
                   >
                     MOTI region:
                   </label>
@@ -763,7 +767,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                   class="pr-0 text-left col-3"
                 >
                   <label
-                    class="c12"
+                    class="c13"
                   >
                     Ministry district:
                   </label>
@@ -779,7 +783,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                   class="pr-0 text-left col-3"
                 >
                   <label
-                    class="c12"
+                    class="c13"
                   >
                     Historical file #:
                   </label>
@@ -793,7 +797,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
               class="col"
             >
               <div
-                class="c13"
+                class="c14"
               >
                 <div
                   class="no-gutters row"
@@ -802,7 +806,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                     class="text-right col"
                   >
                     <span
-                      class="c14"
+                      class="c15"
                     >
                       <strong>
                         Created: 
@@ -829,7 +833,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                     class="text-right col"
                   >
                     <span
-                      class="c14"
+                      class="c15"
                     >
                       <strong>
                         Updated: 
@@ -851,7 +855,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c15"
+                  class="c16"
                 >
                   <div
                     class="no-gutters justify-content-end align-items-end row"
@@ -863,14 +867,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                       class="align-self-end d-flex col-auto"
                     >
                       <span
-                        class="c14"
+                        class="c15"
                       >
                         <b>
                           File:
                         </b>
                       </span>
                       <div
-                        class="c16 c17"
+                        class="c17 c18"
                       >
                         <svg
                           fill="currentColor"
@@ -899,23 +903,23 @@ exports[`ResearchContainer component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c18"
+          class="c19"
         >
           <div
-            class="c19 no-gutters row"
+            class="c20 no-gutters row"
           >
             <div
-              class="c20 d-flex flex-column col-auto"
+              class="c21 d-flex flex-column col-auto"
             >
               <div
-                class="c21"
+                class="c22"
               >
                 <div
-                  class="c22 no-gutters selected row"
+                  class="c23 no-gutters selected row"
                   data-testid="menu-item-row-0"
                 >
                   <div
-                    class="c23 col"
+                    class="c24 col"
                   >
                     <span
                       title="File Details"
@@ -924,17 +928,17 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                     </span>
                   </div>
                   <div
-                    class="c24"
+                    class="c25"
                   >
                     <span
-                      class="c25"
+                      class="c26"
                     >
                       Properties
                     </span>
                   </div>
                 </div>
                 <div
-                  class="c22 no-gutters  row"
+                  class="c23 no-gutters  row"
                   data-testid="menu-item-row-1"
                 >
                   <div
@@ -944,7 +948,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                     class="pr-2 col-auto"
                   >
                     <div
-                      class="c26"
+                      class="c27"
                     >
                       1
                     </div>
@@ -968,16 +972,16 @@ exports[`ResearchContainer component > renders as expected 1`] = `
               </div>
             </div>
             <div
-              class="c27 col"
+              class="c28 col"
             >
               <div
-                class="c28"
+                class="c29"
               >
                 <div
-                  class="c29"
+                  class="c30"
                 >
                   <nav
-                    class="c30 nav nav-tabs"
+                    class="c31 nav nav-tabs"
                     role="tablist"
                   >
                     <a
@@ -999,16 +1003,16 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                       role="tabpanel"
                     >
                       <div
-                        class="c31"
+                        class="c32"
                       >
                         <div
-                          class="c32 mr-3 my-1"
+                          class="c33 mr-3 my-1"
                         />
                         <div
-                          class="c33 form-section"
+                          class="c34 form-section"
                         >
                           <h2
-                            class="c34"
+                            class="c35"
                           >
                             <div
                               class="no-gutters row"
@@ -1030,14 +1034,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Ministry project
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               >
                                 <div>
                                   00048 CLAIMS
@@ -1047,10 +1051,10 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                           </div>
                         </div>
                         <div
-                          class="c33 form-section"
+                          class="c34 form-section"
                         >
                           <h2
-                            class="c34"
+                            class="c35"
                           >
                             <div
                               class="no-gutters row"
@@ -1072,14 +1076,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Road name
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               >
                                 Test road name
                               </div>
@@ -1091,14 +1095,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Road alias
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               >
                                 Test road alias
                               </div>
@@ -1106,10 +1110,10 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                           </div>
                         </div>
                         <div
-                          class="c33 form-section"
+                          class="c34 form-section"
                         >
                           <h2
-                            class="c34"
+                            class="c35"
                           >
                             <div
                               class="no-gutters row"
@@ -1131,14 +1135,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Research purpose
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               />
                             </div>
                             <div
@@ -1148,14 +1152,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Request date
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               >
                                  
                                 Apr 14, 2022
@@ -1168,14 +1172,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Source of request
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               >
                                 Headquarters (HQ)
                               </div>
@@ -1187,14 +1191,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Requester
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               >
                                 Dairy Queen Forever! Property Management
                               </div>
@@ -1206,24 +1210,24 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Description of request
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               />
                             </div>
                             a request description
                           </div>
                         </div>
                         <div
-                          class="c33 form-section"
+                          class="c34 form-section"
                         >
                           <h2
-                            class="c34"
+                            class="c35"
                           >
                             <div
                               class="no-gutters row"
@@ -1245,14 +1249,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Research completed on
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               >
                                 Mar 30, 2022
                               </div>
@@ -1264,24 +1268,24 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Result of request
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               />
                             </div>
                             A research result
                           </div>
                         </div>
                         <div
-                          class="c33 form-section"
+                          class="c34 form-section"
                         >
                           <h2
-                            class="c34"
+                            class="c35"
                           >
                             <div
                               class="no-gutters row"
@@ -1303,14 +1307,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Expropriation?
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               >
                                 No
                               </div>
@@ -1322,14 +1326,14 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                                 class="pr-0 text-left col-4"
                               >
                                 <label
-                                  class="c35"
+                                  class="c36"
                                 >
                                   Expropriation comments
                                   :
                                 </label>
                               </div>
                               <div
-                                class="c36 text-left col"
+                                class="c37 text-left col"
                               />
                             </div>
                             An expropriation note
diff --git a/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx b/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
index d61e2daeeb..27683bc3b1 100644
--- a/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
+++ b/source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx
@@ -1,4 +1,5 @@
 import { Col } from 'react-bootstrap';
+import styled from 'styled-components';
 
 import AuditSection from '@/components/common/HeaderField/AuditSection';
 import { HeaderField } from '@/components/common/HeaderField/HeaderField';
@@ -20,7 +21,7 @@ export interface IResearchHeaderProps {
 const ResearchHeader: React.FunctionComponent<
   React.PropsWithChildren<IResearchHeaderProps>
 > = props => {
-  const leftColumnWidth = '7';
+  const leftColumnWidth = '8';
   const leftColumnLabel = '3';
   const researchFile = props.researchFile;
 
@@ -51,7 +52,7 @@ const ResearchHeader: React.FunctionComponent<
 
   return (
     <StyledRow className="no-gutters">
-      <Col xs={leftColumnWidth}>
+      <StyledLeftHeaderPane xs={leftColumnWidth}>
         <HeaderField label="File #:" labelWidth={leftColumnLabel} contentWidth="9">
           {researchFile?.fileNumber}
         </HeaderField>
@@ -65,7 +66,7 @@ const ResearchHeader: React.FunctionComponent<
           {districts}
         </HeaderField>
         <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
-      </Col>
+      </StyledLeftHeaderPane>
       <Col>
         <StyledFiller>
           <AuditSection lastUpdatedBy={props.lastUpdatedBy} baseAudit={researchFile} />
@@ -79,3 +80,8 @@ const ResearchHeader: React.FunctionComponent<
 };
 
 export default ResearchHeader;
+
+const StyledLeftHeaderPane = styled(Col)`
+  max-width: 60rem;
+  //border: 1px solid red;
+`;
diff --git a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap
index 78bf896d5d..fda4c061ed 100644
--- a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`ResearchHeader component > renders as expected when provided no researc
     class="Toastify"
   />
   <div />
-  .c3 {
+  .c4 {
   font-size: 0.87em;
   line-height: 1.9;
 }
 
-.c1 {
+.c2 {
   font-weight: bold;
   white-space: nowrap;
 }
@@ -24,7 +24,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
   border-bottom-width: 0.1rem;
 }
 
-.c2 {
+.c3 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -35,11 +35,15 @@ exports[`ResearchHeader component > renders as expected when provided no researc
   flex-direction: column;
 }
 
+.c1 {
+  max-width: 60rem;
+}
+
 <div
     class="c0 no-gutters row"
   >
     <div
-      class="col-7"
+      class="c1 col-8"
     >
       <div
         class="row"
@@ -48,7 +52,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             File #:
           </label>
@@ -64,7 +68,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             File name:
           </label>
@@ -80,7 +84,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             MOTI region:
           </label>
@@ -96,7 +100,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             Ministry district:
           </label>
@@ -112,7 +116,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
           class="pr-0 text-left col-3"
         >
           <label
-            class="c1"
+            class="c2"
           >
             Historical file #:
           </label>
@@ -126,7 +130,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
       class="col"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           class="no-gutters row"
@@ -135,7 +139,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
             class="text-right col"
           >
             <span
-              class="c3"
+              class="c4"
             >
               <strong>
                 Created: 
@@ -160,7 +164,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
             class="text-right col"
           >
             <span
-              class="c3"
+              class="c4"
             >
               <strong>
                 Updated: 
diff --git a/source/frontend/src/features/mapSideBar/shared/header/styles.ts b/source/frontend/src/features/mapSideBar/shared/header/styles.ts
new file mode 100644
index 0000000000..c182e74463
--- /dev/null
+++ b/source/frontend/src/features/mapSideBar/shared/header/styles.ts
@@ -0,0 +1,6 @@
+import { Col } from 'react-bootstrap';
+import styled from 'styled-components';
+
+export const StyledLeftHeaderPane = styled(Col)`
+  max-width: 60rem;
+`;