diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
index 2a6f4d64a6..ceabf5cd19 100755
--- a/bigbluebutton-html5/imports/ui/components/app/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx
@@ -95,7 +95,8 @@ const AppContainer = (props) => {
     ? (
       <App
         {...{
-          hideActionsBar: getFromUserSettings('bbb_hide_actions_bar', false),
+          hideActionsBar: getFromUserSettings('bbb_hide_actions_bar', false)
+            || getFromUserSettings('bbb_hide_controls', false),
           currentUserAway: currentUser.away,
           currentUserRaiseHand: currentUser.raiseHand,
           captionsStyle,
diff --git a/bigbluebutton-html5/imports/ui/components/layout/context.jsx b/bigbluebutton-html5/imports/ui/components/layout/context.jsx
index 6f481f8b10..70238f925f 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/context.jsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/context.jsx
@@ -242,6 +242,23 @@ const reducer = (state, action) => {
       };
     }
 
+    case ACTIONS.SET_HIDE_NAVBAR_TOP_ROW: {
+      const { navBar } = state.output;
+      if (navBar.hideTopRow === action.value) {
+        return state;
+      }
+      return {
+        ...state,
+        output: {
+          ...state.output,
+          navBar: {
+            ...navBar,
+            hideTopRow: action.value,
+          },
+        },
+      };
+    }
+
     case ACTIONS.SET_NAVBAR_OUTPUT: {
       const {
         display, width, height, top, left, tabOrder, zIndex,
diff --git a/bigbluebutton-html5/imports/ui/components/layout/enums.js b/bigbluebutton-html5/imports/ui/components/layout/enums.js
index 12a74f1ac3..15ca758c91 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/enums.js
+++ b/bigbluebutton-html5/imports/ui/components/layout/enums.js
@@ -56,6 +56,7 @@ export const ACTIONS = {
   SET_HIDE_NOTIFICATION_TOASTS: 'setHideNotificationToasts',
 
   SET_HAS_NAVBAR: 'setHasNavBar',
+  SET_HIDE_NAVBAR_TOP_ROW: 'setHideNavBarTopRow',
   SET_NAVBAR_OUTPUT: 'setNavBarOutput',
 
   SET_HAS_ACTIONBAR: 'setHasActionBar',
diff --git a/bigbluebutton-html5/imports/ui/components/layout/initState.js b/bigbluebutton-html5/imports/ui/components/layout/initState.js
index aeb6fecada..9b3dc49999 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/initState.js
+++ b/bigbluebutton-html5/imports/ui/components/layout/initState.js
@@ -115,6 +115,7 @@ export const INITIAL_INPUT_STATE = {
 export const INITIAL_OUTPUT_STATE = {
   navBar: {
     display: false,
+    hideTopRow: false,
     width: 0,
     height: 0,
     top: 0,
diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/layoutEngine.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/layoutEngine.jsx
index 304fdf2431..76db1657c7 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/layoutEngine.jsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/layoutEngine.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { layoutSelect, layoutSelectInput } from '/imports/ui/components/layout/context';
+import { layoutSelect, layoutSelectInput, layoutSelectOutput } from '/imports/ui/components/layout/context';
 import DEFAULT_VALUES from '/imports/ui/components/layout/defaultValues';
 import { LAYOUT_TYPE, DEVICE_TYPE } from '/imports/ui/components/layout/enums';
 
@@ -22,6 +22,7 @@ const LayoutEngine = () => {
   const presentationInput = layoutSelectInput((i) => i.presentation);
   const actionbarInput = layoutSelectInput((i) => i.actionBar);
   const navBarInput = layoutSelectInput((i) => i.navBar);
+  const navBarOutput = layoutSelectOutput((i) => i.navBar);
   const sidebarNavigationInput = layoutSelectInput((i) => i.sidebarNavigation);
   const sidebarContentInput = layoutSelectInput((i) => i.sidebarContent);
   const externalVideoInput = layoutSelectInput((i) => i.externalVideo);
@@ -106,7 +107,9 @@ const LayoutEngine = () => {
   const calculatesNavbarHeight = () => {
     const { navBarHeight } = DEFAULT_VALUES;
 
-    return navBarInput.hasNavBar ? navBarHeight : 0;
+    const finalHeight = navBarOutput.hideTopRow ? navBarHeight / 2 : navBarHeight;
+
+    return navBarInput.hasNavBar ? finalHeight : 0;
   };
 
   const calculatesNavbarBounds = (mediaAreaBounds) => {
diff --git a/bigbluebutton-html5/imports/ui/components/layout/layoutTypes.ts b/bigbluebutton-html5/imports/ui/components/layout/layoutTypes.ts
index 868d9b9683..c06325b332 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/layoutTypes.ts
+++ b/bigbluebutton-html5/imports/ui/components/layout/layoutTypes.ts
@@ -97,6 +97,7 @@ export interface GenericContentMainArea {
 }
 interface NavBar {
     hasNavBar?: boolean;
+    hideTopRow: boolean;
     height: number;
     display?: boolean;
     left?: number;
diff --git a/bigbluebutton-html5/imports/ui/components/layout/observer.tsx b/bigbluebutton-html5/imports/ui/components/layout/observer.tsx
index a36da541d5..235456cf9e 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/observer.tsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/observer.tsx
@@ -101,7 +101,13 @@ const LayoutObserver: React.FC = () => {
 
     layoutContextDispatch({
       type: ACTIONS.SET_HAS_ACTIONBAR,
-      value: !getFromUserSettings('bbb_hide_actions_bar', false),
+      value: !(getFromUserSettings('bbb_hide_actions_bar', false)
+        || getFromUserSettings('bbb_hide_controls', false)),
+    });
+
+    layoutContextDispatch({
+      type: ACTIONS.SET_HIDE_NAVBAR_TOP_ROW,
+      value: getFromUserSettings('bbb_hide_controls', false),
     });
 
     layoutContextDispatch({
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
index 2b4ff891df..eb097701a1 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
@@ -272,6 +272,7 @@ class NavBar extends Component {
       currentUserId,
       isDirectLeaveButtonEnabled,
       isMeteorConnected,
+      hideTopRow,
     } = this.props;
 
     const hasNotification = hasUnreadMessages || (hasUnreadNotes && !isPinned);
@@ -312,58 +313,60 @@ class NavBar extends Component {
             }
         }
       >
-        <Styled.Top>
-          <Styled.Left>
-            {shouldShowNavBarToggleButton && isExpanded && document.dir === 'ltr'
-              && <Styled.ArrowLeft iconName="left_arrow" />}
-            {shouldShowNavBarToggleButton && !isExpanded && document.dir === 'rtl'
-              && <Styled.ArrowLeft iconName="left_arrow" />}
-            {shouldShowNavBarToggleButton && (
-              <Styled.NavbarToggleButton
-                tooltipplacement="right"
-                onClick={this.handleToggleUserList}
-                color={isPhone && isExpanded ? 'primary' : 'dark'}
-                size='md'
-                circle
-                hideLabel
-                data-test={hasNotification ? 'hasUnreadMessages' : 'toggleUserList'}
-                label={intl.formatMessage(intlMessages.toggleUserListLabel)}
-                tooltipLabel={intl.formatMessage(intlMessages.toggleUserListLabel)}
-                aria-label={ariaLabel}
-                icon="user"
-                aria-expanded={isExpanded}
-                accessKey={TOGGLE_USERLIST_AK}
-                hasNotification={hasNotification}
+        {!hideTopRow && (
+          <Styled.Top>
+            <Styled.Left>
+              {shouldShowNavBarToggleButton && isExpanded && document.dir === 'ltr'
+                && <Styled.ArrowLeft iconName="left_arrow" />}
+              {shouldShowNavBarToggleButton && !isExpanded && document.dir === 'rtl'
+                && <Styled.ArrowLeft iconName="left_arrow" />}
+              {shouldShowNavBarToggleButton && (
+                <Styled.NavbarToggleButton
+                  tooltipplacement="right"
+                  onClick={this.handleToggleUserList}
+                  color={isPhone && isExpanded ? 'primary' : 'dark'}
+                  size='md'
+                  circle
+                  hideLabel
+                  data-test={hasNotification ? 'hasUnreadMessages' : 'toggleUserList'}
+                  label={intl.formatMessage(intlMessages.toggleUserListLabel)}
+                  tooltipLabel={intl.formatMessage(intlMessages.toggleUserListLabel)}
+                  aria-label={ariaLabel}
+                  icon="user"
+                  aria-expanded={isExpanded}
+                  accessKey={TOGGLE_USERLIST_AK}
+                  hasNotification={hasNotification}
+                />
+              )}
+              {shouldShowNavBarToggleButton && !isExpanded && document.dir === 'ltr'
+                && <Styled.ArrowRight iconName="right_arrow" />}
+              {shouldShowNavBarToggleButton && isExpanded && document.dir === 'rtl'
+                && <Styled.ArrowRight iconName="right_arrow" />}
+              {renderPluginItems(leftPluginItems)}
+            </Styled.Left>
+            <Styled.Center>
+              <Styled.PresentationTitle data-test="presentationTitle">
+                {presentationTitle}
+              </Styled.PresentationTitle>
+              <RecordingIndicator
+                amIModerator={amIModerator}
+                currentUserId={currentUserId}
               />
-            )}
-            {shouldShowNavBarToggleButton && !isExpanded && document.dir === 'ltr'
-              && <Styled.ArrowRight iconName="right_arrow" />}
-            {shouldShowNavBarToggleButton && isExpanded && document.dir === 'rtl'
-              && <Styled.ArrowRight iconName="right_arrow" />}
-            {renderPluginItems(leftPluginItems)}
-          </Styled.Left>
-          <Styled.Center>
-            <Styled.PresentationTitle data-test="presentationTitle">
-              {presentationTitle}
-            </Styled.PresentationTitle>
-            <RecordingIndicator
-              amIModerator={amIModerator}
-              currentUserId={currentUserId}
-            />
-            {renderPluginItems(centerPluginItems)}
-          </Styled.Center>
-          <Styled.Right>
-            {renderPluginItems(rightPluginItems)}
-            {ConnectionStatusService.isEnabled() ? <ConnectionStatusButton /> : null}
-            {ConnectionStatusService.isEnabled() ? <ConnectionStatus /> : null}
-            {isDirectLeaveButtonEnabled && isMeteorConnected
-              ? <LeaveMeetingButtonContainer amIModerator={amIModerator} /> : null}
-            <OptionsDropdownContainer
-              amIModerator={amIModerator}
-              isDirectLeaveButtonEnabled={isDirectLeaveButtonEnabled}
-            />
-          </Styled.Right>
-        </Styled.Top>
+              {renderPluginItems(centerPluginItems)}
+            </Styled.Center>
+            <Styled.Right>
+              {renderPluginItems(rightPluginItems)}
+              {ConnectionStatusService.isEnabled() ? <ConnectionStatusButton /> : null}
+              {ConnectionStatusService.isEnabled() ? <ConnectionStatus /> : null}
+              {isDirectLeaveButtonEnabled && isMeteorConnected
+                ? <LeaveMeetingButtonContainer amIModerator={amIModerator} /> : null}
+              <OptionsDropdownContainer
+                amIModerator={amIModerator}
+                isDirectLeaveButtonEnabled={isDirectLeaveButtonEnabled}
+              />
+            </Styled.Right>
+          </Styled.Top>
+        )}
         <Styled.Bottom>
           {enableTalkingIndicator ? <TalkingIndicator amIModerator={amIModerator} /> : null}
           <TimerIndicatorContainer />
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx
index 2c743e776d..ad0919da89 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import Auth from '/imports/ui/services/auth';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import NavBar from './component';
-import { layoutSelectInput, layoutSelectOutput, layoutDispatch } from '../layout/context';
+import { layoutSelectInput, layoutDispatch, layoutSelectOutput } from '../layout/context';
 import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context';
 import { PANELS } from '/imports/ui/components/layout/enums';
 import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
@@ -121,6 +121,7 @@ const NavBarContainer = ({ children, ...props }) => {
         isDirectLeaveButtonEnabled: IS_DIRECT_LEAVE_BUTTON_ENABLED,
         // TODO: Remove/Replace
         isMeteorConnected: true,
+        hideTopRow: navBar.hideTopRow,
         ...props,
       }}
       style={{ ...navBar }}