diff --git a/resources/css/app.css b/resources/css/app.css
index 0624d14..abecba4 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -12,8 +12,8 @@
     Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-    --color-accent: var(--color-rose-500);
-    --color-accent-content: var(--color-rose-500);
+    --color-accent: var(--color-orange-500);
+    --color-accent-content: var(--color-orange-500);
     --color-accent-foreground: var(--color-white);
 }
 
@@ -37,8 +37,8 @@
 
 @layer theme {
   .dark {
-      --color-accent: var(--color-rose-500);
-      --color-accent-content: var(--color-rose-400);
+      --color-accent: var(--color-orange-500);
+      --color-accent-content: var(--color-orange-400);
       --color-accent-foreground: var(--color-white);
   }
 }
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index cdb82bc..eb6de3f 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -22,7 +22,7 @@
 
         <title>{{ $title . ' | ' . config('app.name') ?? config('app.name') }}</title>
     </head>
-    <body class="font-sans antialiased bg-zinc-800">
+    <body class="font-sans antialiased bg-zinc-200 text-zinc-700">
         <x-navbar />
         
         {{ $slot }}
diff --git a/resources/views/components/table.blade.php b/resources/views/components/table.blade.php
new file mode 100644
index 0000000..f89600b
--- /dev/null
+++ b/resources/views/components/table.blade.php
@@ -0,0 +1,19 @@
+<div class="border border-zinc-300 rounded-lg shadow">
+  <table class="w-full rounded-lg">
+    <thead class="bg-zinc-200 border-b border-zinc-300 rounded-t-lg">
+      <tr class="text-left">
+        {{ $tableheader }}
+      </tr>
+    </thead>
+    <tbody class="bg-zinc-100">
+      {{ $slot }}
+    </tbody>
+  </table>
+
+  @isset($pagination)
+  <div class="px-6 py-4 bg-zinc-100 rounded-b-lg">
+    {{ $pagination }}
+  </div>
+  @endisset
+
+</div>
\ No newline at end of file
diff --git a/resources/views/components/table/header.blade.php b/resources/views/components/table/header.blade.php
new file mode 100644
index 0000000..ec6d27b
--- /dev/null
+++ b/resources/views/components/table/header.blade.php
@@ -0,0 +1,3 @@
+<th  {{ $attributes->merge(['class' => 'py-4 px-3 first:pl-6 last:pr-6']) }}>
+  {{ $slot }}
+</th>
\ No newline at end of file
diff --git a/resources/views/components/table/item.blade.php b/resources/views/components/table/item.blade.php
new file mode 100644
index 0000000..6c24293
--- /dev/null
+++ b/resources/views/components/table/item.blade.php
@@ -0,0 +1,3 @@
+<td>
+  {{ $slot }}
+</td>
\ No newline at end of file
diff --git a/resources/views/livewire/filament/color.blade.php b/resources/views/livewire/filament/color.blade.php
index 8958217..8e8983b 100644
--- a/resources/views/livewire/filament/color.blade.php
+++ b/resources/views/livewire/filament/color.blade.php
@@ -15,33 +15,36 @@
 
 
     <div class="container m-auto my-8">
