diff --git a/static/app.js b/static/app.js
index cd93a41..3ff20ce 100644
--- a/static/app.js
+++ b/static/app.js
@@ -80,17 +80,25 @@ function renderTable() {
             const td = document.createElement('td');
             td.className = 'clickable name-col';
             const key = `${date}|${colIdx}`;
-            if (data.attendance[key]) {
+            if (data.attendance[key] === true) {
                 td.innerText = 'Yes';
                 td.classList.add('yes');
+                td.classList.remove('no');
+            } else if (data.attendance[key] === 'no') {
+                td.innerText = 'No';
+                td.classList.add('no');
+                td.classList.remove('yes');
             } else {
                 td.innerText = '';
+                td.classList.remove('yes', 'no');
             }
             td.onclick = () => {
-                if (data.attendance[key]) {
-                    delete data.attendance[key];
-                } else {
+                if (!data.attendance[key]) {
                     data.attendance[key] = true;
+                } else if (data.attendance[key] === true) {
+                    data.attendance[key] = 'no';
+                } else if (data.attendance[key] === 'no') {
+                    delete data.attendance[key];
                 }
                 saveData();
                 renderTable();
diff --git a/templates/index.html b/templates/index.html
index ffe03fc..0c54b45 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -21,6 +21,7 @@
             box-shadow: 0 0 0 2px #94897966;
         }
         .yes { background: #948979; font-weight: bold; color: #222831; }
+.no { background: #393E46; color: #948979; font-weight: bold; }
         input[type="text"] {
             width: 90%;
             padding: 0.2em;