diff --git a/x-pack/plugins/security_solution/common/endpoint/constants.ts b/x-pack/plugins/security_solution/common/endpoint/constants.ts
index a6018837fa4fe..cd59c2518794c 100644
--- a/x-pack/plugins/security_solution/common/endpoint/constants.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/constants.ts
@@ -13,6 +13,7 @@ export const telemetryIndexPattern = 'metrics-endpoint.telemetry-*';
 export const LIMITED_CONCURRENCY_ENDPOINT_ROUTE_TAG = 'endpoint:limited-concurrency';
 export const LIMITED_CONCURRENCY_ENDPOINT_COUNT = 100;
 
+export const TRUSTED_APPS_SUPPORTED_OS_TYPES: readonly string[] = ['macos', 'windows', 'linux'];
 export const TRUSTED_APPS_LIST_API = '/api/endpoint/trusted_apps';
 export const TRUSTED_APPS_CREATE_API = '/api/endpoint/trusted_apps';
 export const TRUSTED_APPS_DELETE_API = '/api/endpoint/trusted_apps/{id}';
diff --git a/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.test.ts b/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.test.ts
index b0c769216732d..fc94e9a7c312a 100644
--- a/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.test.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.test.ts
@@ -76,7 +76,7 @@ describe('When invoking Trusted Apps Schema', () => {
       os: 'windows',
       entries: [
         {
-          field: 'path',
+          field: 'process.path',
           type: 'match',
           operator: 'included',
           value: 'c:/programs files/Anti-Virus',
@@ -111,14 +111,6 @@ describe('When invoking Trusted Apps Schema', () => {
       expect(body.validate(bodyMsg)).toStrictEqual(bodyMsg);
     });
 
-    it('should validate `description` to be non-empty if defined', () => {
-      const bodyMsg = {
-        ...getCreateTrustedAppItem(),
-        description: '',
-      };
-      expect(() => body.validate(bodyMsg)).toThrow();
-    });
-
     it('should validate `os` to to only accept known values', () => {
       const bodyMsg = {
         ...getCreateTrustedAppItem(),
@@ -202,7 +194,7 @@ describe('When invoking Trusted Apps Schema', () => {
         };
         expect(() => body.validate(bodyMsg2)).toThrow();
 
-        ['hash', 'path'].forEach((field) => {
+        ['process.hash.*', 'process.path'].forEach((field) => {
           const bodyMsg3 = {
             ...getCreateTrustedAppItem(),
             entries: [
@@ -217,9 +209,55 @@ describe('When invoking Trusted Apps Schema', () => {
         });
       });
 
-      it.todo('should validate `entry.type` is limited to known values');
+      it('should validate `entry.type` is limited to known values', () => {
+        const bodyMsg = {
+          ...getCreateTrustedAppItem(),
+          entries: [
+            {
+              ...getTrustedAppItemEntryItem(),
+              type: 'invalid',
+            },
+          ],
+        };
+        expect(() => body.validate(bodyMsg)).toThrow();
+
+        // Allow `match`
+        const bodyMsg2 = {
+          ...getCreateTrustedAppItem(),
+          entries: [
+            {
+              ...getTrustedAppItemEntryItem(),
+              type: 'match',
+            },
+          ],
+        };
+        expect(() => body.validate(bodyMsg2)).not.toThrow();
+      });
+
+      it('should validate `entry.operator` is limited to known values', () => {
+        const bodyMsg = {
+          ...getCreateTrustedAppItem(),
+          entries: [
+            {
+              ...getTrustedAppItemEntryItem(),
+              operator: 'invalid',
+            },
+          ],
+        };
+        expect(() => body.validate(bodyMsg)).toThrow();
 
-      it.todo('should validate `entry.operator` is limited to known values');
+        // Allow `match`
+        const bodyMsg2 = {
+          ...getCreateTrustedAppItem(),
+          entries: [
+            {
+              ...getTrustedAppItemEntryItem(),
+              operator: 'included',
+            },
+          ],
+        };
+        expect(() => body.validate(bodyMsg2)).not.toThrow();
+      });
 
       it('should validate `entry.value` required', () => {
         const { value, ...entry } = getTrustedAppItemEntryItem();
diff --git a/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts b/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts
index 7c0de84b637c9..72e24a7d694d4 100644
--- a/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts
@@ -22,11 +22,11 @@ export const GetTrustedAppsRequestSchema = {
 export const PostTrustedAppCreateRequestSchema = {
   body: schema.object({
     name: schema.string({ minLength: 1 }),
-    description: schema.maybe(schema.string({ minLength: 1 })),
+    description: schema.maybe(schema.string({ minLength: 0, defaultValue: '' })),
     os: schema.oneOf([schema.literal('linux'), schema.literal('macos'), schema.literal('windows')]),
     entries: schema.arrayOf(
       schema.object({
-        field: schema.oneOf([schema.literal('hash'), schema.literal('path')]),
+        field: schema.oneOf([schema.literal('process.hash.*'), schema.literal('process.path')]),
         type: schema.literal('match'),
         operator: schema.literal('included'),
         value: schema.string({ minLength: 1 }),
diff --git a/x-pack/plugins/security_solution/common/endpoint/types/trusted_apps.ts b/x-pack/plugins/security_solution/common/endpoint/types/trusted_apps.ts
index 7aeb6c6024b99..3356fc67d2682 100644
--- a/x-pack/plugins/security_solution/common/endpoint/types/trusted_apps.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/types/trusted_apps.ts
@@ -25,17 +25,17 @@ export interface PostTrustedAppCreateResponse {
   data: TrustedApp;
 }
 
-interface MacosLinuxConditionEntry {
-  field: 'hash' | 'path';
+export interface MacosLinuxConditionEntry {
+  field: 'process.hash.*' | 'process.path';
   type: 'match';
   operator: 'included';
   value: string;
 }
 
-type WindowsConditionEntry =
+export type WindowsConditionEntry =
   | MacosLinuxConditionEntry
   | (Omit<MacosLinuxConditionEntry, 'field'> & {
-      field: 'signer';
+      field: 'process.code_signature';
     });
 
 /** Type for a new Trusted App Entry */
diff --git a/x-pack/plugins/security_solution/public/management/common/routing.ts b/x-pack/plugins/security_solution/public/management/common/routing.ts
index 62f360df90192..40320ed794203 100644
--- a/x-pack/plugins/security_solution/public/management/common/routing.ts
+++ b/x-pack/plugins/security_solution/public/management/common/routing.ts
@@ -21,6 +21,7 @@ import {
 import { AdministrationSubTab } from '../types';
 import { appendSearch } from '../../common/components/link_to/helpers';
 import { EndpointIndexUIQueryParams } from '../pages/endpoint_hosts/types';
+import { TrustedAppsUrlParams } from '../pages/trusted_apps/types';
 
 // Taken from: https://github.com/microsoft/TypeScript/issues/12936#issuecomment-559034150
 type ExactKeys<T1, T2> = Exclude<keyof T1, keyof T2> extends never ? T1 : never;
@@ -89,18 +90,16 @@ export const getPolicyDetailPath = (policyId: string, search?: string) => {
   })}${appendSearch(search)}`;
 };
 
-interface ListPaginationParams {
-  page_index: number;
-  page_size: number;
-}
-
-const isDefaultOrMissing = (value: number | undefined, defaultValue: number) => {
+const isDefaultOrMissing = (
+  value: number | string | undefined,
+  defaultValue: number | undefined
+) => {
   return value === undefined || value === defaultValue;
 };
 
 const normalizeListPaginationParams = (
-  params?: Partial<ListPaginationParams>
-): Partial<ListPaginationParams> => {
+  params?: Partial<TrustedAppsUrlParams>
+): Partial<TrustedAppsUrlParams> => {
   if (params) {
     return {
       ...(!isDefaultOrMissing(params.page_index, MANAGEMENT_DEFAULT_PAGE)
@@ -109,13 +108,19 @@ const normalizeListPaginationParams = (
       ...(!isDefaultOrMissing(params.page_size, MANAGEMENT_DEFAULT_PAGE_SIZE)
         ? { page_size: params.page_size }
         : {}),
+      ...(!isDefaultOrMissing(params.show, undefined) ? { show: params.show } : {}),
     };
   } else {
     return {};
   }
 };
 
-const extractFirstParamValue = (query: querystring.ParsedUrlQuery, key: string): string => {
+/**
+ * Given an object with url params, and a given key, return back only the first param value (case multiples were defined)
+ * @param query
+ * @param key
+ */
+export const extractFirstParamValue = (query: querystring.ParsedUrlQuery, key: string): string => {
   const value = query[key];
 
   return Array.isArray(value) ? value[value.length - 1] : value;
@@ -135,12 +140,12 @@ const extractPageSize = (query: querystring.ParsedUrlQuery): number => {
 
 export const extractListPaginationParams = (
   query: querystring.ParsedUrlQuery
-): ListPaginationParams => ({
+): TrustedAppsUrlParams => ({
   page_index: extractPageIndex(query),
   page_size: extractPageSize(query),
 });
 
-export const getTrustedAppsListPath = (params?: Partial<ListPaginationParams>): string => {
+export const getTrustedAppsListPath = (params?: Partial<TrustedAppsUrlParams>): string => {
   const path = generatePath(MANAGEMENT_ROUTING_TRUSTED_APPS_PATH, {
     tabName: AdministrationSubTab.trustedApps,
   });
diff --git a/x-pack/plugins/security_solution/public/management/components/administration_list_page.tsx b/x-pack/plugins/security_solution/public/management/components/administration_list_page.tsx
index 3df525b4d59d6..372916581b35d 100644
--- a/x-pack/plugins/security_solution/public/management/components/administration_list_page.tsx
+++ b/x-pack/plugins/security_solution/public/management/components/administration_list_page.tsx
@@ -5,6 +5,7 @@
  */
 import React, { FC, memo } from 'react';
 import { EuiPanel, EuiSpacer, CommonProps } from '@elastic/eui';
+import styled from 'styled-components';
 import { SecurityPageName } from '../../../common/constants';
 import { WrapperPage } from '../../common/components/wrapper_page';
 import { HeaderPage } from '../../common/components/header_page';
@@ -14,6 +15,13 @@ import { AdministrationSubTab } from '../types';
 import { ENDPOINTS_TAB, TRUSTED_APPS_TAB, BETA_BADGE_LABEL } from '../common/translations';
 import { getEndpointListPath, getTrustedAppsListPath } from '../common/routing';
 
+/** Ensure that all flyouts z-index in Administation area show the flyout header */
+const EuiPanelStyled = styled(EuiPanel)`
+  .euiFlyout {
+    z-index: ${({ theme }) => theme.eui.euiZNavigation + 1};
+  }
+`;
+
 interface AdministrationListPageProps {
   beta: boolean;
   title: React.ReactNode;
@@ -54,7 +62,7 @@ export const AdministrationListPage: FC<AdministrationListPageProps & CommonProp
 
         <EuiSpacer />
 
-        <EuiPanel>{children}</EuiPanel>
+        <EuiPanelStyled>{children}</EuiPanelStyled>
 
         <SpyRoute pageName={SecurityPageName.administration} />
       </WrapperPage>
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/service/index.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/service/index.ts
index 9308c137cfb9c..a3c5911aa3a86 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/service/index.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/service/index.ts
@@ -5,14 +5,20 @@
  */
 
 import { HttpStart } from 'kibana/public';
-import { TRUSTED_APPS_LIST_API } from '../../../../../common/endpoint/constants';
+import {
+  TRUSTED_APPS_CREATE_API,
+  TRUSTED_APPS_LIST_API,
+} from '../../../../../common/endpoint/constants';
 import {
   GetTrustedListAppsResponse,
   GetTrustedAppsListRequest,
+  PostTrustedAppCreateRequest,
+  PostTrustedAppCreateResponse,
 } from '../../../../../common/endpoint/types/trusted_apps';
 
 export interface TrustedAppsService {
   getTrustedAppsList(request: GetTrustedAppsListRequest): Promise<GetTrustedListAppsResponse>;
+  createTrustedApp(request: PostTrustedAppCreateRequest): Promise<PostTrustedAppCreateResponse>;
 }
 
 export class TrustedAppsHttpService implements TrustedAppsService {
@@ -23,4 +29,10 @@ export class TrustedAppsHttpService implements TrustedAppsService {
       query: request,
     });
   }
+
+  async createTrustedApp(request: PostTrustedAppCreateRequest) {
+    return this.http.post<PostTrustedAppCreateResponse>(TRUSTED_APPS_CREATE_API, {
+      body: JSON.stringify(request),
+    });
+  }
 }
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/trusted_apps_list_page_state.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/trusted_apps_list_page_state.ts
index 23f4cfd576c56..071557ec1a815 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/trusted_apps_list_page_state.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/trusted_apps_list_page_state.ts
@@ -4,8 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TrustedApp } from '../../../../../common/endpoint/types/trusted_apps';
+import { NewTrustedApp, TrustedApp } from '../../../../../common/endpoint/types/trusted_apps';
 import { AsyncResourceState } from '.';
+import { TrustedAppsUrlParams } from '../types';
+import { ServerApiError } from '../../../../common/types';
 
 export interface PaginationInfo {
   index: number;
@@ -18,10 +20,34 @@ export interface TrustedAppsListData {
   paginationInfo: PaginationInfo;
 }
 
+/** Store State when an API request has been sent to create a new trusted app entry */
+export interface TrustedAppCreatePending {
+  type: 'pending';
+  data: NewTrustedApp;
+}
+
+/** Store State when creation of a new Trusted APP entry was successful */
+export interface TrustedAppCreateSuccess {
+  type: 'success';
+  data: TrustedApp;
+}
+
+/** Store State when creation of a new Trusted App Entry failed */
+export interface TrustedAppCreateFailure {
+  type: 'failure';
+  data: ServerApiError;
+}
+
 export interface TrustedAppsListPageState {
   listView: {
     currentListResourceState: AsyncResourceState<TrustedAppsListData>;
     currentPaginationInfo: PaginationInfo;
+    show: TrustedAppsUrlParams['show'] | undefined;
   };
+  createView:
+    | undefined
+    | TrustedAppCreatePending
+    | TrustedAppCreateSuccess
+    | TrustedAppCreateFailure;
   active: boolean;
 }
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/type_guards.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/type_guards.ts
new file mode 100644
index 0000000000000..1e8e0bc042b86
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/state/type_guards.ts
@@ -0,0 +1,55 @@
+/*
+ * 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 {
+  TrustedAppCreatePending,
+  TrustedAppsListPageState,
+  TrustedAppCreateFailure,
+  TrustedAppCreateSuccess,
+} from './trusted_apps_list_page_state';
+import {
+  Immutable,
+  NewTrustedApp,
+  WindowsConditionEntry,
+} from '../../../../../common/endpoint/types';
+import { TRUSTED_APPS_SUPPORTED_OS_TYPES } from '../../../../../common/endpoint/constants';
+
+type CreateViewPossibleStates =
+  | TrustedAppsListPageState['createView']
+  | Immutable<TrustedAppsListPageState['createView']>;
+
+export const isTrustedAppCreatePendingState = (
+  data: CreateViewPossibleStates
+): data is TrustedAppCreatePending => {
+  return data?.type === 'pending';
+};
+
+export const isTrustedAppCreateSuccessState = (
+  data: CreateViewPossibleStates
+): data is TrustedAppCreateSuccess => {
+  return data?.type === 'success';
+};
+
+export const isTrustedAppCreateFailureState = (
+  data: CreateViewPossibleStates
+): data is TrustedAppCreateFailure => {
+  return data?.type === 'failure';
+};
+
+export const isWindowsTrustedApp = <T extends NewTrustedApp = NewTrustedApp>(
+  trustedApp: T
+): trustedApp is T & { os: 'windows' } => {
+  return trustedApp.os === 'windows';
+};
+
+export const isWindowsTrustedAppCondition = (condition: {
+  field: string;
+}): condition is WindowsConditionEntry => {
+  return condition.field === 'process.code_signature' || true;
+};
+
+export const isTrustedAppSupportedOs = (os: string): os is NewTrustedApp['os'] =>
+  TRUSTED_APPS_SUPPORTED_OS_TYPES.includes(os);
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/action.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/action.ts
index 2154a0eca462e..3a43ffe58262c 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/action.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/action.ts
@@ -4,7 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { AsyncResourceState, TrustedAppsListData } from '../state';
+import {
+  AsyncResourceState,
+  TrustedAppCreateFailure,
+  TrustedAppCreatePending,
+  TrustedAppCreateSuccess,
+  TrustedAppsListData,
+} from '../state';
 
 export interface TrustedAppsListResourceStateChanged {
   type: 'trustedAppsListResourceStateChanged';
@@ -13,4 +19,23 @@ export interface TrustedAppsListResourceStateChanged {
   };
 }
 
-export type TrustedAppsPageAction = TrustedAppsListResourceStateChanged;
+export interface UserClickedSaveNewTrustedAppButton {
+  type: 'userClickedSaveNewTrustedAppButton';
+  payload: TrustedAppCreatePending;
+}
+
+export interface ServerReturnedCreateTrustedAppSuccess {
+  type: 'serverReturnedCreateTrustedAppSuccess';
+  payload: TrustedAppCreateSuccess;
+}
+
+export interface ServerReturnedCreateTrustedAppFailure {
+  type: 'serverReturnedCreateTrustedAppFailure';
+  payload: TrustedAppCreateFailure;
+}
+
+export type TrustedAppsPageAction =
+  | TrustedAppsListResourceStateChanged
+  | UserClickedSaveNewTrustedAppButton
+  | ServerReturnedCreateTrustedAppSuccess
+  | ServerReturnedCreateTrustedAppFailure;
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.test.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.test.ts
index c5abaae473486..e5f00ee0ccf81 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.test.ts
@@ -31,6 +31,7 @@ const createGetTrustedListAppsResponse = (pagination: PaginationInfo, totalItems
 
 const createTrustedAppsServiceMock = (): jest.Mocked<TrustedAppsService> => ({
   getTrustedAppsList: jest.fn(),
+  createTrustedApp: jest.fn(),
 });
 
 const createStoreSetup = (trustedAppsService: TrustedAppsService) => {
@@ -70,6 +71,7 @@ describe('middleware', () => {
       expect(store.getState()).toStrictEqual({
         listView: createLoadingListViewWithPagination(pagination),
         active: true,
+        createView: undefined,
       });
 
       await spyMiddleware.waitForAction('trustedAppsListResourceStateChanged');
@@ -77,6 +79,7 @@ describe('middleware', () => {
       expect(store.getState()).toStrictEqual({
         listView: createLoadedListViewWithPagination(pagination, pagination, 500),
         active: true,
+        createView: undefined,
       });
     });
 
@@ -99,6 +102,7 @@ describe('middleware', () => {
       expect(store.getState()).toStrictEqual({
         listView: createLoadedListViewWithPagination(pagination, pagination, 500),
         active: true,
+        createView: undefined,
       });
     });
 
@@ -118,6 +122,7 @@ describe('middleware', () => {
           createServerApiError('Internal Server Error')
         ),
         active: true,
+        createView: undefined,
       });
 
       const infiniteLoopTest = async () => {
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.ts
index 31c301b8dbd2b..bf9cacff5caf0 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/middleware.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Immutable } from '../../../../../common/endpoint/types';
+import { Immutable, PostTrustedAppCreateRequest } from '../../../../../common/endpoint/types';
 import { AppAction } from '../../../../common/store/actions';
 import {
   ImmutableMiddleware,
@@ -28,6 +28,8 @@ import {
   getLastLoadedListResourceState,
   getListCurrentPageIndex,
   getListCurrentPageSize,
+  getTrustedAppCreateData,
+  isCreatePending,
   needsRefreshOfListData,
 } from './selectors';
 
@@ -81,6 +83,38 @@ const refreshList = async (
   }
 };
 
+const createTrustedApp = async (
+  store: ImmutableMiddlewareAPI<TrustedAppsListPageState, AppAction>,
+  trustedAppsService: TrustedAppsService
+) => {
+  const { dispatch, getState } = store;
+
+  if (isCreatePending(getState())) {
+    try {
+      const newTrustedApp = getTrustedAppCreateData(getState());
+      const createdTrustedApp = (
+        await trustedAppsService.createTrustedApp(newTrustedApp as PostTrustedAppCreateRequest)
+      ).data;
+      dispatch({
+        type: 'serverReturnedCreateTrustedAppSuccess',
+        payload: {
+          type: 'success',
+          data: createdTrustedApp,
+        },
+      });
+      refreshList(store, trustedAppsService);
+    } catch (error) {
+      dispatch({
+        type: 'serverReturnedCreateTrustedAppFailure',
+        payload: {
+          type: 'failure',
+          data: error.body || error,
+        },
+      });
+    }
+  }
+};
+
 export const createTrustedAppsPageMiddleware = (
   trustedAppsService: TrustedAppsService
 ): ImmutableMiddleware<TrustedAppsListPageState, AppAction> => {
@@ -91,6 +125,10 @@ export const createTrustedAppsPageMiddleware = (
     if (action.type === 'userChangedUrl' && needsRefreshOfListData(store.getState())) {
       await refreshList(store, trustedAppsService);
     }
+
+    if (action.type === 'userClickedSaveNewTrustedAppButton') {
+      createTrustedApp(store, trustedAppsService);
+    }
   };
 };
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/reducer.test.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/reducer.test.ts
index 34325e0cf1398..76dd4b48e63d2 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/reducer.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/reducer.test.ts
@@ -26,6 +26,7 @@ describe('reducer', () => {
           currentPaginationInfo: { index: 5, size: 50 },
         },
         active: true,
+        createView: undefined,
       });
     });
 
@@ -67,7 +68,7 @@ describe('reducer', () => {
 
     it('makes page state inactive and resets list to uninitialised state when navigating away', () => {
       const result = trustedAppsPageReducer(
-        { listView: createLoadedListViewWithPagination(), active: true },
+        { listView: createLoadedListViewWithPagination(), active: true, createView: undefined },
         createUserChangedUrlAction('/endpoints')
       );
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/reducer.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/reducer.ts
index 4fdc6f90ef40c..d824a6e95c8d5 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/reducer.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/reducer.ts
@@ -11,14 +11,19 @@ import { ImmutableReducer } from '../../../../common/store';
 import { AppLocation, Immutable } from '../../../../../common/endpoint/types';
 import { UserChangedUrl } from '../../../../common/store/routing/action';
 import { AppAction } from '../../../../common/store/actions';
-import { extractListPaginationParams } from '../../../common/routing';
+import { extractFirstParamValue, extractListPaginationParams } from '../../../common/routing';
 import {
   MANAGEMENT_ROUTING_TRUSTED_APPS_PATH,
   MANAGEMENT_DEFAULT_PAGE,
   MANAGEMENT_DEFAULT_PAGE_SIZE,
 } from '../../../common/constants';
 
-import { TrustedAppsListResourceStateChanged } from './action';
+import {
+  ServerReturnedCreateTrustedAppFailure,
+  ServerReturnedCreateTrustedAppSuccess,
+  TrustedAppsListResourceStateChanged,
+  UserClickedSaveNewTrustedAppButton,
+} from './action';
 import { TrustedAppsListPageState } from '../state';
 
 type StateReducer = ImmutableReducer<TrustedAppsListPageState, AppAction>;
@@ -51,7 +56,10 @@ const trustedAppsListResourceStateChanged: CaseReducer<TrustedAppsListResourceSt
 
 const userChangedUrl: CaseReducer<UserChangedUrl> = (state, action) => {
   if (isTrustedAppsPageLocation(action.payload)) {
-    const paginationParams = extractListPaginationParams(parse(action.payload.search.slice(1)));
+    const parsedUrlsParams = parse(action.payload.search.slice(1));
+    const paginationParams = extractListPaginationParams(parsedUrlsParams);
+    const show =
+      extractFirstParamValue(parsedUrlsParams, 'show') === 'create' ? 'create' : undefined;
 
     return {
       ...state,
@@ -61,7 +69,9 @@ const userChangedUrl: CaseReducer<UserChangedUrl> = (state, action) => {
           index: paginationParams.page_index,
           size: paginationParams.page_size,
         },
+        show,
       },
+      createView: show ? state.createView : undefined,
       active: true,
     };
   } else {
@@ -69,6 +79,17 @@ const userChangedUrl: CaseReducer<UserChangedUrl> = (state, action) => {
   }
 };
 
+const trustedAppsCreateResourceChanged: CaseReducer<
+  | UserClickedSaveNewTrustedAppButton
+  | ServerReturnedCreateTrustedAppFailure
+  | ServerReturnedCreateTrustedAppSuccess
+> = (state, action) => {
+  return {
+    ...state,
+    createView: action.payload,
+  };
+};
+
 export const initialTrustedAppsPageState: TrustedAppsListPageState = {
   listView: {
     currentListResourceState: { type: 'UninitialisedResourceState' },
@@ -76,7 +97,9 @@ export const initialTrustedAppsPageState: TrustedAppsListPageState = {
       index: MANAGEMENT_DEFAULT_PAGE,
       size: MANAGEMENT_DEFAULT_PAGE_SIZE,
     },
+    show: undefined,
   },
+  createView: undefined,
   active: false,
 };
 
@@ -90,6 +113,11 @@ export const trustedAppsPageReducer: StateReducer = (
 
     case 'userChangedUrl':
       return userChangedUrl(state, action);
+
+    case 'userClickedSaveNewTrustedAppButton':
+    case 'serverReturnedCreateTrustedAppSuccess':
+    case 'serverReturnedCreateTrustedAppFailure':
+      return trustedAppsCreateResourceChanged(state, action);
   }
 
   return state;
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/selectors.test.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/selectors.test.ts
index a969e2dee4773..453afa1befa6b 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/selectors.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/selectors.test.ts
@@ -30,33 +30,41 @@ import {
 describe('selectors', () => {
   describe('needsRefreshOfListData()', () => {
     it('returns false for outdated resource state and inactive state', () => {
-      expect(needsRefreshOfListData({ listView: createDefaultListView(), active: false })).toBe(
-        false
-      );
+      expect(
+        needsRefreshOfListData({
+          listView: createDefaultListView(),
+          active: false,
+          createView: undefined,
+        })
+      ).toBe(false);
     });
 
     it('returns true for outdated resource state and active state', () => {
-      expect(needsRefreshOfListData({ listView: createDefaultListView(), active: true })).toBe(
-        true
-      );
+      expect(
+        needsRefreshOfListData({
+          listView: createDefaultListView(),
+          active: true,
+          createView: undefined,
+        })
+      ).toBe(true);
     });
 
     it('returns true when current loaded page index is outdated', () => {
       const listView = createLoadedListViewWithPagination({ index: 1, size: 20 });
 
-      expect(needsRefreshOfListData({ listView, active: true })).toBe(true);
+      expect(needsRefreshOfListData({ listView, active: true, createView: undefined })).toBe(true);
     });
 
     it('returns true when current loaded page size is outdated', () => {
       const listView = createLoadedListViewWithPagination({ index: 0, size: 50 });
 
-      expect(needsRefreshOfListData({ listView, active: true })).toBe(true);
+      expect(needsRefreshOfListData({ listView, active: true, createView: undefined })).toBe(true);
     });
 
     it('returns false when current loaded data is up to date', () => {
       const listView = createLoadedListViewWithPagination();
 
-      expect(needsRefreshOfListData({ listView, active: true })).toBe(false);
+      expect(needsRefreshOfListData({ listView, active: true, createView: undefined })).toBe(false);
     });
   });
 
@@ -64,9 +72,9 @@ describe('selectors', () => {
     it('returns current list resource state', () => {
       const listView = createDefaultListView();
 
-      expect(getCurrentListResourceState({ listView, active: false })).toStrictEqual(
-        createUninitialisedResourceState()
-      );
+      expect(
+        getCurrentListResourceState({ listView, active: false, createView: undefined })
+      ).toStrictEqual(createUninitialisedResourceState());
     });
   });
 
@@ -78,17 +86,20 @@ describe('selectors', () => {
           200
         ),
         currentPaginationInfo: createDefaultPaginationInfo(),
+        show: undefined,
       };
 
-      expect(getLastLoadedListResourceState({ listView, active: false })).toStrictEqual(
-        createListLoadedResourceState(createDefaultPaginationInfo(), 200)
-      );
+      expect(
+        getLastLoadedListResourceState({ listView, active: false, createView: undefined })
+      ).toStrictEqual(createListLoadedResourceState(createDefaultPaginationInfo(), 200));
     });
   });
 
   describe('getListItems()', () => {
     it('returns empty list when no valid data loaded', () => {
-      expect(getListItems({ listView: createDefaultListView(), active: false })).toStrictEqual([]);
+      expect(
+        getListItems({ listView: createDefaultListView(), active: false, createView: undefined })
+      ).toStrictEqual([]);
     });
 
     it('returns last loaded list items', () => {
@@ -98,9 +109,10 @@ describe('selectors', () => {
           200
         ),
         currentPaginationInfo: createDefaultPaginationInfo(),
+        show: undefined,
       };
 
-      expect(getListItems({ listView, active: false })).toStrictEqual(
+      expect(getListItems({ listView, active: false, createView: undefined })).toStrictEqual(
         createSampleTrustedApps(createDefaultPaginationInfo())
       );
     });
@@ -108,7 +120,13 @@ describe('selectors', () => {
 
   describe('getListTotalItemsCount()', () => {
     it('returns 0 when no valid data loaded', () => {
-      expect(getListTotalItemsCount({ listView: createDefaultListView(), active: false })).toBe(0);
+      expect(
+        getListTotalItemsCount({
+          listView: createDefaultListView(),
+          active: false,
+          createView: undefined,
+        })
+      ).toBe(0);
     });
 
     it('returns last loaded total items count', () => {
@@ -118,21 +136,34 @@ describe('selectors', () => {
           200
         ),
         currentPaginationInfo: createDefaultPaginationInfo(),
+        show: undefined,
       };
 
-      expect(getListTotalItemsCount({ listView, active: false })).toBe(200);
+      expect(getListTotalItemsCount({ listView, active: false, createView: undefined })).toBe(200);
     });
   });
 
   describe('getListCurrentPageIndex()', () => {
     it('returns page index', () => {
-      expect(getListCurrentPageIndex({ listView: createDefaultListView(), active: false })).toBe(0);
+      expect(
+        getListCurrentPageIndex({
+          listView: createDefaultListView(),
+          active: false,
+          createView: undefined,
+        })
+      ).toBe(0);
     });
   });
 
   describe('getListCurrentPageSize()', () => {
     it('returns page index', () => {
-      expect(getListCurrentPageSize({ listView: createDefaultListView(), active: false })).toBe(20);
+      expect(
+        getListCurrentPageSize({
+          listView: createDefaultListView(),
+          active: false,
+          createView: undefined,
+        })
+      ).toBe(20);
     });
   });
 
@@ -144,24 +175,32 @@ describe('selectors', () => {
           200
         ),
         currentPaginationInfo: createDefaultPaginationInfo(),
+        show: undefined,
       };
 
-      expect(getListErrorMessage({ listView, active: false })).toBeUndefined();
+      expect(
+        getListErrorMessage({ listView, active: false, createView: undefined })
+      ).toBeUndefined();
     });
 
     it('returns message when not in failed state', () => {
       const listView = {
         currentListResourceState: createListFailedResourceState('Internal Server Error'),
         currentPaginationInfo: createDefaultPaginationInfo(),
+        show: undefined,
       };
 
-      expect(getListErrorMessage({ listView, active: false })).toBe('Internal Server Error');
+      expect(getListErrorMessage({ listView, active: false, createView: undefined })).toBe(
+        'Internal Server Error'
+      );
     });
   });
 
   describe('isListLoading()', () => {
     it('returns false when no loading is happening', () => {
-      expect(isListLoading({ listView: createDefaultListView(), active: false })).toBe(false);
+      expect(
+        isListLoading({ listView: createDefaultListView(), active: false, createView: undefined })
+      ).toBe(false);
     });
 
     it('returns true when loading is in progress', () => {
@@ -171,9 +210,10 @@ describe('selectors', () => {
           200
         ),
         currentPaginationInfo: createDefaultPaginationInfo(),
+        show: undefined,
       };
 
-      expect(isListLoading({ listView, active: false })).toBe(true);
+      expect(isListLoading({ listView, active: false, createView: undefined })).toBe(true);
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/selectors.ts
index 6fde779ac1cce..f074b21f79f4e 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/selectors.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/store/selectors.ts
@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Immutable, TrustedApp } from '../../../../../common/endpoint/types';
+import { createSelector } from 'reselect';
+import { Immutable, NewTrustedApp, TrustedApp } from '../../../../../common/endpoint/types';
 
 import {
   AsyncResourceState,
@@ -14,9 +15,16 @@ import {
   isOutdatedResourceState,
   LoadedResourceState,
   PaginationInfo,
+  TrustedAppCreateFailure,
   TrustedAppsListData,
   TrustedAppsListPageState,
 } from '../state';
+import { TrustedAppsUrlParams } from '../types';
+import {
+  isTrustedAppCreateFailureState,
+  isTrustedAppCreatePendingState,
+  isTrustedAppCreateSuccessState,
+} from '../state/type_guards';
 
 const pageInfosEqual = (pageInfo1: PaginationInfo, pageInfo2: PaginationInfo): boolean =>
   pageInfo1.index === pageInfo2.index && pageInfo1.size === pageInfo2.size;
@@ -65,6 +73,27 @@ export const getListTotalItemsCount = (state: Immutable<TrustedAppsListPageState
   );
 };
 
+export const getListCurrentShowValue: (
+  state: Immutable<TrustedAppsListPageState>
+) => TrustedAppsListPageState['listView']['show'] = (state) => {
+  return state.listView.show;
+};
+
+export const getListUrlSearchParams: (
+  state: Immutable<TrustedAppsListPageState>
+) => TrustedAppsUrlParams = createSelector(
+  getListCurrentPageIndex,
+  getListCurrentPageSize,
+  getListCurrentShowValue,
+  (pageIndex, pageSize, showValue) => {
+    return {
+      page_index: pageIndex,
+      page_size: pageSize,
+      show: showValue,
+    };
+  }
+);
+
 export const getListErrorMessage = (
   state: Immutable<TrustedAppsListPageState>
 ): string | undefined => {
@@ -74,3 +103,27 @@ export const getListErrorMessage = (
 export const isListLoading = (state: Immutable<TrustedAppsListPageState>): boolean => {
   return isLoadingResourceState(state.listView.currentListResourceState);
 };
+
+export const isCreatePending: (state: Immutable<TrustedAppsListPageState>) => boolean = ({
+  createView,
+}) => {
+  return isTrustedAppCreatePendingState(createView);
+};
+
+export const getTrustedAppCreateData: (
+  state: Immutable<TrustedAppsListPageState>
+) => undefined | Immutable<NewTrustedApp> = ({ createView }) => {
+  return (isTrustedAppCreatePendingState(createView) && createView.data) || undefined;
+};
+
+export const getApiCreateErrors: (
+  state: Immutable<TrustedAppsListPageState>
+) => undefined | TrustedAppCreateFailure['data'] = ({ createView }) => {
+  return (isTrustedAppCreateFailureState(createView) && createView.data) || undefined;
+};
+
+export const wasCreateSuccessful: (state: Immutable<TrustedAppsListPageState>) => boolean = ({
+  createView,
+}) => {
+  return isTrustedAppCreateSuccessState(createView);
+};
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/test_utils/index.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/test_utils/index.ts
index fab059a422a2a..70e4e1e685b01 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/test_utils/index.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/test_utils/index.ts
@@ -21,6 +21,7 @@ import {
 } from '../state';
 
 import { TrustedAppsListResourceStateChanged } from '../store/action';
+import { initialTrustedAppsPageState } from '../store/reducer';
 
 const OS_LIST: Array<TrustedApp['os']> = ['windows', 'macos', 'linux'];
 
@@ -93,6 +94,7 @@ export const createListComplexLoadingResourceState = (
 export const createDefaultPaginationInfo = () => ({ index: 0, size: 20 });
 
 export const createDefaultListView = () => ({
+  ...initialTrustedAppsPageState.listView,
   currentListResourceState: createUninitialisedResourceState(),
   currentPaginationInfo: createDefaultPaginationInfo(),
 });
@@ -101,6 +103,7 @@ export const createLoadingListViewWithPagination = (
   currentPaginationInfo: PaginationInfo,
   previousState: StaleResourceState<TrustedAppsListData> = createUninitialisedResourceState()
 ): TrustedAppsListPageState['listView'] => ({
+  ...initialTrustedAppsPageState.listView,
   currentListResourceState: { type: 'LoadingResourceState', previousState },
   currentPaginationInfo,
 });
@@ -110,6 +113,7 @@ export const createLoadedListViewWithPagination = (
   currentPaginationInfo: PaginationInfo = createDefaultPaginationInfo(),
   totalItemsCount: number = 200
 ): TrustedAppsListPageState['listView'] => ({
+  ...initialTrustedAppsPageState.listView,
   currentListResourceState: createListLoadedResourceState(paginationInfo, totalItemsCount),
   currentPaginationInfo,
 });
@@ -119,6 +123,7 @@ export const createFailedListViewWithPagination = (
   error: ServerApiError,
   lastLoadedState?: LoadedResourceState<TrustedAppsListData>
 ): TrustedAppsListPageState['listView'] => ({
+  ...initialTrustedAppsPageState.listView,
   currentListResourceState: { type: 'FailedResourceState', error, lastLoadedState },
   currentPaginationInfo,
 });
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/types.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/types.ts
new file mode 100644
index 0000000000000..4d59cd7913a0c
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/types.ts
@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export interface TrustedAppsUrlParams {
+  page_index: number;
+  page_size: number;
+  show?: 'create';
+}
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap
index d6e9aee108cf6..642e86059ed6e 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap
@@ -1,23 +1,955 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TrustedAppsPage rendering 1`] = `
-<AdministrationListPage
-  beta={true}
-  subtitle={
-    <FormattedMessage
-      defaultMessage="View and configure trusted applications"
-      id="xpack.securitySolution.trustedapps.list.pageSubTitle"
-      values={Object {}}
-    />
+Object {
+  "asFragment": [Function],
+  "baseElement": .c0 {
+  padding: 24px;
+}
+
+.c0.siemWrapperPage--restrictWidthDefault,
+.c0.siemWrapperPage--restrictWidthCustom {
+  box-sizing: content-box;
+  margin: 0 auto;
+}
+
+.c0.siemWrapperPage--restrictWidthDefault {
+  max-width: 1000px;
+}
+
+.c0.siemWrapperPage--fullHeight {
+  height: 100%;
+}
+
+.c0.siemWrapperPage--withTimeline {
+  padding-right: 70px;
+}
+
+.c0.siemWrapperPage--noPadding {
+  padding: 0;
+}
+
+.c4 {
+  margin-top: 8px;
+}
+
+.c4 .siemSubtitle__item {
+  color: #6a717d;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.c3 {
+  vertical-align: middle;
+}
+
+.c1 {
+  margin-bottom: 24px;
+}
+
+.c2 {
+  display: block;
+}
+
+.c5 .euiFlyout {
+  z-index: 4001;
+}
+
+@media only screen and (min-width:575px) {
+  .c4 .siemSubtitle__item {
+    display: inline-block;
+    margin-right: 16px;
   }
-  title={
-    <FormattedMessage
-      defaultMessage="Trusted Applications"
-      id="xpack.securitySolution.trustedapps.list.pageTitle"
-      values={Object {}}
-    />
+
+  .c4 .siemSubtitle__item:last-child {
+    margin-right: 0;
   }
+}
+
+<body>
+    <div>
+      <div
+        class="c0 siemWrapperPage"
+      >
+        <header
+          class="c1 siemHeaderPage"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem c2"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="header-page-title"
+              >
+                Trusted Applications
+                 
+                <span
+                  class="euiBetaBadge c3"
+                  title="Beta"
+                >
+                  Beta
+                </span>
+              </h1>
+              <div
+                class="c4 siemSubtitle"
+              >
+                <div
+                  class="siemSubtitle__item siemSubtitle__item--node"
+                  data-test-subj="header-panel-subtitle"
+                >
+                  View and configure trusted applications
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero c2"
+              data-test-subj="header-page-supplements"
+            >
+              <button
+                class="euiButton euiButton--primary euiButton--fill"
+                data-test-subj="trustedAppsListAddButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <div
+                    class="euiButtonContent__icon"
+                    data-euiicon-type="plusInCircle"
+                  />
+                  <span
+                    class="euiButton__text"
+                  >
+                    Add Trusted Application
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </header>
+        <div
+          class="euiTabs"
+          role="tablist"
+        >
+          <button
+            aria-selected="false"
+            class="euiTab"
+            data-test-subj="navigation-endpoints"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              Endpoints
+            </span>
+          </button>
+          <button
+            aria-selected="false"
+            class="euiTab"
+            data-test-subj="navigation-trusted_apps"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              Trusted applications
+            </span>
+          </button>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="euiPanel euiPanel--paddingMedium c5"
+        >
+          <div
+            class="euiBasicTable euiBasicTable-loading"
+          >
+            <div>
+              <div
+                class="euiTableHeaderMobile"
+              >
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  />
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  />
+                </div>
+              </div>
+              <table
+                class="euiTable euiTable--responsive"
+                id="mockId"
+                tabindex="-1"
+              >
+                <caption
+                  class="euiScreenReaderOnly euiTableCaption"
+                />
+                <thead>
+                  <tr>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_name_0"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Name"
+                        >
+                          Name
+                        </span>
+                      </div>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_os_1"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="OS"
+                        >
+                          OS
+                        </span>
+                      </div>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_created_at_2"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Date Created"
+                        >
+                          Date Created
+                        </span>
+                      </div>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_created_by_3"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Created By"
+                        >
+                          Created By
+                        </span>
+                      </div>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    class="euiTableRow"
+                  >
+                    <td
+                      class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                      colspan="4"
+                    >
+                      <div
+                        class="euiTableCellContent euiTableCellContent--alignCenter"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                        >
+                          No items found
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-fzoyAV jWxvlI siemWrapperPage"
+    >
+      <header
+        class="sc-oVoYc gokfWe siemHeaderPage"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <div
+            class="euiFlexItem sc-pdMpF bYVYXb"
+          >
+            <h1
+              class="euiTitle euiTitle--large"
+              data-test-subj="header-page-title"
+            >
+              Trusted Applications
+               
+              <span
+                class="euiBetaBadge sc-pTUxa bXJtIM"
+                title="Beta"
+              >
+                Beta
+              </span>
+            </h1>
+            <div
+              class="sc-fzoXzr iMKumH siemSubtitle"
+            >
+              <div
+                class="siemSubtitle__item siemSubtitle__item--node"
+                data-test-subj="header-panel-subtitle"
+              >
+                View and configure trusted applications
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero sc-pdMpF bYVYXb"
+            data-test-subj="header-page-supplements"
+          >
+            <button
+              class="euiButton euiButton--primary euiButton--fill"
+              data-test-subj="trustedAppsListAddButton"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <div
+                  class="euiButtonContent__icon"
+                  data-euiicon-type="plusInCircle"
+                />
+                <span
+                  class="euiButton__text"
+                >
+                  Add Trusted Application
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </header>
+      <div
+        class="euiTabs"
+        role="tablist"
+      >
+        <button
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="navigation-endpoints"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Endpoints
+          </span>
+        </button>
+        <button
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="navigation-trusted_apps"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Trusted applications
+          </span>
+        </button>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiPanel euiPanel--paddingMedium sc-pjuKs cIhDKD"
+      >
+        <div
+          class="euiBasicTable euiBasicTable-loading"
+        >
+          <div>
+            <div
+              class="euiTableHeaderMobile"
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+              >
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                />
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                />
+              </div>
+            </div>
+            <table
+              class="euiTable euiTable--responsive"
+              id="mockId"
+              tabindex="-1"
+            >
+              <caption
+                class="euiScreenReaderOnly euiTableCaption"
+              />
+              <thead>
+                <tr>
+                  <th
+                    class="euiTableHeaderCell"
+                    data-test-subj="tableHeaderCell_name_0"
+                    role="columnheader"
+                    scope="col"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <span
+                        class="euiTableCellContent__text"
+                        title="Name"
+                      >
+                        Name
+                      </span>
+                    </div>
+                  </th>
+                  <th
+                    class="euiTableHeaderCell"
+                    data-test-subj="tableHeaderCell_os_1"
+                    role="columnheader"
+                    scope="col"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <span
+                        class="euiTableCellContent__text"
+                        title="OS"
+                      >
+                        OS
+                      </span>
+                    </div>
+                  </th>
+                  <th
+                    class="euiTableHeaderCell"
+                    data-test-subj="tableHeaderCell_created_at_2"
+                    role="columnheader"
+                    scope="col"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <span
+                        class="euiTableCellContent__text"
+                        title="Date Created"
+                      >
+                        Date Created
+                      </span>
+                    </div>
+                  </th>
+                  <th
+                    class="euiTableHeaderCell"
+                    data-test-subj="tableHeaderCell_created_by_3"
+                    role="columnheader"
+                    scope="col"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <span
+                        class="euiTableCellContent__text"
+                        title="Created By"
+                      >
+                        Created By
+                      </span>
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  class="euiTableRow"
+                >
+                  <td
+                    class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                    colspan="4"
+                  >
+                    <div
+                      class="euiTableCellContent euiTableCellContent--alignCenter"
+                    >
+                      <span
+                        class="euiTableCellContent__text"
+                      >
+                        No items found
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`TrustedAppsPage when the Add Trusted App button is clicked should display create form 1`] = `
+@media only screen and (min-width:575px) {
+
+}
+
+<div
+  class="euiForm"
+  data-test-subj="addTrustedAppFlyout-createForm"
 >
-  <TrustedAppsList />
-</AdministrationListPage>
+  <div
+    class="euiFormRow euiFormRow--fullWidth"
+    data-test-subj="addTrustedAppFlyout-createForm-nameRow"
+    id="mockId-row"
+  >
+    <div
+      class="euiFormRow__labelWrapper"
+    >
+      <label
+        class="euiFormLabel euiFormRow__label"
+        for="mockId"
+      >
+        Name your trusted app application
+      </label>
+    </div>
+    <div
+      class="euiFormRow__fieldWrapper"
+    >
+      <div
+        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      >
+        <div
+          class="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            class="euiFieldText euiFieldText--fullWidth"
+            data-test-subj="addTrustedAppFlyout-createForm-nameTextField"
+            id="mockId"
+            name="name"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFormRow euiFormRow--fullWidth"
+    data-test-subj="addTrustedAppFlyout-createForm-OsRow"
+    id="mockId-row"
+  >
+    <div
+      class="euiFormRow__labelWrapper"
+    >
+      <label
+        class="euiFormLabel euiFormRow__label"
+        for="mockId"
+      >
+        Select operating system
+      </label>
+    </div>
+    <div
+      class="euiFormRow__fieldWrapper"
+    >
+      <div
+        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect euiSuperSelect--fullWidth"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <input
+            id="mockId"
+            name="os"
+            type="hidden"
+            value="windows"
+          />
+          <div
+            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          >
+            <div
+              class="euiFormControlLayout__childrenWrapper"
+            >
+              <span
+                class="euiScreenReaderOnly"
+                id="mockId"
+              >
+                Select an option: Windows, is selected
+              </span>
+              <button
+                aria-haspopup="true"
+                aria-labelledby="mockId mockId"
+                class="euiSuperSelectControl euiSuperSelectControl--fullWidth"
+                data-test-subj="addTrustedAppFlyout-createForm-osSelectField"
+                type="button"
+              >
+                Windows
+              </button>
+              <div
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              >
+                <span
+                  class="euiFormControlLayoutCustomIcon"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="arrowDown"
+                  />
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFormRow euiFormRow--fullWidth"
+    data-test-subj="addTrustedAppFlyout-createForm-conditionsRow"
+    id="mockId-row"
+  >
+    <div
+      class="euiFormRow__fieldWrapper"
+    >
+      <div
+        data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder"
+      >
+        <div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+            data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-group1"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow1"
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-group1-entry0"
+              >
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrow2"
+                >
+                  <div
+                    class="euiFormRow euiFormRow--fullWidth"
+                    id="mockId-row"
+                  >
+                    <div
+                      class="euiFormRow__labelWrapper"
+                    >
+                      <label
+                        class="euiFormLabel euiFormRow__label"
+                        for="mockId"
+                      >
+                        Field
+                      </label>
+                    </div>
+                    <div
+                      class="euiFormRow__fieldWrapper"
+                    >
+                      <div
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <input
+                            id="mockId"
+                            type="hidden"
+                            value="process.hash.*"
+                          />
+                          <div
+                            class="euiFormControlLayout"
+                          >
+                            <div
+                              class="euiFormControlLayout__childrenWrapper"
+                            >
+                              <span
+                                class="euiScreenReaderOnly"
+                                id="mockId"
+                              >
+                                Select an option: Hash, is selected
+                              </span>
+                              <button
+                                aria-haspopup="true"
+                                aria-labelledby="mockId mockId"
+                                class="euiSuperSelectControl"
+                                data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-group1-entry0-field"
+                                type="button"
+                              >
+                                Hash
+                              </button>
+                              <div
+                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              >
+                                <span
+                                  class="euiFormControlLayoutCustomIcon"
+                                >
+                                  <div
+                                    aria-hidden="true"
+                                    class="euiFormControlLayoutCustomIcon__icon"
+                                    data-euiicon-type="arrowDown"
+                                  />
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem"
+                >
+                  <div
+                    class="euiFormRow euiFormRow--fullWidth"
+                    id="mockId-row"
+                  >
+                    <div
+                      class="euiFormRow__labelWrapper"
+                    >
+                      <label
+                        class="euiFormLabel euiFormRow__label"
+                        for="mockId"
+                      >
+                        Operator
+                      </label>
+                    </div>
+                    <div
+                      class="euiFormRow__fieldWrapper"
+                    >
+                      <div
+                        class="euiFormControlLayout euiFormControlLayout--readOnly"
+                      >
+                        <div
+                          class="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            class="euiFieldText"
+                            id="mockId"
+                            name="operator"
+                            readonly=""
+                            type="text"
+                            value="is"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrow3"
+                >
+                  <div
+                    class="euiFormRow euiFormRow--fullWidth"
+                    id="mockId-row"
+                  >
+                    <div
+                      class="euiFormRow__labelWrapper"
+                    >
+                      <label
+                        class="euiFormLabel euiFormRow__label"
+                        for="mockId"
+                      >
+                        Value
+                      </label>
+                    </div>
+                    <div
+                      class="euiFormRow__fieldWrapper"
+                    >
+                      <div
+                        class="euiFormControlLayout"
+                      >
+                        <div
+                          class="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            class="euiFieldText"
+                            data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-group1-entry0-value"
+                            id="mockId"
+                            name="value"
+                            type="text"
+                            value=""
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <div
+                    class="euiFormRow euiFormRow--fullWidth"
+                    id="mockId-row"
+                  >
+                    <div
+                      class="euiFormRow__labelWrapper"
+                    >
+                      <label
+                        class="euiFormLabel euiFormRow__label"
+                        for="mockId"
+                      >
+                         
+                      </label>
+                    </div>
+                    <div
+                      class="euiFormRow__fieldWrapper"
+                    >
+                      <button
+                        aria-label="Remove Entry"
+                        class="euiButtonIcon euiButtonIcon--danger"
+                        disabled=""
+                        id="mockId"
+                        type="button"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="euiButtonIcon__icon"
+                          data-euiicon-type="trash"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--s"
+        />
+        <button
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
+          data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-AndButton"
+          style="min-width: 95px;"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButton__content"
+          >
+            <div
+              class="euiButtonContent__icon"
+              data-euiicon-type="plusInCircle"
+            />
+            <span
+              class="euiButton__text"
+            >
+              AND
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiFormRow euiFormRow--fullWidth"
+    data-test-subj="addTrustedAppFlyout-createForm-descriptionRow"
+    id="mockId-row"
+  >
+    <div
+      class="euiFormRow__labelWrapper"
+    >
+      <label
+        class="euiFormLabel euiFormRow__label"
+        for="mockId"
+      >
+        Description
+      </label>
+    </div>
+    <div
+      class="euiFormRow__fieldWrapper"
+    >
+      <textarea
+        class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+        data-test-subj="addTrustedAppFlyout-createForm-descriptionField"
+        id="mockId"
+        name="description"
+        rows="6"
+      />
+    </div>
+  </div>
+</div>
 `;
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_flyout.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_flyout.tsx
new file mode 100644
index 0000000000000..cced85083348c
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_flyout.tsx
@@ -0,0 +1,152 @@
+/*
+ * 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 {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiTitle,
+} from '@elastic/eui';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { EuiFlyoutProps } from '@elastic/eui/src/components/flyout/flyout';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useDispatch } from 'react-redux';
+import { i18n } from '@kbn/i18n';
+import {
+  CreateTrustedAppForm,
+  CreateTrustedAppFormProps,
+  TrustedAppFormState,
+} from './create_trusted_app_form';
+import { useTrustedAppsSelector } from '../hooks';
+import { getApiCreateErrors, isCreatePending, wasCreateSuccessful } from '../../store/selectors';
+import { AppAction } from '../../../../../common/store/actions';
+import { useToasts } from '../../../../../common/lib/kibana';
+
+type CreateTrustedAppFlyoutProps = Omit<EuiFlyoutProps, 'hideCloseButton'>;
+export const CreateTrustedAppFlyout = memo<CreateTrustedAppFlyoutProps>(
+  ({ onClose, ...flyoutProps }) => {
+    const dispatch = useDispatch<(action: AppAction) => void>();
+    const toasts = useToasts();
+
+    const pendingCreate = useTrustedAppsSelector(isCreatePending);
+    const apiErrors = useTrustedAppsSelector(getApiCreateErrors);
+    const wasCreated = useTrustedAppsSelector(wasCreateSuccessful);
+
+    const [formState, setFormState] = useState<undefined | TrustedAppFormState>();
+    const dataTestSubj = flyoutProps['data-test-subj'];
+
+    const getTestId = useCallback(
+      (suffix: string): string | undefined => {
+        if (dataTestSubj) {
+          return `${dataTestSubj}-${suffix}`;
+        }
+      },
+      [dataTestSubj]
+    );
+    const handleCancelClick = useCallback(() => {
+      if (pendingCreate) {
+        return;
+      }
+      onClose();
+    }, [onClose, pendingCreate]);
+    const handleSaveClick = useCallback(() => {
+      if (formState) {
+        dispatch({
+          type: 'userClickedSaveNewTrustedAppButton',
+          payload: {
+            type: 'pending',
+            data: formState.item,
+          },
+        });
+      }
+    }, [dispatch, formState]);
+    const handleFormOnChange = useCallback<CreateTrustedAppFormProps['onChange']>(
+      (newFormState) => {
+        setFormState(newFormState);
+      },
+      []
+    );
+
+    // If it was created, then close flyout
+    useEffect(() => {
+      if (wasCreated) {
+        toasts.addSuccess(
+          i18n.translate(
+            'xpack.securitySolution.trustedapps.createTrustedAppFlyout.successToastTitle',
+            {
+              defaultMessage: '"{name}" has been added to the Trusted Applications list.',
+              values: { name: formState?.item.name },
+            }
+          )
+        );
+        onClose();
+      }
+    }, [formState?.item?.name, onClose, toasts, wasCreated]);
+
+    return (
+      <EuiFlyout onClose={handleCancelClick} {...flyoutProps} hideCloseButton={pendingCreate}>
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 data-test-subj={getTestId('headerTitle')}>
+              <FormattedMessage
+                id="xpack.securitySolution.trustedapps.createTrustedAppFlyout.title"
+                defaultMessage="Add trusted application"
+              />
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+
+        <EuiFlyoutBody>
+          <CreateTrustedAppForm
+            fullWidth
+            onChange={handleFormOnChange}
+            isInvalid={!!apiErrors}
+            error={apiErrors?.message}
+            data-test-subj={getTestId('createForm')}
+          />
+        </EuiFlyoutBody>
+
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                onClick={handleCancelClick}
+                flush="left"
+                isDisabled={pendingCreate}
+                data-test-subj={getTestId('cancelButton')}
+              >
+                <FormattedMessage
+                  id="xpack.securitySolution.trustedapps.createTrustedAppFlyout.cancelButton"
+                  defaultMessage="Cancel"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                onClick={handleSaveClick}
+                fill
+                isDisabled={!formState?.isValid || pendingCreate}
+                isLoading={pendingCreate}
+                data-test-subj={getTestId('createButton')}
+              >
+                <FormattedMessage
+                  id="xpack.securitySolution.trustedapps.createTrustedAppFlyout.saveButton"
+                  defaultMessage="Add trusted application"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+);
+CreateTrustedAppFlyout.displayName = 'NewTrustedAppFlyout';
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx
new file mode 100644
index 0000000000000..b6eb9795acd1d
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx
@@ -0,0 +1,280 @@
+/*
+ * 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, { ChangeEventHandler, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  EuiForm,
+  EuiFormRow,
+  EuiFieldText,
+  EuiSuperSelect,
+  EuiSuperSelectOption,
+  EuiTextArea,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiFormProps } from '@elastic/eui/src/components/form/form';
+import { TRUSTED_APPS_SUPPORTED_OS_TYPES } from '../../../../../../common/endpoint/constants';
+import { LogicalConditionBuilder } from './logical_condition';
+import {
+  MacosLinuxConditionEntry,
+  NewTrustedApp,
+  TrustedApp,
+} from '../../../../../../common/endpoint/types';
+import { LogicalConditionBuilderProps } from './logical_condition/logical_condition_builder';
+import { OS_TITLES } from '../constants';
+import {
+  isTrustedAppSupportedOs,
+  isWindowsTrustedApp,
+  isWindowsTrustedAppCondition,
+} from '../../state/type_guards';
+
+const generateNewEntry = (): NewTrustedApp['entries'][0] => {
+  return {
+    field: 'process.hash.*',
+    operator: 'included',
+    type: 'match',
+    value: '',
+  };
+};
+
+interface ValidationResult {
+  isValid: boolean;
+  errors: Partial<{ [k in keyof NewTrustedApp]: string }>;
+}
+const validateFormValues = (values: NewTrustedApp): ValidationResult => {
+  const errors: ValidationResult['errors'] = {};
+
+  if (!values.name.trim()) {
+    errors.name = 'Name is required';
+  }
+
+  if (!values.os) {
+    errors.os = 'OS is required';
+  }
+
+  if (!values.entries.length) {
+    errors.entries = 'At least one Field definition is required';
+  } else {
+    values.entries.some((entry, index) => {
+      if (!entry.field || !entry.value.trim()) {
+        errors.entries = `Field entry ${index + 1} must have a value`;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  return {
+    isValid: Object.keys(errors).length === 0,
+    errors,
+  };
+};
+
+export interface TrustedAppFormState {
+  isValid: boolean;
+  item: NewTrustedApp;
+}
+export type CreateTrustedAppFormProps = Pick<
+  EuiFormProps,
+  'className' | 'data-test-subj' | 'isInvalid' | 'error' | 'invalidCallout'
+> & {
+  /** if form should be shown full width of parent container */
+  fullWidth?: boolean;
+  onChange: (state: TrustedAppFormState) => void;
+};
+export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
+  ({ fullWidth, onChange, ...formProps }) => {
+    const dataTestSubj = formProps['data-test-subj'];
+    const osOptions: Array<EuiSuperSelectOption<string>> = useMemo(() => {
+      return TRUSTED_APPS_SUPPORTED_OS_TYPES.map((os) => {
+        return {
+          value: os,
+          inputDisplay: OS_TITLES[os as TrustedApp['os']],
+        };
+      });
+    }, []);
+    const [formValues, setFormValues] = useState<NewTrustedApp>({
+      name: '',
+      os: 'windows',
+      entries: [generateNewEntry()],
+      description: '',
+    });
+    const getTestId = useCallback(
+      (suffix: string): string | undefined => {
+        if (dataTestSubj) {
+          return `${dataTestSubj}-${suffix}`;
+        }
+      },
+      [dataTestSubj]
+    );
+    const handleAndClick = useCallback(() => {
+      setFormValues(
+        (prevState): NewTrustedApp => {
+          if (isWindowsTrustedApp(prevState)) {
+            return {
+              ...prevState,
+              entries: [...prevState.entries, generateNewEntry()].filter((entry) =>
+                isWindowsTrustedAppCondition(entry)
+              ),
+            };
+          } else {
+            return {
+              ...prevState,
+              entries: [
+                ...prevState.entries.filter((entry) => !isWindowsTrustedAppCondition(entry)),
+                generateNewEntry(),
+              ] as MacosLinuxConditionEntry[],
+            };
+          }
+        }
+      );
+    }, [setFormValues]);
+    const handleDomChangeEvents = useCallback<
+      ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+    >(({ target: { name, value } }) => {
+      setFormValues(
+        (prevState): NewTrustedApp => {
+          return {
+            ...prevState,
+            [name]: value,
+          };
+        }
+      );
+    }, []);
+    const handleOsChange = useCallback<(v: string) => void>((newOsValue) => {
+      setFormValues(
+        (prevState): NewTrustedApp => {
+          if (isTrustedAppSupportedOs(newOsValue)) {
+            const updatedState: NewTrustedApp = {
+              ...prevState,
+              entries: [],
+              os: newOsValue,
+            };
+            if (!isWindowsTrustedApp(updatedState)) {
+              updatedState.entries.push(
+                ...(prevState.entries.filter(
+                  (entry) => !isWindowsTrustedAppCondition(entry)
+                ) as MacosLinuxConditionEntry[])
+              );
+            }
+            return updatedState;
+          }
+          return prevState;
+        }
+      );
+    }, []);
+    const handleEntryRemove = useCallback((entry: NewTrustedApp['entries'][0]) => {
+      setFormValues(
+        (prevState): NewTrustedApp => {
+          return {
+            ...prevState,
+            entries: prevState.entries.filter((item) => item !== entry),
+          } as NewTrustedApp;
+        }
+      );
+    }, []);
+    const handleEntryChange = useCallback<LogicalConditionBuilderProps['onEntryChange']>(
+      (newEntry, oldEntry) => {
+        setFormValues(
+          (prevState): NewTrustedApp => {
+            if (isWindowsTrustedApp(prevState)) {
+              return {
+                ...prevState,
+                entries: prevState.entries.map((item) => {
+                  if (item === oldEntry) {
+                    return newEntry;
+                  }
+                  return item;
+                }),
+              } as NewTrustedApp;
+            } else {
+              return {
+                ...prevState,
+                entries: prevState.entries.map((item) => {
+                  if (item === oldEntry) {
+                    return newEntry;
+                  }
+                  return item;
+                }),
+              } as NewTrustedApp;
+            }
+          }
+        );
+      },
+      []
+    );
+
+    // Anytime the form values change - validate and notify
+    useEffect(() => {
+      onChange({
+        isValid: validateFormValues(formValues).isValid,
+        item: formValues,
+      });
+    }, [formValues, onChange]);
+
+    return (
+      <EuiForm {...formProps} component="div">
+        <EuiFormRow
+          label={i18n.translate('xpack.securitySolution.trustedapps.create.name', {
+            defaultMessage: 'Name your trusted app application',
+          })}
+          fullWidth={fullWidth}
+          data-test-subj={getTestId('nameRow')}
+        >
+          <EuiFieldText
+            name="name"
+            value={formValues.name}
+            onChange={handleDomChangeEvents}
+            fullWidth
+            data-test-subj={getTestId('nameTextField')}
+          />
+        </EuiFormRow>
+        <EuiFormRow
+          label={i18n.translate('xpack.securitySolution.trustedapps.create.os', {
+            defaultMessage: 'Select operating system',
+          })}
+          fullWidth={fullWidth}
+          data-test-subj={getTestId('OsRow')}
+        >
+          <EuiSuperSelect
+            name="os"
+            options={osOptions}
+            valueOfSelected={formValues.os}
+            onChange={handleOsChange}
+            fullWidth
+            data-test-subj={getTestId('osSelectField')}
+          />
+        </EuiFormRow>
+        <EuiFormRow fullWidth={fullWidth} data-test-subj={getTestId('conditionsRow')}>
+          <LogicalConditionBuilder
+            entries={formValues.entries}
+            os={formValues.os}
+            onAndClicked={handleAndClick}
+            onEntryRemove={handleEntryRemove}
+            onEntryChange={handleEntryChange}
+            data-test-subj={getTestId('conditionsBuilder')}
+          />
+        </EuiFormRow>
+        <EuiFormRow
+          label={i18n.translate('xpack.securitySolution.trustedapps.create.description', {
+            defaultMessage: 'Description',
+          })}
+          fullWidth={fullWidth}
+          data-test-subj={getTestId('descriptionRow')}
+        >
+          <EuiTextArea
+            name="description"
+            value={formValues.description}
+            onChange={handleDomChangeEvents}
+            fullWidth
+            data-test-subj={getTestId('descriptionField')}
+          />
+        </EuiFormRow>
+      </EuiForm>
+    );
+  }
+);
+
+CreateTrustedAppForm.displayName = 'NewTrustedAppForm';
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_entry.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_entry.tsx
new file mode 100644
index 0000000000000..23bced0c048b1
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_entry.tsx
@@ -0,0 +1,188 @@
+/*
+ * 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, { ChangeEventHandler, memo, useCallback, useMemo } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSuperSelect,
+  EuiFieldText,
+  EuiButtonIcon,
+  EuiSuperSelectOption,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { TrustedApp } from '../../../../../../../../common/endpoint/types';
+
+const ConditionEntryCell = memo<{
+  showLabel: boolean;
+  label?: string;
+  children: React.ReactElement;
+}>(({ showLabel, label = '', children }) => {
+  return showLabel ? (
+    <EuiFormRow label={label} fullWidth>
+      {children}
+    </EuiFormRow>
+  ) : (
+    <>{children}</>
+  );
+});
+
+ConditionEntryCell.displayName = 'ConditionEntryCell';
+
+export interface ConditionEntryProps {
+  // FIXME:PT probably need to adjust below types to match what is done in `TrustedApp` type
+  os: TrustedApp['os'];
+  entry: TrustedApp['entries'][0];
+  /** controls if remove button is enabled/disabled */
+  isRemoveDisabled?: boolean;
+  /** If the labels for each Column in the input row should be shown. Normally set on the first row entry */
+  showLabels: boolean;
+  onRemove: (entry: TrustedApp['entries'][0]) => void;
+  onChange: (newEntry: TrustedApp['entries'][0], oldEntry: TrustedApp['entries'][0]) => void;
+  'data-test-subj'?: string;
+}
+export const ConditionEntry = memo<ConditionEntryProps>(
+  ({
+    entry,
+    showLabels = false,
+    onRemove,
+    onChange,
+    isRemoveDisabled = false,
+    'data-test-subj': dataTestSubj,
+  }) => {
+    const getTestId = useCallback(
+      (suffix: string): string | undefined => {
+        if (dataTestSubj) {
+          return `${dataTestSubj}-${suffix}`;
+        }
+      },
+      [dataTestSubj]
+    );
+    const fieldOptions = useMemo<Array<EuiSuperSelectOption<string>>>(() => {
+      return [
+        {
+          inputDisplay: i18n.translate(
+            'xpack.securitySolution.trustedapps.logicalConditionBuilder.entry.field.hash',
+            { defaultMessage: 'Hash' }
+          ),
+          value: 'process.hash.*',
+        },
+        {
+          inputDisplay: i18n.translate(
+            'xpack.securitySolution.trustedapps.logicalConditionBuilder.entry.field.path',
+            { defaultMessage: 'Path' }
+          ),
+          value: 'process.path',
+        },
+      ];
+    }, []);
+    const handleValueUpdate = useCallback<ChangeEventHandler<HTMLInputElement>>(
+      (ev) => {
+        onChange(
+          {
+            ...entry,
+            value: ev.target.value,
+          },
+          entry
+        );
+      },
+      [entry, onChange]
+    );
+    const handleFieldUpdate = useCallback(
+      (newField) => {
+        onChange(
+          {
+            ...entry,
+            field: newField,
+          },
+          entry
+        );
+      },
+      [entry, onChange]
+    );
+    const handleRemoveClick = useCallback(() => {
+      onRemove(entry);
+    }, [entry, onRemove]);
+
+    return (
+      <EuiFlexGroup
+        gutterSize="s"
+        alignItems="center"
+        direction="row"
+        data-test-subj={dataTestSubj}
+      >
+        <EuiFlexItem grow={2}>
+          <ConditionEntryCell
+            showLabel={showLabels}
+            label={i18n.translate(
+              'xpack.securitySolution.trustedapps.logicalConditionBuilder.entry.field',
+              { defaultMessage: 'Field' }
+            )}
+          >
+            <EuiSuperSelect
+              options={fieldOptions}
+              valueOfSelected={entry.field}
+              onChange={handleFieldUpdate}
+              data-test-subj={getTestId('field')}
+            />
+          </ConditionEntryCell>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <ConditionEntryCell
+            showLabel={showLabels}
+            label={i18n.translate(
+              'xpack.securitySolution.trustedapps.logicalConditionBuilder.entry.operator',
+              { defaultMessage: 'Operator' }
+            )}
+          >
+            <EuiFieldText
+              name="operator"
+              value={i18n.translate(
+                'xpack.securitySolution.trustedapps.logicalConditionBuilder.entry.operator.is',
+                { defaultMessage: 'is' }
+              )}
+              readOnly
+            />
+          </ConditionEntryCell>
+        </EuiFlexItem>
+        <EuiFlexItem grow={3}>
+          <ConditionEntryCell
+            showLabel={showLabels}
+            label={i18n.translate(
+              'xpack.securitySolution.trustedapps.logicalConditionBuilder.entry.value',
+              { defaultMessage: 'Value' }
+            )}
+          >
+            <EuiFieldText
+              name="value"
+              value={entry.value}
+              onChange={handleValueUpdate}
+              data-test-subj={getTestId('value')}
+            />
+          </ConditionEntryCell>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {/* Unicode `nbsp` is used below so that Remove button is property displayed */}
+          <ConditionEntryCell showLabel={showLabels} label={'\u00A0'}>
+            <EuiButtonIcon
+              color="danger"
+              iconType="trash"
+              onClick={handleRemoveClick}
+              isDisabled={isRemoveDisabled}
+              aria-label={i18n.translate(
+                'xpack.securitySolution.trustedapps.logicalConditionBuilder.entry.removeLabel',
+                { defaultMessage: 'Remove Entry' }
+              )}
+            />
+          </ConditionEntryCell>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+);
+
+ConditionEntry.displayName = 'ConditionEntry';
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_group.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_group.tsx
new file mode 100644
index 0000000000000..323eddbaf8648
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_group.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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, { memo, useCallback } from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import styled from 'styled-components';
+import { NewTrustedApp, TrustedApp } from '../../../../../../../../common/endpoint/types';
+import { ConditionEntry, ConditionEntryProps } from './condition_entry';
+import { AndOrBadge } from '../../../../../../../common/components/and_or_badge';
+
+const AndBadgeFlexItem = styled(EuiFlexItem)`
+  padding-top: 20px;
+`;
+
+export interface ConditionGroupProps {
+  os: TrustedApp['os'];
+  entries: TrustedApp['entries'];
+  onEntryRemove: ConditionEntryProps['onRemove'];
+  onEntryChange: ConditionEntryProps['onChange'];
+  'data-test-subj'?: string;
+}
+export const ConditionGroup = memo<ConditionGroupProps>(
+  ({ os, entries, onEntryRemove, onEntryChange, 'data-test-subj': dataTestSubj }) => {
+    const getTestId = useCallback(
+      (suffix: string): string | undefined => {
+        if (dataTestSubj) {
+          return `${dataTestSubj}-${suffix}`;
+        }
+      },
+      [dataTestSubj]
+    );
+    return (
+      <EuiFlexGroup gutterSize="xs" data-test-subj={dataTestSubj}>
+        {entries.length > 1 && (
+          <AndBadgeFlexItem grow={false}>
+            <AndOrBadge type={'and'} includeAntennas={true} />
+          </AndBadgeFlexItem>
+        )}
+        <EuiFlexItem grow={1}>
+          {(entries as (NewTrustedApp & { os: 'windows' })['entries']).map((entry, index) => (
+            <ConditionEntry
+              key={index}
+              os={os}
+              entry={entry}
+              showLabels={index === 0}
+              isRemoveDisabled={index === 0 && entries.length <= 1}
+              onRemove={onEntryRemove}
+              onChange={onEntryChange}
+              data-test-subj={getTestId(`entry${index}`)}
+            />
+          ))}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+);
+
+ConditionGroup.displayName = 'ConditionGroup';
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/index.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/index.ts
new file mode 100644
index 0000000000000..944a30abd73d3
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { LogicalConditionBuilder } from './logical_condition_builder';
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/logical_condition_builder.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/logical_condition_builder.tsx
new file mode 100644
index 0000000000000..e5e84acd0c4ad
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/logical_condition_builder.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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, { memo, useCallback } from 'react';
+import { EuiButton, CommonProps, EuiText, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { ConditionGroup, ConditionGroupProps } from './components/condition_group';
+
+const BUTTON_MIN_WIDTH = Object.freeze({ minWidth: '95px' });
+
+export type LogicalConditionBuilderProps = CommonProps &
+  ConditionGroupProps & {
+    onAndClicked: () => void;
+    isAndDisabled?: boolean;
+  };
+export const LogicalConditionBuilder = memo<LogicalConditionBuilderProps>(
+  ({
+    entries,
+    os,
+    className,
+    isAndDisabled = false,
+    onAndClicked,
+    onEntryRemove,
+    onEntryChange,
+    'data-test-subj': dataTestSubj,
+  }) => {
+    const getTestId = useCallback(
+      (suffix: string): string | undefined => {
+        if (dataTestSubj) {
+          return `${dataTestSubj}-${suffix}`;
+        }
+      },
+      [dataTestSubj]
+    );
+    return (
+      <div data-test-subj={dataTestSubj} className={className}>
+        <div>
+          {entries.length === 0 ? (
+            <NoEntries />
+          ) : (
+            <ConditionGroup
+              os={os}
+              entries={entries}
+              onEntryRemove={onEntryRemove}
+              onEntryChange={onEntryChange}
+              data-test-subj={getTestId('group1')}
+            />
+          )}
+        </div>
+        <EuiSpacer size="s" />
+        <EuiButton
+          fill
+          size="s"
+          iconType="plusInCircle"
+          onClick={onAndClicked}
+          data-test-subj={getTestId('AndButton')}
+          isDisabled={isAndDisabled}
+          style={BUTTON_MIN_WIDTH}
+        >
+          <FormattedMessage
+            id="xpack.securitySolution.trustedapps.logicalConditionBuilder.andOperator"
+            defaultMessage="AND"
+          />
+        </EuiButton>
+      </div>
+    );
+  }
+);
+
+LogicalConditionBuilder.displayName = 'LogicalConditionBuilder';
+
+// FIXME:PT need to style this better.
+const NoEntries = memo(() => {
+  return (
+    <div>
+      <EuiText>
+        <FormattedMessage
+          id="xpack.securitySolution.trustedapps.logicalConditionBuilder.noEntries"
+          defaultMessage="No entries"
+        />
+      </EuiText>
+    </div>
+  );
+});
+
+NoEntries.displayName = 'NoEntries';
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/constants.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/constants.ts
new file mode 100644
index 0000000000000..d5df8c528511a
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/constants.ts
@@ -0,0 +1,20 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { TrustedApp } from '../../../../../common/endpoint/types';
+
+export const OS_TITLES: Readonly<{ [K in TrustedApp['os']]: string }> = {
+  windows: i18n.translate('xpack.securitySolution.trustedapps.os.windows', {
+    defaultMessage: 'Windows',
+  }),
+  macos: i18n.translate('xpack.securitySolution.trustedapps.os.macos', {
+    defaultMessage: 'Mac OS',
+  }),
+  linux: i18n.translate('xpack.securitySolution.trustedapps.os.linux', {
+    defaultMessage: 'Linux',
+  }),
+};
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_list.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_list.tsx
index a9077dd84913e..ea834060d5223 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_list.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_list.tsx
@@ -26,18 +26,7 @@ import {
 import { useTrustedAppsSelector } from './hooks';
 
 import { FormattedDate } from '../../../../common/components/formatted_date';
-
-const OS_TITLES: Readonly<{ [K in TrustedApp['os']]: string }> = {
-  windows: i18n.translate('xpack.securitySolution.trustedapps.os.windows', {
-    defaultMessage: 'Windows',
-  }),
-  macos: i18n.translate('xpack.securitySolution.trustedapps.os.macos', {
-    defaultMessage: 'Mac OS',
-  }),
-  linux: i18n.translate('xpack.securitySolution.trustedapps.os.linux', {
-    defaultMessage: 'Linux',
-  }),
-};
+import { OS_TITLES } from './constants';
 
 const COLUMN_TITLES: Readonly<{ [K in keyof Omit<TrustedApp, 'id' | 'entries'>]: string }> = {
   name: i18n.translate('xpack.securitySolution.trustedapps.list.columns.name', {
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx
index cc7dbd42d7a7d..c0c9cdf227643 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx
@@ -3,13 +3,273 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { shallow } from 'enzyme';
 import React from 'react';
-
+import * as reactTestingLibrary from '@testing-library/react';
 import { TrustedAppsPage } from './trusted_apps_page';
+import { AppContextTestRender, createAppRootMockRenderer } from '../../../../common/mock/endpoint';
+import { fireEvent } from '@testing-library/dom';
+import { MiddlewareActionSpyHelper } from '../../../../common/store/test_utils';
+import { NewTrustedApp, PostTrustedAppCreateResponse } from '../../../../../common/endpoint/types';
+import { HttpFetchOptions } from 'kibana/public';
+
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => 'mockId',
+}));
 
 describe('TrustedAppsPage', () => {
+  let history: AppContextTestRender['history'];
+  let coreStart: AppContextTestRender['coreStart'];
+  let waitForAction: MiddlewareActionSpyHelper['waitForAction'];
+  let render: () => ReturnType<AppContextTestRender['render']>;
+
+  beforeEach(() => {
+    const mockedContext = createAppRootMockRenderer();
+
+    history = mockedContext.history;
+    coreStart = mockedContext.coreStart;
+    waitForAction = mockedContext.middlewareSpy.waitForAction;
+    render = () => mockedContext.render(<TrustedAppsPage />);
+    reactTestingLibrary.act(() => {
+      history.push('/trusted_apps');
+    });
+  });
+
   test('rendering', () => {
-    expect(shallow(<TrustedAppsPage />)).toMatchSnapshot();
+    expect(render()).toMatchSnapshot();
+  });
+
+  it('should display a Add Trusted App button', async () => {
+    const { getByTestId } = render();
+    const addButton = await getByTestId('trustedAppsListAddButton');
+    expect(addButton.textContent).toBe('Add Trusted Application');
+  });
+
+  describe('when the Add Trusted App button is clicked', () => {
+    const renderAndClickAddButton = async (): Promise<
+      ReturnType<AppContextTestRender['render']>
+    > => {
+      const renderResult = render();
+      const addButton = renderResult.getByTestId('trustedAppsListAddButton');
+      reactTestingLibrary.act(() => {
+        fireEvent.click(addButton, { button: 1 });
+      });
+      return renderResult;
+    };
+
+    it('should display the create flyout', async () => {
+      const { getByTestId } = await renderAndClickAddButton();
+      const flyout = getByTestId('addTrustedAppFlyout');
+      expect(flyout).not.toBeNull();
+
+      const flyoutTitle = getByTestId('addTrustedAppFlyout-headerTitle');
+      expect(flyoutTitle.textContent).toBe('Add trusted application');
+    });
+
+    it('should update the URL to indicate the flyout is opened', async () => {
+      await renderAndClickAddButton();
+      expect(/show\=create/.test(history.location.search)).toBe(true);
+    });
+
+    it('should preserve other URL search params', async () => {
+      reactTestingLibrary.act(() => {
+        history.push('/trusted_apps?page_index=2&page_size=20');
+      });
+      await renderAndClickAddButton();
+      expect(history.location.search).toBe('?page_index=2&page_size=20&show=create');
+    });
+
+    it('should display create form', async () => {
+      const { getByTestId } = await renderAndClickAddButton();
+      expect(getByTestId('addTrustedAppFlyout-createForm')).toMatchSnapshot();
+    });
+
+    it('should initially have the flyout Add button disabled', async () => {
+      const { getByTestId } = await renderAndClickAddButton();
+      expect((getByTestId('addTrustedAppFlyout-createButton') as HTMLButtonElement).disabled).toBe(
+        true
+      );
+    });
+
+    it('should close flyout if cancel button is clicked', async () => {
+      const { getByTestId, queryByTestId } = await renderAndClickAddButton();
+      const cancelButton = getByTestId('addTrustedAppFlyout-cancelButton');
+      reactTestingLibrary.act(() => {
+        fireEvent.click(cancelButton, { button: 1 });
+      });
+      expect(queryByTestId('addTrustedAppFlyout')).toBeNull();
+      expect(history.location.search).toBe('');
+    });
+
+    it('should close flyout if flyout close button is clicked', async () => {
+      const { getByTestId, queryByTestId } = await renderAndClickAddButton();
+      const flyoutCloseButton = getByTestId('euiFlyoutCloseButton');
+      reactTestingLibrary.act(() => {
+        fireEvent.click(flyoutCloseButton, { button: 1 });
+      });
+      expect(queryByTestId('addTrustedAppFlyout')).toBeNull();
+      expect(history.location.search).toBe('');
+    });
+
+    describe('and when the form data is valid', () => {
+      const fillInCreateForm = ({ getByTestId }: ReturnType<AppContextTestRender['render']>) => {
+        reactTestingLibrary.act(() => {
+          fireEvent.change(getByTestId('addTrustedAppFlyout-createForm-nameTextField'), {
+            target: { value: 'trusted app A' },
+          });
+
+          fireEvent.change(
+            getByTestId('addTrustedAppFlyout-createForm-conditionsBuilder-group1-entry0-value'),
+            { target: { value: 'SOME$HASH#HERE' } }
+          );
+
+          fireEvent.change(getByTestId('addTrustedAppFlyout-createForm-descriptionField'), {
+            target: { value: 'let this be' },
+          });
+        });
+      };
+
+      it('should enable the Flyout Add button', async () => {
+        const renderResult = await renderAndClickAddButton();
+        const { getByTestId } = renderResult;
+        fillInCreateForm(renderResult);
+        const flyoutAddButton = getByTestId(
+          'addTrustedAppFlyout-createButton'
+        ) as HTMLButtonElement;
+        expect(flyoutAddButton.disabled).toBe(false);
+      });
+
+      describe('and the Flyout Add button is clicked', () => {
+        let renderResult: ReturnType<AppContextTestRender['render']>;
+        let resolveHttpPost: (response?: PostTrustedAppCreateResponse) => void;
+        let httpPostBody: string;
+        let rejectHttpPost: (response: Error) => void;
+
+        beforeEach(async () => {
+          // Mock the http.post() call and expose `resolveHttpPost()` method so that
+          // we can control when the API call response is returned, which will allow us
+          // to test the UI behaviours while the API call is in flight
+          coreStart.http.post.mockImplementation(
+            // @ts-ignore
+            async (path: string, options: HttpFetchOptions) => {
+              return new Promise((resolve, reject) => {
+                httpPostBody = options.body as string;
+                resolveHttpPost = resolve;
+                rejectHttpPost = reject;
+              });
+            }
+          );
+
+          renderResult = await renderAndClickAddButton();
+          fillInCreateForm(renderResult);
+          const userClickedSaveActionWatcher = waitForAction('userClickedSaveNewTrustedAppButton');
+          reactTestingLibrary.act(() => {
+            fireEvent.click(renderResult.getByTestId('addTrustedAppFlyout-createButton'), {
+              button: 1,
+            });
+          });
+          await reactTestingLibrary.act(async () => {
+            await userClickedSaveActionWatcher;
+          });
+        });
+
+        afterEach(() => resolveHttpPost());
+
+        it('should disable the Cancel button', async () => {
+          expect(
+            (renderResult.getByTestId('addTrustedAppFlyout-cancelButton') as HTMLButtonElement)
+              .disabled
+          ).toBe(true);
+          resolveHttpPost();
+        });
+
+        it('should hide the dialog close button', async () => {
+          expect(renderResult.queryByTestId('euiFlyoutCloseButton')).toBeNull();
+        });
+
+        it('should disable the flyout Add button and set it to loading', async () => {
+          const saveButton = renderResult.getByTestId(
+            'addTrustedAppFlyout-createButton'
+          ) as HTMLButtonElement;
+          expect(saveButton.disabled).toBe(true);
+          expect(saveButton.querySelector('.euiLoadingSpinner')).not.toBeNull();
+        });
+
+        describe('and if create was successful', () => {
+          beforeEach(async () => {
+            const successCreateApiResponse: PostTrustedAppCreateResponse = {
+              data: {
+                ...(JSON.parse(httpPostBody) as NewTrustedApp),
+                id: '1',
+                created_at: '2020-09-16T14:09:45.484Z',
+                created_by: 'kibana',
+              },
+            };
+            await reactTestingLibrary.act(async () => {
+              const serverResponseAction = waitForAction('serverReturnedCreateTrustedAppSuccess');
+              coreStart.http.get.mockClear();
+              resolveHttpPost(successCreateApiResponse);
+              await serverResponseAction;
+            });
+          });
+
+          it('should close the flyout', async () => {
+            expect(renderResult.queryByTestId('addTrustedAppFlyout')).toBeNull();
+          });
+
+          it('should show success toast notification', async () => {
+            expect(coreStart.notifications.toasts.addSuccess.mock.calls[0][0]).toEqual(
+              '"trusted app A" has been added to the Trusted Applications list.'
+            );
+          });
+
+          it('should trigger the List to reload', async () => {
+            expect(coreStart.http.get.mock.calls[0][0]).toEqual('/api/endpoint/trusted_apps');
+          });
+        });
+
+        describe('and if create failed', () => {
+          beforeEach(async () => {
+            const failedCreateApiResponse: Error & { body?: { message: string } } = new Error(
+              'Bad call'
+            );
+            failedCreateApiResponse.body = {
+              message: 'bad call',
+            };
+            await reactTestingLibrary.act(async () => {
+              const serverResponseAction = waitForAction('serverReturnedCreateTrustedAppFailure');
+              coreStart.http.get.mockClear();
+              rejectHttpPost(failedCreateApiResponse);
+              await serverResponseAction;
+            });
+          });
+
+          it('should continue to show the flyout', async () => {
+            expect(renderResult.getByTestId('addTrustedAppFlyout')).not.toBeNull();
+          });
+
+          it('should enable the Cancel Button', async () => {
+            expect(
+              (renderResult.getByTestId('addTrustedAppFlyout-cancelButton') as HTMLButtonElement)
+                .disabled
+            ).toBe(false);
+          });
+
+          it('should show the dialog close button', async () => {
+            expect(renderResult.getByTestId('euiFlyoutCloseButton')).not.toBeNull();
+          });
+
+          it('should enable the flyout Add button and remove loading indicating', () => {
+            expect(
+              (renderResult.getByTestId('addTrustedAppFlyout-createButton') as HTMLButtonElement)
+                .disabled
+            ).toBe(false);
+          });
+
+          it('should show API errors in the form', async () => {
+            expect(renderResult.container.querySelector('.euiForm__errors')).not.toBeNull();
+          });
+        });
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx
index c0d3b9cd699de..a0dae900eb30e 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx
@@ -3,12 +3,49 @@
  * 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, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiButton } from '@elastic/eui';
+import { useHistory } from 'react-router-dom';
 import { AdministrationListPage } from '../../../components/administration_list_page';
 import { TrustedAppsList } from './trusted_apps_list';
+import { CreateTrustedAppFlyout } from './components/create_trusted_app_flyout';
+import { getTrustedAppsListPath } from '../../../common/routing';
+import { useTrustedAppsSelector } from './hooks';
+import { getListCurrentShowValue, getListUrlSearchParams } from '../store/selectors';
 
 export const TrustedAppsPage = memo(() => {
+  const history = useHistory();
+  const urlParams = useTrustedAppsSelector(getListUrlSearchParams);
+  const showAddFlout = useTrustedAppsSelector(getListCurrentShowValue) === 'create';
+  const handleAddButtonClick = useCallback(() => {
+    history.push(
+      getTrustedAppsListPath({
+        ...urlParams,
+        show: 'create',
+      })
+    );
+  }, [history, urlParams]);
+  const handleAddFlyoutClose = useCallback(() => {
+    const { show, ...paginationParamsOnly } = urlParams;
+    history.push(getTrustedAppsListPath(paginationParamsOnly));
+  }, [history, urlParams]);
+
+  const addButton = (
+    <EuiButton
+      fill
+      iconType="plusInCircle"
+      isDisabled={showAddFlout}
+      onClick={handleAddButtonClick}
+      data-test-subj="trustedAppsListAddButton"
+    >
+      <FormattedMessage
+        id="xpack.securitySolution.trustedapps.list.addButton"
+        defaultMessage="Add Trusted Application"
+      />
+    </EuiButton>
+  );
+
   return (
     <AdministrationListPage
       beta={true}
@@ -24,7 +61,15 @@ export const TrustedAppsPage = memo(() => {
           defaultMessage="View and configure trusted applications"
         />
       }
+      actions={addButton}
     >
+      {showAddFlout && (
+        <CreateTrustedAppFlyout
+          onClose={handleAddFlyoutClose}
+          size="s"
+          data-test-subj="addTrustedAppFlyout"
+        />
+      )}
       <TrustedAppsList />
     </AdministrationListPage>
   );
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/trusted_apps/trusted_apps.test.ts b/x-pack/plugins/security_solution/server/endpoint/routes/trusted_apps/trusted_apps.test.ts
index eeee2d99bf26d..35d0bf1116148 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/trusted_apps/trusted_apps.test.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/trusted_apps/trusted_apps.test.ts
@@ -144,7 +144,7 @@ describe('when invoking endpoint trusted apps route handlers', () => {
       os: 'windows',
       entries: [
         {
-          field: 'path',
+          field: 'process.path',
           type: 'match',
           operator: 'included',
           value: 'c:/programs files/Anti-Virus',
@@ -197,7 +197,7 @@ describe('when invoking endpoint trusted apps route handlers', () => {
         description: 'this one is ok',
         entries: [
           {
-            field: 'path',
+            field: 'process.path',
             operator: 'included',
             type: 'match',
             value: 'c:/programs files/Anti-Virus',
@@ -224,7 +224,7 @@ describe('when invoking endpoint trusted apps route handlers', () => {
             description: 'this one is ok',
             entries: [
               {
-                field: 'path',
+                field: 'process.path',
                 operator: 'included',
                 type: 'match',
                 value: 'c:/programs files/Anti-Virus',