diff --git a/data/archive.ts b/data/archive.ts
index 5b7fb72..bb94f81 100644
--- a/data/archive.ts
+++ b/data/archive.ts
@@ -8,6 +8,8 @@ export interface SeriesArchive {
 
 export interface QuarterArchive {
   name: string;
+  season: "w" | "s" | "u" | "f";
+  year: number;
   series: SeriesArchive[];
 }
 
@@ -19,7 +21,7 @@ for (const event of eventData) {
   if (!event.type) continue;
 
   const idComponents = event.id.split("-");
-  if (idComponents.length >= 2 && /^[fws]\d\d$/.test(idComponents[0])) {
+  if (idComponents.length >= 2 && /^[wsuf]\d\d$/.test(idComponents[0])) {
     if (!quarters.has(idComponents[0])) {
       quarters.set(idComponents[0], new Map());
     }
@@ -36,22 +38,32 @@ for (const event of eventData) {
   }
 }
 
+const SEASONS = { "w": 0, "s": 1, "u": 2, "f": 3 };
+
 const archive: QuarterArchive[] = [...quarters.entries()].map(([quarterId, quarterMap]) => {
+  const seasonChar = quarterId.charAt(0);
   let season;
-  switch (quarterId.charAt(0)) {
+  switch (seasonChar) {
     case "f": season = "Fall"; break;
     case "w": season = "Winter"; break;
     case "s": season = "Spring"; break;
     case "u": season = "Summer"; break;
     default: throw `invalid season char '${quarterId.charAt(0)}' (this should never happen)`
   }
+  const year = parseInt(quarterId.length === 3 ? `20${quarterId.slice(1)}` : quarterId.slice(1));
   return {
-    name: `${season} ${quarterId.length === 3 ? `20${quarterId.slice(1)}` : quarterId}`,
+    name: `${season} ${year}`,
+    season: seasonChar,
+    year: year,
     series: [...quarterMap.entries()].map(([seriesId, events]) => ({
       name: seriesId,
       description: eventTypes.find(x => x.name === seriesId)!.description,
       events,
     }))
   }
-})
+}).sort((a, b) => {
+  if (b.year == a.year) return SEASONS[b.season] - SEASONS[a.season];
+  return b.year - a.year;
+});
+
 export default archive;
diff --git a/styles/Archive.module.scss b/styles/Archive.module.scss
index 753b7d7..b71f46d 100644
--- a/styles/Archive.module.scss
+++ b/styles/Archive.module.scss
@@ -7,18 +7,21 @@
 }
 
 .series {
-  padding: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 20rem);
+  gap: 2rem;
+  padding: 1.5rem;
 }
 
 .event {
-  display: inline-flex; /* keep the inline nature of buttons */
+  display: flex;
   align-items: flex-start; /* this is default */
   background-color: var(--cyber-black);
-  margin: 1rem;
   border: var(--cyber-gold) 2px solid;
   border-radius: 2rem;
   width: 20rem;
   height: 17rem;
+  font-family: inherit; /* ??? override user-agent stylesheet for button */
   text-align: left;
 
   &:hover {