diff --git a/src/components/base/BaseCategorySelection.vue b/src/components/base/BaseCategorySelection.vue
index 304fd8d..fcf7cb1 100644
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -23,11 +23,13 @@
           .flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
             q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
               q-item-section(top)
-                q-radio(
+                q-radio.radio(
                   v-model="selected",
                   :val="benefit",
-                  :style="{border: 'none', width: '36px'}",
-                  size="32px",
+                  :style="{paddingTop: benefit.name.length > 28 ? '7px' : '2px'}",
+                  size="24px",
+                  checked-icon="check_circle",
+                  unchecked-icon="radio_button_unchecked"
                 )
               q-item-label
                 .name.flex.items-center.font-medium.text-xm {{benefit.name}}
@@ -191,8 +193,8 @@ export default {
   min-height: 40px
 
 .q-item__section
-  width: 36px
-  min-width: 36px
+  width: 32px
+  min-width: 32px
 
 .q-item :deep(.q-focus-helper)
   width: 0
@@ -210,4 +212,10 @@ export default {
     border: 1px solid var(--font-dark-blue-color)
   &:after
     border-width: 1px !important
+
+.radio :deep(.q-icon)
+  font-size: 20px
+
+.radio :deep(.q-radio__inner)
+  height: 24px
 </style>