diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss
index bc14a9db31..459481d41d 100644
--- a/stylesheets/components/ConversationHeader.scss
+++ b/stylesheets/components/ConversationHeader.scss
@@ -278,10 +278,12 @@
     }
 
     &--join-call {
+      $background: $color-accent-green;
+
       @include font-body-1;
       @include rounded-corners;
       align-items: center;
-      background-color: $color-accent-green;
+      background-color: $background;
       color: $color-white;
       display: flex;
       outline: none;
@@ -306,6 +308,12 @@
         min-width: $icon-size;
         width: $icon-size;
       }
+
+      // Override hover state coming from __button above.
+      &:hover,
+      &:focus {
+        background-color: darken($background, 16%);
+      }
     }
   }