diff --git a/platform/viewer/src/App.js b/platform/viewer/src/App.jsx
similarity index 74%
rename from platform/viewer/src/App.js
rename to platform/viewer/src/App.jsx
index ded9372ae..6b2007bf1 100644
--- a/platform/viewer/src/App.js
+++ b/platform/viewer/src/App.jsx
@@ -5,7 +5,8 @@ import { BrowserRouter, HashRouter } from 'react-router-dom';
 import { ThemeWrapper } from '@ohif/ui';
 // Viewer Project
 // TODO: Should this influence study list?
-// import AppContextProvider from './contexts/AppContextProvider.js';
+import { appConfigContext } from './state/appConfig.context';
+import { useAppConfig } from './hooks/useAppConfig';
 import createRoutes from './routes';
 import appInit from './appInit.js';
 
@@ -23,7 +24,6 @@ let appConfig, commandsManager, extensionManager, servicesManager;
 
 function App({ config, defaultExtensions }) {
   const init = appInit(config, defaultExtensions);
-  const { appRoutes } = init;
 
   // Set above for named export
   appConfig = init.appConfig;
@@ -33,11 +33,23 @@ function App({ config, defaultExtensions }) {
 
   // TODO: Expose configuration w/ context?
   // See: `setConfiguration` in master
+  const appConfigImp = useAppConfig();
+  console.log('appConfigImp: ', appConfigImp);
 
   return (
-    <Router basename={appConfig.routerBasename}>
-      <ThemeWrapper>{createRoutes(appRoutes)}</ThemeWrapper>
-    </Router>
+    <appConfigContext.Provider value={appConfigImp}>
+      <Router basename={appConfig.routerBasename}>
+        <ThemeWrapper>
+          {createRoutes(
+            appConfig.modes,
+            appConfig.dataSources,
+            extensionManager,
+            appConfig,
+            appConfigImp
+          )}
+        </ThemeWrapper>
+      </Router>
+    </appConfigContext.Provider>
   );
 }
 
@@ -53,7 +65,8 @@ App.propTypes = {
       extensions: PropTypes.array,
     }),
   ]).isRequired,
-  /* Extensions that are "bundled" or "baked-in" to the application */
+  /* Extensions that are "bundled" or "baked-in" to the application.
+   * These would be provided at build time as part of they entry point. */
   defaultExtensions: PropTypes.array,
 };
 
diff --git a/platform/viewer/src/appInit.js b/platform/viewer/src/appInit.js
index 508c34dc7..735e2b966 100644
--- a/platform/viewer/src/appInit.js
+++ b/platform/viewer/src/appInit.js
@@ -11,8 +11,6 @@ import {
   // redux as reduxOHIF,
 } from '@ohif/core';
 
