diff --git a/next-ui/src/components/filter/SearchList.vue b/next-ui/src/components/filter/SearchList.vue
index 310877a7..d118b9a6 100644
--- a/next-ui/src/components/filter/SearchList.vue
+++ b/next-ui/src/components/filter/SearchList.vue
@@ -31,7 +31,6 @@
     v-model="model"
     v-model:mode="modelMode"
     :items="shownItems"
-    color="primary"
     :show-mode-selector="showModeSelector"
     @load-more="emit('loadMore')"
   ></FilterList>
diff --git a/next-ui/src/components/filter/TriState.stories.ts b/next-ui/src/components/filter/TriState.stories.ts
index c64d6bb3..6b073929 100644
--- a/next-ui/src/components/filter/TriState.stories.ts
+++ b/next-ui/src/components/filter/TriState.stories.ts
@@ -36,7 +36,7 @@ export const Default: Story = {
 
 export const Color: Story = {
   args: {
-    color: 'primary',
+    color: 'red',
     modelValue: 'include',
   },
 }
diff --git a/next-ui/src/components/filter/TriState.vue b/next-ui/src/components/filter/TriState.vue
index 56d54f02..8fc1cdfc 100644
--- a/next-ui/src/components/filter/TriState.vue
+++ b/next-ui/src/components/filter/TriState.vue
@@ -1,12 +1,18 @@
 <template>
   <v-list-item
-    :title="label"
+    density="compact"
     @click="cycle()"
-    ><template #prepend
-      ><v-icon
+  >
+    <template #prepend>
+      <v-icon
         :icon="icon"
-        :color="!!model ? color : undefined" /></template
-  ></v-list-item>
+        :color="!!model ? color : undefined"
+    /></template>
+
+    <template #title
+      ><span class="text-body-medium">{{ label }}</span></template
+    >
+  </v-list-item>
 </template>
 
 <script setup lang="ts">
@@ -23,7 +29,7 @@ const emit = defineEmits<{
 const {
   label,
   triState = true,
-  color,
+  color = 'primary',
 } = defineProps<{
   /**
    * Label shown next to the checkbox.
@@ -34,7 +40,7 @@ const {
    */
   triState?: boolean
   /**
-   * Base color. Applies to the checkbox when the value is not `undefined`.
+   * Base color. Applies to the checkbox when the value is not `undefined`. Defaults to 'primary'.
    */
   color?: string
 }>()
diff --git a/next-ui/src/components/filter/by/ReadStatus.vue b/next-ui/src/components/filter/by/ReadStatus.vue
index 132b2989..46d61929 100644
--- a/next-ui/src/components/filter/by/ReadStatus.vue
+++ b/next-ui/src/components/filter/by/ReadStatus.vue
@@ -2,7 +2,6 @@
   <FilterList
     v-model="model"
     :items="items"
-    color="primary"
   />
 </template>
 
diff --git a/next-ui/src/components/filter/by/SeriesStatus.vue b/next-ui/src/components/filter/by/SeriesStatus.vue
index e4c08a0f..826bc949 100644
--- a/next-ui/src/components/filter/by/SeriesStatus.vue
+++ b/next-ui/src/components/filter/by/SeriesStatus.vue
@@ -2,7 +2,6 @@
   <FilterList
     v-model="model"
     :items="items"
-    color="primary"
   />
 </template>
 
diff --git a/next-ui/src/components/sort/TriState.vue b/next-ui/src/components/sort/TriState.vue
index 5c05ed1d..3402cb3c 100644
--- a/next-ui/src/components/sort/TriState.vue
+++ b/next-ui/src/components/sort/TriState.vue
@@ -1,6 +1,6 @@
 <template>
   <v-list-item
-    :title="sortOption.label"
+    density="compact"
     @click="cycle()"
   >
     <template #prepend>
@@ -16,6 +16,10 @@
         :class="!!model && !!number ? '' : 'opacity-0'"
       />
     </template>
+
+    <template #title
+      ><span class="text-body-medium">{{ sortOption.label }}</span></template
+    >
   </v-list-item>
 </template>
 
@@ -38,7 +42,7 @@ const emit = defineEmits<{
 const {
   sortOption,
   number,
-  color,
+  color = 'primary',
   mandatory = false,
 } = defineProps<{
   sortOption: SortOption
@@ -47,7 +51,7 @@ const {
    */
   number?: number
   /**
-   * Base color. Applies to the icon when the value is not `undefined`.
+   * Base color. Applies to the icon when the value is not `undefined`. Defaults to 'primary'.
    */
   color?: string
   mandatory?: boolean