diff --git a/frontend/src/AppBuilder/Header/EditorHeader.jsx b/frontend/src/AppBuilder/Header/EditorHeader.jsx
index 275a2f84c0..d5ac4b767d 100644
--- a/frontend/src/AppBuilder/Header/EditorHeader.jsx
+++ b/frontend/src/AppBuilder/Header/EditorHeader.jsx
@@ -6,11 +6,11 @@ import LogoNavDropdown from '@/_components/LogoNavDropdown';
 import HeaderActions from './HeaderActions';
 import { AppVersionsManager } from './AppVersionsManager';
 import RealtimeAvatars from '@/Editor/RealtimeAvatars';
-// import UpdatePresence from '@/Editor/Header/UpdatePresence';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import useStore from '@/AppBuilder/_stores/store';
 import RightTopHeaderButtons from './RightTopHeaderButtons/RightTopHeaderButtons';
 import BuildSuggestions from './BuildSuggestions';
+import UpdatePresenceMultiPlayer from './UpdatePresenceMultiPlayer';
 
 export const EditorHeader = ({ darkMode }) => {
   const { isSaving, saveError, isVersionReleased } = useStore(
@@ -98,18 +98,14 @@ export const EditorHeader = ({ darkMode }) => {
                         <RealtimeAvatars />
                       </div>
                     )}
-                    {/* {shouldEnableMultiplayer && <UpdatePresence />} */}
+                    {shouldEnableMultiplayer && <UpdatePresenceMultiPlayer />}
                   </div>
                 </div>
                 <div className="navbar-seperator"></div>
                 {/* <div className="d-flex align-items-center p-0" style={{ marginRight: '12px' }}></div> */}
               </div>
               <div className="d-flex align-items-center p-0">
-                <div className="d-flex version-manager-container p-0 mx-2  align-items-center ">
-                  {/* {editingVersion && ( */}
-                  {/* <EnvironmentManager darkMode={darkMode} /> */}
-                  {/* )} */}
-                  {/* <div className="navbar-seperator"></div> */}
+                <div className="d-flex p-0 mx-2  align-items-center ">
                   <AppVersionsManager darkMode={darkMode} />
                 </div>
               </div>
diff --git a/frontend/src/AppBuilder/Header/UpdatePresenceMultiPlayer.jsx b/frontend/src/AppBuilder/Header/UpdatePresenceMultiPlayer.jsx
new file mode 100644
index 0000000000..dfb3225231
--- /dev/null
+++ b/frontend/src/AppBuilder/Header/UpdatePresenceMultiPlayer.jsx
@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import { useUpdatePresence } from '@y-presence/react';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
+
+export default function UpdatePresenceMultiPlayer() {
+  const { user } = useStore(
+    (state) => ({
+      user: state.user,
+    }),
+    shallow
+  );
+  const updatePresence = useUpdatePresence();
+
+  useEffect(() => {
+    if (user) {
+      const initialPresence = {
+        firstName: user.firstName ?? '',
+        lastName: user.lastName ?? '',
+        email: user.email ?? '',
+        image: '',
+        editingVersionId: '',
+        x: 0,
+        y: 0,
+        color: '',
+      };
+      updatePresence(initialPresence);
+    }
+  }, [user, updatePresence]);
+
+  return <></>;
+}
diff --git a/frontend/src/AppBuilder/Viewer/PreviewSettings.jsx b/frontend/src/AppBuilder/Viewer/PreviewSettings.jsx
index 2a8d6c66e5..644fe7348f 100644
--- a/frontend/src/AppBuilder/Viewer/PreviewSettings.jsx
+++ b/frontend/src/AppBuilder/Viewer/PreviewSettings.jsx
@@ -33,7 +33,6 @@ const PreviewSettings = ({ isMobileLayout, showHeader, darkMode }) => {
           <>
             <AppVersionsManager darkMode={darkMode} />
             <div className="navbar-seperator"></div>
-            {/* <EnvironmentManager darkMode={darkMode} /> */}
           </>
         )}
         <span>