-import buildModeRoutes from './routes/buildModeRoutes';
-
 /**
  * @param {object|func} appConfigOrFunc - application configuration, or a function that returns application configuration
  * @param {object[]} defaultExtensions - array of extension objects
@@ -61,24 +59,11 @@ function appInit(appConfigOrFunc, defaultExtensions) {
   // TODO: We no longer init webWorkers at app level
   // TODO: We no longer init the user Manager
 
-  // TODO: After extensions are registered, add modes and datasources to buildModeRoutes.js
-
-  const { modes } = appConfig;
-
-  // Temporarily for testing
-  if (!modes.length) {
-    modes.push(window.exampleMode);
-  }
-
-  const appRoutes =
-    buildModeRoutes(modes, appConfig.dataSources, extensionManager) || [];
-
   return {
     appConfig,
     commandsManager,
     extensionManager,
     servicesManager,
-    appRoutes,
   };
 }
 
diff --git a/platform/viewer/src/components/ViewportGrid/ConnectedViewportGrid.js b/platform/viewer/src/components/ViewportGrid/ConnectedViewportGrid.js
index e423f1dd3..80ff5fa81 100644
--- a/platform/viewer/src/components/ViewportGrid/ConnectedViewportGrid.js
+++ b/platform/viewer/src/components/ViewportGrid/ConnectedViewportGrid.js
@@ -1,7 +1,7 @@
 import ViewportGrid from './ViewportGrid.js';
 import { MODULE_TYPES } from '@ohif/core';
 import { connect } from 'react-redux';
-import { extensionManager } from './../../App.js';
+import { extensionManager } from './../../App.jsx';
 import memoize from 'lodash/memoize';
 
 const getAvailableViewportModules = memoize(viewportModules => {
diff --git a/platform/viewer/src/connectedComponents/ToolContextMenu.js b/platform/viewer/src/connectedComponents/ToolContextMenu.js
index b45bf3b50..13dc3aeca 100644
--- a/platform/viewer/src/connectedComponents/ToolContextMenu.js
+++ b/platform/viewer/src/connectedComponents/ToolContextMenu.js
@@ -1,7 +1,7 @@
 import { ContextMenu } from '@ohif/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { commandsManager } from './../App.js';
+import { commandsManager } from './../App.jsx';
 
 const toolTypes = [
   'Angle',
diff --git a/platform/viewer/src/connectedComponents/ToolbarRow.js b/platform/viewer/src/connectedComponents/ToolbarRow.js
index b03f778bc..3a9d7ad9e 100644
--- a/platform/viewer/src/connectedComponents/ToolbarRow.js
+++ b/platform/viewer/src/connectedComponents/ToolbarRow.js
@@ -12,7 +12,7 @@ import {
 } from '@ohif/ui';
 
 import './ToolbarRow.css';
-import { commandsManager, extensionManager } from './../App.js';
+import { commandsManager, extensionManager } from './../App.jsx';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
diff --git a/platform/viewer/src/connectedComponents/Viewer.js b/platform/viewer/src/connectedComponents/Viewer.js
index 1410dd8f9..ee85b8b9b 100644
--- a/platform/viewer/src/connectedComponents/Viewer.js
+++ b/platform/viewer/src/connectedComponents/Viewer.js
@@ -11,7 +11,7 @@ import ToolbarRow from './ToolbarRow.js';
 import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
 import ConnectedViewerMain from './ConnectedViewerMain.js';
 import SidePanel from './../components/SidePanel.js';
-import { extensionManager } from './../App.js';
+import { extensionManager } from './../App.jsx';
 
 // Contexts
 import WhiteLabelingContext from '../context/WhiteLabelingContext.js';
diff --git a/platform/viewer/src/connectedComponents/ViewerLocalFileData.js b/platform/viewer/src/connectedComponents/ViewerLocalFileData.js
index c0e93d979..f2b6b116d 100644
--- a/platform/viewer/src/connectedComponents/ViewerLocalFileData.js
+++ b/platform/viewer/src/connectedComponents/ViewerLocalFileData.js
@@ -3,7 +3,7 @@ import { metadata, utils } from '@ohif/core';
 
 import ConnectedViewer from './ConnectedViewer.js';
 import PropTypes from 'prop-types';
-import { extensionManager } from './../App.js';
+import { extensionManager } from './../App.jsx';
 import Dropzone from 'react-dropzone';
 import filesToStudies from '../lib/filesToStudies';
 import './ViewerLocalFileData.css';
diff --git a/platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js b/platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js
index cc4d91bc5..63fc55093 100644
--- a/platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js
+++ b/platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js
@@ -4,7 +4,7 @@ import usePrevious from '../customHooks/usePrevious';
 
 import ConnectedViewer from './ConnectedViewer.js';
 import PropTypes from 'prop-types';
-import { extensionManager } from './../App.js';
+import { extensionManager } from './../App.jsx';
 import { useSnackbarContext } from '@ohif/ui';
 
 const { OHIFStudyMetadata, OHIFSeriesMetadata } = metadata;
diff --git a/platform/viewer/src/googleCloud/DicomStorePickerModal.js b/platform/viewer/src/googleCloud/DicomStorePickerModal.js
index 5cba3874b..eaa3e7ae1 100644
--- a/platform/viewer/src/googleCloud/DicomStorePickerModal.js
+++ b/platform/viewer/src/googleCloud/DicomStorePickerModal.js
@@ -5,7 +5,7 @@ import './googleCloud.css';
 import { withTranslation } from 'react-i18next';
 import * as GoogleCloudUtilServers from './utils/getServers';
 
-import { servicesManager } from './../App.js';
+import { servicesManager } from './../App.jsx';
 
 function DicomStorePickerModal({
   isOpen = false,
diff --git a/platform/viewer/src/hooks/useAppConfig.js b/platform/viewer/src/hooks/useAppConfig.js
new file mode 100644
index 000000000..592dac732
--- /dev/null
+++ b/platform/viewer/src/hooks/useAppConfig.js
@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+
+/**
+ * Implements the state/methods defined in `appConfig.context`.
+ */
+export const useAppConfig = initialValue => {
+  const [config, setConfig] = useState(initialValue || {});
+
+  const setCurrentConfig = useCallback(updatedConfig => {
+    setConfig(updatedConfig);
+  }, []);
+
+  return {
+    config,
+    setCurrentConfig,
+  };
+};
diff --git a/platform/viewer/src/index-umd.js b/platform/viewer/src/index-umd.js
index 34a7a9590..dd57bb3de 100644
--- a/platform/viewer/src/index-umd.js
+++ b/platform/viewer/src/index-umd.js
@@ -5,7 +5,7 @@ import 'regenerator-runtime/runtime';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App.js';
+import App from './App.jsx';
 
 function installViewer(config, containerId = 'root', callback) {
   const container = document.getElementById(containerId);
diff --git a/platform/viewer/src/index.js b/platform/viewer/src/index.js
index b390f600e..b3ad3934c 100644
--- a/platform/viewer/src/index.js
+++ b/platform/viewer/src/index.js
@@ -3,7 +3,7 @@
  * Packaged (NPM) builds go through `index-umd.js`
  */
 import 'regenerator-runtime/runtime';
-import App from './App.js';
+import App from './App.jsx';
 import React from 'react';
 import ReactDOM from 'react-dom';
 // test
diff --git a/platform/viewer/src/routes/DataSourceWrapper.jsx b/platform/viewer/src/routes/DataSourceWrapper.jsx
index 32dc8fafe..9214e69b6 100644
--- a/platform/viewer/src/routes/DataSourceWrapper.jsx
+++ b/platform/viewer/src/routes/DataSourceWrapper.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { MODULE_TYPES } from '@ohif/core';
 //
-import { appConfig, extensionManager } from '../App.js';
+import { appConfig, extensionManager } from '../App.jsx';
 
 /**
  * Uses route properties to determine the data source that should be passed
diff --git a/platform/viewer/src/routes/ModeRoute.js b/platform/viewer/src/routes/ModeRoute.js
index 372d31f4f..47faf6cf1 100644
--- a/platform/viewer/src/routes/ModeRoute.js
+++ b/platform/viewer/src/routes/ModeRoute.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import {
   displaySetManager,
   ToolBarManager,
diff --git a/platform/viewer/src/routes/index.js b/platform/viewer/src/routes/index.js
index 381663bfc..9fe188fa4 100644
--- a/platform/viewer/src/routes/index.js
+++ b/platform/viewer/src/routes/index.js
@@ -1,23 +1,31 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
-
 // Route Components
 import DataSourceWrapper from './DataSourceWrapper';
 import StudyListContainer from './StudyListContainer';
 import NotFound from './NotFound';
+import buildModeRoutes from './buildModeRoutes';
 
+// TODO: Make these configurable
 const bakedInRoutes = [
+  // WORK LIST
   {
     path: '/',
     exact: true,
     component: DataSourceWrapper,
     props: { children: StudyListContainer },
   },
+  // NOT FOUND (404)
   { component: NotFound },
 ];
 
-const createRoutes = routes => {
+const createRoutes = (modes, dataSources, extensionManager, t, t2) => {
   console.log('Creating Routes: ', routes, bakedInRoutes);
+  console.log(modes, dataSources, extensionManager, t, t2);
+  if (!modes.length) {
+    modes.push(window.exampleMode);
+  }
+  const routes = buildModeRoutes(modes, dataSources, extensionManager) || [];
   // TODO: Shouldn't need to guard input routes with an empty array?
   const allRoutes = [...(routes || []), ...bakedInRoutes];