diff --git a/preload.js b/preload.js
index e3bd5a2..b37ec92 100644
--- a/preload.js
+++ b/preload.js
@@ -76,20 +76,21 @@ window.init = function init() {
     }
   };
 
-  document.getElementById('save-slot-1').onclick = function slot1click(e) {
-    e.stopPropagation();
-    SAVESLOTS.loadSlot(1);
-  };
+  const saveSlots = document.getElementsByClassName('save-slot');
 
-  document.getElementById('save-slot-2').onclick = function slot2click(e) {
-    e.stopPropagation();
-    SAVESLOTS.loadSlot(2);
-  };
-
-  document.getElementById('save-slot-3').onclick = function slot3click(e) {
-    e.stopPropagation();
-    SAVESLOTS.loadSlot(3);
-  };
+  for (let i = 0; i < saveSlots.length; i++) {
+    const saveSlot = saveSlots[i];
+    saveSlot.addEventListener('click', (event) => {
+      // get save slot from button id save-slot-1 = 1
+      const saveSlotIndex = parseInt(
+        event.target.id.replace('save-slot-', ''),
+        10
+      );
+      if (saveSlotIndex) {
+        SAVESLOTS.loadSlot(saveSlotIndex);
+      }
+    });
+  }
 
   document.getElementById('refresh-device-button').onclick =
     function refreshClick(e) {
diff --git a/src/index.css b/src/index.css
index 13a5f26..ab27245 100644
--- a/src/index.css
+++ b/src/index.css
@@ -56,6 +56,12 @@ a {
   -webkit-app-region: drag;
   z-index: 1000;
 }
+#view-buttons-bar .active {
+  background-color: rgba(255, 255, 255, 0.3);
+  color: white;
+  border: #61c650;
+  border-style: solid;
+}
 #view-buttons-bar button {
   background-color: rgba(255, 255, 255, 0.07);
   width: 26px;
@@ -293,10 +299,6 @@ button:hover {
 button:focus {
   outline: none;
 }
-button.active {
-  background-color: rgba(255, 255, 255, 0.3);
-  color: white;
-}
 button:disabled {
   background: rgba(255, 255, 255, 0.03);
 }
diff --git a/src/view.js b/src/view.js
index 59a680e..762383b 100644
--- a/src/view.js
+++ b/src/view.js
@@ -298,19 +298,14 @@ module.exports.getPinnedDevices = function getPinnedDevices() {
 };
 
 module.exports.toggleSlotButtons = function toggleSlotButtons(slotIndex) {
-  if (slotIndex === 1) {
-    document.getElementById('save-slot-1').classList.add('active');
-    document.getElementById('save-slot-2').classList.remove('active');
-    document.getElementById('save-slot-3').classList.remove('active');
-  } else if (slotIndex === 2) {
-    document.getElementById('save-slot-1').classList.remove('active');
-    document.getElementById('save-slot-2').classList.add('active');
-    document.getElementById('save-slot-3').classList.remove('active');
-  } else if (slotIndex === 3) {
-    document.getElementById('save-slot-1').classList.remove('active');
-    document.getElementById('save-slot-2').classList.remove('active');
-    document.getElementById('save-slot-3').classList.add('active');
+  // remove all currently active classes
+  const currentActiveSlots = document.getElementsByClassName('active');
+  for (let i = 0; i < currentActiveSlots.length; i++) {
+    const slotButton = currentActiveSlots[i];
+    slotButton.classList.remove('active');
   }
+  // add the active class to the newly selected slot
+  document.getElementById(`save-slot-${slotIndex}`).classList.add('active');
 };
 
 module.exports.selectPreviousDevice = function selectPreviousDevice() {