@@ -78,8 +77,6 @@ const PreviewSettings = ({ isMobileLayout, showHeader, darkMode }) => {
           </Offcanvas.Header>
           {previewNavbar && (
             <Offcanvas.Body>
-              <span style={{ marginTop: '4px' }}>{/* <EnvironmentManager darkMode={darkMode} /> */}</span>
-              <hr className="m-0" />
               <span>
                 <AppVersionsManager darkMode={darkMode} />
               </span>
diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx
index f5ed2e79c8..18d01867ef 100644
--- a/frontend/src/AppBuilder/Viewer/Viewer.jsx
+++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx
@@ -97,10 +97,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
   const switchPage = useStore((state) => state.switchPage);
 
   const showHeader = !globalSettings?.hideHeader && isAppLoaded;
-  // ---remove
-  const handleAppEnvironmentChanged = useCallback((environment) => {
-    console.log('setAppVersionCurrentEnvironment', environment);
-  }, []);
 
   useEffect(() => {
     updateCanvasHeight(currentPageComponents);
@@ -151,7 +147,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
                       pages={pages}
                       currentPageId={currentPageId ?? homePageId}
                       showViewerNavigation={!isPagesSidebarHidden}
-                      handleAppEnvironmentChanged={handleAppEnvironmentChanged}
                       changeToDarkMode={changeToDarkMode}
                     />
                   )}
@@ -163,7 +158,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
                       pages={pages}
                       currentPageId={currentPageId ?? homePageId}
                       showViewerNavigation={!isPagesSidebarHidden}
-                      handleAppEnvironmentChanged={handleAppEnvironmentChanged}
                       changeToDarkMode={changeToDarkMode}
                     />
                   )}
@@ -216,7 +210,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod
                                   pages={pages}
                                   currentPageId={currentPageId ?? homePageId}
                                   showViewerNavigation={!isPagesSidebarHidden}
-                                  handleAppEnvironmentChanged={handleAppEnvironmentChanged}
                                   switchPage={switchPage}
                                   changeToDarkMode={changeToDarkMode}
                                 />
diff --git a/frontend/src/_helpers/authorizeWorkspace.js b/frontend/src/_helpers/authorizeWorkspace.js
index a0ed47f698..15fe1c7578 100644
--- a/frontend/src/_helpers/authorizeWorkspace.js
+++ b/frontend/src/_helpers/authorizeWorkspace.js
@@ -8,6 +8,7 @@ import {
   redirectToErrorPage,
 } from './routes';
 import { ERROR_TYPES } from './constants';
+import useStore from '@/AppBuilder/_stores/store';
 
 /* [* Be cautious: READ THE CASES BEFORE TOUCHING THE CODE. OTHERWISE YOU MAY SEE ENDLESS REDIRECTIONS (AKA ROUTES-BURMUDA-TRIANGLE) *]
   What is this function?
@@ -133,6 +134,14 @@ export const authorizeUserAndHandleErrors = (workspace_id, workspace_slug, callb
   authenticationService
     .authorize()
     .then((data) => {
+      useStore.getState().setUser({
+        email: data.current_user.email,
+        firstName: data.current_user.first_name,
+        lastName: data.current_user.last_name,
+        id: data.current_user.id,
+        avatarId: data.current_user.avatar_id,
+        groups: data.group_permissions.map((group) => group.group),
+      });
       /* CASE-1 */
       const { current_organization_name } = data;
       /* add the user details like permission and user previlliage details to the subject */
diff --git a/frontend/src/_styles/pages-sidebar.scss b/frontend/src/_styles/pages-sidebar.scss
index f62f114d3e..8f4036549b 100644
--- a/frontend/src/_styles/pages-sidebar.scss
+++ b/frontend/src/_styles/pages-sidebar.scss
@@ -39,10 +39,4 @@
                 }
         }
     }
-
-    .canvas-box {
-        &.close {
-            margin-left: 22px !important;
-        }
-    }
 }
\ No newline at end of file