diff --git a/resources/css/buttons.css b/resources/css/buttons.css
index 60a93b7..c0f75c9 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-600 text-white text-sm font-bold whitespace-no-wrap;
+  @apply px-6 py-3 rounded bg-indigo-700 text-white text-sm font-bold whitespace-no-wrap;
 
   &:hover, &:focus { @apply bg-orange-500 }
 }
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 1c8bb1f..c89afa9 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-700 min-h-screen flex justify-center items-center">
+  <div class="p-6 bg-indigo-800 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">
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index fd52efd..b8e093f 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -4,7 +4,7 @@
     <div class="flex flex-col">
       <div class="min-h-screen flex flex-col" @click="hideDropdownMenus">
         <div class="md:flex">
-          <div class="bg-indigo-800 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
+          <div class="bg-indigo-900 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>
@@ -26,15 +26,15 @@
                 <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-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>
+                <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>
               </div>
             </dropdown>
           </div>
         </div>
         <div class="flex flex-grow">
-          <div class="bg-indigo-700 flex-shrink-0 w-56 p-12 hidden md:block">
+          <div class="bg-indigo-800 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">