diff --git a/app/src/Model/Table/PetitionsTable.php b/app/src/Model/Table/PetitionsTable.php
index 8aa38d24c..9c6352c42 100644
--- a/app/src/Model/Table/PetitionsTable.php
+++ b/app/src/Model/Table/PetitionsTable.php
@@ -110,7 +110,8 @@ public function initialize(array $config): void {
       'EnrollmentFlows' => ['EnrollmentFlowSteps' => ['sort' => ['ordr' => 'ASC']]],
       'EnrolleePeople' => ['PrimaryName' => ['foreignKey' => 'person_id']],
       'PetitionerPeople' => ['PrimaryName' => ['foreignKey' => 'person_id']],
-      'PetitionStepResults'
+      'PetitionStepResults',
+      'PetitionHistoryRecords'
     ]);
 
     $this->setAutoViewVars([
diff --git a/app/templates/Petitions/fields.inc b/app/templates/Petitions/fields.inc
index ffabf93c6..aebbb520e 100644
--- a/app/templates/Petitions/fields.inc
+++ b/app/templates/Petitions/fields.inc
@@ -183,8 +183,38 @@ if (!empty($vv_obj?->petitioner_person?->id)) {
   </li>
 <?php endforeach; ?>
 
+
+<?php if(!empty($vv_obj->petition_history_records)): 
+  // XXX Generalize this into an element for all history records if we use this output elsewhere
+?>
 <li class="form-list-header">
   <h2>
     <?= __d('information', 'petition.history') ?>
   </h2>
 </li>
+<li class="petition-history">
+  <div class="table-container">
+    <table id="petition-history-table" class="history-table list-mode">
+      <thead>
+      <tr>
+        <th><?= __d('field', 'action'); ?></th>
+        <th><?= __d('field', 'actor'); ?></th>
+        <th><?= __d('field', 'comment'); ?></th>
+        <th><?= __d('field', 'created'); ?></th>
+      </tr>
+      </thead>
+
+      <tbody>
+      <?php foreach($vv_obj->petition_history_records as $hr): ?>
+        <tr>
+          <td><?= $hr['action'] ?></td>
+          <td><?= $hr['actor_person_id'] // XXX Replace with link to actor and name of ?></td>
+          <td><?= $hr['comment'] ?></td>
+          <td><?= $hr['created'] ?></td>
+        </tr>
+      <?php endforeach; ?>
+      </tbody>
+    </table>
+  </div>
+</li>
+<?php endif; ?>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 0aab62671..7911547b7 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1354,16 +1354,15 @@ field data is in the right column; see also ul.data-list
 above. ***/
 ul.form-list {
   clear: both;
+  margin-top: 0.5rem;
   padding: 0;
-}
-body.view ul.form-list {
-  border-bottom: 1px solid var(--cmg-color-bg-005);
+  border-top: 1px solid var(--cmg-color-bg-005);
 }
 .cm-time-picker-vals ul li,
 ul.form-list li {
   background-color: var(--cmg-color-body-bg);
   border-left: 1px solid var(--cmg-color-bg-005);
-  border-top: 1px solid var(--cmg-color-bg-005);
+  border-bottom: 1px solid var(--cmg-color-bg-005);
   border-right: 1px solid var(--cmg-color-bg-005);
   margin: 0;
   padding: 0;
@@ -1371,6 +1370,7 @@ ul.form-list li {
 }
 ul.fields li.form-list-header {
   overflow-x: unset;
+  margin-top: 2rem;
 }
 ul.fields li.form-list-header h2 {
   color: var(--cmg-color-txt-inverse);
@@ -1396,8 +1396,7 @@ ul.form-list li .field:hover {
 }
 ul.form-list li.fields-submit {
   background-color: unset;
-  border-left: none;
-  border-right: none;
+  border: none;
 }
 ul.form-list li.fields-submit .field:hover {
   background-color: var(--cmg-color-body-bg);
@@ -1893,8 +1892,12 @@ body.attributecollectors .submit {
   padding-right: 1em;
   white-space: nowrap;
 }
+ul#view_Petitions.form-list {
+  border-top: none;
+}
 ul.form-list li.petition-status-title {
-  margin-bottom: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: -1rem;
   border: none;
 }
 ul.form-list li.petition-status-title h2 {
@@ -2131,6 +2134,9 @@ table.table-striped tbody tr:nth-child(2n) td {
 td .alert {
   margin-bottom: 0;
 }
+.history-table th {
+  font-weight: normal;
+}
 /* LOADING ANIMATION & SKELETONS */
 @keyframes loading {
   0%   { opacity: 0.3; }