diff --git a/src/components/FilterButton.vue b/src/components/FilterButton.vue
index 4e95553..f040486 100644
--- a/src/components/FilterButton.vue
+++ b/src/components/FilterButton.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Ratings } from '@/interfaces'
 
 interface Props {
   modelValue: number[]
-  id: string
   name?: string
-  kind: string
-  value: number
+  value: Ratings
 }
 
 interface Emits {
@@ -32,12 +31,16 @@ const checked = computed({
       class="filter-button__input"
       type="checkbox"
       :name="name"
-      :id="id"
+      :id="Ratings[value].toLowerCase()"
       :value="value"
       v-model="checked"
     />
-    <label :for="id" class="filter-button__label" :class="[kind]">
-      <slot></slot>
+    <label
+      :for="Ratings[value].toLowerCase()"
+      class="filter-button__label"
+      :class="[Ratings[value].toLowerCase()]"
+    >
+      {{ Ratings[value] }}
     </label>
   </div>
 </template>
diff --git a/src/components/FilterListTag.vue b/src/components/FilterListTag.vue
index e753be3..1c6acee 100644
--- a/src/components/FilterListTag.vue
+++ b/src/components/FilterListTag.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 interface Props {
-  type?: string
+  type: string
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <span class="filter-list__tag" :class="type">
-    <slot></slot>
+  <span class="filter-list__tag" :class="type.toLowerCase()">
+    <span>{{ type }}</span>
   </span>
 </template>
 
diff --git a/src/components/FilteredList.vue b/src/components/FilteredList.vue
index 422aa4f..5880fb6 100644
--- a/src/components/FilteredList.vue
+++ b/src/components/FilteredList.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { Ratings, Role } from '@/interfaces'
 import type { Kink } from '@/interfaces'
 import FilterButton from '@/components/FilterButton.vue'
 import FilterListTag from '@/components/FilterListTag.vue'
@@ -17,36 +18,15 @@ const filteredItems = computed(() =>
     .sort((a, b) => a.rating - b.rating)
     .filter((kink) => filterOptions.value.some((filterNum) => kink.rating === filterNum))
 )
-
-const toLabel = (rating: number) => {
-  switch (rating) {
-    case 1:
-      return 'Love'
-    case 2:
-      return 'Yes'
-    case 3:
-      return 'Maybe'
-    case 4:
-      return 'No'
-  }
-}
 </script>
 
 <template>
   <div class="filter-list">
     <div class="filter-list__filters">
-      <FilterButton name="rating" id="love" kind="love" :value="1" v-model="filterOptions">
-        Love
-      </FilterButton>
-      <FilterButton name="rating" id="yes" kind="yes" :value="2" v-model="filterOptions">
-        Yes
-      </FilterButton>
-      <FilterButton name="rating" id="maybe" kind="maybe" :value="3" v-model="filterOptions">
-        Maybe
-      </FilterButton>
-      <FilterButton name="rating" id="no" kind="no" :value="4" v-model="filterOptions">
-        No
-      </FilterButton>
+      <FilterButton name="rating" :value="Ratings.Love" v-model="filterOptions" />
+      <FilterButton name="rating" :value="Ratings.Yes" v-model="filterOptions" />
+      <FilterButton name="rating" :value="Ratings.Maybe" v-model="filterOptions" />
+      <FilterButton name="rating" :value="Ratings.No" v-model="filterOptions" />
     </div>
 
     <div class="filter-list__list-container">
@@ -56,22 +36,19 @@ const toLabel = (rating: number) => {
             <FilterListTag
               v-if="filterOptions.length > 1"
               class="category"
-              :type="toLabel(item.rating)?.toLowerCase()"
-            >
-              <span>{{ toLabel(item.rating) }}</span>
-            </FilterListTag>
-
+              :type="Ratings[item.rating]"
+            />
             <span class="filter-list__item-name">
               <span>{{ item.name }}</span>
             </span>
-
-            <FilterListTag type="receive">
-              <span v-if="item.receive">receive</span>
-            </FilterListTag>
-
-            <FilterListTag type="give">
-              <span v-if="item.give">give</span>
-            </FilterListTag>
+            <FilterListTag
+              v-if="(item.role ?? 0 & Role.Receive) === Role.Receive"
+              :type="Role[Role.Receive]"
+            />
+            <FilterListTag
+              v-if="(item.role ?? 0 & Role.Give) === Role.Give"
+              :type="Role[Role.Give]"
+            />
           </li>
         </ul>
       </template>
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 9d560ec..626e015 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -6,8 +6,20 @@ interface ColorDict {
 interface Kink {
   name: string
   rating: number
-  receive?: boolean
-  give?: boolean
+  role?: Role
+}
+
+export enum Ratings {
+  Love,
+  Yes,
+  Maybe,
+  No
+}
+
+export enum Role {
+  Give = 1,
+  Receive = 2,
+  Both = Give | Receive
 }
 
 export type { ColorDict, Kink }
diff --git a/src/sebin.ts b/src/sebin.ts
index 984e403..f8d8ebc 100644
--- a/src/sebin.ts
+++ b/src/sebin.ts
@@ -1,3 +1,5 @@
+import { Ratings, Role } from '@/interfaces'
+
 export const firstName = 'Sebin',
   middleName = 'Antario',
   lastName = 'Nyshkim',
@@ -31,50 +33,50 @@ export const firstName = 'Sebin',
     girth: 5 // cm
   },
   kinks = [
-    { name: 'Absorption', rating: 4 },
-    { name: 'Anal', rating: 1, recive: true, give: true },
-    { name: 'Auto-Fellatio', rating: 2 },
-    { name: 'Biting', rating: 2, receive: true, give: true },
-    { name: 'Bukkake', rating: 2, receive: false, give: true },
-    { name: 'Chastity', rating: 4 },
-    { name: 'Chubby', rating: 3 },
-    { name: 'Clothed Sex', rating: 2 },
-    { name: 'Cock Slapping', rating: 2, receive: false, give: true },
-    { name: 'Coiling', rating: 3, receive: false, give: true },
-    { name: 'Competition', rating: 3, receive: false, give: true },
-    { name: 'Creampie', rating: 2, receive: false, give: true },
-    { name: 'Crushing (Living/Objects)', rating: 4 },
-    { name: 'Cum From Mouth/Nose', rating: 2, receive: false, give: true },
-    { name: 'Cum Inflation (Light/Medium)', rating: 2 },
-    { name: 'Deep-throat', rating: 2, receive: true, give: false },
-    { name: 'Dirty Talking', rating: 2 },
-    { name: 'Excessive Cum', rating: 1, receive: true, give: true },
-    { name: 'Face-Fucking', rating: 2, receive: false, give: true },
-    { name: 'Facial', rating: 2, receive: false, give: true },
-    { name: 'Feet', rating: 4 },
-    { name: 'Filled Condoms', rating: 2 },
-    { name: 'Foreplay', rating: 2, receive: true, give: true },
-    { name: 'Frotting', rating: 2 },
-    { name: 'Gangbangs', rating: 2 },
-    { name: 'Growth', rating: 1, receive: true, give: false },
-    { name: 'Handjobs', rating: 2, receive: true, give: true },
-    { name: 'Hotdogging', rating: 2, receive: false, give: true },
-    { name: 'Kissing', rating: 2, receive: true, give: true },
-    { name: 'Macro', rating: 1 },
-    { name: 'Milking', rating: 2 },
-    { name: 'Muscle Growth', rating: 1, receive: true, give: true },
-    { name: 'Muscle Worship', rating: 2, receive: true, give: true },
-    { name: 'Nipple Play', rating: 2, receive: true, give: true },
-    { name: 'Oral', rating: 1, receive: true, give: true },
-    { name: 'Rough', rating: 2, receive: true, give: true },
-    { name: 'Sheath Play', rating: 2, receive: true, give: true },
-    { name: 'Size Difference', rating: 1 },
-    { name: 'Slime/Goo Characters', rating: 2 },
-    { name: 'Spanking', rating: 3, receive: false, give: true },
-    { name: 'Tailsex', rating: 2, receive: true, give: true },
-    { name: 'Toys', rating: 2, receive: true, give: true },
-    { name: 'Underwear', rating: 1 },
-    { name: 'Unsanitary', rating: 4 },
-    { name: 'Verbal Abuse', rating: 3, receive: false, give: true },
-    { name: 'Vore', rating: 4 },
+    { name: 'Absorption', rating: Ratings.No },
+    { name: 'Anal', rating: Ratings.Love, role: Role.Both },
+    { name: 'Auto-Fellatio', rating: Ratings.Yes },
+    { name: 'Biting', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Bukkake', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Chastity', rating: Ratings.No },
+    { name: 'Chubby', rating: Ratings.Maybe },
+    { name: 'Clothed Sex', rating: Ratings.Yes },
+    { name: 'Cock Slapping', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Coiling', rating: Ratings.Maybe, role: Role.Give },
+    { name: 'Competition', rating: Ratings.Maybe, role: Role.Give },
+    { name: 'Creampie', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Crushing (Living/Objects)', rating: Ratings.No },
+    { name: 'Cum From Mouth/Nose', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Cum Inflation (Light/Medium)', rating: Ratings.Yes },
+    { name: 'Deep-throat', rating: Ratings.Yes, role: Role.Receive },
+    { name: 'Dirty Talking', rating: Ratings.Yes },
+    { name: 'Excessive Cum', rating: Ratings.Love, role: Role.Both },
+    { name: 'Face-Fucking', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Facial', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Feet', rating: Ratings.No },
+    { name: 'Filled Condoms', rating: Ratings.Yes },
+    { name: 'Foreplay', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Frotting', rating: Ratings.Yes },
+    { name: 'Gangbangs', rating: Ratings.Yes },
+    { name: 'Growth', rating: Ratings.Love, role: Role.Receive },
+    { name: 'Handjobs', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Hotdogging', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Kissing', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Macro', rating: Ratings.Love },
+    { name: 'Milking', rating: Ratings.Yes },
+    { name: 'Muscle Growth', rating: Ratings.Love, role: Role.Both },
+    { name: 'Muscle Worship', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Nipple Play', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Oral', rating: Ratings.Love, role: Role.Both },
+    { name: 'Rough', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Sheath Play', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Size Difference', rating: Ratings.Love },
+    { name: 'Slime/Goo Characters', rating: Ratings.Yes },
+    { name: 'Spanking', rating: Ratings.Maybe, role: Role.Give },
+    { name: 'Tailsex', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Toys', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Underwear', rating: Ratings.Love },
+    { name: 'Unsanitary', rating: Ratings.No },
+    { name: 'Verbal Abuse', rating: Ratings.Maybe, role: Role.Give },
+    { name: 'Vore', rating: Ratings.No }
   ]