diff --git a/BetterResults.js b/BetterResults.js
index 33e07e0..63b96a0 100644
--- a/BetterResults.js
+++ b/BetterResults.js
@@ -2,7 +2,7 @@ const sidebar_selector = ".sidebar-results>:first-child";
 
 let wideToolbarCallback = function (mutationsList, _) {
   for (let mutation of mutationsList) {
-    if (mutation.type == 'childList' && mutation.removedNodes.length != 0) {
+    if (mutation.type == "childList" && mutation.removedNodes.length != 0) {
       for (const node of mutation.removedNodes) {
         if (node.id == "show-grid") {
           console.log("Readding grid afther smartschool removed it");
@@ -16,16 +16,27 @@ let wideToolbarCallback = function (mutationsList, _) {
 let wideToolbarObserver = new MutationObserver(wideToolbarCallback);
 
 let smscMainCallback = function (mutationsList, observer) {
-  wideToolbarObserver.observe($(sidebar_selector)[0], { attributes: false, childList: true, subtree: false });
+  wideToolbarObserver.observe($(sidebar_selector)[0], {
+    attributes: false,
+    childList: true,
+    subtree: false,
+  });
   onLoad();
   addButton();
 };
 
 let smscMainObserver = new MutationObserver(smscMainCallback);
-smscMainObserver.observe($('#smscMain')[0], { attributes: false, childList: true, subtree: false });
+smscMainObserver.observe($("#smscMain")[0], {
+  attributes: false,
+  childList: true,
+  subtree: false,
+});
 
 function totalToStr(total_numerator, total_denominator) {
-  return (Math.round(total_numerator / total_denominator * 1000) / 10).toString() + '%';
+  return (
+    (Math.round((total_numerator / total_denominator) * 1000) / 10).toString() +
+    "%"
+  );
 }
 
 function addButton() {
@@ -41,161 +52,388 @@ function addButton() {
       .addClass("optionWrapper-IEDUX")
       .addClass("button-mJfIq")
       .append(
-        $("<img/>").addClass("icon-dus_u").attr("src", chrome.runtime.getURL("static/img/icon_128.png")).attr("width", 24).attr("height", 24).attr("id", "show-grid-icon")
-      ).append(
-        $("<span/>").addClass("label-dOebJ").text("Grid").attr("id", "show-grid-label")
-      ).click(openGrid)
+        $("<img/>")
+          .addClass("icon-dus_u")
+          .attr("src", chrome.runtime.getURL("static/img/icon_128.png"))
+          .attr("width", 24)
+          .attr("height", 24)
+          .attr("id", "show-grid-icon"),
+      )
+      .append(
+        $("<span/>")
+          .addClass("label-dOebJ")
+          .text("Grid")
+          .attr("id", "show-grid-label"),
+      )
+      .click(openGrid),
   );
   console.log("Added button");
 }
 
 function makeGrid() {
   let loading = $("<h3>Loading!</h3>");
-  fetch('/results/api/v1/evaluations?itemsOnPage=500').then(r => r.json()).then(results => {
-    let data = {};
-    let course_to_graphic = {};
-    let latest_period = null;
-    for (const result of results) {
-      if (result["type"] != "normal") {
-        continue;
-      }
-      let period = result["period"]["name"];
-      if (latest_period === null) {
-        latest_period = period;
-      }
-      if (!(period in data)) {
-        data[period] = {};
-      }
+  fetch("/results/api/v1/evaluations?itemsOnPage=500")
+    .then((r) => r.json())
+    .then((results) => {
+      let data = {};
+      let course_to_graphic = {};
+      let latest_period = null;
+      for (const result of results) {
+        if (result["type"] != "normal") {
+          continue;
+        }
+        let period = result["period"]["name"];
+        if (latest_period === null) {
+          latest_period = period;
+        }
+        if (!(period in data)) {
+          data[period] = {};
+        }
 
-      period = data[period];
-      for (const course of result["courses"]) {
-        course_to_graphic[course["name"]] = course["graphic"];
-        const course_name = course["name"];
-        if (!(course_name in period)) {
-          period[course_name] = [];
+        period = data[period];
+        for (const course of result["courses"]) {
+          course_to_graphic[course["name"]] = course["graphic"];
+          const course_name = course["name"];
+          if (!(course_name in period)) {
+            period[course_name] = [];
+          }
+          period[course_name].push({
+            date: result["date"],
+            name: result["name"],
+            graphic: result["graphic"],
+          });
         }
-        period[course_name].push({ "date": result["date"], "name": result["name"], "graphic": result["graphic"] });
       }
-    }
-
-    for (let period_name of Object.keys(data)) {
-      let period = data[period_name];
 
-      let grid = $("<div/>").attr("id", "period").append($("<h2/>").text(period_name + ":"));
-      let table = $("<table/>").attr("id", "result-table");
-
-      let longest = 0;
-      for (let [_, course] of Object.entries(period)) {
-        course.sort((a, b) => { return a["date"].localeCompare(b["date"]); });
-        if (course.length > longest) {
-          longest = course.length;
+      let grids = {};
+      let all_subjects = new Set();
+      for (let period_name of Object.keys(data)) {
+        for (let course of Object.keys(data[period_name])) {
+          all_subjects.add(course);
         }
       }
-      // Add row for disclamer
-      let disc_row = $("<tr/>");
-      for (let i = 0; i < longest + 1; i++) {
-        disc_row.append($("<td/>").addClass("hidden-cell"));
+      all_subjects = Array.from(all_subjects).sort();
+      let all_periods = Object.keys(data);
+
+      let summary_grid = $("<div/>")
+        .attr("id", "period")
+        .append($("<h2/>").text("Overzicht:"));
+      let summary_table = $("<table/>").attr("id", "result-table");
+
+      let sum_header = $("<tr/>");
+      sum_header.append($("<th/>").text("Vak"));
+      for (let period_name of all_periods) {
+        sum_header.append($("<th/>").text(period_name));
       }
-      disc_row.append($("<td/>").attr("id", "disclamer").text("!"));
-      table.append(disc_row);
+      sum_header.append($("<th/>").text("Totaal"));
+      summary_table.append(sum_header);
 
-      let overallTotalNumerator = 0;
-      let overallTotalDenominator = 0;
+      let period_totals = {};
+      for (let period_name of all_periods) {
+        period_totals[period_name] = { num: 0, den: 0 };
+      }
+      let grand_total_num = 0;
+      let grand_total_den = 0;
 
-      for (let [course_name, course] of Object.entries(period)) {
+      for (let course_name of all_subjects) {
         let row = $("<tr/>");
-        if (course_to_graphic[course_name].type == "icon") {
-          row.append($("<th/>").append(
-            $("<span/>")
-              .addClass("icon-label icon-label--24 smsc-svg--" + course_to_graphic[course_name]["value"] + "--24")
-              .text(course_name)
-          ));
+
+        if (
+          course_name in course_to_graphic &&
+          course_to_graphic[course_name].type == "icon"
+        ) {
+          row.append(
+            $("<th/>").append(
+              $("<span/>")
+                .addClass(
+                  "icon-label icon-label--24 smsc-svg--" +
+                    course_to_graphic[course_name]["value"] +
+                    "--24",
+                )
+                .text(course_name),
+            ),
+          );
         } else {
           row.append($("<th/>").text(course_name));
         }
 
-        let total_numerator = 0;
-        let total_denominator = 0;
+        let subj_total_num = 0;
+        let subj_total_den = 0;
+
+        for (let period_name of all_periods) {
+          let p_num = 0;
+          let p_den = 0;
+          if (data[period_name] && data[period_name][course_name]) {
+            for (let result of data[period_name][course_name]) {
+              let desc = result["graphic"]["description"];
+              let match = desc.match(/^([\d\,\.]+)\/([\d\,\.]+)$/);
+              if (match) {
+                p_num += parseFloat(match[1].replace(",", "."));
+                p_den += parseFloat(match[2].replace(",", "."));
+              }
+            }
+          }
 
-        for (const result of course) {
-          const desc = result["graphic"]["description"];
-          const color = result["graphic"]["color"];
-          const name = result["name"];
-          let cellDesc = desc || "/";  // If desc is empty, use "-/-"
+          let cell = $("<td/>");
+          if (p_den != 0) {
+            cell.text(totalToStr(p_num, p_den));
+            if (p_num / p_den < 0.5) cell.addClass("is-low");
+            subj_total_num += p_num;
+            subj_total_den += p_den;
+            period_totals[period_name].num += p_num;
+            period_totals[period_name].den += p_den;
+          }
+          row.append(cell);
+        }
 
-          row.append($("<td/>")
-          .addClass("c-" + color + "-combo--300")
-          .attr({ id: "details", content: name })
-          .text(cellDesc));
+        let tot_cell = $("<td/>").addClass("total");
+        if (subj_total_den != 0) {
+          tot_cell.text(totalToStr(subj_total_num, subj_total_den));
+          if (subj_total_num / subj_total_den < 0.5)
+            tot_cell.addClass("is-low");
+          grand_total_num += subj_total_num;
+          grand_total_den += subj_total_den;
+        }
+        row.append(tot_cell);
+        summary_table.append(row);
+      }
 
-          let match = desc.match(/^([\d\,\.]+)\/([\d\,\.]+)$/);
-          if (match) {
-            total_numerator += parseFloat(match[1].replace(',', '.'));
-            total_denominator += parseFloat(match[2].replace(',', '.'));
+      let overallRow = $("<tr/>");
+      overallRow.append($("<th/>").text("Totaal"));
+      for (let period_name of all_periods) {
+        let cell = $("<td/>").addClass("total");
+        if (period_totals[period_name].den != 0) {
+          let p_num = period_totals[period_name].num;
+          let p_den = period_totals[period_name].den;
+          cell.text(totalToStr(p_num, p_den));
+          if (p_num / p_den < 0.5) cell.addClass("is-low");
+        }
+        overallRow.append(cell);
+      }
+      let grandTotCell = $("<td/>").addClass("total");
+      if (grand_total_den != 0) {
+        grandTotCell.text(totalToStr(grand_total_num, grand_total_den));
+        if (grand_total_num / grand_total_den < 0.5)
+          grandTotCell.addClass("is-low");
+      }
+      overallRow.append(grandTotCell);
+      summary_table.append(overallRow);
+      summary_grid.append(
+        $("<div/>").attr("id", "table-container").append(summary_table),
+      );
+      grids["Overzicht"] = summary_grid;
+
+      for (let period_name of Object.keys(data)) {
+        let period = data[period_name];
+
+        let grid = $("<div/>")
+          .attr("id", "period")
+          .append($("<h2/>").text(period_name + ":"));
+        let table = $("<table/>").attr("id", "result-table");
+
+        let longest = 0;
+        for (let [_, course] of Object.entries(period)) {
+          course.sort((a, b) => {
+            return a["date"].localeCompare(b["date"]);
+          });
+          if (course.length > longest) {
+            longest = course.length;
           }
         }
+        let overallTotalNumerator = 0;
+        let overallTotalDenominator = 0;
+
+        for (let [course_name, course] of Object.entries(period)) {
+          let row = $("<tr/>");
+          if (course_to_graphic[course_name].type == "icon") {
+            row.append(
+              $("<th/>").append(
+                $("<span/>")
+                  .addClass(
+                    "icon-label icon-label--24 smsc-svg--" +
+                      course_to_graphic[course_name]["value"] +
+                      "--24",
+                  )
+                  .text(course_name),
+              ),
+            );
+          } else {
+            row.append($("<th/>").text(course_name));
+          }
 
-        for (let i = 0; i < longest - course.length; i++) {
-          row.append($("<td/>"));
+          let total_numerator = 0;
+          let total_denominator = 0;
+
+          for (const result of course) {
+            const desc = result["graphic"]["description"];
+            const color = result["graphic"]["color"];
+            const name = result["name"];
+            let cellDesc = desc || "/"; // If desc is empty, use "-/-"
+
+            row.append(
+              $("<td/>")
+                .addClass("c-" + color + "-combo--300")
+                .attr({ id: "details", content: name })
+                .text(cellDesc),
+            );
+
+            let match = desc.match(/^([\d\,\.]+)\/([\d\,\.]+)$/);
+            if (match) {
+              total_numerator += parseFloat(match[1].replace(",", "."));
+              total_denominator += parseFloat(match[2].replace(",", "."));
+            }
+          }
+
+          for (let i = 0; i < longest - course.length; i++) {
+            row.append($("<td/>"));
+          }
+
+          let last_cell = $("<td/>").addClass("total");
+          if (total_denominator != 0) {
+            last_cell.text(totalToStr(total_numerator, total_denominator));
+            if (total_numerator / total_denominator < 0.5) {
+              last_cell.addClass("is-low");
+            }
+          }
+          row.append(last_cell);
+
+          overallTotalNumerator += total_numerator;
+          overallTotalDenominator += total_denominator;
+
+          table.append(row);
         }
 
-        let last_cell = $("<td/>").addClass("total");
-        if (total_denominator != 0) {
-          last_cell.text(totalToStr(total_numerator, total_denominator));
-          if (total_numerator / total_denominator < 0.5) {
-            last_cell.addClass('is-low');
+        let overallTotalRow = $("<tr/>");
+        overallTotalRow.append($("<th/>").text("Totaal"));
+        for (let i = 0; i < longest; i++) {
+          overallTotalRow.append($("<td/>"));
+        }
+        let overallTotalCell = $("<td/>").addClass("total");
+        if (overallTotalDenominator != 0) {
+          overallTotalCell.text(
+            totalToStr(overallTotalNumerator, overallTotalDenominator),
+          );
+          if (overallTotalNumerator / overallTotalDenominator < 0.5) {
+            overallTotalCell.addClass("is-low");
           }
         }
-        row.append(last_cell);
+        overallTotalRow.append(overallTotalCell);
+        table.append(overallTotalRow);
+
+        grid.append($("<div/>").attr("id", "table-container").append(table));
+        grid.append(
+          $("<div/>")
+            .addClass("disclaimer-text")
+            .text(
+              "Deze totalen kunnen afwijken van uw werkelijke resultaten doordat niet altijd alle gegevens gekend zijn.",
+            ),
+        );
+        grids[period_name] = grid;
+      }
 
-        overallTotalNumerator += total_numerator;
-        overallTotalDenominator += total_denominator;
+      let modal = $("<div/>").attr("id", "content-container");
+      let period_picker = $("<div/>").addClass("period-picker");
+      let period_header = $("<div/>").addClass("period-header");
+      let period_active_label = $("<span/>")
+        .addClass("period-active-label")
+        .text("Overzicht");
+      let period_dropdown = $("<div/>").addClass("period-dropdown");
+      let period_toggle = $("<button/>")
+        .attr("type", "button")
+        .addClass("period-toggle")
+        .text("Overzicht")
+        .append($("<span/>").addClass("period-caret").text("▼"));
+      let period_menu = $("<div/>").addClass("period-menu");
+      let main_grid = $("<div/>").attr("id", "period-container");
+
+      // Keep reverse order but put "Overzicht" first
+      let ordered_periods = ["Overzicht", ...Object.keys(data).reverse()];
+      let selected_period = "Overzicht";
+
+      function renderPeriodButtonLabel() {
+        const labelText = selected_period || "Selecteer periode";
+        period_toggle.contents().first()[0].textContent = labelText + " ";
+        period_active_label.text(labelText);
+      }
 
-        table.append(row);
+      function renderSelectedPeriods() {
+        main_grid.empty();
+        if (selected_period && grids[selected_period]) {
+          main_grid.append(grids[selected_period].clone(true, true));
+        }
       }
 
-      let overallTotalRow = $("<tr/>");
-      overallTotalRow.append($("<th/>").text("Total"));
-      for (let i = 0; i < longest; i++) {
-        overallTotalRow.append($("<td/>"));
+      for (let period_name of ordered_periods) {
+        let option_row = $("<label/>")
+          .addClass("period-option")
+          .append(
+            $("<input/>")
+              .attr("type", "radio")
+              .attr("name", "period-selection")
+              .addClass("period-radio")
+              .attr("data-period", period_name)
+              .prop("checked", period_name === "Overzicht"),
+          )
+          .append(
+            $("<span/>").addClass("period-option-label").text(period_name),
+          );
+        period_menu.append(option_row);
       }
-      let overallTotalCell = $("<td/>").addClass("total");
-      if (overallTotalDenominator != 0) {
-        overallTotalCell.text(totalToStr(overallTotalNumerator, overallTotalDenominator));
-        if (overallTotalNumerator / overallTotalDenominator < 0.5) {
-          overallTotalCell.addClass('is-low');
-        }
+
+      period_menu.on("change", ".period-radio", function () {
+        const period_name = $(this).attr("data-period");
+        selected_period = period_name;
+        renderPeriodButtonLabel();
+        renderSelectedPeriods();
+        period_dropdown.removeClass("open");
+      });
+
+      function positionPeriodMenu() {
+        const rect = period_toggle[0].getBoundingClientRect();
+        period_menu.css({
+          top: rect.bottom + 6 + "px",
+          left: rect.left + "px",
+          width: Math.max(rect.width, 240) + "px",
+        });
       }
-      overallTotalRow.append(overallTotalCell);
-      table.append(overallTotalRow);
 
-      grid.append($("<div/>").attr("id", "table-container").append(table));
-      data[period_name] = grid;
-    }
+      period_toggle.on("click", function (e) {
+        e.stopPropagation();
+        const willOpen = !period_dropdown.hasClass("open");
+        period_dropdown.toggleClass("open");
+        if (willOpen) {
+          positionPeriodMenu();
+        }
+      });
 
-    let modal = $("<div/>").attr("id", "content-container");
-    let period_buttons = $("<div/>");
-    let main_grid = $("<div/>").attr("id", "period-container");
-    for (let [period_name, grid] of Object.entries(data).reverse()) {
-      // We are using two lambda's sice otherwice they will all use the same scope.
-      period_buttons.append($("<button/>").addClass("period_button").text(period_name).click(((grid) => {
-        return () => {
-          main_grid.empty();
-          main_grid.append(grid);
-        };
-      })(grid)));
-    }
-    if (period_buttons.children().length > 1) {
-      period_buttons.prepend($("<span/>").text("Select period: "));
-      modal.append(period_buttons);
-    }
+      $(window).on("resize scroll", function () {
+        if (period_dropdown.hasClass("open")) {
+          positionPeriodMenu();
+        }
+      });
+
+      $(document).on("click", function () {
+        period_dropdown.removeClass("open");
+      });
+
+      period_menu.on("click", function (e) {
+        e.stopPropagation();
+      });
+
+      period_header.append(
+        period_dropdown.append(period_toggle, period_menu),
+        period_active_label,
+      );
+      period_picker.append(period_header);
+      if (ordered_periods.length > 1) {
+        modal.append(period_picker);
+      }
 
-    if (latest_period !== null) {
-      main_grid.append(data[latest_period]);
-    }
-    modal.append(main_grid);
-    loading.replaceWith(modal);
-  });
+      renderPeriodButtonLabel();
+      renderSelectedPeriods();
+      modal.append(main_grid);
+      loading.replaceWith(modal);
+    });
   return loading;
 }
 
@@ -203,37 +441,18 @@ function onLoad() {
   if (document.getElementById("grid-style")) {
     return;
   }
-  let style = document.createElement('style');
+  let style = document.createElement("style");
   style.id = "grid-style";
   style.innerHTML = `
 
-#result-table #disclamer {
-    border: none !important;
-    color: red;
-    font-weight: bold;
-    position: relative;
-}
-    
-#disclamer:hover::before {
-    visibility: visible;
-    opacity: 1;
-}
-    
-#disclamer::before {
-    z-index: 1;
-    content: "Deze totalen kunnen afwijken van uw werkelijke resultaten doordat niet altijd alle gegevens gekend zijn.";
-    position: absolute;
-    left: -20rem;
-    border: 3px solid red;
-    padding: 0.2rem;
-    border-radius: 3px;
-    background-color: white;
-    width: 20rem;
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s, opacity 0.5s linear;
+.disclaimer-text {
+    color: #e53935;
+    font-size: 0.85rem;
+    margin-top: 0.5rem;
+    text-align: left;
+    font-style: italic;
 }
-    
+
 #details {
   position: relative;
 }
@@ -261,29 +480,114 @@ function onLoad() {
   margin-left: -7.5rem;
 }
 
-#result-table .hidden-cell {
-  border: none !important;
+.period-picker {
+  margin-bottom: 0.9rem;
 }
 
-.period_button {
-  background-color: #ff520e;
-  border-radius: 3px;
-  border-style: none;
-  color: #FFFFFF;
-  margin-right: 0.5rem;
-  padding: 0.4rem;
-  text-align: center;
-  transition: 100ms;
+.period-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.period-active-label {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #4a4a4a;
+}
+
+.period-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.period-toggle {
+  background-color: #f3c000;
+  border: 1px solid #c39d00;
+  color: #1f1f1f;
+  border-radius: 0.45rem;
+  padding: 0.4rem 0.7rem;
+  font-weight: 600;
+  font-size: 0.95rem;
+  line-height: 1.2;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+}
+
+.period-toggle:hover {
+  background-color: #efbc00;
+}
+
+.period-toggle:active {
+  background-color: #e3b100;
+}
+
+.period-caret {
+  font-size: 0.72rem;
+  color: #2f2f2f;
+}
+
+.period-menu {
+  display: none;
+  position: fixed;
+  min-width: 260px;
+  max-height: min(360px, 62vh);
+  overflow: auto;
+  background: #f7f7f7;
+  border: 1px solid #cfcfcf;
+  border-radius: 0.3rem;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  z-index: 2001;
+  padding: 0.4rem 0.6rem 0.4rem 0.4rem;
+}
+
+.period-dropdown.open .period-menu {
+  display: block;
+}
+
+.period-option {
+  display: flex;
+  align-items: left;
+  gap: 0.62rem;
+  padding: 0.52rem 0.72rem;
+  min-height: 2.2rem;
+  cursor: pointer;
+  user-select: none;
 }
 
-.period_button:hover {
-  background-color: #ef4200;
+.period-option:hover {
+  background-color: #ececec;
 }
 
-.period_button:active {
-  background-color: #ff6210;
+.period-option input[type="radio"] {
+  margin: 0;
+  width: 0.98rem;
+  height: 0.98rem;
+  accent-color: #FF520E;
+  flex: 0 0 auto;
 }
 
+.period-option-label {
+  color: #444;
+  font-size: 0.96rem;
+  font-weight: 500;
+}
+
+.period-option:has(input[type="radio"]:checked) {
+  background-color: #B8B8B8;
+}
+
+.period-option:has(input[type="radio"]:checked) .period-option-label {
+  color: #2a2a2a;
+  font-weight: 700;
+}
+
+
+
 .total {
     font-weight: bold;
 }
@@ -295,6 +599,7 @@ function onLoad() {
 #table-container {
   flex: 1 1 auto;
   overflow: auto;
+  min-width: 0;
 }
 
 #period {
@@ -317,11 +622,17 @@ function onLoad() {
 
 #result-table {
     margin-top: 1rem;
-    border: 0px;
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid #cecece;
 }
 
 #result-table th {
     text-align: left;
+    background-color: #f8f8f8;
 }
 
 #result-table td {
@@ -329,11 +640,28 @@ function onLoad() {
 }
 
 #result-table th, #result-table td {
-    border: 1px solid gray !important;
+    border-right: 1px solid #cecece !important;
+    border-bottom: 1px solid #cecece !important;
+    border-left: none !important;
+    border-top: none !important;
     padding: 0.5rem;
     min-width: 5.5rem;
 }
- 
+
+#result-table tr:last-child th,
+#result-table tr:last-child td {
+    border-bottom: none !important;
+}
+
+#result-table th:last-child,
+#result-table td:last-child {
+    border-right: none !important;
+}
+
+#result-table tr:nth-child(even) th {
+    background-color: #f4f6f7;
+}
+
 #modal-background {
     display: none;
     position: fixed;
@@ -372,21 +700,24 @@ function onLoad() {
 }
 
 #modal-close {
-  background-color: #ee0000;
-  border-radius: 3px;
-  border-style: none;
-  color: #FFFFFF;
-  padding: 0.4rem;
-  text-align: center;
-  transition: 100ms;
+  background-color: transparent;
+  border: none;
+  color: #888;
+  padding: 0.5rem;
+  cursor: pointer;
+  transition: color 0.2s ease;
   position: absolute;
-  right: 0.5rem;
+  right: 1rem;
+  top: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 #modal-close:hover {
-  background-color: #dd0000;
+  color: #333;
 }
 #modal-close:active {
-  background-color: #ff0000;
+  color: #ff520e;
 }
 
 #show-grid {
@@ -408,19 +739,32 @@ function onLoad() {
     `;
   document.head.appendChild(style);
 
-  $("body").append(
-    $("<div/>").attr("id", "modal-background")
-  ).append(
-    $("<div/>").attr("id", "modal-content").append(
-      $("<button/>").attr("id", "modal-close").text("Close")
-    ).append(makeGrid())
-  );
+  $("body")
+    .append($("<div/>").attr("id", "modal-background"))
+    .append(
+      $("<div/>")
+        .attr("id", "modal-content")
+        .append(
+          $("<button/>")
+            .attr("id", "modal-close")
+            .html(
+              '<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
+            ),
+        )
+        .append(makeGrid()),
+    );
 
   $("#modal-background, #modal-close").click(function () {
-    $("#modal-content, #modal-background").toggleClass("active");
+    $("#modal-content, #modal-background").removeClass("active");
+  });
+
+  $(document).keydown(function (e) {
+    if (e.key === "Escape") {
+      $("#modal-content, #modal-background").removeClass("active");
+    }
   });
 }
 
 function openGrid() {
-  $("#modal-content, #modal-background").toggleClass("active");
+  $("#modal-content, #modal-background").addClass("active");
 }