diff --git a/resources/views/colors/index.blade.php b/resources/views/colors/index.blade.php
index 01bd752..9e2355b 100644
--- a/resources/views/colors/index.blade.php
+++ b/resources/views/colors/index.blade.php
@@ -12,17 +12,15 @@
   <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
           <div class="bg-white dark:bg-zinc-700 overflow-hidden shadow-xl sm:rounded-lg">
-            <ul class="">
-              <li class="flex gap-6  bg-zinc-50 dark:bg-zinc-900 p-2 px-4"><div class="">ID</div><div class="">Name</div><div class="">Hex Code</div><div class="">Options</div></li>
+            <div class="grid">
               @foreach ($colors as $color)
-                <li class="flex gap-6 py-3 px-4 items-center">  
-                  <div class="p-2">{{ $color->id }}</div>
+                <div class="flex gap-6 py-3 px-4 items-center">
+                  <div class="w-10 h-10 rounded" style="background-color: {{ $color->hex }}"></div>  
                   <div class="p-2"><a href="/colors/{{ $color->id }}">{{ $color->name }}</a></div>
                   <div class="p-2"><a href="/colors/{{ $color->id }}">{{ $color->hex }}</a></div>
-                  <div class="px-2"><a href="{{ route('colors.edit', $color->id) }}"><flux:icon.ellipsis class="hover:text-zinc-50 hover:bg-zinc-500 stroke-3 rounded "/></a></div>
-                </li>
+                </div>
               @endforeach
-            </ul>
+            </div>
             
           </div>
       </div>