diff --git a/src/App.js b/src/App.js
index 895d69192..ec51550c8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -36,13 +36,13 @@ const commandsManagerConfig = {
   getActiveContexts: () => store.getState().ui.activeContexts,
 };
 
-const _commandsManager = new CommandsManager(commandsManagerConfig);
-const _hotkeysManager = new HotkeysManager(_commandsManager);
+const commandsManager = new CommandsManager(commandsManagerConfig);
+const hotkeysManager = new HotkeysManager(commandsManager);
 
 // TODO: Should be done in extensions w/ commandsModule
 // ~~ ADD COMMANDS
-appCommands.init(_commandsManager);
-_hotkeysManager.setHotkeys(window.config.hotkeys, true);
+appCommands.init(commandsManager);
+hotkeysManager.setHotkeys(window.config.hotkeys, true);
 
 // Force active contexts for now. These should be set in Viewer/ActiveViewer
 store.dispatch({
@@ -148,3 +148,5 @@ class App extends Component {
 }
 
 export default App;
+
+export { commandsManager, hotkeysManager };
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 51c3ad744..9d53d8215 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,16 +1,18 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Link, withRouter } from 'react-router-dom';
-import { Dropdown } from 'react-viewerbase';
 import './Header.css';
+
+import { Link, withRouter } from 'react-router-dom';
+import React, { Component } from 'react';
+
+import { Dropdown } from 'react-viewerbase';
 import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
-import ConnectedUserPreferencesModal from '../../connectedComponents/ConnectedUserPreferencesModal.js';
+import PropTypes from 'prop-types';
+import { UserPreferencesModal } from 'react-viewerbase';
+import { hotkeysManager } from './../../App.js';
 
 class Header extends Component {
   static propTypes = {
     home: PropTypes.bool.isRequired,
     location: PropTypes.object.isRequired,
-    openUserPreferencesModal: PropTypes.func,
     children: PropTypes.node,
   };
 
@@ -19,12 +21,25 @@ class Header extends Component {
     children: OHIFLogo(),
   };
 
+  // onSave: data => {
+  //   const contextName = window.store.getState().commandContext.context;
+  //   const preferences = cloneDeep(window.store.getState().preferences);
+  //   preferences[contextName] = data;
+  //   dispatch(setUserPreferences(preferences));
+  //   dispatch(setUserPreferencesModalOpen(false));
+  //   OHIF.hotkeysUtil.setHotkeys(data.hotKeysData);
+  // },
+  // onResetToDefaults: () => {
+  //   dispatch(setUserPreferences());
+  //   dispatch(setUserPreferencesModalOpen(false));
+  //   OHIF.hotkeysUtil.setHotkeys();
+  // },
+
   constructor(props) {
     super(props);
+    this.state = { isUserPreferencesOpen: false };
 
-    this.state = {
-      userPreferencesOpen: false,
-    };
+    const onClick = this.toggleUserPreferences.bind(this);
 
     this.options = [
       {
@@ -32,7 +47,7 @@ class Header extends Component {
         icon: {
           name: 'user',
         },
-        onClick: this.props.openUserPreferencesModal,
+        onClick: onClick,
       },
       {
         title: 'About',
@@ -42,6 +57,24 @@ class Header extends Component {
         link: 'http://ohif.org',
       },
     ];
+
+    this.hotKeysData = hotkeysManager.hotkeyDefinitions;
+  }
+
+  toggleUserPreferences() {
+    const isOpen = this.state.isUserPreferencesOpen;
+
+    this.setState({
+      isUserPreferencesOpen: !isOpen,
+    });
+  }
+
+  onUserPreferencesSave({ windowLevelData, hotKeysData }) {
+    console.log(windowLevelData);
+    console.log(hotKeysData);
+
+    // TODO: Update hotkeysManager
+    // TODO: reset `this.hotKeysData`
   }
 
   render() {
@@ -75,7 +108,14 @@ class Header extends Component {
         <div className="header-menu">
           <span className="research-use">INVESTIGATIONAL USE ONLY</span>
           <Dropdown title="Options" list={this.options} align="right" />
-          <ConnectedUserPreferencesModal />
+          <UserPreferencesModal
+            isOpen={this.state.isUserPreferencesOpen}
+            onCancel={this.toggleUserPreferences.bind(this)}
+            onSave={this.toggleUserPreferences.bind(this)}
+            onResetToDefaults={this.toggleUserPreferences.bind(this)}
+            windowLevelData={{}}
+            hotKeysData={this.hotKeysData}
+          />
         </div>
       </div>
     );
diff --git a/src/connectedComponents/ConnectedHeader.js b/src/connectedComponents/ConnectedHeader.js
index 73644c976..1f39315b6 100644
--- a/src/connectedComponents/ConnectedHeader.js
+++ b/src/connectedComponents/ConnectedHeader.js
@@ -1,6 +1,5 @@
 import Header from '../components/Header/Header.js';
 import { connect } from 'react-redux';
-import { setUserPreferencesModalOpen } from '../store/layout/actions.js';
 
 const mapStateToProps = state => {
   return {
@@ -8,17 +7,6 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = dispatch => {
-  return {
-    openUserPreferencesModal: () => {
-      dispatch(setUserPreferencesModalOpen(true));
-    },
-  };
-};
-
-const ConnectedHeader = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Header);
+const ConnectedHeader = connect(mapStateToProps)(Header);
 
 export default ConnectedHeader;
diff --git a/src/connectedComponents/ConnectedUserPreferencesModal.js b/src/connectedComponents/ConnectedUserPreferencesModal.js
deleted file mode 100644
index 26ed515eb..000000000
--- a/src/connectedComponents/ConnectedUserPreferencesModal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import OHIF from 'ohif-core';
-import { UserPreferencesModal } from 'react-viewerbase';
-import cloneDeep from 'lodash.clonedeep';
-import { connect } from 'react-redux';
-import { setUserPreferencesModalOpen } from './../store/layout/actions.js';
-
-const { setUserPreferences } = OHIF.redux.actions;
-
-const mapStateToProps = state => {
-  const contextName = window.store.getState().commandContext.context;
-  return {
-    isOpen: state.ui.userPreferencesModalOpen,
-    windowLevelData: state.preferences[contextName]
-      ? state.preferences[contextName].windowLevelData
-      : {},
-    hotKeysData: state.preferences[contextName]
-      ? state.preferences[contextName].hotKeysData
-      : {},
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onCancel: () => {
-      dispatch(setUserPreferencesModalOpen(false));
-    },
-    onSave: data => {
-      const contextName = window.store.getState().commandContext.context;
-      const preferences = cloneDeep(window.store.getState().preferences);
-      preferences[contextName] = data;
-      dispatch(setUserPreferences(preferences));
-      dispatch(setUserPreferencesModalOpen(false));
-      OHIF.hotkeysUtil.setHotkeys(data.hotKeysData);
-    },
-    onResetToDefaults: () => {
-      dispatch(setUserPreferences());
-      dispatch(setUserPreferencesModalOpen(false));
-      OHIF.hotkeysUtil.setHotkeys();
-    },
-  };
-};
-
-const ConnectedUserPreferencesModal = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(UserPreferencesModal);
-
-export default ConnectedUserPreferencesModal;
diff --git a/src/store/layout/actions.js b/src/store/layout/actions.js
index 54e3a16ca..319628c08 100644
--- a/src/store/layout/actions.js
+++ b/src/store/layout/actions.js
@@ -23,11 +23,6 @@ export const setRightSidebarOpen = state => ({
   state,
 });
 
-export const setUserPreferencesModalOpen = state => ({
-  type: 'SET_USER_PREFERENCES_MODAL_OPEN',
-  state,
-});
-
 const actions = {
   addActiveContext,
   removeActiveContext,
@@ -35,7 +30,6 @@ const actions = {
   //
   setLeftSidebarOpen,
   setRightSidebarOpen,
-  setUserPreferencesModalOpen,
 };
 
 export default actions;
diff --git a/src/store/layout/reducers.js b/src/store/layout/reducers.js
index ea87caef4..6659d72a7 100644
--- a/src/store/layout/reducers.js
+++ b/src/store/layout/reducers.js
@@ -1,7 +1,6 @@
 const defaultState = {
   leftSidebarOpen: true,
   rightSidebarOpen: false,
-  userPreferencesModalOpen: false,
   labelling: {},
   contextMenu: {},
   activeContexts: [],
@@ -30,10 +29,6 @@ const ui = (state = defaultState, action) => {
       return Object.assign({}, state, { leftSidebarOpen: action.state });
     case 'SET_RIGHT_SIDEBAR_OPEN':
       return Object.assign({}, state, { rightSidebarOpen: action.state });
-    case 'SET_USER_PREFERENCES_MODAL_OPEN':
-      return Object.assign({}, state, {
-        userPreferencesModalOpen: action.state,
-      });
     case 'SET_LABELLING_FLOW_DATA': {
       const labelling = Object.assign({}, action.labellingFlowData);