diff --git a/extensions/default/src/DicomWebDataSource/index.js b/extensions/default/src/DicomWebDataSource/index.js
index 1d0621cc5..0999e6651 100644
--- a/extensions/default/src/DicomWebDataSource/index.js
+++ b/extensions/default/src/DicomWebDataSource/index.js
@@ -1,6 +1,6 @@
 import { api } from 'dicomweb-client';
 import { mapParams, search, processResults } from './qido.js';
-import IWebApi from '@ohif/core';
+import { IWebApiDataSource } from '@ohif/core';
 
 /**
  *
@@ -22,7 +22,7 @@ function createDicomWebApi(dicomWebConfig) {
 
   const dicomWebClient = new api.DICOMwebClient(config);
 
-  return IWebApi({
+  return IWebApiDataSource.create({
     query: {
       studies: {
         mapParams: mapParams.bind(),
diff --git a/platform/core/src/DataSources/DicomWebApi.js b/platform/core/src/DataSources/DicomWebApi.js
index fcdd8f5a5..fad4c5102 100644
--- a/platform/core/src/DataSources/DicomWebApi.js
+++ b/platform/core/src/DataSources/DicomWebApi.js
@@ -1,6 +1,6 @@
 import { api } from 'dicomweb-client';
 import { mapParams, search, processResults } from './qido.js';
-import IWebApi from './IWebApi.js';
+import IWebApiDataSource from './IWebApiDataSource.js';
 
 /**
  *
@@ -22,7 +22,7 @@ function createDicomWebApi(dicomWebConfig) {
 
   const dicomWebClient = new api.DICOMwebClient(config);
 
-  return IWebApi({
+  return IWebApiDataSource.create({
     query: {
       studies: {
         mapParams: mapParams.bind(),
diff --git a/platform/core/src/DataSources/IWebApi.js b/platform/core/src/DataSources/IWebApi.js
deleted file mode 100644
index 9fa938085..000000000
--- a/platform/core/src/DataSources/IWebApi.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import {dicomMetadataStore} from '@ohif/core';
-
-/**
- * Factory function that creates a new "Web API" data source.
- * A "Web API" data source is any source that fetches data over
- * HTTP. This function serves as an "adapter" to wrap those calls
- * so that all "Web API" data sources have the same interface and can
- * be used interchangeably.
- *
- * It's worth noting that a single implementation of this interface
- * can define different underlying sources for "read" and "write" operations.
- */
-function createWebApiDataSource({ query, retrieve, retrieveMetadata }) {
-  const defaultQuery = {
-    studies: {
-      /**
-       * @param {string} params.patientName
-       * @param {string} params.mrn
-       * @param {object} params.studyDate
-       * @param {string} params.description
-       * @param {string} params.modality
-       * @param {string} params.accession
-       * @param {string} params.sortBy
-       * @param {string} params.sortDirection -
-       * @param {number} params.page
-       * @param {number} params.resultsPerPage
-       */
-      mapParams: params => params,
-      requestResults: () => {},
-      processResults: results => results,
-    },
-    series: {},
-    instances: {},
-  };
-
-  const defaultRetrieve = {};
-
-  return {
-    query,
-    retrieve: {},
-    retrieveMetadata: retrieveMetadata.bind(null, dicomMetadataStore);
-    // then go get all series level metadata.
-    // Store this in the DICOM MetadataStore.
-  };
-}
-
-export { createWebApiDataSource };
diff --git a/platform/core/src/DataSources/IWebApiDataSource.js b/platform/core/src/DataSources/IWebApiDataSource.js
index e3f10dde9..3848e6574 100644
--- a/platform/core/src/DataSources/IWebApiDataSource.js
+++ b/platform/core/src/DataSources/IWebApiDataSource.js
@@ -8,7 +8,7 @@
  * It's worth noting that a single implementation of this interface
  * can define different underlying sources for "read" and "write" operations.
  */
-function createWebApiDataSource({ query, retrieve }) {
+function create({ query, retrieve, retrieveMetadata }) {
   const defaultQuery = {
     studies: {
       /**
@@ -36,7 +36,14 @@ function createWebApiDataSource({ query, retrieve }) {
   return {
     query,
     retrieve: {},
+    // retrieveMetadata: retrieveMetadata.bind(null, dicomMetadataStore);
+    // then go get all series level metadata.
+    // Store this in the DICOM MetadataStore.
   };
 }
 
-export { createWebApiDataSource };
+const IWebApiDataSource = {
+  create,
+};
+
+export default IWebApiDataSource;
diff --git a/platform/core/src/index.js b/platform/core/src/index.js
index 018033602..bc845328e 100644
--- a/platform/core/src/index.js
+++ b/platform/core/src/index.js
@@ -29,7 +29,7 @@ import {
   UIViewportDialogService,
 } from './services';
 
-import * as IWebApiDataSource from './DataSources/IWebApiDataSource';
+import IWebApiDataSource from './DataSources/IWebApiDataSource';
 
 const OHIF = {
   MODULE_TYPES,
diff --git a/platform/viewer/src/routes/DataSourceWrapper.jsx b/platform/viewer/src/routes/DataSourceWrapper.jsx
index 5734e0e7f..00f949272 100644
--- a/platform/viewer/src/routes/DataSourceWrapper.jsx
+++ b/platform/viewer/src/routes/DataSourceWrapper.jsx
@@ -1,8 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { MODULE_TYPES } from '@ohif/core';
 //
-import { extensionManager } from '../App.js';
+import { appConfig, extensionManager } from '../App.js';
 
 /**
  * Uses route properties to determine the data source that should be passed
@@ -14,8 +15,39 @@ import { extensionManager } from '../App.js';
  */
 function DataSourceWrapper(props) {
   const { children: LayoutTemplate, ...rest } = props;
-  console.log('data source wrapper', props);
-  console.log(extensionManager);
+  // TODO: Fetch by type, name, etc?
+  const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE];
+  // TODO: Good usecase for flatmap?
+  const webApiDataSources = dataSourceModules.reduce((acc, curr) => {
+    const mods = [];
+    curr.module.forEach(mod => {
+      if (mod.type === 'webApi') {
+        mods.push(mod);
+      }
+    });
+    return acc.concat(mods);
+  }, []);
+
+  // Grabbing first for now. This isn't hydrated yet, but we should
+  // hydrate it somewhere based on config...
+  // ~ default.js
+  const firstAppConfigDataSource = appConfig.dataSources[0];
+  const dataSourceConfig = firstAppConfigDataSource.configuration;
+  const firstWebApiDataSource = webApiDataSources[0];
+  const dataSource = firstWebApiDataSource.createDataSource(dataSourceConfig);
+
+  console.log(dataSource, 'dsm');
+
+  // Route props --> studies.mapParams
+  // mapParams --> studies.search
+  // studies.search --> studies.processResults
+  // studies.processResults --> <LayoutTemplate studies={} />
+  // But only for LayoutTemplate type of 'list'?
+  // Or no data fetching here, and just hand down my source
+
+  // const studies = dataSource.query.studies.search();
+
+  // console.log(studies);
 
   return (
     <React.Fragment>