diff --git a/components/marathon/schedule/List.vue b/components/marathon/schedule/List.vue
index 8c7106cc..802bd96b 100644
--- a/components/marathon/schedule/List.vue
+++ b/components/marathon/schedule/List.vue
@@ -1,90 +1,109 @@
 <template>
   <div>
-    <div class="schedule-container">
+    <ElementTable class="schedule-container">
       <!-- Ad -->
       <AdsByGoogle ad-slot="5905320802" ad-format="" class="is-advertisement" />
       <!-- Header -->
-      <span class="notification is-header expandable" />
-      <span class="notification is-header time">
+      <ElementTableCell is-header class="expandable" />
+      <ElementTableCell is-header class="time">
         {{ $t('marathon.schedule.table.time') }}
-      </span>
-      <span class="notification is-header runners">
+      </ElementTableCell>
+      <ElementTableCell is-header class="runners">
         {{ $t('marathon.schedule.table.runner') }}
-      </span>
-      <span class="notification is-header game">
+      </ElementTableCell>
+      <ElementTableCell is-header class="game">
         {{ $t('marathon.schedule.table.game') }}
-      </span>
-      <span class="notification is-header category">
+      </ElementTableCell>
+      <ElementTableCell is-header class="category">
         {{ $t('marathon.schedule.table.category') }}
-      </span>
-      <span class="notification is-header type">
+      </ElementTableCell>
+      <ElementTableCell is-header class="type">
         {{ $t('marathon.schedule.table.type') }}
-      </span>
-      <span class="notification is-header console">
+      </ElementTableCell>
+      <ElementTableCell is-header class="console">
         {{ $t('marathon.schedule.table.console') }}
-      </span>
-      <span class="notification is-header estimate">
+      </ElementTableCell>
+      <ElementTableCell is-header class="estimate">
         {{ $t('marathon.schedule.table.estimate') }}
-      </span>
-      <span class="notification is-header setup">
+      </ElementTableCell>
+      <ElementTableCell is-header class="setup">
         {{ $t('marathon.schedule.table.setup') }}
-      </span>
+      </ElementTableCell>
       <!-- Main Schedule Loop -->
       <template v-if="runs">
         <template v-for="(run, index) in runs">
+          <!-- XXX @click.native will stop working in Vue v3+ (Vue Router v4+), but @click should start working -->
+
           <!-- Ad -->
           <ClientOnly :key="'wrapper-advertisement' + index">
             <AdsByGoogle v-if="advertisementIndices.includes(index)" :key="'advertisement' + index" ad-slot="5905320802" ad-format="" class="is-advertisement" />
             <div v-show="shouldShowDay(index) && index !== 0" :key="'not-advertisement' + index" class="is-spacer" />
           </ClientOnly>
-          <div v-show="shouldShowDay(index)" :key="'day' + index" class="day notification is-info">
+
+          <ElementTableCell v-show="shouldShowDay(index)" :key="'day' + index" class="day is-info" column-start="1" column-end="-1">
             {{ $d(new Date(run.date), 'longDate') }}
-          </div>
-          <span :id="getId(run)" :key="'expandable' + index" class="notification is-expandable expandable" :class="getRowParity(index, run)" @click="expand(run)">
+          </ElementTableCell>
+
+          <ElementTableCell :id="getId(run)" :key="'expandable' + index" class="is-expandable expandable" :class="getRowParity(index, run)" @click.native="expand(run)">
             <FontAwesomeIcon :icon="[ 'fas', expanded.has(run.id) ? 'caret-down' : 'caret-right' ]" />
-          </span>
-          <span :id="'run-' + run.id" :key="'time' + index" class="notification is-expandable time" :class="getRowParity(index, run)" @click="expand(run)">
+          </ElementTableCell>
+
+          <ElementTableCell :id="'run-' + run.id" :key="'time' + index" class="is-expandable time" :class="getRowParity(index, run)" @click.native="expand(run)">
             {{ $d(new Date(run.date), 'shortTime') }}
