diff --git a/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx b/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
index 8ba0ac6ae8..6345e6dae7 100755
--- a/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/join-handler/component.jsx
@@ -8,6 +8,9 @@ import { makeCall } from '/imports/ui/services/api';
 import logger from '/imports/startup/client/logger';
 import LoadingScreen from '/imports/ui/components/common/loading-screen/component';
 import { CurrentUser } from '/imports/api/users';
+import Settings from '/imports/ui/services/settings';
+import { updateSettings } from '/imports/ui/components/settings/service';
+import { LAYOUT_TYPE } from '/imports/ui/components/layout/enums';
 
 const propTypes = {
   children: PropTypes.element.isRequired,
@@ -178,6 +181,16 @@ class JoinHandler extends Component {
       Session.set('bannerColor', resp.bannerColor);
     };
 
+    const setUserDefaultLayout = (response) => {
+      const settings = {
+        application: {
+          ...Settings.application,
+          selectedLayout: LAYOUT_TYPE[response.defaultLayout] || 'custom',
+        },
+      };
+      updateSettings(settings);
+    };
+
     // use enter api to get params for the client
     const url = `${APP.bbbWebBase}/api/enter?sessionToken=${sessionToken}`;
     const fetchContent = await fetch(url, { credentials: 'include' });
@@ -199,6 +212,7 @@ class JoinHandler extends Component {
           .findOne({ userId: Auth.userID, approved: true }, { fields: { _id: 1 } });
         if (user) {
           await setCustomData(response);
+          setUserDefaultLayout(response);
           cd.stop();
         }
       });
diff --git a/bigbluebutton-html5/imports/ui/components/layout/push-layout/pushLayoutEngine.jsx b/bigbluebutton-html5/imports/ui/components/layout/push-layout/pushLayoutEngine.jsx
index d1bddc2172..2d815b5e67 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/push-layout/pushLayoutEngine.jsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/push-layout/pushLayoutEngine.jsx
@@ -56,7 +56,6 @@ class PushLayoutEngine extends React.Component {
       cameraHeight,
       horizontalPosition,
       layoutContextDispatch,
-      meetingLayout,
       meetingLayoutCameraPosition,
       meetingLayoutFocusedCamera,
       meetingLayoutVideoRate,
@@ -65,10 +64,12 @@ class PushLayoutEngine extends React.Component {
       shouldShowExternalVideo,
     } = this.props;
 
-    const userLayout = LAYOUT_TYPE[getFromUserSettings('bbb_change_layout', false)];
-    Settings.application.selectedLayout = userLayout || meetingLayout;
+    const changedLayout = getFromUserSettings('bbb_change_layout', null);
+    if (changedLayout) {
+      Settings.application.selectedLayout = LAYOUT_TYPE[changedLayout];
+    }
 
-    let selectedLayout = Settings.application.selectedLayout;
+    let { selectedLayout } = Settings.application;
     if (isMobile()) {
       selectedLayout = selectedLayout === 'custom' ? 'smart' : selectedLayout;
       Settings.application.selectedLayout = selectedLayout;
diff --git a/docs/docs/data/join.tsx b/docs/docs/data/join.tsx
index f7442eee11..ce52eaab86 100644
--- a/docs/docs/data/join.tsx
+++ b/docs/docs/data/join.tsx
@@ -47,7 +47,7 @@ const joinEndpointTableData = [
     "name": "defaultLayout",
     "required": false,
     "type": "String",
-    "description": (<>The layout name to be loaded first when the application is loaded.</>)
+    "description": (<>The layout name to be loaded first when the application is loaded. If none is provided, the meeting layout will be used.</>)
   },
   {
     "name": "avatarURL",