diff --git a/resources/css/buttons.css b/resources/css/buttons.css
index a26d207..60a93b7 100644
--- a/resources/css/buttons.css
+++ b/resources/css/buttons.css
@@ -1,7 +1,7 @@
 .btn-indigo {
-  @apply px-6 py-3 rounded bg-indigo-dark text-white text-sm font-bold whitespace-no-wrap;
+  @apply px-6 py-3 rounded bg-indigo-600 text-white text-sm font-bold whitespace-no-wrap;
 
-  &:hover, &:focus { @apply bg-orange }
+  &:hover, &:focus { @apply bg-orange-500 }
 }
 
 .btn-spinner,
diff --git a/resources/css/form.css b/resources/css/form.css
index c92ca42..c73de9c 100644
--- a/resources/css/form.css
+++ b/resources/css/form.css
@@ -1,20 +1,20 @@
 .form-label {
-  @apply .mb-2 .block .text-grey-darkest .select-none;
+  @apply .mb-2 .block .text-gray-800 .select-none;
 }
 
 .form-input,
 .form-textarea,
 .form-select {
-  @apply .p-2 .leading-normal .block .w-full .border .text-grey-darkest .bg-white .font-sans .rounded .text-left .appearance-none .relative;
+  @apply .p-2 .leading-normal .block .w-full .border .text-gray-800 .bg-white .font-sans .rounded .text-left .appearance-none .relative;
 
   &:focus,
   &.focus {
-    @apply .border-indigo;
-    box-shadow: 0 0 0 1px theme('colors.indigo');
+    @apply .border-indigo-500;
+    box-shadow: 0 0 0 1px theme('colors.indigo.500');
   }
 
   &::placeholder {
-    @apply .text-grey-dark .opacity-100;
+    @apply .text-gray-600 .opacity-100;
   }
 }
 
@@ -32,15 +32,15 @@
 }
 
 .form-error {
-  @apply .text-red .mt-2 .text-sm;
+  @apply .text-red-500 .mt-2 .text-sm;
 }
 
 .form-input.error,
 .form-textarea.error,
 .form-select.error {
-  @apply .border-red-light;
+  @apply .border-red-400;
 
   &:focus {
-    box-shadow: 0 0 0 1px theme('colors.red');
+    box-shadow: 0 0 0 1px theme('colors.red.500');
   }
 }
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index e2eb2f7..1c8bb1f 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-6 bg-indigo-darker min-h-screen flex justify-center items-center">
+  <div class="p-6 bg-indigo-700 min-h-screen flex justify-center items-center">
     <div class="w-full max-w-md">
       <logo class="block mx-auto w-full max-w-xs fill-white" height="50" />
       <form class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden" @submit.prevent="submit">
@@ -13,7 +13,7 @@
             <span class="text-sm">Remember Me</span>
           </label>
         </div>
-        <div class="px-10 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-between items-center">
+        <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>
         </div>
diff --git a/resources/js/Pages/Contacts/Create.vue b/resources/js/Pages/Contacts/Create.vue
index d998c2c..456ec07 100644
--- a/resources/js/Pages/Contacts/Create.vue
+++ b/resources/js/Pages/Contacts/Create.vue
@@ -1,8 +1,8 @@
 <template>
   <layout title="Create Contact">
     <h1 class="mb-8 font-bold text-3xl">
-      <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
-      <span class="text-indigo-light font-medium">/</span> Create
+      <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('contacts')">Contacts</inertia-link>
+      <span class="text-indigo-400 font-medium">/</span> Create
     </h1>
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
       <form @submit.prevent="submit">
@@ -25,7 +25,7 @@
           </select-input>
           <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-grey-lightest border-t border-grey-lighter flex justify-end items-center">
+        <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>
         </div>
       </form>
diff --git a/resources/js/Pages/Contacts/Edit.vue b/resources/js/Pages/Contacts/Edit.vue
index fbd49d8..23678cc 100644
--- a/resources/js/Pages/Contacts/Edit.vue
+++ b/resources/js/Pages/Contacts/Edit.vue
@@ -1,8 +1,8 @@
 <template>
   <layout :title="`${form.first_name} ${form.last_name}`">
     <h1 class="mb-8 font-bold text-3xl">
-      <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
-      <span class="text-indigo-light font-medium">/</span>
+      <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('contacts')">Contacts</inertia-link>
+      <span class="text-indigo-400 font-medium">/</span>
       {{ form.first_name }} {{ form.last_name }}
     </h1>
     <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
@@ -29,8 +29,8 @@
           </select-input>
           <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-grey-lightest border-t border-grey-lighter flex items-center">
