diff --git a/resources/css/buttons.css b/resources/css/buttons.css
index c0f75c9..783c22e 100644
--- a/resources/css/buttons.css
+++ b/resources/css/buttons.css
@@ -1,5 +1,5 @@
-.btn-indigo {
-  @apply px-6 py-3 rounded bg-indigo-700 text-white text-sm font-bold whitespace-no-wrap;
+.btn-indigo-500 {
+  @apply px-6 py-3 rounded bg-indigo-600 text-white text-sm font-bold whitespace-no-wrap;
 
   &:hover, &:focus { @apply bg-orange-500 }
 }
diff --git a/resources/css/form.css b/resources/css/form.css
index c73de9c..68bd444 100644
--- a/resources/css/form.css
+++ b/resources/css/form.css
@@ -1,20 +1,20 @@
 .form-label {
-  @apply .mb-2 .block .text-gray-800 .select-none;
+  @apply .mb-2 .block .text-gray-700 .select-none;
 }
 
 .form-input,
 .form-textarea,
 .form-select {
-  @apply .p-2 .leading-normal .block .w-full .border .text-gray-800 .bg-white .font-sans .rounded .text-left .appearance-none .relative;
+  @apply .p-2 .leading-normal .block .w-full .border .text-gray-700 .bg-white .font-sans .rounded .text-left .appearance-none .relative;
 
   &:focus,
   &.focus {
     @apply .border-indigo-500;
-    box-shadow: 0 0 0 1px theme('colors.indigo.500');
+    box-shadow: 0 0 0 1px theme('colors.indigo-500');
   }
 
   &::placeholder {
-    @apply .text-gray-600 .opacity-100;
+    @apply .text-gray-500 .opacity-100;
   }
 }
 
@@ -32,15 +32,15 @@
 }
 
 .form-error {
-  @apply .text-red-500 .mt-2 .text-sm;
+  @apply .text-red-700 .mt-2 .text-sm;
 }
 
 .form-input.error,
 .form-textarea.error,
 .form-select.error {
-  @apply .border-red-400;
+  @apply .border-red-600;
 
   &:focus {
-    box-shadow: 0 0 0 1px theme('colors.red.500');
+    box-shadow: 0 0 0 1px theme('colors.red.600');
   }
 }
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index c89afa9..f0c267a 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -15,7 +15,7 @@
         </div>
         <div class="px-10 py-4 bg-gray-100 border-t border-gray-200 flex justify-between items-center">
           <a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a>
-          <loading-button :loading="sending" class="btn-indigo" type="submit">Login</loading-button>
+          <loading-button :loading="sending" class="btn-indigo-500" type="submit">Login</loading-button>
         </div>
       </form>
     </div>
diff --git a/resources/js/Pages/Contacts/Create.vue b/resources/js/Pages/Contacts/Create.vue
index 456ec07..66641d5 100644
--- a/resources/js/Pages/Contacts/Create.vue
+++ b/resources/js/Pages/Contacts/Create.vue
@@ -26,7 +26,7 @@
           <text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
         </div>
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
-          <loading-button :loading="sending" class="btn-indigo" type="submit">Create Contact</loading-button>
+          <loading-button :loading="sending" class="btn-indigo-500" type="submit">Create Contact</loading-button>
         </div>
       </form>
     </div>
diff --git a/resources/js/Pages/Contacts/Edit.vue b/resources/js/Pages/Contacts/Edit.vue
index 23678cc..6225f08 100644
--- a/resources/js/Pages/Contacts/Edit.vue
+++ b/resources/js/Pages/Contacts/Edit.vue
@@ -30,8 +30,8 @@
           <text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
         </div>
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
-          <button v-if="!contact.deleted_at" class="text-red-500 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
-          <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
+          <button v-if="!contact.deleted_at" class="text-red-700 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
+          <loading-button :loading="sending" class="btn-indigo-500 ml-auto" type="submit">Update Contact</loading-button>
         </div>
       </form>
     </div>
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index 5d366c3..aa4fa11 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -3,14 +3,14 @@
     <h1 class="mb-8 font-bold text-3xl">Contacts</h1>
     <div class="mb-6 flex justify-between items-center">
       <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
-        <label class="block text-gray-800">Trashed:</label>
+        <label class="block text-gray-700">Trashed:</label>
         <select v-model="form.trashed" class="mt-1 w-full form-select">
           <option :value="null" />
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
         </select>
       </search-filter>
