diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 1e60304e..22450f2e 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -496,6 +496,12 @@
   "optionsActions": {
     "message": "Actions"
   },
+  "optionsSave": {
+    "message": "Save"
+  },
+  "optionsSaved": {
+    "message": "Options saved."
+  },
   "optionsOpenManager": {
     "message": "Open styles manager"
   },
diff --git a/options/index.css b/options/index.css
index 06a02eea..22e9bab8 100644
--- a/options/index.css
+++ b/options/index.css
@@ -1,22 +1,102 @@
 body {
-  margin: 10px;
-  font-family: "Helvetica Neue",Helvetica,sans-serif;
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+body > * {
+  padding: 1em 1rem 1em 44px;
 }
 
 table {
   width: 100%;
+  border-collapse: collapse;
 }
+
+td {
+  padding: 2px 0;
+}
+
 td:last-child {
   text-align: right;
 }
 
-input[type=number],
+a {
+  text-decoration-skip: ink;
+}
+
 button {
+  text-align: center;
   width: 80px;
 }
 
-.notes {
+h1:not(:first-child) {
+  margin-top: 0;
+}
+
+input[type=number] {
+  width: 80px;
+  text-align: right;
+  padding-right: 1em;
+}
+
+#actions {
+  margin-top: -2em;
+}
+
+#save {
+  text-align: right;
+  position: relative;
+}
+
+#save-status {
+  margin-top: .5ex;
+  position: absolute;
+  right: 0;
+  visibility: hidden;
+}
+
+#save-status.fadeinout {
+  visibility: visible;
+  animation: fadeinout 1s ease-in-out;
+  animation-fill-mode: both;
+}
+
+#notes {
+  background-color: #f4f4f4;
+  margin-top: .5em;
   font-size: 90%;
   color: #999;
 }
+
+#notes ol {
+  margin: 0;
+  padding: 0;
+}
+
+#notes li:not(last-child) {
+  margin-bottom: 1ex;
+}
+
+input[type="color"] {
+  width: 80px;
+  box-sizing: border-box;
+  height: 2em;
+}
+
+#notes a {
+  color: inherit;
+}
+
+#notes a:hover {
+  color: black;
+}
+
+@keyframes fadeinout {
+  0%   { opacity: 0 }
+  10%  { opacity: 1 }
+  25%  { opacity: 1 }
+  100% { opacity: 0 }
+}
diff --git a/options/index.html b/options/index.html
index a72b41ec..3efc5bf8 100644
--- a/options/index.html
+++ b/options/index.html
@@ -3,13 +3,16 @@
 <head>
   <title>Stylus Options</title>
   <link rel="stylesheet" href="index.css">
-  <script src="../localization.js"></script>
+  <script src="/localization.js"></script>
+  <script src="/apply.js"></script>
+  <script src="/messaging.js"></script>
+  <script src="/dom.js"></script>
 </head>
 
 <body>
-  <h1 i18n-text="optionsCustomize"></h1>
-  <table>
-    <tbody>
+  <div id="ui">
+    <h1 i18n-text="optionsCustomize"></h1>
+    <table>
       <tr>
         <td i18n-text="optionsBadgeNormal"></td>
         <td><input type="color" id="badgeNormal"></td>
@@ -26,16 +29,16 @@
         <td i18n-text="optionsUpdateInterval"><sup>1</sup></td>
         <td><input type="number" min="0" id="updateInterval"></td>
       </tr>
-    </tbody>
-  </table>
-  <div>
-    <button id="save">Save</button>
-    <span id="status"></span>
+    </table>
+    <div id="save">
+      <button id="save-button" i18n-text="optionsSave"></button>
+      <div id="save-status" i18n-text="optionsSaved"></div>
+    </div>
   </div>
 
-  <h1 i18n-text="optionsActions"></h1>
-  <table>
-    <tbody>
+  <div id="actions">
+    <h1 i18n-text="optionsActions"></h1>
+    <table>
       <tr>
         <td i18n-text="optionsOpenManager"><sup>2</sup></td>
         <td><button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button></td>
@@ -47,17 +50,19 @@
           <button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
         </td>
       </tr>
-    </tbody>
-  </table>
-  <div class="notes">
-    <hr>
-    1: <span i18n-text="optionsUpdateIntervalNote"></span>
-    <br>
-    2: <span i18n-text="optionsOpenManagerNote"></span>, <a href="#" data-cmd="open-keyboard">chrome://extensions/configureCommands</a>
+    </table>
+  </div>
+
+  <div id="notes">
+    <ol>
+      <li i18n-text="optionsUpdateIntervalNote"></li>
+      <li><a data-cmd="open-keyboard"
+             i18n-text="optionsOpenManagerNote"
+             href="chrome://extensions/configureCommands"></a>
+      </li>
+    </ol>
   </div>
 
-  <script src="/messaging.js"></script>
-  <script src="/dom.js"></script>
   <script src="index.js"></script>
 </body>
 </html>
diff --git a/options/index.js b/options/index.js
index c2681fa3..51aed9e9 100644
--- a/options/index.js
+++ b/options/index.js
@@ -21,10 +21,7 @@ function save() {
       'updateInterval',
       Math.max(0, Number($('#updateInterval').value))
     );
-    // display notification
-    const status = $('#status');
-    status.textContent = 'Options saved.';
-    setTimeout(() => (status.textContent = ''), 750);
+    animateElement($('#save-status'), {className: 'fadeinout'});
   });
 }
 
@@ -47,8 +44,7 @@ onDOMready().then(restore);
 $('#save').onclick = save;
 
 // overwrite the default URL if browser is Opera
-$('[data-cmd="open-keyboard"]').textContent =
-  configureCommands.url;
+$('[data-cmd="open-keyboard"]').href = configureCommands.url;
 
 // actions
 document.onclick = e => {
