diff --git a/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx b/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx
index df6f556725..3df4a31b66 100644
--- a/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/activity-check/component.jsx
@@ -7,7 +7,7 @@ import Modal from '/imports/ui/components/modal/simple/component';
 import { makeCall } from '/imports/ui/services/api';
 
 import { Meteor } from 'meteor/meteor';
-import { styles } from './styles';
+import Styled from './styles';
 
 const propTypes = {
   intl: PropTypes.shape({
@@ -98,7 +98,7 @@ class ActivityCheck extends Component {
         shouldCloseOnOverlayClick={false}
         shouldShowCloseButton={false}
       >
-        <div className={styles.activityModalContent}>
+        <Styled.ActivityModalContent>
           <h1>{intl.formatMessage(intlMessages.activityCheckTitle)}</h1>
           <p>{intl.formatMessage(intlMessages.activityCheckLabel, { 0: responseDelay })}</p>
           <Button
@@ -109,7 +109,7 @@ class ActivityCheck extends Component {
             role="button"
             size="lg"
           />
-        </div>
+        </Styled.ActivityModalContent>
       </Modal>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/activity-check/styles.js b/bigbluebutton-html5/imports/ui/components/activity-check/styles.js
new file mode 100644
index 0000000000..b7eedbb840
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/activity-check/styles.js
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
+
+const ActivityModalContent = styled.div`
+  flex-direction: column;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  padding: 0.5rem;
+  text-align: center;
+
+  & > p {
+    font-size: ${fontSizeLarge};
+    margin: 0.5em 0;
+  }
+`;
+
+export default {
+  ActivityModalContent,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/activity-check/styles.scss b/bigbluebutton-html5/imports/ui/components/activity-check/styles.scss
deleted file mode 100644
index da80838eca..0000000000
--- a/bigbluebutton-html5/imports/ui/components/activity-check/styles.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.activityModalContent {
-  flex-direction: column;
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  padding: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  padding: 0.5rem;
-  text-align: center;
-
-  p {
-    font-size: var(--font-size-large);
-    margin: 0.5em 0;
-  }
-}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx
index d38d4ce063..bd3d6e4f1f 100644
--- a/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/banner-bar/component.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import NotificationsBar from '/imports/ui/components/notifications-bar/component';
-import { styles } from './styles';
+import Styled from './styles';
 import { ACTIONS } from '../layout/enums';
 
 const BannerBar = ({
@@ -22,9 +22,9 @@ const BannerBar = ({
 
   return (
     <NotificationsBar color={color}>
-      <span className={styles.bannerTextColor}>
+      <Styled.BannerTextColor>
         {text}
-      </span>
+      </Styled.BannerTextColor>
     </NotificationsBar>
   );
 };
diff --git a/bigbluebutton-html5/imports/ui/components/banner-bar/styles.js b/bigbluebutton-html5/imports/ui/components/banner-bar/styles.js
new file mode 100644
index 0000000000..ff7966287d
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/banner-bar/styles.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { TextElipsis } from '/imports/ui/stylesheets/styled-components/placeholders';
+import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
+
+const BannerTextColor = styled(TextElipsis)`
+  color: ${colorWhite};
+`;
+
+export default {
+  BannerTextColor,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/banner-bar/styles.scss b/bigbluebutton-html5/imports/ui/components/banner-bar/styles.scss
deleted file mode 100644
index b8d073ed64..0000000000
--- a/bigbluebutton-html5/imports/ui/components/banner-bar/styles.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "/imports/ui/stylesheets/variables/placeholders";
-
-.bannerTextColor {
-  @extend %text-elipsis;
-  color: var(--color-white);
-}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx
index 6ff927e5ea..6a5ab7cc97 100755
--- a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx
@@ -8,7 +8,7 @@ import AudioService from '../audio/service';
 import VideoService from '../video-provider/service';
 import { screenshareHasEnded } from '/imports/ui/components/screenshare/service';
 import UserListService from '/imports/ui/components/user-list/service';
-import { styles } from './styles';
+import Styled from './styles';
 
 const intlMessages = defineMessages({
   title: {
@@ -173,10 +173,9 @@ class BreakoutJoinConfirmation extends Component {
     const { breakouts, intl } = this.props;
     const { selectValue, waiting, } = this.state;
     return (
-      <div className={styles.selectParent}>
+      <Styled.SelectParent>
         {`${intl.formatMessage(intlMessages.freeJoinMessage)}`}
-        <select
-          className={styles.select}
+        <Styled.Select
           value={selectValue}
           onChange={this.handleSelectChange}
           disabled={waiting}
@@ -191,9 +190,9 @@ class BreakoutJoinConfirmation extends Component {
               </option>
             ))
           }
-        </select>
+        </Styled.Select>
         { waiting ? <span data-test="labelGeneratingURL">{intl.formatMessage(intlMessages.generatingURL)}</span> : null}
-      </div>
+      </Styled.SelectParent>
     );
   }
 
diff --git a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.js b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.js
new file mode 100644
index 0000000000..a30b4665de
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.js
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { colorWhite, colorGrayLighter } from '/imports/ui/stylesheets/styled-components/palette';
+
+const SelectParent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Select = styled.select`
+  background-color: ${colorWhite};
+  width: 50%;
+  margin: 1rem;
+  border-color: ${colorGrayLighter};
+`;
+
+export default {
+  SelectParent,
+  Select,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss b/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss
deleted file mode 100755
index fc38af1811..0000000000
--- a/bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.selectParent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.select {
-  background-color: var(--color-white);
-  width: 50%;
-  margin: 1rem;
-  border-color: var(--color-gray-lighter);
-}
diff --git a/bigbluebutton-html5/imports/ui/components/debug-window/component.jsx b/bigbluebutton-html5/imports/ui/components/debug-window/component.jsx
index b5e60411d0..c90b114600 100644
--- a/bigbluebutton-html5/imports/ui/components/debug-window/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/debug-window/component.jsx
@@ -1,10 +1,7 @@
 import React, { Component } from 'react';
 import Draggable from 'react-draggable';
-import Resizable from 're-resizable';
 import { defineMessages, injectIntl } from 'react-intl';
-import { styles } from './styles.scss';
-import Icon from '/imports/ui/components/icon/component';
-import Button from '/imports/ui/components/button/component';
+import Styled from './styles';
 import ChatLogger from '/imports/ui/components/chat/chat-logger/ChatLogger';
 
 const intlMessages = defineMessages({
@@ -87,10 +84,10 @@ class DebugWindow extends Component {
     const { intl } = this.props;
 
     return (
-      <span className={styles.toggleLabel}>
+      <Styled.ToggleLabel>
         {status ? intl.formatMessage(intlMessages.on)
           : intl.formatMessage(intlMessages.off)}
-      </span>
+      </Styled.ToggleLabel>
     );
   }
 
@@ -108,8 +105,7 @@ class DebugWindow extends Component {
         bounds="body"
         enableUserSelectHack={false}
       >
-        <Resizable
-          className={styles.debugWindowWrapper}
+        <Styled.DebugWindowWrapper
           minWidth={window.innerWidth * 0.2}
           minHeight={window.innerHeight * 0.2}
           enable={{
@@ -123,19 +119,13 @@ class DebugWindow extends Component {
             bottomRight: true,
           }}
         >
-          <div
-            className={styles.debugWindow}
-          >
-            <div
-              id="debugWindowHeader"
-              className={styles.header}
-            >
-              <Icon iconName="fit_to_screen" className={styles.moveIcon} />
-              <div className={styles.title}>
+          <Styled.DebugWindow>
+            <Styled.Header id="debugWindowHeader">
+              <Styled.MoveIcon iconName="fit_to_screen" />
+              <Styled.Title>
                 {intl.formatMessage(intlMessages.debugWindowTitle)}
-              </div>
-              <Button
-                className={styles.close}
+              </Styled.Title>
+              <Styled.CloseButton
                 label={intl.formatMessage(intlMessages.modalClose)}
                 aria-label={`${intl.formatMessage(intlMessages.modalClose)} ${intl.formatMessage(intlMessages.debugWindowTitle)}`}
                 icon="close"
@@ -143,16 +133,15 @@ class DebugWindow extends Component {
                 hideLabel
                 onClick={() => this.setShowDebugWindow(false)}
               />
-            </div>
-            <div className={styles.debugWindowContent}>
-              <div className={styles.table}>
-                <div className={styles.row}>
-                  <div className={styles.cell}>
+            </Styled.Header>
+            <Styled.DebugWindowContent>
+              <Styled.Table>
+                <Styled.TableRow>
+                  <Styled.TableCell>
                     {`${intl.formatMessage(intlMessages.userAgentLabel)}:`}
-                  </div>
-                  <div className={styles.cell}>
-                    <input
-                      className={styles.userAgentInput}
+                  </Styled.TableCell>
+                  <Styled.TableCell>
+                    <Styled.UserAgentInput
                       id="debugModalUserAgent"
                       type="text"
                       value={window.navigator.userAgent}
@@ -164,14 +153,14 @@ class DebugWindow extends Component {
                     >
                       {`${intl.formatMessage(intlMessages.copyButtonLabel)}`}
                     </button>
-                  </div>
-                </div>
-                <div className={styles.row}>
-                  <div className={styles.cell}>
+                  </Styled.TableCell>
+                </Styled.TableRow>
+                <Styled.TableRow>
+                  <Styled.TableCell>
                     {`${intl.formatMessage(intlMessages.chatLoggerLabel)}:`}
-                  </div>
-                  <div className={styles.cell}>
-                    <div className={styles.cellContent}>
+                  </Styled.TableCell>
+                  <Styled.TableCell>
+                    <Styled.CellContent>
                       <select
                         style={{ marginRight: '1rem' }}
                         onChange={(ev) => {
@@ -199,13 +188,13 @@ class DebugWindow extends Component {
                       >
                         {`${intl.formatMessage(intlMessages.applyButtonLabel)}`}
                       </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Resizable>
+                    </Styled.CellContent>
+                  </Styled.TableCell>
+                </Styled.TableRow>
+              </Styled.Table>
+            </Styled.DebugWindowContent>
+          </Styled.DebugWindow>
+        </Styled.DebugWindowWrapper>
       </Draggable>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/debug-window/styles.js b/bigbluebutton-html5/imports/ui/components/debug-window/styles.js
new file mode 100644
index 0000000000..f4a9e54ef2
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/debug-window/styles.js
@@ -0,0 +1,132 @@
+import styled from 'styled-components';
+import { smPaddingX } from '/imports/ui/stylesheets/styled-components/general';
+import Resizable from 're-resizable';
+import Icon from '/imports/ui/components/icon/component';
+import Button from '/imports/ui/components/button/component';
+
+const ToggleLabel = styled.span`
+  margin-right: ${smPaddingX};
+
+  [dir="rtl"] & {
+    margin: 0 0 0 ${smPaddingX};
+  }
+`;
+
+const DebugWindowWrapper = styled(Resizable)`
+  position: absolute !important;
+  z-index: 9;
+`;
+
+const DebugWindow = styled.div`
+  min-width: 20vw;
+  min-height: 20vh;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  border: 2px solid #06172A;
+
+  &::after {
+    content: "";
+    -webkit-transform: rotate(-45deg);
+    position: absolute;
+    right: 2px;
+    bottom: 8px;
+    pointer-events: none;
+    width: 14px;
+    height: 1px;
+    background: rgba(0,0,0,.5);
+  }
+
+  &::before {
+    content: "";
+    -webkit-transform: rotate(-45deg);
+    position: absolute;
+    right: 2px;
+    bottom: 5px;
+    pointer-events: none;
+    width: 8px;
+    height: 1px;
+    background: rgba(0,0,0,.5);
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid lightgray;
+  cursor: move;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
+
+const MoveIcon = styled(Icon)`
+  margin: 5px;
+  color: rgba(0,0,0,.5);
+`;
+
+const Title = styled.div`
+  font-size: 1.2rem;
+  font-weight: bold;
+`;
+
+const CloseButton = styled(Button)`
+  & > span > i {
+    font-size: 115%;
+  }
+`;
+
+const DebugWindowContent = styled.div`
+  padding: 10px;
+`;
+
+const Table = styled.div`
+  display: table;
+  width: 100%;
+`;
+
+const TableRow = styled.div`
+  display: table-row;
+`;
+
+const TableCell = styled.div`
+  display: table-cell;
+  padding: 5px;
+  vertical-align: middle;
+`;
+
+const UserAgentInput = styled.input`
+  margin-right: 5px;
+`;
+
+const AutoArrangeToggle = styled.input`
+  margin-right: 5px;
+`;
+
+const CellContent = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export default {
+  ToggleLabel,
+  DebugWindowWrapper,
+  DebugWindow,
+  Header,
+  MoveIcon,
+  Title,
+  CloseButton,
+  DebugWindowContent,
+  Table,
+  TableRow,
+  TableCell,
+  UserAgentInput,
+  AutoArrangeToggle,
+  CellContent,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/debug-window/styles.scss b/bigbluebutton-html5/imports/ui/components/debug-window/styles.scss
deleted file mode 100644
index 08d0019a31..0000000000
--- a/bigbluebutton-html5/imports/ui/components/debug-window/styles.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-.debugWindowWrapper {
-  position: absolute !important;
-  z-index: 9;
-}
-
-.debugWindow {
-  min-width: 20vw;
-  min-height: 20vh;
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  border: 2px solid #06172A;
-
-  &::after {
-    content: "";
-    -webkit-transform: rotate(-45deg);
-    position: absolute;
-    right: 2px;
-    bottom: 8px;
-    pointer-events: none;
-    width: 14px;
-    height: 1px;
-    background: rgba(0,0,0,.5);
-  }
-
-  &::before {
-    content: "";
-    -webkit-transform: rotate(-45deg);
-    position: absolute;
-    right: 2px;
-    bottom: 5px;
-    pointer-events: none;
-    width: 8px;
-    height: 1px;
-    background: rgba(0,0,0,.5);
-  }
-
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid lightgray;
-    cursor: move;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-     -khtml-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    
-    .title {
-      font-size: 1.2rem;
-      font-weight: bold;
-    }
-
-    .moveIcon {
-      margin: 5px;
-      color: rgba(0,0,0,.5);
-    }
-
-    .close {
-      span {
-        i {
-          font-size: 115%;
-        }
-      }
-    }
-  }
-
-  .debugWindowContent {
-    padding: 10px;
-    .table{
-      display: table;
-      width: 100%;
-      .row{
-        display: table-row;
-      }
-      .cell {
-        display: table-cell;
-        padding: 5px;
-        vertical-align: middle;
-
-        .cellContent {
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-
-    .userAgentInput, .autoArrangeToggle {
-      margin-right: 5px;
-    }
-  }
-}
-
-.toggleLabel {
-  margin-right: var(--sm-padding-x);
-
-  [dir="rtl"] & {
-    margin: 0 0 0 var(--sm-padding-x);
-  }
-}
diff --git a/bigbluebutton-html5/imports/ui/components/reload-button/component.jsx b/bigbluebutton-html5/imports/ui/components/reload-button/component.jsx
index 6a5bc81ec8..f4821c189a 100755
--- a/bigbluebutton-html5/imports/ui/components/reload-button/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/reload-button/component.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import cx from 'classnames';
-import Button from '/imports/ui/components/button/component';
 import _ from 'lodash';
-import { styles } from './styles';
+import Styled from './styles';
 
 const DEBOUNCE_TIMEOUT = 5000;
 const DEBOUNCE_OPTIONS = {
@@ -14,16 +12,15 @@ const ReloadButtonComponent = ({
   handleReload,
   label,
 }) => (
-  <div className={cx(styles.wrapper, styles.top)}>
-    <Button
-      className={cx(styles.button, styles.reloadButton)}
+  <Styled.Wrapper>
+    <Styled.ReloadButton
       color="primary"
       icon="refresh"
       onClick={_.debounce(handleReload, DEBOUNCE_TIMEOUT, DEBOUNCE_OPTIONS)}
       label={label}
       hideLabel
     />
-  </div>
+  </Styled.Wrapper>
 );
 
 export default ReloadButtonComponent;
diff --git a/bigbluebutton-html5/imports/ui/components/reload-button/styles.js b/bigbluebutton-html5/imports/ui/components/reload-button/styles.js
new file mode 100644
index 0000000000..acd318eec8
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/reload-button/styles.js
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { colorTransparent } from '/imports/ui/stylesheets/styled-components/palette';
+import Button from '/imports/ui/components/button/component';
+
+const Wrapper = styled.div`
+  position: absolute;
+  right: auto;
+  left: 0;
+  background-color: ${colorTransparent};
+  cursor: pointer;
+  border: 0;
+  z-index: 2;
+  margin: 2px;
+  bottom: 0;
+  top: 0;
+
+  [dir="rtl"] & {
+    right: 0;
+    left : auto;
+  }
+`;
+
+const ReloadButton = styled(Button)`
+  &,
+  &:active,
+  &:hover,
+  &:focus {
+    border: none !important;
+
+    i {
+      border: none !important;
+      background-color: ${colorTransparent} !important;
+    }
+  }
+  padding: 5px;
+
+  &:hover {
+    border: 0;
+  }
+
+  i {
+    font-size: 1rem;
+  }
+`;
+
+export default {
+  Wrapper,
+  ReloadButton,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/reload-button/styles.scss b/bigbluebutton-html5/imports/ui/components/reload-button/styles.scss
deleted file mode 100644
index f88630d825..0000000000
--- a/bigbluebutton-html5/imports/ui/components/reload-button/styles.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '/imports/ui/stylesheets/variables/_all';
-
-.wrapper {
-  position: absolute;
-  right: auto;
-  left: 0;
-  background-color: var(--color-transparent);
-  cursor: pointer;
-  border: 0;
-  z-index: 2;
-  margin: 2px;
-  bottom: 0;
-
-  [dir="rtl"] & {
-    right: 0;
-    left : auto;
-  }
-}
-
-.button {
-
-  &,
-  &:active,
-  &:hover,
-  &:focus {
-    border: none !important;
-
-    i {
-      border: none !important;
-      background-color: var(--color-transparent) !important;
-    }
-  }
-}
-
-.top {
-  top: 0;
-}
-
-.reloadButton {
-  padding: 5px;
-
-  &:hover {
-    border: 0;
-  }
-
-  i {
-    font-size: 1rem;
-  }
-}
diff --git a/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx b/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx
index fa54f28de7..98e0e2d67f 100644
--- a/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/shortcut-help/component.jsx
@@ -5,7 +5,7 @@ import browserInfo from '/imports/utils/browserInfo';
 import deviceInfo from '/imports/utils/deviceInfo';
 import Modal from '/imports/ui/components/modal/simple/component';
 import _ from 'lodash';
-import { styles } from './styles';
+import Styled from './styles';
 import withShortcutHelper from './service';
 
 const intlMessages = defineMessages({
@@ -137,37 +137,37 @@ const ShortcutHelpComponent = (props) => {
     if (!CHAT_ENABLED && shortcut.descId.indexOf('Chat') !== -1) return null;
     return (
       <tr key={_.uniqueId('hotkey-item-')}>
-        <td className={styles.keyCell}>{`${accessMod} + ${shortcut.accesskey}`}</td>
-        <td className={styles.descCell}>{`${intl.formatMessage(intlMessages[`${shortcut.descId.toLowerCase()}`])}`}</td>
+        <Styled.KeyCell>{`${accessMod} + ${shortcut.accesskey}`}</Styled.KeyCell>
+        <Styled.DescCell>{`${intl.formatMessage(intlMessages[`${shortcut.descId.toLowerCase()}`])}`}</Styled.DescCell>
       </tr>
     );
   });
 
   shortcutItems.push((
     <tr key={_.uniqueId('hotkey-item-')}>
-      <td className={styles.keyCell}>Spacebar</td>
-      <td className={styles.descCell}>{intl.formatMessage(intlMessages.togglePan)}</td>
+      <Styled.KeyCell>Spacebar</Styled.KeyCell>
+      <Styled.DescCell>{intl.formatMessage(intlMessages.togglePan)}</Styled.DescCell>
     </tr>
   ));
 
   shortcutItems.push((
     <tr key={_.uniqueId('hotkey-item-')}>
-      <td className={styles.keyCell}>Enter</td>
-      <td className={styles.descCell}>{intl.formatMessage(intlMessages.toggleFullscreen)}</td>
+      <Styled.KeyCell>Enter</Styled.KeyCell>
+      <Styled.DescCell>{intl.formatMessage(intlMessages.toggleFullscreen)}</Styled.DescCell>
     </tr>
   ));
 
   shortcutItems.push((
     <tr key={_.uniqueId('hotkey-item-')}>
-      <td className={styles.keyCell}>Right Arrow</td>
-      <td className={styles.descCell}>{intl.formatMessage(intlMessages.nextSlideDesc)}</td>
+      <Styled.KeyCell>Right Arrow</Styled.KeyCell>
+      <Styled.DescCell>{intl.formatMessage(intlMessages.nextSlideDesc)}</Styled.DescCell>
     </tr>
   ));
 
   shortcutItems.push((
     <tr key={_.uniqueId('hotkey-item-')}>
-      <td className={styles.keyCell}>Left Arrow</td>
-      <td className={styles.descCell}>{intl.formatMessage(intlMessages.previousSlideDesc)}</td>
+      <Styled.KeyCell>Left Arrow</Styled.KeyCell>
+      <Styled.DescCell>{intl.formatMessage(intlMessages.previousSlideDesc)}</Styled.DescCell>
     </tr>
   ));
 
@@ -182,7 +182,7 @@ const ShortcutHelpComponent = (props) => {
       {!accessMod ? <p>{intl.formatMessage(intlMessages.accessKeyNotAvailable)}</p>
         : (
           <span>
-            <table className={styles.shortcutTable}>
+            <Styled.ShortcutTable>
               <tbody>
                 <tr>
                   <th>{intl.formatMessage(intlMessages.comboLabel)}</th>
@@ -190,7 +190,7 @@ const ShortcutHelpComponent = (props) => {
                 </tr>
                 {shortcutItems}
               </tbody>
-            </table>
+            </Styled.ShortcutTable>
           </span>
         )
       }
diff --git a/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.js b/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.js
new file mode 100644
index 0000000000..2ba1952118
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.js
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { borderSize, smPaddingX } from '/imports/ui/stylesheets/styled-components/general';
+import { colorGrayLighter } from '/imports/ui/stylesheets/styled-components/palette';
+
+const KeyCell = styled.td`
+  border: ${borderSize} solid ${colorGrayLighter};
+  text-align: center;
+  padding: ${smPaddingX};
+  margin: auto;
+`;
+
+const DescCell = styled.td`
+  border: ${borderSize} solid ${colorGrayLighter};
+  padding: ${smPaddingX};
+  margin: auto;
+`;
+
+const ShortcutTable = styled.table`
+  border: ${borderSize} solid ${colorGrayLighter};
+  border-collapse: collapse;
+  margin: auto;
+`;
+
+export default {
+  KeyCell,
+  DescCell,
+  ShortcutTable,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss b/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
deleted file mode 100644
index 227a000528..0000000000
--- a/bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.shortcutTable,
-.keyCell,
-.descCell,
-.tableTitle {
-  border: var(--border-size) solid var(--color-gray-lighter);
-}
-
-.keyCell {
-  text-align: center;
-}
-
-.descCell {
-  padding: 0 var(--jumbo-padding-x) !important 0 0;
-}
-
-.keyCell,
-.descCell {
-  padding: var(--sm-padding-x);
-  margin: auto;
-}
-
-.shortcutTable {
-  border-collapse: collapse;
-  margin: auto;
-}
-
-.tableTitle {
-  padding: var(--sm-padding-x);
-}
diff --git a/bigbluebutton-html5/imports/ui/components/text-input/component.jsx b/bigbluebutton-html5/imports/ui/components/text-input/component.jsx
index 2c60c63663..38c650beb5 100644
--- a/bigbluebutton-html5/imports/ui/components/text-input/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/text-input/component.jsx
@@ -1,10 +1,8 @@
 import React, { PureComponent } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
-import TextareaAutosize from 'react-autosize-textarea';
 import PropTypes from 'prop-types';
 import logger from '/imports/startup/client/logger';
-import Button from '/imports/ui/components/button/component';
-import { styles } from './styles.scss';
+import Styled from './styles';
 
 const propTypes = {
   placeholder: PropTypes.string,
@@ -60,25 +58,23 @@ class TextInput extends PureComponent {
     const { message } = this.state;
 
     return (
-      <div className={styles.wrapper}>
-        <TextareaAutosize
-          className={styles.textarea}
+      <Styled.Wrapper>
+        <Styled.TextArea
           maxLength={maxLength}
           onChange={(e) => this.handleOnChange(e)}
           onKeyDown={(e) => this.handleOnKeyDown(e)}
           placeholder={placeholder}
           value={message}
         />
-        <Button
+        <Styled.TextInputButton
           circle
-          className={styles.button}
           color="primary"
           hideLabel
           icon="send"
           label={intl.formatMessage(messages.sendLabel)}
           onClick={() => this.handleOnClick()}
         />
-      </div>
+      </Styled.Wrapper>
     );
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/text-input/styles.js b/bigbluebutton-html5/imports/ui/components/text-input/styles.js
new file mode 100644
index 0000000000..7bca331291
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/text-input/styles.js
@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import {
+  smPaddingX,
+  smPaddingY,
+  borderRadius,
+  borderSize,
+} from '/imports/ui/stylesheets/styled-components/general';
+import {
+  colorText,
+  colorGrayLighter,
+  colorBlueLight,
+  colorPrimary,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
+import TextareaAutosize from 'react-autosize-textarea';
+import Button from '/imports/ui/components/button/component';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const TextArea = styled(TextareaAutosize)`
+  flex: 1;
+  background: #fff;
+  background-clip: padding-box;
+  margin: 0;
+  color: ${colorText};
+  -webkit-appearance: none;
+  padding: calc(${smPaddingY} * 2.5) calc(${smPaddingX} * 1.25);
+  resize: none;
+  transition: none;
+  border-radius: ${borderRadius};
+  font-size: ${fontSizeBase};
+  min-height: 2.5rem;
+  max-height: 10rem;
+  border: 1px solid ${colorGrayLighter};
+  box-shadow: 0 0 0 1px ${colorGrayLighter};
+
+  &:hover {
+    outline: transparent;
+    outline-style: dotted;
+    outline-width: ${borderSize};
+  }
+
+  &:active,
+  &:focus {
+    outline: transparent;
+    outline-width: ${borderSize};
+    outline-style: solid;
+  }
+
+  &:focus {
+    outline: none;
+    border-radius: ${borderSize};
+    box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary};
+  }
+`;
+
+const TextInputButton = styled(Button)`
+  margin:0 0 0 ${smPaddingX};
+  align-self: center;
+  font-size: 0.9rem;
+
+  [dir="rtl"]  & {
+    margin: 0 ${smPaddingX} 0 0;
+    -webkit-transform: scale(-1, 1);
+    -moz-transform: scale(-1, 1);
+    -ms-transform: scale(-1, 1);
+    -o-transform: scale(-1, 1);
+    transform: scale(-1, 1);
+  }
+`;
+
+export default {
+  Wrapper,
+  TextArea,
+  TextInputButton,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/text-input/styles.scss b/bigbluebutton-html5/imports/ui/components/text-input/styles.scss
deleted file mode 100644
index 5f13ce4fa0..0000000000
--- a/bigbluebutton-html5/imports/ui/components/text-input/styles.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/mixins/_indicators";
-@import "/imports/ui/stylesheets/variables/_all";
-
-.wrapper {
-  display: flex;
-  flex-direction: row;
-}
-
-.textarea {
-  @include inputFocus(var(--color-blue-light));
-
-  flex: 1;
-  background: #fff;
-  background-clip: padding-box;
-  margin: 0;
-  color: var(--color-text);
-  -webkit-appearance: none;
-  padding: calc(var(--sm-padding-y) * 2.5) calc(var(--sm-padding-x) * 1.25);
-  resize: none;
-  transition: none;
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-base);
-  min-height: 2.5rem;
-  max-height: 10rem;
-  border: 1px solid var(--color-gray-lighter);
-  box-shadow: 0 0 0 1px var(--color-gray-lighter);
-
-  &:hover {
-    @include highContrastOutline();
-  }
-
-  &:active,
-  &:focus {
-    @include highContrastOutline();
-    outline-style: solid;
-  }
-}
-
-.button {
-  margin:0 0 0 var(--sm-padding-x);
-  align-self: center;
-  font-size: 0.9rem;
-
-  [dir="rtl"]  & {
-    margin: 0 var(--sm-padding-x) 0 0;
-    -webkit-transform: scale(-1, 1);
-    -moz-transform: scale(-1, 1);
-    -ms-transform: scale(-1, 1);
-    -o-transform: scale(-1, 1);
-    transform: scale(-1, 1);
-  }
-}
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
index 175c79016c..eb6422557b 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
@@ -9,6 +9,8 @@ const colorGrayLighter = '#A7B3BD';
 const colorBlueLight = '#54a1f3';
 const colorBlueLighter = '#92BCEA';
 
+const colorTransparent = '#ff000000';
+
 const colorPrimary = '#0F70D7';
 const colorDanger = '#DF2721';
 
@@ -17,6 +19,7 @@ const userListBg = colorOffWhite;
 const userListText = colorGray;
 const unreadMessagesBg = colorDanger;
 const colorGrayLabel = colorGray;
+const colorText = colorGray;
 
 const listItemBgHover = '#DCE4ED';
 const itemFocusBorder = colorBlueLighter;
@@ -32,6 +35,7 @@ export {
   colorGrayDark,
   colorGrayLight,
   colorGrayLighter,
+  colorTransparent,
   colorBlueLight,
   colorBlueLighter,
   colorPrimary,
@@ -41,6 +45,7 @@ export {
   userListText,
   unreadMessagesBg,
   colorGrayLabel,
+  colorText,
   listItemBgHover,
   itemFocusBorder,
   btnDefaultColor,