diff --git a/repl/src/App.jsx b/repl/src/App.jsx
index 6fc03602..19d846bf 100644
--- a/repl/src/App.jsx
+++ b/repl/src/App.jsx
@@ -107,6 +107,7 @@ export const AppContext = createContext();
 function App() {
   const [view, setView] = useState(); // codemirror view
   const [lastShared, setLastShared] = useState();
+  const [activeFooter, setActiveFooter] = useState('console');
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop } = useStrudel({
     initialCode: '// LOADING',
@@ -229,6 +230,8 @@ function App() {
         isDirty,
         lastShared,
         activeCode,
+        activeFooter,
+        setActiveFooter,
         handleChangeCode,
         handleTogglePlay,
         handleUpdate,
diff --git a/repl/src/Footer.jsx b/repl/src/Footer.jsx
index 39a26697..07167b95 100644
--- a/repl/src/Footer.jsx
+++ b/repl/src/Footer.jsx
@@ -2,11 +2,12 @@ import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel.cycles/core';
 import { cx } from '@strudel.cycles/react';
 import { nanoid } from 'nanoid';
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useEvent, loadedSamples } from './App';
+import React, { useContext, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useEvent, loadedSamples, AppContext } from './App';
 
 export function Footer() {
-  const [activeFooter, setActiveFooter] = useState('console');
+  // const [activeFooter, setActiveFooter] = useState('console');
+  const { activeFooter, setActiveFooter } = useContext(AppContext);
   const footerContent = useRef();
   const [log, setLog] = useState([]);