diff --git a/src/components/App.css b/src/components/App.css
index 9c4291e..613646a 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -1,7 +1,21 @@
 .calculator {
+  z-index: 1;
   position: absolute;
   top: 60px;
-  left: 70px;
   right: 0;
   bottom: 0;
 }
+
+.calculator-burst,
+.calculator-settings {
+  left: 271px;
+}
+
+.calculator-none,
+.calculator-preview {
+  left: 70px;
+}
+
+.calculator-files {
+  left: 449px;
+}
diff --git a/src/components/App.js b/src/components/App.js
index df8c720..6bab841 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -31,10 +31,12 @@ class App extends Component {
   }
 
   render() {
+    const { pane } = this.props;
+
     return (
       <div className="App">
         <Header />
-        <div className="calculator" ref={calcContainer} />
+        <div className={`calculator calculator-${pane}`} ref={calcContainer} />
         <SettingsContainer />
         <PreviewContainer />
         <BurstContainer />
diff --git a/src/components/Header.test.js b/src/components/Header.test.js
index 0dd94a8..9ba7898 100644
--- a/src/components/Header.test.js
+++ b/src/components/Header.test.js
@@ -11,7 +11,9 @@ describe('<Header/>', () => {
 
   it('renders appropriate content', () => {
     const { getByTestId } = global.renderWithRedux(<Header />);
-    expect(getByTestId('Header-logo').textContent).toBe('GIFsmos');
+    expect(getByTestId('Header-logo').firstChild.src).toContain(
+      'gifsmos-logo.svg'
+    );
     expect(getByTestId('Header-help').textContent).toMatch('Paste');
   });
 });
diff --git a/src/components/Preview.css b/src/components/Preview.css
index ddf0234..991667b 100644
--- a/src/components/Preview.css
+++ b/src/components/Preview.css
@@ -10,6 +10,7 @@
 }
 
 .Preview-expanded {
+  z-index: 1;
   transform: translateX(0);
   transition: 0.2s transform;
 }
diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css
index 6074cc5..c6c5f00 100644
--- a/src/components/Sidebar.css
+++ b/src/components/Sidebar.css
@@ -1,5 +1,6 @@
 .Sidebar {
   position: absolute;
+  z-index: 2;
   top: 60px;
   left: 0;
   bottom: 0;
diff --git a/src/containers/AppContainer.js b/src/containers/AppContainer.js
new file mode 100644
index 0000000..0af98d0
--- /dev/null
+++ b/src/containers/AppContainer.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import App from '../components/App';
+
+const mapStateToProps = (state, ownProps) => {
+  const { expandedPane } = state.ui;
+
+  return {
+    pane: expandedPane.toLowerCase()
+  };
+};
+
+const AppContainer = connect(mapStateToProps)(App);
+
+export default AppContainer;
diff --git a/src/index.js b/src/index.js
index 9605613..957e42b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import thunkMiddleware from 'redux-thunk';
 import rootReducer from './reducers';
-import App from './components/App';
+import AppContainer from './containers/AppContainer';
 import panes from './constants/pane-types';
 import { togglePane } from './actions';
 import greet from './lib/dev-greeting';
@@ -16,7 +16,7 @@ const closePane = () => store.dispatch(togglePane(panes.NONE));
 
 ReactDOM.render(
   <Provider store={store}>
-    <App onEscape={closePane} />
+    <AppContainer onEscape={closePane} />
   </Provider>,
   document.getElementById('root')
 );
diff --git a/src/lib/calculator.js b/src/lib/calculator.js
index 9be4f4b..b9d3983 100644
--- a/src/lib/calculator.js
+++ b/src/lib/calculator.js
@@ -2,7 +2,6 @@ let calculator;
 
 function initializeCalculator(desmos, calcContainer, calcOptions) {
   calculator = desmos.GraphingCalculator(calcContainer.current, calcOptions);
-  window.calculator = calculator;
   return calculator;
 }