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