diff --git a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
index 57abd32263..50b1d3b296 100644
--- a/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/AppCanvas.jsx
@@ -93,7 +93,9 @@ export const AppCanvas = ({ moduleId, appId, isViewerSidebarPinned }) => {
           }}
           className={`app-${appId}`}
         >
-          <AutoComputeMobileLayoutAlert currentLayout={currentLayout} darkMode={isAppDarkMode} />
+          {currentMode === 'edit' && (
+            <AutoComputeMobileLayoutAlert currentLayout={currentLayout} darkMode={isAppDarkMode} />
+          )}
           <DeleteWidgetConfirmation darkMode={isAppDarkMode} />
           <HotkeyProvider mode={currentMode} canvasMaxWidth={canvasMaxWidth} currentLayout={currentLayout}>
             {environmentLoadingState !== 'loading' && (
diff --git a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
index bc4255dc8e..61284bb821 100644
--- a/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/MobileHeader.jsx
@@ -22,7 +22,12 @@ const MobileHeader = ({
   setAppDefinitionFromVersion,
   showViewerNavigation,
 }) => {
-  const isVersionReleased = useStore((state) => state.isVersionReleased);
+  const { isReleasedVersionId } = useStore(
+    (state) => ({
+      isReleasedVersionId: state?.releasedVersionId == state.currentVersionId || state.isVersionReleased,
+    }),
+    shallow
+  );
   const editingVersion = useStore((state) => state.editingVersion);
   const showDarkModeToggle = useStore((state) => state.globalSettings.appMode === 'auto');
 
@@ -33,7 +38,7 @@ const MobileHeader = ({
   const _renderAppNameAndLogo = () => (
     <div
       className={classNames('d-flex', 'align-items-center')}
-      style={{ visibility: showHeader || isVersionReleased ? 'visible' : 'hidden' }}
+      style={{ visibility: showHeader || isReleasedVersionId ? 'visible' : 'hidden' }}
     >
       <h1 className="navbar-brand d-none-navbar-horizontal pe-0">
         <Link
@@ -66,14 +71,15 @@ const MobileHeader = ({
     />
   );
 
-  const _renderPreviewSettings = () => (
-    <PreviewSettings
-      isMobileLayout
-      showHeader={showHeader}
-      setAppDefinitionFromVersion={setAppDefinitionFromVersion}
-      darkMode={darkMode}
-    />
-  );
+  const _renderPreviewSettings = () =>
+    !isReleasedVersionId && (
+      <PreviewSettings
+        isMobileLayout
+        showHeader={showHeader}
+        setAppDefinitionFromVersion={setAppDefinitionFromVersion}
+        darkMode={darkMode}
+      />
+    );
 
   const _renderDarkModeBtn = (args) => {
     if (!showDarkModeToggle) return null;
@@ -88,11 +94,11 @@ const MobileHeader = ({
     );
   };
 
-  if (!showHeader && isVersionReleased) {
+  if (!showHeader && isReleasedVersionId) {
     return <>{showViewerNavigation ? _renderMobileNavigationMenu() : _renderDarkModeBtn()}</>;
   }
 
-  if (!showHeader && !isVersionReleased) {
+  if (!showHeader && !isReleasedVersionId) {
     return (
       <>
         <Header
@@ -122,7 +128,7 @@ const MobileHeader = ({
         <span style={{}}>{_renderAppNameAndLogo()}</span>
         {_renderMobileNavigationMenu()}
       </div>
-      {!isVersionReleased && !isEmpty(editingVersion) && _renderPreviewSettings()}
+      {!isReleasedVersionId && !isEmpty(editingVersion) && _renderPreviewSettings()}
       {!showViewerNavigation && _renderDarkModeBtn({ styles: { top: '2px' } })}
     </Header>
   );
diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx
index a7c30059ad..a0135a8ea0 100644
--- a/frontend/src/AppBuilder/Viewer/Viewer.jsx
+++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx
@@ -39,6 +39,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
     homePageId,
     isMaintenanceOn,
     setIsViewer,
+    toggleCurrentLayout,
   } = useStore(
     (state) => ({
       isEditorLoading: state.isEditorLoading,
@@ -58,6 +59,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
       updateCanvasHeight: state.updateCanvasBottomHeight,
       isMaintenanceOn: state.app.isMaintenanceOn,
       setIsViewer: state.setIsViewer,
+      toggleCurrentLayout: state.toggleCurrentLayout,
     }),
     shallow
   );
@@ -65,6 +67,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
   const currentPageComponents = useMemo(() => getCurrentPageComponents, [getCurrentPageComponents]);
   const isPagesSidebarHidden = useStore((state) => state.getPagesSidebarVisibility('canvas'), shallow);
   const canvasBgColor = useStore((state) => state.getCanvasBackgroundColor('canvas', darkMode), shallow);
+  const deviceWindowWidth = window.screen.width - 5;
 
   const computeCanvasMaxWidth = useCallback(() => {
     if (globalSettings?.maxCanvasWidth) {
@@ -89,7 +92,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
   const isLoading = false;
   const isMobilePreviewMode = selectedVersion?.id && currentLayout === 'mobile';
   const isAppLoaded = !!editingVersion;
-  const deviceWindowWidth = window.screen.width - 5;
   const isMobileDevice = deviceWindowWidth < 600;
   const switchPage = useStore((state) => state.switchPage);
 
@@ -103,6 +105,8 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
     switchDarkMode(newMode);
   };
   useEffect(() => {
+    const isMobileDevice = deviceWindowWidth < 600;
+    toggleCurrentLayout(isMobileDevice ? 'mobile' : 'desktop');
     setIsViewer(true);
     return () => {
       setIsViewer(false);
@@ -167,7 +171,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
                         }}
                       >
                         <div className={`areas d-flex flex-rows app-${appId}`}>
-                          {!isPagesSidebarHidden && (
+                          {currentLayout !== 'mobile' && !isPagesSidebarHidden && (
                             <ViewerSidebarNavigation
                               showHeader={showHeader}
                               isMobileDevice={currentLayout === 'mobile'}