diff --git a/hmdooris/static/main.css b/hmdooris/static/main.css
index 1678546..bed6247 100644
--- a/hmdooris/static/main.css
+++ b/hmdooris/static/main.css
@@ -61,15 +61,15 @@ body {
     color: black;
 }
 
-.lock__line button.lock__button__lock {
+.lock__line button.lock__button__lock, .lock__state-icon--locked {
     background-color: #f88;
 }
 
-.lock__line button.lock__button__unlock {
+.lock__line button.lock__button__unlock, .lock__state-icon--unlocked {
     background-color: #8f8;
 }
 
-.lock__line button.lock__button__lock:disabled, .lock__line button.lock__button__unlock:disabled {
+.lock__line button.lock__button__lock:disabled, .lock__line button.lock__button__unlock:disabled, .lock__state-icon--unknown {
     background-color: #ccc;
     color: #444;
 }
diff --git a/hmdooris/static/main.js b/hmdooris/static/main.js
index 4237bf7..4540e2b 100644
--- a/hmdooris/static/main.js
+++ b/hmdooris/static/main.js
@@ -6,16 +6,19 @@
         let button_lock = document.querySelector(`#lock__line__${lock.id} .lock__button__lock`);
         let button_unlock = document.querySelector(`#lock__line__${lock.id} .lock__button__unlock`);
         if (lock.status === "LOCKED") {
+            state_icon.class = "lock__state-icon lock__state-icon--locked";
             state_icon.innerHTML = '<svg class="icon"><use href="static/icons.svg#icon-lock-alt-svgrepo-com"/></svg>';
             state_label.innerText = 'locked';
             button_lock.disabled = true;
             button_unlock.disabled = false;
         } else if (lock.status === "UNLOCKED") {
+            state_icon.class = "lock__state-icon lock__state-icon--unlocked";
             state_icon.innerHTML = '<svg class="icon"><use href="static/icons.svg#icon-unlock-alt-svgrepo-com"/></svg>';
             state_label.innerText = 'unlocked';
             button_lock.disabled = false;
             button_unlock.disabled = true;
         } else {
+            state_icon.class = "lock__state-icon lock__state-icon--unknown";
             state_icon.innerHTML = '<svg class="icon"><use href="static/icons.svg#icon-arrow-spin-svgrepo-com"/></svg>';
             state_label.innerText = 'unknown';
             button_lock.disabled = true;