diff --git a/dashboard/src/components/dashboard/Layout.vue b/dashboard/src/components/dashboard/Layout.vue
index 79d19701..88c6b0ed 100644
--- a/dashboard/src/components/dashboard/Layout.vue
+++ b/dashboard/src/components/dashboard/Layout.vue
@@ -7,21 +7,21 @@
         <img class="w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
 
         <router-link to="/dashboard">
-          <h1 class="font-semibold">Zeppelin Dashboard</h1>
+          <h1 class="font-semibold hover:opacity-75 transition duration-250">Zeppelin Dashboard</h1>
         </router-link>
       </div>
 
       <div class="flex-1 flex items-center flex-wrap">
         <ul class="dashboard-nav list-none flex md:ml-8">
-          <router-link class="flex-auto mr-4" to="/dashboard">Guilds</router-link>
-          <a href="javascript:void(0)" class="navbar-item hover:text-red-400 mr-2" v-on:click="logout()">Log out</a>
+          <router-link class="flex-auto mr-4 transition duration-250" to="/dashboard">Guilds</router-link>
+          <a href="javascript:void(0)" class="navbar-item hover:text-red-400 mr-2 transition duration-250" v-on:click="logout()">Log out</a>
         </ul>
 
         <div class="flex-1 flex items-center md:justify-end">
           <router-link
             to="/docs"
             role="menuitem"
-            class="py-1 px-2 rounded hover:bg-gray-700">
+            class="py-1 px-2 rounded hover:bg-gray-700 transition duration-250">
             Go to documentation
           </router-link>
         </div>
diff --git a/dashboard/src/components/docs/DocsLayout.vue b/dashboard/src/components/docs/DocsLayout.vue
index e8657d8a..126d25a4 100644
--- a/dashboard/src/components/docs/DocsLayout.vue
+++ b/dashboard/src/components/docs/DocsLayout.vue
@@ -8,14 +8,14 @@
         <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
 
         <router-link to="/docs">
-          <h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
+          <h1 class="flex-auto font-semibold hover:opacity-75 transition duration-250">Zeppelin Documentation</h1>
         </router-link>
       </div>
       <div class="flex-1 flex items-center justify-end">
         <router-link
           to="/dashboard"
           role="menuitem"
-          class="py-1 px-2 rounded hover:bg-gray-700 hidden lg:block">
+          class="py-1 px-2 rounded hover:bg-gray-700 hidden lg:block transition duration-250">
           Go to dashboard
         </router-link>
         <button class="link-button text-2xl leading-zero lg:hidden" v-on:click="toggleMobileMenu()" aria-hidden="true">