diff --git a/platform/viewer/src/App.jsx b/platform/viewer/src/App.jsx
index c65292a05..969977107 100644
--- a/platform/viewer/src/App.jsx
+++ b/platform/viewer/src/App.jsx
@@ -14,8 +14,7 @@ import {
 } from '@ohif/ui';
 // Viewer Project
 // TODO: Should this influence study list?
-import { appConfigContext } from '@state/appConfig.context';
-import { useAppConfig } from '@hooks/useAppConfig';
+import { AppConfigProvider } from '@state';
 import createRoutes from './routes';
 import appInit from './appInit.js';
 
@@ -41,8 +40,8 @@ function App({ config, defaultExtensions }) {
   servicesManager = init.servicesManager;
 
   // Set appConfig
-  const appConfigContextApi = useAppConfig(init.appConfig);
-  const { routerBasename, modes, dataSources } = appConfigContextApi.appConfig;
+  const appConfigState = init.appConfig;
+  const { routerBasename, modes, dataSources } = appConfigState;
   // Use config to create routes
   const appRoutes = createRoutes(
     modes,
@@ -97,7 +96,7 @@ function App({ config, defaultExtensions }) {
   };
 
   return (
-    <appConfigContext.Provider value={appConfigContextApi}>
+    <AppConfigProvider value={appConfigState}>
       <Router basename={routerBasename}>
         <ThemeWrapper>
           <ViewportGridProvider
@@ -121,7 +120,7 @@ function App({ config, defaultExtensions }) {
           </ViewportGridProvider>
         </ThemeWrapper>
       </Router>
-    </appConfigContext.Provider>
+    </AppConfigProvider>
   );
 }
 
diff --git a/platform/viewer/src/hooks/useAppConfig.js b/platform/viewer/src/hooks/useAppConfig.js
deleted file mode 100644
index bf50e040e..000000000
--- a/platform/viewer/src/hooks/useAppConfig.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useCallback, useState } from 'react';
-
-/**
- * Implements the state/methods defined in `appConfig.context`.
- */
-export const useAppConfig = initialValue => {
-  const [appConfig, setAppConfig] = useState(initialValue || {});
-
-  const setCurrentAppConfig = useCallback(updatedConfig => {
-    setAppConfig(updatedConfig);
-  }, []);
-
-  return {
-    appConfig,
-    setCurrentAppConfig,
-  };
-};
diff --git a/platform/viewer/src/routes/DataSourceWrapper.jsx b/platform/viewer/src/routes/DataSourceWrapper.jsx
index d9a5348e1..d0a0711e3 100644
--- a/platform/viewer/src/routes/DataSourceWrapper.jsx
+++ b/platform/viewer/src/routes/DataSourceWrapper.jsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { MODULE_TYPES } from '@ohif/core';
 //
-import { appConfigContext } from '../state/appConfig.context';
+import { useAppConfig } from '@state';
 import { extensionManager } from '../App.jsx';
 
 /**
@@ -15,7 +15,7 @@ import { extensionManager } from '../App.jsx';
  * @param {function} props.children - Layout Template React Component
  */
 function DataSourceWrapper(props) {
-  const { appConfig } = useContext(appConfigContext);
+  const [appConfig] = useAppConfig();
   const { children: LayoutTemplate, history, ...rest } = props;
   const queryFilterValues = _getQueryFilterValues(history.location.search);
 
diff --git a/platform/viewer/src/routes/WorkList/WorkList.jsx b/platform/viewer/src/routes/WorkList/WorkList.jsx
index 4bf8c2ce3..4724ce80b 100644
--- a/platform/viewer/src/routes/WorkList/WorkList.jsx
+++ b/platform/viewer/src/routes/WorkList/WorkList.jsx
@@ -6,7 +6,8 @@ import moment from 'moment';
 import qs from 'query-string';
 //
 import filtersMeta from './filtersMeta.js';
-import { useDebounce, useQuery } from './../../hooks';
+import { useAppConfig } from '@state';
+import { useDebounce, useQuery } from '@hooks';
 
 import {
   Icon,
@@ -28,6 +29,9 @@ const seriesInStudiesMap = new Map();
  * - debounce `setFilterValues` (150ms?)
  */
 function WorkList({ history, data: studies, dataSource }) {
+  // ~ Modes
+  const [appConfig] = useAppConfig();
+  console.warn('~~~~~~~~~~~~', appConfig);
   // ~ Filters
   const query = useQuery();
   const queryFilterValues = _getQueryFilterValues(query);
@@ -176,7 +180,7 @@ function WorkList({ history, data: studies, dataSource }) {
         continue;
       }
 
-      console.log(`fetching for ${expandedRowIndex}`)
+      console.log(`fetching for ${expandedRowIndex}`);
       fetchSeries(studyInstanceUid);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -319,7 +323,7 @@ function WorkList({ history, data: studies, dataSource }) {
             rounded="full"
             variant="outlined"
             endIcon={<Icon name="launch-info" />}
-            className="font-bold ml-4"
+            className="ml-4 font-bold"
           >
             View: Segmentation
           </Button>
@@ -348,7 +352,7 @@ function WorkList({ history, data: studies, dataSource }) {
           </div>
         </div>
         <div className="flex items-center">
-          <span className="mr-3 text-common-light text-lg">
+          <span className="mr-3 text-lg text-common-light">
             FOR INVESTIGATIONAL USE ONLY
           </span>
           <IconButton
diff --git a/platform/viewer/src/state/appConfig.context.jsx b/platform/viewer/src/state/appConfig.context.jsx
deleted file mode 100644
index da4b18ece..000000000
--- a/platform/viewer/src/state/appConfig.context.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createContext } from 'react';
-
-export const APP_CONFIG_DEFAULT_VALUE = {
-  appConfig: {},
-  setCurrentAppConfig: () => {},
-};
-
-export const appConfigContext = createContext(APP_CONFIG_DEFAULT_VALUE);
diff --git a/platform/viewer/src/state/appConfig.js b/platform/viewer/src/state/appConfig.js
new file mode 100644
index 000000000..8d7388153
--- /dev/null
+++ b/platform/viewer/src/state/appConfig.js
@@ -0,0 +1,20 @@
+import React, { useState, createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const appConfigContext = createContext(null);
+const { Provider } = appConfigContext;
+
+export const useAppConfig = () => useContext(appConfigContext);
+
+export function AppConfigProvider({ children, value: initAppConfig }) {
+  const [appConfig, setAppConfig] = useState(initAppConfig);
+
+  return <Provider value={[appConfig]}>{children}</Provider>;
+}
+
+AppConfigProvider.propTypes = {
+  children: PropTypes.any,
+  value: PropTypes.any,
+};
+
+export default AppConfigProvider;
diff --git a/platform/viewer/src/state/index.js b/platform/viewer/src/state/index.js
new file mode 100644
index 000000000..e3a38870e
--- /dev/null
+++ b/platform/viewer/src/state/index.js
@@ -0,0 +1,3 @@
+import { AppConfigProvider, useAppConfig } from './appConfig.js';
+
+export { AppConfigProvider, useAppConfig };