diff --git a/frontend/components/global/ColorCircle.vue b/frontend/components/global/ColorCircle.vue
index 8d5e284..3db00be 100644
--- a/frontend/components/global/ColorCircle.vue
+++ b/frontend/components/global/ColorCircle.vue
@@ -3,7 +3,7 @@
 // types
 
 type Props = {
-    selected ?: boolean;
+    selected?: boolean;
 }
 
 // props
@@ -14,7 +14,7 @@ defineProps<Props>();
 
 <template>
     <div
-        class="size-[25px] rounded-full shadow-black/30 shadow-inner"
-        :class="selected ? 'ring-black' : 'ring-transparent'"
+        class="size-[25px] rounded-full transition-all ring-2 ring-offset-4 shadow-black/30 shadow-inner"
+        :class="selected ? 'ring-blue-500' : 'ring-transparent'"
     />
 </template>
\ No newline at end of file