diff --git a/app/gui2/shared/languageServer.ts b/app/gui2/shared/languageServer.ts
index 54ef618fe20..2daf6f80fb6 100644
--- a/app/gui2/shared/languageServer.ts
+++ b/app/gui2/shared/languageServer.ts
@@ -85,6 +85,10 @@ export class LanguageServer extends ObservableV2<Notifications> {
     return this.acquireCapability('file/receivesTreeUpdates', { path })
   }
 
+  acquireExecutionContextCanModify(contextId: ContextId): Promise<void> {
+    return this.acquireCapability('executionContext/canModify', { contextId })
+  }
+
   /** [Documentation](https://github.com/enso-org/enso/blob/develop/docs/language-server/protocol-language-server.md#sessioninitprotocolconnection) */
   initProtocolConnection(clientId: Uuid): Promise<response.InitProtocolConnection> {
     return this.request('session/initProtocolConnection', { clientId })
diff --git a/app/gui2/src/components/ExecutionModeSelector.vue b/app/gui2/src/components/ExecutionModeSelector.vue
index 587c5d12d44..9ded68061ce 100644
--- a/app/gui2/src/components/ExecutionModeSelector.vue
+++ b/app/gui2/src/components/ExecutionModeSelector.vue
@@ -19,7 +19,7 @@ function onDocumentClick(event: MouseEvent) {
   }
 }
 
-useEvent(document, 'click', onDocumentClick)
+useEvent(document, 'pointerdown', onDocumentClick)
 </script>
 
 <template>
diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index b6f35400856..d4ba3db5fe7 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -122,6 +122,25 @@ useEvent(window, 'pointerdown', interactionBindingsHandler, { capture: true })
 const scaledMousePos = computed(() => navigator.sceneMousePos?.scale(navigator.scale))
 const scaledSelectionAnchor = computed(() => nodeSelection.anchor?.scale(navigator.scale))
 
+/// Track play button presses.
+function onPlayButtonPress() {
+  projectStore.lsRpcConnection.then(async () => {
+    const modeValue = mode.value
+    if (modeValue == undefined) {
+      return
+    }
+    projectStore.executionContext.recompute('all', modeValue === 'live' ? 'Live' : 'Design')
+  })
+}
+
+/// Watch for changes in the execution mode.
+watch(
+  () => mode.value,
+  (modeValue) => {
+    projectStore.executionContext.setExecutionEnvironment(modeValue === 'live' ? 'Live' : 'Design')
+  },
+)
+
 const groupColors = computed(() => {
   const styles: { [key: string]: string } = {}
   for (let group of suggestionDb.groups) {
@@ -194,7 +213,7 @@ watch(componentBrowserVisible, (visible) => {
       @breadcrumbClick="console.log(`breadcrumb #${$event + 1} clicked.`)"
       @back="console.log('breadcrumbs \'back\' button clicked.')"
       @forward="console.log('breadcrumbs \'forward\' button clicked.')"
-      @execute="console.log('\'execute\' button clicked.')"
+      @execute="onPlayButtonPress()"
     />
     <div ref="codeEditorArea">
       <Suspense>
diff --git a/app/gui2/src/stores/project.ts b/app/gui2/src/stores/project.ts
index cf637517102..b6595383e68 100644
--- a/app/gui2/src/stores/project.ts
+++ b/app/gui2/src/stores/project.ts
@@ -396,6 +396,13 @@ export class ExecutionContext extends ObservableV2<ExecutionContextNotification>
     return this.desiredStack[this.desiredStack.length - 1]!
   }
 
+  setExecutionEnvironment(mode: ExecutionEnvironment) {
+    this.queue.pushTask(async (state) => {
+      await state.lsRpc.setExecutionEnvironment(this.id, mode)
+      return state
+    })
+  }
+
   destroy() {
     this.abortCtl.abort()
   }