diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 605505f2b..8f17816c2 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -275,11 +275,11 @@ To update the icons using the [IcoMoon website](https://icomoon.io/app/):
 
 By following the steps above, you should minimize the diff. However, in the JSON file, you may still see changes for properties like `id`, `iconIdx`, `setId`, and `setIdx`. (I think these properties may change for the icons that were previously most recently added.)
 
-Here are a few screenshots the IcoMoon interface from March 2021:
+Here are a few screenshots of the IcoMoon interface from March 2021:
+
 ![Using IcoMoon Interface](docs/img/icomoon-choose-new-icons.png)
 ![Choosing Font Awesome Icon Set](docs/img/icomoon-font-awesome.png)
 
-
 ### Standard Actions
 
 Certain actions are standardized across ODK Central Frontend.
diff --git a/icomoon.json b/icomoon.json
index a3e42208d..53aec870d 100644
--- a/icomoon.json
+++ b/icomoon.json
@@ -1161,14 +1161,41 @@
       "attrs": [],
       "properties": {
         "name": "ban",
-        "id": 93,
+        "id": 42,
         "order": 2,
         "prevSize": 28,
         "code": 61534
       },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 42
+    },
+    {
+      "icon": {
+        "paths": [
+          "M1024 512c0 202.286-229.143 365.714-512 365.714-28 0-56-1.714-82.857-4.571-74.857 66.286-164 113.143-262.857 138.286-20.571 5.714-42.857 9.714-65.143 12.571-12.571 1.143-24.571-8-27.429-21.714v-0.571c-2.857-14.286 6.857-22.857 15.429-33.143 36-40.571 77.143-74.857 104-170.286-117.714-66.857-193.143-170.286-193.143-286.286 0-201.714 229.143-365.714 512-365.714s512 163.429 512 365.714z"
+        ],
+        "width": 1024,
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "comment"
+        ],
+        "defaultCode": 61557,
+        "grid": 14
+      },
+      "attrs": [],
+      "properties": {
+        "name": "comment",
+        "id": 111,
+        "order": 2,
+        "prevSize": 28,
+        "code": 61557
+      },
       "setIdx": 1,
       "setId": 3,
-      "iconIdx": 14
+      "iconIdx": 111
     }
   ],
   "height": 1024,
diff --git a/public/fonts/icomoon.svg b/public/fonts/icomoon.svg
index 1d5224d42..43e99b7f2 100755
--- a/public/fonts/icomoon.svg
+++ b/public/fonts/icomoon.svg
@@ -27,6 +27,7 @@
 <glyph unicode="&#xf05e;" glyph-name="ban" horiz-adv-x="878" d="M749.714 440.571c0 62.286-18.286 120-49.714 168.571l-430.857-430.286c49.143-32 107.429-50.857 169.714-50.857 171.429 0 310.857 140 310.857 312.571zM178.857 269.714l431.429 430.857c-49.143 33.143-108 52-171.429 52-171.429 0-310.857-140-310.857-312 0-63.429 18.857-121.714 50.857-170.857zM877.714 440.571c0-243.429-196.571-440.571-438.857-440.571s-438.857 197.143-438.857 440.571c0 242.857 196.571 440 438.857 440s438.857-197.143 438.857-440z" />
 <glyph unicode="&#xf06e;" glyph-name="eye" d="M950.857 402.286c-54.286 84-128.571 156-217.714 201.714 22.857-38.857 34.857-83.429 34.857-128.571 0-141.143-114.857-256-256-256s-256 114.857-256 256c0 45.143 12 89.714 34.857 128.571-89.143-45.714-163.429-117.714-217.714-201.714 97.714-150.857 255.429-256 438.857-256s341.143 105.143 438.857 256zM539.429 621.714c0 14.857-12.571 27.429-27.429 27.429-95.429 0-173.714-78.286-173.714-173.714 0-14.857 12.571-27.429 27.429-27.429s27.429 12.571 27.429 27.429c0 65.143 53.714 118.857 118.857 118.857 14.857 0 27.429 12.571 27.429 27.429zM1024 402.286c0-14.286-4.571-27.429-11.429-39.429-105.143-173.143-297.714-289.714-500.571-289.714s-395.429 117.143-500.571 289.714c-6.857 12-11.429 25.143-11.429 39.429s4.571 27.429 11.429 39.429c105.143 172.571 297.714 289.714 500.571 289.714s395.429-117.143 500.571-289.714c6.857-12 11.429-25.143 11.429-39.429z" />
 <glyph unicode="&#xf071;" glyph-name="exclamation-triangle, warning" d="M585.143 165.143v108.571c0 10.286-8 18.857-18.286 18.857h-109.714c-10.286 0-18.286-8.571-18.286-18.857v-108.571c0-10.286 8-18.857 18.286-18.857h109.714c10.286 0 18.286 8.571 18.286 18.857zM584 378.857l10.286 262.286c0 3.429-1.714 8-5.714 10.857-3.429 2.857-8.571 6.286-13.714 6.286h-125.714c-5.143 0-10.286-3.429-13.714-6.286-4-2.857-5.714-8.571-5.714-12l9.714-261.143c0-7.429 8.571-13.143 19.429-13.143h105.714c10.286 0 18.857 5.714 19.429 13.143zM576 912.571l438.857-804.571c12.571-22.286 12-49.714-1.143-72s-37.143-36-62.857-36h-877.714c-25.714 0-49.714 13.714-62.857 36s-13.714 49.714-1.143 72l438.857 804.571c12.571 23.429 37.143 38.286 64 38.286s51.429-14.857 64-38.286z" />
+<glyph unicode="&#xf075;" glyph-name="comment" d="M1024 438.857c0-202.286-229.143-365.714-512-365.714-28 0-56 1.714-82.857 4.571-74.857-66.286-164-113.143-262.857-138.286-20.571-5.714-42.857-9.714-65.143-12.571-12.571-1.143-24.571 8-27.429 21.714v0.571c-2.857 14.286 6.857 22.857 15.429 33.143 36 40.571 77.143 74.857 104 170.286-117.714 66.857-193.143 170.286-193.143 286.286 0 201.714 229.143 365.714 512 365.714s512-163.429 512-365.714z" />
 <glyph unicode="&#xf078;" glyph-name="chevron-down" d="M961.714 489.143l-424-423.429c-14.286-14.286-37.143-14.286-51.429 0l-424 423.429c-14.286 14.286-14.286 37.714 0 52l94.857 94.286c14.286 14.286 37.143 14.286 51.429 0l303.429-303.429 303.429 303.429c14.286 14.286 37.143 14.286 51.429 0l94.857-94.286c14.286-14.286 14.286-37.714 0-52z" />
 <glyph unicode="&#xf07c;" glyph-name="folder-open" horiz-adv-x="1074" d="M1073.714 406.857c0-13.714-8.571-27.429-17.714-37.714l-192-226.286c-33.143-38.857-100.571-69.714-150.857-69.714h-621.714c-20.571 0-49.714 6.286-49.714 32 0 13.714 8.571 27.429 17.714 37.714l192 226.286c33.143 38.857 100.571 69.714 150.857 69.714h621.714c20.571 0 49.714-6.286 49.714-32zM877.714 603.428v-91.429h-475.429c-71.429 0-160-40.571-206.286-95.429l-195.429-229.714c0 4.571-0.571 9.714-0.571 14.286v548.571c0 70.286 57.714 128 128 128h182.857c70.286 0 128-57.714 128-128v-18.286h310.857c70.286 0 128-57.714 128-128z" />
 <glyph unicode="&#xf080;" glyph-name="bar-chart, bar-chart-o" horiz-adv-x="1170" d="M365.714 438.857v-292.571h-146.286v292.571h146.286zM585.143 731.428v-585.143h-146.286v585.143h146.286zM1170.286 73.143v-73.143h-1170.286v877.714h73.143v-804.571h1097.143zM804.571 585.143v-438.857h-146.286v438.857h146.286zM1024 804.571v-658.286h-146.286v658.286h146.286z" />
diff --git a/public/fonts/icomoon.ttf b/public/fonts/icomoon.ttf
index 9fda2d811..a8111167a 100755
Binary files a/public/fonts/icomoon.ttf and b/public/fonts/icomoon.ttf differ
diff --git a/public/fonts/icomoon.woff b/public/fonts/icomoon.woff
index 2a4525462..8db652234 100755
Binary files a/public/fonts/icomoon.woff and b/public/fonts/icomoon.woff differ
diff --git a/src/assets/css/bootstrap.css b/src/assets/css/bootstrap.css
index dee9999c6..55f4b7e55 100644
--- a/src/assets/css/bootstrap.css
+++ b/src/assets/css/bootstrap.css
@@ -64,7 +64,6 @@ dfn {
   font-style: italic;
 }
 h1 {
-  font-size: 2em;
   margin: 0.67em 0;
 }
 mark {
@@ -385,34 +384,6 @@ h6,
   line-height: 1.1;
   color: inherit;
 }
-h1 small,
-h2 small,
-h3 small,
-h4 small,
-h5 small,
-h6 small,
-.h1 small,
-.h2 small,
-.h3 small,
-.h4 small,
-.h5 small,
-.h6 small,
-h1 .small,
-h2 .small,
-h3 .small,
-h4 .small,
-h5 .small,
-h6 .small,
-.h1 .small,
-.h2 .small,
-.h3 .small,
-.h4 .small,
-.h5 .small,
-.h6 .small {
-  font-weight: 400;
-  line-height: 1;
-  color: #777777;
-}
 h1,
 .h1,
 h2,
@@ -422,20 +393,6 @@ h3,
   margin-top: 20px;
   margin-bottom: 10px;
 }
-h1 small,
-.h1 small,
-h2 small,
-.h2 small,
-h3 small,
-.h3 small,
-h1 .small,
-.h1 .small,
-h2 .small,
-.h2 .small,
-h3 .small,
-.h3 .small {
-  font-size: 65%;
-}
 h4,
 .h4,
 h5,
@@ -445,20 +402,6 @@ h6,
   margin-top: 10px;
   margin-bottom: 10px;
 }
