diff --git a/src/app/App.tsx b/src/app/App.tsx
index 6b8db7bf..9425c319 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -717,6 +717,7 @@ function formatAdvancedRenderingToneMappingLabel(mode: AdvancedRenderingToneMapp
 export function App({ store, initialStatusMessage }: AppProps) {
   const editorState = useEditorStoreState(store);
   const brushList = Object.values(editorState.document.brushes);
+  const viewMode = editorState.viewportViewMode;
   const entityList = getEntityInstances(editorState.document.entities);
   const entityDisplayList = getSortedEntityDisplayLabels(editorState.document.entities, editorState.document.assets);
   const primaryPlayerStart = getPrimaryPlayerStartEntity(editorState.document.entities);
@@ -1277,6 +1278,16 @@ export function App({ store, initialStatusMessage }: AppProps) {
     }
   };
 
+  const handleSetViewportViewMode = (nextViewMode: ViewportViewMode) => {
+    if (editorState.viewportViewMode === nextViewMode) {
+      return;
+    }
+
+    blurActiveTextEntry();
+    store.setViewportViewMode(nextViewMode);
+    setStatusMessage(`Switched the viewport to ${getViewportViewModeLabel(nextViewMode)} view.`);
+  };
+
   const handleCreateBoxBrush = (center?: Vec3) => {
     try {
       store.executeCommand(createCreateBoxBrushCommand(center === undefined ? {} : { center }));