diff --git a/popup.html b/popup.html
index 4df2ce89..5e02bfb6 100644
--- a/popup.html
+++ b/popup.html
@@ -23,25 +23,27 @@
 
   <template data-id="style">
     <div class="entry">
-      <div class="left-gutter">
-        <input class="checker" type="checkbox">
-      </div>
       <div class="main-controls">
-        <label class="style-name"></label>
-        <div class="actions">
-          <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
-          <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
-          <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
-            <svg class="svg-icon edit" viewBox="0 0 14 16">
-              <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
-            </svg>
-          </a>
-          <a href="#" class="delete" i18n-title="deleteStyleLabel">
-            <svg class="svg-icon remove" viewBox="0 0 14 16">
-              <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
-            </svg>
-          </a>
-        </div>
+        <label class="style-name">
+        <input class="checker" type="checkbox">
+        <svg class="svg-icon checked" viewBox="0 0 1000 1000">
+          <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
+        </svg>
+		</label>
+      </div>
+      <div class="actions">
+        <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
+        <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
+        <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
+          <svg class="svg-icon edit" viewBox="0 0 14 16">
+            <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
+          </svg>
+        </a>
+        <a href="#" class="delete" i18n-title="deleteStyleLabel">
+          <svg class="svg-icon remove" viewBox="0 0 14 16">
+            <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
+          </svg>
+        </a>
       </div>
     </div>
   </template>
@@ -108,14 +110,14 @@
 
   <div class="actions">
     <div id="disable-all-wrapper">
-      <div class="left-gutter">
-        <input id="disableAll" type="checkbox">
-      </div>
       <div class="main-controls">
+        <input id="disableAll" type="checkbox">
+        <svg class="svg-icon checked" viewBox="0 0 1000 1000">
+          <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
+        </svg>
         <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
       </div>
     </div>
-    <div class="left-gutter"></div>
     <div class="main-controls">
       <div id="find-styles">
         <a id="find-styles-link" href="https://userstyles.org/styles/browse/"
diff --git a/popup/popup.css b/popup/popup.css
index 08130452..66720d9d 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -15,22 +15,112 @@ body {
 }
 
 body > div:not(#installed) {
-  margin-left: 0.75em;
-  margin-right: 0.75em;
+  margin-left: 9px;
+  margin-right: 9px;
 }
 
 .firefox .chromium-only {
   display: none;
 }
 
-input[type=checkbox] {
+.svg-icon.checked {
+  position: absolute;
+  height: 8px;
+  width: 8px;
+  display: none;
+  fill: #000;
+  margin: 2px 0 0 2px;
+}
+
+input[type="checkbox"]:checked + .svg-icon.checked {
+  display: inline-flex;
+  transition: fill .25s;
+}
+
+input[type="checkbox"] {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid hsl(0, 0%, 46%);
+  height: 12px;
+  width: 12px;
+  display: inline-flex;
+  border-radius: 2px;
+  background-color: hsl(0, 0%, 94%);
   outline: none;
+  margin: 0;
+  transition: background-color .25s, border-color .25s;
+}
+
+input[type="checkbox"]:checked:hover, .style-name:hover input[type="checkbox"]:checked {
+  border-color: hsl(0, 0%, 32%);
+  background-color: hsl(0, 0%, 82%);
+}
+
+input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"],
+.entry.disabled .style-name:hover input[type="checkbox"] {
+  border-color: hsl(0, 0%, 32%);
+  background-color: hsl(0, 0%, 82%);
+}
+
+#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
+  fill: hsl(0, 68%, 42%);
+}
+
+#installed.disabled + .actions #disableAll:checked {
+  border-color: hsl(0, 68%, 50%);
+}
+
+#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
+  fill: #fff;
+}
+
+#disableAll:hover {
+  border-color: hsl(0, 68%, 50%);
+  background-color: hsl(20, 70%, 75%);
+}
+
+#disableAll:hover + .svg-icon + label {
+  color: hsl(0, 68%, 42%);
+}
+
+#installed.disabled + .actions #disableAll:checked:hover {
+  border-color: hsl(0, 50%, 56%);
+  background-color: hsl(0, 50%, 56%);
+}
+
+.style-name .checker,
+.style-name .svg-icon.checked {
+  position: absolute;
+  top: 7px;
+  left: 9px;
+  pointer-events: none;
+}
+
+#disable-all-wrapper .main-controls .svg-icon.checked {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+label {
+  transition: color .25s;
 }
 
 #disable-all-wrapper {
   padding: 0.3em 0 0.6em;
 }
 
+#disable-all-wrapper .main-controls {
+  display: flex;
+  position: relative;
+}
+
+#disable-all-wrapper .main-controls label {
+  font-size: 12px;
+  padding-left: 4px;
+}
+
 #no-styles {
   font-style: italic;
 }
@@ -39,12 +129,6 @@ input[type=checkbox] {
   display: inline;
 }
 
-.style-name {
-  cursor: default;
-  font-weight: bold;
-  display: block;
-}
-
 a {
   color: #000;
   transition: color .5s;
@@ -55,16 +139,8 @@ a:hover {
   color: #666;
 }
 
-.left-gutter {
-  display: table-cell;
-  width: 16px;
-  vertical-align: top;
-}
-
-.left-gutter input {
-  margin-bottom: 1px;
-  margin-top: 0;
-  margin-left: 0;
+.actions > .main-controls {
+  padding-left: 16px;
 }
 
 .main-controls {
@@ -108,10 +184,46 @@ body.blocked > DIV {
 .entry {
   display: flex;
   align-items: center;
-  padding: 5px 0.75em;
+  height: 26px;
+  padding: 0 14px 0 0;
   position: relative;
 }
 
+html[style] .entry {
+  padding: 0 16px 0 0;
+}
+
+html[style] .entry:nth-child(-n+10):before,
+html[style] .entry:nth-child(10):before {
+  right: 7px;
+}
+
+.entry .actions {
+  display: inline-flex;
+}
+
+.style-name {
+  height: 100%;
+  width: 100%;
+  line-height: 28px;
+  cursor: default;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 26px;
+  position: relative;
+}
+
+.entry .main-controls {
+  height: 100%;
+  display: inline-flex;
+  flex-grow: 1;
+  overflow: hidden;
+  align-items: center;
+  padding-right: 5px;
+}
+
 .entry:nth-child(even) {
   background-color: rgba(0, 0, 0, 0.05);
 }
@@ -140,20 +252,6 @@ body.blocked > DIV {
   padding: 0 1px 0;
 }
 
-.entry .main-controls {
-  display: flex;
-  width: calc(100% - 20px);
-  align-items: center;
-}
-
-.entry .main-controls label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 5px;
-}
-
 .not-applied .checker,
 .not-applied .style-name,
 .not-applied .actions > * {
@@ -253,8 +351,7 @@ body > .actions {
 }
 
 body.blocked #installed > *,
-body.blocked .actions > .main-controls,
-body.blocked .actions > .left-gutter {
+body.blocked .actions > .main-controls {
   display: none;
 }