-          <button v-if="!contact.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
+        <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>
         </div>
       </form>
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index c208833..5d366c3 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -3,7 +3,7 @@
     <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-grey-darkest">Trashed:</label>
+        <label class="block text-gray-800">Trashed:</label>
         <select v-model="form.trashed" class="mt-1 w-full form-select">
           <option :value="null" />
           <option value="with">With Trashed</option>
@@ -23,11 +23,11 @@
           <th class="px-6 pt-6 pb-4">City</th>
           <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
         </tr>
-        <tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
+        <tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
-            <inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)">
+            <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-grey ml-2" />
+              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray 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-grey" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
             </inertia-link>
           </td>
         </tr>
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index 3f7e57b..bc888a2 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <layout title="Dashboard">
     <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 underline hover:text-orange-dark" href="https://github.com/inertiajs">Inertia.js</a> works.</p>
+    <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>
diff --git a/resources/js/Pages/Organizations/Create.vue b/resources/js/Pages/Organizations/Create.vue
index 8d582d3..3e9aa1b 100644
--- a/resources/js/Pages/Organizations/Create.vue
+++ b/resources/js/Pages/Organizations/Create.vue
@@ -1,8 +1,8 @@
 <template>
   <layout title="Create Organization">
     <h1 class="mb-8 font-bold text-3xl">
-      <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
-      <span class="text-indigo-light font-medium">/</span> Create
+      <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('organizations')">Organizations</inertia-link>
+      <span class="text-indigo-400 font-medium">/</span> Create
     </h1>
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
       <form @submit.prevent="submit">
@@ -20,7 +20,7 @@
           </select-input>
           <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-grey-lightest border-t border-grey-lighter flex justify-end items-center">
+        <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>
         </div>
       </form>
diff --git a/resources/js/Pages/Organizations/Edit.vue b/resources/js/Pages/Organizations/Edit.vue
index 8d82afe..bd28d40 100644
--- a/resources/js/Pages/Organizations/Edit.vue
+++ b/resources/js/Pages/Organizations/Edit.vue
@@ -1,8 +1,8 @@
 <template>
   <layout :title="form.name">
     <h1 class="mb-8 font-bold text-3xl">
-      <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
-      <span class="text-indigo-light font-medium">/</span>
+      <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('organizations')">Organizations</inertia-link>
+      <span class="text-indigo-400 font-medium">/</span>
       {{ form.name }}
     </h1>
     <trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore">
@@ -24,8 +24,8 @@
           </select-input>
           <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-grey-lightest border-t border-grey-lighter flex items-center">
-          <button v-if="!organization.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
+        <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>
         </div>
       </form>
@@ -38,11 +38,11 @@
           <th class="px-6 pt-6 pb-4">City</th>
           <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
         </tr>
-        <tr v-for="contact in organization.contacts" :key="contact.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
+        <tr v-for="contact in organization.contacts" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
-            <inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)">
+            <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-grey ml-2" />
+              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray 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-grey" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
             </inertia-link>
           </td>
         </tr>
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 2609cdd..5b66620 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -3,7 +3,7 @@
     <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-grey-darkest">Trashed:</label>
+        <label class="block text-gray-800">Trashed:</label>
         <select v-model="form.trashed" class="mt-1 w-full form-select">
           <option :value="null" />
           <option value="with">With Trashed</option>
@@ -22,11 +22,11 @@
           <th class="px-6 pt-6 pb-4">City</th>
           <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
         </tr>
-        <tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
+        <tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
-            <inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('organizations.edit', organization.id)">
+            <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-grey ml-2" />
+              <icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray 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-grey" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
             </inertia-link>
           </td>
         </tr>
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index 084042a..afcfc1f 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -1,8 +1,8 @@
 <template>
   <layout title="Create User">
     <h1 class="mb-8 font-bold text-3xl">
-      <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
-      <span class="text-indigo-light font-medium">/</span> Create
+      <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</inertia-link>
+      <span class="text-indigo-400 font-medium">/</span> Create
     </h1>
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
       <form @submit.prevent="submit">
@@ -16,7 +16,7 @@
             <option :value="false">No</option>
           </select-input>
         </div>
-        <div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
+        <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>
         </div>
       </form>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index 2e4a157..22be5ba 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -1,8 +1,8 @@
 <template>
   <layout :title="`${form.first_name} ${form.last_name}`">
     <h1 class="mb-8 font-bold text-3xl">