-      <inertia-link class="btn-indigo" :href="route('contacts.create')">
+      <inertia-link class="btn-indigo-500" :href="route('contacts.create')">
         <span>Create</span>
         <span class="hidden md:inline">Contact</span>
       </inertia-link>
@@ -27,7 +27,7 @@
           <td class="border-t">
             <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('contacts.edit', contact.id)">
               {{ contact.name }}
-              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" />
+              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
             </inertia-link>
           </td>
           <td class="border-t">
@@ -49,7 +49,7 @@
           </td>
           <td class="border-t w-px">
             <inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1">
-              <icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </inertia-link>
           </td>
         </tr>
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index bc888a2..a9fd738 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -3,8 +3,8 @@
     <h1 class="mb-8 font-bold text-3xl">Dashboard</h1>
     <p class="mb-12 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo-500 underline hover:text-orange-600" href="https://github.com/inertiajs">Inertia.js</a> works.</p>
     <div>
-      <inertia-link class="btn-indigo" href="/500">500 error</inertia-link>
-      <inertia-link class="btn-indigo" href="/404">404 error</inertia-link>
+      <inertia-link class="btn-indigo-500" href="/500">500 error</inertia-link>
+      <inertia-link class="btn-indigo-500" href="/404">404 error</inertia-link>
     </div>
   </layout>
 </template>
diff --git a/resources/js/Pages/Organizations/Create.vue b/resources/js/Pages/Organizations/Create.vue
index 3e9aa1b..0343044 100644
--- a/resources/js/Pages/Organizations/Create.vue
+++ b/resources/js/Pages/Organizations/Create.vue
@@ -21,7 +21,7 @@
           <text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
         </div>
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
-          <loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button>
+          <loading-button :loading="sending" class="btn-indigo-500" type="submit">Create Organization</loading-button>
         </div>
       </form>
     </div>
diff --git a/resources/js/Pages/Organizations/Edit.vue b/resources/js/Pages/Organizations/Edit.vue
index bd28d40..89f4417 100644
--- a/resources/js/Pages/Organizations/Edit.vue
+++ b/resources/js/Pages/Organizations/Edit.vue
@@ -25,8 +25,8 @@
           <text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
         </div>
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
-          <button v-if="!organization.deleted_at" class="text-red-500 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
-          <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
+          <button v-if="!organization.deleted_at" class="text-red-700 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
+          <loading-button :loading="sending" class="btn-indigo-500 ml-auto" type="submit">Update Organization</loading-button>
         </div>
       </form>
     </div>
@@ -42,7 +42,7 @@
           <td class="border-t">
             <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('contacts.edit', contact.id)">
               {{ contact.name }}
-              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" />
+              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
             </inertia-link>
           </td>
           <td class="border-t">
@@ -57,7 +57,7 @@
           </td>
           <td class="border-t w-px">
             <inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1">
-              <icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </inertia-link>
           </td>
         </tr>
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 5b66620..6c8c2c9 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -3,14 +3,14 @@
     <h1 class="mb-8 font-bold text-3xl">Organizations</h1>
     <div class="mb-6 flex justify-between items-center">
       <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
-        <label class="block text-gray-800">Trashed:</label>
+        <label class="block text-gray-700">Trashed:</label>
         <select v-model="form.trashed" class="mt-1 w-full form-select">
           <option :value="null" />
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
         </select>
       </search-filter>
-      <inertia-link class="btn-indigo" :href="route('organizations.create')">
+      <inertia-link class="btn-indigo-500" :href="route('organizations.create')">
         <span>Create</span>
         <span class="hidden md:inline">Organization</span>
       </inertia-link>
@@ -26,7 +26,7 @@
           <td class="border-t">
             <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('organizations.edit', organization.id)">
               {{ organization.name }}
-              <icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" />
+              <icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
             </inertia-link>
           </td>
           <td class="border-t">
@@ -41,7 +41,7 @@
           </td>
           <td class="border-t w-px">
             <inertia-link class="px-4 flex items-center" :href="route('organizations.edit', organization.id)" tabindex="-1">
-              <icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </inertia-link>
           </td>
         </tr>
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index afcfc1f..3a60ca1 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -17,7 +17,7 @@
           </select-input>
         </div>
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
-          <loading-button :loading="sending" class="btn-indigo" type="submit">Create User</loading-button>
+          <loading-button :loading="sending" class="btn-indigo-500" type="submit">Create User</loading-button>
         </div>
       </form>
     </div>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index 22be5ba..3ebf1eb 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -21,8 +21,8 @@
           </select-input>
         </div>
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
-          <button v-if="!user.deleted_at" class="text-red-500 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
-          <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
+          <button v-if="!user.deleted_at" class="text-red-700 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
+          <loading-button :loading="sending" class="btn-indigo-500 ml-auto" type="submit">Update User</loading-button>
         </div>
       </form>
     </div>
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index 1e88957..d9729ce 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -3,20 +3,20 @@
     <h1 class="mb-8 font-bold text-3xl">Users</h1>
     <div class="mb-6 flex justify-between items-center">
       <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
