diff --git a/x-pack/plugins/lists/public/exceptions/__mocks__/api.ts b/x-pack/plugins/lists/public/exceptions/__mocks__/api.ts
index ecc771279b3ab..9651be0d04e8c 100644
--- a/x-pack/plugins/lists/public/exceptions/__mocks__/api.ts
+++ b/x-pack/plugins/lists/public/exceptions/__mocks__/api.ts
@@ -54,3 +54,18 @@ export const fetchExceptionListItemById = async ({
   signal,
 }: ApiCallByIdProps): Promise<ExceptionListItemSchema> =>
   Promise.resolve(getExceptionListItemSchemaMock());
+
+export const deleteExceptionListById = async ({
+  http,
+  id,
+  namespaceType,
+  signal,
+}: ApiCallByIdProps): Promise<ExceptionListSchema> => Promise.resolve(getExceptionListSchemaMock());
+
+export const deleteExceptionListItemById = async ({
+  http,
+  id,
+  namespaceType,
+  signal,
+}: ApiCallByIdProps): Promise<ExceptionListItemSchema> =>
+  Promise.resolve(getExceptionListItemSchemaMock());
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/use_api.test.tsx b/x-pack/plugins/lists/public/exceptions/hooks/use_api.test.tsx
new file mode 100644
index 0000000000000..edf65839c07cf
--- /dev/null
+++ b/x-pack/plugins/lists/public/exceptions/hooks/use_api.test.tsx
@@ -0,0 +1,257 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import * as api from '../api';
+import { createKibanaCoreStartMock } from '../../common/mocks/kibana_core';
+import { getExceptionListSchemaMock } from '../../../common/schemas/response/exception_list_schema.mock';
+import { getExceptionListItemSchemaMock } from '../../../common/schemas/response/exception_list_item_schema.mock';
+import { HttpStart } from '../../../../../../src/core/public';
+import { ApiCallByIdProps } from '../types';
+
+import { ExceptionsApi, useApi } from './use_api';
+
+jest.mock('../api');
+
+const mockKibanaHttpService = createKibanaCoreStartMock().http;
+
+describe('useApi', () => {
+  const onErrorMock = jest.fn();
+
+  afterEach(() => {
+    onErrorMock.mockClear();
+    jest.clearAllMocks();
+  });
+
+  test('it invokes "deleteExceptionListItemById" when "deleteExceptionItem" used', async () => {
+    const payload = getExceptionListItemSchemaMock();
+    const onSuccessMock = jest.fn();
+    const spyOnDeleteExceptionListItemById = jest
+      .spyOn(api, 'deleteExceptionListItemById')
+      .mockResolvedValue(payload);
+
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<HttpStart, ExceptionsApi>(() =>
+        useApi(mockKibanaHttpService)
+      );
+      await waitForNextUpdate();
+
+      const { id, namespace_type: namespaceType } = payload;
+
+      await result.current.deleteExceptionItem({
+        id,
+        namespaceType,
+        onError: jest.fn(),
+        onSuccess: onSuccessMock,
+      });
+
+      const expected: ApiCallByIdProps = {
+        http: mockKibanaHttpService,
+        id,
+        namespaceType,
+        signal: new AbortController().signal,
+      };
+
+      expect(spyOnDeleteExceptionListItemById).toHaveBeenCalledWith(expected);
+      expect(onSuccessMock).toHaveBeenCalled();
+    });
+  });
+
+  test('invokes "onError" callback if "deleteExceptionListItemById" fails', async () => {
+    const mockError = new Error('failed to delete item');
+    jest.spyOn(api, 'deleteExceptionListItemById').mockRejectedValue(mockError);
+
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<HttpStart, ExceptionsApi>(() =>
+        useApi(mockKibanaHttpService)
+      );
+      await waitForNextUpdate();
+
+      const { id, namespace_type: namespaceType } = getExceptionListItemSchemaMock();
+
+      await result.current.deleteExceptionItem({
+        id,
+        namespaceType,
+        onError: onErrorMock,
+        onSuccess: jest.fn(),
+      });
+
+      expect(onErrorMock).toHaveBeenCalledWith(mockError);
+    });
+  });
+
+  test('it invokes "deleteExceptionListById" when "deleteExceptionList" used', async () => {
+    const payload = getExceptionListSchemaMock();
+    const onSuccessMock = jest.fn();
+    const spyOnDeleteExceptionListById = jest
+      .spyOn(api, 'deleteExceptionListById')
+      .mockResolvedValue(payload);
+
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<HttpStart, ExceptionsApi>(() =>
+        useApi(mockKibanaHttpService)
+      );
+      await waitForNextUpdate();
+
+      const { id, namespace_type: namespaceType } = payload;
+
+      await result.current.deleteExceptionList({
+        id,
+        namespaceType,
+        onError: jest.fn(),
+        onSuccess: onSuccessMock,
+      });
+
+      const expected: ApiCallByIdProps = {
+        http: mockKibanaHttpService,
+        id,
+        namespaceType,
+        signal: new AbortController().signal,
+      };
+
+      expect(spyOnDeleteExceptionListById).toHaveBeenCalledWith(expected);
+      expect(onSuccessMock).toHaveBeenCalled();
+    });
+  });
+
+  test('invokes "onError" callback if "deleteExceptionListById" fails', async () => {
+    const mockError = new Error('failed to delete item');
+    jest.spyOn(api, 'deleteExceptionListById').mockRejectedValue(mockError);
+
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<HttpStart, ExceptionsApi>(() =>
+        useApi(mockKibanaHttpService)
+      );
+      await waitForNextUpdate();
+
+      const { id, namespace_type: namespaceType } = getExceptionListSchemaMock();
+
+      await result.current.deleteExceptionList({
+        id,
+        namespaceType,
+        onError: onErrorMock,
+        onSuccess: jest.fn(),
+      });
+
+      expect(onErrorMock).toHaveBeenCalledWith(mockError);
+    });
+  });
+
+  test('it invokes "fetchExceptionListItemById" when "getExceptionItem" used', async () => {
+    const payload = getExceptionListItemSchemaMock();
+    const onSuccessMock = jest.fn();
+    const spyOnFetchExceptionListItemById = jest
+      .spyOn(api, 'fetchExceptionListItemById')
+      .mockResolvedValue(payload);
+
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<HttpStart, ExceptionsApi>(() =>
+        useApi(mockKibanaHttpService)
+      );
+      await waitForNextUpdate();
+
+      const { id, namespace_type: namespaceType } = payload;
+
+      await result.current.getExceptionItem({
+        id,
+        namespaceType,
+        onError: jest.fn(),
+        onSuccess: onSuccessMock,
+      });
+
+      const expected: ApiCallByIdProps = {
+        http: mockKibanaHttpService,
+        id,
+        namespaceType,
+        signal: new AbortController().signal,
+      };
+
+      expect(spyOnFetchExceptionListItemById).toHaveBeenCalledWith(expected);
+      expect(onSuccessMock).toHaveBeenCalled();
+    });
+  });
+
+  test('invokes "onError" callback if "fetchExceptionListItemById" fails', async () => {
+    const mockError = new Error('failed to delete item');
+    jest.spyOn(api, 'fetchExceptionListItemById').mockRejectedValue(mockError);
+
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<HttpStart, ExceptionsApi>(() =>
+        useApi(mockKibanaHttpService)
+      );
+      await waitForNextUpdate();
+
+      const { id, namespace_type: namespaceType } = getExceptionListSchemaMock();
+
+      await result.current.getExceptionItem({
+        id,
+        namespaceType,
+        onError: onErrorMock,
+        onSuccess: jest.fn(),
+      });
+
+      expect(onErrorMock).toHaveBeenCalledWith(mockError);
+    });
+  });
+
+  test('it invokes "fetchExceptionListById" when "getExceptionList" used', async () => {
+    const payload = getExceptionListSchemaMock();
+    const onSuccessMock = jest.fn();
+    const spyOnFetchExceptionListById = jest
+      .spyOn(api, 'fetchExceptionListById')
+      .mockResolvedValue(payload);
+
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<HttpStart, ExceptionsApi>(() =>
+        useApi(mockKibanaHttpService)
+      );
+      await waitForNextUpdate();
+
+      const { id, namespace_type: namespaceType } = payload;
+
+      await result.current.getExceptionList({
+        id,
+        namespaceType,
+        onError: jest.fn(),
+        onSuccess: onSuccessMock,
+      });
+
+      const expected: ApiCallByIdProps = {
+        http: mockKibanaHttpService,
+        id,
+        namespaceType,
+        signal: new AbortController().signal,
+      };
+
+      expect(spyOnFetchExceptionListById).toHaveBeenCalledWith(expected);
+      expect(onSuccessMock).toHaveBeenCalled();
+    });
+  });
+
+  test('invokes "onError" callback if "fetchExceptionListById" fails', async () => {
+    const mockError = new Error('failed to delete item');
+    jest.spyOn(api, 'fetchExceptionListById').mockRejectedValue(mockError);
+
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<HttpStart, ExceptionsApi>(() =>
+        useApi(mockKibanaHttpService)
+      );
+      await waitForNextUpdate();
+
+      const { id, namespace_type: namespaceType } = getExceptionListSchemaMock();
+
+      await result.current.getExceptionList({
+        id,
+        namespaceType,
+        onError: onErrorMock,
+        onSuccess: jest.fn(),
+      });
+
+      expect(onErrorMock).toHaveBeenCalledWith(mockError);
+    });
+  });
+});
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx b/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx
index fbd43787a822e..eeb3ac63ee318 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.test.tsx
@@ -11,7 +11,7 @@ import { createKibanaCoreStartMock } from '../../common/mocks/kibana_core';
 import { getExceptionListSchemaMock } from '../../../common/schemas/response/exception_list_schema.mock';
 import { getExceptionListItemSchemaMock } from '../../../common/schemas/response/exception_list_item_schema.mock';
 import { ExceptionListItemSchema } from '../../../common/schemas';
