diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/styles.js b/bigbluebutton-html5/imports/ui/components/actions-bar/styles.js
index 7a5c7e1a4b..26145fc7d4 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/styles.js
@@ -7,6 +7,7 @@ import Button from '/imports/ui/components/common/button/component';
 const ActionsBar = styled.div`
   display: flex;
   flex-direction: row;
+  align-items: center;
 `;
 
 const Left = styled.div`
diff --git a/bigbluebutton-html5/imports/ui/components/common/button/styles.js b/bigbluebutton-html5/imports/ui/components/common/button/styles.js
index d5d3b2faac..7c0ee61cc6 100644
--- a/bigbluebutton-html5/imports/ui/components/common/button/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/common/button/styles.js
@@ -3,6 +3,7 @@ import Icon from '/imports/ui/components/common/icon/component';
 import {
   btnSpacing,
   borderRadius,
+  borderSizeSmall,
   borderSize,
   borderSizeLarge,
   smPaddingY,
@@ -23,9 +24,15 @@ import {
 import {
   btnDefaultColor,
   btnDefaultBg,
+  btnDefaultGhostColor,
+  btnDefaultGhostBg,
+  btnDefaultGhostActiveBg,
+  btnDefaultGhostBorder,
   btnPrimaryBorder,
   btnPrimaryColor,
   btnPrimaryBg,
+  btnPrimaryHoverBg,
+  btnPrimaryActiveBg,
   btnSuccessBorder,
   btnSuccessColor,
   btnSuccessBg,
@@ -49,8 +56,14 @@ import BaseButton from './base/component';
 
 const ButtonIcon = styled(Icon)`
   width: 1em;
+  height: 1em;
   text-align: center;
 
+  &:before {
+    width: 1em;
+    height: 1em;
+  }
+
   .buttonWrapper & {
     font-size: 125%;
   }
@@ -62,9 +75,6 @@ const ButtonIcon = styled(Icon)`
       margin: 0 ${btnSpacing} 0 0;
     }
   }
-  .buttonWrapper:hover & {
-    opacity: .75;
-  }
 `;
 
 const EmojiButtonSibling = styled.span`
@@ -146,10 +156,21 @@ const ButtonWrapper = styled(BaseButton)`
     box-shadow: none;
   }
 
+  & > span {
+    display: block;
+    text-align: center;
+    white-space: nowrap;
+    border: ${borderSizeSmall} solid transparent;
+  }
+
   ${({ size }) => size === 'sm' && `
     font-size: calc(${fontSizeSmall} * .85);
     padding: ${smPaddingY} ${smPaddingX};
 
+    & > span {
+      border: ${borderSizeLarge} solid transparent;
+    }
+
     & > label {
       display: inline-block;
       margin: 0 0 0 ${btnSpacing};
@@ -163,10 +184,14 @@ const ButtonWrapper = styled(BaseButton)`
   ${({ size }) => size === 'md' && `
     font-size: calc(${fontSizeBase} * .85);
     padding: ${mdPaddingY} ${mdPaddingX};
+
+    & > span {
+      border: ${borderSizeLarge} solid transparent;
+    }
   `}
 
   ${({ size }) => size === 'lg' && `
-    font-size: calc(${fontSizeLarge} * .85);
+    font-size: ${fontSizeBase};
     padding: ${lgPaddingY} ${lgPaddingX};
   `}
 
@@ -175,11 +200,83 @@ const ButtonWrapper = styled(BaseButton)`
     padding: ${jumboPaddingY} ${jumboPaddingX};
   `}
 
-  & > span {
-    display: block;
-    text-align: center;
-    white-space: nowrap;
-  }
+  ${({ color }) => color === 'primary' && `
+    &:focus:not([aria-disabled="true"]){
+      & > span{
+        color: ${btnPrimaryColor};
+        background-color: ${btnPrimaryBg};
+        background-clip: padding-box;
+        box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
+      }
+    }
+
+    &:hover{
+      & > span{
+        filter: brightness(90%);
+        color: ${btnPrimaryColor};
+        background-color: ${btnPrimaryHoverBg} !important;
+      }
+    }
+
+    &:active:focus{
+      & > span{
+        filter: brightness(85%);
+        color: ${btnPrimaryColor};
+        background-color: ${btnPrimaryActiveBg};
+      }
+    }
+
+    &:active{
+      & > span{
+        filter: brightness(85%);
+        color: ${btnPrimaryColor};
+        background-color: ${btnPrimaryActiveBg};
+      }
+    }
+  `}
+
+  ${({ circle, ghost, color }) => circle && ghost && color === 'default' && `
+    & > span{
+      color: ${btnDefaultGhostColor};
+    }
+
+    &:focus:not([aria-disabled="true"]){
+      & > span{
+        background-color: ${btnDefaultGhostBg} !important;
+        background-clip: padding-box;
+        box-shadow: 0 0 0 ${borderSize} ${btnDefaultGhostBorder};
+        border-color: transparent !important;
+      }
+    }
+
+    &:hover{
+      & > span{
+        filter: brightness(90%);
+        background-color: ${btnDefaultGhostBg} !important;
+      }
+    }
+
+    &:active:focus{
+      & > span{
+        filter: brightness(85%);
+        background-color: ${btnDefaultGhostActiveBg};
+      }
+    }
+
+    &:active{
+      & > span{
+        filter: brightness(85%);
+        background-color: ${btnDefaultGhostActiveBg};
+      }
+    }
+  `}
+
+  ${({ ghost }) => ghost && `
+    & > span{
+      background-image: none;
+      background-color: transparent;
+    }
+  `}
 `;
 
 const ButtonSpan = styled.span`
