diff --git a/bigbluebutton-html5/imports/ui/components/common/button/styles.js b/bigbluebutton-html5/imports/ui/components/common/button/styles.js
index 80bc304ed5..1f1f8e0078 100644
--- a/bigbluebutton-html5/imports/ui/components/common/button/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/common/button/styles.js
@@ -42,6 +42,7 @@ import {
   btnDangerBorder,
   btnDangerColor,
   btnDangerBg,
+  btnDangerBgHover,
   btnDarkBorder,
   btnDarkColor,
   btnDarkBg,
@@ -924,6 +925,7 @@ const Button = styled(BaseButton)`
     &:hover,
     .buttonWrapper:hover & {
       color: ${btnDangerColor};
+      background-color: ${btnDangerBgHover};
     }
   `}
 
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
index 97d26de365..4d0d1c068c 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
@@ -64,6 +64,7 @@ const btnWarningBg = `var(--btn-warning-bg, ${colorWarning})`;
 const btnDangerBorder = `var(--btn-danger-border, ${colorDanger})`;
 const btnDangerColor = `var(--btn-danger-color, ${colorWhite})`;
 const btnDangerBg = `var(--btn-danger-bg, ${colorDanger})`;
+const btnDangerBgHover = 'var(--btn-danger-bg-hover, #C61C1C)';
 
 const btnDarkBorder = `var(--btn-dark-border, ${colorDanger})`;
 const btnDarkColor = `var(--btn-dark-color, ${colorWhite})`;
@@ -171,6 +172,7 @@ export {
   btnDangerBorder,
   btnDangerColor,
   btnDangerBg,
+  btnDangerBgHover,
   btnDarkBorder,
   btnDarkColor,
   btnDarkBg,