diff --git a/lms/static/scripts/frontend_apps/api-types.ts b/lms/static/scripts/frontend_apps/api-types.ts
index c1ab4422b5..56651228df 100644
--- a/lms/static/scripts/frontend_apps/api-types.ts
+++ b/lms/static/scripts/frontend_apps/api-types.ts
@@ -147,8 +147,13 @@ export type YouTubeVideoInfo = {
  * Dashboard-related API types
  */
 
+/**
+ * Represents dates exposed by the backend as string, in ISO 8601 format
+ */
+export type ISODateTime = string;
+
 export type AnnotationMetrics = {
-  last_activity: string | null;
+  last_activity: ISODateTime | null;
   annotations: number;
   replies: number;
 };
@@ -163,7 +168,7 @@ export type Course = {
 
 export type CourseMetrics = {
   assignments: number;
-  last_launched: string | null;
+  last_launched: ISODateTime | null;
 };
 
 export type CourseWithMetrics = Course & {
@@ -181,7 +186,7 @@ export type Assignment = {
   id: number;
   title: string;
   /** Date in which the assignment was created, in ISO format */
-  created: string;
+  created: ISODateTime;
 };
 
 export type Student = {
@@ -196,7 +201,7 @@ export type AutoGradingGrade = {
   /** Grade that was last synced, if any */
   last_grade: number | null;
   /** When did the last grade sync happen, if any */
-  last_grade_date: number | null;
+  last_grade_date: ISODateTime | null;
 };
 
 export type StudentWithMetrics = Student & {
@@ -302,9 +307,37 @@ export type StudentsResponse = {
   pagination: Pagination;
 };
 
+export type StudentGradingSyncStatus = 'in_progress' | 'finished' | 'failed';
+
+export type StudentGradingSync = {
+  h_userid: string;
+  status: StudentGradingSyncStatus;
+};
+
+export type GradingSyncStatus = 'scheduled' | StudentGradingSyncStatus;
+
 /**
  * Response for `/api/dashboard/assignments/{assignment_id}/grading/sync`
+ * That endpoint returns a 404 when an assignment has never been synced.
  */
 export type GradingSync = {
-  status: 'scheduled' | 'in_progress' | 'finished' | 'failed';
+  /**
+   * Global sync status.
+   * If at least one student grade is syncing, this will be `in_progress`.
+   * If at least one student grade failed, this will be `failed`.
+   * If all student grades finished successfully, this will be `finished`.
+   */
+  status: GradingSyncStatus;
+
+  /**
+   * The date and time when syncing grades finished.
+   * It is null as long as status is `scheduled` or `in_progress`.
+   */
+  finish_date: ISODateTime | null;
+
+  /**
+   * Grading status for every individual student that was scheduled as part of
+   * this sync.
+   */
+  grades: StudentGradingSync[];
 };
diff --git a/lms/static/scripts/frontend_apps/components/RelativeTime.tsx b/lms/static/scripts/frontend_apps/components/RelativeTime.tsx
new file mode 100644
index 0000000000..9f7ad1a5b5
--- /dev/null
+++ b/lms/static/scripts/frontend_apps/components/RelativeTime.tsx
@@ -0,0 +1,38 @@
+import {
+  decayingInterval,
+  formatRelativeDate,
+  formatDateTime,
+} from '@hypothesis/frontend-shared';
+import { useEffect, useMemo, useState } from 'preact/hooks';
+
+export type RelativeTimeProps = {
+  /** The reference date-time, in ISO format */
+  dateTime: string;
+};
+
+/**
+ * Displays a date as a time relative to `now`, making sure it is updated at
+ * appropriate intervals
+ */
+export default function RelativeTime({ dateTime }: RelativeTimeProps) {
+  const [now, setNow] = useState(() => new Date());
+  const absoluteDate = useMemo(
+    () => formatDateTime(dateTime, { includeWeekday: true }),
+    [dateTime],
+  );
+  const relativeDate = useMemo(
+    () => formatRelativeDate(new Date(dateTime), now),
+    [dateTime, now],
+  );
+
+  // Refresh relative timestamp, at a frequency appropriate for the age.
+  useEffect(() => {
+    return decayingInterval(dateTime, () => setNow(new Date()));
+  }, [dateTime]);
+
+  return (
+    <time dateTime={dateTime} title={absoluteDate}>
+      {relativeDate}
+    </time>
+  );
+}
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
index 68cf34326a..6092df7405 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
@@ -1,17 +1,20 @@
+import { ClockIcon } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
-import { useCallback, useMemo } from 'preact/hooks';
+import { useCallback, useMemo, useState } from 'preact/hooks';
 import { useLocation, useParams, useSearch } from 'wouter-preact';
 
 import type {
   AssignmentDetails,
+  GradingSync,
   StudentsMetricsResponse,
 } from '../../api-types';
 import { useConfig } from '../../config';
-import { useAPIFetch } from '../../utils/api';
+import { useAPIFetch, usePolledAPIFetch } from '../../utils/api';
 import { useDashboardFilters } from '../../utils/dashboard/hooks';
 import { courseURL } from '../../utils/dashboard/navigation';
 import { useDocumentTitle } from '../../utils/hooks';
-import { replaceURLParams } from '../../utils/url';
+import { type QueryParams, replaceURLParams } from '../../utils/url';
+import RelativeTime from '../RelativeTime';
 import type {
   DashboardActivityFiltersProps,
   SegmentsType,
@@ -129,27 +132,49 @@ export default function AssignmentActivity() {
         grade: auto_grading_grade?.current_grade ?? 0,
       }));
   }, [isAutoGradingAssignment, students.data]);
-  const onSyncScheduled = useCallback(
+
+  const syncURL = useMemo(
     () =>
-      students.mutate({
-        students: (students.data?.students ?? []).map(
-          ({ auto_grading_grade, ...rest }) =>
-            !auto_grading_grade
-              ? rest
-              : {
-                  ...rest,
-                  auto_grading_grade: {
-                    ...auto_grading_grade,
-                    // Once a sync has been scheduled, update last_grade with
-                    // current_grade value, so that students are no longer
-                    // labelled as "New"
-                    last_grade: auto_grading_grade.current_grade,
-                  },
-                },
-        ),
-      }),
-    [students],
+      isAutoGradingAssignment
+        ? replaceURLParams(routes.assignment_grades_sync, {
+            assignment_id: assignmentId,
+          })
+        : null,
+    [assignmentId, isAutoGradingAssignment, routes.assignment_grades_sync],
   );
+  const [lastSyncParams, setLastSyncParams] = useState<QueryParams>({});
+  const lastSync = usePolledAPIFetch<GradingSync>({
+    path: syncURL,
+    params: lastSyncParams,
+    // Keep polling as long as sync is in progress
+    shouldRefresh: result =>
+      !!result.data &&
+      ['scheduled', 'in_progress'].includes(result.data.status),
+  });
+
+  const onSyncScheduled = useCallback(() => {
+    // Once the request succeeds, we update the params so that polling the
+    // status is triggered again
+    setLastSyncParams({ t: `${Date.now()}` });
+
+    students.mutate({
+      students: (students.data?.students ?? []).map(
+        ({ auto_grading_grade, ...rest }) =>
+          !auto_grading_grade
+            ? rest
+            : {
+                ...rest,
+                auto_grading_grade: {
+                  ...auto_grading_grade,
+                  // Once a sync has been scheduled, update last_grade with
+                  // current_grade value, so that students are no longer
+                  // labelled as "New"
+                  last_grade: auto_grading_grade.current_grade,
+                },
+              },
+      ),
+    });
+  }, [students]);
 
   const rows: StudentsTableRow[] = useMemo(
     () =>
@@ -204,7 +229,7 @@ export default function AssignmentActivity() {
     <div className="flex flex-col gap-y-5">
       <div>
         {assignment.data && (
-          <div className="mb-3 mt-1 w-full">
+          <div className="mb-3 mt-1 w-full flex items-center">
             <DashboardBreadcrumbs
               allCoursesLink={urlWithFilters({ studentIds }, { path: '' })}
               links={[
@@ -217,6 +242,20 @@ export default function AssignmentActivity() {
                 },
               ]}
             />
+            {lastSync.data && (
+              <div
+                className="flex gap-x-1 items-center text-color-text-light"
+                data-testid="last-sync-date"
+              >
+                <ClockIcon />
+                Grades last synced:{' '}
+                {lastSync.data.finish_date ? (
+                  <RelativeTime dateTime={lastSync.data.finish_date} />
+                ) : (
+                  'syncing…'
+                )}
+              </div>
+            )}
           </div>
         )}
         <h2 className="text-lg text-brand font-semibold" data-testid="title">
@@ -265,6 +304,7 @@ export default function AssignmentActivity() {
         {isAutoGradingAssignment && auto_grading_sync_enabled && (
           <SyncGradesButton
             studentsToSync={studentsToSync}
+            lastSync={lastSync}
             onSyncScheduled={onSyncScheduled}
           />
         )}
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/DashboardBreadcrumbs.tsx b/lms/static/scripts/frontend_apps/components/dashboard/DashboardBreadcrumbs.tsx
index 9a36ef94c4..d026c92f66 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/DashboardBreadcrumbs.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/DashboardBreadcrumbs.tsx
@@ -51,7 +51,7 @@ export default function DashboardBreadcrumbs({
 
   return (
     <div
-      className="flex flex-row gap-0.5 w-full font-semibold"
+      className="flex flex-row gap-0.5 grow font-semibold"
       data-testid="breadcrumbs-container"
     >
       {linksWithHome.map(({ title, href }, index) => {
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/SyncGradesButton.tsx b/lms/static/scripts/frontend_apps/components/dashboard/SyncGradesButton.tsx
index 9e14129a6b..0393f2d902 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/SyncGradesButton.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/SyncGradesButton.tsx
@@ -3,14 +3,14 @@ import {
   LeaveIcon,
   SpinnerCircleIcon,
 } from '@hypothesis/frontend-shared';
-import { useCallback, useMemo, useState } from 'preact/hooks';
+import { useCallback, useMemo } from 'preact/hooks';
 import { useParams } from 'wouter-preact';
 
-import type { GradingSync } from '../../api-types';
+import type { GradingSync, GradingSyncStatus } from '../../api-types';
 import { useConfig } from '../../config';
 import { APIError } from '../../errors';
-import { apiCall, usePolledAPIFetch } from '../../utils/api';
-import type { QueryParams } from '../../utils/url';
+import { apiCall } from '../../utils/api';
+import type { FetchResult } from '../../utils/fetch';
 import { replaceURLParams } from '../../utils/url';
 
 export type SyncGradesButtonProps = {
@@ -27,11 +27,15 @@ export type SyncGradesButtonProps = {
    * properly scheduled.
    */
   onSyncScheduled: () => void;
+
+  /** Result of fetching the status of last sync */
+  lastSync: FetchResult<GradingSync>;
 };
 
 export default function SyncGradesButton({
   studentsToSync,
   onSyncScheduled,
+  lastSync,
 }: SyncGradesButtonProps) {
   const { assignmentId } = useParams<{ assignmentId: string }>();
   const { dashboard, api } = useConfig(['dashboard', 'api']);
@@ -44,15 +48,15 @@ export default function SyncGradesButton({
       }),
     [assignmentId, routes.assignment_grades_sync],
   );
-  const [lastSyncParams, setLastSyncParams] = useState<QueryParams>({});
-  const lastSync = usePolledAPIFetch<GradingSync>({
-    path: syncURL,
-    params: lastSyncParams,
-    // Keep polling as long as sync is in progress
-    shouldRefresh: result =>
-      !!result.data &&
-      ['scheduled', 'in_progress'].includes(result.data.status),
-  });
+  const updateSyncStatus = useCallback(
+    (status: GradingSyncStatus) =>
+      lastSync.data &&
+      lastSync.mutate({
+        ...lastSync.data,
+        status,
+      }),
+    [lastSync],
+  );
 
   const buttonContent = useMemo(() => {
     if (!studentsToSync || (lastSync.isLoading && !lastSync.data)) {
@@ -109,7 +113,7 @@ export default function SyncGradesButton({
     studentsToSync.length === 0;
 
   const syncGrades = useCallback(async () => {
-    lastSync.mutate({ status: 'scheduled' });
+    updateSyncStatus('scheduled');
 
     apiCall({
       authToken: api.authToken,
@@ -119,14 +123,15 @@ export default function SyncGradesButton({
         grades: studentsToSync,
       },
     })
-      .then(() => {
-        // Once the request succeeds, we update the params so that polling the
-        // status is triggered again
-        setLastSyncParams({ t: `${Date.now()}` });
-        onSyncScheduled();
-      })
-      .catch(() => lastSync.mutate({ status: 'failed' }));
-  }, [api.authToken, lastSync, onSyncScheduled, studentsToSync, syncURL]);
+      .then(() => onSyncScheduled())
+      .catch(() => updateSyncStatus('failed'));
+  }, [
+    api.authToken,
+    onSyncScheduled,
+    studentsToSync,
+    syncURL,
+    updateSyncStatus,
+  ]);
 
   return (
     <Button variant="primary" onClick={syncGrades} disabled={buttonDisabled}>
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js
index eaff7b663d..5a81c0a9fc 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js
+++ b/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js
@@ -59,10 +59,12 @@ describe('AssignmentActivity', () => {
   };
 
   let fakeUseAPIFetch;
+  let fakeUsePolledAPIFetch;
   let fakeNavigate;
   let fakeUseSearch;
   let fakeMutate;
   let fakeConfig;
+  let shouldRefreshCallback;
   let wrappers;
 
   function setUpFakeUseAPIFetch(
@@ -86,6 +88,16 @@ describe('AssignmentActivity', () => {
     fakeUseAPIFetch = sinon.stub();
     setUpFakeUseAPIFetch();
 
+    fakeUsePolledAPIFetch = sinon.stub().callsFake(({ shouldRefresh }) => {
+      // Save `shouldRefresh` callback so that we can test its behavior directly
+      shouldRefreshCallback = shouldRefresh;
+
+      return {
+        data: null,
+        isLoading: true,
+      };
+    });
+
     fakeNavigate = sinon.stub();
     fakeUseSearch = sinon.stub().returns('current=query');
     fakeMutate = sinon.stub();
@@ -94,6 +106,7 @@ describe('AssignmentActivity', () => {
         routes: {
           assignment: '/api/assignments/:assignment_id',
           students_metrics: '/api/students/metrics',
+          assignment_grades_sync: '/api/assignments/:assignment_id/grades/sync',
         },
         auto_grading_sync_enabled: true,
         assignment_segments_filter_enabled: false,
@@ -111,6 +124,7 @@ describe('AssignmentActivity', () => {
     $imports.$mock({
       '../../utils/api': {
         useAPIFetch: fakeUseAPIFetch,
+        usePolledAPIFetch: fakeUsePolledAPIFetch,
       },
       'wouter-preact': {
         useParams: sinon.stub().returns({ assignmentId: '123' }),
@@ -561,6 +575,106 @@ describe('AssignmentActivity', () => {
         })),
       });
     });
+
+    [
+      {
+        fetchResult: { data: null },
+        expectedResult: false,
+      },
+      {
+        fetchResult: {
+          data: { status: 'scheduled' },
+        },
+        expectedResult: true,
+      },
+      {
+        fetchResult: {
+          data: { status: 'in_progress' },
+        },
+        expectedResult: true,
+      },
+      {
+        fetchResult: {
+          data: { status: 'finished' },
+        },
+        expectedResult: false,
+      },
+    ].forEach(({ fetchResult, expectedResult }) => {
+      it('shouldRefresh callback behaves as expected', () => {
+        createComponent();
+        assert.equal(shouldRefreshCallback(fetchResult), expectedResult);
+      });
+    });
+
+    [
+      {
+        data: null,
+        shouldDisplayLastSyncInfo: false,
+        shouldDisplaySyncing: false,
+      },
+      {
+        data: { status: 'scheduled' },
+        shouldDisplayLastSyncInfo: true,
+        shouldDisplaySyncing: true,
+      },
+      {
+        data: { status: 'in_progress' },
+        shouldDisplayLastSyncInfo: true,
+        shouldDisplaySyncing: true,
+      },
+      {
+        data: {
+          status: 'error',
+          finish_date: '2024-10-02T14:24:15.677924+00:00',
+        },
+        shouldDisplayLastSyncInfo: true,
+        shouldDisplaySyncing: false,
+      },
+      {
+        data: {
+          status: 'finished',
+          finish_date: '2024-10-02T14:24:15.677924+00:00',
+        },
+        shouldDisplayLastSyncInfo: true,
+        shouldDisplaySyncing: false,
+      },
+    ].forEach(({ data, shouldDisplayLastSyncInfo, shouldDisplaySyncing }) => {
+      it('displays the last time grades were synced', () => {
+        fakeUsePolledAPIFetch.returns({
+          data,
+          isLoading: false,
+        });
+
+        const wrapper = createComponent();
+        const lastSyncDate = wrapper.find('[data-testid="last-sync-date"]');
+
+        assert.equal(lastSyncDate.exists(), shouldDisplayLastSyncInfo);
+
+        if (shouldDisplayLastSyncInfo) {
+          assert.equal(
+            lastSyncDate.text().includes('syncing…'),
+            shouldDisplaySyncing,
+          );
+        }
+      });
+    });
+
+    [true, false].forEach(isAutoGradingAssignment => {
+      it('should load last time grades were synced only for auto-grading assignments', () => {
+        setUpFakeUseAPIFetch({
+          ...activeAssignment,
+          auto_grading_config: isAutoGradingAssignment ? {} : null,
+        });
+        createComponent();
+
+        assert.calledWith(
+          fakeUsePolledAPIFetch.lastCall,
+          sinon.match({
+            path: isAutoGradingAssignment ? sinon.match.string : null,
+          }),
+        );
+      });
+    });
   });
 
   context('when assignment has segments', () => {
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/SyncGradesButton-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/SyncGradesButton-test.js
index 0851f23a55..1df3700c25 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/test/SyncGradesButton-test.js
+++ b/lms/static/scripts/frontend_apps/components/dashboard/test/SyncGradesButton-test.js
@@ -13,9 +13,7 @@ import SyncGradesButton, { $imports } from '../SyncGradesButton';
 describe('SyncGradesButton', () => {
   let fakeConfig;
   let fakeApiCall;
-  let fakeUsePolledAPIFetch;
   let fakeOnSyncScheduled;
-  let shouldRefreshCallback;
 
   const studentsToSync = [
     { h_userid: '123', grade: 0.5 },
@@ -24,16 +22,6 @@ describe('SyncGradesButton', () => {
 
   beforeEach(() => {
     fakeApiCall = sinon.stub().resolves(undefined);
-    fakeUsePolledAPIFetch = sinon.stub().callsFake(({ shouldRefresh }) => {
-      // "Collect" shouldRefresh callback so that we can test its behavior
-      // individually
-      shouldRefreshCallback = shouldRefresh;
-
-      return {
-        data: null,
-        isLoading: true,
-      };
-    });
     fakeOnSyncScheduled = sinon.stub();
 
     fakeConfig = {
@@ -49,7 +37,6 @@ describe('SyncGradesButton', () => {
     $imports.$mock({
       '../../utils/api': {
         apiCall: fakeApiCall,
-        usePolledAPIFetch: fakeUsePolledAPIFetch,
       },
       'wouter-preact': {
         useParams: sinon.stub().returns({ assignmentId: '123' }),
@@ -61,11 +48,18 @@ describe('SyncGradesButton', () => {
     $imports.$restore();
   });
 
-  function createComponent(studentsToSync) {
+  function createComponent(
+    studentsToSync,
+    lastSync = {
+      data: null,
+      isLoading: true,
+    },
+  ) {
     return mount(
       <Config.Provider value={fakeConfig}>
         <SyncGradesButton
           studentsToSync={studentsToSync}
+          lastSync={lastSync}
           onSyncScheduled={fakeOnSyncScheduled}
         />
       </Config.Provider>,
@@ -80,36 +74,6 @@ describe('SyncGradesButton', () => {
     return wrapper.find('Button').prop('disabled');
   }
 
-  [
-    {
-      fetchResult: { data: null },
-      expectedResult: false,
-    },
-    {
-      fetchResult: {
-        data: { status: 'scheduled' },
-      },
-      expectedResult: true,
-    },
-    {
-      fetchResult: {
-        data: { status: 'in_progress' },
-      },
-      expectedResult: true,
-    },
-    {
-      fetchResult: {
-        data: { status: 'finished' },
-      },
-      expectedResult: false,
-    },
-  ].forEach(({ fetchResult, expectedResult }) => {
-    it('shouldRefresh callback behaves as expected', () => {
-      createComponent();
-      assert.equal(shouldRefreshCallback(fetchResult), expectedResult);
-    });
-  });
-
   [undefined, studentsToSync].forEach(studentsToSync => {
     it('shows loading text when getting initial data', () => {
       const wrapper = createComponent(studentsToSync);
@@ -121,38 +85,32 @@ describe('SyncGradesButton', () => {
 
   ['scheduled', 'in_progress'].forEach(status => {
     it('shows syncing text when grades are being synced', () => {
-      fakeUsePolledAPIFetch.returns({
+      const wrapper = createComponent(studentsToSync, {
         isLoading: false,
         data: { status },
       });
 
-      const wrapper = createComponent(studentsToSync);
-
       assert.equal(buttonText(wrapper), 'Syncing grades');
       assert.isTrue(isButtonDisabled(wrapper));
     });
   });
 
   it('shows syncing errors and allows to retry', () => {
-    fakeUsePolledAPIFetch.returns({
+    const wrapper = createComponent(studentsToSync, {
       isLoading: false,
       data: { status: 'failed' },
     });
 
-    const wrapper = createComponent(studentsToSync);
-
     assert.equal(buttonText(wrapper), 'Error syncing. Click to retry');
     assert.isFalse(isButtonDisabled(wrapper));
   });
 
   it('shows error when checking current sync status', () => {
-    fakeUsePolledAPIFetch.returns({
+    const wrapper = createComponent(studentsToSync, {
       isLoading: false,
       error: new Error(''),
     });
 
-    const wrapper = createComponent(studentsToSync);
-
     assert.equal(buttonText(wrapper), 'Error checking sync status');
     assert.isFalse(isButtonDisabled(wrapper));
   });
@@ -165,54 +123,44 @@ describe('SyncGradesButton', () => {
     },
   ].forEach(({ students, expectedAmount }) => {
     it('shows the amount of students to be synced when current status is "finished"', () => {
-      fakeUsePolledAPIFetch.returns({
+      const wrapper = createComponent(students, {
         isLoading: false,
         data: { status: 'finished' },
       });
 
-      const wrapper = createComponent(students);
-
       assert.equal(buttonText(wrapper), `Sync ${expectedAmount} grades`);
       assert.isFalse(isButtonDisabled(wrapper));
     });
   });
 
   it('shows the amount of students to be synced when a previous sync has not happened at all', () => {
-    fakeUsePolledAPIFetch.returns({
+    const wrapper = createComponent(studentsToSync, {
       isLoading: false,
       error: new APIError(404, {}),
     });
 
-    const wrapper = createComponent(studentsToSync);
-
     assert.equal(buttonText(wrapper), `Sync ${studentsToSync.length} grades`);
     assert.isFalse(isButtonDisabled(wrapper));
   });
 
   it('shows grades synced when no students need to be synced', () => {
-    fakeUsePolledAPIFetch.returns({
+    const wrapper = createComponent([], {
       isLoading: false,
       data: { status: 'finished' },
     });
 
-    const wrapper = createComponent([]);
-
     assert.equal(buttonText(wrapper), 'Grades synced');
     assert.isTrue(isButtonDisabled(wrapper));
   });
 
-  it('submits grades when the button is clicked, then triggers sync status polling', async () => {
-    const mutate = sinon.stub();
-    fakeUsePolledAPIFetch.returns({
+  it('submits grades when the button is clicked, then calls onSyncScheduled', async () => {
+    const wrapper = createComponent(studentsToSync, {
       isLoading: false,
       data: { status: 'finished' },
-      mutate,
+      mutate: sinon.stub(),
     });
-
-    const wrapper = createComponent(studentsToSync);
     await act(() => wrapper.find('Button').props().onClick());
 
-    assert.calledWith(mutate, { status: 'scheduled' });
     assert.called(fakeApiCall);
     assert.deepEqual(
       {
@@ -227,18 +175,17 @@ describe('SyncGradesButton', () => {
   });
 
   it('sets status to error when scheduling a sync fails', async () => {
+    fakeApiCall.rejects(new Error('Error scheduling'));
+
     const mutate = sinon.stub();
-    fakeUsePolledAPIFetch.returns({
+    const wrapper = createComponent(studentsToSync, {
       isLoading: false,
       data: { status: 'finished' },
       mutate,
     });
-    fakeApiCall.rejects(new Error('Error scheduling'));
-
-    const wrapper = createComponent(studentsToSync);
     await act(() => wrapper.find('Button').props().onClick());
 
-    assert.calledWith(mutate, { status: 'failed' });
+    assert.calledWith(mutate.lastCall, sinon.match({ status: 'failed' }));
     assert.notCalled(fakeOnSyncScheduled);
   });
 
diff --git a/lms/static/scripts/frontend_apps/components/test/RelativeTime-test.js b/lms/static/scripts/frontend_apps/components/test/RelativeTime-test.js
new file mode 100644
index 0000000000..c5ada6c94a
--- /dev/null
+++ b/lms/static/scripts/frontend_apps/components/test/RelativeTime-test.js
@@ -0,0 +1,74 @@
+import { checkAccessibility } from '@hypothesis/frontend-testing';
+import { mount } from 'enzyme';
+import { act } from 'preact/test-utils';
+
+import RelativeTime, { $imports } from '../RelativeTime';
+
+describe('RelativeTime', () => {
+  let clock;
+  let fakeFormatDateTime;
+  let fakeFormatRelativeDate;
+  let fakeDecayingInterval;
+  const dateTime = '2015-05-10T20:18:56.613388+00:00';
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers();
+
+    fakeFormatDateTime = sinon.stub().returns('absolute date');
+    fakeFormatRelativeDate = sinon.stub().returns('relative date');
+    fakeDecayingInterval = sinon.stub();
+
+    $imports.$mock({
+      '@hypothesis/frontend-shared': {
+        formatDateTime: fakeFormatDateTime,
+        formatRelativeDate: fakeFormatRelativeDate,
+        decayingInterval: fakeDecayingInterval,
+      },
+    });
+  });
+
+  afterEach(() => {
+    clock.restore();
+    $imports.$restore();
+  });
+
+  function createComponent() {
+    return mount(<RelativeTime dateTime={dateTime} />);
+  }
+
+  it('sets initial time values', () => {
+    const wrapper = createComponent();
+    const time = wrapper.find('time');
+
+    assert.equal(time.prop('title'), 'absolute date');
+    assert.equal(time.prop('dateTime'), dateTime);
+    assert.equal(wrapper.text(), 'relative date');
+  });
+
+  it('is updated after time passes', () => {
+    fakeDecayingInterval.callsFake((date, callback) => {
+      const id = setTimeout(callback, 10);
+      return () => clearTimeout(id);
+    });
+    const wrapper = createComponent();
+    fakeFormatRelativeDate.returns('60 jiffies');
+
+    act(() => {
+      clock.tick(1000);
+    });
+    wrapper.update();
+
+    assert.equal(wrapper.text(), '60 jiffies');
+  });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility({
+      content: () => {
+        // Fake timers break axe-core.
+        clock.restore();
+        return createComponent();
+      },
+    }),
+  );
+});
diff --git a/lms/static/scripts/frontend_apps/utils/api.ts b/lms/static/scripts/frontend_apps/utils/api.ts
index ef851a88a9..42991f37ca 100644
--- a/lms/static/scripts/frontend_apps/utils/api.ts
+++ b/lms/static/scripts/frontend_apps/utils/api.ts
@@ -217,7 +217,7 @@ export function useAPIFetch<T = unknown>(
 
 export type PolledAPIFetchOptions<T> = {
   /** Path for API call */
-  path: string;
+  path: string | null;
   /** Query params for API call */
   params?: QueryParams;
   /** Determines if, based on the result, the API should be called again */
diff --git a/lms/views/dashboard/api/grading.py b/lms/views/dashboard/api/grading.py
index d10b11e366..66f1169c3a 100644
--- a/lms/views/dashboard/api/grading.py
+++ b/lms/views/dashboard/api/grading.py
@@ -1,10 +1,12 @@
 import logging
+from datetime import UTC
 
 from marshmallow import Schema, fields, validate
 from pyramid.view import view_config
 from sqlalchemy import select
 
 from lms.models import GradingSync, LMSUser
+from lms.models.grading_sync import AutoGradingSyncStatus
 from lms.security import Permissions
 from lms.services import AutoGradingService
 from lms.services.dashboard import DashboardService
@@ -102,6 +104,10 @@ def _start_sync_grades(_request) -> None:
     def _serialize_grading_sync(grading_sync: GradingSync) -> dict:
         return {
             "status": grading_sync.status,
+            "finish_date": grading_sync.updated.replace(tzinfo=UTC).isoformat()
+            if grading_sync.status
+            in {AutoGradingSyncStatus.FINISHED, AutoGradingSyncStatus.FAILED}
+            else None,
             "grades": [
                 {
                     "h_userid": grade.lms_user.h_userid,
diff --git a/tests/unit/lms/views/dashboard/api/grading_test.py b/tests/unit/lms/views/dashboard/api/grading_test.py
index 0c525334cb..97b75128ec 100644
--- a/tests/unit/lms/views/dashboard/api/grading_test.py
+++ b/tests/unit/lms/views/dashboard/api/grading_test.py
@@ -1,8 +1,10 @@
+from datetime import UTC
 from unittest.mock import Mock
 
 import pytest
 from h_matchers import Any
 
+from lms.models.grading_sync import AutoGradingSyncStatus
 from lms.views.dashboard.api.grading import DashboardGradingViews
 from tests import factories
 
@@ -89,6 +91,7 @@ def test_create_grading_sync(
         )
         assert response == {
             "status": auto_grading_service.create_grade_sync.return_value.status,
+            "finish_date": None,
             "grades": [],
         }
         pyramid_request.add_finished_callback.assert_called_once_with(
@@ -114,6 +117,10 @@ def test_get_grading_sync(
         )
         assert response == {
             "status": grading_sync.status,
+            "finish_date": grading_sync.updated.replace(tzinfo=UTC).isoformat()
+            if grading_sync.status
+            in {AutoGradingSyncStatus.FINISHED, AutoGradingSyncStatus.FAILED}
+            else None,
             "grades": Any.list.containing(
                 [
                     {"grade": 1.0, "h_userid": "STUDENT_1", "status": "in_progress"},