-        <label class="block text-gray-800">Role:</label>
+        <label class="block text-gray-700">Role:</label>
         <select v-model="form.role" class="mt-1 w-full form-select">
           <option :value="null" />
           <option value="user">User</option>
           <option value="owner">Owner</option>
         </select>
-        <label class="mt-4 block text-gray-800">Trashed:</label>
+        <label class="mt-4 block text-gray-700">Trashed:</label>
         <select v-model="form.trashed" class="mt-1 w-full form-select">
           <option :value="null" />
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
         </select>
       </search-filter>
-      <inertia-link class="btn-indigo" :href="route('users.create')">
+      <inertia-link class="btn-indigo-500" :href="route('users.create')">
         <span>Create</span>
         <span class="hidden md:inline">User</span>
       </inertia-link>
@@ -32,7 +32,7 @@
           <td class="border-t">
             <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('users.edit', user.id)">
               {{ user.name }}
-              <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" />
+              <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
             </inertia-link>
           </td>
           <td class="border-t">
@@ -47,7 +47,7 @@
           </td>
           <td class="border-t w-px">
             <inertia-link class="px-4 flex items-center" :href="route('users.edit', user.id)" tabindex="-1">
-              <icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </inertia-link>
           </td>
         </tr>
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index b8e093f..1f7e1a4 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -10,7 +10,7 @@
             </inertia-link>
             <dropdown class="md:hidden" placement="bottom-end">
               <svg class="fill-white w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
-              <div slot="dropdown" class="mt-2 px-8 py-4 shadow-xl bg-indigo-700 rounded">
+              <div slot="dropdown" class="mt-2 px-8 py-4 shadow-xl bg-indigo-800 rounded">
                 <main-menu />
               </div>
             </dropdown>
@@ -19,16 +19,16 @@
             <div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div>
             <dropdown class="mt-1" placement="bottom-end">
               <div class="flex items-center cursor-pointer select-none group">
-                <div class="text-gray-800 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap">
+                <div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap">
                   <span>{{ $page.auth.user.first_name }}</span>
                   <span class="hidden md:inline">{{ $page.auth.user.last_name }}</span>
                 </div>
-                <icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-800 focus:fill-indigo-600" name="cheveron-down" />
+                <icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-700 focus:fill-indigo-600" name="cheveron-down" />
               </div>
               <div slot="dropdown" class="mt-2 py-2 shadow-xl bg-white rounded text-sm">
-                <inertia-link class="block px-6 py-2 hover:bg-indigo-600 hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link>
-                <inertia-link class="block px-6 py-2 hover:bg-indigo-600 hover:text-white" :href="route('users')">Manage Users</inertia-link>
-                <inertia-link class="block px-6 py-2 hover:bg-indigo-600 hover:text-white" :href="route('logout')" method="post">Logout</inertia-link>
+                <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link>
+                <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users')">Manage Users</inertia-link>
+                <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('logout')" method="post">Logout</inertia-link>
               </div>
             </dropdown>
           </div>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 1d36feb..06cf7cc 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -3,25 +3,25 @@
     <div class="mb-4">
       <inertia-link class="flex items-center group py-3" :href="route('dashboard')">
         <icon name="dashboard" class="w-4 h-4 mr-2" :class="isUrl('') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
-        <div :class="isUrl('') ? 'text-white' : 'text-indigo-200 group-hover:text-white'">Dashboard</div>
+        <div :class="isUrl('') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Dashboard</div>
       </inertia-link>
     </div>
     <div class="mb-4">
       <inertia-link class="flex items-center group py-3" :href="route('organizations')">
         <icon name="office" class="w-4 h-4 mr-2" :class="isUrl('organizations') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
-        <div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-200 group-hover:text-white'">Organizations</div>
+        <div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Organizations</div>
       </inertia-link>
     </div>
     <div class="mb-4">
       <inertia-link class="flex items-center group py-3" :href="route('contacts')">
         <icon name="users" class="w-4 h-4 mr-2" :class="isUrl('contacts') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
