diff --git a/packages/client/src/components/GrantActivity.vue b/packages/client/src/components/GrantActivity.vue
index 30325dfd4..46e49bac4 100644
--- a/packages/client/src/components/GrantActivity.vue
+++ b/packages/client/src/components/GrantActivity.vue
@@ -2,11 +2,12 @@
   <div>
     <b-card
       header-bg-variant="white"
+      header-class="px-3 py-4"
       footer-bg-variant="white"
       footer-class="p-0"
     >
       <template #header>
-        <h3 class="my-2">
+        <h3 class="m-0">
           Grant Activity
         </h3>
       </template>
@@ -135,7 +136,7 @@ export default {
       return `${textCount} ${this.notes.length === 1 ? 'note' : 'notes'}`;
     },
   },
-  async beforeMount() {
+  beforeMount() {
     this.fetchFollowAndNotes();
   },
   methods: {
diff --git a/packages/client/src/components/GrantNote.spec.js b/packages/client/src/components/GrantNote.spec.js
deleted file mode 100644
index 0b218f545..000000000
--- a/packages/client/src/components/GrantNote.spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import GrantNote from '@/components/GrantNote.vue';
-import { id } from '@/helpers/testHelpers';
-
-const note = {
-  id: id(),
-  createdAt: new Date().toISOString(),
-  isRevised: true,
-  text: 'Text',
-  grant: { id: id() },
-  user: {
-    id: id(),
-    name: 'User',
-    email: 'email@net',
-    avatarColor: 'red',
-    team: {
-      id: id(),
-      name: 'Team',
-    },
-    organization: {
-      id: id(),
-      name: 'Org',
-    },
-  },
-};
-
-describe('GrantNote component', () => {
-  it('renders', () => {
-    const wrapper = mount(GrantNote, {
-      props: {
-        note,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-  });
-});
diff --git a/packages/client/src/components/GrantNotes.spec.js b/packages/client/src/components/GrantNotes.spec.js
index 9982c25b5..7218fe952 100644
--- a/packages/client/src/components/GrantNotes.spec.js
+++ b/packages/client/src/components/GrantNotes.spec.js
@@ -79,15 +79,16 @@ describe('GrantNotes component', () => {
     const inputCmp = wrapper.findComponent('[data-test-note-input]');
     expect(inputCmp.exists()).toEqual(false);
 
-    const userNoteCmp = wrapper.findComponent('[data-test-user-note]');
+    const userNoteCmp = wrapper.findComponent('[data-test-user-note-id]');
     expect(userNoteCmp.exists()).equal(true);
 
-    const otherNoteCmps = wrapper.findAllComponents('[data-test-other-note]');
+    const otherNoteCmps = wrapper.findAllComponents('[data-test-other-note-id]');
     expect(otherNoteCmps).toHaveLength(5);
 
     // excludes user note
     otherNoteCmps.forEach((cmp) => {
-      expect(cmp.props('note').user.id).not.toEqual(CURRENT_USER_ID);
+      expect(cmp.attributes('data-test-other-note-id')).toBeTruthy();
+      expect(cmp.attributes('data-test-other-note-id')).not.toEqual(CURRENT_USER_ID);
     });
   });
 
@@ -133,7 +134,7 @@ describe('GrantNotes component', () => {
     await flushPromises();
 
     expect(mockStore.actions['grants/saveNoteForGrant'].mock.lastCall[1].text).toEqual('My Note');
-    const userNoteCmp = wrapper.findComponent('[data-test-user-note]');
+    const userNoteCmp = wrapper.findComponent('[data-test-user-note-id]');
     expect(userNoteCmp.exists()).equal(true);
   });
 
@@ -162,7 +163,7 @@ describe('GrantNotes component', () => {
     await flushPromises();
 
     expect(mockStore.actions['grants/getNotesForGrant'].mock.lastCall[1].cursor).toEqual(NEXT_ID);
-    const otherNoteCmps = wrapper.findAllComponents('[data-test-other-note]');
+    const otherNoteCmps = wrapper.findAllComponents('[data-test-other-note-id]');
     expect(otherNoteCmps).toHaveLength(4);
     expect(wrapper.findComponent('[data-test-show-more-btn]').exists()).toEqual(false);
   });
diff --git a/packages/client/src/components/GrantNotes.vue b/packages/client/src/components/GrantNotes.vue
index 99b291001..da8aed610 100644
--- a/packages/client/src/components/GrantNotes.vue
+++ b/packages/client/src/components/GrantNotes.vue
@@ -6,11 +6,11 @@
       class="d-flex note-edit-container"
     >
       <UserAvatar
-        :user-name="loggedInUser.name"
         size="2.5rem"
+        :user-name="loggedInUser.name"
         :color="loggedInUser.avatar_color"
       />
-      <b-form-group class="ml-2 mb-2 flex-grow-1 position-relative">
+      <b-form-group class="mx-3 mb-2 flex-grow-1 position-relative">
         <b-form-textarea
           ref="noteTextarea"
           v-model="noteText"
@@ -51,12 +51,19 @@
     </div>
 
     <!-- Current User's Note -->
-    <GrantNote
+    <UserActivityItem
       v-if="userNote && !editingNote"
-      data-test-user-note
       :class="userNoteClass"
-      :note="userNote"
+      :user-name="userNote.user.name"
+      :user-email="userNote.user.email"
+      :team-name="userNote.user.team.name"
+      :avatar-color="userNote.user.avatarColor"
+      :created-at="userNote.createdAt"
+      :is-edited="userNote.isRevised"
+      copy-email-enabled
+      data-test-user-note-id="userNote.id"
     >
+      {{ userNote.text }}
       <template #actions>
         <b-button
           class="note-edit-btn p-0"
@@ -70,7 +77,7 @@
           <span>EDIT</span>
         </b-button>
       </template>
-    </GrantNote>
+    </UserActivityItem>
 
     <!-- Other Notes -->
     <ul class="list-unstyled mb-0">
@@ -78,10 +85,19 @@
         v-for="note of otherNotes"
         :key="note.id"
       >
-        <GrantNote
-          :note="note"
-          data-test-other-note
-        />
+        <UserActivityItem
+          class="activity-container"
+          :user-name="note.user.name"
+          :user-email="note.user.email"
+          :team-name="note.user.team.name"
+          :avatar-color="note.user.avatarColor"
+          :created-at="note.createdAt"
+          :is-edited="note.isRevised"
+          copy-email-enabled
+          :data-test-other-note-id="note.id"
+        >
+          {{ note.text }}
+        </UserActivityItem>
       </li>
     </ul>
 
@@ -107,13 +123,13 @@
 import { nextTick } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import UserAvatar from '@/components/UserAvatar.vue';
-import GrantNote from '@/components/GrantNote.vue';
+import UserActivityItem from '@/components/UserActivityItem.vue';
 import { grantNotesLimit } from '@/helpers/featureFlags';
 
 export default {
   components: {
     UserAvatar,
-    GrantNote,
+    UserActivityItem,
   },
   emits: ['noteSaved'],
   data() {
@@ -149,9 +165,9 @@ export default {
       return `ml-auto ${errColor}`;
     },
     userNoteClass() {
-      const corners = this.emptyNoteText ? 'rounded-bottom-corners' : '';
+      const corners = this.otherNotes.length === 0 ? 'rounded-bottom-corners' : '';
 
-      return `user-note ${corners}`;
+      return `user-note activity-container ${corners}`;
     },
   },
   async beforeMount() {
@@ -241,6 +257,10 @@ textarea.note-textarea {
   padding-right: 2.25rem;
 }
 
+.activity-container {
+  padding: 1.25rem;
+}
+
 textarea.note-textarea::placeholder {
   font-size: 0.875rem
 }
diff --git a/packages/client/src/components/Modals/GrantFollowers.vue b/packages/client/src/components/Modals/GrantFollowers.vue
index 35a5a1109..d74c90191 100644
--- a/packages/client/src/components/Modals/GrantFollowers.vue
+++ b/packages/client/src/components/Modals/GrantFollowers.vue
@@ -15,35 +15,25 @@
 
     <ul class="list-unstyled mt-3">
       <li
-        v-for="follower in formattedFollowers"
+        v-for="follower in followers"
         :key="follower.id"
         data-test-follower
         class="mb-3"
       >
         <div class="d-flex">
-          <UserAvatar
-            :user-name="follower.name"
-            size="2.5rem"
-            :color="follower.avatarColor"
-            class="mr-2"
+          <UserActivityItem
+            class="mr-3"
+            :user-name="follower.user.name"
+            :user-email="follower.user.email"
+            :team-name="follower.user.team.name"
+            :avatar-color="follower.user.avatarColor"
+            :created-at="follower.createdAt"
+            hide-avatar-vertical
           />
-          <div class="mt-1 d-flex flex-column has-flexi-truncate mr-2">
-            <UserHeaderText
-              :name="follower.name"
-              :team="follower.team"
-            />
-            <div class="follower-email text-muted">
-              {{ follower.email }}
-            </div>
-            <div class="follower-date text-muted">
-              {{ follower.dateFollowedText }}
-            </div>
-          </div>
-
           <CopyButton
-            :copy-text="follower.email"
+            :copy-text="follower.user.email"
             hide-icon
-            class="ms-auto flex-shrink-0 mt-1"
+            class="ml-auto flex-shrink-0 mt-1"
           >
             <b-button
               variant="outline-primary"
@@ -90,16 +80,13 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 
-import UserAvatar from '@/components/UserAvatar.vue';
 import CopyButton from '@/components/CopyButton.vue';
-import UserHeaderText from '@/components/UserHeaderText.vue';
-import { formatActivityDate } from '@/components/GrantNote.vue';
+import UserActivityItem from '@/components/UserActivityItem.vue';
 
 export default {
   components: {
-    UserAvatar,
     CopyButton,
-    UserHeaderText,
+    UserActivityItem,
   },
   props: {
     modalId: {
@@ -123,21 +110,6 @@ export default {
     loadMoreVisible() {
       return this.followersNextCursor !== null;
     },
-    formattedFollowers() {
-      return this.followers
-        .map((follower) => {
-          const { user, id, createdAt } = follower;
-
-          return {
-            id,
-            name: user.name,
-            email: user.email,
-            team: user.team.name,
-            dateFollowedText: formatActivityDate(createdAt),
-            avatarColor: user.avatarColor,
-          };
-        });
-    },
     followersEmailText() {
       return this.followers
         .map((follower) => follower.user.email)
diff --git a/packages/client/src/components/ShareGrant.vue b/packages/client/src/components/ShareGrant.vue
index 0008a2e11..4efa5bd37 100644
--- a/packages/client/src/components/ShareGrant.vue
+++ b/packages/client/src/components/ShareGrant.vue
@@ -1,11 +1,15 @@
 <!-- eslint-disable max-len -->
 <template>
-  <b-card>
-    <!-- Assign grant section -->
-    <div class="mb-5">
-      <h3 class="mb-3">
+  <b-card
+    header-bg-variant="white"
+    header-class="px-3 py-4"
+  >
+    <template #header>
+      <h3 class="m-0">
         {{ shareTerminologyEnabled ? 'Share Grant' : 'Assign Grant' }}
       </h3>
+    </template>
+    <div class="mt-1 mb-4">
       <div class="d-flex print-d-none">
         <v-select
           v-model="selectedAgencyToAssign"
@@ -13,7 +17,7 @@
           :options="unassignedAgencies"
           label="name"
           track-by="id"
-          :placeholder="`Choose ${newTerminologyEnabled ? 'team': 'agency'}`"
+          :placeholder="`Choose ${newTerminologyEnabled ? 'team' : 'agency'}`"
           :clearable="false"
           data-dd-action-name="select team for grant assignment"
           @close="$refs.assignSubmitButton.focus()"
@@ -53,21 +57,20 @@
         <div
           v-for="agency in assignedAgencies"
           :key="agency.id"
-          class="d-flex justify-content-start align-items-start my-3"
+          class="my-4"
         >
-          <UserAvatar
+          <UserActivityItem
             :user-name="agency.assigned_by_name"
-            :color="agency.assigned_by_avatar_color"
-            size="2.5rem"
-          />
-          <div class="mx-3">
-            <p class="m-0">
-              <strong>{{ agency.assigned_by_name }}</strong> shared to <strong>{{ agency.name }}</strong>
-            </p>
-            <p class="m-0 text-muted">
-              <small>{{ formatDateTime(agency.created_at) }}</small>
-            </p>
-          </div>
+            :user-email="agency.assigned_by_email"
+            :team-name="agency.assigned_by_agency_name"
+            :avatar-color="agency.assigned_by_avatar_color"
+            :created-at="agency.created_at"
+            copy-email-enabled
+          >
+            <div>
+              Shared grant with <strong>{{ agency.name }}</strong>
+            </div>
+          </UserActivityItem>
         </div>
       </template>
     </div>
@@ -80,10 +83,12 @@ import { datadogRum } from '@datadog/browser-rum';
 import { newTerminologyEnabled, shareTerminologyEnabled } from '@/helpers/featureFlags';
 import { formatDate, formatDateTime } from '@/helpers/dates';
 import { gtagEvent } from '@/helpers/gtag';
-import UserAvatar from '@/components/UserAvatar.vue';
+import UserActivityItem from '@/components/UserActivityItem.vue';
 
 export default {
-  components: { UserAvatar },
+  components: {
+    UserActivityItem,
+  },
   data() {
     return {
       selectedAgencyToAssign: null,
@@ -150,5 +155,4 @@ export default {
 };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/packages/client/src/components/UserActivityItem.spec.js b/packages/client/src/components/UserActivityItem.spec.js
new file mode 100644
index 000000000..ddf1388a4
--- /dev/null
+++ b/packages/client/src/components/UserActivityItem.spec.js
@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import UserActivityItem from '@/components/UserActivityItem.vue';
+import { id } from '@/helpers/testHelpers';
+
+const activity = {
+  id: id(),
+  createdAt: new Date().toISOString(),
+  isEdited: false,
+  userName: 'User',
+  teamName: 'Team',
+  userEmail: 'e@net.com',
+  avatarColor: 'red',
+};
+
+describe('GrantNote component', () => {
+  it('renders', () => {
+    const wrapper = mount(UserActivityItem, {
+      props: {
+        ...activity,
+      },
+      slots: {
+        default: '<div data-test-text>Text</div>',
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('[data-test-text]').exists()).toBe(true);
+  });
+});
diff --git a/packages/client/src/components/GrantNote.vue b/packages/client/src/components/UserActivityItem.vue
similarity index 53%
rename from packages/client/src/components/GrantNote.vue
rename to packages/client/src/components/UserActivityItem.vue
index bd753494a..0e5c63e24 100644
--- a/packages/client/src/components/GrantNote.vue
+++ b/packages/client/src/components/UserActivityItem.vue
@@ -1,35 +1,42 @@
 <template>
-  <div class="d-flex note-container">
+  <div class="d-flex has-flexi-truncate">
     <div class="d-flex flex-column">
       <UserAvatar
-        :user-name="note.user.name"
+        :user-name="userName"
         size="2.5rem"
-        :color="note.user.avatarColor"
+        :color="avatarColor"
       />
-      <div class="note_vertical position-relative flex-grow-1" />
+      <div :class="avatarSubBarClass" />
     </div>
 
-    <div class="d-flex flex-column flex-grow-1 has-flexi-truncate ml-2">
-      <UserHeaderText
-        :name="note.user.name"
-        :team="note.user.team.name"
-      />
+    <div class="d-flex flex-column flex-grow-1 has-flexi-truncate mx-3">
+      <div
+        class="text-truncate"
+        :title="title"
+      >
+        <span class="font-weight-bold">{{ userName }}</span>
+        <span class="bullet mx-1">&bull;</span>
+        <span class="team">{{ teamName }}</span>
+      </div>
       <div class="text-gray-500">
+        <span v-if="!copyEmailEnabled">{{ userEmail }}</span>
         <CopyButton
-          :copy-text="note.user.email"
+          v-if="copyEmailEnabled"
+          :copy-text="userEmail"
           hide-icon
         >
-          {{ note.user.email }}
+          {{ userEmail }}
         </CopyButton>
       </div>
       <div class="mt-1 text-gray-600">
-        {{ note.text }}
+        <slot />
+        <slot name="text" />
       </div>
       <div class="d-flex mt-1 align-items-end">
-        <span class="note-date-text">
+        <span class="activity-date-text">
           {{ timeElapsedString }}
           <span
-            v-if="note.isRevised"
+            v-if="isEdited"
             class="text-gray-500"
           >(edited)</span>
         </span>
@@ -45,7 +52,6 @@
 import { DateTime } from 'luxon';
 import UserAvatar from '@/components/UserAvatar.vue';
 import CopyButton from '@/components/CopyButton.vue';
-import UserHeaderText from '@/components/UserHeaderText.vue';
 
 export const formatActivityDate = (createdAtISO) => {
   const createdDate = DateTime.fromISO(createdAtISO);
@@ -67,17 +73,50 @@ export default {
   components: {
     UserAvatar,
     CopyButton,
-    UserHeaderText,
   },
   props: {
-    note: {
-      type: Object,
-      required: true,
+    userName: {
+      type: String,
+      default: '',
+    },
+    userEmail: {
+      type: String,
+      default: '',
+    },
+    avatarColor: {
+      type: String,
+      default: '',
+    },
+    teamName: {
+      type: String,
+      default: '',
+    },
+    isEdited: {
+      type: Boolean,
+      default: false,
+    },
+    createdAt: {
+      type: String,
+      default: '',
+    },
+    copyEmailEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    hideAvatarVertical: {
+      type: Boolean,
+      default: false,
     },
   },
   computed: {
+    avatarSubBarClass() {
+      return this.hideAvatarVertical ? '' : 'activity_vertical position-relative flex-grow-1';
+    },
+    title() {
+      return `${this.userName} \u2022 ${this.teamName}`;
+    },
     timeElapsedString() {
-      return formatActivityDate(this.note.createdAt);
+      return formatActivityDate(this.createdAt);
     },
   },
 };
@@ -88,19 +127,15 @@ export default {
 @import '@/scss/colors-semantic-tokens.scss';
 @import '@/scss/colors-base-tokens.scss';
 
-.note-container {
-  padding: 1rem 1.25rem;
-}
-
 .text-gray-500 {
   color: $raw-gray-500
 }
 
-.note-date-text {
-  font-size:0.75rem;
+.activity-date-text {
+  font-size: 0.75rem;
 }
 
-.note-date-text:first-letter {
+.activity-date-text:first-letter {
   text-transform: capitalize;
 }
 
@@ -109,7 +144,7 @@ export default {
   font-weight: 400;
 }
 
-.note_vertical:before {
+.activity_vertical:before {
   content: "";
   background: $raw-gray-600;
   height: calc(100% - .5rem);
@@ -120,4 +155,14 @@ export default {
   bottom: 0;
 }
 
+.team {
+  color: $raw-gray-500;
+  font-weight: 400;
+  font-size: 0.75rem;
+}
+
+.bullet {
+  color: $raw-gray-600;
+  font-size: 0.75rem;
+}
 </style>
diff --git a/packages/client/src/views/GrantDetailsView.vue b/packages/client/src/views/GrantDetailsView.vue
index 9710a25c9..c15317130 100644
--- a/packages/client/src/views/GrantDetailsView.vue
+++ b/packages/client/src/views/GrantDetailsView.vue
@@ -95,15 +95,15 @@
                     class="grant-details-table mb-5"
                     :items="tableData"
                     :fields="[
-                      {key: 'name', class: 'color-gray grants-details-table-fit-content'},
-                      {key: 'value', class: 'font-weight-bold'},
+                      { key: 'name', class: 'color-gray grants-details-table-fit-content' },
+                      { key: 'value', class: 'font-weight-bold' },
                     ]"
                     thead-class="d-none"
                     borderless
                     hover
                   >
                     <template #cell()="data">
-                      <span :class="{'text-muted font-weight-normal': data.item.displayMuted}">
+                      <span :class="{ 'text-muted font-weight-normal': data.item.displayMuted }">
                         {{ data.value }}
                       </span>
                     </template>
@@ -131,11 +131,15 @@
             <b-card
               v-if="!followNotesEnabled"
               class="mb-3"
+              header-bg-variant="white"
+              header-class="px-3 py-4"
             >
-              <div class="mb-5">
-                <h3 class="mb-3">
-                  {{ newTerminologyEnabled ? 'Team': 'Agency' }} Status
+              <template #header>
+                <h3 class="m-0">
+                  {{ newTerminologyEnabled ? 'Team' : 'Agency' }} Status
                 </h3>
+              </template>
+              <div class="mt-1 mb-5">
                 <div class="d-flex print-d-none">
                   <v-select
                     v-model="selectedInterestedCode"
@@ -477,6 +481,7 @@ export default {
     "content  secondary-actions";
   column-gap: 1.25rem;
   row-gap: 3rem;
+
   .grant-details-back-link {
     grid-area: back-link;
     margin-top: 0rem;
@@ -484,9 +489,11 @@ export default {
     font-size: 0.875rem;
     font-weight: 700;
     color: #6d7278;
+
     a {
       color: #6d7278;
       cursor: pointer;
+
       &::hover {
         text-decoration: underline;
       }
@@ -533,10 +540,12 @@ export default {
 .grant-details-container .card {
   border-radius: .5rem !important;
 }
+
 .grant-details-container .card .card-header {
   border-top-left-radius: .5rem !important;
   border-top-right-radius: .5rem !important;
 }
+
 .grant-details-container .card .card-footer {
   border-bottom-left-radius: .5rem !important;
   border-bottom-right-radius: .5rem !important;
@@ -553,10 +562,13 @@ export default {
 
 @media print {
   .print-d-none {
-    display: none !important; /* important to override other styles like `d-flex` */
+    display: none !important;
+    /* important to override other styles like `d-flex` */
   }
+
   .grants-details-sidebar {
-    flex-basis: 30%; /* don't want the sidebar taking over the page in print */
+    flex-basis: 30%;
+    /* don't want the sidebar taking over the page in print */
   }
 }
 </style>
diff --git a/packages/server/src/db/index.js b/packages/server/src/db/index.js
index 06c4cc581..b0cff8338 100755
--- a/packages/server/src/db/index.js
+++ b/packages/server/src/db/index.js
@@ -1032,12 +1032,20 @@ async function markGrantAsViewed({ grantId, agencyId, userId }) {
 function getGrantAssignedAgencies({ grantId, tenantId }) {
     return knex(TABLES.assigned_grants_agency)
         .join(TABLES.agencies, `${TABLES.agencies}.id`, '=', `${TABLES.assigned_grants_agency}.agency_id`)
-        .join(TABLES.users, `${TABLES.users}.id`, '=', `${TABLES.assigned_grants_agency}.assigned_by`)
+        .join('users as u', `u.id`, '=', `${TABLES.assigned_grants_agency}.assigned_by`)
+        .join(`agencies as assigned_by_agency`, `assigned_by_agency.id`, '=', `u.agency_id`)
         .where({ grant_id: grantId })
         .andWhere(`${TABLES.agencies}.tenant_id`, tenantId)
         .select(`${TABLES.agencies}.*`)
         .select(`${TABLES.assigned_grants_agency}.*`)
-        .select(`${TABLES.users}.name as assigned_by_name`, `${TABLES.users}.email as assigned_by_email`, `${TABLES.users}.avatar_color as assigned_by_avatar_color`);
+        .select(
+            `u.agency_id as assigned_by_agency_id`,
+            `u.name as assigned_by_name`,
+            `u.email as assigned_by_email`,
+            `u.avatar_color as assigned_by_avatar_color`,
+            `u.avatar_color as assigned_by_avatar_color`,
+        )
+        .select('assigned_by_agency.name as assigned_by_agency_name');
 }
 
 function assignGrantsToAgencies({ grantId, agencyIds, userId }) {