-          </span>
-          <span v-if="run.setupBlock" :key="'setupText' + index" class="notification is-expandable setup-text" :class="getRowParity(index, run)" @click="expand(run)">
+          </ElementTableCell>
+
+          <ElementTableCell
+            v-if="run.setupBlock"
+            :key="'setupText' + index"
+            class="is-expandable setup-text"
+            :class="getRowParity(index, run)"
+            column-end="span 2"
+            @click.native="expand(run)"
+          >
             {{ (run.setupBlockText || $t('marathon.schedule.setupBlock')) }}
-          </span>
+          </ElementTableCell>
           <template v-else>
-            <span :key="'runners' + index" class="notification is-expandable runners" :class="getRowParity(index, run)" @click="expand(run)">
+            <ElementTableCell :key="'runners' + index" class="is-expandable runners" :class="getRowParity(index, run)" @click.native="expand(run)">
               <p v-for="runner in run.runners" :key="'runners' + index + 'runner' + runner.id">
                 {{ runner.username }}
               </p>
-            </span>
-            <span :key="'game' + index" class="notification is-expandable game" :class="getRowParity(index, run)" @click="expand(run)">
+            </ElementTableCell>
+            <ElementTableCell :key="'game' + index" class="is-expandable game" :class="getRowParity(index, run)" @click.native="expand(run)">
               {{ run.gameName }}
-            </span>
+            </ElementTableCell>
           </template>
-          <span :key="'category' + index" class="notification is-expandable category" :class="getRowParity(index, run)" @click="expand(run)">
+
+          <ElementTableCell :key="'category' + index" class="is-expandable category" :class="getRowParity(index, run)" @click.native="expand(run)">
             {{ run.categoryName }}
-          </span>
-          <span :key="'type' + index" class="notification is-expandable type" :class="getRowParity(index, run)" @click="expand(run)">
+          </ElementTableCell>
+
+          <ElementTableCell :key="'type' + index" class="is-expandable type" :class="getRowParity(index, run)" @click.native="expand(run)">
             {{ $t(`marathon.schedule.type.${run.type}`) }}
-          </span>
-          <span :key="'console' + index" class="notification is-expandable console" :class="getRowParity(index, run)" @click="expand(run)">
+          </ElementTableCell>
+
+          <ElementTableCell :key="'console' + index" class="is-expandable console" :class="getRowParity(index, run)" @click.native="expand(run)">
             <span>
               {{ run.console }}
             </span>
             <sup v-if="run.emulated">
               {{ $t('global.emu') }}
             </sup>
-          </span>
-          <span :key="'estimate' + index" class="notification is-expandable estimate" :class="getRowParity(index, run)" @click="expand(run)">
+          </ElementTableCell>
+
+          <ElementTableCell :key="'estimate' + index" class="is-expandable estimate" :class="getRowParity(index, run)" @click.native="expand(run)">
             <ElementTemporalDuration :duration="run.estimate" />
-          </span>
-          <span :key="'setup' + index" class="notification is-expandable setup" :class="getRowParity(index, run)" @click="expand(run)">
+          </ElementTableCell>
+
+          <ElementTableCell :key="'setup' + index" class="is-expandable setup" :class="getRowParity(index, run)" @click.native="expand(run)">
             <ElementTemporalDuration :duration="run.setupTime" />
-          </span>
-          <div v-if="expanded.has(run.id)" :key="'expanded' + index" class="expanded-run">
-            <MarathonScheduleRun :run="run" :class="getRowParity(index, run)" />
-          </div>
+          </ElementTableCell>
+
+          <ElementTableDetail v-if="expanded.has(run.id)" :key="'expanded' + index" class="expanded-run" :class="getRowParity(index, run)">
+            <MarathonScheduleRun :run="run" />
+          </ElementTableDetail>
         </template>
       </template>
-    </div>
+    </ElementTable>
     <div class="is-centered">
       <WidgetLoading :while="[ schedule ]" />
     </div>
@@ -107,18 +126,21 @@ export default Vue.extend({
       default: '',
     },
   },
+
   data() {
     return {
       expanded: new Set<number>(),
       interval: undefined as NodeJS.Timeout|undefined,
     };
   },
+
   async fetch(): Promise<void> {
     await Promise.allSettled([
       this.getSchedule(this.marathonId),
       this.getScheduleTicker(this.marathonId),
     ]);
   },
