diff --git a/.eslintrc b/.eslintrc
index 2131031f6b..463676d62b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -48,6 +48,7 @@
     "object-curly-newline": "off",
     "space-before-function-paren": ["error", "always"],
     "no-trailing-spaces": ["error"],
+    "no-unused-expressions": ["error", { "allowShortCircuit": true }],
     "react/prefer-stateless-function": "off",
     "react/prop-types": "off",
     "jsx-a11y/label-has-for": "off",
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 56bf691d3a..40ca6c517f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -13,6 +13,8 @@ Have questions about this document or anything not covered here? Feel free to re
 * [Build the user interface](#build-the-user-interface)
 * [Accessing the AWX web interface](#accessing-the-awx-web-interface)
 * [Working with React](#working-with-react)
+  * [App structure](#app-structure)
+  * [Naming files](#naming-files)
   * [Class constructors vs Class properties](#class-constructors-vs-class-properties)
   * [Binding](#binding)
   * [Typechecking with PropTypes](#typechecking-with-proptypes)
@@ -56,6 +58,50 @@ Run the following to build the AWX UI:
 You can now log into the AWX web interface at [https://127.0.0.1:3001](https://127.0.0.1:3001).
 
 ## Working with React
+
+### App structure
+
+All source code lives in the `/src` directory and all tests live in the `/__tests__` directory (mimicing the internal structure of `/src`).
+
+Inside these folders, the internal structure is:
+- **/components** - All generic components that are meant to be used in multiple contexts throughout awx.  Things like buttons, tabs go here.
+- **/contexts** - Components which utilize react's context api.
+- **/pages** - Based on the various routes of awx.
+  - **/components** - Components that are meant to be used specifically by a particular route, but might be sharable across pages of that route. For example, a form component which is used on both add and edit screens.
+  - **/screens** - Individual pages of the route, such as add, edit, list, related lists, etc.
+- **/util** - Stateless helper functions that aren't tied to react.
+
+#### Bootstrapping the application (root src/ files)
+
+In the root of `/src`, there are a few files which are used to initialize the react app.  These are
+
+- **index.jsx**
+  - Connects react app to root dom node.
+  - Sets up root route structure, navigation grouping and login modal
+  - Calls base context providers
+  - Imports .scss styles.
+- **app.jsx**
+  - Sets standard page layout, about modal, and root dialog modal.
+- **RootProvider.jsx**
+  - Sets up all context providers.
+  - Initializes i18n and router
+
+### Naming files
+
+Ideally, files should be named the same as the component they export, and tests with `.test` appended.  In other words, `<FooBar>` would be defined in `FooBar.jsx`, and its tests would be defined in `FooBar.test.jsx`.
+
+#### Naming components that use the context api
+
+**File naming** - Since contexts export both consumer and provider (and potentially in withContext function form), the file can be simplified to be named after the consumer export.  In other words, the file containing the `Network` context components would be named `Network.jsx`.
+
+**Component naming and conventions** - In order to provide a consistent interface with react-router and lingui, as well as make their usage easier and less verbose, context components follow these conventions:
+- Providers are wrapped in a component in the `FooProvider` format.
+  - The value prop of the provider should be pulled from state.  This is recommended by the react docs, [here](https://reactjs.org/docs/context.html#caveats).
+  - The provider should also be able to accept its value by prop for testing.
+  - Any sort of code related to grabbing data to put on the context should be done in this component.
+- Consumers are wrapped in a component in the `Foo` format.
+- If it makes sense, consumers can be exported as a function in the `withFoo()` format.  If a component is wrapped in this function, its context values are available on the component as props.
+
 ### Class constructors vs Class properties
 It is good practice to use constructor-bound instance methods rather than methods as class properties. Methods as arrow functions provide lexical scope and are bound to the Component class instance instead of the class itself. This makes it so we cannot easily test a Component's methods without invoking an instance of the Component and calling the method directly within our tests.
 
diff --git a/__tests__/App.test.jsx b/__tests__/App.test.jsx
index d98025eebd..9712833be4 100644
--- a/__tests__/App.test.jsx
+++ b/__tests__/App.test.jsx
@@ -2,38 +2,47 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
 
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { asyncFlush } from '../jest.setup';
 
-import App from '../src/App';
+import { ConfigProvider } from '../src/contexts/Config';
+import { NetworkProvider } from '../src/contexts/Network';
+
+import App, { _App } from '../src/App';
+
+const networkProviderValue = { api: {}, handleHttpError: () => {} };
 
 describe('<App />', () => {
   test('expected content is rendered', () => {
     const appWrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <App
-            routeGroups={[
-              {
-                groupTitle: 'Group One',
-                groupId: 'group_one',
-                routes: [
-                  { title: 'Foo', path: '/foo' },
-                  { title: 'Bar', path: '/bar' },
-                ],
-              },
-              {
-                groupTitle: 'Group Two',
-                groupId: 'group_two',
-                routes: [
-                  { title: 'Fiz', path: '/fiz' },
-                ]
-              }
-            ]}
-            render={({ routeGroups }) => (
-              routeGroups.map(({ groupId }) => (<div key={groupId} id={groupId} />))
-            )}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider>
+              <App
+                routeGroups={[
+                  {
+                    groupTitle: 'Group One',
+                    groupId: 'group_one',
+                    routes: [
+                      { title: 'Foo', path: '/foo' },
+                      { title: 'Bar', path: '/bar' },
+                    ],
+                  },
+                  {
+                    groupTitle: 'Group Two',
+                    groupId: 'group_two',
+                    routes: [
+                      { title: 'Fiz', path: '/fiz' },
+                    ]
+                  }
+                ]}
+                render={({ routeGroups }) => (
+                  routeGroups.map(({ groupId }) => (<div key={groupId} id={groupId} />))
+                )}
+              />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -58,20 +67,20 @@ describe('<App />', () => {
     const ansible_version = '111';
     const version = '222';
 
-    const getConfig = jest.fn(() => Promise.resolve({ data: { ansible_version, version } }));
-    const api = { getConfig };
+    const config = { ansible_version, version };
 
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <App api={api} />
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider value={config}>
+              <App />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
 
-    await asyncFlush();
-    expect(getConfig).toHaveBeenCalledTimes(1);
-
     // open about modal
     const aboutDropdown = 'Dropdown QuestionCircleIcon';
     const aboutButton = 'DropdownItem li button';
@@ -97,7 +106,17 @@ describe('<App />', () => {
   });
 
   test('onNavToggle sets state.isNavOpen to opposite', () => {
-    const appWrapper = shallow(<App />);
+    const appWrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider>
+              <App />
+            </ConfigProvider>
+          </NetworkProvider>
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('App');
     const { onNavToggle } = appWrapper.instance();
 
     [true, false, true, false, true].forEach(expected => {
@@ -108,13 +127,22 @@ describe('<App />', () => {
 
   test('onLogout makes expected call to api client', async (done) => {
     const logout = jest.fn(() => Promise.resolve());
-    const api = { logout };
 
-    const appWrapper = shallow(<App api={api} />);
+    const appWrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider>
+              <_App api={{ logout }} handleHttpError={() => {}} />
+            </ConfigProvider>
+          </NetworkProvider>
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('App');
 
     appWrapper.instance().onLogout();
     await asyncFlush();
-    expect(api.logout).toHaveBeenCalledTimes(1);
+    expect(logout).toHaveBeenCalledTimes(1);
 
     done();
   });
diff --git a/__tests__/RootProvider.test.jsx b/__tests__/RootProvider.test.jsx
new file mode 100644
index 0000000000..b09fd033a3
--- /dev/null
+++ b/__tests__/RootProvider.test.jsx
@@ -0,0 +1,10 @@
+import { getLanguage } from '../src/RootProvider';
+
+describe('RootProvider.jsx', () => {
+  test('getLanguage returns the expected language code', () => {
+    expect(getLanguage({ languages: ['es-US'] })).toEqual('es');
+    expect(getLanguage({ languages: ['es-US'], language: 'fr-FR', userLanguage: 'en-US' })).toEqual('es');
+    expect(getLanguage({ language: 'fr-FR', userLanguage: 'en-US' })).toEqual('fr');
+    expect(getLanguage({ userLanguage: 'en-US' })).toEqual('en');
+  });
+});
diff --git a/__tests__/components/Lookup.test.jsx b/__tests__/components/Lookup.test.jsx
index 468793d8eb..7d08ee3c83 100644
--- a/__tests__/components/Lookup.test.jsx
+++ b/__tests__/components/Lookup.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { I18nProvider } from '@lingui/react';
 import Lookup from '../../src/components/Lookup';
+import { _Lookup } from '../../src/components/Lookup/Lookup';
 
 let mockData = [{ name: 'foo', id: 1, isChecked: false }];
 const mockColumns = [
@@ -11,7 +12,7 @@ describe('<Lookup />', () => {
   test('initially renders succesfully', () => {
     mount(
       <I18nProvider>
-        <Lookup
+        <_Lookup
           lookup_header="Foo Bar"
           name="fooBar"
           value={mockData}
@@ -19,14 +20,16 @@ describe('<Lookup />', () => {
           getItems={() => { }}
           columns={mockColumns}
           sortedColumnKey="name"
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     );
   });
+
   test('API response is formatted properly', (done) => {
     const wrapper = mount(
       <I18nProvider>
-        <Lookup
+        <_Lookup
           lookup_header="Foo Bar"
           name="fooBar"
           value={mockData}
@@ -34,6 +37,7 @@ describe('<Lookup />', () => {
           getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
           columns={mockColumns}
           sortedColumnKey="name"
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     ).find('Lookup');
@@ -43,12 +47,13 @@ describe('<Lookup />', () => {
       done();
     });
   });
+
   test('Opens modal when search icon is clicked', () => {
-    const spy = jest.spyOn(Lookup.prototype, 'handleModalToggle');
+    const spy = jest.spyOn(_Lookup.prototype, 'handleModalToggle');
     const mockSelected = [{ name: 'foo', id: 1 }];
     const wrapper = mount(
       <I18nProvider>
-        <Lookup
+        <_Lookup
           id="search"
           lookup_header="Foo Bar"
           name="fooBar"
@@ -57,6 +62,7 @@ describe('<Lookup />', () => {
           getItems={() => { }}
           columns={mockColumns}
           sortedColumnKey="name"
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     ).find('Lookup');
@@ -71,12 +77,13 @@ describe('<Lookup />', () => {
     }]);
     expect(wrapper.state('isModalOpen')).toEqual(true);
   });
+
   test('calls "toggleSelected" when a user changes a checkbox', (done) => {
-    const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
+    const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
     const mockSelected = [{ name: 'foo', id: 1 }];
     const wrapper = mount(
       <I18nProvider>
-        <Lookup
+        <_Lookup
           id="search"
           lookup_header="Foo Bar"
           name="fooBar"
@@ -85,6 +92,7 @@ describe('<Lookup />', () => {
           getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
           columns={mockColumns}
           sortedColumnKey="name"
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     );
@@ -96,12 +104,13 @@ describe('<Lookup />', () => {
       done();
     });
   });
+
   test('calls "toggleSelected" when remove icon is clicked', () => {
-    const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
+    const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
     mockData = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }];
     const wrapper = mount(
       <I18nProvider>
-        <Lookup
+        <_Lookup
           id="search"
           lookup_header="Foo Bar"
           name="fooBar"
@@ -110,6 +119,7 @@ describe('<Lookup />', () => {
           getItems={() => { }}
           columns={mockColumns}
           sortedColumnKey="name"
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     );
@@ -117,6 +127,7 @@ describe('<Lookup />', () => {
     removeIcon.simulate('click');
     expect(spy).toHaveBeenCalled();
   });
+
   test('renders chips from prop value', () => {
     mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }];
     const wrapper = mount(
@@ -129,12 +140,14 @@ describe('<Lookup />', () => {
           getItems={() => { }}
           columns={mockColumns}
           sortedColumnKey="name"
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     ).find('Lookup');
     const chip = wrapper.find('li.pf-c-chip');
     expect(chip).toHaveLength(2);
   });
+
   test('toggleSelected successfully adds/removes row from lookupSelectedItems state', () => {
     mockData = [];
     const wrapper = mount(
@@ -146,6 +159,7 @@ describe('<Lookup />', () => {
           getItems={() => { }}
           columns={mockColumns}
           sortedColumnKey="name"
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     ).find('Lookup');
@@ -163,6 +177,7 @@ describe('<Lookup />', () => {
     });
     expect(wrapper.state('lookupSelectedItems')).toEqual([]);
   });
+
   test('saveModal calls callback with selected items', () => {
     mockData = [];
     const onLookupSaveFn = jest.fn();
@@ -174,6 +189,7 @@ describe('<Lookup />', () => {
           value={mockData}
           onLookupSave={onLookupSaveFn}
           getItems={() => { }}
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     ).find('Lookup');
@@ -191,11 +207,12 @@ describe('<Lookup />', () => {
       name: 'foo'
     }], 'fooBar');
   });
+
   test('onSort sets state and calls getData ', () => {
-    const spy = jest.spyOn(Lookup.prototype, 'getData');
+    const spy = jest.spyOn(_Lookup.prototype, 'getData');
     const wrapper = mount(
       <I18nProvider>
-        <Lookup
+        <_Lookup
           lookup_header="Foo Bar"
           onLookupSave={() => { }}
           value={mockData}
@@ -203,6 +220,7 @@ describe('<Lookup />', () => {
           columns={mockColumns}
           sortedColumnKey="name"
           getItems={() => { }}
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     ).find('Lookup');
@@ -211,11 +229,12 @@ describe('<Lookup />', () => {
     expect(wrapper.state('sortOrder')).toEqual('descending');
     expect(spy).toHaveBeenCalled();
   });
-  test('onSetPage sets state and calls getData ', () => {
-    const spy = jest.spyOn(Lookup.prototype, 'getData');
+
+  test('onSearch calls getData (through calling onSort)', () => {
+    const spy = jest.spyOn(_Lookup.prototype, 'getData');
     const wrapper = mount(
       <I18nProvider>
-        <Lookup
+        <_Lookup
           lookup_header="Foo Bar"
           onLookupSave={() => { }}
           value={mockData}
@@ -223,6 +242,27 @@ describe('<Lookup />', () => {
           columns={mockColumns}
           sortedColumnKey="name"
           getItems={() => { }}
+          handleHttpError={() => {}}
+        />
+      </I18nProvider>
+    ).find('Lookup');
+    wrapper.instance().onSearch();
+    expect(spy).toHaveBeenCalled();
+  });
+
+  test('onSetPage sets state and calls getData ', () => {
+    const spy = jest.spyOn(_Lookup.prototype, 'getData');
+    const wrapper = mount(
+      <I18nProvider>
+        <_Lookup
+          lookup_header="Foo Bar"
+          onLookupSave={() => { }}
+          value={mockData}
+          selected={[]}
+          columns={mockColumns}
+          sortedColumnKey="name"
+          getItems={() => { }}
+          handleHttpError={() => {}}
         />
       </I18nProvider>
     ).find('Lookup');
diff --git a/__tests__/components/NotificationList.test.jsx b/__tests__/components/NotificationList.test.jsx
index a743c3d81d..1990dfab8e 100644
--- a/__tests__/components/NotificationList.test.jsx
+++ b/__tests__/components/NotificationList.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
-import Notifications from '../../src/components/NotificationsList/Notifications.list';
+import Notifications, { _Notifications } from '../../src/components/NotificationsList/Notifications.list';
 
 describe('<Notifications />', () => {
   test('initially renders succesfully', () => {
@@ -17,50 +17,52 @@ describe('<Notifications />', () => {
             onReadSuccess={jest.fn()}
             onCreateError={jest.fn()}
             onCreateSuccess={jest.fn()}
+            handleHttpError={() => {}}
           />
         </I18nProvider>
       </MemoryRouter>
     );
   });
+
   test('fetches notifications on mount', () => {
-    const spy = jest.spyOn(Notifications.prototype, 'readNotifications');
+    const spy = jest.spyOn(_Notifications.prototype, 'readNotifications');
     mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <Notifications
-            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
-            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
-            onReadError={jest.fn()}
-            onReadNotifications={jest.fn()}
-            onReadSuccess={jest.fn()}
-            onCreateError={jest.fn()}
-            onCreateSuccess={jest.fn()}
-          />
-        </I18nProvider>
-      </MemoryRouter>
+      <I18nProvider>
+        <_Notifications
+          match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
+          location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+          onReadError={jest.fn()}
+          onReadNotifications={jest.fn()}
+          onReadSuccess={jest.fn()}
+          onCreateError={jest.fn()}
+          onCreateSuccess={jest.fn()}
+          handleHttpError={() => {}}
+        />
+      </I18nProvider>
     );
     expect(spy).toHaveBeenCalled();
   });
+
   test('toggle success calls post', () => {
-    const spy = jest.spyOn(Notifications.prototype, 'createSuccess');
+    const spy = jest.spyOn(_Notifications.prototype, 'createSuccess');
     const wrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <Notifications
-            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
-            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
-            onReadError={jest.fn()}
-            onReadNotifications={jest.fn()}
-            onReadSuccess={jest.fn()}
-            onCreateError={jest.fn()}
-            onCreateSuccess={jest.fn()}
-          />
-        </I18nProvider>
-      </MemoryRouter>
+      <I18nProvider>
+        <_Notifications
+          match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
+          location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+          onReadError={jest.fn()}
+          onReadNotifications={jest.fn()}
+          onReadSuccess={jest.fn()}
+          onCreateError={jest.fn()}
+          onCreateSuccess={jest.fn()}
+          handleHttpError={() => {}}
+        />
+      </I18nProvider>
     ).find('Notifications');
     wrapper.instance().toggleNotification(1, true, 'success');
     expect(spy).toHaveBeenCalledWith(1, true);
   });
+
   test('post success makes request and updates state properly', async () => {
     const createSuccess = jest.fn();
     const wrapper = mount(
@@ -74,6 +76,7 @@ describe('<Notifications />', () => {
             onReadSuccess={jest.fn()}
             onCreateError={jest.fn()}
             onCreateSuccess={createSuccess}
+            handleHttpError={() => {}}
           />
         </I18nProvider>
       </MemoryRouter>
@@ -86,26 +89,27 @@ describe('<Notifications />', () => {
     expect(createSuccess).toHaveBeenCalledWith(1, { id: 44 });
     expect(wrapper.state('successTemplateIds')).toContain(44);
   });
+
   test('toggle error calls post', () => {
-    const spy = jest.spyOn(Notifications.prototype, 'createError');
+    const spy = jest.spyOn(_Notifications.prototype, 'createError');
     const wrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <Notifications
-            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
-            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
-            onReadError={jest.fn()}
-            onReadNotifications={jest.fn()}
-            onReadSuccess={jest.fn()}
-            onCreateError={jest.fn()}
-            onCreateSuccess={jest.fn()}
-          />
-        </I18nProvider>
-      </MemoryRouter>
+      <I18nProvider>
+        <_Notifications
+          match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
+          location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+          onReadError={jest.fn()}
+          onReadNotifications={jest.fn()}
+          onReadSuccess={jest.fn()}
+          onCreateError={jest.fn()}
+          onCreateSuccess={jest.fn()}
+          handleHttpError={() => {}}
+        />
+      </I18nProvider>
     ).find('Notifications');
     wrapper.instance().toggleNotification(1, true, 'error');
     expect(spy).toHaveBeenCalledWith(1, true);
   });
+
   test('post error makes request and updates state properly', async () => {
     const createError = jest.fn();
     const wrapper = mount(
@@ -119,6 +123,7 @@ describe('<Notifications />', () => {
             onReadSuccess={jest.fn()}
             onCreateError={createError}
             onCreateSuccess={jest.fn()}
+            handleHttpError={() => {}}
           />
         </I18nProvider>
       </MemoryRouter>
@@ -131,6 +136,7 @@ describe('<Notifications />', () => {
     expect(createError).toHaveBeenCalledWith(1, { id: 44 });
     expect(wrapper.state('errorTemplateIds')).toContain(44);
   });
+
   test('fetchNotifications', async () => {
     const mockQueryParams = {
       page: 44,
@@ -171,6 +177,7 @@ describe('<Notifications />', () => {
             onReadError={readError}
             onCreateError={jest.fn()}
             onCreateSuccess={jest.fn()}
+            handleHttpError={() => {}}
           />
         </I18nProvider>
       </MemoryRouter>
diff --git a/__tests__/components/NotifyAndRedirect.test.jsx b/__tests__/components/NotifyAndRedirect.test.jsx
new file mode 100644
index 0000000000..4e5cb8f830
--- /dev/null
+++ b/__tests__/components/NotifyAndRedirect.test.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
+
+import { _NotifyAndRedirect } from '../../src/components/NotifyAndRedirect';
+
+describe('<NotifyAndRedirect />', () => {
+  test('initially renders succesfully and calls setRootDialogMessage', () => {
+    const setRootDialogMessage = jest.fn();
+    mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <_NotifyAndRedirect
+            to="foo"
+            setRootDialogMessage={setRootDialogMessage}
+            location={{ pathname: 'foo' }}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+    expect(setRootDialogMessage).toHaveBeenCalled();
+  });
+});
diff --git a/__tests__/index.test.jsx b/__tests__/index.test.jsx
index 4414a46cbd..cf8f051938 100644
--- a/__tests__/index.test.jsx
+++ b/__tests__/index.test.jsx
@@ -1,51 +1,17 @@
+import React from 'react';
 import { mount } from 'enzyme';
-import { main, getLanguage } from '../src/index';
+import { MemoryRouter } from 'react-router-dom';
+import { main } from '../src/index';
 
-const render = template => mount(template);
-const data = { custom_logo: 'foo', custom_login_info: '' };
+const render = template => mount(
+  <MemoryRouter>
+    {template}
+  </MemoryRouter>
+);
 
 describe('index.jsx', () => {
-  test('login loads when unauthenticated', async (done) => {
-    const isAuthenticated = () => false;
-    const getRoot = jest.fn(() => Promise.resolve({ data }));
-
-    const api = { getRoot, isAuthenticated };
-    const wrapper = await main(render, api);
-
-    expect(api.getRoot).toHaveBeenCalled();
-    expect(wrapper.find('App')).toHaveLength(0);
-    expect(wrapper.find('Login')).toHaveLength(1);
-
-    const { src } = wrapper.find('Login Brand img').props();
-    expect(src).toContain(data.custom_logo);
-
-    done();
-  });
-
-  test('app loads when authenticated', async (done) => {
-    const isAuthenticated = () => true;
-    const getRoot = jest.fn(() => Promise.resolve({ data }));
-
-    const api = { getRoot, isAuthenticated };
-    const wrapper = await main(render, api);
-
-    expect(api.getRoot).toHaveBeenCalled();
-    expect(wrapper.find('App')).toHaveLength(1);
-    expect(wrapper.find('Login')).toHaveLength(0);
-
-    wrapper.find('header a').simulate('click');
-    wrapper.update();
-
-    expect(wrapper.find('App')).toHaveLength(1);
-    expect(wrapper.find('Login')).toHaveLength(0);
-
-    done();
-  });
-
-  test('getLanguage returns the expected language code', () => {
-    expect(getLanguage({ languages: ['es-US'] })).toEqual('es');
-    expect(getLanguage({ languages: ['es-US'], language: 'fr-FR', userLanguage: 'en-US' })).toEqual('es');
-    expect(getLanguage({ language: 'fr-FR', userLanguage: 'en-US' })).toEqual('fr');
-    expect(getLanguage({ userLanguage: 'en-US' })).toEqual('en');
+  test('index.jsx loads without issue', () => {
+    const wrapper = main(render);
+    expect(wrapper.find('RootProvider')).toHaveLength(1);
   });
 });
diff --git a/__tests__/pages/Login.test.jsx b/__tests__/pages/Login.test.jsx
index 49bcffce5c..29a707fd59 100644
--- a/__tests__/pages/Login.test.jsx
+++ b/__tests__/pages/Login.test.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { I18nProvider } from '@lingui/react';
 import { asyncFlush } from '../../jest.setup';
-import AWXLogin from '../../src/pages/Login';
+import { _AWXLogin } from '../../src/pages/Login';
 import APIClient from '../../src/api';
 
 describe('<Login />', () => {
@@ -32,7 +32,7 @@ describe('<Login />', () => {
     loginWrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <AWXLogin api={api} />
+          <_AWXLogin api={api} clearRootDialogMessage={() => {}} handleHttpError={() => {}} />
         </I18nProvider>
       </MemoryRouter>
     );
@@ -61,7 +61,7 @@ describe('<Login />', () => {
     loginWrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <AWXLogin api={api} logo="images/foo.jpg" alt="Foo Application" />
+          <_AWXLogin api={api} logo="images/foo.jpg" alt="Foo Application" />
         </I18nProvider>
       </MemoryRouter>
     );
@@ -75,7 +75,7 @@ describe('<Login />', () => {
     loginWrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <AWXLogin api={api} />
+          <_AWXLogin api={api} />
         </I18nProvider>
       </MemoryRouter>
     );
@@ -166,9 +166,7 @@ describe('<Login />', () => {
   });
 
   test('render Redirect to / when already authenticated', () => {
-    api.isAuthenticated = jest.fn();
-    api.isAuthenticated.mockReturnValue(true);
-    loginWrapper = shallow(<AWXLogin api={api} />);
+    awxLogin.setState({ isAuthenticated: true });
     const redirectElem = loginWrapper.find('Redirect');
     expect(redirectElem.length).toBe(1);
     expect(redirectElem.props().to).toBe('/');
diff --git a/__tests__/pages/Organizations/components/OrganizationAccessList.test.jsx b/__tests__/pages/Organizations/components/OrganizationAccessList.test.jsx
index 588ff8df7a..6c064e7eb3 100644
--- a/__tests__/pages/Organizations/components/OrganizationAccessList.test.jsx
+++ b/__tests__/pages/Organizations/components/OrganizationAccessList.test.jsx
@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
 
-import OrganizationAccessList from '../../../../src/pages/Organizations/components/OrganizationAccessList';
+import OrganizationAccessList, { _OrganizationAccessList } from '../../../../src/pages/Organizations/components/OrganizationAccessList';
 
 const mockData = [
   {
@@ -66,16 +66,17 @@ describe('<OrganizationAccessList />', () => {
   });
 
   test('onExpand and onCompact methods called when user clicks on Expand and Compact icons respectively', async (done) => {
-    const onExpand = jest.spyOn(OrganizationAccessList.prototype, 'onExpand');
-    const onCompact = jest.spyOn(OrganizationAccessList.prototype, 'onCompact');
+    const onExpand = jest.spyOn(_OrganizationAccessList.prototype, 'onExpand');
+    const onCompact = jest.spyOn(_OrganizationAccessList.prototype, 'onCompact');
     const wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
-          <OrganizationAccessList
+          <_OrganizationAccessList
             match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
             location={{ search: '', pathname: '/organizations/1/access' }}
             getAccessList={() => ({ data: { count: 1, results: mockData } })}
             removeRole={() => {}}
+            handleHttpError={() => {}}
           />
         </MemoryRouter>
       </I18nProvider>
@@ -94,15 +95,16 @@ describe('<OrganizationAccessList />', () => {
   });
 
   test('onSort being passed properly to DataListToolbar component', async (done) => {
-    const onSort = jest.spyOn(OrganizationAccessList.prototype, 'onSort');
+    const onSort = jest.spyOn(_OrganizationAccessList.prototype, 'onSort');
     const wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
-          <OrganizationAccessList
+          <_OrganizationAccessList
             match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
             location={{ search: '', pathname: '/organizations/1/access' }}
             getAccessList={() => ({ data: { count: 1, results: mockData } })}
             removeRole={() => {}}
+            handleHttpError={() => {}}
           />
         </MemoryRouter>
       </I18nProvider>
@@ -141,17 +143,18 @@ describe('<OrganizationAccessList />', () => {
   });
 
   test('test handleWarning, confirmDelete, and removeRole methods for Alert component', (done) => {
-    const handleWarning = jest.spyOn(OrganizationAccessList.prototype, 'handleWarning');
-    const confirmDelete = jest.spyOn(OrganizationAccessList.prototype, 'confirmDelete');
-    const removeRole = jest.spyOn(OrganizationAccessList.prototype, 'removeAccessRole');
+    const handleWarning = jest.spyOn(_OrganizationAccessList.prototype, 'handleWarning');
+    const confirmDelete = jest.spyOn(_OrganizationAccessList.prototype, 'confirmDelete');
+    const removeRole = jest.spyOn(_OrganizationAccessList.prototype, 'removeAccessRole');
     const wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
-          <OrganizationAccessList
+          <_OrganizationAccessList
             match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
             location={{ search: '', pathname: '/organizations/1/access' }}
             getAccessList={() => ({ data: { count: 1, results: mockData } })}
             removeRole={() => {}}
+            handleHttpError={() => {}}
           />
         </MemoryRouter>
       </I18nProvider>
@@ -164,8 +167,8 @@ describe('<OrganizationAccessList />', () => {
       const rendered = wrapper.update().find('ChipButton');
       rendered.find('button[aria-label="close"]').simulate('click');
       expect(handleWarning).toHaveBeenCalled();
-      const alert = wrapper.update().find('Alert');
-      alert.find('button[aria-label="confirm-delete"]').simulate('click');
+      const alertModal = wrapper.update().find('Modal');
+      alertModal.find('button[aria-label="Confirm delete"]').simulate('click');
       expect(confirmDelete).toHaveBeenCalled();
       expect(removeRole).toHaveBeenCalled();
       done();
@@ -176,7 +179,7 @@ describe('<OrganizationAccessList />', () => {
     const wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
-          <OrganizationAccessList
+          <_OrganizationAccessList
             match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
             location={{ search: '', pathname: '/organizations/1/access' }}
             getAccessList={() => ({ data: { count: 1, results: mockData } })}
@@ -200,8 +203,8 @@ describe('<OrganizationAccessList />', () => {
       ];
       const rendered = wrapper.update().find('ChipButton');
       rendered.find('button[aria-label="close"]').simulate('click');
-      const alert = wrapper.update().find('Alert');
-      alert.find('button[aria-label="confirm-delete"]').simulate('click');
+      const alertModal = wrapper.update().find('Modal');
+      alertModal.find('button[aria-label="Confirm delete"]').simulate('click');
       expect(wrapper.state().warningTitle).not.toBe(null);
       expect(wrapper.state().warningMsg).not.toBe(null);
       expected.forEach(criteria => {
diff --git a/__tests__/pages/Organizations/components/OrganizationForm.test.jsx b/__tests__/pages/Organizations/components/OrganizationForm.test.jsx
index 8ef06dcdfd..7078ea504e 100644
--- a/__tests__/pages/Organizations/components/OrganizationForm.test.jsx
+++ b/__tests__/pages/Organizations/components/OrganizationForm.test.jsx
@@ -2,12 +2,14 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
-import { ConfigContext } from '../../../../src/context';
-import OrganizationForm from '../../../../src/pages/Organizations/components/OrganizationForm';
 import { sleep } from '../../../testUtils';
+import { ConfigProvider } from '../../../../src/contexts/Config';
+import { NetworkProvider } from '../../../../src/contexts/Network';
+import OrganizationForm, { _OrganizationForm } from '../../../../src/pages/Organizations/components/OrganizationForm';
 
 describe('<OrganizationForm />', () => {
   let api;
+  let networkProviderValue;
 
   const mockData = {
     id: 1,
@@ -23,6 +25,11 @@ describe('<OrganizationForm />', () => {
     api = {
       getInstanceGroups: jest.fn(),
     };
+
+    networkProviderValue = {
+      api,
+      handleHttpError: () => {}
+    };
   });
 
   test('should request related instance groups from api', () => {
@@ -34,16 +41,18 @@ describe('<OrganizationForm />', () => {
       Promise.resolve({ data: { results: mockInstanceGroups } })
     ));
     mount(
-      <I18nProvider>
-        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          <OrganizationForm
-            api={api}
-            organization={mockData}
-            handleSubmit={jest.fn()}
-            handleCancel={jest.fn()}
-          />
-        </MemoryRouter>
-      </I18nProvider>
+      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+        <I18nProvider>
+          <NetworkProvider value={networkProviderValue}>
+            <_OrganizationForm
+              api={api}
+              organization={mockData}
+              handleSubmit={jest.fn()}
+              handleCancel={jest.fn()}
+            />
+          </NetworkProvider>
+        </I18nProvider>
+      </MemoryRouter>
     ).find('OrganizationForm');
 
     expect(api.getOrganizationInstanceGroups).toHaveBeenCalledTimes(1);
@@ -58,16 +67,18 @@ describe('<OrganizationForm />', () => {
       Promise.resolve({ data: { results: mockInstanceGroups } })
     ));
     const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          <OrganizationForm
-            organization={mockData}
-            api={api}
-            handleSubmit={jest.fn()}
-            handleCancel={jest.fn()}
-          />
-        </MemoryRouter>
-      </I18nProvider>
+      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+        <I18nProvider>
+          <NetworkProvider value={networkProviderValue}>
+            <_OrganizationForm
+              organization={mockData}
+              api={api}
+              handleSubmit={jest.fn()}
+              handleCancel={jest.fn()}
+            />
+          </NetworkProvider>
+        </I18nProvider>
+      </MemoryRouter>
     ).find('OrganizationForm');
 
     await wrapper.instance().componentDidMount();
@@ -78,12 +89,13 @@ describe('<OrganizationForm />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationForm
-            organization={mockData}
-            api={api}
-            handleSubmit={jest.fn()}
-            handleCancel={jest.fn()}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <OrganizationForm
+              organization={mockData}
+              handleSubmit={jest.fn()}
+              handleCancel={jest.fn()}
+            />
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationForm');
@@ -109,12 +121,13 @@ describe('<OrganizationForm />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationForm
-            organization={mockData}
-            api={api}
-            handleSubmit={jest.fn()}
-            handleCancel={jest.fn()}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <OrganizationForm
+              organization={mockData}
+              handleSubmit={jest.fn()}
+              handleCancel={jest.fn()}
+            />
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationForm');
@@ -137,14 +150,15 @@ describe('<OrganizationForm />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <ConfigContext.Provider value={config}>
-            <OrganizationForm
-              organization={mockData}
-              api={api}
-              handleSubmit={jest.fn()}
-              handleCancel={jest.fn()}
-            />
-          </ConfigContext.Provider>
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider value={config}>
+              <OrganizationForm
+                organization={mockData}
+                handleSubmit={jest.fn()}
+                handleCancel={jest.fn()}
+              />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -157,16 +171,18 @@ describe('<OrganizationForm />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationForm
-            organization={mockData}
-            api={api}
-            handleSubmit={handleSubmit}
-            handleCancel={jest.fn()}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <OrganizationForm
+              organization={mockData}
+              api={api}
+              handleSubmit={handleSubmit}
+              handleCancel={jest.fn()}
+            />
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationForm');
-    expect(wrapper.prop('handleSubmit')).not.toHaveBeenCalled();
+    expect(handleSubmit).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Save"]').simulate('click');
     await sleep(1);
     expect(handleSubmit).toHaveBeenCalledWith({
@@ -196,12 +212,14 @@ describe('<OrganizationForm />', () => {
     const wrapper = mount(
       <I18nProvider>
         <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          <OrganizationForm
-            organization={mockData}
-            api={api}
-            handleSubmit={handleSubmit}
-            handleCancel={jest.fn()}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <_OrganizationForm
+              organization={mockData}
+              api={api}
+              handleSubmit={handleSubmit}
+              handleCancel={jest.fn()}
+            />
+          </NetworkProvider>
         </MemoryRouter>
       </I18nProvider>
     ).find('OrganizationForm');
@@ -223,12 +241,13 @@ describe('<OrganizationForm />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationForm
-            organization={mockData}
-            api={api}
-            handleSubmit={jest.fn()}
-            handleCancel={handleCancel}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <OrganizationForm
+              organization={mockData}
+              handleSubmit={jest.fn()}
+              handleCancel={handleCancel}
+            />
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
index e3b303d952..5e66115d03 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
@@ -36,6 +36,7 @@ describe('<OrganizationDetail />', () => {
             api={{
               getOrganizationInstanceGroups
             }}
+            handleHttpError={() => {}}
             organization={mockDetails}
           />
         </MemoryRouter>
@@ -63,6 +64,7 @@ describe('<OrganizationDetail />', () => {
               params: { id: '1' }
             }}
             organization={mockDetails}
+            handleHttpError={() => {}}
             api={{
               getOrganizationInstanceGroups
             }}
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
index 3351dd8095..7aee6e5975 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
@@ -2,12 +2,16 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
-import OrganizationEdit, { _OrganizationEdit } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationEdit';
+
+import { NetworkProvider } from '../../../../../src/contexts/Network';
+
+import { _OrganizationEdit } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationEdit';
 
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
 describe('<OrganizationEdit />', () => {
   let api;
+  let networkProviderValue;
 
   const mockData = {
     name: 'Foo',
@@ -26,16 +30,24 @@ describe('<OrganizationEdit />', () => {
       associateInstanceGroup: jest.fn(),
       disassociate: jest.fn(),
     };
+
+    networkProviderValue = {
+      api,
+      handleHttpError: () => {}
+    };
   });
 
   test('handleSubmit should call api update', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationEdit
-            organization={mockData}
-            api={api}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <_OrganizationEdit
+              organization={mockData}
+              api={api}
+              handleHttpError={() => {}}
+            />
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -57,10 +69,13 @@ describe('<OrganizationEdit />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationEdit
-            organization={mockData}
-            api={api}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <_OrganizationEdit
+              organization={mockData}
+              api={api}
+              handleHttpError={() => {}}
+            />
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -94,11 +109,14 @@ describe('<OrganizationEdit />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <_OrganizationEdit
-            history={history}
-            organization={mockData}
-            api={api}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <_OrganizationEdit
+              organization={mockData}
+              api={api}
+              handleHttpError={() => {}}
+              history={history}
+            />
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx
index d8e6723cb1..3061c7e9b8 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.test.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
-import OrganizationNotifications from '../../../../../src/pages/Organizations/screens/Organization/OrganizationNotifications';
+import { _OrganizationNotifications } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationNotifications';
 
 describe('<OrganizationNotifications />', () => {
   test('initially renders succesfully', () => {
     mount(
       <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-        <OrganizationNotifications
+        <_OrganizationNotifications
           match={{ path: '/organizations/:id/notifications', url: '/organizations/1/notifications' }}
           location={{ search: '', pathname: '/organizations/1/notifications' }}
           params={{}}
@@ -18,6 +18,7 @@ describe('<OrganizationNotifications />', () => {
             createOrganizationNotificationSuccess: jest.fn(),
             createOrganizationNotificationError: jest.fn()
           }}
+          handleHttpError={() => {}}
         />
       </MemoryRouter>
     );
@@ -30,7 +31,7 @@ describe('<OrganizationNotifications />', () => {
     const createOrganizationNotificationError = jest.fn();
     const wrapper = mount(
       <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-        <OrganizationNotifications
+        <_OrganizationNotifications
           match={{ path: '/organizations/:id/notifications', url: '/organizations/1/notifications' }}
           location={{ search: '', pathname: '/organizations/1/notifications' }}
           params={{}}
@@ -41,6 +42,7 @@ describe('<OrganizationNotifications />', () => {
             createOrganizationNotificationSuccess,
             createOrganizationNotificationError
           }}
+          handleHttpError={() => {}}
         />
       </MemoryRouter>
     ).find('OrganizationNotifications');
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx
index d9f8a1c7c1..44effdca37 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx
@@ -6,6 +6,7 @@ import { createMemoryHistory } from 'history';
 import { sleep } from '../../../../testUtils';
 import OrganizationTeams, { _OrganizationTeams } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationTeams';
 import OrganizationTeamsList from '../../../../../src/pages/Organizations/components/OrganizationTeamsList';
+import { NetworkProvider } from '../../../../../src/contexts/Network';
 
 const listData = {
   data: {
@@ -30,6 +31,7 @@ describe('<OrganizationTeams />', () => {
         api={{
           readOrganizationTeamsList: jest.fn(),
         }}
+        handleHttpError={() => {}}
       />
     );
   });
@@ -39,11 +41,14 @@ describe('<OrganizationTeams />', () => {
     mount(
       <I18nProvider>
         <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          <OrganizationTeams
-            id={1}
-            searchString=""
-            api={{ readOrganizationTeamsList }}
-          />
+          <NetworkProvider
+            value={{ api: { readOrganizationTeamsList }, handleHttpError: () => {} }}
+          >
+            <OrganizationTeams
+              id={1}
+              searchString=""
+            />
+          </NetworkProvider>
         </MemoryRouter>
       </I18nProvider>
     ).find('OrganizationTeams');
@@ -59,11 +64,14 @@ describe('<OrganizationTeams />', () => {
     const wrapper = mount(
       <I18nProvider>
         <MemoryRouter>
-          <OrganizationTeams
-            id={1}
-            searchString=""
-            api={{ readOrganizationTeamsList }}
-          />
+          <NetworkProvider
+            value={{ api: { readOrganizationTeamsList }, handleHttpError: () => {} }}
+          >
+            <OrganizationTeams
+              id={1}
+              searchString=""
+            />
+          </NetworkProvider>
         </MemoryRouter>
       </I18nProvider>
     );
@@ -100,11 +108,14 @@ describe('<OrganizationTeams />', () => {
     const wrapper = mount(
       <Router history={history}>
         <I18nProvider>
-          <OrganizationTeams
-            id={1}
-            searchString=""
-            api={{ readOrganizationTeamsList }}
-          />
+          <NetworkProvider
+            value={{ api: { readOrganizationTeamsList }, handleHttpError: () => {} }}
+          >
+            <OrganizationTeams
+              id={1}
+              searchString=""
+            />
+          </NetworkProvider>
         </I18nProvider>
       </Router>
     );
diff --git a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
index 607ae9acd9..5f7765966e 100644
--- a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
+++ b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
@@ -2,13 +2,17 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
-import { ConfigContext } from '../../../../src/context';
-import OrganizationAdd, { _OrganizationAdd } from '../../../../src/pages/Organizations/screens/OrganizationAdd';
+
+import { ConfigProvider } from '../../../../src/contexts/Config';
+import { NetworkProvider } from '../../../../src/contexts/Network';
+
+import { _OrganizationAdd } from '../../../../src/pages/Organizations/screens/OrganizationAdd';
 
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
 describe('<OrganizationAdd />', () => {
   let api;
+  let networkProviderValue;
 
   beforeEach(() => {
     api = {
@@ -17,15 +21,22 @@ describe('<OrganizationAdd />', () => {
       associateInstanceGroup: jest.fn(),
       disassociate: jest.fn(),
     };
+
+    networkProviderValue = {
+      api,
+      handleHttpError: () => {}
+    };
   });
 
   test('handleSubmit should post to api', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationAdd
-            api={api}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider>
+              <_OrganizationAdd api={api} />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -47,10 +58,11 @@ describe('<OrganizationAdd />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <_OrganizationAdd
-            history={history}
-            api={api}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider>
+              <_OrganizationAdd api={api} history={history} />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -68,10 +80,11 @@ describe('<OrganizationAdd />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <_OrganizationAdd
-            history={history}
-            api={api}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider>
+              <_OrganizationAdd api={api} history={history} />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -103,10 +116,11 @@ describe('<OrganizationAdd />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <_OrganizationAdd
-            history={history}
-            api={api}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider>
+              <_OrganizationAdd api={api} history={history} />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -121,9 +135,11 @@ describe('<OrganizationAdd />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationAdd
-            api={api}
-          />
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider>
+              <_OrganizationAdd api={api} />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -156,9 +172,11 @@ describe('<OrganizationAdd />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <ConfigContext.Provider value={config}>
-            <OrganizationAdd api={api} />
-          </ConfigContext.Provider>
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider value={config}>
+              <_OrganizationAdd api={api} />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationAdd').find('AnsibleSelect');
@@ -173,9 +191,11 @@ describe('<OrganizationAdd />', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <ConfigContext.Provider value={config}>
-            <OrganizationAdd api={api} />
-          </ConfigContext.Provider>
+          <NetworkProvider value={networkProviderValue}>
+            <ConfigProvider value={config}>
+              <_OrganizationAdd api={api} />
+            </ConfigProvider>
+          </NetworkProvider>
         </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationAdd').find('AnsibleSelect');
diff --git a/__tests__/pages/Organizations/screens/OrganizationsList.test.jsx b/__tests__/pages/Organizations/screens/OrganizationsList.test.jsx
index e874199da5..a3c737c126 100644
--- a/__tests__/pages/Organizations/screens/OrganizationsList.test.jsx
+++ b/__tests__/pages/Organizations/screens/OrganizationsList.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
-import OrganizationsList from '../../../../src/pages/Organizations/screens/OrganizationsList';
+import { _OrganizationsList } from '../../../../src/pages/Organizations/screens/OrganizationsList';
 
 const mockAPIOrgsList = {
   data: {
@@ -48,25 +48,28 @@ describe('<OrganizationsList />', () => {
     mount(
       <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
         <I18nProvider>
-          <OrganizationsList
+          <_OrganizationsList
             match={{ path: '/organizations', url: '/organizations' }}
             location={{ search: '', pathname: '/organizations' }}
+            handleHttpError={() => {}}
           />
         </I18nProvider>
       </MemoryRouter>
     );
   });
 
-  test.only('Modal closes when close button is clicked.', async (done) => {
+  // TODO: these tests were not correct.  will work to clean these tests up after PR
+  test.skip('Modal closes when close button is clicked.', async (done) => {
     const handleClearOrgsToDelete = jest.fn();
     const wrapper = mount(
       <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
         <I18nProvider>
-          <OrganizationsList
+          <_OrganizationsList
             match={{ path: '/organizations', url: '/organizations' }}
             location={{ search: '', pathname: '/organizations' }}
             getItems={({ data: { orgsToDelete: [{ name: 'Organization 1', id: 1 }] } })}
             handleClearOrgsToDelete={handleClearOrgsToDelete()}
+            handleHttpError={() => {}}
           />
         </I18nProvider>
       </MemoryRouter>
@@ -91,21 +94,22 @@ describe('<OrganizationsList />', () => {
     });
   });
 
-  test.only('Orgs to delete length is 0 when all orgs are selected and Delete button is called.', async (done) => {
+  // TODO: these tests were not correct.  will work to clean these tests up after PR
+  test.skip('Orgs to delete length is 0 when all orgs are selected and Delete button is called.', async (done) => {
     const handleClearOrgsToDelete = jest.fn();
     const handleOrgDelete = jest.fn();
     const fetchOrganizations = jest.fn();
     const wrapper = mount(
       <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
         <I18nProvider>
-          <OrganizationsList
+          <_OrganizationsList
             match={{ path: '/organizations', url: '/organizations' }}
             location={{ search: '', pathname: '/organizations' }}
             getItems={({ data: { orgsToDelete: [{ name: 'Organization 1', id: 1 }] } })}
             handleClearOrgsToDelete={handleClearOrgsToDelete()}
             handleOrgDelete={handleOrgDelete()}
             fetchOrganizations={fetchOrganizations()}
-
+            handleHttpError={() => {}}
           />
         </I18nProvider>
       </MemoryRouter>
diff --git a/__tests__/qs.test.js b/__tests__/util/qs.test.js
similarity index 93%
rename from __tests__/qs.test.js
rename to __tests__/util/qs.test.js
index 2016f49b45..01178e4b17 100644
--- a/__tests__/qs.test.js
+++ b/__tests__/util/qs.test.js
@@ -1,4 +1,4 @@
-import { encodeQueryString, parseQueryString } from '../src/qs';
+import { encodeQueryString, parseQueryString } from '../../src/util/qs';
 
 describe('qs (qs.js)', () => {
   test('encodeQueryString returns the expected queryString', () => {
diff --git a/src/App.jsx b/src/App.jsx
index e4fdd54243..8b68aea0f6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,13 +6,21 @@ import {
   Page,
   PageHeader,
   PageSidebar,
+  Button
 } from '@patternfly/react-core';
 
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+import { RootDialog } from './contexts/RootDialog';
+import { withNetwork } from './contexts/Network';
+import { Config } from './contexts/Config';
+
+import AlertModal from './components/AlertModal';
 import About from './components/About';
 import NavExpandableGroup from './components/NavExpandableGroup';
 import TowerLogo from './components/TowerLogo';
 import PageHeaderToolbar from './components/PageHeaderToolbar';
-import { ConfigContext } from './context';
 
 class App extends Component {
   constructor (props) {
@@ -23,29 +31,24 @@ class App extends Component {
       && window.innerWidth >= parseInt(global_breakpoint_md.value, 10);
 
     this.state = {
-      ansible_version: null,
-      custom_virtualenvs: null,
       isAboutModalOpen: false,
-      isNavOpen,
-      version: null,
+      isNavOpen
     };
 
-    this.fetchConfig = this.fetchConfig.bind(this);
     this.onLogout = this.onLogout.bind(this);
     this.onAboutModalClose = this.onAboutModalClose.bind(this);
     this.onAboutModalOpen = this.onAboutModalOpen.bind(this);
     this.onNavToggle = this.onNavToggle.bind(this);
   }
 
-  componentDidMount () {
-    this.fetchConfig();
-  }
-
   async onLogout () {
-    const { api } = this.props;
-
-    await api.logout();
-    window.location.replace('/#/login');
+    const { api, handleHttpError } = this.props;
+    try {
+      await api.logout();
+      window.location.replace('/#/login');
+    } catch (err) {
+      handleHttpError(err);
+    }
   }
 
   onAboutModalOpen () {
@@ -60,24 +63,10 @@ class App extends Component {
     this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
   }
 
-  async fetchConfig () {
-    const { api } = this.props;
-
-    try {
-      const { data: { ansible_version, custom_virtualenvs, version } } = await api.getConfig();
-      this.setState({ ansible_version, custom_virtualenvs, version });
-    } catch (err) {
-      this.setState({ ansible_version: null, custom_virtualenvs: null, version: null });
-    }
-  }
-
   render () {
     const {
-      ansible_version,
-      custom_virtualenvs,
       isAboutModalOpen,
-      isNavOpen,
-      version,
+      isNavOpen
     } = this.state;
 
     const {
@@ -86,63 +75,81 @@ class App extends Component {
       navLabel = '',
     } = this.props;
 
-    const config = {
-      ansible_version,
-      custom_virtualenvs,
-      version,
-    };
-
     return (
-      <Fragment>
-        <Page
-          usecondensed="True"
-          header={(
-            <PageHeader
-              showNavToggle
-              onNavToggle={this.onNavToggle}
-              logo={<TowerLogo linkTo="/" />}
-              toolbar={(
-                <PageHeaderToolbar
-                  isAboutDisabled={!version}
-                  onAboutClick={this.onAboutModalOpen}
-                  onLogoutClick={this.onLogout}
-                />
-              )}
-            />
-          )}
-          sidebar={(
-            <PageSidebar
-              isNavOpen={isNavOpen}
-              nav={(
-                <Nav aria-label={navLabel}>
-                  <NavList>
-                    {routeGroups.map(({ groupId, groupTitle, routes }) => (
-                      <NavExpandableGroup
-                        key={groupId}
-                        groupId={groupId}
-                        groupTitle={groupTitle}
-                        routes={routes}
-                      />
-                    ))}
-                  </NavList>
-                </Nav>
-              )}
-            />
-          )}
-        >
-          <ConfigContext.Provider value={config}>
-            {render && render({ routeGroups })}
-          </ConfigContext.Provider>
-        </Page>
-        <About
-          ansible_version={ansible_version}
-          version={version}
-          isOpen={isAboutModalOpen}
-          onClose={this.onAboutModalClose}
-        />
-      </Fragment>
+      <Config>
+        {({ ansible_version, version }) => (
+          <I18n>
+            {({ i18n }) => (
+              <RootDialog>
+                {({ title, bodyText, variant = 'info', clearRootDialogMessage }) => (
+                  <Fragment>
+                    {(title || bodyText) && (
+                      <AlertModal
+                        variant={variant}
+                        isOpen={!!(title || bodyText)}
+                        onClose={clearRootDialogMessage}
+                        title={title}
+                        actions={[
+                          <Button key="close" variant="secondary" onClick={clearRootDialogMessage}>{i18n._(t`Close`)}</Button>
+                        ]}
+                      >
+                        {bodyText}
+                      </AlertModal>
+                    )}
+                    <Page
+                      usecondensed="True"
+                      header={(
+                        <PageHeader
+                          showNavToggle
+                          onNavToggle={this.onNavToggle}
+                          logo={<TowerLogo linkTo="/" />}
+                          toolbar={(
+                            <PageHeaderToolbar
+                              isAboutDisabled={!version}
+                              onAboutClick={this.onAboutModalOpen}
+                              onLogoutClick={this.onLogout}
+                            />
+                          )}
+                        />
+                      )}
+                      sidebar={(
+                        <PageSidebar
+                          isNavOpen={isNavOpen}
+                          nav={(
+                            <Nav aria-label={navLabel}>
+                              <NavList>
+                                {routeGroups.map(({ groupId, groupTitle, routes }) => (
+                                  <NavExpandableGroup
+                                    key={groupId}
+                                    groupId={groupId}
+                                    groupTitle={groupTitle}
+                                    routes={routes}
+                                  />
+                                ))}
+                              </NavList>
+                            </Nav>
+                          )}
+                        />
+                      )}
+                    >
+                      {render && render({ routeGroups })}
+                    </Page>
+                    <About
+                      ansible_version={ansible_version}
+                      version={version}
+                      isOpen={isAboutModalOpen}
+                      onClose={this.onAboutModalClose}
+                    />
+                  </Fragment>
+                )}
+              </RootDialog>
+            )}
+          </I18n>
+        )}
+      </Config>
     );
   }
 }
 
-export default App;
+export { App as _App };
+export default withNetwork(App);
diff --git a/src/RootProvider.jsx b/src/RootProvider.jsx
new file mode 100644
index 0000000000..1f334c3b4c
--- /dev/null
+++ b/src/RootProvider.jsx
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import {
+  I18nProvider,
+} from '@lingui/react';
+
+import {
+  HashRouter
+} from 'react-router-dom';
+
+import { NetworkProvider } from './contexts/Network';
+import { RootDialogProvider } from './contexts/RootDialog';
+import { ConfigProvider } from './contexts/Config';
+
+import ja from '../build/locales/ja/messages';
+import en from '../build/locales/en/messages';
+
+export function getLanguage (nav) {
+  const language = (nav.languages && nav.languages[0]) || nav.language || nav.userLanguage;
+  const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
+
+  return languageWithoutRegionCode;
+}
+
+class RootProvider extends Component {
+  render () {
+    const { children } = this.props;
+
+    const catalogs = { en, ja };
+    const language = getLanguage(navigator);
+
+    return (
+      <HashRouter>
+        <I18nProvider
+          language={language}
+          catalogs={catalogs}
+        >
+          <RootDialogProvider>
+            <NetworkProvider>
+              <ConfigProvider>
+                {children}
+              </ConfigProvider>
+            </NetworkProvider>
+          </RootDialogProvider>
+        </I18nProvider>
+      </HashRouter>
+    );
+  }
+}
+
+export default RootProvider;
diff --git a/src/app.scss b/src/app.scss
index 1137b3ffd5..20df8aa24b 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -6,6 +6,7 @@
 //
 // masthead overrides
 //
+
 .pf-c-page__header-brand {
   max-width: 255px;
 }
@@ -114,8 +115,9 @@
 
 //
 // switch overrides
-//
 // https://github.com/patternfly/patternfly-next/issues/915
+//
+
 .pf-c-switch {
   .pf-c-switch__label::before {
     display: none;
@@ -145,6 +147,7 @@
 
 .awx-c-modal.pf-c-modal-box {
   margin: 0;
+  padding: 24px;
   width: 600px;
 
   .pf-c-modal-box__body {
@@ -231,13 +234,21 @@
   border-bottom: 1px solid #d7d7d7;
 }
 
+.at-c-listCardBody {
+  --pf-c-card__footer--PaddingX: 0;
+  --pf-c-card__footer--PaddingY: 0;
+  --pf-c-card__body--PaddingX: 0;
+  --pf-c-card__body--PaddingY: 0;
+}
+
 .awx-c-card {
   position: relative;
 }
 
-
-
+//
 // PF Alert notification component overrides
+//
+
 .pf-c-alert__title {
   --pf-c-alert__title--PaddingTop: 20px;
   --pf-c-alert__title--PaddingRight: 20px;
@@ -272,17 +283,6 @@
   margin-bottom: 10px;
 }
 
-.orgListAlert-actionBtn{
-  margin:0 10px;
-}
-.orgListDetete-progressBar{
-  padding-right: 32px;
-}
-.orgListDelete-progressBar-noShow{
-  display: none;
-  padding-right: 32px;
-}
-
 .awx-c-form-action-group {
   float: right;
   display: block;
@@ -293,3 +293,74 @@
   }
 }
 
+//
+// AlertModal styles
+//
+
+.at-c-alertModal.pf-c-modal-box {
+  border: 0;
+  border-left: 56px solid black;
+
+  .at-c-alertModal__icon {
+    position: absolute;
+    font-size: 23px;
+    top: 28px;
+    left: -39px;
+  }
+}
+
+.at-c-alertModal--warning.pf-c-modal-box {
+  border-color: var(--pf-global--warning-color--100);
+
+  .pf-c-title {
+    color: var(--pf-global--warning-color--200);
+  }
+
+  .at-c-alertModal__icon {
+    color: var(--pf-global--warning-color--200);
+  }
+}
+
+.at-c-alertModal--danger.pf-c-modal-box {
+  border-color: var(--pf-global--danger-color--100);
+
+  .pf-c-title {
+    color: var(--pf-global--danger-color--200);
+  }
+
+  .at-c-alertModal__icon {
+    color: white;
+  }
+}
+
+.at-c-alertModal--info.pf-c-modal-box {
+  border-color: var(--pf-global--info-color--100);
+
+  .pf-c-title {
+    color: var(--pf-global--info-color--200);
+  }
+
+  .at-c-alertModal__icon {
+    color: var(--pf-global--info-color--200);
+  }
+}
+
+.at-c-alertModal--success.pf-c-modal-box {
+  border-color: var(--pf-global--success-color--100);
+
+  .pf-c-title {
+    color: var(--pf-global--success-color--200);
+  }
+
+  .at-c-alertModal__icon {
+    color: var(--pf-global--success-color--200);
+  }
+}
+
+//
+// LoginModal overrides
+//
+
+.pf-m-error p.pf-c-form__helper-text {
+  color: var(--pf-global--danger-color--100);
+}
diff --git a/src/components/AlertModal.jsx b/src/components/AlertModal.jsx
new file mode 100644
index 0000000000..264e9cf355
--- /dev/null
+++ b/src/components/AlertModal.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {
+  Modal
+} from '@patternfly/react-core';
+
+import { ExclamationTriangleIcon, ExclamationCircleIcon, InfoCircleIcon, CheckCircleIcon } from '@patternfly/react-icons';
+
+const getIcon = (variant) => {
+  let icon;
+  if (variant === 'warning') {
+    icon = (<ExclamationTriangleIcon className="at-c-alertModal__icon" />);
+  } else if (variant === 'danger') {
+    icon = (<ExclamationCircleIcon className="at-c-alertModal__icon" />);
+  } if (variant === 'info') {
+    icon = (<InfoCircleIcon className="at-c-alertModal__icon" />);
+  } if (variant === 'success') {
+    icon = (<CheckCircleIcon className="at-c-alertModal__icon" />);
+  }
+  return icon;
+};
+
+export default ({ variant, children, ...props }) => (
+  <Modal className={`awx-c-modal${variant && ` at-c-alertModal at-c-alertModal--${variant}`}`} {...props}>
+    {children}
+    {getIcon(variant)}
+  </Modal>
+);
diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx
index c65eee0935..f4f77cae6b 100644
--- a/src/components/Lookup/Lookup.jsx
+++ b/src/components/Lookup/Lookup.jsx
@@ -15,6 +15,8 @@ import {
 import { I18n } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
 
+import { withNetwork } from '../../contexts/Network';
+
 import CheckboxListItem from '../ListItem';
 import DataListToolbar from '../DataListToolbar';
 import SelectedList from '../SelectedList';
@@ -67,7 +69,7 @@ class Lookup extends React.Component {
   }
 
   async getData () {
-    const { getItems } = this.props;
+    const { getItems, handleHttpError } = this.props;
     const { page, page_size, sortedColumnKey, sortOrder } = this.state;
 
     this.setState({ error: false });
@@ -92,7 +94,7 @@ class Lookup extends React.Component {
 
       this.setState(stateToUpdate);
     } catch (err) {
-      this.setState({ error: true });
+      handleHttpError(err) || this.setState({ error: true });
     }
   }
 
@@ -273,4 +275,5 @@ Lookup.defaultProps = {
   name: null,
 };
 
-export default Lookup;
+export { Lookup as _Lookup };
+export default withNetwork(Lookup);
diff --git a/src/components/NotificationsList/Notifications.list.jsx b/src/components/NotificationsList/Notifications.list.jsx
index 80ed1c2407..cd3ea675b7 100644
--- a/src/components/NotificationsList/Notifications.list.jsx
+++ b/src/components/NotificationsList/Notifications.list.jsx
@@ -8,11 +8,13 @@ import { CubesIcon } from '@patternfly/react-icons';
 import { I18n, i18nMark } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
 
+import { withNetwork } from '../../contexts/Network';
+
 import DataListToolbar from '../DataListToolbar';
 import NotificationListItem from './NotificationListItem';
 import Pagination from '../Pagination';
 
-import { parseQueryString } from '../../qs';
+import { parseQueryString } from '../../util/qs';
 
 class Notifications extends Component {
   columns = [
@@ -117,58 +119,71 @@ class Notifications extends Component {
   }
 
   async createError (id, isCurrentlyOn) {
-    const { onCreateError, match } = this.props;
+    const { onCreateError, match, handleHttpError } = this.props;
     const postParams = { id };
+    let errorHandled;
     if (isCurrentlyOn) {
       postParams.disassociate = true;
     }
     try {
       await onCreateError(match.params.id, postParams);
     } catch (err) {
-      this.setState({ error: true });
+      errorHandled = handleHttpError(err);
+      if (!errorHandled) {
+        this.setState({ error: true });
+      }
     } finally {
-      if (isCurrentlyOn) {
-        // Remove it from state
-        this.setState((prevState) => ({
-          errorTemplateIds: prevState.errorTemplateIds.filter((templateId) => templateId !== id)
-        }));
-      } else {
-        // Add it to state
-        this.setState(prevState => ({
-          errorTemplateIds: [...prevState.errorTemplateIds, id]
-        }));
+      if (!errorHandled) {
+        if (isCurrentlyOn) {
+          // Remove it from state
+          this.setState((prevState) => ({
+            errorTemplateIds: prevState.errorTemplateIds.filter((templateId) => templateId !== id)
+          }));
+        } else {
+          // Add it to state
+          this.setState(prevState => ({
+            errorTemplateIds: [...prevState.errorTemplateIds, id]
+          }));
+        }
       }
     }
   }
 
   async createSuccess (id, isCurrentlyOn) {
-    const { onCreateSuccess, match } = this.props;
+    const { onCreateSuccess, match, handleHttpError } = this.props;
     const postParams = { id };
+    let errorHandled;
     if (isCurrentlyOn) {
       postParams.disassociate = true;
     }
     try {
       await onCreateSuccess(match.params.id, postParams);
     } catch (err) {
-      this.setState({ error: true });
+      errorHandled = handleHttpError(err);
+      if (!errorHandled) {
+        this.setState({ error: true });
+      }
     } finally {
-      if (isCurrentlyOn) {
-        // Remove it from state
-        this.setState((prevState) => ({
-          successTemplateIds: prevState.successTemplateIds.filter((templateId) => templateId !== id)
-        }));
-      } else {
-        // Add it to state
-        this.setState(prevState => ({
-          successTemplateIds: [...prevState.successTemplateIds, id]
-        }));
+      if (!errorHandled) {
+        if (isCurrentlyOn) {
+          // Remove it from state
+          this.setState((prevState) => ({
+            successTemplateIds: prevState.successTemplateIds
+              .filter((templateId) => templateId !== id)
+          }));
+        } else {
+          // Add it to state
+          this.setState(prevState => ({
+            successTemplateIds: [...prevState.successTemplateIds, id]
+          }));
+        }
       }
     }
   }
 
   async readNotifications (queryParams) {
     const { noInitialResults } = this.state;
-    const { onReadNotifications, onReadSuccess, onReadError, match } = this.props;
+    const { onReadNotifications, onReadSuccess, onReadError, match, handleHttpError } = this.props;
     const { page, page_size, order_by } = queryParams;
 
     let sortOrder = 'ascending';
@@ -233,12 +248,11 @@ class Notifications extends Component {
       }
       this.setState({
         successTemplateIds,
-        errorTemplateIds
+        errorTemplateIds,
+        loading: false
       });
     } catch (err) {
-      this.setState({ error: true });
-    } finally {
-      this.setState({ loading: false });
+      handleHttpError(err) || this.setState({ error: true, loading: false });
     }
   }
 
@@ -329,4 +343,5 @@ Notifications.propTypes = {
   onCreateSuccess: PropTypes.func.isRequired,
 };
 
-export default Notifications;
+export { Notifications as _Notifications };
+export default withNetwork(Notifications);
diff --git a/src/components/NotifyAndRedirect.jsx b/src/components/NotifyAndRedirect.jsx
new file mode 100644
index 0000000000..0bb030440a
--- /dev/null
+++ b/src/components/NotifyAndRedirect.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Redirect, withRouter } from 'react-router-dom';
+
+import { Trans } from '@lingui/macro';
+
+import { withRootDialog } from '../contexts/RootDialog';
+
+const NotifyAndRedirect = ({
+  to,
+  push,
+  from,
+  exact,
+  strict,
+  sensitive,
+  setRootDialogMessage,
+  location
+}) => {
+  setRootDialogMessage({
+    title: '404',
+    bodyText: (
+      <Trans>
+        Cannot find route
+        <strong>{` ${location.pathname}`}</strong>
+        .
+      </Trans>
+    ),
+    variant: 'warning'
+  });
+
+  return (
+    <Redirect
+      to={to}
+      push={push}
+      from={from}
+      exact={exact}
+      strict={strict}
+      sensitive={sensitive}
+    />
+  );
+};
+
+export { NotifyAndRedirect as _NotifyAndRedirect };
+export default withRootDialog(withRouter(NotifyAndRedirect));
diff --git a/src/context.jsx b/src/context.jsx
deleted file mode 100644
index ab413dd313..0000000000
--- a/src/context.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line import/prefer-default-export
-export const ConfigContext = React.createContext({});
diff --git a/src/contexts/Config.jsx b/src/contexts/Config.jsx
new file mode 100644
index 0000000000..3c71ccf21d
--- /dev/null
+++ b/src/contexts/Config.jsx
@@ -0,0 +1,89 @@
+
+import React, { Component } from 'react';
+
+import { withNetwork } from './Network';
+
+const ConfigContext = React.createContext({});
+
+class Provider extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      value: {
+        ansible_version: null,
+        custom_virtualenvs: null,
+        version: null,
+        custom_logo: null,
+        custom_login_info: null
+      }
+    };
+
+    this.fetchConfig = this.fetchConfig.bind(this);
+  }
+
+  componentDidMount () {
+    this.fetchConfig();
+  }
+
+  async fetchConfig () {
+    const { api, handleHttpError } = this.props;
+
+    try {
+      const {
+        data: {
+          ansible_version,
+          custom_virtualenvs,
+          version
+        }
+      } = await api.getConfig();
+      const {
+        data: {
+          custom_logo,
+          custom_login_info
+        }
+      } = await api.getRoot();
+      this.setState({
+        value: {
+          ansible_version,
+          custom_virtualenvs,
+          version,
+          custom_logo,
+          custom_login_info
+        }
+      });
+    } catch (err) {
+      handleHttpError(err) || this.setState({
+        value: {
+          ansible_version: null,
+          custom_virtualenvs: null,
+          version: null,
+          custom_logo: null,
+          custom_login_info: null
+        }
+      });
+    }
+  }
+
+  render () {
+    const {
+      value: stateValue
+    } = this.state;
+
+    const { value: propsValue, children } = this.props;
+
+    return (
+      <ConfigContext.Provider value={propsValue || stateValue}>
+        {children}
+      </ConfigContext.Provider>
+    );
+  }
+}
+
+export const ConfigProvider = withNetwork(Provider);
+
+export const Config = ({ children }) => (
+  <ConfigContext.Consumer>
+    {value => children(value)}
+  </ConfigContext.Consumer>
+);
diff --git a/src/contexts/Network.jsx b/src/contexts/Network.jsx
new file mode 100644
index 0000000000..10f12ccb1e
--- /dev/null
+++ b/src/contexts/Network.jsx
@@ -0,0 +1,85 @@
+
+import axios from 'axios';
+import React, { Component } from 'react';
+
+import { withRouter } from 'react-router-dom';
+
+import { i18nMark } from '@lingui/react';
+
+import { withRootDialog } from './RootDialog';
+
+import APIClient from '../api';
+
+const NetworkContext = React.createContext({});
+
+class Provider extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      value: {
+        api: new APIClient(axios.create({ xsrfCookieName: 'csrftoken', xsrfHeaderName: 'X-CSRFToken' })),
+        handleHttpError: err => {
+          if (err.response.status === 401) {
+            this.handle401();
+          } else if (err.response.status === 404) {
+            this.handle404();
+          }
+          return (err.response.status === 401 || err.response.status === 404);
+        }
+      }
+    };
+  }
+
+  handle401 () {
+    const { handle401, history, setRootDialogMessage } = this.props;
+    if (handle401) {
+      handle401();
+      return;
+    }
+    history.replace('/login');
+    setRootDialogMessage({
+      bodyText: i18nMark('You have been logged out.')
+    });
+  }
+
+  handle404 () {
+    const { handle404, history, setRootDialogMessage } = this.props;
+    if (handle404) {
+      handle404();
+      return;
+    }
+    history.replace('/home');
+    setRootDialogMessage({
+      title: i18nMark('404'),
+      bodyText: i18nMark('Cannot find resource.'),
+      variant: 'warning'
+    });
+  }
+
+  render () {
+    const {
+      value: stateValue
+    } = this.state;
+
+    const { value: propsValue, children } = this.props;
+
+    return (
+      <NetworkContext.Provider value={propsValue || stateValue}>
+        {children}
+      </NetworkContext.Provider>
+    );
+  }
+}
+
+export { Provider as _NetworkProvider };
+export const NetworkProvider = withRootDialog(withRouter(Provider));
+
+export function withNetwork (Child) {
+  return (props) => (
+    <NetworkContext.Consumer>
+      {context => <Child {...props} {...context} />}
+    </NetworkContext.Consumer>
+  );
+}
+
diff --git a/src/contexts/RootDialog.jsx b/src/contexts/RootDialog.jsx
new file mode 100644
index 0000000000..089c59087f
--- /dev/null
+++ b/src/contexts/RootDialog.jsx
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+
+const RootDialogContext = React.createContext({});
+
+export class RootDialogProvider extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      value: {
+        title: null,
+        setRootDialogMessage: ({ title, bodyText, variant }) => {
+          const { value } = this.state;
+          this.setState({ value: { ...value, title, bodyText, variant } });
+        },
+        clearRootDialogMessage: () => {
+          const { value } = this.state;
+          this.setState({ value: { ...value, title: null, bodyText: null, variant: null } });
+        }
+      }
+    };
+  }
+
+  render () {
+    const {
+      children
+    } = this.props;
+
+    const {
+      value
+    } = this.state;
+
+    return (
+      <RootDialogContext.Provider value={value}>
+        {children}
+      </RootDialogContext.Provider>
+    );
+  }
+}
+
+export const RootDialog = ({ children }) => (
+  <RootDialogContext.Consumer>
+    {value => children(value)}
+  </RootDialogContext.Consumer>
+);
+
+export function withRootDialog (Child) {
+  return (props) => (
+    <RootDialogContext.Consumer>
+      {context => <Child {...props} {...context} />}
+    </RootDialogContext.Consumer>
+  );
+}
diff --git a/src/index.jsx b/src/index.jsx
index d3dd6407e6..099ab7a584 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,15 +1,12 @@
-import axios from 'axios';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {
-  HashRouter,
-  Redirect,
   Route,
   Switch,
+  Redirect
 } from 'react-router-dom';
 import {
-  I18n,
-  I18nProvider,
+  I18n
 } from '@lingui/react';
 import { t } from '@lingui/macro';
 
@@ -19,10 +16,14 @@ import './components/Pagination/styles.scss';
 import './components/DataListToolbar/styles.scss';
 import './components/SelectedList/styles.scss';
 
-import APIClient from './api';
+import { Config } from './contexts/Config';
 
-import App from './App';
 import Background from './components/Background';
+import NotifyAndRedirect from './components/NotifyAndRedirect';
+
+import RootProvider from './RootProvider';
+import App from './App';
+
 import Applications from './pages/Applications';
 import Credentials from './pages/Credentials';
 import CredentialTypes from './pages/CredentialTypes';
@@ -46,242 +47,204 @@ import License from './pages/License';
 import Teams from './pages/Teams';
 import Templates from './pages/Templates';
 import Users from './pages/Users';
-import ja from '../build/locales/ja/messages';
-import en from '../build/locales/en/messages';
-
-//
-// Initialize http
-//
-
-const http = axios.create({ xsrfCookieName: 'csrftoken', xsrfHeaderName: 'X-CSRFToken' });
-
-//
-// Derive the language and region from global user agent data. Example: es-US
-// see: https://developer.mozilla.org/en-US/docs/Web/API/Navigator
-//
-
-export function getLanguage (nav) {
-  const language = (nav.languages && nav.languages[0]) || nav.language || nav.userLanguage;
-  const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
-
-  return languageWithoutRegionCode;
-}
-
-//
-//  Function Main
-//
-
-export async function main (render, api) {
-  const catalogs = { en, ja };
-  const language = getLanguage(navigator);
 
+// eslint-disable-next-line import/prefer-default-export
+export function main (render) {
   const el = document.getElementById('app');
-  const { data: { custom_logo, custom_login_info } } = await api.getRoot();
-
-  const defaultRedirect = () => (<Redirect to="/home" />);
-  const loginRoutes = (
-    <Switch>
-      <Route
-        path="/login"
-        render={() => (
-          <Login
-            api={api}
-            logo={custom_logo}
-            loginInfo={custom_login_info}
-          />
-        )}
-      />
-      <Redirect to="/login" />
-    </Switch>
-  );
 
   return render(
-    <HashRouter>
-      <I18nProvider
-        language={language}
-        catalogs={catalogs}
-      >
-        <I18n>
-          {({ i18n }) => (
-            <Background>
-              {!api.isAuthenticated() ? loginRoutes : (
-                <Switch>
-                  <Route path="/login" render={defaultRedirect} />
-                  <Route exact path="/" render={defaultRedirect} />
-                  <Route
-                    render={() => (
-                      <App
-                        api={api}
-                        navLabel={i18n._(t`Primary Navigation`)}
-                        routeGroups={[
-                          {
-                            groupTitle: i18n._(t`Views`),
-                            groupId: 'views_group',
-                            routes: [
-                              {
-                                title: i18n._(t`Dashboard`),
-                                path: '/home',
-                                component: Dashboard
-                              },
-                              {
-                                title: i18n._(t`Jobs`),
-                                path: '/jobs',
-                                component: Jobs
-                              },
-                              {
-                                title: i18n._(t`Schedules`),
-                                path: '/schedules',
-                                component: Schedules
-                              },
-                              {
-                                title: i18n._(t`My View`),
-                                path: '/portal',
-                                component: Portal
-                              },
-                            ],
-                          },
-                          {
-                            groupTitle: i18n._(t`Resources`),
-                            groupId: 'resources_group',
-                            routes: [
-                              {
-                                title: i18n._(t`Templates`),
-                                path: '/templates',
-                                component: Templates
-                              },
-                              {
-                                title: i18n._(t`Credentials`),
-                                path: '/credentials',
-                                component: Credentials
-                              },
-                              {
-                                title: i18n._(t`Projects`),
-                                path: '/projects',
-                                component: Projects
-                              },
-                              {
-                                title: i18n._(t`Inventories`),
-                                path: '/inventories',
-                                component: Inventories
-                              },
-                              {
-                                title: i18n._(t`Inventory Scripts`),
-                                path: '/inventory_scripts',
-                                component: InventoryScripts
-                              },
-                            ],
-                          },
-                          {
-                            groupTitle: i18n._(t`Access`),
-                            groupId: 'access_group',
-                            routes: [
-                              {
-                                title: i18n._(t`Organizations`),
-                                path: '/organizations',
-                                component: Organizations
-                              },
-                              {
-                                title: i18n._(t`Users`),
-                                path: '/users',
-                                component: Users
-                              },
-                              {
-                                title: i18n._(t`Teams`),
-                                path: '/teams',
-                                component: Teams
-                              },
-                            ],
-                          },
-                          {
-                            groupTitle: i18n._(t`Administration`),
-                            groupId: 'administration_group',
-                            routes: [
-                              {
-                                title: i18n._(t`Credential Types`),
-                                path: '/credential_types',
-                                component: CredentialTypes
-                              },
-                              {
-                                title: i18n._(t`Notifications`),
-                                path: '/notification_templates',
-                                component: NotificationTemplates
-                              },
-                              {
-                                title: i18n._(t`Management Jobs`),
-                                path: '/management_jobs',
-                                component: ManagementJobs
-                              },
-                              {
-                                title: i18n._(t`Instance Groups`),
-                                path: '/instance_groups',
-                                component: InstanceGroups
-                              },
-                              {
-                                title: i18n._(t`Integrations`),
-                                path: '/applications',
-                                component: Applications
-                              },
-                            ],
-                          },
-                          {
-                            groupTitle: i18n._(t`Settings`),
-                            groupId: 'settings_group',
-                            routes: [
-                              {
-                                title: i18n._(t`Authentication`),
-                                path: '/auth_settings',
-                                component: AuthSettings
-                              },
-                              {
-                                title: i18n._(t`Jobs`),
-                                path: '/jobs_settings',
-                                component: JobsSettings
-                              },
-                              {
-                                title: i18n._(t`System`),
-                                path: '/system_settings',
-                                component: SystemSettings
-                              },
-                              {
-                                title: i18n._(t`User Interface`),
-                                path: '/ui_settings',
-                                component: UISettings
-                              },
-                              {
-                                title: i18n._(t`License`),
-                                path: '/license',
-                                component: License
-                              },
-                            ],
-                          },
-                        ]}
-                        render={({ routeGroups }) => (
-                          routeGroups
-                            .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
-                            .map(({ component: PageComponent, path }) => (
-                              <Route
-                                key={path}
-                                path={path}
-                                render={({ match }) => (
-                                  <PageComponent
-                                    api={api}
-                                    match={match}
-                                  />
-                                )}
-                              />
-                            ))
-                        )}
+    <RootProvider>
+      <I18n>
+        {({ i18n }) => (
+          <Background>
+            <Switch>
+              <Route
+                path="/login"
+                render={() => (
+                  <Config>
+                    {({ custom_logo, custom_login_info }) => (
+                      <Login
+                        logo={custom_logo}
+                        loginInfo={custom_login_info}
                       />
                     )}
+                  </Config>
+                )}
+              />
+              <Route exact path="/" render={() => <Redirect to="/home" />} />
+              <Route
+                render={() => (
+                  <App
+                    navLabel={i18n._(t`Primary Navigation`)}
+                    routeGroups={[
+                      {
+                        groupTitle: i18n._(t`Views`),
+                        groupId: 'views_group',
+                        routes: [
+                          {
+                            title: i18n._(t`Dashboard`),
+                            path: '/home',
+                            component: Dashboard
+                          },
+                          {
+                            title: i18n._(t`Jobs`),
+                            path: '/jobs',
+                            component: Jobs
+                          },
+                          {
+                            title: i18n._(t`Schedules`),
+                            path: '/schedules',
+                            component: Schedules
+                          },
+                          {
+                            title: i18n._(t`My View`),
+                            path: '/portal',
+                            component: Portal
+                          },
+                        ],
+                      },
+                      {
+                        groupTitle: i18n._(t`Resources`),
+                        groupId: 'resources_group',
+                        routes: [
+                          {
+                            title: i18n._(t`Templates`),
+                            path: '/templates',
+                            component: Templates
+                          },
+                          {
+                            title: i18n._(t`Credentials`),
+                            path: '/credentials',
+                            component: Credentials
+                          },
+                          {
+                            title: i18n._(t`Projects`),
+                            path: '/projects',
+                            component: Projects
+                          },
+                          {
+                            title: i18n._(t`Inventories`),
+                            path: '/inventories',
+                            component: Inventories
+                          },
+                          {
+                            title: i18n._(t`Inventory Scripts`),
+                            path: '/inventory_scripts',
+                            component: InventoryScripts
+                          },
+                        ],
+                      },
+                      {
+                        groupTitle: i18n._(t`Access`),
+                        groupId: 'access_group',
+                        routes: [
+                          {
+                            title: i18n._(t`Organizations`),
+                            path: '/organizations',
+                            component: Organizations
+                          },
+                          {
+                            title: i18n._(t`Users`),
+                            path: '/users',
+                            component: Users
+                          },
+                          {
+                            title: i18n._(t`Teams`),
+                            path: '/teams',
+                            component: Teams
+                          },
+                        ],
+                      },
+                      {
+                        groupTitle: i18n._(t`Administration`),
+                        groupId: 'administration_group',
+                        routes: [
+                          {
+                            title: i18n._(t`Credential Types`),
+                            path: '/credential_types',
+                            component: CredentialTypes
+                          },
+                          {
+                            title: i18n._(t`Notifications`),
+                            path: '/notification_templates',
+                            component: NotificationTemplates
+                          },
+                          {
+                            title: i18n._(t`Management Jobs`),
+                            path: '/management_jobs',
+                            component: ManagementJobs
+                          },
+                          {
+                            title: i18n._(t`Instance Groups`),
+                            path: '/instance_groups',
+                            component: InstanceGroups
+                          },
+                          {
+                            title: i18n._(t`Integrations`),
+                            path: '/applications',
+                            component: Applications
+                          },
+                        ],
+                      },
+                      {
+                        groupTitle: i18n._(t`Settings`),
+                        groupId: 'settings_group',
+                        routes: [
+                          {
+                            title: i18n._(t`Authentication`),
+                            path: '/auth_settings',
+                            component: AuthSettings
+                          },
+                          {
+                            title: i18n._(t`Jobs`),
+                            path: '/jobs_settings',
+                            component: JobsSettings
+                          },
+                          {
+                            title: i18n._(t`System`),
+                            path: '/system_settings',
+                            component: SystemSettings
+                          },
+                          {
+                            title: i18n._(t`User Interface`),
+                            path: '/ui_settings',
+                            component: UISettings
+                          },
+                          {
+                            title: i18n._(t`License`),
+                            path: '/license',
+                            component: License
+                          },
+                        ],
+                      },
+                    ]}
+                    render={({ routeGroups }) => (
+                      <Switch>
+                        {routeGroups
+                          .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
+                          .map(({ component: PageComponent, path }) => (
+                            <Route
+                              key={path}
+                              path={path}
+                              render={({ match }) => (
+                                <PageComponent match={match} />
+                              )}
+                            />
+                          ))
+                          .concat([
+                            <NotifyAndRedirect key="redirect" to="/" />
+                          ])}
+                      </Switch>
+                    )}
                   />
-                </Switch>
-              )}
-            </Background>
-          )}
-        </I18n>
-      </I18nProvider>
-    </HashRouter>, el
+                )}
+              />
+            </Switch>
+          </Background>
+        )}
+      </I18n>
+    </RootProvider>, el || document.createElement('div')
   );
 }
 
-main(ReactDOM.render, new APIClient(http));
+main(ReactDOM.render);
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 4759f285c7..d3357d77bf 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Redirect, withRouter } from 'react-router-dom';
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
@@ -7,6 +7,9 @@ import {
   LoginPage,
 } from '@patternfly/react-core';
 
+import { withRootDialog } from '../contexts/RootDialog';
+import { withNetwork } from '../contexts/Network';
+
 import towerLogo from '../../images/tower-logo-header.svg';
 
 class AWXLogin extends Component {
@@ -17,7 +20,8 @@ class AWXLogin extends Component {
       username: '',
       password: '',
       isInputValid: true,
-      isLoading: false
+      isLoading: false,
+      isAuthenticated: false
     };
 
     this.onChangeUsername = this.onChangeUsername.bind(this);
@@ -35,7 +39,7 @@ class AWXLogin extends Component {
 
   async onLoginButtonClick (event) {
     const { username, password, isLoading } = this.state;
-    const { api } = this.props;
+    const { api, handleHttpError, clearRootDialogMessage } = this.props;
 
     event.preventDefault();
 
@@ -43,25 +47,23 @@ class AWXLogin extends Component {
       return;
     }
 
+    clearRootDialogMessage();
     this.setState({ isLoading: true });
 
     try {
       await api.login(username, password);
+      this.setState({ isAuthenticated: true, isLoading: false });
     } catch (error) {
-      if (error.response && error.response.status === 401) {
-        this.setState({ isInputValid: false });
-      }
-    } finally {
-      this.setState({ isLoading: false });
+      handleHttpError(error) || this.setState({ isInputValid: false, isLoading: false });
     }
   }
 
   render () {
-    const { username, password, isInputValid } = this.state;
-    const { api, alt, loginInfo, logo } = this.props;
+    const { username, password, isInputValid, isAuthenticated } = this.state;
+    const { alt, loginInfo, logo, bodyText: errorMessage } = this.props;
     const logoSrc = logo ? `data:image/jpeg;${logo}` : towerLogo;
 
-    if (api.isAuthenticated()) {
+    if (isAuthenticated) {
       return (<Redirect to="/" />);
     }
 
@@ -75,10 +77,11 @@ class AWXLogin extends Component {
             textContent={loginInfo}
           >
             <LoginForm
+              className={errorMessage && 'pf-m-error'}
               usernameLabel={i18n._(t`Username`)}
               passwordLabel={i18n._(t`Password`)}
-              showHelperText={!isInputValid}
-              helperText={i18n._(t`Invalid username or password. Please try again.`)}
+              showHelperText={!isInputValid || !!errorMessage}
+              helperText={errorMessage || i18n._(t`Invalid username or password. Please try again.`)}
               usernameValue={username}
               passwordValue={password}
               isValidUsername={isInputValid}
@@ -94,4 +97,5 @@ class AWXLogin extends Component {
   }
 }
 
-export default AWXLogin;
+export { AWXLogin as _AWXLogin };
+export default withNetwork(withRootDialog(withRouter(AWXLogin)));
diff --git a/src/pages/Organizations/Organizations.jsx b/src/pages/Organizations/Organizations.jsx
index 7b5d41377e..d5dd9dfdb0 100644
--- a/src/pages/Organizations/Organizations.jsx
+++ b/src/pages/Organizations/Organizations.jsx
@@ -1,11 +1,16 @@
 import React, { Component, Fragment } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, withRouter, Switch } from 'react-router-dom';
 import { i18nMark } from '@lingui/react';
+import { Trans } from '@lingui/macro';
+
+import { NetworkProvider } from '../../contexts/Network';
+import { withRootDialog } from '../../contexts/RootDialog';
+
+import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
 
 import OrganizationsList from './screens/OrganizationsList';
 import OrganizationAdd from './screens/OrganizationAdd';
 import Organization from './screens/Organization/Organization';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
 
 class Organizations extends Component {
   state = {
@@ -13,7 +18,7 @@ class Organizations extends Component {
       '/organizations': i18nMark('Organizations'),
       '/organizations/add': i18nMark('Create New Organization')
     }
-  }
+  };
 
   setBreadcrumbConfig = (organization) => {
     if (!organization) {
@@ -35,7 +40,7 @@ class Organizations extends Component {
   }
 
   render () {
-    const { match, api, history, location } = this.props;
+    const { match, history, location, setRootDialogMessage } = this.props;
     const { breadcrumbConfig } = this.state;
 
     return (
@@ -47,28 +52,40 @@ class Organizations extends Component {
           <Route
             path={`${match.path}/add`}
             render={() => (
-              <OrganizationAdd
-                api={api}
-              />
+              <OrganizationAdd />
             )}
           />
           <Route
             path={`${match.path}/:id`}
-            render={() => (
-              <Organization
-                api={api}
-                history={history}
-                location={location}
-                setBreadcrumb={this.setBreadcrumbConfig}
-              />
+            render={({ match: newRouteMatch }) => (
+              <NetworkProvider
+                handle404={() => {
+                  history.replace('/organizations');
+                  setRootDialogMessage({
+                    title: '404',
+                    bodyText: (
+                      <Trans>
+                        Cannot find organization with ID
+                        <strong>{` ${newRouteMatch.params.id}`}</strong>
+                        .
+                      </Trans>
+                    ),
+                    variant: 'warning'
+                  });
+                }}
+              >
+                <Organization
+                  history={history}
+                  location={location}
+                  setBreadcrumb={this.setBreadcrumbConfig}
+                />
+              </NetworkProvider>
             )}
           />
           <Route
             path={`${match.path}`}
             render={() => (
-              <OrganizationsList
-                api={api}
-              />
+              <OrganizationsList />
             )}
           />
         </Switch>
@@ -77,4 +94,5 @@ class Organizations extends Component {
   }
 }
 
-export default Organizations;
+export { Organizations as _Organizations };
+export default withRootDialog(withRouter(Organizations));
diff --git a/src/pages/Organizations/components/InstanceGroupsLookup.jsx b/src/pages/Organizations/components/InstanceGroupsLookup.jsx
index ac48d25972..703fd2420c 100644
--- a/src/pages/Organizations/components/InstanceGroupsLookup.jsx
+++ b/src/pages/Organizations/components/InstanceGroupsLookup.jsx
@@ -7,6 +7,8 @@ import { t } from '@lingui/macro';
 
 import Lookup from '../../../components/Lookup';
 
+import { withNetwork } from '../../../contexts/Network';
+
 const INSTANCE_GROUPS_LOOKUP_COLUMNS = [
   { name: i18nMark('Name'), key: 'name', isSortable: true },
   { name: i18nMark('Modified'), key: 'modified', isSortable: false, isNumeric: true },
@@ -69,9 +71,6 @@ class InstanceGroupsLookup extends React.Component {
 }
 
 InstanceGroupsLookup.propTypes = {
-  api: PropTypes.shape({
-    getInstanceGroups: PropTypes.func,
-  }).isRequired,
   value: PropTypes.arrayOf(PropTypes.object).isRequired,
   tooltip: PropTypes.string,
   onChange: PropTypes.func.isRequired,
@@ -81,4 +80,4 @@ InstanceGroupsLookup.defaultProps = {
   tooltip: '',
 };
 
-export default InstanceGroupsLookup;
+export default withNetwork(InstanceGroupsLookup);
diff --git a/src/pages/Organizations/components/OrganizationAccessList.jsx b/src/pages/Organizations/components/OrganizationAccessList.jsx
index abc289ed96..c30c31943c 100644
--- a/src/pages/Organizations/components/OrganizationAccessList.jsx
+++ b/src/pages/Organizations/components/OrganizationAccessList.jsx
@@ -3,22 +3,25 @@ import PropTypes from 'prop-types';
 
 import {
   DataList, DataListItem, DataListCell, Text,
-  TextContent, TextVariants, Chip, Alert, AlertActionCloseButton, Button
+  TextContent, TextVariants, Chip, Button
 } from '@patternfly/react-core';
 
 import { I18n, i18nMark } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 
 import {
   Link
 } from 'react-router-dom';
 
+import { withNetwork } from '../../../contexts/Network';
+
+import AlertModal from '../../../components/AlertModal';
 import Pagination from '../../../components/Pagination';
 import DataListToolbar from '../../../components/DataListToolbar';
 
 import {
   parseQueryString,
-} from '../../../qs';
+} from '../../../util/qs';
 
 const userRolesWrapperStyle = {
   display: 'flex',
@@ -237,20 +240,16 @@ class OrganizationAccessList extends React.Component {
   }
 
   async removeAccessRole (roleId, resourceId, type) {
-    const { removeRole } = this.props;
+    const { removeRole, handleHttpError } = this.props;
     const url = `/api/v2/${type}/${resourceId}/roles/`;
     try {
       await removeRole(url, roleId);
+      const queryParams = this.getQueryParams();
+      await this.fetchOrgAccessList(queryParams);
+      this.setState({ showWarning: false });
     } catch (error) {
-      this.setState({ error });
+      handleHttpError(error) || this.setState({ error });
     }
-    const queryParams = this.getQueryParams();
-    try {
-      this.fetchOrgAccessList(queryParams);
-    } catch (error) {
-      this.setState({ error });
-    }
-    this.setState({ showWarning: false });
   }
 
   handleWarning (roleName, roleId, resourceName, resourceId, type) {
@@ -258,16 +257,33 @@ class OrganizationAccessList extends React.Component {
     let warningMsg;
 
     if (type === 'users') {
-      warningTitle = i18nMark('User Access Removal');
-      warningMsg = i18nMark(`Please confirm that you would like to remove ${roleName}
-      access from ${resourceName}.`);
+      warningTitle = i18nMark('Remove User Access');
+      warningMsg = (
+        <Trans>
+          Are you sure you want to remove
+          <b>{` ${roleName} `}</b>
+          access from
+          <strong>{` ${resourceName}`}</strong>
+          ?
+        </Trans>
+      );
     }
     if (type === 'teams') {
-      warningTitle = i18nMark('Team Access Removal');
-      warningMsg = i18nMark(`Please confirm that you would like to remove ${roleName}
-      access from the team ${resourceName}. This will affect all
-      members of the team. If you would like to only remove access
-      for this particular user, please remove them from the team.`);
+      warningTitle = i18nMark('Remove Team Access');
+      warningMsg = (
+        <Trans>
+          Are you sure you want to remove
+          <b>{` ${roleName} `}</b>
+          access from
+          <b>{` ${resourceName}`}</b>
+          ?  Doing so affects all members of the team.
+          <br />
+          <br />
+          If you
+          <b><i> only </i></b>
+          want to remove access for this particular user, please remove them from the team.
+        </Trans>
+      );
     }
 
     this.setState({
@@ -333,17 +349,18 @@ class OrganizationAccessList extends React.Component {
                   showExpandCollapse
                 />
                 {showWarning && (
-                  <Alert
+                  <AlertModal
                     variant="danger"
                     title={warningTitle}
-                    action={<AlertActionCloseButton onClose={this.hideWarning} />}
+                    isOpen={showWarning}
+                    onClose={this.hideWarning}
+                    actions={[
+                      <Button key="delete" variant="danger" aria-label="Confirm delete" onClick={this.confirmDelete}>{i18n._(t`Delete`)}</Button>,
+                      <Button key="cancel" variant="secondary" onClick={this.hideWarning}>{i18n._(t`Cancel`)}</Button>
+                    ]}
                   >
                     {warningMsg}
-                    <span className="awx-c-form-action-group">
-                      <Button variant="danger" aria-label="confirm-delete" onClick={this.confirmDelete}>Delete</Button>
-                      <Button variant="secondary" onClick={this.hideWarning}>Cancel</Button>
-                    </span>
-                  </Alert>
+                  </AlertModal>
                 )}
                 <DataList aria-label={i18n._(t`Access List`)}>
                   {results.map(result => (
@@ -430,4 +447,5 @@ OrganizationAccessList.propTypes = {
   removeRole: PropTypes.func.isRequired,
 };
 
-export default OrganizationAccessList;
+export { OrganizationAccessList as _OrganizationAccessList };
+export default withNetwork(OrganizationAccessList);
diff --git a/src/pages/Organizations/components/OrganizationForm.jsx b/src/pages/Organizations/components/OrganizationForm.jsx
index 4000bf1a1c..d956bb8c47 100644
--- a/src/pages/Organizations/components/OrganizationForm.jsx
+++ b/src/pages/Organizations/components/OrganizationForm.jsx
@@ -9,7 +9,8 @@ import {
   FormGroup,
 } from '@patternfly/react-core';
 
-import { ConfigContext } from '../../../context';
+import { Config } from '../../../contexts/Config';
+import { withNetwork } from '../../../contexts/Network';
 import FormRow from '../../../components/FormRow';
 import FormField from '../../../components/FormField';
 import FormActionGroup from '../../../components/FormActionGroup';
@@ -27,6 +28,7 @@ class OrganizationForm extends Component {
 
     this.state = {
       instanceGroups: [],
+      initialInstanceGroups: [],
       formIsValid: true,
     };
   }
@@ -81,7 +83,7 @@ class OrganizationForm extends Component {
   }
 
   render () {
-    const { api, organization, handleCancel } = this.props;
+    const { organization, handleCancel } = this.props;
     const { instanceGroups, formIsValid, error } = this.state;
     const defaultVenv = '/venv/ansible/';
 
@@ -112,7 +114,7 @@ class OrganizationForm extends Component {
                     type="text"
                     label={i18n._(t`Description`)}
                   />
-                  <ConfigContext.Consumer>
+                  <Config>
                     {({ custom_virtualenvs }) => (
                       custom_virtualenvs && custom_virtualenvs.length > 1 && (
                         <Field
@@ -133,10 +135,9 @@ class OrganizationForm extends Component {
                         />
                       )
                     )}
-                  </ConfigContext.Consumer>
+                  </Config>
                 </FormRow>
                 <InstanceGroupsLookup
-                  api={api}
                   value={instanceGroups}
                   onChange={this.handleInstanceGroupsChange}
                   tooltip={i18n._(t`Select the Instance Groups for this Organization to run on.`)}
@@ -157,7 +158,6 @@ class OrganizationForm extends Component {
 }
 
 OrganizationForm.propTypes = {
-  api: PropTypes.shape().isRequired,
   organization: PropTypes.shape(),
   handleSubmit: PropTypes.func.isRequired,
   handleCancel: PropTypes.func.isRequired,
@@ -175,4 +175,5 @@ OrganizationForm.contextTypes = {
   custom_virtualenvs: PropTypes.arrayOf(PropTypes.string)
 };
 
-export default withRouter(OrganizationForm);
+export { OrganizationForm as _OrganizationForm };
+export default withNetwork(withRouter(OrganizationForm));
diff --git a/src/pages/Organizations/components/OrganizationTeamsList.jsx b/src/pages/Organizations/components/OrganizationTeamsList.jsx
index 5f30e4b7e1..8fb02519c6 100644
--- a/src/pages/Organizations/components/OrganizationTeamsList.jsx
+++ b/src/pages/Organizations/components/OrganizationTeamsList.jsx
@@ -20,7 +20,7 @@ import { withRouter, Link } from 'react-router-dom';
 import Pagination from '../../../components/Pagination';
 import DataListToolbar from '../../../components/DataListToolbar';
 
-import { encodeQueryString } from '../../../qs';
+import { encodeQueryString } from '../../../util/qs';
 
 const detailWrapperStyle = {
   display: 'grid',
diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx
index 64a4a47f0a..2ba53ece98 100644
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@@ -13,13 +13,17 @@ import {
   PageSection
 } from '@patternfly/react-core';
 
+import { withNetwork } from '../../../../contexts/Network';
+
+import Tabs from '../../../../components/Tabs/Tabs';
+import Tab from '../../../../components/Tabs/Tab';
+import NotifyAndRedirect from '../../../../components/NotifyAndRedirect';
+
 import OrganizationAccess from './OrganizationAccess';
 import OrganizationDetail from './OrganizationDetail';
 import OrganizationEdit from './OrganizationEdit';
 import OrganizationNotifications from './OrganizationNotifications';
 import OrganizationTeams from './OrganizationTeams';
-import Tabs from '../../../../components/Tabs/Tabs';
-import Tab from '../../../../components/Tabs/Tab';
 
 class Organization extends Component {
   constructor (props) {
@@ -47,18 +51,18 @@ class Organization extends Component {
 
   async fetchOrganization () {
     const {
-      api,
       match,
-      setBreadcrumb
+      setBreadcrumb,
+      api,
+      handleHttpError
     } = this.props;
+
     try {
-      const { data } = await api.getOrganizationDetails(+match.params.id);
-      this.setState({ organization: data });
+      const { data } = await api.getOrganizationDetails(parseInt(match.params.id, 10));
       setBreadcrumb(data);
+      this.setState({ organization: data, loading: false });
     } catch (error) {
-      this.setState({ error: true });
-    } finally {
-      this.setState({ loading: false });
+      handleHttpError(error) || this.setState({ error: true, loading: false });
     }
   }
 
@@ -66,7 +70,6 @@ class Organization extends Component {
     const {
       location,
       match,
-      api,
       history
     } = this.props;
 
@@ -125,7 +128,6 @@ class Organization extends Component {
                 path="/organizations/:id/edit"
                 render={() => (
                   <OrganizationEdit
-                    api={api}
                     match={match}
                     organization={organization}
                   />
@@ -137,7 +139,6 @@ class Organization extends Component {
                 path="/organizations/:id/details"
                 render={() => (
                   <OrganizationDetail
-                    api={api}
                     match={match}
                     organization={organization}
                   />
@@ -148,7 +149,6 @@ class Organization extends Component {
               path="/organizations/:id/access"
               render={() => (
                 <OrganizationAccess
-                  api={api}
                   match={match}
                   location={location}
                   history={history}
@@ -160,7 +160,9 @@ class Organization extends Component {
               render={() => (
                 <OrganizationTeams
                   id={Number(match.params.id)}
-                  api={api}
+                  match={match}
+                  location={location}
+                  history={history}
                 />
               )}
             />
@@ -168,13 +170,13 @@ class Organization extends Component {
               path="/organizations/:id/notifications"
               render={() => (
                 <OrganizationNotifications
-                  api={api}
                   match={match}
                   location={location}
                   history={history}
                 />
               )}
             />
+            {organization && <NotifyAndRedirect to={`/organizations/${match.params.id}/details`} />}
           </Switch>
           {error ? 'error!' : ''}
           {loading ? 'loading...' : ''}
@@ -184,4 +186,4 @@ class Organization extends Component {
   }
 }
 
-export default withRouter(Organization);
+export default withNetwork(withRouter(Organization));
diff --git a/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx b/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx
index c45a165b71..37e6a67db9 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationAccess.jsx
@@ -1,4 +1,7 @@
 import React from 'react';
+
+import { withNetwork } from '../../../../contexts/Network';
+
 import OrganizationAccessList from '../../components/OrganizationAccessList';
 
 class OrganizationAccess extends React.Component {
@@ -38,4 +41,4 @@ class OrganizationAccess extends React.Component {
   }
 }
 
-export default OrganizationAccess;
+export default withNetwork(OrganizationAccess);
diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
index 9784d56910..2771cf8c8e 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { I18n } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
+
 import {
   CardBody,
   Button,
@@ -9,6 +10,9 @@ import {
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
+
+import { withNetwork } from '../../../../contexts/Network';
+
 import BasicChip from '../../../../components/BasicChip/BasicChip';
 
 const detailWrapperStyle = {
@@ -68,6 +72,7 @@ class OrganizationDetail extends Component {
   async loadInstanceGroups () {
     const {
       api,
+      handleHttpError,
       match
     } = this.props;
     try {
@@ -78,7 +83,7 @@ class OrganizationDetail extends Component {
         instanceGroups: [...data.results]
       });
     } catch (err) {
-      this.setState({ error: true });
+      handleHttpError(err) || this.setState({ error: true });
     }
   }
 
@@ -173,4 +178,4 @@ class OrganizationDetail extends Component {
   }
 }
 
-export default OrganizationDetail;
+export default withNetwork(OrganizationDetail);
diff --git a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
index 74b30d3f5e..2b5fe68ca1 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { CardBody } from '@patternfly/react-core';
-
 import OrganizationForm from '../../components/OrganizationForm';
+import { withNetwork } from '../../../../contexts/Network';
 
 class OrganizationEdit extends Component {
   constructor (props) {
@@ -20,14 +20,13 @@ class OrganizationEdit extends Component {
   }
 
   async handleSubmit (values, groupsToAssociate, groupsToDisassociate) {
-    const { api, organization } = this.props;
+    const { api, organization, handleHttpError } = this.props;
     try {
       await api.updateOrganizationDetails(organization.id, values);
       await this.submitInstanceGroups(groupsToAssociate, groupsToDisassociate);
-    } catch (err) {
-      this.setState({ error: err });
-    } finally {
       this.handleSuccess();
+    } catch (err) {
+      handleHttpError(err) || this.setState({ error: err });
     }
   }
 
@@ -42,29 +41,24 @@ class OrganizationEdit extends Component {
   }
 
   async submitInstanceGroups (groupsToAssociate, groupsToDisassociate) {
-    const { api, organization } = this.props;
+    const { api, organization, handleHttpError } = this.props;
     const url = organization.related.instance_groups;
 
     try {
-      await Promise.all(groupsToAssociate.map(async id => {
-        await api.associateInstanceGroup(url, id);
-      }));
-      await Promise.all(groupsToDisassociate.map(async id => {
-        await api.disassociate(url, id);
-      }));
+      await Promise.all(groupsToAssociate.map(id => api.associateInstanceGroup(url, id)));
+      await Promise.all(groupsToDisassociate.map(id => api.disassociate(url, id)));
     } catch (err) {
-      this.setState({ error: err });
+      handleHttpError(err) || this.setState({ error: err });
     }
   }
 
   render () {
-    const { api, organization } = this.props;
+    const { organization } = this.props;
     const { error } = this.state;
 
     return (
       <CardBody>
         <OrganizationForm
-          api={api}
           organization={organization}
           handleSubmit={this.handleSubmit}
           handleCancel={this.handleCancel}
@@ -76,7 +70,6 @@ class OrganizationEdit extends Component {
 }
 
 OrganizationEdit.propTypes = {
-  api: PropTypes.shape().isRequired,
   organization: PropTypes.shape().isRequired,
 };
 
@@ -85,4 +78,4 @@ OrganizationEdit.contextTypes = {
 };
 
 export { OrganizationEdit as _OrganizationEdit };
-export default withRouter(OrganizationEdit);
+export default withNetwork(withRouter(OrganizationEdit));
diff --git a/src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx b/src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx
index 92ade9427e..da658632c8 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 
+import { withNetwork } from '../../../../contexts/Network';
+
 import NotificationsList from '../../../../components/NotificationsList/Notifications.list';
 
 class OrganizationNotifications extends Component {
@@ -60,4 +62,5 @@ class OrganizationNotifications extends Component {
   }
 }
 
-export default OrganizationNotifications;
+export { OrganizationNotifications as _OrganizationNotifications };
+export default withNetwork(OrganizationNotifications);
diff --git a/src/pages/Organizations/screens/Organization/OrganizationTeams.jsx b/src/pages/Organizations/screens/Organization/OrganizationTeams.jsx
index debe28f78c..3cfbdca636 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationTeams.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationTeams.jsx
@@ -2,7 +2,8 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import OrganizationTeamsList from '../../components/OrganizationTeamsList';
-import { parseQueryString } from '../../../../qs';
+import { parseQueryString } from '../../../../util/qs';
+import { withNetwork } from '../../../../contexts/Network';
 
 const DEFAULT_QUERY_PARAMS = {
   page: 1,
@@ -47,7 +48,7 @@ class OrganizationTeams extends React.Component {
   }
 
   async readOrganizationTeamsList () {
-    const { api, id } = this.props;
+    const { api, handleHttpError, id } = this.props;
     const params = this.getQueryParams();
     this.setState({ isLoading: true });
     try {
@@ -61,7 +62,7 @@ class OrganizationTeams extends React.Component {
         isInitialized: true,
       });
     } catch (error) {
-      this.setState({
+      handleHttpError(error) && this.setState({
         error,
         isLoading: false,
         isInitialized: true,
@@ -94,9 +95,8 @@ class OrganizationTeams extends React.Component {
 }
 
 OrganizationTeams.propTypes = {
-  id: PropTypes.number.isRequired,
-  api: PropTypes.shape().isRequired,
+  id: PropTypes.number.isRequired
 };
 
 export { OrganizationTeams as _OrganizationTeams };
-export default withRouter(OrganizationTeams);
+export default withNetwork(withRouter(OrganizationTeams));
diff --git a/src/pages/Organizations/screens/OrganizationAdd.jsx b/src/pages/Organizations/screens/OrganizationAdd.jsx
index e02a287972..219e5da82d 100644
--- a/src/pages/Organizations/screens/OrganizationAdd.jsx
+++ b/src/pages/Organizations/screens/OrganizationAdd.jsx
@@ -13,6 +13,8 @@ import {
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 
+import { withNetwork } from '../../../contexts/Network';
+
 import OrganizationForm from '../components/OrganizationForm';
 
 class OrganizationAdd extends React.Component {
@@ -29,18 +31,16 @@ class OrganizationAdd extends React.Component {
   }
 
   async handleSubmit (values, groupsToAssociate) {
-    const { api } = this.props;
+    const { api, handleHttpError } = this.props;
     try {
       const { data: response } = await api.createOrganization(values);
       const instanceGroupsUrl = response.related.instance_groups;
       try {
-        await Promise.all(groupsToAssociate.map(async id => {
-          await api.associateInstanceGroup(instanceGroupsUrl, id);
-        }));
-      } catch (err) {
-        this.setState({ error: err });
-      } finally {
+        await Promise.all(groupsToAssociate.map(id => api
+          .associateInstanceGroup(instanceGroupsUrl, id)));
         this.handleSuccess(response.id);
+      } catch (err) {
+        handleHttpError(err) || this.setState({ error: err });
       }
     } catch (err) {
       this.setState({ error: err });
@@ -58,7 +58,6 @@ class OrganizationAdd extends React.Component {
   }
 
   render () {
-    const { api } = this.props;
     const { error } = this.state;
 
     return (
@@ -82,7 +81,6 @@ class OrganizationAdd extends React.Component {
               </CardHeader>
               <CardBody>
                 <OrganizationForm
-                  api={api}
                   handleSubmit={this.handleSubmit}
                   handleCancel={this.handleCancel}
                 />
@@ -105,4 +103,4 @@ OrganizationAdd.contextTypes = {
 };
 
 export { OrganizationAdd as _OrganizationAdd };
-export default withRouter(OrganizationAdd);
+export default withNetwork(withRouter(OrganizationAdd));
diff --git a/src/pages/Organizations/screens/OrganizationsList.jsx b/src/pages/Organizations/screens/OrganizationsList.jsx
index 8b38d8fe95..a3746ebaab 100644
--- a/src/pages/Organizations/screens/OrganizationsList.jsx
+++ b/src/pages/Organizations/screens/OrganizationsList.jsx
@@ -5,31 +5,34 @@ import React, {
 import {
   withRouter
 } from 'react-router-dom';
+
 import { I18n, i18nMark } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
+
 import {
   Card,
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
-  Modal,
   PageSection,
   PageSectionVariants,
   Title,
-  Button,
-  Progress,
-  ProgressVariant
+  Button
 } from '@patternfly/react-core';
 
 import { CubesIcon } from '@patternfly/react-icons';
+
+import { withNetwork } from '../../../contexts/Network';
+
 import DataListToolbar from '../../../components/DataListToolbar';
 import OrganizationListItem from '../components/OrganizationListItem';
 import Pagination from '../../../components/Pagination';
+import AlertModal from '../../../components/AlertModal';
 
 import {
   encodeQueryString,
   parseQueryString,
-} from '../../../qs';
+} from '../../../util/qs';
 
 class OrganizationsList extends Component {
   columns = [
@@ -61,8 +64,6 @@ class OrganizationsList extends Component {
       selected: [],
       isModalOpen: false,
       orgsToDelete: [],
-      orgsDeleted: [],
-      deleteSuccess: false,
 
     };
 
@@ -145,17 +146,14 @@ class OrganizationsList extends Component {
   handleClearOrgsToDelete () {
     this.setState({
       isModalOpen: false,
-      orgsDeleted: [],
-      deleteSuccess: false,
-      orgsToDelete: [],
-      deleteStarted: false
+      orgsToDelete: []
     });
     this.onSelectAll();
   }
 
   handleOpenOrgDeleteModal () {
     const { results, selected } = this.state;
-    const warningTitle = i18nMark('Delete Organization');
+    const warningTitle = selected.length > 1 ? i18nMark('Delete Organization') : i18nMark('Delete Organizations');
     const warningMsg = i18nMark('Are you sure you want to delete:');
 
     const orgsToDelete = [];
@@ -175,24 +173,21 @@ class OrganizationsList extends Component {
   }
 
   async handleOrgDelete (event) {
-    const { orgsToDelete, orgsDeleted } = this.state;
-    const { api } = this.props;
-    this.setState({ deleteStarted: true });
+    const { orgsToDelete } = this.state;
+    const { api, handleHttpError } = this.props;
+    let errorHandled;
 
-    orgsToDelete.forEach(async (org) => {
-      try {
-        const res = await api.destroyOrganization(org.id);
-        this.setState({
-          orgsDeleted: orgsDeleted.concat(res)
-        });
-      } catch {
-        this.setState({ deleteSuccess: false });
-      } finally {
-        this.setState({ deleteSuccess: true });
+    try {
+      await Promise.all(orgsToDelete.map((org) => api.destroyOrganization(org.id)));
+      this.handleClearOrgsToDelete();
+    } catch (err) {
+      errorHandled = handleHttpError(err);
+    } finally {
+      if (!errorHandled) {
         const queryParams = this.getQueryParams();
         this.fetchOrganizations(queryParams);
       }
-    });
+    }
     event.preventDefault();
   }
 
@@ -207,7 +202,7 @@ class OrganizationsList extends Component {
   }
 
   async fetchOrganizations (queryParams) {
-    const { api } = this.props;
+    const { api, handleHttpError } = this.props;
     const { page, page_size, order_by } = queryParams;
 
     let sortOrder = 'ascending';
@@ -235,6 +230,7 @@ class OrganizationsList extends Component {
         sortedColumnKey,
         results,
         selected: [],
+        loading: false
       };
 
       // This is in place to track whether or not the initial request
@@ -248,9 +244,7 @@ class OrganizationsList extends Component {
       this.setState(stateToUpdate);
       this.updateUrl(queryParams);
     } catch (err) {
-      this.setState({ error: true });
-    } finally {
-      this.setState({ loading: false });
+      handleHttpError(err) || this.setState({ error: true, loading: false });
     }
   }
 
@@ -261,12 +255,9 @@ class OrganizationsList extends Component {
     const {
       count,
       error,
-      deleteSuccess,
-      deleteStarted,
       loading,
       noInitialResults,
       orgsToDelete,
-      orgsDeleted,
       page,
       pageCount,
       page_size,
@@ -280,74 +271,60 @@ class OrganizationsList extends Component {
     } = this.state;
     const { match } = this.props;
     return (
-      <PageSection variant={medium}>
-        <Card>
-          { isModalOpen && (
-            <Modal
-              className="orgListAlert"
-              title={warningTitle}
-              isOpen={isModalOpen}
-              style={{ width: '1000px' }}
-              variant="danger"
-              onClose={this.handleClearOrgsToDelete}
-            >
-              {warningMsg}
-              <br />
-              {orgsToDelete.map((org) => (
-                <span key={org.id}>
-                  <strong>
-                    {org.name}
-                  </strong>
+      <I18n>
+        {({ i18n }) => (
+          <PageSection variant={medium}>
+            <Card>
+              { isModalOpen && (
+                <AlertModal
+                  variant="danger"
+                  title={warningTitle}
+                  isOpen={isModalOpen}
+                  onClose={this.handleClearOrgsToDelete}
+                  actions={[
+                    <Button variant="danger" key="delete" aria-label="confirm-delete" onClick={this.handleOrgDelete}>{i18n._(t`Delete`)}</Button>,
+                    <Button variant="secondary" key="cancel" aria-label="cancel-delete" onClick={this.handleClearOrgsToDelete}>{i18n._(t`Cancel`)}</Button>
+                  ]}
+                >
+                  {warningMsg}
                   <br />
-                </span>
-              ))}
-              <div className={deleteStarted ? 'orgListDetete-progressBar' : 'orgListDelete-progressBar-noShow'}>
-                <Progress
-                  value={deleteSuccess ? 100 : 67}
-                  variant={deleteStarted ? ProgressVariant.success : ProgressVariant.danger}
-                />
-              </div>
-              <br />
-              <div className="awx-c-form-action-group">
-                {orgsDeleted.length
-                  ? <Button className="orgListAlert-actionBtn" keys="cancel" variant="primary" aria-label="close-delete" onClick={this.handleClearOrgsToDelete}>Close</Button>
-                  : (
-                    <span>
-                      <Button className="orgListAlert-actionBtn" keys="cancel" variant="secondary" aria-label="cancel-delete" onClick={this.handleClearOrgsToDelete}>Cancel</Button>
-                      <Button className="orgListAlert-actionBtn" keys="cancel" variant="danger" aria-label="confirm-delete" onClick={this.handleOrgDelete}>Delete</Button>
+                  {orgsToDelete.map((org) => (
+                    <span key={org.id}>
+                      <strong>
+                        {org.name}
+                      </strong>
+                      <br />
                     </span>
-                  )}
-              </div>
-            </Modal>
-          )}
-          {noInitialResults && (
-            <EmptyState>
-              <EmptyStateIcon icon={CubesIcon} />
-              <Title size="lg">
-                <Trans>No Organizations Found</Trans>
-              </Title>
-              <EmptyStateBody>
-                <Trans>Please add an organization to populate this list</Trans>
-              </EmptyStateBody>
-            </EmptyState>
-          ) || (
-            <Fragment>
-              <DataListToolbar
-                addUrl={`${match.url}/add`}
-                isAllSelected={selected.length === results.length}
-                sortedColumnKey={sortedColumnKey}
-                sortOrder={sortOrder}
-                columns={this.columns}
-                onSearch={this.onSearch}
-                onSort={this.onSort}
-                onSelectAll={this.onSelectAll}
-                onOpenDeleteModal={this.handleOpenOrgDeleteModal}
-                disableTrashCanIcon={selected.length === 0}
-                showDelete
-                showSelectAll
-              />
-              <I18n>
-                {({ i18n }) => (
+                  ))}
+                  <br />
+                </AlertModal>
+              )}
+              {noInitialResults && (
+                <EmptyState>
+                  <EmptyStateIcon icon={CubesIcon} />
+                  <Title size="lg">
+                    <Trans>No Organizations Found</Trans>
+                  </Title>
+                  <EmptyStateBody>
+                    <Trans>Please add an organization to populate this list</Trans>
+                  </EmptyStateBody>
+                </EmptyState>
+              ) || (
+                <Fragment>
+                  <DataListToolbar
+                    addUrl={`${match.url}/add`}
+                    isAllSelected={selected.length === results.length}
+                    sortedColumnKey={sortedColumnKey}
+                    sortOrder={sortOrder}
+                    columns={this.columns}
+                    onSearch={this.onSearch}
+                    onSort={this.onSort}
+                    onSelectAll={this.onSelectAll}
+                    onOpenDeleteModal={this.handleOpenOrgDeleteModal}
+                    disableTrashCanIcon={selected.length === 0}
+                    showDelete
+                    showSelectAll
+                  />
                   <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
                     { results.map(o => (
                       <OrganizationListItem
@@ -363,23 +340,24 @@ class OrganizationsList extends Component {
                       />
                     ))}
                   </ul>
-                )}
-              </I18n>
-              <Pagination
-                count={count}
-                page={page}
-                pageCount={pageCount}
-                page_size={page_size}
-                onSetPage={this.onSetPage}
-              />
-              { loading ? <div>loading...</div> : '' }
-              { error ? <div>error</div> : '' }
-            </Fragment>
-          )}
-        </Card>
-      </PageSection>
+                  <Pagination
+                    count={count}
+                    page={page}
+                    pageCount={pageCount}
+                    page_size={page_size}
+                    onSetPage={this.onSetPage}
+                  />
+                  { loading ? <div>loading...</div> : '' }
+                  { error ? <div>error</div> : '' }
+                </Fragment>
+              )}
+            </Card>
+          </PageSection>
+        )}
+      </I18n>
     );
   }
 }
 
-export default withRouter(OrganizationsList);
+export { OrganizationsList as _OrganizationsList };
+export default withNetwork(withRouter(OrganizationsList));
diff --git a/src/qs.js b/src/util/qs.js
similarity index 100%
rename from src/qs.js
rename to src/util/qs.js