diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index a15f817..43104dd 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -89,15 +89,13 @@ export function SettingsBar(props: Props) {
         >
           {VERSION}
         </Link>
-        {activated ? (
-          <Icon
-            type={'chevron-down'}
-            className={'hide-settings-icon'}
-            onClick={toggleShowSettings}
-          />
-        ) : (
-          <Icon type={'gear'} className={'show-settings-icon'} onClick={toggleShowSettings} />
-        )}
+        <button className={'settings-button'} onClick={toggleShowSettings}>
+          {activated ? (
+            <Icon type={'chevron-down'} className={'hide-settings-icon'} />
+          ) : (
+            <Icon type={'gear'} className={'show-settings-icon'} />
+          )}
+        </button>
       </div>
     </div>
   )
diff --git a/src/content.scss b/src/content.scss
index d366d94..9063cdc 100644
--- a/src/content.scss
+++ b/src/content.scss
@@ -574,18 +574,20 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 6px 10px;
+        padding: 2px 6px 2px 10px;
         border-top: 1px solid $border-gray-light;
 
-        .show-settings-icon {
-          width: 20px;
-          height: 20px;
-          cursor: pointer;
-        }
-        .hide-settings-icon {
-          width: 20px;
-          height: 20px;
-          cursor: pointer;
+        .settings-button {
+          @include icon-button();
+          @include button-color();
+          $size: 32px;
+          width: $size;
+          height: $size;
+          border-radius: $size;
+
+          .octicon-wrapper {
+            width: 18px;
+          }
         }
       }
     }