+
   computed: {
     schedule(): Schedule|undefined {
       return (this.$store.state.api.schedule as ScheduleState).schedules[this.marathonId];
@@ -145,6 +167,7 @@ export default Vue.extend({
       return advertisementIndices;
     },
   },
+
   watch: {
     runHash(): void {
       // The `false` makes it so we only expand Current/Next
@@ -152,17 +175,20 @@ export default Vue.extend({
       this.expandRunHash(false);
     },
   },
+
   mounted(): void {
     this.interval = setInterval(() => {
       this.getScheduleTicker(this.marathonId);
     }, 60_000);
     this.expandRunHash();
   },
+
   destroyed(): void {
     if (this.interval) {
       clearInterval(this.interval);
     }
   },
+
   methods: {
     expand(run?: ScheduleLine|number): void {
       if (!run) {
@@ -203,9 +229,10 @@ export default Vue.extend({
           return undefined;
       }
     },
-    getRowParity(index: number, run: ScheduleLine): { 'is-dark': boolean, 'is-primary': boolean } {
+    getRowParity(index: number, run: ScheduleLine): { 'is-primary': boolean, 'is-even': boolean, 'is-odd': boolean } {
       return {
-        'is-dark': index % 2 === 1,
+        'is-even': index % 2 === 0,
+        'is-odd': index % 2 === 1,
         'is-primary': run.id === this.tickers?.current?.id,
       };
     },
@@ -230,27 +257,14 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
   .schedule-container {
-    width: 100%;
-    max-width: 100%;
     overflow-x: auto;
-    display: grid;
     grid-template-columns: repeat(9, auto);
-    grid-auto-rows: auto;
-
-    > *:not(.expanded-run) {
-      // A lot of the notification styling is undesirable in this context
-      padding: calc(var(--spacing) / 2);
-      margin-block-end: 0;
-      border-radius: 0;
-    }
 
     > .is-expandable {
       cursor: pointer;
     }
 
     > .day {
-      // Span from start to finish
-      grid-column: 1 / -1;
       font-weight: bold;
       text-align: center;
     }
@@ -259,44 +273,6 @@ export default Vue.extend({
       width: 10px;
     }
 
-    > .setup-text {
-      grid-column: 3 / 5;
-    }
-
-    > .expanded-run {
-      // Span from start to finish
-      grid-column: 1 / -1;
-      // Needed to allow the proper placement of the before and after
-      position: relative;
-      padding-inline-start: var(--spacing);
-      padding-block: calc(var(--spacing) / 2);
-
-      // Provides the strokes for the L connecting the entry to the detail
-      &::before {
-        content: '';
-        position: absolute;
-        inset-block-start: var(--spacing);
-        inset-inline-start: calc(var(--spacing) / 2);
-        width: calc(var(--spacing) / 2);
-        height: 2px;
-        background-color: #666;
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        inset-block-start: 0;
-        inset-inline-start: calc(var(--spacing) / 2);
-        height: var(--spacing);
-        width: 2px;
-        background-color: #666;
-      }
-    }
-
-    > .is-header {
-      font-weight: bold;
-    }
-
     > .is-spacer {
       // Span from start to finish
       grid-column: 1 / -1;
diff --git a/components/marathon/schedule/Run.vue b/components/marathon/schedule/Run.vue
index 495d4e4e..ac028a35 100644
--- a/components/marathon/schedule/Run.vue
+++ b/components/marathon/schedule/Run.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="notification run-detail-container">
+  <div class="run-detail-container">
     <div class="header">
       <h4 class="title is-4">
         {{ run.setupBlock ? (run.setupBlockText || $t('marathon.schedule.setupBlock')) : run.gameName }}
@@ -79,7 +79,6 @@ export default Vue.extend({
     grid-template-columns: auto 1fr;
     grid-auto-rows: auto;
     gap: calc(var(--spacing) / 2);
-    padding: var(--spacing);
 
     > .header {
       grid-column: 1 / -1;
@@ -104,12 +103,6 @@ export default Vue.extend({
       overflow-x: auto;
     }
   }
-
-  @media (max-width: 1023px) {
-    .run-detail-container {
-      padding: calc(var(--spacing) / 2);
-    }
-  }
 </style>
 
 <!-- Temporary language info to avoid having the i18n string -->