diff --git a/src/Carousel/CarouselView.svelte b/src/Carousel/CarouselView.svelte
index bb29ba3..27ed58c 100644
--- a/src/Carousel/CarouselView.svelte
+++ b/src/Carousel/CarouselView.svelte
@@ -48,16 +48,16 @@
   export let dots = true
 
   const colors = [
-    '#e5f9f0',
-    '#ccf3e2',
-    '#b2edd3',
-    '#99e7c5',
-    '#7fe1b7',
-    '#66dba8',
-    '#4cd59a',
-    '#32cf8b',
-    '#19c97d',
-    '#00c36f'
+    { color: '#e5f9f0', text: '0' },
+    { color: '#ccf3e2', text: '1' },
+    { color: '#b2edd3', text: '2' },
+    { color: '#99e7c5', text: '3' },
+    { color: '#7fe1b7', text: '4' },
+    { color: '#66dba8', text: '5' },
+    { color: '#4cd59a', text: '6' },
+    { color: '#32cf8b', text: '7' },
+    { color: '#19c97d', text: '8' },
+    { color: '#00c36f', text: '9' }
   ]
 </script>
 
@@ -73,12 +73,12 @@
     {autoplayDirection}
     {dots}
   >
-    {#each colors as color (color)}
+    {#each colors as { color, text } (color)}
       <div
         class="color-container"
         style="background-color: {color};"
       >
-        <p>{color}</p>
+        <p>{text}</p>
       </div>
     {/each}
   </Carousel>