diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/component.jsx b/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/component.jsx
index e439924a95..251cc3283c 100644
--- a/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/component.jsx
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { notify } from '/imports/ui/services/notification';
-import Button from '/imports/ui/components/button/component';
 import { toast } from 'react-toastify';
-import { styles } from './styles';
+import Styled from './styles';
 
 const intlMessages = defineMessages({
   suggestLockTitle: {
@@ -68,25 +67,23 @@ class LockViewersNotifyComponent extends Component {
 
     notify(
       (
-        <React.Fragment>
-          <p className={styles.info}>{intl.formatMessage(intlMessages.suggestLockTitle)}</p>
-          <div className={styles.buttonWrapper}>
-            <Button
+        <>
+          <Styled.Info>{intl.formatMessage(intlMessages.suggestLockTitle)}</Styled.Info>
+          <Styled.ButtonWrapper>
+            <Styled.ManyUsersButton
               label={intl.formatMessage(intlMessages.enable)}
               aria-label={intl.formatMessage(intlMessages.enable)}
               onClick={toggleWebcamsOnlyForModerator}
-              className={styles.button}
             />
             |
-            <Button
+            <Styled.ManyUsersButton
               label={intl.formatMessage(intlMessages.cancel)}
               aria-label={intl.formatMessage(intlMessages.cancel)}
               onClick={() => toast.dismiss(lockToastId)}
-              className={styles.button}
             />
-          </div>
-          <p className={styles.info}>{intl.formatMessage(intlMessages.suggestLockReason)}</p>
-        </React.Fragment>
+          </Styled.ButtonWrapper>
+          <Styled.Info>{intl.formatMessage(intlMessages.suggestLockReason)}</Styled.Info>
+        </>
       ),
       'info',
       'rooms',
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.js b/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.js
new file mode 100644
index 0000000000..a2d87a2d8f
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.js
@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { colorPrimary } from '/imports/ui/stylesheets/styled-components/palette';
+import Styled from '/imports/ui/components/breakout-room/styles';
+import Button from '/imports/ui/components/button/component';
+
+const Info = styled.p`
+  margin: 0;
+`;
+
+const ButtonWrapper = styled(Styled.BreakoutActions)`
+  background-color: inherit;
+
+  &:focus,&:hover {
+    background-color: inherit;
+  }
+`;
+
+const ManyUsersButton = styled(Button)`
+  flex: 0 1 48%;
+  color: ${colorPrimary};
+  margin: 0;
+  font-weight: inherit;
+
+  background-color: inherit;
+
+  &:focus,&:hover {
+    background-color: inherit;
+  }
+`;
+
+export default {
+  Info,
+  ButtonWrapper,
+  ManyUsersButton,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.scss
deleted file mode 100644
index 99e590655f..0000000000
--- a/bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import '/imports/ui/components/breakout-room/styles';
-
-.buttonWrapper,
-.button,
-.joinButton {
-  background-color: inherit;
-  &:focus,&:hover {
-    background-color: inherit;
-  }
-}
-
-.buttonWrapper {
-  @extend .breakoutActions;
-}
-
-.button {
-  @extend .button;
-}
-
-.info {
-  margin: 0;
-}