-        <table class="w-full">
-            <thead class="border-b border-zinc-500">
-                <tr class="text-left">
-                    <th class="px-8 py-4 font-bold text-lg">Name</th>
-                    <th class="px-8 py-4 font-bold text-lg text-center">Color</th>
-                    <th class="px-8 py-4 font-bold text-lg text-center">Hex</th>
-                    <th class="w-1/6"></th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach ($colors as $color)
-                    <tr wire:key="{{ $color->id }}" class="border-b border-zinc-600 hover:bg-zinc-900 transition duration-200">
-                        <td><p class="p-4 pl-8">{{ $color->name }}</p></td>
-                        <td><div class="w-8 h-8 rounded mx-auto" style="background-color: {{ $color->hex }}"></div></td>
-                        <td><p class="p-4 text-center">{{ $color->hex }}</p></td>
-                        <td class="text-right pr-8 flex flex-row gap-4 justify-end">
+        <x-table>
+            <x-slot name="tableheader">
+                <x-table.header>Name</x-table.header>
+                <x-table.header>Color</x-table.header>
+                <x-table.header>Hex</x-table.header>
+                <x-table.header>Rolls</x-table.header>
+                <x-table.header class="w-1/6"></x-table.header>
+            </x-slot>
+
+            @foreach ($colors as $color)
+                <tr wire:key="{{ $color->id }}" class="border-b border-zinc-300">
+                    <x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $color->name }}</p></x-table.item>
+                    <x-table.item><div class="p-4 px-3 mx-3 h-8 rounded" style="background-color: {{ $color->hex }}"></div></x-table.item>
+                    <x-table.item><p class="p-4 px-3 text-left">{{ $color->hex }}</p></x-table.item>
+                    <x-table.item><p class="p-4 px-3"></p></x-table.item>
+                    <x-table.item>
+                        <div class="flex flex-row gap-4 justify-end pr-8">
                             <button type="button" wire:click="edit({{ $color->id }})" x-on:click="$wire.editModal = true" class="text-accent p-4 cursor-pointer flex flex-row gap-2"><flux:icon.pencil/>Edit</button>
-                            
+                                
                             <button type="button" wire:click="delete({{ $color->id }})" wire:confirm="Are you sure?" class="text-accent p-4 cursor-pointer"><flux:icon.x-mark/></button>
-                        </td>
-                    </tr>
-                @endforeach
-            </tbody>
-        </table>
-        <div class="p-4">
-            {{ $colors->links() }}
-        </div>
+                        </div>
+                    </x-table.item>
+                </tr>
+            @endforeach
+            
+            <x-slot name="pagination">
+                {{ $colors->links() }}
+            </x-slot>
+        </x-table>
+
     </div>
 
     <!-- Create Form -->
diff --git a/resources/views/vendor/livewire/tailwind.blade.php b/resources/views/vendor/livewire/tailwind.blade.php
index 9ad7f28..7b70086 100644
--- a/resources/views/vendor/livewire/tailwind.blade.php
+++ b/resources/views/vendor/livewire/tailwind.blade.php
@@ -16,11 +16,11 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
             <div class="flex justify-between flex-1 sm:hidden">
                 <span>
                     @if ($paginator->onFirstPage())
-                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                             {!! __('pagination.previous') !!}
                         </span>
                     @else
-                        <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                        <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                             {!! __('pagination.previous') !!}
                         </button>
                     @endif
@@ -28,11 +28,11 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
 
                 <span>
                     @if ($paginator->hasMorePages())
-                        <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                        <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                             {!! __('pagination.next') !!}
                         </button>
                     @else
-                        <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
+                        <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                             {!! __('pagination.next') !!}
                         </span>
                     @endif
@@ -58,14 +58,14 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                             {{-- Previous Page Link --}}
                             @if ($paginator->onFirstPage())
                                 <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
-                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
+                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
                                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                             <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                         </svg>
                                     </span>
                                 </span>
                             @else
-                                <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.previous') }}">
+                                <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
                                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                         <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                     </svg>
@@ -78,7 +78,7 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                             {{-- "Three Dots" Separator --}}
                             @if (is_string($element))
                                 <span aria-disabled="true">
-                                    <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300">{{ $element }}</span>
+                                    <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
                                 </span>
                             @endif
 
@@ -88,10 +88,10 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                                     <span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}">
                                         @if ($page == $paginator->currentPage())
                                             <span aria-current="page">
-                                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600">{{ $page }}</span>
+                                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
                                             </span>
                                         @else
-                                            <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-300 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                            <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
                                                 {{ $page }}
                                             </button>
                                         @endif
@@ -103,14 +103,14 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                         <span>
                             {{-- Next Page Link --}}
                             @if ($paginator->hasMorePages())
-                                <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.next') }}">
+                                <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
                                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                     </svg>
                                 </button>
                             @else
                                 <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
-                                    <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
+                                    <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
                                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                             <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                         </svg>