-      <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
-      <span class="text-indigo-light font-medium">/</span>
+      <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</inertia-link>
+      <span class="text-indigo-400 font-medium">/</span>
       {{ form.first_name }} {{ form.last_name }}
     </h1>
     <trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
@@ -20,8 +20,8 @@
             <option :value="false">No</option>
           </select-input>
         </div>
-        <div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
-          <button v-if="!user.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
+        <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>
         </div>
       </form>
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index 05a514c..1e88957 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -3,13 +3,13 @@
     <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-grey-darkest">Role:</label>
+        <label class="block text-gray-800">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-grey-darkest">Trashed:</label>
+        <label class="mt-4 block text-gray-800">Trashed:</label>
         <select v-model="form.trashed" class="mt-1 w-full form-select">
           <option :value="null" />
           <option value="with">With Trashed</option>
@@ -28,11 +28,11 @@
           <th class="px-6 pt-6 pb-4">Email</th>
           <th class="px-6 pt-6 pb-4" colspan="2">Role</th>
         </tr>
-        <tr v-for="user in users" :key="user.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
+        <tr v-for="user in users" :key="user.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
-            <inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('users.edit', user.id)">
+            <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-grey ml-2" />
+              <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray 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-grey" />
+              <icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
             </inertia-link>
           </td>
         </tr>
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 8f745c0..fd52efd 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -4,13 +4,13 @@
     <div class="flex flex-col">
       <div class="min-h-screen flex flex-col" @click="hideDropdownMenus">
         <div class="md:flex">
-          <div class="bg-indigo-darkest md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
+          <div class="bg-indigo-800 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
             <inertia-link class="mt-1" href="/">
               <logo class="fill-white" width="120" height="28" />
             </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-darker rounded">
+              <div slot="dropdown" class="mt-2 px-8 py-4 shadow-xl bg-indigo-700 rounded">
                 <main-menu />
               </div>
             </dropdown>
@@ -19,22 +19,22 @@
             <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-grey-darkest group-hover:text-indigo-dark focus:text-indigo-dark mr-1 whitespace-no-wrap">
+                <div class="text-gray-800 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-dark fill-grey-darkest focus:fill-indigo-dark" name="cheveron-down" />
+                <icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-800 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 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 hover:text-white" :href="route('users')">Manage Users</inertia-link>
-                <inertia-link class="block px-6 py-2 hover:bg-indigo 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>
         </div>
         <div class="flex flex-grow">
-          <div class="bg-indigo-darker flex-shrink-0 w-56 p-12 hidden md:block">
+          <div class="bg-indigo-700 flex-shrink-0 w-56 p-12 hidden md:block">
             <main-menu />
           </div>
           <div class="w-full overflow-hidden px-4 py-8 md:p-12">
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 53a1532..1d36feb 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -2,26 +2,26 @@
   <div>
     <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-light group-hover:fill-white'" />
-        <div :class="isUrl('') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Dashboard</div>
+        <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>
       </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-light group-hover:fill-white'" />
-        <div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Organizations</div>
+        <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>
       </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-light group-hover:fill-white'" />
-        <div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Contacts</div>
+        <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>
       </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-light group-hover:fill-white'" />
-        <div :class="isUrl('reports') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Reports</div>
+        <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>
       </inertia-link>
     </div>
   </div>
diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
index 9da78a1..8a6914c 100644
--- a/resources/js/Shared/Pagination.vue
+++ b/resources/js/Shared/Pagination.vue
@@ -1,8 +1,8 @@
 <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-grey" :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 focus:text-indigo" :class="{ 'bg-white': link.active, 'ml-auto': link.label === 'Next' }" :href="link.url">{{ link.label }}</inertia-link>
+      <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>
+      <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>
 </template>
diff --git a/resources/js/Shared/SearchFilter.vue b/resources/js/Shared/SearchFilter.vue
index d833f3a..86ef45e 100644
--- a/resources/js/Shared/SearchFilter.vue
+++ b/resources/js/Shared/SearchFilter.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex items-center">
     <div class="flex w-full bg-white shadow rounded">
-      <dropdown class="px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
+      <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-grey-darkest hidden md:inline">Filter</span>
-          <svg class="w-2 h-2 fill-grey-darker md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
+          <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">
             <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-grey-dark hover:text-grey-darker focus:text-indigo" type="button" @click="$emit('reset')">Reset</button>
+    <button class="ml-3 text-sm text-gray-600 hover:text-gray-700 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 e04cd97..939f12d 100644
--- a/resources/js/Shared/TrashedMessage.vue
+++ b/resources/js/Shared/TrashedMessage.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="p-4 bg-yellow-light rounded border border-yellow-dark flex items-center justify-between">
+  <div class="p-4 bg-yellow-400 rounded border border-yellow-600 flex items-center justify-between">
     <div class="flex items-center">
