diff --git a/bigbluebutton-html5/imports/ui/components/common/button/styles.js b/bigbluebutton-html5/imports/ui/components/common/button/styles.js
index fba4da5fd0..6deac80ece 100644
--- a/bigbluebutton-html5/imports/ui/components/common/button/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/common/button/styles.js
@@ -51,6 +51,7 @@ import {
   btnMutedBorder,
   btnMutedColor,
   btnMutedBg,
+  colorWhite,
   colorGray,
 } from '/imports/ui/stylesheets/styled-components/palette';
 import BaseButton from './base/component';
@@ -357,6 +358,73 @@ const ButtonSpan = styled.span`
     padding: ${jumboPaddingY} ${jumboPaddingX};
   `}
 
+  ${({ size, color }) => size === 'md' && color === 'light' && `
+    color: ${colorGray};
+    
+    &:focus,
+    .buttonWrapper:focus:not([aria-disabled="true"]) & {
+      color: ${colorGray};
+      box-shadow: 0 0 0 1px #CDD6E0 !important;
+      background-color: #DCE4EC !important;
+    }
+    
+    &:hover {
+      color: hsl(210, 13%, 20%) !important;
+      background-color: #DCE4EC !important;
+    }
+
+    &:active {
+      color: hsl(210, 13%, 20%) !important;
+      background-color: hsl(210, 30%, 80%) !important;
+    }
+
+    &:focus:hover {
+      color: hsl(210, 13%, 20%) !important;
+      box-shadow: 0 0 0 1px #CDD6E0 !important;
+      background-color: #DCE4EC !important;
+    }
+
+    &:focus:active {
+      color: hsl(210, 13%, 20%) !important;
+      box-shadow: 0 0 0 1px #CDD6E0 !important;
+      background-color: hsl(210, 30%, 80%) !important;
+    }
+  `}
+
+  ${({ size, color }) => size === 'md' && color === 'dark' && `
+    color: ${colorWhite};
+    background: none !important;
+    
+    &:focus,
+    .buttonWrapper:focus:not([aria-disabled="true"]) & {
+      color: ${colorWhite};
+      box-shadow: 0 0 0 1px ${btnDefaultGhostBorder} !important;
+      background-color: ${btnDefaultGhostBg} !important;
+    }
+    
+    &:hover {
+      color: hsl(0, 0%, 85%) !important;
+      background-color: ${btnDefaultGhostBg} !important;
+    }
+
+    &:active {
+      color: hsl(0, 0%, 85%) !important;
+      background-color: ${btnDefaultGhostActiveBg} !important;
+    }
+
+    &:focus:hover {
+      color: hsl(0, 0%, 85%) !important;
+      box-shadow: 0 0 0 1px ${btnDefaultGhostBorder} !important;
+      background-color: ${btnDefaultGhostBg} !important;
+    }
+
+    &:focus:active {
+      color: hsl(0, 0%, 85%) !important;
+      box-shadow: 0 0 0 1px ${btnDefaultGhostBorder} !important;
+      background-color: ${btnDefaultGhostActiveBg} !important;
+    }
+  `}
+
   ${({ color, ghost }) => color === 'default' && !ghost && `
     color: ${btnDefaultColor};
     background-color: ${btnDefaultBg};
diff --git a/bigbluebutton-html5/imports/ui/components/common/control-header/right/component.jsx b/bigbluebutton-html5/imports/ui/components/common/control-header/right/component.jsx
index 26fc219ee7..f0cff6b942 100644
--- a/bigbluebutton-html5/imports/ui/components/common/control-header/right/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/common/control-header/right/component.jsx
@@ -10,7 +10,8 @@ class Right extends Component {
   render() {
     return (
       <Styled.CloseButton
-        size="sm"
+        size="md"
+        color="light"
         hideLabel
         circle
         {...this.props}
diff --git a/bigbluebutton-html5/imports/ui/components/common/control-header/right/styles.js b/bigbluebutton-html5/imports/ui/components/common/control-header/right/styles.js
index bff2d74b52..63342cca27 100644
--- a/bigbluebutton-html5/imports/ui/components/common/control-header/right/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/common/control-header/right/styles.js
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import Button from '/imports/ui/components/common/button/component';
 import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
-import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
 
 const CloseButton = styled(Button)`
   span:first-of-type {
@@ -13,13 +12,6 @@ const CloseButton = styled(Button)`
       width: auto;
       font-size: ${fontSizeBase};
     }
-
-    &:hover,
-    &:focus,
-    .buttonWrapper:hover &,
-    .buttonWrapper:focus & {
-      background-color: ${colorWhite} !important;
-    }
   }
 `;
 
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
index a260b357d6..7a9a707851 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
@@ -213,7 +213,8 @@ class NavBar extends Component {
               && <Styled.ArrowLeft iconName="left_arrow" />}
             <Styled.NavbarToggleButton
               onClick={this.handleToggleUserList}
-              ghost
+              color='dark'
+              size='md'
               circle
               hideLabel
               data-test={hasNotification ? 'hasUnreadMessages' : 'toggleUserList'}
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
index e15201441b..04929c8098 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
@@ -294,7 +294,8 @@ class SettingsDropdown extends PureComponent {
             label={intl.formatMessage(intlMessages.optionsLabel)}
             icon="more"
             data-test="optionsButton"
-            ghost
+            color="dark"
+            size="md"
             circle
             hideLabel
             // FIXME: Without onClick react proptypes keep warning
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/styles.js b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/styles.js
index 1db2aaec22..35b8a0e0d0 100644
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/styles.js
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
 import Button from '/imports/ui/components/common/button/component';
-import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
 
 const DropdownButton = styled(Button)`
   ${({ state }) => state === 'open' && `
@@ -12,22 +11,7 @@ const DropdownButton = styled(Button)`
 
   ${({ state }) => state === 'closed' && `
     margin: 0;
-
-    & span {
-      border: none;
-      box-shadow: none;
-    }
-
     z-index: 3;
-
-    &:hover,
-    &:focus {
-      span {
-        background-color: transparent !important;
-        color: ${colorWhite} !important;
-        opacity: .75;
-      }
-    }
   `}
 `;
 
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.js b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.js
index b099b35b07..5b71cf2b67 100644
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/styles.js
@@ -92,18 +92,8 @@ const Bottom = styled.div`
 
 const NavbarToggleButton = styled(Button)`
   margin: 0;
-
   z-index: 3;
 
-  &:hover,
-  &:focus {
-    span {
-      background-color: transparent !important;
-      color: ${colorWhite} !important;
-      opacity: .75;
-    }
-  }
-
   ${({ hasNotification }) => hasNotification && `
     position: relative;
 
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
index 8f7e946b7f..b6ad5b6548 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
@@ -308,7 +308,8 @@ class PresentationToolbar extends PureComponent {
                 startOfSlides ? "noPrevSlideDesc" : "prevSlideDesc"
               }
               disabled={startOfSlides || !isMeteorConnected}
-              color="default"
+              color="light"
+              circle
               icon="left_arrow"
               size="md"
               onClick={this.previousSlideHandler}
@@ -341,7 +342,8 @@ class PresentationToolbar extends PureComponent {
                 endOfSlides ? 'noNextSlideDesc' : 'nextSlideDesc'
               }
               disabled={endOfSlides || !isMeteorConnected}
-              color="default"
+              color="light"
+              circle
               icon="right_arrow"
               size="md"
               onClick={this.nextSlideHandler}
@@ -361,11 +363,11 @@ class PresentationToolbar extends PureComponent {
                   ? intl.formatMessage(intlMessages.toolbarMultiUserOff)
                   : intl.formatMessage(intlMessages.toolbarMultiUserOn)
               }
-              color="default"
+              color="light"
               disabled={!isMeteorConnected}
               icon={multiUser ? 'multi_whiteboard' : 'whiteboard'}
               size="md"
-              circle={false}
+              circle
               onClick={() => this.handleSwitchWhiteboardMode(!multiUser)}
               label={
                 multiUser
@@ -407,11 +409,11 @@ class PresentationToolbar extends PureComponent {
                       intlMessages.presentationLabel
                     )} ${intl.formatMessage(intlMessages.fitToWidth)}`
               }
-              color="default"
+              color="light"
               disabled={!isMeteorConnected}
               icon="fit_to_width"
               size="md"
-              circle={false}
+              circle
               onClick={() => this.props.tldrawAPI.zoomToFit()}
               label={intl.formatMessage(intlMessages.fitToPage)}
               hideLabel
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js
index 1b643a1915..9bed970710 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js
@@ -72,7 +72,6 @@ const QuickPollButton = styled(QuickPollDropdownContainer)`
 
   &:focus {
     background-color: ${colorOffWhite};
-    border: 0;
   }
 `;
 
@@ -83,7 +82,6 @@ const PresentationSlideControls = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  border-radius: 0;
 
   & > button {
     padding: ${whiteboardToolbarPadding};
@@ -91,7 +89,10 @@ const PresentationSlideControls = styled.div`
 `;
 
 const PrevSlideButton = styled(Button)`
-  border: none !important;
+
+  i {
+    padding-left: 20%;
+  }
 
   & > i {
     font-size: 1rem;
@@ -105,25 +106,17 @@ const PrevSlideButton = styled(Button)`
     }
   }
 
-  position: relative;
-  color: ${toolbarButtonColor};
-  background-color: ${colorOffWhite};
-  border-radius: 0;
-  box-shadow: none !important;
-  border: 0;
-
-  &:focus {
-    background-color: ${colorOffWhite};
-    border: 0;
-  }
 `;
 
 const NextSlideButton = styled(Button)`
-  border: none !important;
+  
+  i {
+    padding-left: 60%;
+  }
 
   & > i {
     font-size: 1rem;
-
+    
     [dir="rtl"] & {
       -webkit-transform: scale(-1, 1);
       -moz-transform: scale(-1, 1);
@@ -132,18 +125,6 @@ const NextSlideButton = styled(Button)`
       transform: scale(-1, 1);
     }
   }
-
-  position: relative;
-  color: ${toolbarButtonColor};
-  background-color: ${colorOffWhite};
-  border-radius: 0;
-  box-shadow: none !important;
-  border: 0;
-
-  &:focus {
-    background-color: ${colorOffWhite};
-    border: 0;
-  }
 `;
 
 const SkipSlideSelect = styled.select`
@@ -184,7 +165,6 @@ const PresentationZoomControls = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  border-radius: 0;
 
   button {
     padding: ${whiteboardToolbarPadding};
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/component.jsx
index ab5168c4f6..ca2febe8e0 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/component.jsx
@@ -180,6 +180,9 @@ class ZoomTool extends PureComponent {
             minBound={minBound}
           >
             <Styled.DecreaseZoomButton
+              color="light"
+              circle
+              size="md"
               key="zoom-tool-1"
               aria-describedby="zoomOutDescription"
               aria-label={zoomOutAriaLabel}
@@ -220,6 +223,9 @@ class ZoomTool extends PureComponent {
             maxBound={maxBound}
           >
             <Styled.IncreaseZoomButton
+              color="light"
+              circle
+              size="md"
               key="zoom-tool-3"
               aria-describedby="zoomInDescription"
               aria-label={zoomInAriaLabel}
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/styles.js b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/styles.js
index 5712965b4d..bbbdbc58ba 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/styles.js
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import Styled from '../styles';
 import {
   colorOffWhite,
   toolbarButtonColor,
@@ -9,9 +8,9 @@ import {
 } from '/imports/ui/stylesheets/styled-components/general';
 import Button from '/imports/ui/components/common/button/component';
 
-const DecreaseZoomButton = styled(Styled.PrevSlideButton)``;
+const DecreaseZoomButton = styled(Button)``;
 
-const IncreaseZoomButton = styled(Styled.NextSlideButton)``;
+const IncreaseZoomButton = styled(Button)``;
 
 const ResetZoomButton = styled(Button)`
   text-align: center;
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
index 0e1b0a2313..f3afce8131 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
@@ -332,10 +332,10 @@ class UserOptions extends PureComponent {
             label={intl.formatMessage(intlMessages.optionsLabel)}
             data-test="manageUsers"
             icon="settings"
-            ghost
-            color="primary"
+            color="light"
             hideLabel
-            size="sm"
+            size="md"
+            circle
             onClick={() => null}
           />
         )}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.js b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.js
index 4c8bc1058f..228cefda13 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.js
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 import Button from '/imports/ui/components/common/button/component';
-import { colorOffWhite, colorGrayDark } from '/imports/ui/stylesheets/styled-components/palette';
 import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
 
 const OptionsButton = styled(Button)`
@@ -10,16 +9,12 @@ const OptionsButton = styled(Button)`
   padding: 0;
   margin: 0 0.25rem;
 
-  i {
-    width: auto;
-    font-size: ${fontSizeBase} !important;
-    color: ${colorGrayDark} !important;
-    background-color: transparent !important;
+  span {
+    padding: inherit;
   }
 
-  &:hover,
-  &:focus {
-    background-color: ${colorOffWhite} !important;
+  i {
+    font-size: ${fontSizeBase} !important;
   }
 `;