diff --git a/src/components/SelectorList.vue b/src/components/SelectorList.vue
index 7fb48291..20ef6823 100644
--- a/src/components/SelectorList.vue
+++ b/src/components/SelectorList.vue
@@ -16,7 +16,8 @@ defineProps<{
       <q-item
         v-for="v in list"
         :key="v.label"
-        clickable
+        :class="v.count === 0 ? 'disable-item' : ''"
+        :clickable="v.count > 0"
         :active="selector === v.label"
         :active-class="
           selector === v.label
@@ -27,8 +28,12 @@ defineProps<{
         "
         @click="selector = v.label"
       >
-        <q-item-section>{{ $t(v.label) }}</q-item-section>
-        <div class="dot text-weight-bold">{{ v.count }}</div>
+        <div class="row full-width justify-between">
+          <div>
+            {{ $t(v.label) }}
+          </div>
+          <div class="dot text-weight-bold">{{ v.count }}</div>
+        </div>
       </q-item>
     </q-list>
   </AppBox>
@@ -41,8 +46,9 @@ defineProps<{
   border-radius: var(--radius-3);
 
   .dot {
-    color: var(--blue-6);
-    background-color: white;
+    background-color: hsla(var(--info-bg));
+    border: 1px solid hsl(var(--info-bg));
+    color: white;
   }
 
   &.dark {
@@ -54,15 +60,28 @@ defineProps<{
 .q-item {
   align-items: center;
   border-radius: var(--radius-3);
-  color: hsl(var(--stone-4-hsl));
   border: 1px solid transparent;
+  padding: 6px 16px;
+  min-height: 0;
+  margin-bottom: 8px;
+}
+
+.disable-item {
+  color: hsl(var(--text-mute));
+
+  .dot {
+    color: hsl(var(--text-mute));
+    border: 1px solid transparent;
+    background-color: hsla(var(--text-mute) / 0.1);
+  }
 }
 
 .dot {
   height: 25px;
   width: 25px;
-  background-color: hsl(var(--stone-4-hsl));
-  color: white;
+  background-color: hsla(var(--info-bg) / 0.1);
+  border: 1px solid transparent;
+  color: hsl(var(--info-bg));
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;