diff --git a/compass/clients/person_client.py b/compass/clients/person_client.py
index f29350a2..a0e5cd91 100644
--- a/compass/clients/person_client.py
+++ b/compass/clients/person_client.py
@@ -57,7 +57,8 @@ def get_adviser_caseload(self, uwnetid):
              self.DB.Student.enroll_status_desc,
              self.DB.Student.id,
              self.DB.Transcript.scholarship_type,
-             self.DB.Transcript.scholarship_desc)\
+             self.DB.Transcript.scholarship_desc,
+             self.DB.Person.surname)\
             .join(self.DB.Person)\
             .join(self.DB.StudentToAdviser)\
             .join(self.DB.Adviser)\
@@ -94,6 +95,7 @@ def get_adviser_caseload(self, uwnetid):
             latest_transcript = Transcript()
             latest_transcript.scholarship_type = item[17]
             latest_transcript.scholarship_desc = item[18]
+            person.surname = item[19]
             student.transcripts = [latest_transcript]
             student.degrees = []
             person.student = student
@@ -102,8 +104,8 @@ def get_adviser_caseload(self, uwnetid):
         for degree in self.get_degrees(persons.keys()):
             persons[degree.student_id].student.degrees.append(degree)
 
-        # sorting by display name, can't get it to work in SQL-Alchemy
-        return sorted(persons.values(), key=lambda p: p.display_name)
+        # sorting by surname, can't get it to work in SQL-Alchemy
+        return sorted(persons.values(), key=lambda p: p.surname)
 
     def get_appuser_by_uwnetid(self, uwnetid):
         cache_key = f'appuser_{uwnetid}'
diff --git a/compass/models.py b/compass/models.py
index 26836623..7fc08d0d 100644
--- a/compass/models.py
+++ b/compass/models.py
@@ -7,7 +7,7 @@
 from django.utils.text import slugify
 from django.utils.timezone import utc
 from simple_history.models import HistoricalRecords
-from compass.clients import CompassPersonClient
+from compass.clients import CompassPersonClient, PersonNotFoundException
 from compass.dao.group import is_group_member
 from compass.dao import current_datetime
 from datetime import datetime, timedelta
@@ -80,8 +80,12 @@ def __str__(self):
     @property
     def display_name(self):
         if self.uwnetid:
-            person = CompassPersonClient().get_appuser_by_uwnetid(self.uwnetid)
-            return person.display_name
+            try:
+                person = CompassPersonClient().get_appuser_by_uwnetid(
+                    self.uwnetid)
+                return person.display_name
+            except PersonNotFoundException:
+                return self.uwnetid
 
 
 class Student(models.Model):
diff --git a/compass_vue/components/student/contact.vue b/compass_vue/components/student/contact.vue
index da6ca696..337c7e5f 100644
--- a/compass_vue/components/student/contact.vue
+++ b/compass_vue/components/student/contact.vue
@@ -18,26 +18,26 @@
           <table class="table m-0">
             <thead class="table-light text-muted small">
               <tr>
-                <th class="ps-3">Date</th>
-                <th>Details</th>
+                <th class="ps-3">Details</th>
                 <th>&nbsp;</th>
               </tr>
             </thead>
             <tbody>
               <tr v-for="contact in contacts" :key="contact.id">
-                <td scope="row" class="ps-3" style="width: 25%">
-                  <div class="small">
-                    {{ contactDate(contact.checkin_date) }}
-                  </div>
-                  <div class="text-muted small">
-                    <i class="bi bi-person-circle me-1"></i
-                    >{{ contact.app_user.uwnetid }} --
-                    {{ contact.source }}
-                    --
-                    {{ contact.trans_id }}
+                <td class="ps-3 align-bottom">
+                  <div class="small d-flex justify-content-between mb-4">
+                    <div>
+                      <strong>{{ contact.app_user.display_name }}</strong>
+                      <span class="text-secondary ms-1"
+                        >({{ contact.app_user.uwnetid }})</span
+                      >
+                    </div>
+                    <div class="text-secondary">
+                      <i class="bi bi-calendar-event text-gray me-1"></i>
+                      {{ getTimeFromNow(contact.checkin_date) }}
+                    </div>
                   </div>
-                </td>
-                <td class="align-bottom">
+
                   <template v-if="contact.contact_type">
                     <div
                       v-if="contact.contact_type.slug == 'parent'"
@@ -70,7 +70,7 @@
 
                   <ul
                     v-if="contact.contact_topics"
-                    class="list-unstyled mt-2 mb-0"
+                    class="list-unstyled mt-1 mb-0"
                   >
                     <template v-for="topic in contact.contact_topics">
                       <li