-      <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-darker mr-2" />
-      <div class="text-yellow-darker">
+      <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-700 mr-2" />
+      <div class="text-yellow-700">
         <slot />
       </div>
     </div>
-    <button class="text-yellow-darker hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
+    <button class="text-yellow-700 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 8c96695..ed58a90 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="h-full bg-grey-lighter">
+<html class="h-full bg-gray-200">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
@@ -7,7 +7,7 @@
     <script src="{{ mix('/js/app.js') }}" defer></script>
     @routes
 </head>
-<body class="font-sans leading-none text-grey-darkest antialiased">
+<body class="font-sans leading-none text-gray-800 antialiased">
 
 @inertia
 
diff --git a/tailwind.config.js b/tailwind.config.js
index c45b220..9b289ee 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,93 +9,8 @@ module.exports = {
           ...defaultTheme.fontFamily.sans,
         ],
       },
-      colors: {
-        'transparent': 'transparent',
-
-        'black': '#22292f',
-        'grey-darkest': '#3d4852',
-        'grey-darker': '#606f7b',
-        'grey-dark': '#8795a1',
-        'grey': '#b8c2cc',
-        'grey-light': '#dae1e7',
-        'grey-lighter': '#f1f5f8',
-        'grey-lightest': '#f8fafc',
-        'white': '#ffffff',
-
-        'red-darkest': '#3b0d0c',
-        'red-darker': '#621b18',
-        'red-dark': '#cc1f1a',
-        'red': '#e3342f',
-        'red-light': '#ef5753',
-        'red-lighter': '#f9acaa',
-        'red-lightest': '#fcebea',
-
-        'orange-darkest': '#462a16',
-        'orange-darker': '#613b1f',
-        'orange-dark': '#de751f',
-        'orange': '#f6993f',
-        'orange-light': '#faad63',
-        'orange-lighter': '#fcd9b6',
-        'orange-lightest': '#fff5eb',
-
-        'yellow-darkest': '#453411',
-        'yellow-darker': '#684f1d',
-        'yellow-dark': '#f2d024',
-        'yellow': '#ffed4a',
-        'yellow-light': '#fff382',
-        'yellow-lighter': '#fff9c2',
-        'yellow-lightest': '#fcfbeb',
-
-        'green-darkest': '#0f2f21',
-        'green-darker': '#1a4731',
-        'green-dark': '#1f9d55',
-        'green': '#38c172',
-        'green-light': '#51d88a',
-        'green-lighter': '#a2f5bf',
-        'green-lightest': '#e3fcec',
-
-        'teal-darkest': '#0d3331',
-        'teal-darker': '#20504f',
-        'teal-dark': '#38a89d',
-        'teal': '#4dc0b5',
-        'teal-light': '#64d5ca',
-        'teal-lighter': '#a0f0ed',
-        'teal-lightest': '#e8fffe',
-
-        'blue-darkest': '#12283a',
-        'blue-darker': '#1c3d5a',
-        'blue-dark': '#2779bd',
-        'blue': '#3490dc',
-        'blue-light': '#6cb2eb',
-        'blue-lighter': '#bcdefa',
-        'blue-lightest': '#eff8ff',
-
-        'indigo-darkest': '#191e38',
-        'indigo-darker': '#2f365f',
-        'indigo-dark': '#5661b3',
-        'indigo': '#6574cd',
-        'indigo-light': '#7886d7',
-        'indigo-lighter': '#b2b7ff',
-        'indigo-lightest': '#e6e8ff',
-
-        'purple-darkest': '#21183c',
-        'purple-darker': '#382b5f',
-        'purple-dark': '#794acf',
-        'purple': '#9561e2',
-        'purple-light': '#a779e9',
-        'purple-lighter': '#d6bbfc',
-        'purple-lightest': '#f3ebff',
-
-        'pink-darkest': '#451225',
-        'pink-darker': '#6f213f',
-        'pink-dark': '#eb5286',
-        'pink': '#f66d9b',
-        'pink-light': '#fa7ea8',
-        'pink-lighter': '#ffbbca',
-        'pink-lightest': '#ffebef',
-      },
       boxShadow: theme => ({
-        'outline': '0 0 0 2px ' + theme('colors.indigo'),
+        'outline': '0 0 0 2px ' + theme('colors.indigo.500'),
       }),
       fill: theme => theme('colors'),
     },