-h4 small,
-.h4 small,
-h5 small,
-.h5 small,
-h6 small,
-.h6 small,
-h4 .small,
-.h4 .small,
-h5 .small,
-.h5 .small,
-h6 .small,
-.h6 .small {
-  font-size: 75%;
-}
 h1,
 .h1 {
   font-size: 36px;
@@ -4228,49 +4171,6 @@ a.badge:focus {
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
-.jumbotron {
-  padding-top: 30px;
-  padding-bottom: 30px;
-  margin-bottom: 30px;
-  color: inherit;
-  background-color: #eeeeee;
-}
-.jumbotron h1,
-.jumbotron .h1 {
-  color: inherit;
-}
-.jumbotron p {
-  margin-bottom: 15px;
-  font-size: 21px;
-  font-weight: 200;
-}
-.jumbotron > hr {
-  border-top-color: #d5d5d5;
-}
-.container .jumbotron,
-.container-fluid .jumbotron {
-  padding-right: 15px;
-  padding-left: 15px;
-  border-radius: 6px;
-}
-.jumbotron .container {
-  max-width: 100%;
-}
-@media screen and (min-width: 768px) {
-  .jumbotron {
-    padding-top: 48px;
-    padding-bottom: 48px;
-  }
-  .container .jumbotron,
-  .container-fluid .jumbotron {
-    padding-right: 60px;
-    padding-left: 60px;
-  }
-  .jumbotron h1,
-  .jumbotron .h1 {
-    font-size: 63px;
-  }
-}
 .thumbnail {
   display: block;
   padding: 4px;
diff --git a/src/assets/css/icomoon.css b/src/assets/css/icomoon.css
index 06b52fcf7..c531e1710 100755
--- a/src/assets/css/icomoon.css
+++ b/src/assets/css/icomoon.css
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'icomoon';
   src:
-    url('/fonts/icomoon.ttf?kps16g') format('truetype'),
-    url('/fonts/icomoon.woff?kps16g') format('woff'),
-    url('/fonts/icomoon.svg?kps16g#icomoon') format('svg');
+    url('/fonts/icomoon.ttf?6bbdpm') format('truetype'),
+    url('/fonts/icomoon.woff?6bbdpm') format('woff'),
+    url('/fonts/icomoon.svg?6bbdpm#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -177,3 +177,6 @@
 .icon-ban:before {
   content: "\f05e";
 }
+.icon-comment:before {
+  content: "\f075";
+}
diff --git a/src/assets/scss/_mixins.scss b/src/assets/scss/_mixins.scss
index 1bef04e57..31a17f9eb 100644
--- a/src/assets/scss/_mixins.scss
+++ b/src/assets/scss/_mixins.scss
@@ -19,3 +19,11 @@
 
   li { margin-bottom: 5px; }
 }
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 379090200..4aa8d12a2 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -66,6 +66,9 @@ $padding-left-table-data: 8px;
 $padding-right-table-data: 8px;
 $padding-top-table-data: 8px;
 
+// Panels
+$box-shadow-panel-main: 0 0 24px rgba(0, 0, 0, 0.25), 0 35px 115px rgba(0, 0, 0, 0.28);
+
 $color-subpanel-background: #eee;
 $color-subpanel-active: #ddd;
 $color-subpanel-border: #e6e6e6;
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 0fc2906f7..c11df5a06 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -23,7 +23,10 @@ body {
   color: $color-text;
   min-height: 100vh;
 
-  &.scroll { overflow-y: scroll; }
+  &.scroll {
+    overflow-y: scroll;
+    &.modal-open { overflow-y: hidden; }
+  }
 }
 
 h1, .h1 {
@@ -36,6 +39,9 @@ h1, .h1 {
 p { max-width: $max-width-p; }
 
 dl div {
+  display: flex;
+  flex-direction: column-reverse;
+
   border-bottom: 1px solid #ddd;
   padding-bottom: 10px;
   padding-top: 10px;
@@ -48,6 +54,13 @@ dl div {
   }
 }
 
+dt {
+  color: #666;
+  font-weight: normal;
+}
+
+dd { font-size: 16px; }
+
 pre {
   background-color: $color-subpanel-background;
   border-color: $color-subpanel-border;
@@ -514,7 +527,7 @@ becomes more complicated.
 }
 
 .panel-main {
-  box-shadow: 0 0 24px rgba(0, 0, 0, 0.25), 0 35px 115px rgba(0, 0, 0, 0.28);
+  box-shadow: $box-shadow-panel-main;
   margin-top: 70px;
 
   .panel-body {
diff --git a/src/components/actor-link.vue b/src/components/actor-link.vue
new file mode 100644
index 000000000..8ca40bfb3
--- /dev/null
+++ b/src/components/actor-link.vue
@@ -0,0 +1,38 @@
+<!--
+Copyright 2021 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <link-if-can v-if="actor.type === 'user'" :to="to" class="actor-link" :title="actor.displayName">{{ actor.displayName }}</link-if-can>
+  <span v-else class="actor-link" :title="actor.displayName">{{ actor.displayName }}</span>
+</template>
+
+<script>
+import LinkIfCan from './link-if-can.vue';
+
+import routes from '../mixins/routes';
+
+export default {
+  name: 'ActorLink',
+  components: { LinkIfCan },
+  mixins: [routes()],
+  props: {
+    actor: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    to() {
+      return this.userPath(this.actor.id);
+    }
+  }
+};
+</script>
diff --git a/src/components/audit/row.vue b/src/components/audit/row.vue
index 76e0b5aed..a03aaa60b 100644
--- a/src/components/audit/row.vue
+++ b/src/components/audit/row.vue
@@ -19,13 +19,7 @@ except according to the terms contained in the LICENSE file.
       </template>
     </td>
     <td class="initiator">
-      <template v-if="audit.actor != null">
-        <router-link v-if="audit.actor.type === 'user'"
-          :to="userPath(audit.actor.id)" :title="audit.actor.displayName">
-          {{ audit.actor.displayName }}
-        </router-link>
-        <span v-else :title="audit.actor.displayName">{{ audit.actor.displayName }}</span>
-      </template>
+      <actor-link v-if="audit.actor != null" :actor="audit.actor"/>
     </td>
     <td class="target">
       <template v-if="target != null">
@@ -41,6 +35,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import ActorLink from '../actor-link.vue';
 import DateTime from '../date-time.vue';
 import Selectable from '../selectable.vue';
 
@@ -86,7 +81,7 @@ acteeSpeciesByCategory.upgrade = acteeSpeciesByCategory.form;
 
 export default {
   name: 'AuditRow',
-  components: { DateTime, Selectable },
+  components: { ActorLink, DateTime, Selectable },
   mixins: [audit(), routes()],
   props: {
     audit: {
diff --git a/src/components/date-time.vue b/src/components/date-time.vue
index 8e39934e1..3d8b51ff5 100644
--- a/src/components/date-time.vue
+++ b/src/components/date-time.vue
@@ -10,7 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <span :title="title">{{ text }}</span>
+  <time v-if="iso != null" :datetime="iso" :title="format(false)">{{ format(true) }}</time>
+  <span v-else>{{ blank }}</span>
 </template>
 
 <script>
@@ -21,7 +22,7 @@ import { formatDateTime } from '../util/date-time';
 export default {
   name: 'DateTime',
   props: {
-    iso: String, // eslint-disable-line vue/require-default-prop
+    iso: String,
     blank: {
       type: String,
       default: ''
@@ -30,14 +31,11 @@ export default {
   computed: {
     dateTime() {
       return DateTime.fromISO(this.iso, { locale: this.$i18n.locale });
-    },
-    title() {
-      return this.iso != null ? formatDateTime(this.dateTime) : null;
-    },
-    text() {
-      return this.iso != null
-        ? formatDateTime(this.dateTime, true)
-        : this.blank;
+    }
+  },
+  methods: {
+    format(relative) {
+      return formatDateTime(this.dateTime, relative);
     }
   }
 };
diff --git a/src/components/form/head.vue b/src/components/form/head.vue
index 67e1f01a4..1425344b9 100644
--- a/src/components/form/head.vue
+++ b/src/components/form/head.vue
@@ -145,7 +145,7 @@ export default {
         (this.formDraft.isDefined() || this.project.permits('form.update'));
     }
   },
-  mounted() {
+  created() {
     // If as the user navigates between the tabs, the scrollbar is visible for
     // only some tabs, then the position of the tabs will shift as the user
     // navigates. To prevent that, we always show the scrollbar.
diff --git a/src/components/modal.vue b/src/components/modal.vue
index 687d4d256..332e6c5be 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -181,7 +181,7 @@ export default {
   .modal-content {
     border: none;
     border-radius: 0;
-    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25), 0 35px 115px rgba(0, 0, 0, 0.28);
+    box-shadow: $box-shadow-panel-main;
 
     .modal-header {
       background-color: $color-accent-primary;
diff --git a/src/components/submission/audit/list.vue b/src/components/submission/activity.vue
similarity index 50%
rename from src/components/submission/audit/list.vue
rename to src/components/submission/activity.vue
index 1604283dc..d573075c4 100644
--- a/src/components/submission/audit/list.vue
+++ b/src/components/submission/activity.vue
@@ -10,22 +10,22 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <page-section id="submission-audit-list" condensed>
+  <page-section id="submission-activity" condensed>
     <template #heading>
-      <span>{{ $t('title') }}</span>
+      <span>{{ $t('common.activity') }}</span>
       <template v-if="project != null && project.permits('submission.update')">
-        <button id="submission-audit-list-update-review-state-button"
+        <button id="submission-activity-update-review-state-button"
           type="button" class="btn btn-default"
           @click="$emit('update-review-state')">
-          <span class="icon-check"></span>{{ $t('action.updateReviewState') }}
+          <span class="icon-check"></span>{{ $t('action.review') }}
         </button>
         <template v-if="submission != null">
           <a v-if="submission.__system.status == null"
-            id="submission-audit-list-edit-button" class="btn btn-default"
+            id="submission-activity-edit-button" class="btn btn-default"
             :href="editPath" target="_blank">
             <span class="icon-pencil"></span>{{ $t('action.edit') }}
           </a>
-          <button v-else id="submission-audit-list-edit-button" type="button"
+          <button v-else id="submission-activity-edit-button" type="button"
             class="btn btn-default" disabled
             :title="$t('submission.editDisabled')">
             <span class="icon-pencil"></span>{{ $t('action.edit') }}
@@ -34,23 +34,32 @@ except according to the terms contained in the LICENSE file.
       </template>
     </template>
     <template #body>
-      <submission-audit-table/>
-      <loading :state="$store.getters.initiallyLoading(['audits'])"/>
+      <submission-comment :project-id="projectId" :xml-form-id="xmlFormId"
+        :instance-id="instanceId" :feed="feed" @success="$emit('comment')"/>
+      <loading :state="initiallyLoading"/>
+      <template v-if="feed != null">
+        <submission-feed-entry v-for="(entry, index) in feed" :key="index"
+          :entry="entry"/>
+      </template>
     </template>
   </page-section>
 </template>
 
 <script>
-import Loading from '../../loading.vue';
-import PageSection from '../../page/section.vue';
-import SubmissionAuditTable from './table.vue';
+import { DateTime } from 'luxon';
+import { descend } from 'ramda';
+
+import Loading from '../loading.vue';
+import PageSection from '../page/section.vue';
+import SubmissionComment from './comment.vue';
+import SubmissionFeedEntry from './feed-entry.vue';
 
-import { apiPaths } from '../../../util/request';
-import { requestData } from '../../../store/modules/request';
+import { apiPaths } from '../../util/request';
+import { requestData } from '../../store/modules/request';
 
 export default {
-  name: 'SubmissionAuditList',
-  components: { Loading, PageSection, SubmissionAuditTable },
+  name: 'SubmissionActivity',
+  components: { Loading, PageSection, SubmissionComment, SubmissionFeedEntry },
   props: {
     projectId: {
       type: String,
@@ -68,30 +77,32 @@ export default {
   computed: {
     // The component does not assume that this data will exist when the
     // component is created.
-    ...requestData(['project', 'submission', 'audits']),
+    ...requestData(['project', 'submission', 'audits', 'comments']),
+    initiallyLoading() {
+      return this.$store.getters.initiallyLoading(['audits', 'comments']);
+    },
     editPath() {
       return apiPaths.editSubmission(
         this.projectId,
         this.xmlFormId,
         this.instanceId
       );
+    },
+    feed() {
+      if (this.audits == null || this.comments == null) return null;
+      return [...this.audits, ...this.comments].sort(
+        descend(entry => DateTime.fromISO(entry.loggedAt != null
+          ? entry.loggedAt
+          : entry.createdAt))
+      );
     }
   }
 };
 </script>
 
 <style lang="scss">
-#submission-audit-list-update-review-state-button { margin-right: 5px; }
-</style>
+@import '../../assets/scss/mixins';
 
-<i18n lang="json5">
-{
-  "en": {
-    // This is a title shown above a section of the page.
-    "title": "Actions",
-    "action": {
-      "updateReviewState": "Update State"
-    }
-  }
-}
-</i18n>
+#submission-activity { margin-bottom: $margin-bottom-page-section; }
+#submission-activity-update-review-state-button { margin-right: 5px; }
+</style>
diff --git a/src/components/submission/audit/row.vue b/src/components/submission/audit/row.vue
deleted file mode 100644
index b9227e7de..000000000
--- a/src/components/submission/audit/row.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<!--
-Copyright 2021 ODK Central Developers
-See the NOTICE file at the top-level directory of this distribution and at
-https://github.com/getodk/central-frontend/blob/master/NOTICE.
-
-This file is part of ODK Central. It is subject to the license terms in
-the LICENSE file found in the top-level directory of this distribution and at
-https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
-including this file, may be copied, modified, propagated, or distributed
-except according to the terms contained in the LICENSE file.
--->
-<template>
-  <tr class="submission-audit-row">
-    <td><date-time :iso="audit.loggedAt"/></td>
-    <td class="actor">
-      <span :title="audit.actor.displayName">{{ audit.actor.displayName }}</span>
-    </td>
-    <td class="action">
-      <template v-if="audit.action === 'submission.create'">
-        <span class="icon-cloud-upload"></span>{{ $t('created') }}
-      </template>
-      <template v-else-if="audit.action === 'submission.update'">
-        <span :class="reviewStateIcon"></span>{{ reviewStateText }}
-      </template>
-      <template v-else>
-        <span class="icon-pencil"></span>{{ $t('edited') }}
-      </template>
-    </td>
-    <td class="notes">{{ audit.notes }}</td>
-  </tr>
-</template>
-
-<script>
-import DateTime from '../../date-time.vue';
-
-import Audit from '../../../presenters/audit';
-
-const iconsByReviewState = {
-  hasIssues: 'icon-comments',
-  needsReview: 'icon-eye',
-  approved: 'icon-check-circle',
-  rejected: 'icon-times-circle'
-};
-
-export default {
-  name: 'SubmissionAuditRow',
-  components: { DateTime },
-  props: {
-    audit: {
-      type: Audit,
-      required: true
-    }
-  },
-  computed: {
-    reviewStateIcon() {
-      const { reviewState } = this.audit.details;
-      return reviewState == null
-        ? 'icon-dot-circle-o'
-        : iconsByReviewState[reviewState];
-    },
-    reviewStateText() {
-      const { reviewState } = this.audit.details;
-      return reviewState == null
-        ? this.$t('reviewState.received')
-        : this.$t(`reviewState.${reviewState}`);
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-@import '../../../assets/scss/mixins';
-
-.submission-audit-row {
-  .table tbody & td { vertical-align: middle; }
-
-  .actor { @include text-overflow-ellipsis; }
-
-  .action {
-    .icon-comments, .icon-eye { margin-right: $margin-right-icon; }
-    .icon-cloud-upload { margin-right: #{$margin-right-icon - 1px}; }
-    .icon-dot-circle-o, .icon-pencil, .icon-check-circle, .icon-times-circle {
-      margin-left: 1px;
-      margin-right: #{$margin-right-icon + 1px};
-    }
-
-    .icon-cloud-upload, .icon-dot-circle-o { color: #999; }
-    .icon-comments, .icon-eye, .icon-pencil { color: $color-warning; }
-    .icon-check-circle { color: $color-success; }
-    .icon-times-circle { color: $color-danger; }
-  }
-
-  .notes {
-    overflow-wrap: break-word;
-    white-space: pre-line;
-  }
-}
-</style>
-
-<i18n lang="json5">
-{
-  "en": {
-    // This text indicates that a Submission was submitted.
-    "created": "Submitted",
-    // This text is shown for a Submission that was edited.
-    "edited": "Edited"
-  }
-}
-</i18n>
diff --git a/src/components/submission/audit/table.vue b/src/components/submission/audit/table.vue
deleted file mode 100644
index aa395e4d2..000000000
--- a/src/components/submission/audit/table.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<!--
-Copyright 2021 ODK Central Developers
-See the NOTICE file at the top-level directory of this distribution and at
-https://github.com/getodk/central-frontend/blob/master/NOTICE.
-
-This file is part of ODK Central. It is subject to the license terms in
-the LICENSE file found in the top-level directory of this distribution and at
-https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
-including this file, may be copied, modified, propagated, or distributed
-except according to the terms contained in the LICENSE file.
--->
-<template>
-  <table id="submission-audit-table" class="table">
-    <thead>
-      <tr>
-        <th>{{ $t('header.time') }}</th>
-        <th>{{ $t('header.takenBy') }}</th>
-        <th>{{ $t('header.action') }}</th>
-        <th class="notes">{{ $t('header.note') }}</th>
-      </tr>
-    </thead>
-    <tbody v-if="audits != null">
-      <submission-audit-row v-for="audit of audits" :key="audit.key"
-        :audit="audit"/>
-    </tbody>
-  </table>
-</template>
-
-<script>
-import SubmissionAuditRow from './row.vue';
-
-import { requestData } from '../../../store/modules/request';
-
-export default {
-  name: 'SubmissionAuditTable',
-  components: { SubmissionAuditRow },
-  computed: requestData(['audits'])
-};
-</script>
-
-<style lang="scss">
-#submission-audit-table {
-  table-layout: fixed;
-  th.notes { width: 50%; }
-}
-</style>
-
-<i18n lang="json5">
-{
-  "en": {
-    "header": {
-      "takenBy": "Taken by",
-      "action": "Action",
-      "note": "Note"
-    }
-  }
-}
-</i18n>
diff --git a/src/components/submission/basic-details.vue b/src/components/submission/basic-details.vue
index a18a82912..ed52ed9bc 100644
--- a/src/components/submission/basic-details.vue
+++ b/src/components/submission/basic-details.vue
@@ -13,7 +13,7 @@ except according to the terms contained in the LICENSE file.
   <page-section id="submission-basic-details" condensed>
     <template #heading><span>{{ $t('common.basicInfo') }}</span></template>
     <template #body>
-      <dl class="dl-horizontal">
+      <dl>
         <div>
           <dt>{{ $t('header.instanceId') }}</dt>
           <dd><span :title="submission.__id">{{ submission.__id }}</span></dd>
@@ -21,16 +21,20 @@ except according to the terms contained in the LICENSE file.
         <div>
           <dt>{{ $t('header.submitterName') }}</dt>
           <dd>
-            <link-if-can :to="userPath(submission.__system.submitterId)"
-              :title="submission.__system.submitterName">
-              {{ submission.__system.submitterName }}
-            </link-if-can>
+            <span :title="submission.__system.submitterName">{{ submission.__system.submitterName }}</span>
           </dd>
         </div>
         <div>
           <dt>{{ $t('header.submissionDate') }}</dt>
           <dd><date-time :iso="submission.__system.submissionDate"/></dd>
         </div>
+        <div>
+          <dt>{{ $t('reviewState') }}</dt>
+          <dd id="submission-basic-details-review-state">
+            <span :class="reviewStateIcon(submission.__system.reviewState)"></span>
+            <span>{{ $t(`reviewState.${submission.__system.reviewState}`) }}</span>
+          </dd>
+        </div>
         <div v-if="submission.__system.deviceId != null">
           <dt>{{ $t('deviceId') }}</dt>
           <dd>
@@ -54,16 +58,15 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import DateTime from '../date-time.vue';
-import LinkIfCan from '../link-if-can.vue';
 import PageSection from '../page/section.vue';
 
-import routes from '../../mixins/routes';
+import reviewState from '../../mixins/review-state';
 import { requestData } from '../../store/modules/request';
 
 export default {
   name: 'SubmissionBasicDetails',
-  components: { DateTime, LinkIfCan, PageSection },
-  mixins: [routes()],
+  components: { DateTime, PageSection },
+  mixins: [reviewState()],
   computed: {
     // The component assumes that this data will exist when the component is
     // created.
@@ -97,11 +100,22 @@ export default {
     margin-right: $margin-right-icon;
   }
 }
+
+#submission-basic-details-review-state {
+  [class^="icon-"] { margin-right: $margin-right-icon; }
+
+  .icon-dot-circle-o { color: #999; }
+  .icon-comments { color: $color-warning; }
+  .icon-pencil { color: #666; }
+  .icon-check-circle { color: $color-success; }
+  .icon-times-circle { color: $color-danger; }
+}
 </style>
 
 <i18n lang="json5">
 {
   "en": {
+    "reviewState": "Review State",
     "deviceId": "Device ID",
     "attachments": "Media files",
     "present": "{count} file | {count} files",
diff --git a/src/components/submission/comment.vue b/src/components/submission/comment.vue
new file mode 100644
index 000000000..3cfd4df84
--- /dev/null
+++ b/src/components/submission/comment.vue
@@ -0,0 +1,135 @@
+<!--
+Copyright 2021 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <form id="submission-comment" @submit.prevent="submit">
+    <div v-if="editWithoutComment" role="alert">
+      <span class="icon-pencil"></span>{{ $t('editWithoutComment') }}
+    </div>
+    <div class="form-group">
+      <textarea v-model.trim="body" class="form-control"
+        :placeholder="$t('field.comment')" :aria-label="$t('field.comment')"
+        required rows="2">
+      </textarea>
+    </div>
+    <div v-show="body !== '' || awaitingResponse || editWithoutComment"
+      id="submission-comment-actions">
+      <button type="submit" class="btn btn-primary"
+        :disabled="awaitingResponse">
+        {{ $t('action.comment') }} <spinner :state="awaitingResponse"/>
+      </button>
+    </div>
+  </form>
+</template>
+
+<script>
+import Spinner from '../spinner.vue';
+
+import request from '../../mixins/request';
+import { apiPaths } from '../../util/request';
+import { noop } from '../../util/util';
+import { requestData } from '../../store/modules/request';
+
+export default {
+  name: 'SubmissionComment',
+  components: { Spinner },
+  mixins: [request()],
+  props: {
+    projectId: {
+      type: String,
+      required: true
+    },
+    xmlFormId: {
+      type: String,
+      required: true
+    },
+    instanceId: {
+      type: String,
+      required: true
+    },
+    feed: Array
+  },
+  data() {
+    return {
+      awaitingResponse: false,
+      body: ''
+    };
+  },
+  computed: {
+    ...requestData(['currentUser']),
+    editWithoutComment() {
+      if (this.feed == null) return false;
+      for (const entry of this.feed) {
+        if (entry.actorId === this.currentUser.id) {
+          if (entry.body != null) return false;
+          if (entry.action === 'submission.update.version') return true;
+        }
+      }
+      return false;
+    }
+  },
+  methods: {
+    submit() {
+      this.request({
+        method: 'POST',
+        url: apiPaths.submissionComments(
+          this.projectId,
+          this.xmlFormId,
+          this.instanceId
+        ),
+        data: { body: this.body }
+      })
+        .then(() => {
+          this.$emit('success');
+          this.body = '';
+        })
+        .catch(noop);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/mixins';
+
+#submission-comment {
+  margin-bottom: 15px;
+
+  [role="alert"] {
+    background-color: $color-action-foreground;
+    color: #fff;
+    font-size: 18px;
+    padding: 15px;
+
+    .icon-pencil { margin-right: 10px; }
+  }
+
+  .form-group {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  .btn { float: right; }
+}
+
+#submission-comment-actions {
+  @include clearfix;
+  margin-top: 5px;
+}
+</style>
+
+<i18n lang="json5">
+{
+  "en": {
+    "editWithoutComment": "You have made edits to this data. Please describe the changes you made."
+  }
+}
+</i18n>
diff --git a/src/components/submission/feed-entry.vue b/src/components/submission/feed-entry.vue
new file mode 100644
index 000000000..b092eb393
--- /dev/null
+++ b/src/components/submission/feed-entry.vue
@@ -0,0 +1,209 @@
+<!--
+Copyright 2021 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div class="submission-feed-entry">
+    <div class="heading">
+      <date-time :iso="entry.loggedAt != null ? entry.loggedAt : entry.createdAt"/>
+      <div class="title">
+        <template v-if="entry.action === 'submission.create'">
+          <span class="icon-cloud-upload"></span>
+          <i18n :tag="false" path="title.create">
+            <template #name><actor-link :actor="entry.actor"/></template>
+          </i18n>
+        </template>
+        <template v-else-if="updateOrEdit">
+          <i18n :tag="false"
+            :path="`title.updateReviewState.${reviewState}.full`">
+            <template #reviewState>
+              <span class="review-state" :class="reviewState">
+                <span :class="reviewStateIcon(reviewState)"></span>
+                <span>{{ $t(`title.updateReviewState.${reviewState}.reviewState`) }}</span>
+              </span>
+            </template>
+            <template #name><actor-link :actor="entry.actor"/></template>
+          </i18n>
+        </template>
+        <template v-else>
+          <span class="icon-comment"></span>
+          <i18n :tag="false" path="title.comment">
+            <template #name><actor-link :actor="entry.actor"/></template>
+          </i18n>
+        </template>
+      </div>
+    </div>
+    <div v-if="comment != null" class="body">{{ comment }}</div>
+  </div>
+</template>
+
+<script>
+import ActorLink from '../actor-link.vue';
+import DateTime from '../date-time.vue';
+
+import reviewState from '../../mixins/review-state';
+
+export default {
+  name: 'SubmissionFeedEntry',
+  components: { ActorLink, DateTime },
+  mixins: [reviewState()],
+  props: {
+    entry: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    updateOrEdit() {
+      return this.entry.action === 'submission.update' ||
+        this.entry.action === 'submission.update.version';
+    },
+    reviewState() {
+      return this.entry.action === 'submission.update'
+        ? this.entry.details.reviewState
+        : 'edited';
+    },
+    comment() {
+      return this.entry.notes != null ? this.entry.notes : this.entry.body;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/mixins';
+
+.submission-feed-entry {
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.09);
+  margin-bottom: 20px;
+
+  .heading, .body { padding: 10px; }
+  .heading { background-color: #fff; }
+
+  time {
+    float: right;
+    font-size: 16px;
+    color: #666;
+  }
+
+  .title {
+    @include text-overflow-ellipsis;
+    font-size: 18px;
+    font-weight: bold;
+    letter-spacing: -0.02em;
+    width: 70%;
+  }
+
+  .icon-comments, .icon-comment { margin-right: $margin-right-icon; }
+  .icon-cloud-upload { margin-right: #{$margin-right-icon - 1px}; }
+  .icon-dot-circle-o, .icon-pencil, .icon-check-circle, .icon-times-circle {
+    margin-left: 1px;
+    margin-right: #{$margin-right-icon + 2px};
+  }
+
+  .icon-cloud-upload, .icon-comment { color: #bbb; }
+  .review-state {
+    color: #999;
+    &.hasIssues { color: $color-warning; }
+    &.edited { color: #666; }
+    &.approved { color: $color-success; }
+    &.rejected { color: $color-danger; }
+  }
+
+  .actor-link { font-weight: normal; }
+
+  .body {
+    overflow-wrap: break-word;
+    white-space: pre-line;
+  }
+}
+</style>
+
+<i18n lang="json5">
+{
+  "en": {
+    "title": {
+      /* This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the word "Submitted", so it is essential for "Submitted" to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:
+
+Submitted by {name}
+
+you could split it into:
+
+Submitted • {name} */
+      "create": "Submitted by {name}",
+      "updateReviewState": {
+        "null": {
+          /* This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:
+
+{reviewState} per {name}
+
+you could split it into:
+
+{reviewState} • {name} */
+          "full": "{reviewState} per {name}",
+          "reviewState": "Received"
+        },
+        "hasIssues": {
+          /* This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:
+
+{reviewState} per {name}
+
+you could split it into:
+
+{reviewState} • {name} */
+          "full": "{reviewState} per {name}",
+          "reviewState": "Has Issues"
+        },
+        "edited": {
+          /* This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:
+
+{reviewState} by {name}
+
+you could split it into:
+
+{reviewState} • {name} */
+          "full": "{reviewState} by {name}",
+          "reviewState": "Edited"
+        },
+        "approved": {
+          /* This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:
+
+{reviewState} by {name}
+
+you could split it into:
+
+{reviewState} • {name} */
+          "full": "{reviewState} by {name}",
+          "reviewState": "Approved"
+        },
+        "rejected": {
+          /* This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:
+
+{reviewState} by {name}
+
+you could split it into:
+
+{reviewState} • {name} */
+          "full": "{reviewState} by {name}",
+          "reviewState": "Rejected"
+        }
+      },
+      /* This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the word "Comment", so it is essential for "Comment" to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:
+
+Comment by {name}
+
+you could split it into:
+
+Comment • {name} */
+      "comment": "Comment by {name}"
+    }
+  }
+}
+</i18n>
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index c961eba5a..90895ca2f 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -21,7 +21,7 @@ except according to the terms contained in the LICENSE file.
     <td><date-time :iso="submission.__system.submissionDate"/></td>
     <td v-if="!draft" class="state-and-actions">
       <span class="state"><span :class="stateIcon"></span>{{ stateText }}</span>
-      <span v-if="submission.__system.edits != null" class="edits">
+      <span v-if="submission.__system.edits !== 0" class="edits">
         <span class="icon-pencil"></span>
         <span>{{ $n(submission.__system.edits, 'default') }}</span>
       </span>
@@ -51,18 +51,13 @@ except according to the terms contained in the LICENSE file.
 <script>
 import DateTime from '../date-time.vue';
 
+import reviewState from '../../mixins/review-state';
 import { apiPaths } from '../../util/request';
 
-const iconsByReviewState = {
-  hasIssues: 'icon-comments',
-  needsReview: 'icon-eye',
-  approved: 'icon-check-circle',
-  rejected: 'icon-times-circle'
-};
-
 export default {
   name: 'SubmissionMetadataRow',
   components: { DateTime },
+  mixins: [reviewState()],
   props: {
     projectId: {
       type: String,
@@ -84,25 +79,20 @@ export default {
     canUpdate: Boolean
   },
   computed: {
+    missingMedia() {
+      const { __system } = this.submission;
+      return __system.reviewState == null &&
+        __system.attachmentsPresent !== __system.attachmentsExpected;
+    },
     stateIcon() {
-      const { reviewState } = this.submission.__system;
-      if (reviewState == null) {
-        const { attachmentsPresent, attachmentsExpected } = this.submission.__system;
-        return attachmentsPresent !== attachmentsExpected
-          ? 'icon-circle-o'
-          : 'icon-dot-circle-o';
-      }
-      return iconsByReviewState[reviewState];
+      return this.missingMedia
+        ? 'icon-circle-o'
+        : this.reviewStateIcon(this.submission.__system.reviewState);
     },
     stateText() {
-      const { reviewState } = this.submission.__system;
-      if (reviewState == null) {
-        const { attachmentsPresent, attachmentsExpected } = this.submission.__system;
-        return attachmentsPresent !== attachmentsExpected
-          ? this.$t('submission.missingMedia')
-          : this.$t('reviewState.received');
-      }
-      return this.$t(`reviewState.${reviewState}`);
+      return this.missingMedia
+        ? this.$t('submission.missingMedia')
+        : this.$t(`reviewState.${this.submission.__system.reviewState}`);
     },
     submissionPath() {
       const encodedFormId = encodeURIComponent(this.xmlFormId);
@@ -117,9 +107,8 @@ export default {
       );
     },
     editText() {
-      const { edits } = this.submission.__system;
       return this.$t('submission.action.edit', {
-        count: this.$n(edits != null ? edits : 0, 'default')
+        count: this.$n(this.submission.__system.edits, 'default')
       });
     }
   }
@@ -153,19 +142,19 @@ export default {
     // Ensure that there is space for the edit count and angle icon if the
     // column exceeds its min width.
     margin-right: #{$edits-and-angle-width + 15px};
-  }
 
-  .icon-comments, .icon-eye { margin-right: $margin-right-icon; }
-  .icon-circle-o, .icon-dot-circle-o, .icon-check-circle, .icon-times-circle {
-    margin-left: 1px;
-    margin-right: #{$margin-right-icon + 1px};
-  }
+    .icon-comments { margin-right: $margin-right-icon; }
+    .icon-circle-o, .icon-dot-circle-o, .icon-pencil, .icon-check-circle, .icon-times-circle {
+      margin-left: 1px;
+      margin-right: #{$margin-right-icon + 1px};
+    }
 
-  .icon-circle-o { color: $color-warning; }
-  .icon-dot-circle-o { color: #999; }
-  .icon-comments, .icon-eye { color: $color-warning; }
-  .icon-check-circle { color: $color-success; }
-  .icon-times-circle { color: $color-danger; }
+    .icon-circle-o, .icon-comments { color: $color-warning; }
+    .icon-dot-circle-o { color: #999; }
+    .icon-pencil { color: #777; }
+    .icon-check-circle { color: $color-success; }
+    .icon-times-circle { color: $color-danger; }
+  }
 
   .edits {
     color: #777;
@@ -173,8 +162,9 @@ export default {
     // aligned across rows.
     left: calc(100% - #{$edits-and-angle-width + $padding-right-table-data});
     position: absolute;
+
+    .icon-pencil { margin-right: 5px; }
   }
-  .icon-pencil { margin-right: 5px; }
 
   .icon-angle-right {
     bottom: #{$padding-right-table-data + 1px};
@@ -187,6 +177,8 @@ export default {
   }
 
   .btn-group {
+    // Setting the background color in case the edit button is disabled.
+    background-color: $color-page-background;
     left: -1000px;
     position: absolute;
     top: 4px;
diff --git a/src/components/submission/show.vue b/src/components/submission/show.vue
index ae6c27702..09d67e235 100644
--- a/src/components/submission/show.vue
+++ b/src/components/submission/show.vue
@@ -20,15 +20,16 @@ except according to the terms contained in the LICENSE file.
     </page-head>
     <page-body>
       <loading :state="initiallyLoading"/>
-      <div v-show="dataExists">
-        <div class="row">
-          <div class="col-xs-7">
-            <submission-basic-details v-if="submission != null"/>
-          </div>
+      <div v-show="dataExists" class="row">
+        <div class="col-xs-4">
+          <submission-basic-details v-if="submission != null"/>
+        </div>
+        <div class="col-xs-8">
+          <submission-activity :project-id="projectId" :xml-form-id="xmlFormId"
+            :instance-id="instanceId"
+            @update-review-state="showModal('updateReviewState')"
+            @comment="fetchActivityData"/>
         </div>
-        <submission-audit-list :project-id="projectId" :xml-form-id="xmlFormId"
-          :instance-id="instanceId"
-          @update-review-state="showModal('updateReviewState')"/>
       </div>
     </page-body>
     <submission-update-review-state v-if="submission != null"
@@ -43,7 +44,7 @@ import Loading from '../loading.vue';
 import PageBack from '../page/back.vue';
 import PageBody from '../page/body.vue';
 import PageHead from '../page/head.vue';
-import SubmissionAuditList from './audit/list.vue';
+import SubmissionActivity from './activity.vue';
 import SubmissionBasicDetails from './basic-details.vue';
 import SubmissionUpdateReviewState from './update-review-state.vue';
 
@@ -61,7 +62,7 @@ export default {
     PageBack,
     PageBody,
     PageHead,
-    SubmissionAuditList,
+    SubmissionActivity,
     SubmissionBasicDetails,
     SubmissionUpdateReviewState
   },
@@ -101,18 +102,33 @@ export default {
   },
   created() {
     this.fetchData();
+    document.body.classList.add('scroll');
+  },
+  beforeDestroy() {
+    document.body.classList.remove('scroll');
   },
   methods: {
-    fetchAudits() {
-      this.$store.dispatch('get', [{
-        key: 'audits',
-        url: apiPaths.submissionAudits(
-          this.projectId,
-          this.xmlFormId,
-          this.instanceId
-        ),
-        extended: true
-      }]).catch(noop);
+    fetchActivityData() {
+      this.$store.dispatch('get', [
+        {
+          key: 'audits',
+          url: apiPaths.submissionAudits(
+            this.projectId,
+            this.xmlFormId,
+            this.instanceId
+          ),
+          extended: true
+        },
+        {
+          key: 'comments',
+          url: apiPaths.submissionComments(
+            this.projectId,
+            this.xmlFormId,
+            this.instanceId
+          ),
+          extended: true
+        }
+      ]).catch(noop);
     },
     fetchData() {
       // We do not reconcile project.lastSubmission and
@@ -133,10 +149,10 @@ export default {
           )
         }
       ]).catch(noop);
-      this.fetchAudits();
+      this.fetchActivityData();
     },
     afterUpdateReviewState(reviewState) {
-      this.fetchAudits();
+      this.fetchActivityData();
       this.hideModal('updateReviewState');
       this.$alert().success(this.$t('alert.updateReviewState'));
       this.$store.commit('setData', {
diff --git a/src/components/submission/update-review-state.vue b/src/components/submission/update-review-state.vue
index 17330ca3a..a967bf67d 100644
--- a/src/components/submission/update-review-state.vue
+++ b/src/components/submission/update-review-state.vue
@@ -19,28 +19,18 @@ except according to the terms contained in the LICENSE file.
         <div class="row">
           <div class="col-xs-4">
             <div class="radio">
-              <label>
-                <input v-model="reviewState" type="radio" value="approved">
-                <span class="icon-check-circle"></span>{{ $t('reviewState.approved') }}
-              </label>
-              <label>
-                <input v-model="reviewState" type="radio" value="hasIssues">
-                <span class="icon-comments"></span>{{ $t('reviewState.hasIssues') }}
-              </label>
-              <label>
-                <input v-model="reviewState" type="radio" value="needsReview">
-                <span class="icon-eye"></span>{{ $t('reviewState.needsReview') }}
-              </label>
-              <label>
-                <input v-model="reviewState" type="radio" value="rejected">
-                <span class="icon-times-circle"></span>{{ $t('reviewState.rejected') }}
+              <label v-for="reviewState of selectableStates" :key="reviewState">
+                <input v-model="selectedState" type="radio"
+                  :value="reviewState">
+                <span :class="reviewStateIcon(reviewState)"></span>
+                <span>{{ $t(`reviewState.${reviewState}`) }}</span>
               </label>
             </div>
           </div>
           <div class="col-xs-8">
             <label class="form-group">
               <textarea v-model.trim="notes" class="form-control"
-                :placeholder="$t('field.notes')" rows="4">
+                :placeholder="$t('field.notes')" rows="3">
               </textarea>
               <span class="form-label">{{ $t('field.notes') }}</span>
             </label>
@@ -66,14 +56,17 @@ import Modal from '../modal.vue';
 import Spinner from '../spinner.vue';
 
 import request from '../../mixins/request';
+import reviewState from '../../mixins/review-state';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
 import { requestData } from '../../store/modules/request';
 
+const selectableStates = ['approved', 'hasIssues', 'rejected'];
+
 export default {
   name: 'SubmissionUpdateReviewState',
   components: { Modal, Spinner },
-  mixins: [request()],
+  mixins: [request(), reviewState()],
   props: {
     state: Boolean,
     projectId: {
@@ -90,21 +83,31 @@ export default {
     }
   },
   data() {
-    const { reviewState } = this.$store.state.request.data.submission.__system;
+    const { submission } = this.$store.state.request.data;
+    const currentState = submission.__system.reviewState;
     return {
       awaitingResponse: false,
-      reviewState: reviewState != null ? reviewState : 'approved',
+      selectedState: selectableStates.includes(currentState)
+        ? currentState
+        : 'approved',
       notes: ''
     };
   },
-  // The component assumes that this data will exist when the component is
-  // created.
-  computed: requestData(['submission']),
+  computed: {
+    // The component assumes that this data will exist when the component is
+    // created.
+    ...requestData(['submission']),
+    selectableStates() {
+      return selectableStates;
+    }
+  },
   watch: {
     state(state) {
       if (!state) {
-        const { reviewState } = this.submission.__system;
-        this.reviewState = reviewState != null ? reviewState : 'approved';
+        const currentState = this.submission.__system.reviewState;
+        this.selectedState = selectableStates.includes(currentState)
+          ? currentState
+          : 'approved';
         this.notes = '';
       }
     }
@@ -121,11 +124,11 @@ export default {
           this.xmlFormId,
           this.instanceId
         ),
-        data: { reviewState: this.reviewState },
+        data: { reviewState: this.selectedState },
         headers
       })
         .then(() => {
-          this.$emit('success', this.reviewState);
+          this.$emit('success', this.selectedState);
         })
         .catch(noop);
     }
@@ -141,7 +144,7 @@ export default {
   .radio { margin-top: 0; }
 
   $margin-left-icon: 2px;
-  .icon-comments, .icon-eye {
+  .icon-comments {
     margin-left: $margin-left-icon;
     margin-right: $margin-right-icon;
   }
@@ -150,8 +153,8 @@ export default {
     margin-right: #{$margin-right-icon + 1px};
   }
 
-  .icon-comments, .icon-eye { color: $color-warning; }
   .icon-check-circle { color: $color-success; }
+  .icon-comments { color: $color-warning; }
   .icon-times-circle { color: $color-danger; }
 }
 </style>
diff --git a/src/locales/en.json5 b/src/locales/en.json5
index aba3b5bfb..c442e3fc5 100644
--- a/src/locales/en.json5
+++ b/src/locales/en.json5
@@ -61,9 +61,10 @@
   // This is a possible Review State for a Submission.
   "reviewState": {
     "received": "Received",
-    "approved": "Approved",
+    "null": "@:reviewState.received",
     "hasIssues": "Has issues",
-    "needsReview": "Needs review",
+    "edited": "Edited",
+    "approved": "Approved",
     "rejected": "Rejected"
   },
   "audit": {
@@ -152,6 +153,7 @@
     "cancel": "Cancel",
     "clear": "Clear",
     "close": "Close",
+    "comment": "Comment",
     "create": "Create",
     // This is the text of a button that is used to fill out a new Submission.
     // It is shown next to a heading whose text is "Submissions".
@@ -171,12 +173,13 @@
     // This is the text of a button that refreshes data.
     "refresh": "Refresh",
     "resetPassword": "Reset password",
-    "claimAccount": "Claim account",
+    "review": "Review",
     "save": "Save",
     "update": "Update",
     "yesProceed": "Yes, proceed"
   },
   "field": {
+    "comment": "Leave a comment…",
     "dateRange": "Date range",
     "displayName": "Display name",
     "email": "Email address",
@@ -261,6 +264,8 @@
     "encryptionMessage": "Data preview is not available due to encryption."
   },
   "common": {
+    // This is a title shown above a section of the page.
+    "activity": "Activity",
     // This is shown in a dropdown that allows the user to filter to only show
     // data for particular users.
     "anybody": "(Anybody)",
diff --git a/src/mixins/review-state.js b/src/mixins/review-state.js
new file mode 100644
index 000000000..0713d4ee7
--- /dev/null
+++ b/src/mixins/review-state.js
@@ -0,0 +1,35 @@
+/*
+Copyright 2021 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+*/
+
+/*
+This mixin includes methods related to submission review state.
+
+The mixin factory does not take any options.
+*/
+
+const icons = {
+  hasIssues: 'icon-comments',
+  edited: 'icon-pencil',
+  approved: 'icon-check-circle',
+  rejected: 'icon-times-circle'
+};
+
+// @vue/component
+const mixin = {
+  methods: {
+    reviewStateIcon(reviewState) {
+      return reviewState == null ? 'icon-dot-circle-o' : icons[reviewState];
+    }
+  }
+};
+
+export default () => mixin;
diff --git a/src/store/modules/request/keys.js b/src/store/modules/request/keys.js
index 86bc77dab..2c456ceab 100644
--- a/src/store/modules/request/keys.js
+++ b/src/store/modules/request/keys.js
@@ -52,6 +52,7 @@ export const keys = [
   'submitters',
   'submission',
   'audits',
+  'comments',
   'publicLinks',
   'fieldKeys',
 
diff --git a/src/util/request.js b/src/util/request.js
index 86e9b2492..bf40700db 100644
--- a/src/util/request.js
+++ b/src/util/request.js
@@ -113,6 +113,7 @@ export const apiPaths = {
     return `/v1/projects/${projectId}/forms/${encodedFormId}${draftPath}/submissions/${encodedInstanceId}/attachments/${encodedName}`;
   },
   submissionAudits: submissionPath('/audits'),
+  submissionComments: submissionPath('/comments'),
   publicLinks: formPath('/public-links'),
   fieldKeys: projectPath('/app-users'),
   serverUrlForFieldKey: (token, projectId) =>
diff --git a/test/components/actor-link.spec.js b/test/components/actor-link.spec.js
new file mode 100644
index 000000000..73848174e
--- /dev/null
+++ b/test/components/actor-link.spec.js
@@ -0,0 +1,36 @@
+import ActorLink from '../../src/components/actor-link.vue';
+import LinkIfCan from '../../src/components/link-if-can.vue';
+
+import testData from '../data';
+import { mockLogin } from '../util/session';
+import { mount } from '../util/lifecycle';
+
+describe('ActorLink', () => {
+  beforeEach(() => {
+    mockLogin({ displayName: 'Alice' });
+  });
+
+  it('renders a LinkIfCan component if the actor is a user', () => {
+    const component = mount(ActorLink, {
+      propsData: { actor: testData.extendedUsers.first() },
+      router: true
+    });
+    const linkIfCan = component.first(LinkIfCan);
+    linkIfCan.getProp('to').should.equal('/users/1/edit');
+    linkIfCan.text().should.equal('Alice');
+    linkIfCan.getAttribute('title').should.equal('Alice');
+  });
+
+  it('renders a span if the actor is not a user', () => {
+    const actor = testData.extendedFieldKeys
+      .createPast(1, { displayName: 'My App User' })
+      .last();
+    const component = mount(ActorLink, {
+      propsData: { actor }
+    });
+    component.find(LinkIfCan).length.should.equal(0);
+    const span = component.first('span');
+    span.text().should.equal('My App User');
+    span.getAttribute('title').should.equal('My App User');
+  });
+});
diff --git a/test/components/audit/table.spec.js b/test/components/audit/table.spec.js
index f528d316c..5178f4992 100644
--- a/test/components/audit/table.spec.js
+++ b/test/components/audit/table.spec.js
@@ -1,3 +1,4 @@
+import ActorLink from '../../../src/components/actor-link.vue';
 import AuditRow from '../../../src/components/audit/row.vue';
 import DateTime from '../../../src/components/date-time.vue';
 import Selectable from '../../../src/components/selectable.vue';
@@ -291,7 +292,7 @@ describe('AuditTable', () => {
   });
 
   describe('initiator', () => {
-    it('renders correctly for an audit whose actor is a user', async () => {
+    it('renders correctly for an audit with an actor', async () => {
       testData.extendedAudits.createPast(1, {
         actor: testData.extendedUsers.first(),
         action: 'user.create',
@@ -300,22 +301,8 @@ describe('AuditTable', () => {
           .last())
       });
       const component = await load('/system/audits', { root: false });
-      const a = component.first('.audit-row .initiator a');
-      a.text().trim().should.equal('User 1');
-      a.getAttribute('title').should.equal('User 1');
-      a.getAttribute('href').should.equal('#/users/1/edit');
-    });
-
-    it('renders correctly for an audit whose actor is not a user', async () => {
-      testData.extendedAudits.createPast(1, {
-        actor: { type: 'singleUse', displayName: 'Reset token for 1' },
-        action: 'user.update',
-        actee: testData.toActor(testData.extendedUsers.first())
-      });
-      const component = await load('/system/audits', { root: false });
-      const span = component.first('.audit-row .initiator span');
-      span.text().should.equal('Reset token for 1');
-      span.getAttribute('title').should.equal('Reset token for 1');
+      const actorLink = component.first(AuditRow).first(ActorLink);
+      actorLink.getProp('actor').displayName.should.equal('User 1');
     });
 
     it('renders correctly for an audit without an actor', async () => {
diff --git a/test/components/date-time.spec.js b/test/components/date-time.spec.js
index 9dc3510da..6e4921797 100644
--- a/test/components/date-time.spec.js
+++ b/test/components/date-time.spec.js
@@ -1,5 +1,7 @@
 import DateTime from '../../src/components/date-time.vue';
+
 import { loadLocale } from '../../src/util/i18n';
+
 import { mount } from '../util/lifecycle';
 import { setLuxon } from '../util/date-time';
 
@@ -17,7 +19,15 @@ describe('DateTime', () => {
     });
   }
 
-  it('shows the correct title', () => {
+  it('renders a time element', () => {
+    const component = mount(DateTime, {
+      propsData: { iso: '2020-01-01T12:34:56Z' }
+    });
+    component.vm.$el.tagName.should.equal('TIME');
+    component.getAttribute('datetime').should.equal('2020-01-01T12:34:56Z');
+  });
+
+  it('sets the correct title attribute', () => {
     const component = mount(DateTime, {
       propsData: { iso: '2020-01-01T12:34:56Z' }
     });
@@ -28,35 +38,47 @@ describe('DateTime', () => {
     const component = mount(DateTime, {
       propsData: { iso: '2020-01-01T12:34:56Z' }
     });
-    component.text().trim().should.equal('today 12:34');
+    component.text().should.equal('today 12:34');
   });
 
   describe('iso prop is null', () => {
-    it('renders correctly if the prop blank does not exist', () => {
+    it('renders a span element', () => {
+      const component = mount(DateTime, {
+        propsData: { iso: null }
+      });
+      component.vm.$el.tagName.should.equal('SPAN');
+    });
+
+    it('does not have a title attribute', () => {
       const component = mount(DateTime, {
         propsData: { iso: null }
       });
-      component.text().trim().should.equal('');
       component.hasAttribute('title').should.be.false();
     });
 
-    it('renders correctly if the prop blank exists', () => {
+    it('shows the correct text if the prop blank exists', () => {
       const component = mount(DateTime, {
         propsData: { iso: null, blank: '(none)' }
       });
-      component.text().trim().should.equal('(none)');
-      component.hasAttribute('title').should.be.false();
+      component.text().should.equal('(none)');
+    });
+
+    it('renders correctly if the prop blank does not exist', () => {
+      const component = mount(DateTime, {
+        propsData: { iso: null }
+      });
+      component.text().should.equal('');
     });
   });
 
-  it('re-evaluates dateTime after a locale change', () => {
+  it('updates the text after a locale change', () => {
     const component = mount(DateTime, {
       propsData: { iso: '2020-01-01T12:34:56Z' }
     });
-    component.vm.dateTime.locale.should.equal('en');
+    component.text().should.equal('today 12:34');
     return loadLocale('es')
       .then(() => {
-        component.vm.dateTime.locale.should.equal('es');
+        component.text().should.equal('hoy 12:34');
       })
       .finally(() => loadLocale('en'));
   });
diff --git a/test/components/submission/audit/list.spec.js b/test/components/submission/activity.spec.js
similarity index 63%
rename from test/components/submission/audit/list.spec.js
rename to test/components/submission/activity.spec.js
index 7de086e3d..2dede70b3 100644
--- a/test/components/submission/audit/list.spec.js
+++ b/test/components/submission/activity.spec.js
@@ -1,27 +1,30 @@
-import SubmissionAuditList from '../../../../src/components/submission/audit/list.vue';
+import SubmissionActivity from '../../../src/components/submission/activity.vue';
+import SubmissionFeedEntry from '../../../src/components/submission/feed-entry.vue';
 
-import testData from '../../../data';
-import { load } from '../../../util/http';
-import { mockLogin } from '../../../util/session';
-import { mount } from '../../../util/lifecycle';
+import testData from '../../data';
+import { load } from '../../util/http';
+import { mockLogin } from '../../util/session';
+import { mount } from '../../util/lifecycle';
+import { wait } from '../../util/util';
 
 const mountComponent = () => {
   const project = testData.extendedProjects.last();
   const form = testData.extendedForms.last();
   const submission = testData.submissionOData();
   const audits = testData.extendedAudits.sorted();
-  return mount(SubmissionAuditList, {
+  const comments = testData.extendedComments.sorted();
+  return mount(SubmissionActivity, {
     propsData: {
       projectId: '1',
       xmlFormId: form.xmlFormId,
       instanceId: submission.value[0].__id
     },
-    requestData: { project, submission, audits },
+    requestData: { project, submission, audits, comments },
     router: true
   });
 };
 
-describe('SubmissionAuditList', () => {
+describe('SubmissionActivity', () => {
   it('sends the correct initial requests', () => {
     mockLogin();
     testData.extendedForms.createPast(1, { xmlFormId: 'a b', submissions: 1 });
@@ -40,20 +43,23 @@ describe('SubmissionAuditList', () => {
         } else if (index === 2) {
           url.should.equal("/v1/projects/1/forms/a%20b/submissions/'c%20d'/audits");
           headers['X-Extended-Metadata'].should.equal('true');
+        } else if (index === 3) {
+          url.should.equal("/v1/projects/1/forms/a%20b/submissions/'c%20d'/comments");
+          headers['X-Extended-Metadata'].should.equal('true');
         }
       })
       .afterResponses(() => {
-        count.should.equal(3);
+        count.should.equal(4);
       });
   });
 
-  describe('"Update State" button', () => {
+  describe('review button', () => {
     it('renders the button if the user can submission.update', () => {
       mockLogin({ role: 'admin' });
       testData.extendedSubmissions.createPast(1);
       testData.extendedAudits.createPast(1, { action: 'submission.create' });
       const component = mountComponent();
-      component.find('#submission-audit-list-update-review-state-button').length.should.equal(1);
+      component.find('#submission-activity-update-review-state-button').length.should.equal(1);
     });
 
     it('does not render button if user cannot submission.update', () => {
@@ -62,7 +68,7 @@ describe('SubmissionAuditList', () => {
       testData.extendedSubmissions.createPast(1);
       testData.extendedAudits.createPast(1, { action: 'submission.create' });
       const component = mountComponent();
-      component.find('#submission-audit-list-update-review-state-button').length.should.equal(0);
+      component.find('#submission-activity-update-review-state-button').length.should.equal(0);
     });
   });
 
@@ -72,7 +78,7 @@ describe('SubmissionAuditList', () => {
       testData.extendedSubmissions.createPast(1);
       testData.extendedAudits.createPast(1, { action: 'submission.create' });
       const component = mountComponent();
-      component.find('#submission-audit-list-edit-button').length.should.equal(1);
+      component.find('#submission-activity-edit-button').length.should.equal(1);
     });
 
     it('does not render button if user cannot submission.update', () => {
@@ -81,7 +87,7 @@ describe('SubmissionAuditList', () => {
       testData.extendedSubmissions.createPast(1);
       testData.extendedAudits.createPast(1, { action: 'submission.create' });
       const component = mountComponent();
-      component.find('#submission-audit-list-edit-button').length.should.equal(0);
+      component.find('#submission-activity-edit-button').length.should.equal(0);
     });
 
     it('disables the button if the submission is encrypted', () => {
@@ -89,7 +95,7 @@ describe('SubmissionAuditList', () => {
       testData.extendedSubmissions.createPast(1, { status: 'notDecrypted' });
       testData.extendedAudits.createPast(1, { action: 'submission.create' });
       const component = mountComponent();
-      const btn = component.first('#submission-audit-list-edit-button');
+      const btn = component.first('#submission-activity-edit-button');
       btn.hasAttribute('disabled').should.be.true();
       btn.getAttribute('title').should.equal('You cannot edit encrypted Submissions.');
     });
@@ -103,9 +109,27 @@ describe('SubmissionAuditList', () => {
       testData.extendedSubmissions.createPast(1, { instanceId: 'c d' });
       testData.extendedAudits.createPast(1, { action: 'submission.create' });
       const component = mountComponent();
-      const btn = component.first('#submission-audit-list-edit-button');
+      const btn = component.first('#submission-activity-edit-button');
       const href = btn.getAttribute('href');
       href.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/edit');
     });
   });
+
+  it('sorts the feed', async () => {
+    mockLogin();
+    testData.extendedSubmissions.createNew();
+    testData.extendedAudits.createNew({ action: 'submission.create' });
+    await wait(1);
+    testData.extendedComments.createNew({ body: 'Comment 1' });
+    await wait(1);
+    testData.extendedAudits.createNew({ action: 'submission.update.version' });
+    await wait(1);
+    testData.extendedComments.createNew({ body: 'Comment 2' });
+    const entries = mountComponent().find(SubmissionFeedEntry);
+    entries.length.should.equal(4);
+    entries[0].getProp('entry').body.should.equal('Comment 2');
+    entries[1].getProp('entry').action.should.equal('submission.update.version');
+    entries[2].getProp('entry').body.should.equal('Comment 1');
+    entries[3].getProp('entry').action.should.equal('submission.create');
+  });
 });
diff --git a/test/components/submission/audit/row.spec.js b/test/components/submission/audit/row.spec.js
deleted file mode 100644
index b1de74f29..000000000
--- a/test/components/submission/audit/row.spec.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import DateTime from '../../../../src/components/date-time.vue';
-import SubmissionAuditRow from '../../../../src/components/submission/audit/row.vue';
-
-import Audit from '../../../../src/presenters/audit';
-
-import testData from '../../../data';
-import { mockLogin } from '../../../util/session';
-import { mount } from '../../../util/lifecycle';
-
-const mountComponent = () => mount(SubmissionAuditRow, {
-  propsData: { audit: new Audit(testData.extendedAudits.last()) }
-});
-
-describe('SubmissionAuditRow', () => {
-  beforeEach(() => {
-    mockLogin({ displayName: 'Alice' });
-    testData.extendedSubmissions.createPast(1);
-  });
-
-  it('shows loggedAt', () => {
-    const { loggedAt } = testData.extendedAudits
-      .createPast(1, { action: 'submission.create' })
-      .last();
-    mountComponent().first(DateTime).getProp('iso').should.equal(loggedAt);
-  });
-
-  it('shows the actor', () => {
-    testData.extendedAudits.createPast(1, { action: 'submission.create' });
-    const span = mountComponent().first('.actor span');
-    span.text().should.equal('Alice');
-    span.getAttribute('title').should.equal('Alice');
-  });
-
-  describe('action column', () => {
-    it('renders correctly for submission.create', () => {
-      testData.extendedAudits.createPast(1, { action: 'submission.create' });
-      const action = mountComponent().first('.action');
-      action.find('.icon-cloud-upload').length.should.equal(1);
-      action.text().trim().should.equal('Submitted');
-    });
-
-    describe('submission.update of reviewState', () => {
-      it('renders correctly for null', () => {
-        testData.extendedAudits.createPast(1, {
-          action: 'submission.update',
-          details: { reviewState: null }
-        });
-        const action = mountComponent().first('.action');
-        action.find('.icon-dot-circle-o').length.should.equal(1);
-        action.text().trim().should.equal('Received');
-      });
-
-      it('renders correctly for hasIssues', () => {
-        testData.extendedAudits.createPast(1, {
-          action: 'submission.update',
-          details: { reviewState: 'hasIssues' }
-        });
-        const action = mountComponent().first('.action');
-        action.find('.icon-comments').length.should.equal(1);
-        action.text().trim().should.equal('Has issues');
-      });
-
-      it('renders correctly for needsReview', () => {
-        testData.extendedAudits.createPast(1, {
-          action: 'submission.update',
-          details: { reviewState: 'needsReview' }
-        });
-        const action = mountComponent().first('.action');
-        action.find('.icon-eye').length.should.equal(1);
-        action.text().trim().should.equal('Needs review');
-      });
-
-      it('renders correctly for approved', () => {
-        testData.extendedAudits.createPast(1, {
-          action: 'submission.update',
-          details: { reviewState: 'approved' }
-        });
-        const action = mountComponent().first('.action');
-        action.find('.icon-check-circle').length.should.equal(1);
-        action.text().trim().should.equal('Approved');
-      });
-
-      it('renders correctly for rejected', () => {
-        testData.extendedAudits.createPast(1, {
-          action: 'submission.update',
-          details: { reviewState: 'rejected' }
-        });
-        const action = mountComponent().first('.action');
-        action.find('.icon-times-circle').length.should.equal(1);
-        action.text().trim().should.equal('Rejected');
-      });
-    });
-
-    it('renders correctly for submission.update.version', () => {
-      testData.extendedAudits.createPast(1, {
-        action: 'submission.update.version'
-      });
-      const action = mountComponent().first('.action');
-      action.find('.icon-pencil').length.should.equal(1);
-      action.text().trim().should.equal('Edited');
-    });
-  });
-
-  it('shows notes', () => {
-    testData.extendedAudits.createPast(1, {
-      action: 'submission.update',
-      details: { reviewState: 'approved' },
-      notes: 'Some notes'
-    });
-    mountComponent().first('.notes').text().should.equal('Some notes');
-  });
-});
diff --git a/test/components/submission/basic-details.spec.js b/test/components/submission/basic-details.spec.js
index 1c16a63a5..95b64eb5d 100644
--- a/test/components/submission/basic-details.spec.js
+++ b/test/components/submission/basic-details.spec.js
@@ -1,5 +1,4 @@
 import DateTime from '../../../src/components/date-time.vue';
-import LinkIfCan from '../../../src/components/link-if-can.vue';
 import SubmissionBasicDetails from '../../../src/components/submission/basic-details.vue';
 
 import testData from '../../data';
@@ -27,10 +26,9 @@ describe('SubmissionBasicDetails', () => {
     testData.extendedSubmissions.createPast(1, {
       submitter: testData.extendedUsers.first()
     });
-    const link = mountComponent().first(LinkIfCan);
-    link.getProp('to').should.equal('/users/1/edit');
-    link.text().trim().should.equal('Alice');
-    link.getAttribute('title').should.equal('Alice');
+    const span = mountComponent().find('dd')[1].first('span');
+    span.text().should.equal('Alice');
+    span.getAttribute('title').should.equal('Alice');
   });
 
   it('shows the submission date', () => {
@@ -38,17 +36,59 @@ describe('SubmissionBasicDetails', () => {
     mountComponent().first(DateTime).getProp('iso').should.equal(createdAt);
   });
 
+  describe('review state', () => {
+    it('renders correctly for null', () => {
+      testData.extendedSubmissions.createPast(1, { reviewState: null });
+      const component = mountComponent();
+      const dd = component.first('#submission-basic-details-review-state');
+      dd.find('.icon-dot-circle-o').length.should.equal(1);
+      dd.text().should.equal('Received');
+    });
+
+    it('renders correctly for hasIssues', () => {
+      testData.extendedSubmissions.createPast(1, { reviewState: 'hasIssues' });
+      const component = mountComponent();
+      const dd = component.first('#submission-basic-details-review-state');
+      dd.find('.icon-comments').length.should.equal(1);
+      dd.text().should.equal('Has issues');
+    });
+
+    it('renders correctly for edited', () => {
+      testData.extendedSubmissions.createPast(1, { reviewState: 'edited' });
+      const component = mountComponent();
+      const dd = component.first('#submission-basic-details-review-state');
+      dd.find('.icon-pencil').length.should.equal(1);
+      dd.text().should.equal('Edited');
+    });
+
+    it('renders correctly for approved', () => {
+      testData.extendedSubmissions.createPast(1, { reviewState: 'approved' });
+      const component = mountComponent();
+      const dd = component.first('#submission-basic-details-review-state');
+      dd.find('.icon-check-circle').length.should.equal(1);
+      dd.text().should.equal('Approved');
+    });
+
+    it('renders correctly for rejected', () => {
+      testData.extendedSubmissions.createPast(1, { reviewState: 'rejected' });
+      const component = mountComponent();
+      const dd = component.first('#submission-basic-details-review-state');
+      dd.find('.icon-times-circle').length.should.equal(1);
+      dd.text().should.equal('Rejected');
+    });
+  });
+
   describe('device ID', () => {
     it('shows the device ID', () => {
       testData.extendedSubmissions.createPast(1, { deviceId: 'foo' });
-      const span = mountComponent().find('dd')[3].first('span');
+      const span = mountComponent().find('dd')[4].first('span');
       span.text().should.equal('foo');
       span.getAttribute('title').should.equal('foo');
     });
 
     it('does not render if there is not a device ID', () => {
       testData.extendedSubmissions.createPast(1, { deviceId: null });
-      mountComponent().find('dd').length.should.equal(3);
+      mountComponent().find('dd').length.should.equal(4);
     });
   });
 
@@ -58,7 +98,7 @@ describe('SubmissionBasicDetails', () => {
         attachmentsExpected: 3,
         attachmentsPresent: 2
       });
-      const text = mountComponent().find('dd')[3].first('span').text();
+      const text = mountComponent().find('dd')[4].first('span').text();
       text.should.equal('2 files / 3 expected');
     });
 
@@ -67,14 +107,14 @@ describe('SubmissionBasicDetails', () => {
         attachmentsExpected: 3,
         attachmentsPresent: 2
       });
-      const spans = mountComponent().find('dd')[3].find('span');
+      const spans = mountComponent().find('dd')[4].find('span');
       spans[1].hasClass('icon-exclamation-triangle').should.be.true();
       spans[2].text().should.equal('Missing media');
     });
 
     it('does not render if no attachments are expected', () => {
       testData.extendedSubmissions.createPast(1, { attachmentsExpected: 0 });
-      mountComponent().find('dd').length.should.equal(3);
+      mountComponent().find('dd').length.should.equal(4);
     });
   });
 });
diff --git a/test/components/submission/comment.spec.js b/test/components/submission/comment.spec.js
new file mode 100644
index 000000000..1a5856d65
--- /dev/null
+++ b/test/components/submission/comment.spec.js
@@ -0,0 +1,195 @@
+import SubmissionComment from '../../../src/components/submission/comment.vue';
+
+import testData from '../../data';
+import { load, mockHttp } from '../../util/http';
+import { mockLogin } from '../../util/session';
+import { mount } from '../../util/lifecycle';
+import { trigger } from '../../util/event';
+
+const mountOptions = (propsData) => ({
+  propsData: {
+    projectId: '1',
+    xmlFormId: testData.extendedForms.last().xmlFormId,
+    instanceId: testData.extendedSubmissions.last().instanceId,
+    feed: null,
+    ...propsData
+  }
+});
+const mountComponent = (propsData = undefined) =>
+  mount(SubmissionComment, mountOptions(propsData));
+const mockHttpForComponent = (propsData = undefined) =>
+  mockHttp().mount(SubmissionComment, mountOptions(propsData));
+
+describe('SubmissionComment', () => {
+  beforeEach(mockLogin);
+
+  describe('alert', () => {
+    beforeEach(() => {
+      testData.extendedSubmissions.createNew();
+    });
+
+    it('does not show the alert if the feed is loading', () => {
+      const component = mountComponent({ feed: null });
+      component.find('[role="alert"]').length.should.equal(0);
+    });
+
+    it('does not show the alert if the user did not make an edit', () => {
+      const user = testData.extendedUsers.createPast(1).last();
+      const component = mountComponent({
+        feed: [
+          testData.extendedAudits.createNew({ action: 'submission.create' }),
+          testData.extendedAudits.createNew({
+            actor: user,
+            action: 'submission.update.version'
+          })
+        ].reverse()
+      });
+      component.find('[role="alert"]').length.should.equal(0);
+    });
+
+    it('does not show the alert if the user commented after their edit', () => {
+      const component = mountComponent({
+        feed: [
+          testData.extendedAudits.createNew({ action: 'submission.create' }),
+          testData.extendedAudits.createNew({
+            action: 'submission.update.version'
+          }),
+          testData.extendedComments.createNew()
+        ].reverse()
+      });
+      component.find('[role="alert"]').length.should.equal(0);
+    });
+
+    it('shows the alert if the user did not comment', () => {
+      const component = mountComponent({
+        feed: [
+          testData.extendedAudits.createNew({ action: 'submission.create' }),
+          testData.extendedAudits.createNew({
+            action: 'submission.update.version'
+          })
+        ].reverse()
+      });
+      component.find('[role="alert"]').length.should.equal(1);
+    });
+
+    it('shows the alert if the user commented before their edit', () => {
+      const component = mountComponent({
+        feed: [
+          testData.extendedAudits.createNew({ action: 'submission.create' }),
+          testData.extendedComments.createNew(),
+          testData.extendedAudits.createNew({
+            action: 'submission.update.version'
+          })
+        ].reverse()
+      });
+      component.find('[role="alert"]').length.should.equal(1);
+    });
+
+    it('shows the alert if another user commented', () => {
+      const user = testData.extendedUsers.createPast(1).last();
+      const component = mountComponent({
+        feed: [
+          testData.extendedAudits.createNew({ action: 'submission.create' }),
+          testData.extendedAudits.createNew({
+            action: 'submission.update.version'
+          }),
+          testData.extendedComments.createNew({ actor: user })
+        ].reverse()
+      });
+      component.find('[role="alert"]').length.should.equal(1);
+    });
+  });
+
+  describe('visibility of actions', () => {
+    it('shows the actions if there is input', async () => {
+      testData.extendedSubmissions.createPast(1);
+      const component = mountComponent();
+      const actions = component.first('#submission-comment-actions');
+      actions.should.be.hidden();
+      const textarea = component.first('textarea');
+      await trigger.input(textarea, 'foo');
+      actions.should.be.visible();
+      await trigger.input(textarea, '');
+      actions.should.be.hidden();
+    });
+
+    it('shows the actions during the request', () => {
+      testData.extendedSubmissions.createPast(1);
+      return mockHttpForComponent()
+        .request(trigger.submit('form', [['textarea', 'foo']]))
+        .beforeAnyResponse(async (component) => {
+          await trigger.input(component, 'textarea', '');
+          component.first('#submission-comment-actions').should.be.visible();
+        })
+        .respondWithProblem();
+    });
+
+    it('shows the actions if the user did not comment after editing', () => {
+      testData.extendedSubmissions.createNew();
+      const component = mountComponent({
+        feed: [
+          testData.extendedAudits.createNew({ action: 'submission.create' }),
+          testData.extendedAudits.createNew({
+            action: 'submission.update.version'
+          })
+        ].reverse()
+      });
+      component.first('#submission-comment-actions').should.be.visible();
+    });
+  });
+
+  it('sends the correct request', () => {
+    testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
+    testData.extendedSubmissions.createPast(1, { instanceId: 'c d' });
+    return mockHttpForComponent()
+      .request(trigger.submit('form', [['textarea', 'foo']]))
+      .beforeEachResponse((_, { method, url, data }) => {
+        method.should.equal('POST');
+        url.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/comments');
+        data.should.eql({ body: 'foo' });
+      })
+      .respondWithProblem();
+  });
+
+  it('implements some standard button things', () => {
+    testData.extendedSubmissions.createPast(1);
+    return mockHttpForComponent().testStandardButton({
+      button: 'button[type="submit"]',
+      request: trigger.submit('form', [['textarea', 'foo']])
+    });
+  });
+
+  describe('after a successful response', () => {
+    const submit = () => {
+      testData.extendedForms.createPast(1, { xmlFormId: 'a b' });
+      testData.extendedSubmissions.createPast(1, { instanceId: 'c d' });
+      testData.extendedAudits.createPast(1, { action: 'submission.create' });
+      return load('/projects/1/forms/a%20b/submissions/c%20d', { root: false })
+        .complete()
+        .request(trigger.submit('#submission-comment', [['textarea', 'foo']]))
+        .respondWithData(() =>
+          testData.standardComments.createNew({ body: 'foo' }))
+        .respondWithData(() => testData.extendedAudits.sorted())
+        .respondWithData(() => testData.extendedComments.sorted());
+    };
+
+    it('sends the correct requests for activity data', () =>
+      submit().beforeEachResponse((_, { method, url, headers }, index) => {
+        if (index === 0) return;
+        method.should.equal('GET');
+        if (index === 1) {
+          url.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/audits');
+          headers['X-Extended-Metadata'].should.equal('true');
+        } else {
+          url.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/comments');
+          headers['X-Extended-Metadata'].should.equal('true');
+        }
+      }));
+
+    it('resets the field', async () => {
+      const component = await submit();
+      const { value } = component.first('#submission-comment textarea').element;
+      value.should.equal('');
+    });
+  });
+});
diff --git a/test/components/submission/feed-entry.spec.js b/test/components/submission/feed-entry.spec.js
new file mode 100644
index 000000000..96a52a90d
--- /dev/null
+++ b/test/components/submission/feed-entry.spec.js
@@ -0,0 +1,159 @@
+import ActorLink from '../../../src/components/actor-link.vue';
+import DateTime from '../../../src/components/date-time.vue';
+import SubmissionFeedEntry from '../../../src/components/submission/feed-entry.vue';
+
+import Audit from '../../../src/presenters/audit';
+
+import testData from '../../data';
+import { mockLogin } from '../../util/session';
+import { mount } from '../../util/lifecycle';
+
+const mountComponent = () => mount(SubmissionFeedEntry, {
+  propsData: {
+    entry: testData.extendedAudits.size !== 0
+      ? new Audit(testData.extendedAudits.last())
+      : testData.extendedComments.last()
+  },
+  router: true
+});
+
+describe('SubmissionFeedEntry', () => {
+  beforeEach(() => {
+    mockLogin({ displayName: 'Alice' });
+    testData.extendedSubmissions.createPast(1);
+  });
+
+  describe('time', () => {
+    it('shows loggedAt for an audit', () => {
+      const { loggedAt } = testData.extendedAudits
+        .createPast(1, { action: 'submission.create' })
+        .last();
+      mountComponent().first(DateTime).getProp('iso').should.equal(loggedAt);
+    });
+
+    it('shows createdAt for a comment', () => {
+      const { createdAt } = testData.extendedComments.createPast(1).last();
+      mountComponent().first(DateTime).getProp('iso').should.equal(createdAt);
+    });
+  });
+
+  it('shows the actor', () => {
+    testData.extendedAudits.createPast(1, {
+      actor: testData.extendedUsers.first(),
+      action: 'submission.create'
+    });
+    const actorLink = mountComponent().first(ActorLink);
+    actorLink.getProp('actor').displayName.should.equal('Alice');
+  });
+
+  describe('title', () => {
+    it('renders correctly for a submission.create audit', () => {
+      testData.extendedAudits.createPast(1, { action: 'submission.create' });
+      const title = mountComponent().first('.title');
+      title.find('.icon-cloud-upload').length.should.equal(1);
+      title.text().should.equal('Submitted by Alice');
+    });
+
+    describe('submission.update audit', () => {
+      it('renders correctly for null', () => {
+        testData.extendedAudits.createPast(1, {
+          action: 'submission.update',
+          details: { reviewState: null }
+        });
+        const title = mountComponent().first('.title');
+        title.text().should.equal('Received per Alice');
+        const reviewState = title.first('.review-state');
+        reviewState.getAttribute('class').should.equal('review-state');
+        reviewState.find('.icon-dot-circle-o').length.should.equal(1);
+        reviewState.text().should.equal('Received');
+      });
+
+      it('renders correctly for hasIssues', () => {
+        testData.extendedAudits.createPast(1, {
+          action: 'submission.update',
+          details: { reviewState: 'hasIssues' }
+        });
+        const title = mountComponent().first('.title');
+        title.text().should.equal('Has Issues per Alice');
+        const reviewState = title.first('.review-state');
+        reviewState.hasClass('hasIssues').should.be.true();
+        reviewState.find('.icon-comments').length.should.equal(1);
+        reviewState.text().should.equal('Has Issues');
+      });
+
+      it('renders correctly for edited', () => {
+        testData.extendedAudits.createPast(1, {
+          action: 'submission.update',
+          details: { reviewState: 'edited' }
+        });
+        const title = mountComponent().first('.title');
+        title.text().should.equal('Edited by Alice');
+        const reviewState = title.first('.review-state');
+        reviewState.hasClass('edited').should.be.true();
+        reviewState.find('.icon-pencil').length.should.equal(1);
+        reviewState.text().should.equal('Edited');
+      });
+
+      it('renders correctly for approved', () => {
+        testData.extendedAudits.createPast(1, {
+          action: 'submission.update',
+          details: { reviewState: 'approved' }
+        });
+        const title = mountComponent().first('.title');
+        title.text().should.equal('Approved by Alice');
+        const reviewState = title.first('.review-state');
+        reviewState.hasClass('approved').should.be.true();
+        reviewState.find('.icon-check-circle').length.should.equal(1);
+        reviewState.text().should.equal('Approved');
+      });
+
+      it('renders correctly for rejected', () => {
+        testData.extendedAudits.createPast(1, {
+          action: 'submission.update',
+          details: { reviewState: 'rejected' }
+        });
+        const title = mountComponent().first('.title');
+        title.text().should.equal('Rejected by Alice');
+        const reviewState = title.first('.review-state');
+        reviewState.hasClass('rejected').should.be.true();
+        reviewState.find('.icon-times-circle').length.should.equal(1);
+        reviewState.text().should.equal('Rejected');
+      });
+    });
+
+    it('renders correctly for a submission.update.version audit', () => {
+      testData.extendedAudits.createPast(1, {
+        action: 'submission.update.version'
+      });
+      const title = mountComponent().first('.title');
+      title.text().should.equal('Edited by Alice');
+      const reviewState = title.first('.review-state');
+      reviewState.hasClass('edited').should.be.true();
+      reviewState.find('.icon-pencil').length.should.equal(1);
+      reviewState.text().should.equal('Edited');
+    });
+
+    it('renders correctly for a comment', () => {
+      testData.extendedComments.createPast(1);
+      const title = mountComponent().first('.title');
+      title.find('.icon-comment').length.should.equal(1);
+      title.text().should.equal('Comment by Alice');
+    });
+  });
+
+  describe('body', () => {
+    it("shows an audit's notes", () => {
+      testData.extendedAudits.createPast(1, {
+        action: 'submission.update',
+        details: { reviewState: 'approved' },
+        notes: 'Some notes'
+      });
+      mountComponent().first('.body').text().should.equal('Some notes');
+    });
+
+    it("shows a comment's body", () => {
+      testData.extendedComments.createPast(1, { body: 'Some comment' });
+      mountComponent().first('.body').text().should.equal('Some comment');
+    });
+  });
+});
diff --git a/test/components/submission/metadata-row.spec.js b/test/components/submission/metadata-row.spec.js
index 2708e66b4..720c606ff 100644
--- a/test/components/submission/metadata-row.spec.js
+++ b/test/components/submission/metadata-row.spec.js
@@ -66,13 +66,11 @@ describe('SubmissionMetadataRow', () => {
       state.text().should.equal('Has issues');
     });
 
-    it('renders correctly for a review state of needsReview', () => {
-      testData.extendedSubmissions.createPast(1, {
-        reviewState: 'needsReview'
-      });
+    it('renders correctly for a review state of edited', () => {
+      testData.extendedSubmissions.createPast(1, { reviewState: 'edited' });
       const state = mountComponent().first('.state');
-      state.find('.icon-eye').length.should.equal(1);
-      state.text().should.equal('Needs review');
+      state.find('.icon-pencil').length.should.equal(1);
+      state.text().should.equal('Edited');
     });
 
     it('renders correctly for a review state of approved', () => {
@@ -119,7 +117,7 @@ describe('SubmissionMetadataRow', () => {
     });
 
     it('does not show the count if there has not been an edit', () => {
-      testData.extendedSubmissions.createPast(1, { edits: null });
+      testData.extendedSubmissions.createPast(1, { edits: 0 });
       mountComponent().find('.edits').length.should.equal(0);
     });
   });
@@ -135,18 +133,12 @@ describe('SubmissionMetadataRow', () => {
       href.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/edit');
     });
 
-    it('shows the correct text if there has been an edit', () => {
+    it('shows the correct text', () => {
       testData.extendedSubmissions.createPast(1, { edits: 1000 });
       const text = mountComponent().first('.btn-primary').text();
       text.should.equal('Edit (1,000)');
     });
 
-    it('shows the correct text if there has not been an edit', () => {
-      testData.extendedSubmissions.createPast(1, { edits: null });
-      const text = mountComponent().first('.btn-primary').text();
-      text.should.equal('Edit (0)');
-    });
-
     it('does not render the button if the canUpdate prop is false', () => {
       mockLogin({ role: 'none' });
       testData.extendedProjects.createPast(1, { forms: 1, role: 'viewer' });
diff --git a/test/components/submission/update-review-state.spec.js b/test/components/submission/update-review-state.spec.js
index bf55a67cf..279cefb5b 100644
--- a/test/components/submission/update-review-state.spec.js
+++ b/test/components/submission/update-review-state.spec.js
@@ -1,4 +1,4 @@
-import SubmissionAuditRow from '../../../src/components/submission/audit/row.vue';
+import SubmissionFeedEntry from '../../../src/components/submission/feed-entry.vue';
 import SubmissionUpdateReviewState from '../../../src/components/submission/update-review-state.vue';
 
 import testData from '../../data';
@@ -35,11 +35,29 @@ describe('SubmissionUpdateReviewState', () => {
     return load('/projects/1/forms/f/submissions/s', { root: false })
       .testModalToggles({
         modal: SubmissionUpdateReviewState,
-        show: '#submission-audit-list-update-review-state-button',
+        show: '#submission-activity-update-review-state-button',
         hide: '.btn-link'
       });
   });
 
+  it('renders the correct radio buttons for review state', () => {
+    testData.extendedSubmissions.createPast(1);
+    const radios = mountComponent().find('.radio label');
+    radios.length.should.equal(3);
+
+    radios[0].first('input').getAttribute('value').should.equal('approved');
+    radios[0].find('.icon-check-circle').length.should.equal(1);
+    radios[0].text().should.equal('Approved');
+
+    radios[1].first('input').getAttribute('value').should.equal('hasIssues');
+    radios[1].find('.icon-comments').length.should.equal(1);
+    radios[1].text().should.equal('Has issues');
+
+    radios[2].first('input').getAttribute('value').should.equal('rejected');
+    radios[2].find('.icon-times-circle').length.should.equal(1);
+    radios[2].text().should.equal('Rejected');
+  });
+
   describe('review state selection', () => {
     it('sets the selection to the current review state', () => {
       testData.extendedSubmissions.createPast(1, { reviewState: 'hasIssues' });
@@ -52,6 +70,12 @@ describe('SubmissionUpdateReviewState', () => {
       const radio = mountComponent().first('input[value="approved"]');
       radio.element.checked.should.be.true();
     });
+
+    it('sets the selection to approved if current review state is edited', () => {
+      testData.extendedSubmissions.createPast(1, { reviewState: 'edited' });
+      const radio = mountComponent().first('input[value="approved"]');
+      radio.element.checked.should.be.true();
+    });
   });
 
   it('focuses the review state radio', () => {
@@ -138,7 +162,7 @@ describe('SubmissionUpdateReviewState', () => {
       return load('/projects/1/forms/a%20b/submissions/c%20d', { root: false })
         .complete()
         .request(async (component) => {
-          await trigger.click(component, '#submission-audit-list-update-review-state-button');
+          await trigger.click(component, '#submission-activity-update-review-state-button');
           return trigger.submit(component, '#submission-update-review-state form', [
             ['input[value="hasIssues"]', true]
           ]);
@@ -151,14 +175,20 @@ describe('SubmissionUpdateReviewState', () => {
           });
           return testData.standardSubmissions.last();
         })
-        .respondWithData(() => testData.extendedAudits.sorted());
+        .respondWithData(() => testData.extendedAudits.sorted())
+        .respondWithData(() => testData.extendedComments.sorted());
     };
 
-    it('sends the correct request for the audit log entries', () =>
-      submit().beforeEachResponse((_, { method, url, index }) => {
+    it('sends the correct requests for activity data', () =>
+      submit().beforeEachResponse((_, { method, url, headers }, index) => {
+        if (index === 0) return;
+        method.should.equal('GET');
         if (index === 1) {
-          method.should.equal('GET');
           url.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/audits');
+          headers['X-Extended-Metadata'].should.equal('true');
+        } else {
+          url.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/comments');
+          headers['X-Extended-Metadata'].should.equal('true');
         }
       }));
 
@@ -182,9 +212,9 @@ describe('SubmissionUpdateReviewState', () => {
       submission.__system.submitterId.should.equal('1');
     });
 
-    it('updates the number of rows in the table', async () => {
+    it('updates the number of entries in the feed', async () => {
       const component = await submit();
-      component.find(SubmissionAuditRow).length.should.equal(2);
+      component.find(SubmissionFeedEntry).length.should.equal(2);
     });
   });
 });
diff --git a/test/data/audits.js b/test/data/audits.js
index 9fdf58862..32b9e7ab7 100644
--- a/test/data/audits.js
+++ b/test/data/audits.js
@@ -41,7 +41,6 @@ const auditsWithCreatedAt = dataStore({
 
     loggedAt = undefined
   }) => {
-    if (!inPast) throw new Error('inPast must be true');
     if (action == null) throw new Error('invalid action');
     const audit = { action };
     if (actor != null) {
@@ -53,7 +52,7 @@ const auditsWithCreatedAt = dataStore({
     audit.notes = notes;
     audit.loggedAt = loggedAt != null
       ? loggedAt
-      : fakePastDate([lastCreatedAt]);
+      : (inPast ? fakePastDate([lastCreatedAt]) : new Date().toISOString());
     audit.createdAt = audit.loggedAt;
     return audit;
   },
diff --git a/test/data/comments.js b/test/data/comments.js
new file mode 100644
index 000000000..a84168750
--- /dev/null
+++ b/test/data/comments.js
@@ -0,0 +1,30 @@
+import faker from 'faker';
+import { comparator, omit } from 'ramda';
+
+import { dataStore, view } from './data-store';
+import { extendedUsers } from './users';
+import { fakePastDate, isBefore } from '../util/date-time';
+import { toActor } from './actors';
+
+export const extendedComments = dataStore({
+  factory: ({
+    inPast,
+    lastCreatedAt,
+
+    body = faker.lorem.sentence(),
+    actor = extendedUsers.size !== 0
+      ? extendedUsers.first()
+      : extendedUsers.createPast(1).last()
+  }) => ({
+    body,
+    actorId: actor.id,
+    actor: toActor(actor),
+    createdAt: inPast
+      ? fakePastDate([lastCreatedAt, actor.createdAt])
+      : new Date().toISOString()
+  }),
+  sort: comparator((comment1, comment2) =>
+    isBefore(comment2.createdAt, comment1.createdAt))
+});
+
+export const standardComments = view(extendedComments, omit(['actor']));
diff --git a/test/data/index.js b/test/data/index.js
index 44fcb3188..06c49acd0 100644
--- a/test/data/index.js
+++ b/test/data/index.js
@@ -2,6 +2,7 @@ import * as Actors from './actors';
 import * as Assignments from './assignments';
 import * as Audits from './audits';
 import * as BackupsConfigs from './backups-configs';
+import * as Comments from './comments';
 import * as FieldKeys from './field-keys';
 import * as Fields from './fields';
 import * as FormAttachments from './form-attachments';
@@ -22,6 +23,7 @@ const testData = Object.assign(
   Assignments,
   Audits,
   BackupsConfigs,
+  Comments,
   FieldKeys,
   Fields,
   FormAttachments,
diff --git a/test/data/submissions.js b/test/data/submissions.js
index ff78afbf1..3af4f0bcf 100644
--- a/test/data/submissions.js
+++ b/test/data/submissions.js
@@ -96,7 +96,7 @@ export const extendedSubmissions = dataStore({
     attachmentsPresent = attachmentsExpected,
     status = null,
     reviewState = null,
-    edits = null,
+    edits = 0,
     deviceId = null,
 
     ...partialOData
diff --git a/test/unit/request.spec.js b/test/unit/request.spec.js
index 23a72f2ce..c3b894ba3 100644
--- a/test/unit/request.spec.js
+++ b/test/unit/request.spec.js
@@ -262,6 +262,11 @@ describe('util/request', () => {
       path.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/audits');
     });
 
+    it('submissionComments', () => {
+      const path = apiPaths.submissionComments(1, 'a b', 'c d');
+      path.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/comments');
+    });
+
     it('publicLinks', () => {
       const path = apiPaths.publicLinks(1, 'a b');
       path.should.equal('/v1/projects/1/forms/a%20b/public-links');
diff --git a/test/util/http/data.js b/test/util/http/data.js
index 5940fc0f0..116e31d7a 100644
--- a/test/util/http/data.js
+++ b/test/util/http/data.js
@@ -31,14 +31,14 @@ const defaults = {
       fieldKey1.displayName.localeCompare(fieldKey2.displayName))
     .map(testData.toActor),
   submission: testData.submissionOData,
-  submissionAudits: () => testData.extendedAudits.sorted(),
+  audits: () => testData.extendedAudits.sorted(),
+  comments: () => testData.extendedComments.sorted(),
   publicLinks: () => testData.standardPublicLinks.sorted(),
   fieldKeys: () => testData.extendedFieldKeys.sorted(),
 
   backupsConfig: () => (testData.standardBackupsConfigs.size !== 0
     ? testData.standardBackupsConfigs.last()
-    : { problem: 404.1 }),
-  audits: () => testData.extendedAudits.sorted()
+    : { problem: 404.1 })
 };
 
 // Maps each request key to its corresponding callback. Returns a Map so that
@@ -79,7 +79,7 @@ const mapsByComponent = {
   FormDraftStatus: mapKeys(['formVersions']),
   FormAttachmentList: new Map(),
   FormDraftTesting: mapKeys(['keys', 'fields', 'odataChunk']),
-  SubmissionShow: mapKeys(['project', 'submission', 'submissionAudits']),
+  SubmissionShow: mapKeys(['project', 'submission', 'audits', 'comments']),
 
   UserHome: new Map(),
   UserList: mapKeys(['users', 'actors']),
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index e80a31671..b73c10c87 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -114,16 +114,16 @@
       "string": "Received",
       "developer_comment": "This is a possible Review State for a Submission."
     },
-    "approved": {
-      "string": "Approved",
-      "developer_comment": "This is a possible Review State for a Submission."
-    },
     "hasIssues": {
       "string": "Has issues",
       "developer_comment": "This is a possible Review State for a Submission."
     },
-    "needsReview": {
-      "string": "Needs review",
+    "edited": {
+      "string": "Edited",
+      "developer_comment": "This is a possible Review State for a Submission."
+    },
+    "approved": {
+      "string": "Approved",
       "developer_comment": "This is a possible Review State for a Submission."
     },
     "rejected": {
@@ -272,6 +272,10 @@
       "string": "Close",
       "developer_comment": "This is the text for an action, for example, the text of a button."
     },
+    "comment": {
+      "string": "Comment",
+      "developer_comment": "This is the text for an action, for example, the text of a button."
+    },
     "create": {
       "string": "Create",
       "developer_comment": "This is the text for an action, for example, the text of a button."
@@ -336,8 +340,8 @@
       "string": "Reset password",
       "developer_comment": "This is the text for an action, for example, the text of a button."
     },
-    "claimAccount": {
-      "string": "Claim account",
+    "review": {
+      "string": "Review",
       "developer_comment": "This is the text for an action, for example, the text of a button."
     },
     "save": {
@@ -354,6 +358,10 @@
     }
   },
   "field": {
+    "comment": {
+      "string": "Leave a comment…",
+      "developer_comment": "This is the text of a form field."
+    },
     "dateRange": {
       "string": "Date range",
       "developer_comment": "This is the text of a form field."
@@ -579,6 +587,10 @@
     }
   },
   "common": {
+    "activity": {
+      "string": "Activity",
+      "developer_comment": "This is a title shown above a section of the page."
+    },
     "anybody": {
       "string": "(Anybody)",
       "developer_comment": "This is shown in a dropdown that allows the user to filter to only show data for particular users."
@@ -2922,45 +2934,10 @@
         }
       }
     },
-    "SubmissionAuditList": {
-      "title": {
-        "string": "Actions",
-        "developer_comment": "This is a title shown above a section of the page."
-      },
-      "action": {
-        "updateReviewState": {
-          "string": "Update State",
-          "developer_comment": "This is the text for an action, for example, the text of a button."
-        }
-      }
-    },
-    "SubmissionAuditRow": {
-      "created": {
-        "string": "Submitted",
-        "developer_comment": "This text indicates that a Submission was submitted."
-      },
-      "edited": {
-        "string": "Edited",
-        "developer_comment": "This text is shown for a Submission that was edited."
-      }
-    },
-    "SubmissionAuditTable": {
-      "header": {
-        "takenBy": {
-          "string": "Taken by",
-          "developer_comment": "This is the text of a table column header."
-        },
-        "action": {
-          "string": "Action",
-          "developer_comment": "This is the text for an action, for example, the text of a button."
-        },
-        "note": {
-          "string": "Note",
-          "developer_comment": "This is the text of a table column header."
-        }
-      }
-    },
     "SubmissionBasicDetails": {
+      "reviewState": {
+        "string": "Review State"
+      },
       "deviceId": {
         "string": "Device ID"
       },
@@ -2979,6 +2956,11 @@
         "developer_comment": "{present} shows the number of files that were submitted, and {expected} shows the number of files that were expected to be submitted. For example: \"2 files / 3 expected\""
       }
     },
+    "SubmissionComment": {
+      "editWithoutComment": {
+        "string": "You have made edits to this data. Please describe the changes you made."
+      }
+    },
     "SubmissionDataAccess": {
       "action": {
         "apiAccess": {
@@ -3046,6 +3028,70 @@
         }
       }
     },
+    "SubmissionFeedEntry": {
+      "title": {
+        "create": {
+          "string": "Submitted by {name}",
+          "developer_comment": "This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the word \"Submitted\", so it is essential for \"Submitted\" to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:\n\nSubmitted by {name}\n\nyou could split it into:\n\nSubmitted • {name}"
+        },
+        "updateReviewState": {
+          "null": {
+            "full": {
+              "string": "{reviewState} per {name}",
+              "developer_comment": "This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:\n\n{reviewState} per {name}\n\nyou could split it into:\n\n{reviewState} • {name}\n\n{reviewState} is a separate string that will be translated below. Its text will be formatted within ODK Central, for example, it might be bold or a link. Its text is:\n\nReceived"
+            },
+            "reviewState": {
+              "string": "Received",
+              "developer_comment": "This text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {reviewState} is in the following text:\n\n{reviewState} per {name}"
+            }
+          },
+          "hasIssues": {
+            "full": {
+              "string": "{reviewState} per {name}",
+              "developer_comment": "This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:\n\n{reviewState} per {name}\n\nyou could split it into:\n\n{reviewState} • {name}\n\n{reviewState} is a separate string that will be translated below. Its text will be formatted within ODK Central, for example, it might be bold or a link. Its text is:\n\nHas Issues"
+            },
+            "reviewState": {
+              "string": "Has Issues",
+              "developer_comment": "This text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {reviewState} is in the following text:\n\n{reviewState} per {name}"
+            }
+          },
+          "edited": {
+            "full": {
+              "string": "{reviewState} by {name}",
+              "developer_comment": "This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:\n\n{reviewState} by {name}\n\nyou could split it into:\n\n{reviewState} • {name}\n\n{reviewState} is a separate string that will be translated below. Its text will be formatted within ODK Central, for example, it might be bold or a link. Its text is:\n\nEdited"
+            },
+            "reviewState": {
+              "string": "Edited",
+              "developer_comment": "This text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {reviewState} is in the following text:\n\n{reviewState} by {name}"
+            }
+          },
+          "approved": {
+            "full": {
+              "string": "{reviewState} by {name}",
+              "developer_comment": "This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:\n\n{reviewState} by {name}\n\nyou could split it into:\n\n{reviewState} • {name}\n\n{reviewState} is a separate string that will be translated below. Its text will be formatted within ODK Central, for example, it might be bold or a link. Its text is:\n\nApproved"
+            },
+            "reviewState": {
+              "string": "Approved",
+              "developer_comment": "This text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {reviewState} is in the following text:\n\n{reviewState} by {name}"
+            }
+          },
+          "rejected": {
+            "full": {
+              "string": "{reviewState} by {name}",
+              "developer_comment": "This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the Review State, so it is essential for the Review State to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:\n\n{reviewState} by {name}\n\nyou could split it into:\n\n{reviewState} • {name}\n\n{reviewState} is a separate string that will be translated below. Its text will be formatted within ODK Central, for example, it might be bold or a link. Its text is:\n\nRejected"
+            },
+            "reviewState": {
+              "string": "Rejected",
+              "developer_comment": "This text will be formatted within ODK Central, for example, it might be bold or a link. It will be inserted where {reviewState} is in the following text:\n\n{reviewState} by {name}"
+            }
+          }
+        },
+        "comment": {
+          "string": "Comment by {name}",
+          "developer_comment": "This text is shown in the list of actions performed on a Submission. There is an icon before the text that corresponds to the word \"Comment\", so it is essential for \"Comment\" to also come first in the translation. If that is unnatural in your language, you can also split the text into two parts. For example, instead of:\n\nComment by {name}\n\nyou could split it into:\n\nComment • {name}"
+        }
+      }
+    },
     "SubmissionFieldDropdown": {
       "placeholder": {
         "string": "{selected} of {total}",