diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index 1b7da572..1011926b 100644
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -23,6 +23,12 @@
   &__avatar-container {
     padding-top: 6px;
     margin-right: var(--sp-tight);
+    & .avatar-container {
+      transition: transform 200ms var(--fluid-push);
+      &:hover {
+        transform: translateY(-4px);
+      }
+    }
 
     & button {
       cursor: pointer;
diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
index ecb38128..ce447aef 100644
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
+++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
@@ -16,7 +16,7 @@
   }
   & .avatar-container,
   & .notification-badge {
-    transition: transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97);
+    transition: transform 200ms var(--fluid-push);
   }
   &:hover .avatar-container {
     transform: translateX(4px)
diff --git a/src/index.scss b/src/index.scss
index 941f94d2..605de41b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -157,6 +157,9 @@
   // large size nav drawer & people drawer width => 326px, 312px
   // medium size nav drawer & people drawer width => 280, 268
 
+  /* transition curves */
+  --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
+  
   --font-family: 'Roboto', 'Supreme', sans-serif;
 }