diff --git a/frontend/website/src/views/DashboardView.vue b/frontend/website/src/views/DashboardView.vue
index a46d3fe..422dcf5 100644
--- a/frontend/website/src/views/DashboardView.vue
+++ b/frontend/website/src/views/DashboardView.vue
@@ -67,6 +67,10 @@ function overdueLabel(scheduledDate: string): string {
   return `Overdue · Due ${formatDate(scheduledDate)}`
 }
 
+function stackLayerCount(dueCount: number): number {
+  return Math.min(dueCount - 1, 3)
+}
+
 async function completeAssignment(assignmentId: number): Promise<void> {
   await schedulesStore.setAssignmentCompleted(assignmentId, true)
 }
@@ -115,11 +119,22 @@ async function completeAssignment(assignmentId: number): Promise<void> {
           v-for="queue in todayAssignmentQueues"
           :key="queue.assignment.schedule.id"
           class="today-assignment-stack"
-          :class="{ 'today-assignment-stack--queued': queue.dueCount > 1 }"
+          :class="[
+            `today-assignment-stack--layers-${stackLayerCount(queue.dueCount)}`,
+            { 'today-assignment-stack--queued': queue.dueCount > 1 },
+          ]"
           :data-due-count="queue.dueCount"
           :data-today-assignment="queue.assignment.id"
           :data-today-schedule="queue.assignment.schedule.id"
         >
+          <span
+            v-for="layerIndex in stackLayerCount(queue.dueCount)"
+            :key="layerIndex"
+            aria-hidden="true"
+            class="today-assignment-stack__layer"
+            :class="`today-assignment-stack__layer--${layerIndex}`"
+            data-stack-layer
+          ></span>
           <article class="today-assignment">
             <RouterLink
               class="today-assignment-link"
@@ -403,31 +418,43 @@ async function completeAssignment(assignmentId: number): Promise<void> {
 }
 
 .today-assignment-stack--queued {
-  padding: 0 0.55rem 0.55rem 0;
+  padding-left: 0.18rem;
 }
 
-.today-assignment-stack--queued::before,
-.today-assignment-stack--queued::after {
+.today-assignment-stack--layers-2 {
+  padding-left: 0.36rem;
+}
+
+.today-assignment-stack--layers-3 {
+  padding-left: 0.54rem;
+}
+
+.today-assignment-stack__layer {
   position: absolute;
-  pointer-events: none;
-  content: '';
-}
-
-.today-assignment-stack--queued::before {
-  z-index: 1;
-  inset: 0.28rem 0.28rem 0.28rem 0.28rem;
-  border: 1px solid rgb(24 48 41 / 10%);
-  border-radius: 1rem;
+  top: 0.3rem;
+  right: 0;
+  bottom: 0.3rem;
+  border: 1px solid rgb(24 48 41 / 9%);
+  border-radius: 0.85rem;
   background: #eee9dc;
-  transform: translate(0.28rem, 0.28rem);
+  pointer-events: none;
 }
 
-.today-assignment-stack--queued::after {
-  z-index: 0;
-  inset: 0.55rem 0 0 0.55rem;
-  border: 1px solid rgb(24 48 41 / 8%);
-  border-radius: 1rem;
-  background: #e5dfd1;
+.today-assignment-stack__layer--1 {
+  z-index: 1;
+  left: 0;
+}
+
+.today-assignment-stack__layer--2 {
+  z-index: 2;
+  left: 0.18rem;
+  background: #e9e3d5;
+}
+
+.today-assignment-stack__layer--3 {
+  z-index: 3;
+  left: 0.36rem;
+  background: #e4ddce;
 }
 
 .today-assignment-link {
@@ -438,12 +465,12 @@ async function completeAssignment(assignmentId: number): Promise<void> {
 
 .today-assignment {
   position: relative;
-  z-index: 2;
+  z-index: 4;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: 1.4rem;
+  padding: 1.15rem;
   border: 1px solid rgb(24 48 41 / 12%);
   border-radius: 1rem;
   background: linear-gradient(135deg, rgb(255 253 247 / 98%), rgb(244 238 225 / 86%));
@@ -487,7 +514,7 @@ async function completeAssignment(assignmentId: number): Promise<void> {
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
-  margin-top: 0.85rem;
+  margin-top: 0.65rem;
 }
 
 .today-assignment__overdue,
@@ -512,7 +539,7 @@ async function completeAssignment(assignmentId: number): Promise<void> {
 }
 
 .today-assignment__path {
-  margin: 1.75rem 0 0;
+  margin: 1.15rem 0 0;
   color: #183029;
   font-family: Georgia, 'Times New Roman', serif;
   font-size: 1.45rem;
@@ -523,7 +550,7 @@ async function completeAssignment(assignmentId: number): Promise<void> {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  margin-top: 1.25rem;
+  margin-top: 0.85rem;
   color: #567064;
   font-size: 0.76rem;
   font-weight: 750;
@@ -534,13 +561,13 @@ async function completeAssignment(assignmentId: number): Promise<void> {
   justify-items: start;
   gap: 0.65rem;
   margin-top: auto;
-  padding-top: 1.15rem;
+  padding-top: 0.85rem;
   border-top: 1px solid rgb(24 48 41 / 10%);
 }
 
 .assignment-completion-button {
-  min-height: 2.5rem;
-  padding: 0.6rem 0.9rem;
+  min-height: 2.35rem;
+  padding: 0.5rem 0.8rem;
   border: 1px solid rgb(24 58 49 / 28%);
   border-radius: 0.7rem;
   color: #fffdf7;