diff --git a/src/components/App.tsx b/src/components/App.tsx
index a9ecbfa0..179a39fe 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -35,6 +35,7 @@ import {
   getSelectedElements,
   globalSceneState,
   isSomeElementSelected,
+  calculateScrollCenter,
 } from "../scene";
 import {
   decryptAESGEM,
@@ -743,9 +744,21 @@ export class App extends React.Component<any, AppState> {
 
       const updateScene = (
         decryptedData: SocketUpdateDataSource["SCENE_INIT" | "SCENE_UPDATE"],
+        { scrollToContent = false }: { scrollToContent?: boolean } = {},
       ) => {
         const { elements: remoteElements } = decryptedData.payload;
 
+        if (scrollToContent) {
+          this.setState({
+            ...this.state,
+            ...calculateScrollCenter(
+              remoteElements.filter((element) => {
+                return !element.isDeleted;
+              }),
+            ),
+          });
+        }
+
         // Perform reconciliation - in collaboration, if we encounter
         // elements with more staler versions than ours, ignore them
         // and keep ours.
@@ -853,7 +866,7 @@ export class App extends React.Component<any, AppState> {
               return;
             case "SCENE_INIT": {
               if (!this.socketInitialized) {
-                updateScene(decryptedData);
+                updateScene(decryptedData, { scrollToContent: true });
               }
               break;
             }