diff --git a/__tests__/components/CapitalizeText.test.jsx b/__tests__/components/CapitalizeText.test.jsx
new file mode 100644
index 0000000000..30e3fcb7ce
--- /dev/null
+++ b/__tests__/components/CapitalizeText.test.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import CapitalizeText from '../../src/components/CapitalizeText';
+
+describe('<CapitalizeText />', () => {
+  let capitalizeTextWrapper;
+
+  test('initially renders without crashing', () => {
+    capitalizeTextWrapper = mount(
+      <CapitalizeText text="foo" />
+    );
+    expect(capitalizeTextWrapper.length).toBe(1);
+    expect(capitalizeTextWrapper.text()).toEqual('Foo');
+    capitalizeTextWrapper.unmount();
+  });
+});
diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx
index facc3b1128..958573e2f1 100644
--- a/__tests__/components/DataListToolbar.test.jsx
+++ b/__tests__/components/DataListToolbar.test.jsx
@@ -36,6 +36,7 @@ describe('<DataListToolbar />', () => {
           onSearch={onSearch}
           onSort={onSort}
           onSelectAll={onSelectAll}
+          showSelectAll
         />
       </I18nProvider>
     );
diff --git a/__tests__/components/NotificationList.test.jsx b/__tests__/components/NotificationList.test.jsx
new file mode 100644
index 0000000000..bbe6a912dc
--- /dev/null
+++ b/__tests__/components/NotificationList.test.jsx
@@ -0,0 +1,160 @@
+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';
+
+describe('<Notifications />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <Notifications
+            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
+            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+  });
+  test('fetches notifications on mount', () => {
+    const spy = jest.spyOn(Notifications.prototype, 'fetchNotifications');
+    mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <Notifications
+            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
+            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+    expect(spy).toHaveBeenCalled();
+  });
+  test('toggle success calls post', () => {
+    const spy = jest.spyOn(Notifications.prototype, 'postToSuccess');
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <Notifications
+            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
+            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('Notifications');
+    wrapper.instance().toggleSuccess(1, true);
+    expect(spy).toHaveBeenCalledWith(1, true);
+  });
+  test('post success makes request and updates state properly', async () => {
+    const postSuccessFn = jest.fn();
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <Notifications
+            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
+            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+            postSuccess={postSuccessFn}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('Notifications');
+    wrapper.setState({ successTemplateIds: [44] });
+    await wrapper.instance().postToSuccess(44, true);
+    expect(postSuccessFn).toHaveBeenCalledWith(1, { id: 44, disassociate: true });
+    expect(wrapper.state('successTemplateIds')).not.toContain(44);
+    await wrapper.instance().postToSuccess(44, false);
+    expect(postSuccessFn).toHaveBeenCalledWith(1, { id: 44 });
+    expect(wrapper.state('successTemplateIds')).toContain(44);
+  });
+  test('toggle error calls post', () => {
+    const spy = jest.spyOn(Notifications.prototype, 'postToError');
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <Notifications
+            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications' }}
+            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('Notifications');
+    wrapper.instance().toggleError(1, true);
+    expect(spy).toHaveBeenCalledWith(1, true);
+  });
+  test('post error makes request and updates state properly', async () => {
+    const postErrorFn = jest.fn();
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <Notifications
+            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
+            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+            postError={postErrorFn}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('Notifications');
+    wrapper.setState({ errorTemplateIds: [44] });
+    await wrapper.instance().postToError(44, true);
+    expect(postErrorFn).toHaveBeenCalledWith(1, { id: 44, disassociate: true });
+    expect(wrapper.state('errorTemplateIds')).not.toContain(44);
+    await wrapper.instance().postToError(44, false);
+    expect(postErrorFn).toHaveBeenCalledWith(1, { id: 44 });
+    expect(wrapper.state('errorTemplateIds')).toContain(44);
+  });
+  test('fetchNotifications', async () => {
+    const mockQueryParams = {
+      page: 44,
+      page_size: 10,
+      order_by: 'name'
+    };
+    const getNotificationsFn = jest.fn().mockResolvedValue({
+      data: {
+        results: [
+          { id: 1 },
+          { id: 2 },
+          { id: 3 }
+        ]
+      }
+    });
+    const getSuccessFn = jest.fn().mockResolvedValue({
+      data: {
+        results: [
+          { id: 1 }
+        ]
+      }
+    });
+    const getErrorFn = jest.fn().mockResolvedValue({
+      data: {
+        results: [
+          { id: 2 }
+        ]
+      }
+    });
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <Notifications
+            match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
+            location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
+            getNotifications={getNotificationsFn}
+            getSuccess={getSuccessFn}
+            getError={getErrorFn}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('Notifications');
+    wrapper.instance().updateUrl = jest.fn();
+    await wrapper.instance().fetchNotifications(mockQueryParams);
+    expect(getNotificationsFn).toHaveBeenCalledWith(1, mockQueryParams);
+    expect(getSuccessFn).toHaveBeenCalledWith(1, {
+      id__in: '1,2,3'
+    });
+    expect(getErrorFn).toHaveBeenCalledWith(1, {
+      id__in: '1,2,3'
+    });
+    expect(wrapper.state('successTemplateIds')).toContain(1);
+    expect(wrapper.state('errorTemplateIds')).toContain(2);
+  });
+});
diff --git a/__tests__/components/NotificationListItem.test.jsx b/__tests__/components/NotificationListItem.test.jsx
new file mode 100644
index 0000000000..d184b0a28e
--- /dev/null
+++ b/__tests__/components/NotificationListItem.test.jsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
+import NotificationListItem from '../../src/components/NotificationsList/NotificationListItem';
+
+describe('<NotificationListItem />', () => {
+  let wrapper;
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+      wrapper = null;
+    }
+  });
+
+  test('initially renders succesfully', () => {
+    wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <NotificationListItem />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+    expect(wrapper.length).toBe(1);
+  });
+
+  test('handles success click when toggle is on', () => {
+    const successToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'successToggleClick');
+    const toggleSuccessPropFn = jest.fn();
+    wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <NotificationListItem
+            itemId={9000}
+            successTurnedOn
+            toggleSuccess={toggleSuccessPropFn}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+    wrapper.find('Switch').first().find('input').simulate('change');
+    expect(successToggleClickSpy).toHaveBeenCalledWith(true);
+    expect(toggleSuccessPropFn).toHaveBeenCalledWith(9000, true);
+  });
+
+  test('handles success click when toggle is off', () => {
+    const successToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'successToggleClick');
+    const toggleSuccessPropFn = jest.fn();
+    wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <NotificationListItem
+            itemId={9000}
+            successTurnedOn={false}
+            toggleSuccess={toggleSuccessPropFn}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+    wrapper.find('Switch').first().find('input').simulate('change');
+    expect(successToggleClickSpy).toHaveBeenCalledWith(false);
+    expect(toggleSuccessPropFn).toHaveBeenCalledWith(9000, false);
+  });
+
+  test('handles error click when toggle is on', () => {
+    const errorToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'errorToggleClick');
+    const toggleErrorPropFn = jest.fn();
+    wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <NotificationListItem
+            itemId={9000}
+            errorTurnedOn
+            toggleError={toggleErrorPropFn}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+    wrapper.find('Switch').at(1).find('input').simulate('change');
+    expect(errorToggleClickSpy).toHaveBeenCalledWith(true);
+    expect(toggleErrorPropFn).toHaveBeenCalledWith(9000, true);
+  });
+
+  test('handles error click when toggle is off', () => {
+    const errorToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'errorToggleClick');
+    const toggleErrorPropFn = jest.fn();
+    wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <NotificationListItem
+            itemId={9000}
+            errorTurnedOn={false}
+            toggleError={toggleErrorPropFn}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+    wrapper.find('Switch').at(1).find('input').simulate('change');
+    expect(errorToggleClickSpy).toHaveBeenCalledWith(false);
+    expect(toggleErrorPropFn).toHaveBeenCalledWith(9000, false);
+  });
+});
diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
index aaaa7adde4..7262ae85a9 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationDetail.test.jsx
@@ -12,6 +12,7 @@ describe('<OrganizationDetail />', () => {
           <OrganizationDetail
             match={{ path: '/organizations/:id', url: '/organizations/1' }}
             location={{ search: '', pathname: '/organizations/1' }}
+            params={{}}
           />
         </MemoryRouter>
       </I18nProvider>
diff --git a/src/api.js b/src/api.js
index ce915bd136..bc8821dce3 100644
--- a/src/api.js
+++ b/src/api.js
@@ -70,6 +70,36 @@ class APIClient {
     return this.http.get(endpoint);
   }
 
+  getOrganizationNotifications (id, params = {}) {
+    const endpoint = `${API_ORGANIZATIONS}${id}/notification_templates/`;
+
+    return this.http.get(endpoint, { params });
+  }
+
+  getOrganizationNotificationSuccess (id, params = {}) {
+    const endpoint = `${API_ORGANIZATIONS}${id}/notification_templates_success/`;
+
+    return this.http.get(endpoint, { params });
+  }
+
+  getOrganizationNotificationError (id, params = {}) {
+    const endpoint = `${API_ORGANIZATIONS}${id}/notification_templates_error/`;
+
+    return this.http.get(endpoint, { params });
+  }
+
+  postOrganizationNotificationSuccess (id, data) {
+    const endpoint = `${API_ORGANIZATIONS}${id}/notification_templates_success/`;
+
+    return this.http.post(endpoint, data);
+  }
+
+  postOrganizationNotificationError (id, data) {
+    const endpoint = `${API_ORGANIZATIONS}${id}/notification_templates_error/`;
+
+    return this.http.post(endpoint, data);
+  }
+  
   getInstanceGroups () {
     return this.http.get(API_INSTANCE_GROUPS);
   }
diff --git a/src/app.scss b/src/app.scss
index 5d2f72d701..b4b176f3d3 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -82,6 +82,10 @@
 
   --pf-c-data-list__item--PaddingTop: 16px;
   --pf-c-data-list__item--PaddingBottom: 16px;
+
+  .pf-c-badge:not(:last-child), .pf-c-switch:not(:last-child) {
+    margin-right: 18px;
+  }
 }
 
 .pf-c-data-list__item {
@@ -107,10 +111,6 @@
   margin-right: 8px;
 }
 
-.pf-c-data-list__cell span {
-  margin-right: 18px;
-}
-
 //
 // about modal overrides
 //
@@ -119,13 +119,6 @@
   --pf-c-about-modal-box--MaxWidth: 63rem;
 }
 
