diff --git a/css/options.css b/css/options.css
index 26e0c5a..c879860 100644
--- a/css/options.css
+++ b/css/options.css
@@ -133,7 +133,7 @@ hr {
 
 .btn-enter {
   background-color: #00b1e2;
-  margin-left: auto;
+  margin: auto 4px;
 }
 
 .reset-area {
@@ -209,8 +209,7 @@ hr {
 
 .addHotkey {
   opacity: 0;
-  margin-left: auto;
-  margin-right: 4px;
+  margin: auto 4px;
   transition: opacity 0.4s ease-out;
 }
 
@@ -218,3 +217,7 @@ hr {
   opacity: 1;
   transition: opacity 0.2s linear;
 }
+
+.setting > div:first-of-type {
+  margin: auto 4px auto auto;
+}
diff --git a/js/options.js b/js/options.js
index 95a4340..8b8c9a4 100644
--- a/js/options.js
+++ b/js/options.js
@@ -70,8 +70,8 @@ function updateHotkey(element, newVal, index) {
     // remove the hotkey at the index provided
     newSettings.hotkeys.codes[parentSection.id].splice(index, 1);
   } else {
-    // add the new hotkey to the end of the stored hotkeys
-    newSettings.hotkeys.codes[parentSection.id].push(newVal);
+    // add the new hotkey to the beginning of the stored hotkeys
+    newSettings.hotkeys.codes[parentSection.id].unshift(newVal);
   }
 
   chrome.storage.local.set({ "extension-settings": newSettings }, function () {