diff --git a/src/components/SelectInput.tsx b/src/components/SelectInput.tsx
index 3701e9b..48479a4 100644
--- a/src/components/SelectInput.tsx
+++ b/src/components/SelectInput.tsx
@@ -11,21 +11,24 @@ export function SelectInput<T>({
   }
 >) {
   return (
-    <select
-      onChange={e => {
-        const key = e.target.value
-        const option = options.find(option => option.key === key)
-        onChange(option!?.value)
-      }}
-      value={options.find(option => option.value === value)?.key}
-      {...selectProps}
-    >
-      {options.map(option => (
-        <option key={option.key} value={option.key}>
-          {option.label}
-        </option>
-      ))}
-    </select>
+    <div className={'select-wrapper'}>
+      <select
+        onChange={e => {
+          const key = e.target.value
+          const option = options.find(option => option.key === key)
+          onChange(option!?.value)
+        }}
+        value={options.find(option => option.value === value)?.key}
+        {...selectProps}
+      >
+        {options.map(option => (
+          <option key={option.key} value={option.key}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <span className={'chevron'} />
+    </div>
   )
 }
 export type Option<T> = {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c7146cd..5d9cfa7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -86,6 +86,19 @@ $minimal-z-index: max(
   }
 }
 
+@mixin pseudo-primer-icon($icon-name) {
+  content: '';
+  display: block;
+  cursor: pointer;
+  user-select: none;
+  -webkit-mask-image: url('~@primer/octicons/build/svg/' + $icon-name + '.svg?inline');
+  mask-image: url('~@primer/octicons/build/svg/' + $icon-name + '.svg?inline');
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
 .#{$name}-ready {
   // github
   // code folding start
@@ -116,19 +129,10 @@ $minimal-z-index: max(
         align-items: center;
 
         &::before {
-          content: '';
-          display: block;
           width: 10px;
           height: 20px;
-          cursor: pointer;
-          user-select: none;
           transition: 0.25s ease;
-          -webkit-mask-image: url('~@primer/octicons/build/svg/chevron-down.svg?inline');
-          mask-image: url('~@primer/octicons/build/svg/chevron-down.svg?inline');
-          -webkit-mask-size: contain;
-          mask-size: contain;
-          -webkit-mask-position: center;
-          mask-position: center;
+          @include pseudo-primer-icon('chevron-down');
         }
 
         @include interactive-background-on-before(
@@ -894,16 +898,38 @@ $minimal-z-index: max(
                 cursor: not-allowed;
               }
             }
-            select {
-              width: 100%;
-              -moz-appearance: menulist-button;
-              // make it look like text inputs
-              height: 36px;
-              border-radius: 6px;
-              border: 1px solid var(--gitako-border-default);
-              background: var(--gitako-canvas-default);
-              color: var(--gitako-fg-default);
-              box-shadow: var(--gitako-primer-shadow-inset);
+            .select-wrapper {
+              position: relative;
+
+              select {
+                width: 100%;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                appearance: none;
+                // make it look like text inputs
+                height: 36px;
+                padding: 0 6px;
+                border-radius: 6px;
+                border: 1px solid var(--gitako-border-default);
+                background: var(--gitako-canvas-default);
+                color: var(--gitako-fg-default);
+                box-shadow: var(--gitako-primer-shadow-inset);
+              }
+
+              .chevron {
+                position: absolute;
+                right: 6px;
+                top: 8px;
+                width: 10px;
+                height: 20px;
+
+                &::before {
+                  width: 10px;
+                  height: 20px;
+                  background-color: var(--gitako-fg-subtle);
+                  @include pseudo-primer-icon('chevron-down');
+                }
+              }
             }
             &.field-checkbox {
               padding-left: 20px;
@@ -979,24 +1005,6 @@ $minimal-z-index: max(
   }
 }
 
-// patches for Safari
-.gitako-safari {
-  .#{$name}-side-bar {
-    .#{$name}-side-bar-body {
-      .#{$name}-settings-bar {
-        &-content {
-          .field {
-            select {
-              -webkit-appearance: none;
-              padding: 0 6px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 // gitee
 .git-project {
   // reset styles