-import { ExceptionList, UseExceptionListProps } from '../types';
+import { ExceptionList, UseExceptionListProps, UseExceptionListSuccess } from '../types';
 
 import { ReturnExceptionListAndItems, useExceptionList } from './use_exception_list';
 
@@ -57,6 +57,7 @@ describe('useExceptionList', () => {
 
   test('fetch exception list and items', async () => {
     await act(async () => {
+      const onSuccessMock = jest.fn();
       const { result, waitForNextUpdate } = renderHook<
         UseExceptionListProps,
         ReturnExceptionListAndItems
@@ -65,6 +66,7 @@ describe('useExceptionList', () => {
           http: mockKibanaHttpService,
           lists: [{ id: 'myListId', namespaceType: 'single' }],
           onError: onErrorMock,
+          onSuccess: onSuccessMock,
         })
       );
       await waitForNextUpdate();
@@ -78,6 +80,12 @@ describe('useExceptionList', () => {
         { ...getExceptionListItemSchemaMock() },
       ];
 
+      const expectedResult: UseExceptionListSuccess = {
+        exceptions: expectedListItemsResult,
+        lists: expectedListResult,
+        pagination: { page: 1, perPage: 20, total: 1 },
+      };
+
       expect(result.current).toEqual([
         false,
         expectedListResult,
@@ -89,6 +97,7 @@ describe('useExceptionList', () => {
         },
         result.current[4],
       ]);
+      expect(onSuccessMock).toHaveBeenCalledWith(expectedResult);
     });
   });
 
@@ -100,13 +109,14 @@ describe('useExceptionList', () => {
         UseExceptionListProps,
         ReturnExceptionListAndItems
       >(
-        ({ filterOptions, http, lists, pagination, onError }) =>
-          useExceptionList({ filterOptions, http, lists, onError, pagination }),
+        ({ filterOptions, http, lists, pagination, onError, onSuccess }) =>
+          useExceptionList({ filterOptions, http, lists, onError, onSuccess, pagination }),
         {
           initialProps: {
             http: mockKibanaHttpService,
             lists: [{ id: 'myListId', namespaceType: 'single' }],
             onError: onErrorMock,
+            onSuccess: jest.fn(),
           },
         }
       );
diff --git a/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx b/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx
index 1d7a63ba880bf..9595cb7b7558e 100644
--- a/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx
+++ b/x-pack/plugins/lists/public/exceptions/hooks/use_exception_list.tsx
@@ -23,9 +23,9 @@ export type ReturnExceptionListAndItems = [
  * Hook for using to get an ExceptionList and it's ExceptionListItems
  *
  * @param http Kibana http service
- * @param id desired ExceptionList ID (not list_id)
- * @param namespaceType list namespaceType determines list space
+ * @param lists array of ExceptionIdentifiers for all lists to fetch
  * @param onError error callback
+ * @param onSuccess callback when all lists fetched successfully
  * @param filterOptions optional - filter by fields or tags
  * @param pagination optional
  *
@@ -43,7 +43,7 @@ export const useExceptionList = ({
     tags: [],
   },
   onError,
-  dispatchListsInReducer,
+  onSuccess,
 }: UseExceptionListProps): ReturnExceptionListAndItems => {
   const [exceptionLists, setExceptionLists] = useState<ExceptionList[]>([]);
   const [exceptionItems, setExceptionListItems] = useState<ExceptionListItemSchema[]>([]);
@@ -116,8 +116,8 @@ export const useExceptionList = ({
               exceptions = [...exceptions, ...fetchListItemsResult.data];
               setExceptionListItems(exceptions);
 
-              if (dispatchListsInReducer != null) {
-                dispatchListsInReducer({
+              if (onSuccess != null) {
+                onSuccess({
                   exceptions,
                   lists: exceptionListsReturned,
                   pagination: {
diff --git a/x-pack/plugins/lists/public/exceptions/types.ts b/x-pack/plugins/lists/public/exceptions/types.ts
index 286eb0570ebb8..013788cddc076 100644
--- a/x-pack/plugins/lists/public/exceptions/types.ts
+++ b/x-pack/plugins/lists/public/exceptions/types.ts
@@ -37,21 +37,19 @@ export interface ExceptionList extends ExceptionListSchema {
   totalItems: number;
 }
 
+export interface UseExceptionListSuccess {
+  lists: ExceptionList[];
+  exceptions: ExceptionListItemSchema[];
+  pagination: Pagination;
+}
+
 export interface UseExceptionListProps {
   http: HttpStart;
   lists: ExceptionIdentifiers[];
   onError: (arg: Error) => void;
   filterOptions?: FilterExceptionsOptions;
   pagination?: Pagination;
-  dispatchListsInReducer?: ({
-    lists,
-    exceptions,
-    pagination,
-  }: {
-    lists: ExceptionList[];
-    exceptions: ExceptionListItemSchema[];
-    pagination: Pagination;
-  }) => void;
+  onSuccess?: (arg: UseExceptionListSuccess) => void;
 }
 
 export interface ExceptionIdentifiers {
diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx
index 0e527bf4dfc72..0021cd2f20a4b 100644
--- a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx
@@ -6,6 +6,7 @@
 
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable complexity */
+// TODO: Disabling complexity is temporary till this component is refactored as part of lists UI integration
 
 import {
   EuiButton,
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/__examples__/exceptions_search.stories.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/__examples__/exceptions_search.stories.tsx
deleted file mode 100644
index 29cded8f69165..0000000000000
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/__examples__/exceptions_search.stories.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-
-import { ExceptionsViewerHeader } from '../viewer/exceptions_viewer_header';
-import { ExceptionListType } from '../types';
-
-storiesOf('ExceptionsViewerHeader', module)
-  .add('loading', () => {
-    return (
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <ExceptionsViewerHeader
-          isInitLoading={true}
-          detectionsListItems={5}
-          endpointListItems={2000}
-          supportedListTypes={[ExceptionListType.DETECTION_ENGINE, ExceptionListType.ENDPOINT]}
-          onFilterChange={() => {}}
-          onAddExceptionClick={() => {}}
-        />
-      </ThemeProvider>
-    );
-  })
-  .add('all lists', () => {
-    return (
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <ExceptionsViewerHeader
-          isInitLoading={false}
-          detectionsListItems={5}
-          endpointListItems={2000}
-          supportedListTypes={[ExceptionListType.DETECTION_ENGINE, ExceptionListType.ENDPOINT]}
-          onFilterChange={() => {}}
-          onAddExceptionClick={() => {}}
-        />
-      </ThemeProvider>
-    );
-  })
-  .add('endpoint only', () => {
-    return (
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <ExceptionsViewerHeader
-          isInitLoading={false}
-          detectionsListItems={0}
-          endpointListItems={2000}
-          supportedListTypes={[ExceptionListType.DETECTION_ENGINE]}
-          onFilterChange={() => {}}
-          onAddExceptionClick={() => {}}
-        />
-      </ThemeProvider>
-    );
-  })
-  .add('detections only', () => {
-    return (
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <ExceptionsViewerHeader
-          isInitLoading={false}
-          detectionsListItems={5}
-          endpointListItems={0}
-          supportedListTypes={[ExceptionListType.DETECTION_ENGINE]}
-          onFilterChange={() => {}}
-          onAddExceptionClick={() => {}}
-        />
-      </ThemeProvider>
-    );
-  });
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts
index 23e9f64caf695..27dab7cf9db29 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts
@@ -135,5 +135,5 @@ export const REFRESH = i18n.translate('xpack.securitySolution.exceptions.utility
 export const SHOWING_EXCEPTIONS = (items: number) =>
   i18n.translate('xpack.securitySolution.exceptions.utilityNumberExceptionsLabel', {
     values: { items },
-    defaultMessage: 'Showing {items} exceptions',
+    defaultMessage: 'Showing {items} {items, plural, =1 {exception} other {exceptions}}',
   });
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx
index 12287f7cd0fa9..ce7d1d499de6e 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx
@@ -19,7 +19,7 @@ import { DescriptionListItem, ExceptionListItemSchema } from '../../types';
 import { getDescriptionListContent } from '../../helpers';
 import * as i18n from '../../translations';
 
-const StyledExceptionDetails = styled(EuiFlexItem)`
+const MyExceptionDetails = styled(EuiFlexItem)`
   ${({ theme }) => css`
     background-color: ${theme.eui.euiColorLightestShade};
     padding: ${theme.eui.euiSize};
@@ -68,7 +68,7 @@ const ExceptionDetailsComponent = ({
   }, [showComments, onCommentsClick, exceptionItem]);
 
   return (
-    <StyledExceptionDetails grow={2}>
+    <MyExceptionDetails grow={2}>
       <EuiFlexGroup direction="column" alignItems="flexStart">
         <EuiFlexItem grow={1}>
           <EuiDescriptionList compressed type="column" data-test-subj="exceptionsViewerItemDetails">
@@ -82,7 +82,7 @@ const ExceptionDetailsComponent = ({
         </EuiFlexItem>
         <EuiFlexItem grow={false}>{commentsSection}</EuiFlexItem>
       </EuiFlexGroup>
-    </StyledExceptionDetails>
+    </MyExceptionDetails>
   );
 };
 
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx
index b2408a654b1c6..2d022591d9980 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx
@@ -44,7 +44,7 @@ describe('ExceptionEntries', () => {
     expect(wrapper.find('[data-test-subj="exceptionsViewerAndBadge"]')).toHaveLength(1);
   });
 
-  test('it invokes "handlEdit" when edit button clicked', () => {
+  test('it invokes "onEdit" when edit button clicked', () => {
     const mockOnEdit = jest.fn();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
@@ -80,6 +80,39 @@ describe('ExceptionEntries', () => {
     expect(mockOnDelete).toHaveBeenCalledTimes(1);
   });
 
+  test('it renders edit button disabled if "disableDelete" is "true"', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionEntries
+          disableDelete={true}
+          entries={[getFormattedEntryMock()]}
+          onDelete={jest.fn()}
+          onEdit={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+    const editBtn = wrapper.find('[data-test-subj="exceptionsViewerEditBtn"] button').at(0);
+
+    expect(editBtn.prop('disabled')).toBeTruthy();
+  });
+
+  test('it renders delete button in loading state if "disableDelete" is "true"', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionEntries
+          disableDelete={true}
+          entries={[getFormattedEntryMock()]}
+          onDelete={jest.fn()}
+          onEdit={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+    const deleteBtn = wrapper.find('[data-test-subj="exceptionsViewerDeleteBtn"] button').at(0);
+
+    expect(deleteBtn.prop('disabled')).toBeTruthy();
+    expect(deleteBtn.find('.euiLoadingSpinner')).toBeTruthy();
+  });
+
   test('it renders nested entry', () => {
     const parentEntry = getFormattedEntryMock();
     parentEntry.operator = null;
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
index 8c758e3b84f42..58667f1f78b0d 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
@@ -22,11 +22,11 @@ import { getEmptyValue } from '../../../empty_value';
 import * as i18n from '../../translations';
 import { FormattedEntry } from '../../types';
 
-const EntriesDetails = styled(EuiFlexItem)`
+const MyEntriesDetails = styled(EuiFlexItem)`
   padding: ${({ theme }) => theme.eui.euiSize};
 `;
 
-const StyledEditButton = styled(EuiButton)`
+const MyEditButton = styled(EuiButton)`
   ${({ theme }) => css`
     background-color: ${transparentize(0.9, theme.eui.euiColorPrimary)};
     border: none;
@@ -34,7 +34,7 @@ const StyledEditButton = styled(EuiButton)`
   `}
 `;
 
-const StyledRemoveButton = styled(EuiButton)`
+const MyRemoveButton = styled(EuiButton)`
   ${({ theme }) => css`
     background-color: ${transparentize(0.9, theme.eui.euiColorDanger)};
     border: none;
@@ -42,7 +42,7 @@ const StyledRemoveButton = styled(EuiButton)`
   `}
 `;
 
-const AndOrBadgeContainer = styled(EuiFlexItem)`
+const MyAndOrBadgeContainer = styled(EuiFlexItem)`
   padding-top: ${({ theme }) => theme.eui.euiSizeXL};
 `;
 
@@ -118,19 +118,19 @@ const ExceptionEntriesComponent = ({
   );
 
   return (
-    <EntriesDetails grow={5}>
+    <MyEntriesDetails grow={5}>
       <EuiFlexGroup direction="column" gutterSize="m">
         <EuiFlexItem>
           <EuiFlexGroup direction="row" gutterSize="none">
             {entries.length > 1 && (
               <EuiHideFor sizes={['xs', 's']}>
-                <AndOrBadgeContainer grow={false}>
+                <MyAndOrBadgeContainer grow={false}>
                   <AndOrBadge
                     type="and"
                     includeAntennas
                     data-test-subj="exceptionsViewerAndBadge"
                   />
-                </AndOrBadgeContainer>
+                </MyAndOrBadgeContainer>
               </EuiHideFor>
             )}
             <EuiFlexItem grow={1}>
@@ -147,7 +147,7 @@ const ExceptionEntriesComponent = ({
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <StyledEditButton
+              <MyEditButton
                 size="s"
                 color="primary"
                 onClick={onEdit}
@@ -155,10 +155,10 @@ const ExceptionEntriesComponent = ({
                 data-test-subj="exceptionsViewerEditBtn"
               >
                 {i18n.EDIT}
-              </StyledEditButton>
+              </MyEditButton>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <StyledRemoveButton
+              <MyRemoveButton
                 size="s"
                 color="danger"
                 onClick={onDelete}
@@ -166,12 +166,12 @@ const ExceptionEntriesComponent = ({
                 data-test-subj="exceptionsViewerDeleteBtn"
               >
                 {i18n.REMOVE}
-              </StyledRemoveButton>
+              </MyRemoveButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EntriesDetails>
+    </MyEntriesDetails>
   );
 };
 
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/__examples__/exception_item.stories.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx
similarity index 66%
rename from x-pack/plugins/security_solution/public/common/components/exceptions/__examples__/exception_item.stories.tsx
rename to x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx
index 5f2b0b93e9df0..de214b098d4ea 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/__examples__/exception_item.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx
@@ -3,22 +3,22 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { storiesOf } from '@storybook/react';
-import React, { ReactNode } from 'react';
+import { storiesOf, addDecorator } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
-import { ExceptionItem } from '../viewer/exception_item';
-import { Operator } from '../types';
-import { getExceptionItemMock } from '../mocks';
+import { ExceptionItem } from './';
+import { Operator } from '../../types';
+import { getExceptionItemMock } from '../../mocks';
 
-const withTheme = (storyFn: () => ReactNode) => (
+addDecorator((storyFn) => (
   <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>{storyFn()}</ThemeProvider>
-);
+));
 
-storiesOf('ExceptionItem', module)
-  .addDecorator(withTheme)
-  .add('ExceptionItem/with os', () => {
+storiesOf('Components|ExceptionItem', module)
+  .add('with os', () => {
     const payload = getExceptionItemMock();
     payload.description = '';
     payload.comment = [];
@@ -36,8 +36,8 @@ storiesOf('ExceptionItem', module)
         loadingItemIds={[]}
         commentsAccordionId={'accordion--comments'}
         exceptionItem={payload}
-        onDeleteException={() => {}}
-        onEditException={() => {}}
+        onDeleteException={action('onClick')}
+        onEditException={action('onClick')}
       />
     );
   })
@@ -59,8 +59,8 @@ storiesOf('ExceptionItem', module)
         loadingItemIds={[]}
         commentsAccordionId={'accordion--comments'}
         exceptionItem={payload}
-        onDeleteException={() => {}}
-        onEditException={() => {}}
+        onDeleteException={action('onClick')}
+        onEditException={action('onClick')}
       />
     );
   })
@@ -82,8 +82,8 @@ storiesOf('ExceptionItem', module)
         loadingItemIds={[]}
         commentsAccordionId={'accordion--comments'}
         exceptionItem={payload}
-        onDeleteException={() => {}}
-        onEditException={() => {}}
+        onDeleteException={action('onClick')}
+        onEditException={action('onClick')}
       />
     );
   })
@@ -98,8 +98,8 @@ storiesOf('ExceptionItem', module)
         loadingItemIds={[]}
         commentsAccordionId={'accordion--comments'}
         exceptionItem={payload}
-        onDeleteException={() => {}}
-        onEditException={() => {}}
+        onDeleteException={action('onClick')}
+        onEditException={action('onClick')}
       />
     );
   })
@@ -111,8 +111,21 @@ storiesOf('ExceptionItem', module)
         loadingItemIds={[]}
         commentsAccordionId={'accordion--comments'}
         exceptionItem={payload}
-        onDeleteException={() => {}}
-        onEditException={() => {}}
+        onDeleteException={action('onClick')}
+        onEditException={action('onClick')}
+      />
+    );
+  })
+  .add('with loadingItemIds', () => {
+    const { id, namespace_type, ...rest } = getExceptionItemMock();
+
+    return (
+      <ExceptionItem
+        loadingItemIds={[{ id, namespaceType: namespace_type }]}
+        commentsAccordionId={'accordion--comments'}
+        exceptionItem={{ id, namespace_type, ...rest }}
+        onDeleteException={action('onClick')}
+        onEditException={action('onClick')}
       />
     );
   });
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx
index dca3afe4f9069..b4de3639944b1 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx
@@ -51,7 +51,7 @@ describe('ExceptionItem', () => {
     const editBtn = wrapper.find('[data-test-subj="exceptionsViewerEditBtn"] button').at(0);
     editBtn.simulate('click');
 
-    expect(mockOnEditException).toHaveBeenCalledTimes(1);
+    expect(mockOnEditException).toHaveBeenCalledWith(getExceptionItemMock());
   });
 
   it('it invokes "onDeleteException" when delete button clicked', () => {
@@ -73,7 +73,10 @@ describe('ExceptionItem', () => {
     const editBtn = wrapper.find('[data-test-subj="exceptionsViewerDeleteBtn"] button').at(0);
     editBtn.simulate('click');
 
-    expect(mockOnDeleteException).toHaveBeenCalledTimes(1);
+    expect(mockOnDeleteException).toHaveBeenCalledWith({
+      id: 'uuid_here',
+      namespaceType: 'single',
+    });
   });
 
   it('it renders comment accordion closed to begin with', () => {
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx
index 0953a5c666c5d..2920f1a85eee7 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_pagination.tsx
@@ -29,13 +29,14 @@ const ExceptionsViewerPaginationComponent = ({
 }: ExceptionsViewerPaginationProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const closePerPageMenu = useCallback((): void => setIsOpen(false), [setIsOpen]);
+  const handleClosePerPageMenu = useCallback((): void => setIsOpen(false), [setIsOpen]);
 
-  const onPerPageMenuClick = useCallback((): void => setIsOpen((isPopoverOpen) => !isPopoverOpen), [
-    setIsOpen,
-  ]);
+  const handlePerPageMenuClick = useCallback(
+    (): void => setIsOpen((isPopoverOpen) => !isPopoverOpen),
+    [setIsOpen]
+  );
 
-  const onPageClick = useCallback(
+  const handlePageClick = useCallback(
     (pageIndex: number): void => {
       onPaginationChange({
         filter: {},
@@ -63,14 +64,14 @@ const ExceptionsViewerPaginationComponent = ({
               totalItemCount: pagination.totalItemCount,
             },
           });
-          closePerPageMenu();
+          handleClosePerPageMenu();
         }}
         data-test-subj="exceptionsPerPageItem"
       >
         {i18n.NUMBER_OF_ITEMS(rows)}
       </EuiContextMenuItem>
     ));
-  }, [pagination, onPaginationChange, closePerPageMenu]);
+  }, [pagination, onPaginationChange, handleClosePerPageMenu]);
 
   const totalPages = useMemo((): number => {
     if (pagination.totalItemCount > 0) {
@@ -90,14 +91,14 @@ const ExceptionsViewerPaginationComponent = ({
               color="text"
               iconType="arrowDown"
               iconSide="right"
-              onClick={onPerPageMenuClick}
+              onClick={handlePerPageMenuClick}
               data-test-subj="exceptionsPerPageBtn"
             >
               {i18n.ITEMS_PER_PAGE(pagination.pageSize)}
             </EuiButtonEmpty>
           }
           isOpen={isOpen}
-          closePopover={closePerPageMenu}
+          closePopover={handleClosePerPageMenu}
           panelPaddingSize="none"
         >
           <EuiContextMenuPanel items={items} />
@@ -108,7 +109,7 @@ const ExceptionsViewerPaginationComponent = ({
         <EuiPagination
           pageCount={totalPages}
           activePage={pagination.pageIndex}
-          onPageClick={onPageClick}
+          onPageClick={handlePageClick}
           data-test-subj="exceptionsPagination"
         />
       </EuiFlexItem>
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.test.tsx
new file mode 100644
index 0000000000000..d697023b2ced4
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.test.tsx
@@ -0,0 +1,174 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { ExceptionsViewerUtility } from './exceptions_utility';
+
+describe('ExceptionsViewerUtility', () => {
+  it('it renders correct pluralized text when more than one exception exists', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerUtility
+          pagination={{
+            pageIndex: 0,
+            pageSize: 50,
+            totalItemCount: 2,
+            pageSizeOptions: [5, 10, 20, 50, 100],
+          }}
+          filterOptions={{
+            filter: '',
+            showEndpointList: false,
+            showDetectionsList: false,
+            tags: [],
+          }}
+          ruleSettingsUrl={'some/url'}
+          onRefreshClick={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionsShowing"]').at(0).text()).toEqual(
+      'Showing 2 exceptions'
+    );
+  });
+
+  it('it renders correct singular text when less than two exceptions exists', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerUtility
+          pagination={{
+            pageIndex: 0,
+            pageSize: 50,
+            totalItemCount: 1,
+            pageSizeOptions: [5, 10, 20, 50, 100],
+          }}
+          filterOptions={{
+            filter: '',
+            showEndpointList: false,
+            showDetectionsList: false,
+            tags: [],
+          }}
+          ruleSettingsUrl={'some/url'}
+          onRefreshClick={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionsShowing"]').at(0).text()).toEqual(
+      'Showing 1 exception'
+    );
+  });
+
+  it('it invokes "onRefreshClick" when refresh button clicked', () => {
+    const mockOnRefreshClick = jest.fn();
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerUtility
+          pagination={{
+            pageIndex: 0,
+            pageSize: 50,
+            totalItemCount: 1,
+            pageSizeOptions: [5, 10, 20, 50, 100],
+          }}
+          filterOptions={{
+            filter: '',
+            showEndpointList: false,
+            showDetectionsList: false,
+            tags: [],
+          }}
+          ruleSettingsUrl={'some/url'}
+          onRefreshClick={mockOnRefreshClick}
+        />
+      </ThemeProvider>
+    );
+
+    wrapper.find('[data-test-subj="exceptionsRefresh"] button').simulate('click');
+
+    expect(mockOnRefreshClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('it does not render any messages when "showEndpointList" and "showDetectionsList" are "false"', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerUtility
+          pagination={{
+            pageIndex: 0,
+            pageSize: 50,
+            totalItemCount: 1,
+            pageSizeOptions: [5, 10, 20, 50, 100],
+          }}
+          filterOptions={{
+            filter: '',
+            showEndpointList: false,
+            showDetectionsList: false,
+            tags: [],
+          }}
+          ruleSettingsUrl={'some/url'}
+          onRefreshClick={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionsEndpointMessage"]').exists()).toBeFalsy();
+    expect(wrapper.find('[data-test-subj="exceptionsDetectionsMessage"]').exists()).toBeFalsy();
+  });
+
+  it('it does render detections messages when "showDetectionsList" is "true"', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerUtility
+          pagination={{
+            pageIndex: 0,
+            pageSize: 50,
+            totalItemCount: 1,
+            pageSizeOptions: [5, 10, 20, 50, 100],
+          }}
+          filterOptions={{
+            filter: '',
+            showEndpointList: false,
+            showDetectionsList: true,
+            tags: [],
+          }}
+          ruleSettingsUrl={'some/url'}
+          onRefreshClick={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionsEndpointMessage"]').exists()).toBeFalsy();
+    expect(wrapper.find('[data-test-subj="exceptionsDetectionsMessage"]').exists()).toBeTruthy();
+  });
+
+  it('it does render endpoint messages when "showEndpointList" is "true"', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerUtility
+          pagination={{
+            pageIndex: 0,
+            pageSize: 50,
+            totalItemCount: 1,
+            pageSizeOptions: [5, 10, 20, 50, 100],
+          }}
+          filterOptions={{
+            filter: '',
+            showEndpointList: true,
+            showDetectionsList: false,
+            tags: [],
+          }}
+          ruleSettingsUrl={'some/url'}
+          onRefreshClick={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionsEndpointMessage"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="exceptionsDetectionsMessage"]').exists()).toBeFalsy();
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.tsx
new file mode 100644
index 0000000000000..9ab4e170f4090
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.tsx
@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiText, EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+
+import * as i18n from '../translations';
+import { ExceptionsPagination, FilterOptions } from '../types';
+import {
+  UtilityBar,
+  UtilityBarSection,
+  UtilityBarGroup,
+  UtilityBarText,
+  UtilityBarAction,
+} from '../../utility_bar';
+
+const StyledText = styled(EuiText)`
+  font-style: italic;
+`;
+
+const MyUtilities = styled(EuiFlexGroup)`
+  height: 50px;
+`;
+
+interface ExceptionsViewerUtilityProps {
+  pagination: ExceptionsPagination;
+  filterOptions: FilterOptions;
+  ruleSettingsUrl: string;
+  onRefreshClick: () => void;
+}
+
+const ExceptionsViewerUtilityComponent: React.FC<ExceptionsViewerUtilityProps> = ({
+  pagination,
+  filterOptions,
+  ruleSettingsUrl,
+  onRefreshClick,
+}): JSX.Element => (
+  <MyUtilities alignItems="center" justifyContent="spaceBetween">
+    <EuiFlexItem grow={false}>
+      <UtilityBar>
+        <UtilityBarSection>
+          <UtilityBarGroup>
+            <UtilityBarText dataTestSubj="exceptionsShowing">
+              {i18n.SHOWING_EXCEPTIONS(pagination.totalItemCount ?? 0)}
+            </UtilityBarText>
+          </UtilityBarGroup>
+
+          <UtilityBarGroup>
+            <UtilityBarAction
+              dataTestSubj="exceptionsRefresh"
+              iconSide="left"
+              iconType="refresh"
+              onClick={onRefreshClick}
+            >
+              {i18n.REFRESH}
+            </UtilityBarAction>
+          </UtilityBarGroup>
+        </UtilityBarSection>
+      </UtilityBar>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <StyledText size="s">
+        {filterOptions.showEndpointList && (
+          <FormattedMessage
+            id="xpack.securitySolution.exceptions.viewer.exceptionEndpointDetailsDescription"
+            defaultMessage="All exceptions to this rule are applied to the endpoint and the detection rule. View {ruleSettings} for more details."
+            data-test-subj="exceptionsEndpointMessage"
+            values={{
+              ruleSettings: (
+                <EuiLink href={ruleSettingsUrl} target="_blank">
+                  <FormattedMessage
+                    id="xpack.securitySolution.exceptions.viewer.exceptionEndpointDetailsDescription.ruleSettingsLink"
+                    defaultMessage="rule settings"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        )}
+        {filterOptions.showDetectionsList && (
+          <FormattedMessage
+            id="xpack.securitySolution.exceptions.viewer.exceptionDetectionDetailsDescription"
+            defaultMessage="All exceptions to this rule are applied to the detection rule, not the endpoint. View {ruleSettings} for more details."
+            data-test-subj="exceptionsDetectionsMessage"
+            values={{
+              ruleSettings: (
+                <EuiLink href={ruleSettingsUrl} target="_blank">
+                  <FormattedMessage
+                    id="xpack.securitySolution.exceptions.viewer.exceptionDetectionDetailsDescription.ruleSettingsLink"
+                    defaultMessage="rule settings"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        )}
+      </StyledText>
+    </EuiFlexItem>
+  </MyUtilities>
+);
+
+ExceptionsViewerUtilityComponent.displayName = 'ExceptionsViewerUtilityComponent';
+
+export const ExceptionsViewerUtility = React.memo(ExceptionsViewerUtilityComponent);
+
+ExceptionsViewerUtility.displayName = 'ExceptionsViewerUtility';
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.stories.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.stories.tsx
new file mode 100644
index 0000000000000..796af7cd760e2
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.stories.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { storiesOf, addDecorator } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { ExceptionsViewerHeader } from './exceptions_viewer_header';
+import { ExceptionListType } from '../types';
+
+addDecorator((storyFn) => (
+  <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>{storyFn()}</ThemeProvider>
+));
+
+storiesOf('Components|ExceptionsViewerHeader', module)
+  .add('loading', () => {
+    return (
+      <ExceptionsViewerHeader
+        isInitLoading={true}
+        detectionsListItems={5}
+        endpointListItems={2000}
+        supportedListTypes={[ExceptionListType.DETECTION_ENGINE, ExceptionListType.ENDPOINT]}
+        onFilterChange={action('onClick')}
+        onAddExceptionClick={action('onClick')}
+      />
+    );
+  })
+  .add('all lists', () => {
+    return (
+      <ExceptionsViewerHeader
+        isInitLoading={false}
+        detectionsListItems={5}
+        endpointListItems={2000}
+        supportedListTypes={[ExceptionListType.DETECTION_ENGINE, ExceptionListType.ENDPOINT]}
+        onFilterChange={action('onClick')}
+        onAddExceptionClick={action('onClick')}
+      />
+    );
+  })
+  .add('endpoint only', () => {
+    return (
+      <ExceptionsViewerHeader
+        isInitLoading={false}
+        detectionsListItems={0}
+        endpointListItems={2000}
+        supportedListTypes={[ExceptionListType.DETECTION_ENGINE]}
+        onFilterChange={action('onClick')}
+        onAddExceptionClick={action('onClick')}
+      />
+    );
+  })
+  .add('detections only', () => {
+    return (
+      <ExceptionsViewerHeader
+        isInitLoading={false}
+        detectionsListItems={5}
+        endpointListItems={0}
+        supportedListTypes={[ExceptionListType.DETECTION_ENGINE]}
+        onFilterChange={action('onClick')}
+        onAddExceptionClick={action('onClick')}
+      />
+    );
+  });
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.test.tsx
index bdc99370a6293..c609a2296b83d 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.test.tsx
@@ -269,7 +269,7 @@ describe('ExceptionsViewerHeader', () => {
     expect(mockOnAddExceptionClick).toHaveBeenCalledTimes(1);
   });
 
-  it('it invokes "onFilterChange" with filter value when search used', () => {
+  it('it invokes "onFilterChange" when search used and "Enter" pressed', () => {
     const mockOnFilterChange = jest.fn();
     const wrapper = mount(
       <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
@@ -284,54 +284,12 @@ describe('ExceptionsViewerHeader', () => {
       </ThemeProvider>
     );
 
-    wrapper
-      .find('input[data-test-subj="exceptionsHeaderSearch"]')
-      .at(0)
-      .simulate('change', {
-        target: { value: 'host' },
-      });
-
-    expect(mockOnFilterChange).toHaveBeenCalledWith({
-      filter: {
-        filter: 'host',
-        showDetectionsList: false,
-        showEndpointList: false,
-        tags: [],
-      },
-      pagination: {},
+    wrapper.find('EuiFieldSearch').at(0).simulate('keyup', {
+      charCode: 13,
+      code: 'Enter',
+      key: 'Enter',
     });
-  });
-
-  it('it invokes "onFilterChange" with tags values when search value includes "tags:..."', () => {
-    const mockOnFilterChange = jest.fn();
-    const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <ExceptionsViewerHeader
-          supportedListTypes={[ExceptionListType.DETECTION_ENGINE, ExceptionListType.ENDPOINT]}
-          isInitLoading={false}
-          detectionsListItems={0}
-          endpointListItems={0}
-          onFilterChange={mockOnFilterChange}
-          onAddExceptionClick={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    wrapper
-      .find('input[data-test-subj="exceptionsHeaderSearch"]')
-      .at(0)
-      .simulate('change', {
-        target: { value: 'tags:malware' },
-      });
 
-    expect(mockOnFilterChange).toHaveBeenCalledWith({
-      filter: {
-        filter: '',
-        showDetectionsList: false,
-        showEndpointList: false,
-        tags: ['malware'],
-      },
-      pagination: {},
-    });
+    expect(mockOnFilterChange).toHaveBeenCalled();
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.tsx
index 92a8830310b51..0a630414e3267 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.tsx
@@ -69,8 +69,7 @@ const ExceptionsViewerHeaderComponent = ({
   }, [showEndpointList, setShowEndpointList, setShowDetectionsList]);
 
   const handleOnSearch = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>): void => {
-      const searchValue = event.target.value;
+    (searchValue: string): void => {
       const tagsRegex = /(tags:[^\s]*)/i;
       const tagsMatch = searchValue.match(tagsRegex);
       const foundTags: string = tagsMatch != null ? tagsMatch[0].split(':')[1] : '';
@@ -121,7 +120,7 @@ const ExceptionsViewerHeaderComponent = ({
           data-test-subj="exceptionsHeaderSearch"
           aria-label={i18n.SEARCH_DEFAULT}
           placeholder={i18n.SEARCH_DEFAULT}
-          onChange={handleOnSearch}
+          onSearch={handleOnSearch}
           disabled={isInitLoading}
           incremental={false}
           fullWidth
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_item.test.tsx
new file mode 100644
index 0000000000000..dbcae20eb1385
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_item.test.tsx
@@ -0,0 +1,147 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { mount } from 'enzyme';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { getExceptionItemMock } from '../mocks';
+import { ExceptionsViewerItems } from './exceptions_viewer_items';
+
+describe('ExceptionsViewerItems', () => {
+  it('it renders empty prompt if "showEmpty" is "true"', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerItems
+          showEmpty={true}
+          isInitLoading={false}
+          exceptions={[]}
+          loadingItemIds={[]}
+          commentsAccordionId="comments-accordion-id"
+          onDeleteException={jest.fn()}
+          onEditExceptionItem={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionsEmptyPrompt"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="exceptionsContainer"]').exists()).toBeFalsy();
+  });
+
+  it('it renders exceptions if "showEmpty" and "isInitLoading" is "false", and exceptions exist', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerItems
+          showEmpty={false}
+          isInitLoading={false}
+          exceptions={[getExceptionItemMock()]}
+          loadingItemIds={[]}
+          commentsAccordionId="comments-accordion-id"
+          onDeleteException={jest.fn()}
+          onEditExceptionItem={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionsContainer"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="exceptionsEmptyPrompt"]').exists()).toBeFalsy();
+  });
+
+  it('it does not render exceptions if "isInitLoading" is "true"', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerItems
+          showEmpty={false}
+          isInitLoading={true}
+          exceptions={[]}
+          loadingItemIds={[]}
+          commentsAccordionId="comments-accordion-id"
+          onDeleteException={jest.fn()}
+          onEditExceptionItem={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="exceptionsContainer"]').exists()).toBeFalsy();
+    expect(wrapper.find('[data-test-subj="exceptionsEmptyPrompt"]').exists()).toBeTruthy();
+  });
+
+  it('it does not render or badge for first exception displayed', () => {
+    const exception1 = getExceptionItemMock();
+    const exception2 = getExceptionItemMock();
+    exception2.id = 'newId';
+
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerItems
+          showEmpty={false}
+          isInitLoading={false}
+          exceptions={[exception1, exception2]}
+          loadingItemIds={[]}
+          commentsAccordionId="comments-accordion-id"
+          onDeleteException={jest.fn()}
+          onEditExceptionItem={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    const firstExceptionItem = wrapper.find('[data-test-subj="exceptionItemContainer"]').at(0);
+
+    expect(firstExceptionItem.find('[data-test-subj="exceptionItemOrBadge"]').exists()).toBeFalsy();
+  });
+
+  it('it does render or badge with exception displayed', () => {
+    const exception1 = getExceptionItemMock();
+    const exception2 = getExceptionItemMock();
+    exception2.id = 'newId';
+
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerItems
+          showEmpty={false}
+          isInitLoading={false}
+          exceptions={[exception1, exception2]}
+          loadingItemIds={[]}
+          commentsAccordionId="comments-accordion-id"
+          onDeleteException={jest.fn()}
+          onEditExceptionItem={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    const notFirstExceptionItem = wrapper.find('[data-test-subj="exceptionItemContainer"]').at(1);
+
+    expect(
+      notFirstExceptionItem.find('[data-test-subj="exceptionItemOrBadge"]').exists()
+    ).toBeFalsy();
+  });
+
+  it('it invokes "onDeleteException" when delete button is clicked', () => {
+    const mockOnDeleteException = jest.fn();
+
+    const wrapper = mount(
+      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+        <ExceptionsViewerItems
+          showEmpty={false}
+          isInitLoading={false}
+          exceptions={[getExceptionItemMock()]}
+          loadingItemIds={[]}
+          commentsAccordionId="comments-accordion-id"
+          onDeleteException={mockOnDeleteException}
+          onEditExceptionItem={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    wrapper.find('[data-test-subj="exceptionsViewerDeleteBtn"] button').at(0).simulate('click');
+
+    expect(mockOnDeleteException).toHaveBeenCalledWith({
+      id: 'uuid_here',
+      namespaceType: 'single',
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx
new file mode 100644
index 0000000000000..e1ef3c10188b3
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.tsx
@@ -0,0 +1,100 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import styled from 'styled-components';
+
+import * as i18n from '../translations';
+import { ExceptionListItemSchema, ApiProps } from '../types';
+import { ExceptionItem } from './exception_item';
+import { AndOrBadge } from '../../and_or_badge';
+
+const MyFlexItem = styled(EuiFlexItem)`
+  margin: ${({ theme }) => `${theme.eui.euiSize} 0`};
+
+  &:first-child {
+    margin: ${({ theme }) => `${theme.eui.euiSizeXS} 0 ${theme.eui.euiSize}`};
+  }
+`;
+
+const MyExceptionsContainer = styled(EuiFlexGroup)`
+  height: 600px;
+  overflow: hidden;
+`;
+
+const MyExceptionItemContainer = styled(EuiFlexGroup)`
+  margin: ${({ theme }) => `0 ${theme.eui.euiSize} ${theme.eui.euiSize} 0`};
+`;
+
+interface ExceptionsViewerItemsProps {
+  showEmpty: boolean;
+  isInitLoading: boolean;
+  exceptions: ExceptionListItemSchema[];
+  loadingItemIds: ApiProps[];
+  commentsAccordionId: string;
+  onDeleteException: (arg: ApiProps) => void;
+  onEditExceptionItem: (item: ExceptionListItemSchema) => void;
+}
+
+const ExceptionsViewerItemsComponent: React.FC<ExceptionsViewerItemsProps> = ({
+  showEmpty,
+  isInitLoading,
+  exceptions,
+  loadingItemIds,
+  commentsAccordionId,
+  onDeleteException,
+  onEditExceptionItem,
+}): JSX.Element => (
+  <MyExceptionsContainer direction="column" className="eui-yScrollWithShadows">
+    {showEmpty || isInitLoading ? (
+      <EuiFlexItem grow={1}>
+        <EuiEmptyPrompt
+          iconType="advancedSettingsApp"
+          title={<h2>{i18n.EXCEPTION_EMPTY_PROMPT_TITLE}</h2>}
+          body={<p>{i18n.EXCEPTION_EMPTY_PROMPT_BODY}</p>}
+          data-test-subj="exceptionsEmptyPrompt"
+        />
+      </EuiFlexItem>
+    ) : (
+      <EuiFlexItem grow={false} className="eui-yScrollWithShadows">
+        <MyExceptionItemContainer
+          data-test-subj="exceptionsContainer"
+          gutterSize="none"
+          direction="column"
+        >
+          {!isInitLoading &&
+            exceptions.length > 0 &&
+            exceptions.map((exception, index) => (
+              <MyFlexItem data-test-subj="exceptionItemContainer" grow={false} key={exception.id}>
+                {index !== 0 ? (
+                  <>
+                    <AndOrBadge data-test-subj="exceptionItemOrBadge" type="or" />
+                    <EuiSpacer />
+                  </>
+                ) : (
+                  <EuiSpacer size="s" />
+                )}
+                <ExceptionItem
+                  loadingItemIds={loadingItemIds}
+                  commentsAccordionId={commentsAccordionId}
+                  exceptionItem={exception}
+                  onDeleteException={onDeleteException}
+                  onEditException={onEditExceptionItem}
+                />
+              </MyFlexItem>
+            ))}
+        </MyExceptionItemContainer>
+      </EuiFlexItem>
+    )}
+  </MyExceptionsContainer>
+);
+
+ExceptionsViewerItemsComponent.displayName = 'ExceptionsViewerItemsComponent';
+
+export const ExceptionsViewerItems = React.memo(ExceptionsViewerItemsComponent);
+
+ExceptionsViewerItems.displayName = 'ExceptionsViewerItems';
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.test.tsx
index cc8e8111064bc..b77b8380c39f1 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.test.tsx
@@ -46,7 +46,7 @@ describe('ExceptionsViewer', () => {
     ]);
   });
 
-  it('it renders loader if "initLoading" is true', () => {
+  it('it renders loader if "loadingList" is true', () => {
     (useExceptionList as jest.Mock).mockReturnValue([
       true,
       [],
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
index 3cf59c7dda023..1051962852219 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/index.tsx
@@ -4,21 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useState, useMemo, useEffect, useReducer } from 'react';
-import {
-  EuiEmptyPrompt,
-  EuiText,
-  EuiLink,
-  EuiOverlayMask,
-  EuiModal,
-  EuiModalBody,
-  EuiCodeBlock,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '@elastic/eui';
-import { FormattedMessage } from 'react-intl';
-import styled from 'styled-components';
+import React, { useCallback, useMemo, useEffect, useReducer } from 'react';
+import { EuiOverlayMask, EuiModal, EuiModalBody, EuiCodeBlock, EuiSpacer } from '@elastic/eui';
 import uuid from 'uuid';
 
 import * as i18n from '../translations';
@@ -40,25 +27,9 @@ import {
   ExceptionIdentifiers,
   useApi,
 } from '../../../../../public/lists_plugin_deps';
-import { ExceptionItem } from './exception_item';
-import { AndOrBadge } from '../../and_or_badge';
 import { ExceptionsViewerPagination } from './exceptions_pagination';
-import {
-  UtilityBar,
-  UtilityBarSection,
-  UtilityBarGroup,
-  UtilityBarText,
-  UtilityBarAction,
-} from '../../utility_bar';
-
-const StyledText = styled(EuiText)`
-  font-style: italic;
-`;
-
-const MyExceptionsContainer = styled.div`
-  height: 600px;
-  overflow: hidden;
-`;
+import { ExceptionsViewerUtility } from './exceptions_utility';
+import { ExceptionsViewerItems } from './exceptions_viewer_items';
 
 const initialState: State = {
   filterOptions: { filter: '', showEndpointList: false, showDetectionsList: false, tags: [] },
@@ -73,7 +44,9 @@ const initialState: State = {
   allExceptions: [],
   exceptions: [],
   exceptionToEdit: null,
+  loadingLists: [],
   loadingItemIds: [],
+  isInitLoading: true,
   isModalOpen: false,
 };
 
@@ -99,7 +72,6 @@ const ExceptionsViewerComponent = ({
 }: ExceptionsViewerProps): JSX.Element => {
   const { services } = useKibana();
   const [, dispatchToaster] = useStateToaster();
-  const [initLoading, setInitLoading] = useState(true);
   const onDispatchToaster = useCallback(
     ({ title, color, iconType }) => (): void => {
       dispatchToaster({
@@ -114,7 +86,6 @@ const ExceptionsViewerComponent = ({
     },
     [dispatchToaster]
   );
-  const { deleteExceptionItem } = useApi(services.http);
   const [
     {
       endpointList,
@@ -122,13 +93,15 @@ const ExceptionsViewerComponent = ({
       exceptions,
       filterOptions,
       pagination,
+      loadingLists,
       loadingItemIds,
+      isInitLoading,
       isModalOpen,
     },
     dispatch,
-  ] = useReducer(allExceptionItemsReducer(), initialState);
+  ] = useReducer(allExceptionItemsReducer(), { ...initialState, loadingLists: exceptionListsMeta });
+  const { deleteExceptionItem } = useApi(services.http);
 
-  // TODO: Update icky typing once api updated
   const setExceptions = useCallback(
     ({
       lists: newLists,
@@ -146,14 +119,14 @@ const ExceptionsViewerComponent = ({
   );
   const [loadingList, , , , fetchList] = useExceptionList({
     http: services.http,
-    lists: exceptionListsMeta,
+    lists: loadingLists,
     filterOptions,
     pagination: {
       page: pagination.pageIndex + 1,
       perPage: pagination.pageSize,
       total: pagination.totalItemCount,
     },
-    dispatchListsInReducer: setExceptions,
+    onSuccess: setExceptions,
     onError: onDispatchToaster({
       color: 'danger',
       title: i18n.FETCH_LIST_ERROR,
@@ -171,24 +144,25 @@ const ExceptionsViewerComponent = ({
     [dispatch]
   );
 
-  const onFetchList = useCallback((): void => {
+  const handleFetchList = useCallback((): void => {
     if (fetchList != null) {
       fetchList();
     }
   }, [fetchList]);
 
-  const onFiltersChange = useCallback(
+  const handleFilterChange = useCallback(
     ({ filter, pagination: pag }: Filter): void => {
       dispatch({
         type: 'updateFilterOptions',
         filterOptions: filter,
         pagination: pag,
+        allLists: exceptionListsMeta,
       });
     },
-    [dispatch]
+    [dispatch, exceptionListsMeta]
   );
 
-  const onAddException = useCallback(
+  const handleAddException = useCallback(
     (type: ExceptionListType): void => {
       setIsModalOpen(true);
     },
@@ -219,9 +193,9 @@ const ExceptionsViewerComponent = ({
         onAssociateList(listId);
       }
 
-      onFetchList();
+      handleFetchList();
     },
-    [setIsModalOpen, onFetchList, onAssociateList]
+    [setIsModalOpen, handleFetchList, onAssociateList]
   );
 
   const setLoadingItemIds = useCallback(
@@ -236,12 +210,14 @@ const ExceptionsViewerComponent = ({
 
   const handleDeleteException = useCallback(
     ({ id, namespaceType }: ApiProps) => {
+      setLoadingItemIds([{ id, namespaceType }]);
+
       deleteExceptionItem({
         id,
         namespaceType,
         onSuccess: () => {
           setLoadingItemIds(loadingItemIds.filter((t) => t.id !== id));
-          onFetchList();
+          handleFetchList();
         },
         onError: () => {
           const dispatchToasterError = onDispatchToaster({
@@ -255,65 +231,29 @@ const ExceptionsViewerComponent = ({
         },
       });
     },
-    [setLoadingItemIds, deleteExceptionItem, loadingItemIds, onFetchList, onDispatchToaster]
+    [setLoadingItemIds, deleteExceptionItem, loadingItemIds, handleFetchList, onDispatchToaster]
   );
 
   // Logic for initial render
   useEffect((): void => {
-    if (initLoading && !loadingList && (exceptions.length === 0 || exceptions != null)) {
-      setInitLoading(false);
+    if (isInitLoading && !loadingList && (exceptions.length === 0 || exceptions != null)) {
+      dispatch({
+        type: 'updateIsInitLoading',
+        loading: false,
+      });
     }
-  }, [initLoading, exceptions, loadingList]);
+  }, [isInitLoading, exceptions, loadingList, dispatch]);
 
+  // Used in utility bar info text
   const ruleSettingsUrl = useMemo((): string => {
     return services.application.getUrlForApp(
       `security#/detections/rules/id/${encodeURI(ruleId)}/edit`
     );
   }, [ruleId, services.application]);
 
-  const exceptionsSubtext = useMemo((): JSX.Element => {
-    if (filterOptions.showEndpointList) {
-      return (
-        <FormattedMessage
-          id="xpack.securitySolution.exceptions.viewer.exceptionEndpointDetailsDescription"
-          defaultMessage="All exceptions to this rule are applied to the endpoint and the detection rule. View {ruleSettings} for more details."
-          values={{
-            ruleSettings: (
-              <EuiLink href={ruleSettingsUrl} target="_blank">
-                <FormattedMessage
-                  id="xpack.securitySolution.exceptions.viewer.exceptionEndpointDetailsDescription.ruleSettingsLink"
-                  defaultMessage="rule settings"
-                />
-              </EuiLink>
-            ),
-          }}
-        />
-      );
-    } else if (filterOptions.showDetectionsList) {
-      return (
-        <FormattedMessage
-          id="xpack.securitySolution.exceptions.viewer.exceptionDetectionDetailsDescription"
-          defaultMessage="All exceptions to this rule are applied to the detection rule, not the endpoint. View {ruleSettings} for more details."
-          values={{
-            ruleSettings: (
-              <EuiLink href={ruleSettingsUrl} target="_blank">
-                <FormattedMessage
-                  id="xpack.securitySolution.exceptions.viewer.exceptionDetectionDetailsDescription.ruleSettingsLink"
-                  defaultMessage="rule settings"
-                />
-              </EuiLink>
-            ),
-          }}
-        />
-      );
-    } else {
-      return <></>;
-    }
-  }, [filterOptions.showEndpointList, filterOptions.showDetectionsList, ruleSettingsUrl]);
-
   const showEmpty = useMemo((): boolean => {
-    return !initLoading && !loadingList && exceptions.length === 0;
-  }, [initLoading, exceptions.length, loadingList]);
+    return !isInitLoading && !loadingList && exceptions.length === 0;
+  }, [isInitLoading, exceptions.length, loadingList]);
 
   return (
     <>
@@ -329,80 +269,43 @@ const ExceptionsViewerComponent = ({
         </EuiOverlayMask>
       )}
 
-      <Panel loading={initLoading}>
-        {initLoading && <Loader data-test-subj="loadingPanelAllRulesTable" overlay size="xl" />}
+      <Panel loading={isInitLoading || loadingList}>
+        {(isInitLoading || loadingList) && (
+          <Loader data-test-subj="loadingPanelAllRulesTable" overlay size="xl" />
+        )}
 
         <ExceptionsViewerHeader
-          isInitLoading={initLoading}
+          isInitLoading={isInitLoading}
           supportedListTypes={availableListTypes}
           detectionsListItems={detectionsList != null ? detectionsList.totalItems : 0}
           endpointListItems={endpointList != null ? endpointList.totalItems : 0}
-          onFilterChange={onFiltersChange}
-          onAddExceptionClick={onAddException}
+          onFilterChange={handleFilterChange}
+          onAddExceptionClick={handleAddException}
         />
 
-        {(filterOptions.showEndpointList || filterOptions.showDetectionsList) && (
-          <>
-            <EuiSpacer size="xs" />
-            <StyledText size="s">{exceptionsSubtext}</StyledText>
-          </>
-        )}
-
         <EuiSpacer size="l" />
 
-        <UtilityBar>
-          <UtilityBarSection>
-            <UtilityBarGroup>
-              <UtilityBarText dataTestSubj="showingRules">
-                {i18n.SHOWING_EXCEPTIONS(pagination.totalItemCount ?? 0)}
-              </UtilityBarText>
-            </UtilityBarGroup>
-
-            <UtilityBarGroup>
-              <UtilityBarAction iconSide="left" iconType="refresh" onClick={onFetchList}>
-                {i18n.REFRESH}
-              </UtilityBarAction>
-            </UtilityBarGroup>
-          </UtilityBarSection>
-        </UtilityBar>
-
-        <EuiSpacer size="s" />
-
-        <MyExceptionsContainer className="eui-yScrollWithShadows">
-          {showEmpty && (
-            <EuiEmptyPrompt
-              iconType="advancedSettingsApp"
-              title={<h2>{i18n.EXCEPTION_EMPTY_PROMPT_TITLE}</h2>}
-              body={<p>{i18n.EXCEPTION_EMPTY_PROMPT_BODY}</p>}
-              data-test-subj="exceptionsEmptyPrompt"
-            />
-          )}
-
-          <EuiSpacer size="s" />
-
-          <EuiFlexGroup direction="column" className="eui-yScrollWithShadows">
-            {!initLoading &&
-              exceptions.length > 0 &&
-              exceptions.map((exception, index) => (
-                <EuiFlexItem grow={false} key={exception.id}>
-                  {index !== 0 && (
-                    <>
-                      <AndOrBadge type="or" />
-                      <EuiSpacer />
-                    </>
-                  )}
-                  <ExceptionItem
-                    loadingItemIds={loadingItemIds}
-                    commentsAccordionId={commentsAccordionId}
-                    exceptionItem={exception}
-                    onDeleteException={handleDeleteException}
-                    onEditException={handleEditException}
-                  />
-                </EuiFlexItem>
-              ))}
-          </EuiFlexGroup>
-        </MyExceptionsContainer>
-        <ExceptionsViewerPagination onPaginationChange={onFiltersChange} pagination={pagination} />
+        <ExceptionsViewerUtility
+          pagination={pagination}
+          filterOptions={filterOptions}
+          onRefreshClick={handleFetchList}
+          ruleSettingsUrl={ruleSettingsUrl}
+        />
+
+        <ExceptionsViewerItems
+          showEmpty={showEmpty}
+          isInitLoading={isInitLoading}
+          exceptions={exceptions}
+          loadingItemIds={loadingItemIds}
+          commentsAccordionId={commentsAccordionId}
+          onDeleteException={handleDeleteException}
+          onEditExceptionItem={handleEditException}
+        />
+
+        <ExceptionsViewerPagination
+          onPaginationChange={handleFilterChange}
+          pagination={pagination}
+        />
       </Panel>
     </>
   );
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts
index 40d5bb5f0a297..538207458f0ed 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/reducer.ts
@@ -10,7 +10,7 @@ import {
   ExceptionListItemSchema,
   Pagination,
 } from '../types';
-import { ExceptionList } from '../../../../../public/lists_plugin_deps';
+import { ExceptionList, ExceptionIdentifiers } from '../../../../../public/lists_plugin_deps';
 
 export interface State {
   filterOptions: FilterOptions;
@@ -20,7 +20,9 @@ export interface State {
   allExceptions: ExceptionListItemSchema[];
   exceptions: ExceptionListItemSchema[];
   exceptionToEdit: ExceptionListItemSchema | null;
+  loadingLists: ExceptionIdentifiers[];
   loadingItemIds: ApiProps[];
+  isInitLoading: boolean;
   isModalOpen: boolean;
 }
 
@@ -35,7 +37,9 @@ export type Action =
       type: 'updateFilterOptions';
       filterOptions: Partial<FilterOptions>;
       pagination: Partial<ExceptionsPagination>;
+      allLists: ExceptionIdentifiers[];
     }
+  | { type: 'updateIsInitLoading'; loading: boolean }
   | { type: 'updateModalOpen'; isOpen: boolean }
   | { type: 'updateExceptionToEdit'; exception: ExceptionListItemSchema }
   | { type: 'updateLoadingItemIds'; items: ApiProps[] };
@@ -78,26 +82,34 @@ export const allExceptionItemsReducer = () => (state: State, action: Action): St
       };
 
       if (action.filterOptions.showEndpointList) {
-        const exceptions = state.allExceptions.filter((t) => t._tags.includes('endpoint'));
+        const list = action.allLists.filter((t) => t.type === 'endpoint');
 
         return {
           ...returnState,
-          exceptions,
+          loadingLists: list,
+          exceptions: list.length === 0 ? [] : [...state.exceptions],
         };
       } else if (action.filterOptions.showDetectionsList) {
-        const exceptions = state.allExceptions.filter((t) => t._tags.includes('detection'));
+        const list = action.allLists.filter((t) => t.type === 'detection');
 
         return {
           ...returnState,
-          exceptions,
+          loadingLists: list,
+          exceptions: list.length === 0 ? [] : [...state.exceptions],
         };
       } else {
         return {
           ...returnState,
-          exceptions: state.allExceptions,
+          loadingLists: action.allLists,
         };
       }
     }
+    case 'updateIsInitLoading': {
+      return {
+        ...state,
+        isInitLoading: action.loading,
+      };
+    }
     case 'updateLoadingItemIds': {
       return {
         ...state,