-        <div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-200 group-hover:text-white'">Contacts</div>
+        <div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Contacts</div>
       </inertia-link>
     </div>
     <div class="mb-4">
       <inertia-link class="flex items-center group py-3" :href="route('reports')">
         <icon name="printer" class="w-4 h-4 mr-2" :class="isUrl('reports') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
-        <div :class="isUrl('reports') ? 'text-white' : 'text-indigo-200 group-hover:text-white'">Reports</div>
+        <div :class="isUrl('reports') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Reports</div>
       </inertia-link>
     </div>
   </div>
diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
index 8a6914c..e85cc46 100644
--- a/resources/js/Shared/Pagination.vue
+++ b/resources/js/Shared/Pagination.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mt-6 -mb-1 flex flex-wrap">
     <template v-for="(link, key) in links">
-      <div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-gray" :class="{ 'ml-auto': link.label === 'Next' }">{{ link.label }}</div>
+      <div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-gray-400" :class="{ 'ml-auto': link.label === 'Next' }">{{ link.label }}</div>
       <inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active, 'ml-auto': link.label === 'Next' }" :href="link.url">{{ link.label }}</inertia-link>
     </template>
   </div>
diff --git a/resources/js/Shared/SearchFilter.vue b/resources/js/Shared/SearchFilter.vue
index 86ef45e..6521890 100644
--- a/resources/js/Shared/SearchFilter.vue
+++ b/resources/js/Shared/SearchFilter.vue
@@ -3,8 +3,8 @@
     <div class="flex w-full bg-white shadow rounded">
       <dropdown class="px-4 md:px-6 rounded-l border-r hover:bg-gray-100 focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
         <div class="flex items-baseline">
-          <span class="text-gray-800 hidden md:inline">Filter</span>
-          <svg class="w-2 h-2 fill-gray-700 md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
+          <span class="text-gray-700 hidden md:inline">Filter</span>
+          <svg class="w-2 h-2 fill-gray-600 md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
             <path d="M239.998 239.999L0 0h961.243L721.246 240c-131.999 132-240.28 240-240.624 239.999-.345-.001-108.625-108.001-240.624-240z" />
           </svg>
         </div>
@@ -14,7 +14,7 @@
       </dropdown>
       <input class="relative w-full px-6 py-3 rounded-r focus:shadow-outline" autocomplete="off" type="text" name="search" placeholder="Search…" :value="value" @input="$emit('input', $event.target.value)">
     </div>
-    <button class="ml-3 text-sm text-gray-600 hover:text-gray-700 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button>
+    <button class="ml-3 text-sm text-gray-500 hover:text-gray-600 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button>
   </div>
 </template>
 
diff --git a/resources/js/Shared/TrashedMessage.vue b/resources/js/Shared/TrashedMessage.vue
index 939f12d..3143c45 100644
--- a/resources/js/Shared/TrashedMessage.vue
+++ b/resources/js/Shared/TrashedMessage.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="p-4 bg-yellow-400 rounded border border-yellow-600 flex items-center justify-between">
+  <div class="p-4 bg-yellow-400 rounded flex items-center justify-between max-w-3xl">
     <div class="flex items-center">
-      <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-700 mr-2" />
-      <div class="text-yellow-700">
+      <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-900 mr-2" />
+      <div class="text-yellow-900">
         <slot />
       </div>
     </div>
-    <button class="text-yellow-700 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
+    <button class="text-yellow-900 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
   </div>
 </template>
 
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index ed58a90..05c1c2f 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -7,7 +7,7 @@
     <script src="{{ mix('/js/app.js') }}" defer></script>
     @routes
 </head>
-<body class="font-sans leading-none text-gray-800 antialiased">
+<body class="font-sans leading-none text-gray-700 antialiased">
 
 @inertia
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 9b289ee..bd12b25 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,17 @@ module.exports = {
           ...defaultTheme.fontFamily.sans,
         ],
       },
+      colors: {
+        indigo: {
+          '900': '#191e38',
+          '800': '#2f365f',
+          '600': '#5661b3',
+          '500': '#6574cd',
+          '400': '#7886d7',
+          '300': '#b2b7ff',
+          '100': '#e6e8ff',
+        },
+      },
       boxShadow: theme => ({
         'outline': '0 0 0 2px ' + theme('colors.indigo.500'),
       }),
@@ -21,4 +32,4 @@ module.exports = {
     zIndex: ['responsive', 'focus'],
   },
   plugins: [],
-}
\ No newline at end of file
+}