-.pf-c-list {
-  li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-}
 
 .awx-lookup {
   min-height: 36px;
@@ -157,6 +150,12 @@
 .awx-c-list {
   border-top: 1px solid #d7d7d7;
   border-bottom: 1px solid #d7d7d7;
+
+  li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 }
 //
 // pf modal overrides
diff --git a/src/components/CapitalizeText.jsx b/src/components/CapitalizeText.jsx
new file mode 100644
index 0000000000..9411f395e6
--- /dev/null
+++ b/src/components/CapitalizeText.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+class CapitalizeText extends React.Component {
+  upperCaseFirstLetter = (string) => (typeof string === 'string' ? string.charAt(0).toUpperCase() + string.slice(1) : '');
+
+  render () {
+    const { text } = this.props;
+    return (
+      this.upperCaseFirstLetter(text)
+    );
+  }
+}
+
+export default CapitalizeText;
diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index 0936e7bdc8..8ea46641a8 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -106,7 +106,9 @@ class DataListToolbar extends React.Component {
       sortedColumnKey,
       sortOrder,
       addUrl,
-      showExpandCollapse
+      showExpandCollapse,
+      showDelete,
+      showSelectAll
     } = this.props;
     const {
       // isActionDropdownOpen,
@@ -149,19 +151,19 @@ class DataListToolbar extends React.Component {
           <div className="awx-toolbar">
             <Level>
               <LevelItem>
-                <Toolbar
-                  style={{ marginLeft: '20px' }}
-                >
-                  <ToolbarGroup>
-                    <ToolbarItem>
-                      <Checkbox
-                        checked={isAllSelected}
-                        onChange={onSelectAll}
-                        aria-label={i18n._(t`Select all`)}
-                        id="select-all"
-                      />
-                    </ToolbarItem>
-                  </ToolbarGroup>
+                <Toolbar style={{ marginLeft: '20px' }}>
+                  { showSelectAll && (
+                    <ToolbarGroup>
+                      <ToolbarItem>
+                        <Checkbox
+                          checked={isAllSelected}
+                          onChange={onSelectAll}
+                          aria-label={i18n._(t`Select all`)}
+                          id="select-all"
+                        />
+                      </ToolbarItem>
+                    </ToolbarGroup>
+                  )}
                   <ToolbarGroup>
                     <ToolbarItem>
                       <div className="pf-c-input-group">
@@ -248,17 +250,19 @@ class DataListToolbar extends React.Component {
                 </Toolbar>
               </LevelItem>
               <LevelItem>
-                <Tooltip
-                  message={i18n._(t`Delete`)}
-                  position="top"
-                >
-                  <Button
-                    variant="plain"
-                    aria-label={i18n._(t`Delete`)}
+                { showDelete && (
+                  <Tooltip
+                    message={i18n._(t`Delete`)}
+                    position="top"
                   >
-                    <TrashAltIcon />
-                  </Button>
-                </Tooltip>
+                    <Button
+                      variant="plain"
+                      aria-label={i18n._(t`Delete`)}
+                    >
+                      <TrashAltIcon />
+                    </Button>
+                  </Tooltip>
+                )}
                 {addUrl && (
                   <Link to={addUrl}>
                     <Button
diff --git a/src/components/NotificationsList/NotificationListItem.jsx b/src/components/NotificationsList/NotificationListItem.jsx
new file mode 100644
index 0000000000..8b3e414235
--- /dev/null
+++ b/src/components/NotificationsList/NotificationListItem.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Link
+} from 'react-router-dom';
+import {
+  Badge,
+  Switch
+} from '@patternfly/react-core';
+import CapitalizeText from '../CapitalizeText';
+
+class NotificationListItem extends React.Component {
+  constructor (props) {
+    super(props);
+    this.errorToggleClick = this.errorToggleClick.bind(this);
+    this.successToggleClick = this.successToggleClick.bind(this);
+  }
+
+  errorToggleClick (flag) {
+    const { itemId, toggleError } = this.props;
+    toggleError(itemId, flag);
+  }
+
+  successToggleClick (flag) {
+    const { itemId, toggleSuccess } = this.props;
+    toggleSuccess(itemId, flag);
+  }
+
+  render () {
+    const {
+      itemId,
+      name,
+      notificationType,
+      detailUrl,
+      parentBreadcrumb,
+      successTurnedOn,
+      errorTurnedOn
+    } = this.props;
+
+    return (
+      <I18n>
+        {({ i18n }) => (
+          <li key={itemId} className="pf-c-data-list__item">
+            <div className="pf-c-data-list__cell pf-u-flex-row">
+              <div className="pf-u-display-inline-flex">
+                <Link
+                  to={{
+                    pathname: detailUrl,
+                    state: { breadcrumb: [parentBreadcrumb, { name, url: detailUrl }] }
+                  }}
+                >
+                  <b>{name}</b>
+                </Link>
+              </div>
+              <Badge
+                className="pf-u-display-inline-flex"
+                isRead
+              >
+                {' '}
+                <CapitalizeText text={notificationType} />
+                {' '}
+              </Badge>
+            </div>
+            <div className="pf-c-data-list__cell" />
+            <div className="pf-c-data-list__cell pf-u-display-flex pf-u-justify-content-flex-end">
+              <Switch
+                label={i18n._(t`Successful`)}
+                isChecked={successTurnedOn}
+                onChange={() => this.successToggleClick(successTurnedOn)}
+                aria-label={i18n._(t`Notification success toggle`)}
+              />
+              <Switch
+                label={i18n._(t`Failure`)}
+                isChecked={errorTurnedOn}
+                onChange={() => this.errorToggleClick(errorTurnedOn)}
+                aria-label={i18n._(t`Notification failure toggle`)}
+              />
+            </div>
+          </li>
+        )}
+      </I18n>
+    );
+  }
+}
+
+export default NotificationListItem;
+
diff --git a/src/components/NotificationsList/Notifications.list.jsx b/src/components/NotificationsList/Notifications.list.jsx
new file mode 100644
index 0000000000..af6d2a9a61
--- /dev/null
+++ b/src/components/NotificationsList/Notifications.list.jsx
@@ -0,0 +1,353 @@
+import React, {
+  Component,
+  Fragment
+} from 'react';
+import { Title, EmptyState, EmptyStateIcon } from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+import { I18n, i18nMark } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
+
+import DataListToolbar from '../DataListToolbar';
+import NotificationListItem from './NotificationListItem';
+import Pagination from '../Pagination';
+
+import {
+  encodeQueryString,
+  parseQueryString,
+} from '../../qs';
+
+class Notifications extends Component {
+  columns = [
+    { name: i18nMark('Name'), key: 'name', isSortable: true },
+    { name: i18nMark('Modified'), key: 'modified', isSortable: true, isNumeric: true },
+    { name: i18nMark('Created'), key: 'created', isSortable: true, isNumeric: true },
+  ];
+
+  defaultParams = {
+    page: 1,
+    page_size: 5,
+    order_by: 'name',
+  };
+
+  pageSizeOptions = [5, 10, 25, 50];
+
+  constructor (props) {
+    super(props);
+
+    const { page, page_size } = this.getQueryParams();
+
+    this.state = {
+      page,
+      page_size,
+      sortedColumnKey: 'name',
+      sortOrder: 'ascending',
+      count: null,
+      error: null,
+      loading: true,
+      results: [],
+      selected: [],
+      successTemplateIds: [],
+      errorTemplateIds: []
+    };
+  }
+
+  componentDidMount () {
+    const queryParams = this.getQueryParams();
+    // TODO: remove this hack once tab query param is gone
+    const { tab, ...queryParamsWithoutTab } = queryParams;
+    this.fetchNotifications(queryParamsWithoutTab);
+  }
+
+  onSearch () {
+    const { sortedColumnKey, sortOrder } = this.state;
+
+    this.onSort(sortedColumnKey, sortOrder);
+  }
+
+  getQueryParams (overrides = {}) {
+    const { location } = this.props;
+    const { search } = location;
+
+    const searchParams = parseQueryString(search.substring(1));
+    // TODO: remove this hack once tab query param is gone
+    const { tab, ...queryParamsWithoutTab } = searchParams;
+
+    return Object.assign({}, this.defaultParams, queryParamsWithoutTab, overrides);
+  }
+
+  onSort = (sortedColumnKey, sortOrder) => {
+    const { page_size } = this.state;
+
+    let order_by = sortedColumnKey;
+
+    if (sortOrder === 'descending') {
+      order_by = `-${order_by}`;
+    }
+
+    const queryParams = this.getQueryParams({ order_by, page_size });
+
+    this.fetchNotifications(queryParams);
+  };
+
+  onSetPage = (pageNumber, pageSize) => {
+    const page = parseInt(pageNumber, 10);
+    const page_size = parseInt(pageSize, 10);
+
+    const queryParams = this.getQueryParams({ page, page_size });
+
+    this.fetchNotifications(queryParams);
+  };
+
+  onSelectAll = isSelected => {
+    const { results } = this.state;
+
+    const selected = isSelected ? results.map(o => o.id) : [];
+
+    this.setState({ selected });
+  };
+
+  onSelect = id => {
+    const { selected } = this.state;
+
+    const isSelected = selected.includes(id);
+
+    if (isSelected) {
+      this.setState({ selected: selected.filter(s => s !== id) });
+    } else {
+      this.setState({ selected: selected.concat(id) });
+    }
+  };
+
+  toggleError = (id, isCurrentlyOn) => {
+    this.postToError(id, isCurrentlyOn);
+  };
+
+  toggleSuccess = (id, isCurrentlyOn) => {
+    this.postToSuccess(id, isCurrentlyOn);
+  };
+
+  updateUrl (queryParams) {
+    const { history, location, match } = this.props;
+    const pathname = match.url;
+    const search = `?${encodeQueryString(queryParams)}`;
+
+    if (search !== location.search) {
+      history.replace({ pathname, search });
+    }
+  }
+
+  async postToError (id, isCurrentlyOn) {
+    const { postError, match } = this.props;
+    const postParams = { id };
+    if (isCurrentlyOn) {
+      postParams.disassociate = true;
+    }
+    try {
+      await postError(match.params.id, postParams);
+    } catch (err) {
+      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]
+        }));
+      }
+    }
+  }
+
+  async postToSuccess (id, isCurrentlyOn) {
+    const { postSuccess, match } = this.props;
+    const postParams = { id };
+    if (isCurrentlyOn) {
+      postParams.disassociate = true;
+    }
+    try {
+      await postSuccess(match.params.id, postParams);
+    } catch (err) {
+      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]
+        }));
+      }
+    }
+  }
+
+  async fetchNotifications (queryParams) {
+    const { noInitialResults } = this.state;
+    const { getNotifications, getSuccess, getError, match } = this.props;
+    const { page, page_size, order_by } = queryParams;
+
+    let sortOrder = 'ascending';
+    let sortedColumnKey = order_by;
+
+    if (order_by.startsWith('-')) {
+      sortOrder = 'descending';
+      sortedColumnKey = order_by.substring(1);
+    }
+
+    this.setState({ error: false, loading: true });
+
+    try {
+      const { data } = await getNotifications(match.params.id, queryParams);
+      const { count, results } = data;
+
+      const pageCount = Math.ceil(count / page_size);
+
+      const stateToUpdate = {
+        count,
+        page,
+        pageCount,
+        page_size,
+        sortOrder,
+        sortedColumnKey,
+        results,
+        noInitialResults,
+        selected: []
+      };
+
+      // This is in place to track whether or not the initial request
+      // return any results.  If it did not, we show the empty state.
+      // This will become problematic once search is in play because
+      // the first load may have query params (think bookmarked search)
+      if (typeof noInitialResults === 'undefined') {
+        stateToUpdate.noInitialResults = results.length === 0;
+      }
+
+      this.setState(stateToUpdate);
+      // TODO: remove this hack once tab query param is gone
+      this.updateUrl({ ...queryParams, tab: 'notifications' });
+
+      const notificationTemplateIds = results
+        .map(notificationTemplate => notificationTemplate.id)
+        .join(',');
+
+      let successTemplateIds = [];
+      let errorTemplateIds = [];
+
+      if (results.length > 0) {
+        const successTemplatesPromise = getSuccess(match.params.id, {
+          id__in: notificationTemplateIds
+        });
+        const errorTemplatesPromise = getError(match.params.id, {
+          id__in: notificationTemplateIds
+        });
+        const successTemplatesResult = await successTemplatesPromise;
+        const errorTemplatesResult = await errorTemplatesPromise;
+
+        successTemplateIds = successTemplatesResult.data.results
+          .map(successTemplate => successTemplate.id);
+        errorTemplateIds = errorTemplatesResult.data.results
+          .map(errorTemplate => errorTemplate.id);
+      }
+      this.setState({
+        successTemplateIds,
+        errorTemplateIds
+      });
+    } catch (err) {
+      this.setState({ error: true });
+    } finally {
+      this.setState({ loading: false });
+    }
+  }
+
+  render () {
+    const {
+      count,
+      error,
+      loading,
+      page,
+      pageCount,
+      page_size,
+      sortedColumnKey,
+      sortOrder,
+      results,
+      noInitialResults,
+      selected,
+      successTemplateIds,
+      errorTemplateIds
+    } = this.state;
+    const { match } = this.props;
+    const parentBreadcrumb = { name: i18nMark('Organizations'), url: match.url };
+
+    return (
+      <Fragment>
+        {noInitialResults && (
+          <EmptyState>
+            <EmptyStateIcon icon={CubesIcon} />
+            <Title size="lg">
+              <Trans>NO NOTIFICATIONS HAVE BEEN CREATED</Trans>
+            </Title>
+          </EmptyState>
+        )}
+        <Fragment>
+          {(
+            typeof noInitialResults !== 'undefined'
+            && !noInitialResults
+            && !loading
+            && !error
+          ) && (
+            <Fragment>
+              <DataListToolbar
+                isAllSelected={selected.length === results.length}
+                sortedColumnKey={sortedColumnKey}
+                sortOrder={sortOrder}
+                columns={this.columns}
+                onSearch={this.onSearch}
+                onSort={this.onSort}
+                onSelectAll={this.onSelectAll}
+              />
+              <I18n>
+                {({ i18n }) => (
+                  <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
+                    {results.map(o => (
+                      <NotificationListItem
+                        key={o.id}
+                        itemId={o.id}
+                        name={o.name}
+                        notificationType={o.notification_type}
+                        detailUrl={`notifications/${o.id}`}
+                        parentBreadcrumb={parentBreadcrumb}
+                        isSelected={selected.includes(o.id)}
+                        onSelect={() => this.onSelect(o.id)}
+                        errorTurnedOn={errorTemplateIds.includes(o.id)}
+                        toggleError={this.toggleError}
+                        successTurnedOn={successTemplateIds.includes(o.id)}
+                        toggleSuccess={this.toggleSuccess}
+                      />
+                    ))}
+                  </ul>
+                )}
+              </I18n>
+              <Pagination
+                count={count}
+                page={page}
+                pageCount={pageCount}
+                page_size={page_size}
+                pageSizeOptions={this.pageSizeOptions}
+                onSetPage={this.onSetPage}
+              />
+            </Fragment>
+          )}
+          {loading ? <div>loading...</div> : ''}
+          {error ? <div>error</div> : ''}
+        </Fragment>
+      </Fragment>
+    );
+  }
+}
+
+export default Notifications;
diff --git a/src/pages/Organizations/Organizations.jsx b/src/pages/Organizations/Organizations.jsx
index 97ff6ad83f..27f1830cc6 100644
--- a/src/pages/Organizations/Organizations.jsx
+++ b/src/pages/Organizations/Organizations.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import OrganizationsList from './screens/OrganizationsList';
-import OrganizationAdd from './screens/OrganizationAdd'
+import OrganizationAdd from './screens/OrganizationAdd';
 import Organization from './screens/Organization/Organization';
 