@@ -83,8 +83,24 @@
                     </template>
                   </ul>
 
+                  <template v-if="contact.contact_type">
+                    <div
+                      v-if="contact.contact_type.slug == 'parent'"
+                      class="my-3"
+                    >
+                      <span class="small text-muted visually-hidden"
+                        >Parent</span
+                      >
+                      <div class="text-danger fs-8">
+                        <i class="bi bi-exclamation-octagon-fill me-1"></i
+                        >Parent contacts should not be discussed this contact
+                        with their student.
+                      </div>
+                    </div>
+                  </template>
+
                   <div v-if="contact.notes" class="mt-3">
-                    <span class="small text-muted visually-hidden">Notes</span>
+                    <span class="small visually-hidden">Notes</span>
                     <p class="text-dark small text-break">
                       {{ contact.notes }}
                     </p>
@@ -93,27 +109,28 @@
                     v-if="contact.actions"
                     class="border-top border-light pt-3"
                   >
-                    <span class="small text-muted visually-hidden"
-                      >Actions</span
-                    >
-                    <p class="text-muted small text-break">
+                    <span class="small visually-hidden">Actions</span>
+                    <p class="small text-break">
                       {{ contact.actions }}
                     </p>
                   </div>
-                  <template v-if="contact.contact_type">
-                    <div v-if="contact.contact_type.slug == 'parent'">
-                      <span class="small text-muted visually-hidden"
-                        >Parent</span
-                      >
-                      <div class="text-danger fs-8">
-                        <i class="bi bi-exclamation-octagon-fill me-1"></i
-                        >Parent contacts should be treated as private. Do not
-                        discuss this contact with their student.
-                      </div>
+
+                  <div class="mt-4 small d-flex justify-content-between">
+                    <div class="text-secondary">
+                      {{
+                        formatUTCToLocalDateAndTimeZone(
+                          contact.checkin_date,
+                          "LLL"
+                        )
+                      }}
                     </div>
-                  </template>
+                    <div v-show="contact.source == 'Checkin'">
+                      <i class="bi bi-journal-check text-gray me-1"></i
+                      >{{ contact.source }} {{ contact.trans_id }}
+                    </div>
+                  </div>
                 </td>
-                <td style="width: 20%" class="p-3 text-end">
+                <td style="width: 25%" class="p-3 text-end">
                   <!-- MARK: user/student role functionality -->
                   <template
                     v-if="
@@ -193,7 +210,7 @@ import dataMixin from "@/mixins/data_mixin.js";
 import AddEditContact from "@/components/add-contact.vue";
 import ManagerEditContact from "@/components/add-contact.vue";
 import DeleteContact from "@/components/delete-contact.vue";
-import { formatUTCToLocalDateAndTimeZone } from "@/utils/dates";
+import { formatUTCToLocalDateAndTimeZone, getTimeFromNow } from "@/utils/dates";
 
 export default {
   mixins: [dataMixin],
@@ -208,7 +225,12 @@ export default {
       required: true,
     },
   },
-  setup() {},
+  setup() {
+    return {
+      formatUTCToLocalDateAndTimeZone,
+      getTimeFromNow,
+    };
+  },
   data() {
     return {
       contacts: {},
@@ -232,9 +254,6 @@ export default {
         }
       );
     },
-    contactDate: function (date) {
-      return formatUTCToLocalDateAndTimeZone(date, "LLL");
-    },
     inUserAccessGroup: function (contact) {
       return contact.access_group.some(
         (group) => group.access_group_id === this.userAccessGroup
diff --git a/compass_vue/utils/dates.js b/compass_vue/utils/dates.js
index bea84215..384ef55d 100644
--- a/compass_vue/utils/dates.js
+++ b/compass_vue/utils/dates.js
@@ -2,9 +2,12 @@ import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
+import relativeTime from "dayjs/plugin/relativeTime";
+
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(relativeTime);
 
 const LOCAL_TIMEZONE = "America/Los_Angeles";
 
@@ -65,6 +68,11 @@ function getMinutesApart(startDate, endDate) {
   return dayjs(endDate).diff(startDate, "minutes");
 }
 
+function getTimeFromNow(date) {
+  return dayjs().to(dayjs(date));
+  //return dayjs().fromNow(date);
+}
+
 export {
   formatDate,
   formatUTCToLocalDate,
@@ -73,4 +81,5 @@ export {
   getYesterday,
   getWeeksApart,
   getMinutesApart,
+  getTimeFromNow,
 };