@@ -244,8 +341,11 @@ const ButtonSpan = styled.span`
   `}
 
   ${({ size }) => size === 'lg' && `
-    font-size: calc(${fontSizeLarge} * .85);
-    padding: ${lgPaddingY} ${lgPaddingX};
+    height: 3rem;
+    width: 3rem;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
   `}
 
   ${({ size }) => size === 'jumbo' && `
@@ -275,19 +375,6 @@ const ButtonSpan = styled.span`
     color: ${btnPrimaryColor};
     background-color: ${btnPrimaryBg};
     border: ${borderSizeLarge} solid transparent;
-
-    &:focus,
-    .buttonWrapper:focus:not([aria-disabled="true"]) & {
-      color: ${btnPrimaryColor};
-      background-color: ${btnPrimaryBg};
-      background-clip: padding-box;
-      box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
-    }
-
-    &:hover,
-    .buttonWrapper:hover & {
-      color: ${btnPrimaryColor};
-    }
   `}
 
   ${({ color }) => color === 'success' && `
@@ -403,32 +490,8 @@ const ButtonSpan = styled.span`
     }
   `}
 
-  ${({ ghost, color }) => ghost && color === 'default' && `
-    color: ${btnDefaultBg};
-    background-image: none;
-    background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
-
-    &:focus,
-    .buttonWrapper:focus & {
-      color: ${btnDefaultBg};
-      background-color: ${btnDefaultColor};
-      background-clip: padding-box;
-      box-shadow: 0 0 0 ${borderSizeLarge} ${btnDefaultBg};
-    }
-
-    &:hover,
-    .buttonWrapper:hover & {
-      color: ${btnDefaultBg};
-      background-color: ${btnDefaultColor};
-    }
-  `}
-
   ${({ ghost, color }) => ghost && color === 'primary' && `
     color: ${btnPrimaryBg};
-    background-image: none;
-    background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -447,9 +510,6 @@ const ButtonSpan = styled.span`
 
   ${({ ghost, color }) => ghost && color === 'success' && `
     color: ${btnSuccessBg};
-    background-image: none;
-    background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -468,9 +528,6 @@ const ButtonSpan = styled.span`
 
   ${({ ghost, color }) => ghost && color === 'warning' && `
     color: ${btnWarningBg};
-    background-image: none;
-    background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -489,9 +546,6 @@ const ButtonSpan = styled.span`
 
   ${({ ghost, color }) => ghost && color === 'danger' && `
     color: ${btnDangerBg};
-    background-image: none;
-    background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -510,9 +564,6 @@ const ButtonSpan = styled.span`
 
   ${({ ghost, color }) => ghost && color === 'dark' && `
     color: ${btnDarkBg};
-    background-image: none;
-    background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -531,9 +582,6 @@ const ButtonSpan = styled.span`
 
   ${({ ghost, color }) => ghost && color === 'offline' && `
     color: ${btnOfflineBg};
-    background-image: none;
-    background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -552,9 +600,6 @@ const ButtonSpan = styled.span`
 
   ${({ ghost, color }) => ghost && color === 'muted' && `
     color: ${btnMutedBg};
-    background-image: none;
-    background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -598,6 +643,7 @@ const ButtonSpan = styled.span`
 `;
 
 const Button = styled(BaseButton)`
+  border: ${borderSizeLarge} solid transparent;
   border: none;
   overflow: visible;
   display: inline-block;
@@ -671,7 +717,6 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'default' && `
     color: ${btnDefaultColor};
     background-color: ${btnDefaultBg};
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -690,7 +735,6 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'primary' && `
     color: ${btnPrimaryColor};
     background-color: ${btnPrimaryBg};
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -709,7 +753,6 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'success' && `
     color: ${btnSuccessColor};
     background-color: ${btnSuccessBg};
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -728,7 +771,6 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'warning' && `
     color: ${btnWarningColor};
     background-color: ${btnWarningBg};
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -747,7 +789,6 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'danger' && `
     color: ${btnDangerColor};
     background-color: ${btnDangerBg};
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -766,7 +807,6 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'dark' && `
     color: ${btnDarkColor};
     background-color: ${btnDarkBg};
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -785,7 +825,6 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'offline' && `
     color: ${btnOfflineColor};
     background-color: ${btnOfflineBg};
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -804,7 +843,6 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'muted' && `
     color: ${btnMutedColor};
     background-color: ${btnMutedBg};
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
@@ -824,7 +862,6 @@ const Button = styled(BaseButton)`
     color: ${btnDefaultBg};
     background-image: none;
     background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -845,7 +882,6 @@ const Button = styled(BaseButton)`
     color: ${btnPrimaryBg};
     background-image: none;
     background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -866,7 +902,6 @@ const Button = styled(BaseButton)`
     color: ${btnSuccessBg};
     background-image: none;
     background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -887,7 +922,6 @@ const Button = styled(BaseButton)`
     color: ${btnWarningBg};
     background-image: none;
     background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -908,7 +942,6 @@ const Button = styled(BaseButton)`
     color: ${btnDangerBg};
     background-image: none;
     background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -929,7 +962,6 @@ const Button = styled(BaseButton)`
     color: ${btnDarkBg};
     background-image: none;
     background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -950,7 +982,6 @@ const Button = styled(BaseButton)`
     color: ${btnOfflineBg};
     background-image: none;
     background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
@@ -971,7 +1002,6 @@ const Button = styled(BaseButton)`
     color: ${btnMutedBg};
     background-image: none;
     background-color: transparent;
-    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus & {
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
index a801b0b3b8..be77773c5b 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
@@ -24,7 +24,7 @@ const colorMuted = 'var(--color-muted, #586571)';
 const colorMutedBackground = 'var(--color-muted-background, #F3F6F9)';
 
 const colorBackground = `var(--color-background, ${colorGrayDark})`;
-const colorOverlay = `var(--color-overlay, rgba(6, 23, 42, 0.75))`;
+const colorOverlay = 'var(--color-overlay, rgba(6, 23, 42, 0.75))';
 
 const userListBg = `var(--user-list-bg, ${colorOffWhite})`;
 const userListText = `var(--user-list-text, ${colorGray})`;
@@ -41,9 +41,16 @@ const btnDefaultColor = `var(--btn-default-color, ${colorGray})`;
 const btnDefaultBg = `var(--btn-default-bg, ${colorWhite})`;
 const btnDefaultBorder = `var(--btn-default-border, ${colorWhite})`;
 
-const btnPrimaryBorder = `var(--btn-primary-border, ${colorPrimary})`;
+const btnDefaultGhostColor = `var(--btn-default-color, ${colorWhite})`;
+const btnDefaultGhostBg = 'var(--btn-default-bg, rgba(255, 255, 255, 0.1))'; // colorWhite, 10%
+const btnDefaultGhostBorder = 'var(--btn-default-border, rgba(255, 255, 255, 0.5))'; // colorWhite, 50%
+const btnDefaultGhostActiveBg = 'var(--btn-default-active-bg, rgba(255, 255, 255, 0.2))'; // colorWhite, 20%
+
+const btnPrimaryBorder = 'var(--btn-primary-border, rgba(15, 112, 215, 0.5))'; // colorPrimary, 50%
 const btnPrimaryColor = `var(--btn-primary-color, ${colorWhite})`;
 const btnPrimaryBg = `var(--btn-primary-bg, ${colorPrimary})`;
+const btnPrimaryHoverBg = 'var(--btn-primary-hover-bg, #0C57A7)';
+const btnPrimaryActiveBg = 'var(--btn-primary-active-bg, #0A4B8F)';
 
 const btnSuccessBorder = `var(--btn-success-border, ${colorSuccess})`;
 const btnSuccessColor = `var(--btn-success-color, ${colorWhite})`;
@@ -143,9 +150,15 @@ export {
   btnDefaultColor,
   btnDefaultBg,
   btnDefaultBorder,
+  btnDefaultGhostColor,
+  btnDefaultGhostBg,
+  btnDefaultGhostBorder,
+  btnDefaultGhostActiveBg,
   btnPrimaryBorder,
   btnPrimaryColor,
   btnPrimaryBg,
+  btnPrimaryHoverBg,
+  btnPrimaryActiveBg,
   btnSuccessBorder,
   btnSuccessColor,
   btnSuccessBg,