-export default ({ api, match }) => (
+export default ({ api, match, history }) => (
   <Switch>
     <Route
       path={`${match.path}/add`}
@@ -20,6 +20,7 @@ export default ({ api, match }) => (
       render={() => (
         <Organization
           api={api}
+          history={history}
         />
       )}
     />
diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx
index f1415e3ebc..acd0dd407a 100644
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@@ -75,7 +75,7 @@ class Organization extends Component {
   }
 
   render () {
-    const { location, match } = this.props;
+    const { location, match, api, history } = this.props;
     const { parentBreadcrumbObj, organization, error, loading } = this.state;
     const params = new URLSearchParams(location.search);
     const currentTab = params.get('tab') || 'details';
@@ -92,7 +92,7 @@ class Organization extends Component {
           <Switch>
             <Route
               path={`${match.path}/edit`}
-              component={() => (
+              render={() => (
                 <OrganizationEdit
                   location={location}
                   match={match}
@@ -105,7 +105,7 @@ class Organization extends Component {
             />
             <Route
               path={`${match.path}`}
-              component={() => (
+              render={() => (
                 <OrganizationDetail
                   location={location}
                   match={match}
@@ -113,6 +113,8 @@ class Organization extends Component {
                   organization={organization}
                   params={params}
                   currentTab={currentTab}
+                  history={history}
+                  api={api}
                 />
               )}
             />
diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
index e9e230132b..74c0c1286d 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
@@ -12,21 +12,24 @@ import {
   Route
 } from 'react-router-dom';
 
+import NotificationsList from '../../../../components/NotificationsList/Notifications.list';
+
 import Tab from '../../../../components/Tabs/Tab';
 import Tabs from '../../../../components/Tabs/Tabs';
 import getTabName from '../../utils';
 
-
 const OrganizationDetail = ({
   location,
   match,
   parentBreadcrumbObj,
   organization,
   params,
-  currentTab
+  currentTab,
+  api,
+  history
 }) => {
   // TODO: set objectName by param or through grabbing org detail get from api
-  const tabList=['details', 'access', 'teams', 'notifications'];
+  const tabList = ['details', 'access', 'teams', 'notifications'];
 
   const deleteResourceView = () => (
     <Fragment>
@@ -46,19 +49,41 @@ const OrganizationDetail = ({
     </Fragment>
   );
 
-  const resourceView = () => (
-    <Fragment>
-      <Trans>{`${currentTab} detail view  `}</Trans>
-      <Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        <Trans>{`add ${currentTab}`}</Trans>
-      </Link>
-      {'  '}
-      <Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-        <Trans>{`delete ${currentTab}`}</Trans>
-      </Link>
-    </Fragment>
-  );
-
+  const resourceView = () => {
+    let relatedTemplate;
+    switch (currentTab) {
+      case 'notifications':
+        relatedTemplate = (
+          <Fragment>
+            <NotificationsList
+              getNotifications={(id, reqParams) => api.getOrganizationNotifications(id, reqParams)}
+              getSuccess={(id, reqParams) => api.getOrganizationNotificationSuccess(id, reqParams)}
+              getError={(id, reqParams) => api.getOrganizationNotificationError(id, reqParams)}
+              postSuccess={(id, data) => api.postOrganizationNotificationSuccess(id, data)}
+              postError={(id, data) => api.postOrganizationNotificationError(id, data)}
+              match={match}
+              location={location}
+              history={history}
+            />
+          </Fragment>
+        );
+        break;
+      default:
+        relatedTemplate = (
+          <Fragment>
+            <Trans>{`${currentTab} detail view  `}</Trans>
+            <Link to={{ pathname: `${match.url}/add-resource`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+              <Trans>{`add ${currentTab}`}</Trans>
+            </Link>
+            {'  '}
+            <Link to={{ pathname: `${match.url}/delete-resources`, search: `?${params.toString()}`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
+              <Trans>{`delete ${currentTab}`}</Trans>
+            </Link>
+          </Fragment>
+        );
+    }
+    return relatedTemplate;
+  };
 
   return (
     <Card className="at-c-orgPane">
@@ -83,20 +108,11 @@ const OrganizationDetail = ({
         </I18n>
       </CardHeader>
       <CardBody>
-        {(currentTab && currentTab !== 'details') ? (
-          <Switch>
-            <Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
-            <Route path={`${match.path}/add-resource`} component={() => addResourceView()} />
-            <Route path={`${match.path}`} component={() => resourceView()} />
-          </Switch>
-        ) : (
-          <Fragment>
-            {'detail view  '}
-            <Link to={{ pathname: `${match.url}/edit`, state: { breadcrumb: parentBreadcrumbObj, organization } }}>
-              {'edit'}
-            </Link>
-          </Fragment>
-        )}
+        <Switch>
+          <Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
+          <Route path={`${match.path}/add-resource`} component={() => addResourceView()} />
+          <Route path={`${match.path}`} render={(props) => resourceView(props)} />
+        </Switch>
       </CardBody>
     </Card>
   );
diff --git a/src/pages/Organizations/screens/OrganizationsList.jsx b/src/pages/Organizations/screens/OrganizationsList.jsx
index 0ff60fcaf1..5e3f0bd5d9 100644
--- a/src/pages/Organizations/screens/OrganizationsList.jsx
+++ b/src/pages/Organizations/screens/OrganizationsList.jsx
@@ -75,16 +75,7 @@ class OrganizationsList extends Component {
     this.onSort(sortedColumnKey, sortOrder);
   }
 
-  getQueryParams (overrides = {}) {
-    const { location } = this.props;
-    const { search } = location;
-
-    const searchParams = parseQueryString(search.substring(1));
-
-    return Object.assign({}, this.defaultParams, searchParams, overrides);
-  }
-
-  onSort(sortedColumnKey, sortOrder) {
+  onSort (sortedColumnKey, sortOrder) {
     const { page_size } = this.state;
 
     let order_by = sortedColumnKey;
@@ -127,6 +118,15 @@ class OrganizationsList extends Component {
     }
   }
 
+  getQueryParams (overrides = {}) {
+    const { location } = this.props;
+    const { search } = location;
+
+    const searchParams = parseQueryString(search.substring(1));
+
+    return Object.assign({}, this.defaultParams, searchParams, overrides);
+  }
+
   updateUrl (queryParams) {
     const { history, location } = this.props;
     const pathname = '/organizations';
@@ -212,6 +212,8 @@ class OrganizationsList extends Component {
             onSearch={this.onSearch}
             onSort={this.onSort}
             onSelectAll={this.onSelectAll}
+            showDelete
+            showSelectAll
           />
           <I18n>
             {({ i18n }) => (