diff --git a/frontend/website/cypress/e2e/set-scheduling.cy.ts b/frontend/website/cypress/e2e/set-scheduling.cy.ts
index 2a6984e..0511405 100644
--- a/frontend/website/cypress/e2e/set-scheduling.cy.ts
+++ b/frontend/website/cypress/e2e/set-scheduling.cy.ts
@@ -236,10 +236,8 @@ describe('set scheduling', () => {
       'contain.text',
       'Exodus / Shemot / Chapter 1',
     )
-    cy.get('[data-assignment-section="completed"]')
-      .should('not.have.attr', 'open')
-      .find('summary')
-      .click()
+    cy.get('[data-assignment-section="completed"]').should('not.have.attr', 'open')
+    cy.get('[data-assignment-section="completed"] summary').click()
     cy.get('[data-assignment-section="completed"]').should(
       'contain.text',
       'No assignments completed yet.',
@@ -342,26 +340,29 @@ describe('set scheduling', () => {
         cy.get('[data-schedule-date="2026-08-13"]').should('not.exist')
       })
 
-    cy.get('[data-assignment-section="completed"]')
-      .should('have.attr', 'data-assignment-count', '2')
-      .and('not.have.attr', 'open')
-      .within(() => {
-        cy.get('summary').should('contain.text', 'Completed').click()
-        cy.get('[data-schedule-day]').then(($days) => {
-          expect([...$days].map((day) => day.getAttribute('data-schedule-date'))).to.deep.equal([
-            '2026-08-12',
-            '2026-08-13',
-          ])
-        })
-        cy.get('[data-schedule-date="2026-08-12"]')
-          .should('contain.text', 'Exodus / Shemot / Chapter 1')
-          .and('not.contain.text', 'Leviticus / Vayikra / Chapter 1')
-        cy.get('[data-schedule-date="2026-08-13"]').should(
-          'contain.text',
-          'Numbers / Bamidbar / Chapter 1',
-        )
-        cy.contains('Rest day').should('not.exist')
+    cy.get('[data-assignment-section="completed"]').should(
+      'have.attr',
+      'data-assignment-count',
+      '2',
+    )
+    cy.get('[data-assignment-section="completed"]').should('not.have.attr', 'open')
+    cy.get('[data-assignment-section="completed"]').within(() => {
+      cy.get('summary').should('contain.text', 'Completed').click()
+      cy.get('[data-schedule-day]').then(($days) => {
+        expect([...$days].map((day) => day.getAttribute('data-schedule-date'))).to.deep.equal([
+          '2026-08-12',
+          '2026-08-13',
+        ])
       })
+      cy.get('[data-schedule-date="2026-08-12"]')
+        .should('contain.text', 'Exodus / Shemot / Chapter 1')
+        .and('not.contain.text', 'Leviticus / Vayikra / Chapter 1')
+      cy.get('[data-schedule-date="2026-08-13"]').should(
+        'contain.text',
+        'Numbers / Bamidbar / Chapter 1',
+      )
+      cy.contains('Rest day').should('not.exist')
+    })
 
     cy.viewport(375, 667)
     cy.document().then((document) => {
diff --git a/frontend/website/src/components/ScheduleAssignmentTimeline.vue b/frontend/website/src/components/ScheduleAssignmentTimeline.vue
new file mode 100644
index 0000000..779d712
--- /dev/null
+++ b/frontend/website/src/components/ScheduleAssignmentTimeline.vue
@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import type { ScheduleDetail } from '@/stores/schedules'
+
+type ScheduleDay = ScheduleDetail['days'][number]
+
+const props = defineProps<{
+  completionErrors: Record<number, string>
+  days: ScheduleDay[]
+  mode: 'remaining' | 'completed'
+  pendingAssignmentIds: number[]
+  today: string
+}>()
+
+const emit = defineEmits<{
+  setCompleted: [assignmentId: number, completed: boolean]
+}>()
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeZone: 'UTC',
+  }).format(new Date(`${value}T00:00:00Z`))
+}
+
+function formatCompletionTime(value: string): string {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(new Date(value))
+}
+
+function dayAssignmentSummary(day: ScheduleDay): string {
+  if (day.assignments.length === 0) {
+    return '0 assigned'
+  }
+
+  const assignmentLabel = props.mode === 'remaining' ? 'remaining' : 'completed'
+
+  return `${day.assignments.length} ${assignmentLabel}`
+}
+
+function isOverdue(day: ScheduleDay): boolean {
+  return props.mode === 'remaining' && day.assignments.length > 0 && day.date < props.today
+}
+
+function isPending(assignmentId: number): boolean {
+  return props.pendingAssignmentIds.includes(assignmentId)
+}
+</script>
+
+<template>
+  <ol
+    class="schedule-days"
+    :class="{ 'schedule-days--completed': mode === 'completed' }"
+    :aria-label="
+      mode === 'remaining'
+        ? 'Remaining assignments by scheduled date'
+        : 'Completed assignments by scheduled date'
+    "
+  >
+    <li
+      v-for="day in days"
+      :key="day.date"
+      class="schedule-day"
+      data-schedule-day
+      :data-schedule-date="day.date"
+    >
+      <header class="schedule-day__header">
+        <time :datetime="day.date">{{ formatDate(day.date) }}</time>
+        <span class="schedule-day__summary">
+          <span v-if="isOverdue(day)" class="overdue-label">Overdue</span>
+          <span>{{ dayAssignmentSummary(day) }}</span>
+        </span>
+      </header>
+
+      <p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
+
+      <ul v-else class="assignment-list">
+        <li
+          v-for="assignment in day.assignments"
+          :key="assignment.id"
+          :class="{ 'is-completed': assignment.completedAt !== null }"
+          :data-schedule-assignment="assignment.id"
+        >
+          <div class="assignment-description">
+            <span class="assignment-path">
+              {{ assignment.element.path.join(' / ') }}
+            </span>
+            <span class="assignment-kind">{{ assignment.element.kind }}</span>
+          </div>
+          <div class="assignment-completion">
+            <p v-if="assignment.completedAt !== null" class="assignment-completion__status">
+              Completed
+              <time :datetime="assignment.completedAt">
+                {{ formatCompletionTime(assignment.completedAt) }}
+              </time>
+            </p>
+            <p v-else class="assignment-completion__status">Not completed</p>
+            <button
+              type="button"
+              class="assignment-completion-button"
+              :aria-label="
+                assignment.completedAt === null
+                  ? `Mark ${assignment.element.path.join(' / ')} complete`
+                  : `Reopen ${assignment.element.path.join(' / ')}`
+              "
+              :disabled="isPending(assignment.id)"
+              @click="emit('setCompleted', assignment.id, assignment.completedAt === null)"
+            >
+              {{
+                isPending(assignment.id)
+                  ? 'Saving...'
+                  : assignment.completedAt === null
+                    ? 'Mark complete'
+                    : 'Reopen'
+              }}
+            </button>
+            <p
+              v-if="completionErrors[assignment.id] !== undefined"
+              class="assignment-completion__error"
+              role="alert"
+            >
+              {{ completionErrors[assignment.id] }}
+            </p>
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.schedule-days {
+  display: grid;
+  gap: 1rem;
+  margin: 1.4rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.schedule-day {
+  overflow: hidden;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  background: rgb(255 253 247 / 82%);
+  box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
+}
+
+.schedule-days--completed .schedule-day {
+  background: rgb(248 248 241 / 78%);
+  box-shadow: none;
+}
+
+.schedule-day__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid rgb(24 48 41 / 10%);
+  color: #5e7067;
+  background: rgb(239 228 212 / 42%);
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.schedule-days--completed .schedule-day__header {
+  background: rgb(220 235 224 / 34%);
+}
+
+.schedule-day__summary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.55rem;
+}
+
+.overdue-label {
+  padding: 0.25rem 0.45rem;
+  border-radius: 999px;
+  color: #8f382d;
+  background: #f4dcd5;
+  font-size: 0.62rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.rest-day {
+  margin: 0;
+  padding: 1.2rem 1rem;
+  color: #79877f;
+  font-style: italic;
+}
+
+.assignment-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.assignment-list li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.assignment-list li.is-completed {
+  background: rgb(220 235 224 / 24%);
+}
+
+.assignment-list li + li {
+  border-top: 1px solid rgb(24 48 41 / 10%);
+}
+
+.assignment-path {
+  min-width: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.05rem;
+  overflow-wrap: anywhere;
+}
+
+.assignment-description {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.assignment-kind {
+  flex: 0 0 auto;
+  padding: 0.35rem 0.55rem;
+  border-radius: 999px;
+  color: #81533a;
+  background: #efe4d4;
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: none;
+}
+
+.assignment-completion {
+  display: grid;
+  justify-items: end;
+  gap: 0.55rem;
+  min-width: 12rem;
+}
+
+.assignment-completion__status,
+.assignment-completion__error {
+  margin: 0;
+  font-size: 0.74rem;
+  font-weight: 700;
+  text-align: right;
+}
+
+.assignment-completion__status {
+  color: #5e7067;
+}
+
+.assignment-completion__status time {
+  display: block;
+  margin-top: 0.2rem;
+  color: #344e45;
+}
+
+.assignment-completion__error {
+  max-width: 14rem;
+  color: #9b3f32;
+}
+
+.assignment-completion-button {
+  min-height: 2.4rem;
+  padding: 0.55rem 0.8rem;
+  border: 1px solid rgb(24 58 49 / 28%);
+  border-radius: 0.65rem;
+  color: #183a31;
+  background: #fffdf7;
+  font-size: 0.75rem;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.is-completed .assignment-completion-button {
+  color: #5e7067;
+  background: transparent;
+}
+
+.assignment-completion-button:hover:not(:disabled) {
+  border-color: #285c4e;
+  background: #f9f5e9;
+}
+
+.assignment-completion-button:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
+.assignment-completion-button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+@media (max-width: 37.5rem) {
+  .schedule-day__header {
+    align-items: flex-start;
+  }
+
+  .schedule-day__summary {
+    flex-wrap: wrap;
+  }
+
+  .assignment-list li {
+    grid-template-columns: 1fr;
+  }
+
+  .assignment-description {
+    align-items: flex-start;
+  }
+
+  .assignment-completion {
+    justify-items: start;
+    min-width: 0;
+  }
+
+  .assignment-completion__status,
+  .assignment-completion__error {
+    text-align: left;
+  }
+}
+</style>
diff --git a/frontend/website/src/views/ScheduleDetailView.vue b/frontend/website/src/views/ScheduleDetailView.vue
index 9a455a9..5c72243 100644
--- a/frontend/website/src/views/ScheduleDetailView.vue
+++ b/frontend/website/src/views/ScheduleDetailView.vue
@@ -1,15 +1,55 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
-import { useSchedulesStore } from '@/stores/schedules'
+import ScheduleAssignmentTimeline from '@/components/ScheduleAssignmentTimeline.vue'
+import { useSchedulesStore, type ScheduleDetail } from '@/stores/schedules'
+
+type ScheduleDay = ScheduleDetail['days'][number]
 
 const route = useRoute()
 const schedulesStore = useSchedulesStore()
-const { activeSchedule, detailLoading, detailError, detailNotFound } = storeToRefs(schedulesStore)
+const {
+  activeSchedule,
+  assignmentCompletionErrors,
+  assignmentCompletionPendingIds,
+  detailLoading,
+  detailError,
+  detailNotFound,
+} = storeToRefs(schedulesStore)
 const currentScheduleId = ref<number | null>(null)
+const completionAnnouncement = ref('')
+const todayDate = browserDate(new Date())
+
+const remainingDays = computed<ScheduleDay[]>(() => {
+  if (activeSchedule.value === null) {
+    return []
+  }
+
+  return activeSchedule.value.days.flatMap((day) => {
+    const assignments = day.assignments.filter((assignment) => assignment.completedAt === null)
+    const isRestDay = day.assignments.length === 0
+
+    return assignments.length > 0 || isRestDay ? [{ date: day.date, assignments }] : []
+  })
+})
+
+const completedDays = computed<ScheduleDay[]>(() => {
+  if (activeSchedule.value === null) {
+    return []
+  }
+
+  return activeSchedule.value.days.flatMap((day) => {
+    const assignments = day.assignments.filter((assignment) => assignment.completedAt !== null)
+
+    return assignments.length > 0 ? [{ date: day.date, assignments }] : []
+  })
+})
+
+const remainingAssignmentCount = computed(() => assignmentCount(remainingDays.value))
+const completedAssignmentCount = computed(() => assignmentCount(completedDays.value))
 
 watch(
   () => route.params.scheduleId,
@@ -40,15 +80,27 @@ function formatDate(value: string): string {
   }).format(new Date(`${value}T00:00:00Z`))
 }
 
-function formatCompletionTime(value: string): string {
-  return new Intl.DateTimeFormat('en', {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(new Date(value))
+function browserDate(date: Date): string {
+  const year = String(date.getFullYear()).padStart(4, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+
+  return `${year}-${month}-${day}`
+}
+
+function assignmentCount(days: ScheduleDay[]): number {
+  return days.reduce((count, day) => count + day.assignments.length, 0)
 }
 
 async function setAssignmentCompleted(assignmentId: number, completed: boolean): Promise<void> {
-  await schedulesStore.setAssignmentCompleted(assignmentId, completed)
+  completionAnnouncement.value = ''
+  const updated = await schedulesStore.setAssignmentCompleted(assignmentId, completed)
+
+  if (updated) {
+    completionAnnouncement.value = completed
+      ? 'Assignment moved to Completed.'
+      : 'Assignment moved to Remaining.'
+  }
 }
 </script>
 
@@ -93,73 +145,82 @@ async function setAssignmentCompleted(assignmentId: number, completed: boolean):
           </p>
         </header>
 
-        <ol class="schedule-days" aria-label="Scheduled days">
-          <li
-            v-for="day in activeSchedule.days"
-            :key="day.date"
-            class="schedule-day"
-            data-schedule-day
-            :data-schedule-date="day.date"
-          >
-            <header class="schedule-day__header">
-              <time :datetime="day.date">{{ formatDate(day.date) }}</time>
-              <span>{{ day.assignments.length }} assigned</span>
-            </header>
+        <p
+          class="completion-announcement"
+          role="status"
+          aria-live="polite"
+          data-completion-announcement
+        >
+          {{ completionAnnouncement }}
+        </p>
 
-            <p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
+        <section
+          class="assignment-section assignment-section--remaining"
+          aria-labelledby="remaining-assignments-heading"
+          data-assignment-section="remaining"
+          :data-assignment-count="remainingAssignmentCount"
+        >
+          <header class="assignment-section__header">
+            <div>
+              <p class="assignment-section__eyebrow">Your plan</p>
+              <h2 id="remaining-assignments-heading">Remaining</h2>
+              <p>Everything still ahead, kept in scheduled order.</p>
+            </div>
+            <span class="assignment-section__count">
+              {{ remainingAssignmentCount }}
+              {{ remainingAssignmentCount === 1 ? 'assignment' : 'assignments' }}
+            </span>
+          </header>
 
-            <ul v-else class="assignment-list">
-              <li
-                v-for="assignment in day.assignments"
-                :key="assignment.id"
-                :class="{ 'is-completed': assignment.completedAt !== null }"
-                :data-schedule-assignment="assignment.id"
-              >
-                <div class="assignment-description">
-                  <span class="assignment-path">
-                    {{ assignment.element.path.join(' / ') }}
-                  </span>
-                  <span class="assignment-kind">{{ assignment.element.kind }}</span>
-                </div>
-                <div class="assignment-completion">
-                  <p v-if="assignment.completedAt !== null" class="assignment-completion__status">
-                    Completed
-                    <time :datetime="assignment.completedAt">
-                      {{ formatCompletionTime(assignment.completedAt) }}
-                    </time>
-                  </p>
-                  <p v-else class="assignment-completion__status">Not completed</p>
-                  <button
-                    type="button"
-                    class="assignment-completion-button"
-                    :aria-label="
-                      assignment.completedAt === null
-                        ? `Mark ${assignment.element.path.join(' / ')} complete`
-                        : `Reopen ${assignment.element.path.join(' / ')}`
-                    "
-                    :disabled="schedulesStore.isAssignmentCompletionPending(assignment.id)"
-                    @click="setAssignmentCompleted(assignment.id, assignment.completedAt === null)"
-                  >
-                    {{
-                      schedulesStore.isAssignmentCompletionPending(assignment.id)
-                        ? 'Saving...'
-                        : assignment.completedAt === null
-                          ? 'Mark complete'
-                          : 'Reopen'
-                    }}
-                  </button>
-                  <p
-                    v-if="schedulesStore.assignmentCompletionError(assignment.id) !== null"
-                    class="assignment-completion__error"
-                    role="alert"
-                  >
-                    {{ schedulesStore.assignmentCompletionError(assignment.id) }}
-                  </p>
-                </div>
-              </li>
-            </ul>
-          </li>
-        </ol>
+          <p v-if="remainingAssignmentCount === 0" class="section-state" role="status">
+            All assignments are complete.
+          </p>
+
+          <ScheduleAssignmentTimeline
+            v-if="remainingDays.length > 0"
+            :completion-errors="assignmentCompletionErrors"
+            :days="remainingDays"
+            mode="remaining"
+            :pending-assignment-ids="assignmentCompletionPendingIds"
+            :today="todayDate"
+            @set-completed="setAssignmentCompleted"
+          />
+        </section>
+
+        <details
+          class="assignment-section completed-section"
+          data-assignment-section="completed"
+          :data-assignment-count="completedAssignmentCount"
+        >
+          <summary class="completed-section__summary">
+            <span class="completed-section__introduction">
+              <span class="completed-section__heading">Completed</span>
+              <span>Finished work, grouped by its original schedule date.</span>
+            </span>
+            <span class="completed-section__controls">
+              <span class="assignment-section__count">
+                {{ completedAssignmentCount }}
+                {{ completedAssignmentCount === 1 ? 'assignment' : 'assignments' }}
+              </span>
+              <span class="completed-section__chevron" aria-hidden="true">⌄</span>
+            </span>
+          </summary>
+
+          <div class="completed-section__content">
+            <p v-if="completedAssignmentCount === 0" class="section-state" role="status">
+              No assignments completed yet.
+            </p>
+            <ScheduleAssignmentTimeline
+              v-else
+              :completion-errors="assignmentCompletionErrors"
+              :days="completedDays"
+              mode="completed"
+              :pending-assignment-ids="assignmentCompletionPendingIds"
+              :today="todayDate"
+              @set-completed="setAssignmentCompleted"
+            />
+          </div>
+        </details>
       </template>
     </section>
   </main>
@@ -233,153 +294,142 @@ h1 {
   color: #68776f;
 }
 
-.schedule-days {
-  display: grid;
-  gap: 1rem;
-  margin: 3rem 0 0;
+.completion-announcement {
+  position: absolute;
+  width: 1px;
+  height: 1px;
   padding: 0;
-  list-style: none;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.schedule-day {
+.assignment-section {
+  margin-top: 3rem;
+}
+
+.assignment-section__header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.assignment-section__eyebrow {
+  margin: 0 0 0.45rem;
+  color: #926044;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.assignment-section__header h2,
+.completed-section__heading {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-weight: 500;
+  letter-spacing: -0.035em;
+}
+
+.assignment-section__header h2 {
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3rem);
+  line-height: 1;
+}
+
+.assignment-section__header p:last-child {
+  margin: 0.65rem 0 0;
+  color: #68776f;
+  line-height: 1.55;
+}
+
+.assignment-section__count {
+  flex: 0 0 auto;
+  padding: 0.45rem 0.7rem;
+  border-radius: 999px;
+  color: #4f665d;
+  background: rgb(224 233 223 / 72%);
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.section-state {
+  display: grid;
+  min-height: 6rem;
+  place-items: center;
+  margin: 1.4rem 0 0;
+  padding: 1.25rem;
+  border: 1px dashed rgb(24 48 41 / 18%);
+  border-radius: 1rem;
+  color: #5e7067;
+  background: rgb(255 253 247 / 52%);
+  text-align: center;
+}
+
+.completed-section {
   overflow: hidden;
   border: 1px solid rgb(24 48 41 / 12%);
   border-radius: 1rem;
-  background: rgb(255 253 247 / 82%);
-  box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
+  background: rgb(246 245 237 / 78%);
 }
 
-.schedule-day__header {
+.completed-section__summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid rgb(24 48 41 / 10%);
-  color: #5e7067;
-  background: rgb(239 228 212 / 42%);
-  font-size: 0.75rem;
-  font-weight: 800;
-}
-
-.rest-day {
-  margin: 0;
-  padding: 1.2rem 1rem;
-  color: #79877f;
-  font-style: italic;
-}
-
-.assignment-list {
-  display: grid;
-  gap: 0;
-  margin: 0;
-  padding: 0;
+  gap: 1.5rem;
+  padding: 1.15rem 1.25rem;
+  cursor: pointer;
   list-style: none;
 }
 
-.assignment-list li {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 1rem;
-  padding: 1rem;
+.completed-section__summary::-webkit-details-marker {
+  display: none;
 }
 
-.assignment-list li.is-completed {
-  background: rgb(220 235 224 / 34%);
-}
-
-.assignment-list li + li {
-  border-top: 1px solid rgb(24 48 41 / 10%);
-}
-
-.assignment-path {
-  min-width: 0;
-  font-family: Georgia, 'Times New Roman', serif;
-  font-size: 1.05rem;
-  overflow-wrap: anywhere;
-}
-
-.assignment-description {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  min-width: 0;
-}
-
-.assignment-kind {
-  flex: 0 0 auto;
-  padding: 0.35rem 0.55rem;
-  border-radius: 999px;
-  color: #81533a;
-  background: #efe4d4;
-  font-size: 0.62rem;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  text-transform: none;
-}
-
-.assignment-completion {
-  display: grid;
-  justify-items: end;
-  gap: 0.55rem;
-  min-width: 12rem;
-}
-
-.assignment-completion__status,
-.assignment-completion__error {
-  margin: 0;
-  font-size: 0.74rem;
-  font-weight: 700;
-  text-align: right;
-}
-
-.assignment-completion__status {
-  color: #5e7067;
-}
-
-.assignment-completion__status time {
-  display: block;
-  margin-top: 0.2rem;
-  color: #344e45;
-}
-
-.assignment-completion__error {
-  max-width: 14rem;
-  color: #9b3f32;
-}
-
-.assignment-completion-button {
-  min-height: 2.4rem;
-  padding: 0.55rem 0.8rem;
-  border: 1px solid rgb(24 58 49 / 28%);
-  border-radius: 0.65rem;
-  color: #183a31;
-  background: #fffdf7;
-  font-size: 0.75rem;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.is-completed .assignment-completion-button {
-  color: #5e7067;
-  background: transparent;
-}
-
-.assignment-completion-button:hover:not(:disabled) {
-  border-color: #285c4e;
-  background: #f9f5e9;
-}
-
-.assignment-completion-button:focus-visible {
+.completed-section__summary:focus-visible {
   outline: 3px solid rgb(86 127 112 / 34%);
-  outline-offset: 0.25rem;
+  outline-offset: -0.25rem;
 }
 
-.assignment-completion-button:disabled {
-  cursor: wait;
-  opacity: 0.65;
+.completed-section__introduction {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.completed-section__heading {
+  color: #344e45;
+  font-size: 1.35rem;
+}
+
+.completed-section__introduction > span:last-child {
+  color: #79877f;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.completed-section__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.completed-section__chevron {
+  color: #68776f;
+  font-size: 1.35rem;
+  line-height: 1;
+  transition: transform 160ms ease;
+}
+
+.completed-section[open] .completed-section__chevron {
+  transform: rotate(180deg);
+}
+
+.completed-section__content {
+  padding: 0 1rem 1rem;
+  border-top: 1px solid rgb(24 48 41 / 10%);
 }
 
 .page-state {
@@ -430,22 +480,26 @@ h1 {
     margin-top: 3rem;
   }
 
-  .assignment-list li {
-    grid-template-columns: 1fr;
-  }
-
-  .assignment-description {
+  .assignment-section__header {
     align-items: flex-start;
+    flex-direction: column;
+    gap: 1rem;
   }
 
-  .assignment-completion {
-    justify-items: start;
-    min-width: 0;
+  .completed-section__summary {
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1rem;
   }
 
-  .assignment-completion__status,
-  .assignment-completion__error {
-    text-align: left;
+  .completed-section__controls {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.35rem;
+  }
+
+  .completed-section__content {
+    padding: 0 0.75rem 0.75rem;
   }
 }
 </style>