diff --git a/package.json b/package.json
index 10083ff07fccd..505fac1df935e 100644
--- a/package.json
+++ b/package.json
@@ -127,6 +127,7 @@
     "@hapi/good-squeeze": "5.2.1",
     "@hapi/wreck": "^15.0.2",
     "@kbn/analytics": "1.0.0",
+    "@kbn/apm-config-loader": "1.0.0",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/config": "1.0.0",
     "@kbn/config-schema": "1.0.0",
diff --git a/packages/kbn-apm-config-loader/README.md b/packages/kbn-apm-config-loader/README.md
new file mode 100644
index 0000000000000..51623dc745f2c
--- /dev/null
+++ b/packages/kbn-apm-config-loader/README.md
@@ -0,0 +1,13 @@
+# @kbn/apm-config-loader
+
+Configuration loader for the APM instrumentation script.
+
+This module is only meant to be used by the APM instrumentation script (`src/apm.js`)
+to load the required configuration options from the `kibana.yaml` configuration file with
+default values.
+
+### Why not just use @kbn-config?
+
+`@kbn/config` is the recommended way to load and read the kibana configuration file,
+however in the specific case of APM, we want to only need the minimal dependencies
+before loading `elastic-apm-node` to avoid losing instrumentation on the already loaded modules.
\ No newline at end of file
diff --git a/packages/kbn-apm-config-loader/__fixtures__/config.yml b/packages/kbn-apm-config-loader/__fixtures__/config.yml
new file mode 100644
index 0000000000000..b0706d8ff8ea0
--- /dev/null
+++ b/packages/kbn-apm-config-loader/__fixtures__/config.yml
@@ -0,0 +1,11 @@
+pid:
+  enabled: true
+  file: '/var/run/kibana.pid'
+  obj: { val: 3 }
+  arr: [1]
+  empty_obj: {}
+  empty_arr: []
+obj: { val: 3 }
+arr: [1, 2]
+empty_obj: {}
+empty_arr: []
diff --git a/packages/kbn-apm-config-loader/__fixtures__/config_flat.yml b/packages/kbn-apm-config-loader/__fixtures__/config_flat.yml
new file mode 100644
index 0000000000000..a687a9a9088bf
--- /dev/null
+++ b/packages/kbn-apm-config-loader/__fixtures__/config_flat.yml
@@ -0,0 +1,6 @@
+pid.enabled: true
+pid.file: '/var/run/kibana.pid'
+pid.obj: { val: 3 }
+pid.arr: [1, 2]
+pid.empty_obj: {}
+pid.empty_arr: []
diff --git a/packages/kbn-apm-config-loader/__fixtures__/en_var_ref_config.yml b/packages/kbn-apm-config-loader/__fixtures__/en_var_ref_config.yml
new file mode 100644
index 0000000000000..761f6a43ba452
--- /dev/null
+++ b/packages/kbn-apm-config-loader/__fixtures__/en_var_ref_config.yml
@@ -0,0 +1,5 @@
+foo: 1
+bar: "pre-${KBN_ENV_VAR1}-mid-${KBN_ENV_VAR2}-post"
+
+elasticsearch:
+  requestHeadersWhitelist: ["${KBN_ENV_VAR1}", "${KBN_ENV_VAR2}"]
diff --git a/packages/kbn-apm-config-loader/__fixtures__/one.yml b/packages/kbn-apm-config-loader/__fixtures__/one.yml
new file mode 100644
index 0000000000000..ccef51b546194
--- /dev/null
+++ b/packages/kbn-apm-config-loader/__fixtures__/one.yml
@@ -0,0 +1,9 @@
+foo: 1
+bar: true
+xyz: ['1', '2']
+empty_arr: []
+abc:
+  def: test
+  qwe: 1
+  zyx: { val: 1 }
+pom.bom: 3
diff --git a/packages/kbn-apm-config-loader/__fixtures__/two.yml b/packages/kbn-apm-config-loader/__fixtures__/two.yml
new file mode 100644
index 0000000000000..a2ec41265d50f
--- /dev/null
+++ b/packages/kbn-apm-config-loader/__fixtures__/two.yml
@@ -0,0 +1,10 @@
+foo: 2
+baz: bonkers
+xyz: ['3', '4']
+arr: [1]
+empty_arr: []
+abc:
+  ghi: test2
+  qwe: 2
+  zyx: {}
+pom.mob: 4
diff --git a/packages/kbn-apm-config-loader/package.json b/packages/kbn-apm-config-loader/package.json
new file mode 100644
index 0000000000000..1982ccdeda0ff
--- /dev/null
+++ b/packages/kbn-apm-config-loader/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@kbn/apm-config-loader",
+  "main": "./target/index.js",
+  "types": "./target/index.d.ts",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "build": "tsc",
+    "kbn:bootstrap": "yarn build",
+    "kbn:watch": "yarn build --watch"
+  },
+  "dependencies": {
+    "@elastic/safer-lodash-set": "0.0.0",
+    "@kbn/utils": "1.0.0",
+    "js-yaml": "3.13.1",
+    "lodash": "^4.17.20"
+  },
+  "devDependencies": {
+    "typescript": "4.0.2",
+    "tsd": "^0.7.4"
+  }
+}
diff --git a/packages/kbn-apm-config-loader/src/config.test.mocks.ts b/packages/kbn-apm-config-loader/src/config.test.mocks.ts
new file mode 100644
index 0000000000000..a0422665a55d2
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/config.test.mocks.ts
@@ -0,0 +1,66 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { join } from 'path';
+const childProcessModule = jest.requireActual('child_process');
+const fsModule = jest.requireActual('fs');
+
+export const mockedRootDir = '/root';
+
+export const packageMock = {
+  raw: {} as any,
+};
+jest.doMock(join(mockedRootDir, 'package.json'), () => packageMock.raw, { virtual: true });
+
+export const devConfigMock = {
+  raw: {} as any,
+};
+jest.doMock(join(mockedRootDir, 'config', 'apm.dev.js'), () => devConfigMock.raw, {
+  virtual: true,
+});
+
+export const gitRevExecMock = jest.fn();
+jest.doMock('child_process', () => ({
+  ...childProcessModule,
+  execSync: (command: string, options: any) => {
+    if (command.startsWith('git rev-parse')) {
+      return gitRevExecMock(command, options);
+    }
+    return childProcessModule.execSync(command, options);
+  },
+}));
+
+export const readUuidFileMock = jest.fn();
+jest.doMock('fs', () => ({
+  ...fsModule,
+  readFileSync: (path: string, options: any) => {
+    if (path.endsWith('uuid')) {
+      return readUuidFileMock(path, options);
+    }
+    return fsModule.readFileSync(path, options);
+  },
+}));
+
+export const resetAllMocks = () => {
+  packageMock.raw = {};
+  devConfigMock.raw = {};
+  gitRevExecMock.mockReset();
+  readUuidFileMock.mockReset();
+  jest.resetModules();
+};
diff --git a/packages/kbn-apm-config-loader/src/config.test.ts b/packages/kbn-apm-config-loader/src/config.test.ts
new file mode 100644
index 0000000000000..fe6247673e312
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/config.test.ts
@@ -0,0 +1,158 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  packageMock,
+  mockedRootDir,
+  gitRevExecMock,
+  devConfigMock,
+  readUuidFileMock,
+  resetAllMocks,
+} from './config.test.mocks';
+
+import { ApmConfiguration } from './config';
+
+describe('ApmConfiguration', () => {
+  beforeEach(() => {
+    packageMock.raw = {
+      version: '8.0.0',
+      build: {
+        sha: 'sha',
+      },
+    };
+  });
+
+  afterEach(() => {
+    resetAllMocks();
+  });
+
+  it('sets the correct service name', () => {
+    packageMock.raw = {
+      version: '9.2.1',
+    };
+    const config = new ApmConfiguration(mockedRootDir, {}, false);
+    expect(config.getConfig('myservice').serviceName).toBe('myservice-9_2_1');
+  });
+
+  it('sets the git revision from `git rev-parse` command in non distribution mode', () => {
+    gitRevExecMock.mockReturnValue('some-git-rev');
+    const config = new ApmConfiguration(mockedRootDir, {}, false);
+    expect(config.getConfig('serviceName').globalLabels.git_rev).toBe('some-git-rev');
+  });
+
+  it('sets the git revision from `pkg.build.sha` in distribution mode', () => {
+    gitRevExecMock.mockReturnValue('dev-sha');
+    packageMock.raw = {
+      version: '9.2.1',
+      build: {
+        sha: 'distribution-sha',
+      },
+    };
+    const config = new ApmConfiguration(mockedRootDir, {}, true);
+    expect(config.getConfig('serviceName').globalLabels.git_rev).toBe('distribution-sha');
+  });
+
+  it('reads the kibana uuid from the uuid file', () => {
+    readUuidFileMock.mockReturnValue('instance-uuid');
+    const config = new ApmConfiguration(mockedRootDir, {}, false);
+    expect(config.getConfig('serviceName').globalLabels.kibana_uuid).toBe('instance-uuid');
+  });
+
+  it('uses the uuid from the kibana config if present', () => {
+    readUuidFileMock.mockReturnValue('uuid-from-file');
+    const kibanaConfig = {
+      server: {
+        uuid: 'uuid-from-config',
+      },
+    };
+    const config = new ApmConfiguration(mockedRootDir, kibanaConfig, false);
+    expect(config.getConfig('serviceName').globalLabels.kibana_uuid).toBe('uuid-from-config');
+  });
+
+  it('uses the correct default config depending on the `isDistributable` parameter', () => {
+    let config = new ApmConfiguration(mockedRootDir, {}, false);
+    expect(config.getConfig('serviceName')).toEqual(
+      expect.objectContaining({
+        serverUrl: expect.any(String),
+        secretToken: expect.any(String),
+      })
+    );
+
+    config = new ApmConfiguration(mockedRootDir, {}, true);
+    expect(Object.keys(config.getConfig('serviceName'))).not.toContain('serverUrl');
+  });
+
+  it('loads the configuration from the kibana config file', () => {
+    const kibanaConfig = {
+      elastic: {
+        apm: {
+          active: true,
+          serverUrl: 'https://url',
+          secretToken: 'secret',
+        },
+      },
+    };
+    const config = new ApmConfiguration(mockedRootDir, kibanaConfig, true);
+    expect(config.getConfig('serviceName')).toEqual(
+      expect.objectContaining({
+        active: true,
+        serverUrl: 'https://url',
+        secretToken: 'secret',
+      })
+    );
+  });
+
+  it('loads the configuration from the dev config is present', () => {
+    devConfigMock.raw = {
+      active: true,
+      serverUrl: 'https://dev-url.co',
+    };
+    const config = new ApmConfiguration(mockedRootDir, {}, true);
+    expect(config.getConfig('serviceName')).toEqual(
+      expect.objectContaining({
+        active: true,
+        serverUrl: 'https://dev-url.co',
+      })
+    );
+  });
+
+  it('respect the precedence of the dev config', () => {
+    const kibanaConfig = {
+      elastic: {
+        apm: {
+          active: true,
+          serverUrl: 'https://url',
+          secretToken: 'secret',
+        },
+      },
+    };
+    devConfigMock.raw = {
+      active: true,
+      serverUrl: 'https://dev-url.co',
+    };
+    const config = new ApmConfiguration(mockedRootDir, kibanaConfig, true);
+    expect(config.getConfig('serviceName')).toEqual(
+      expect.objectContaining({
+        active: true,
+        serverUrl: 'https://dev-url.co',
+        secretToken: 'secret',
+      })
+    );
+  });
+});
diff --git a/packages/kbn-apm-config-loader/src/config.ts b/packages/kbn-apm-config-loader/src/config.ts
new file mode 100644
index 0000000000000..aab82c6c06a58
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/config.ts
@@ -0,0 +1,139 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { join } from 'path';
+import { merge, get } from 'lodash';
+import { execSync } from 'child_process';
+// deep import to avoid loading the whole package
+import { getDataPath } from '@kbn/utils/target/path';
+import { readFileSync } from 'fs';
+import { ApmAgentConfig } from './types';
+
+const getDefaultConfig = (isDistributable: boolean): ApmAgentConfig => {
+  if (isDistributable) {
+    return {
+      active: false,
+      globalLabels: {},
+    };
+  }
+  return {
+    active: false,
+    serverUrl: 'https://f1542b814f674090afd914960583265f.apm.us-central1.gcp.cloud.es.io:443',
+    // The secretToken below is intended to be hardcoded in this file even though
+    // it makes it public. This is not a security/privacy issue. Normally we'd
+    // instead disable the need for a secretToken in the APM Server config where
+    // the data is transmitted to, but due to how it's being hosted, it's easier,
+    // for now, to simply leave it in.
+    secretToken: 'R0Gjg46pE9K9wGestd',
+    globalLabels: {},
+    breakdownMetrics: true,
+    centralConfig: false,
+    logUncaughtExceptions: true,
+  };
+};
+
+export class ApmConfiguration {
+  private baseConfig?: any;
+  private kibanaVersion: string;
+  private pkgBuild: Record<string, any>;
+
+  constructor(
+    private readonly rootDir: string,
+    private readonly rawKibanaConfig: Record<string, any>,
+    private readonly isDistributable: boolean
+  ) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { version, build } = require(join(this.rootDir, 'package.json'));
+    this.kibanaVersion = version.replace(/\./g, '_');
+    this.pkgBuild = build;
+  }
+
+  public getConfig(serviceName: string): ApmAgentConfig {
+    return {
+      ...this.getBaseConfig(),
+      serviceName: `${serviceName}-${this.kibanaVersion}`,
+    };
+  }
+
+  private getBaseConfig() {
+    if (!this.baseConfig) {
+      const apmConfig = merge(
+        getDefaultConfig(this.isDistributable),
+        this.getConfigFromKibanaConfig(),
+        this.getDevConfig()
+      );
+
+      const rev = this.getGitRev();
+      if (rev !== null) {
+        apmConfig.globalLabels.git_rev = rev;
+      }
+
+      const uuid = this.getKibanaUuid();
+      if (uuid) {
+        apmConfig.globalLabels.kibana_uuid = uuid;
+      }
+      this.baseConfig = apmConfig;
+    }
+
+    return this.baseConfig;
+  }
+
+  private getConfigFromKibanaConfig(): ApmAgentConfig {
+    return get(this.rawKibanaConfig, 'elastic.apm', {});
+  }
+
+  private getKibanaUuid() {
+    // try to access the `server.uuid` value from the config file first.
+    // if not manually defined, we will then read the value from the `{DATA_FOLDER}/uuid` file.
+    // note that as the file is created by the platform AFTER apm init, the file
+    // will not be present at first startup, but there is nothing we can really do about that.
+    if (get(this.rawKibanaConfig, 'server.uuid')) {
+      return this.rawKibanaConfig.server.uuid;
+    }
+
+    const dataPath: string = get(this.rawKibanaConfig, 'path.data') || getDataPath();
+    try {
+      const filename = join(dataPath, 'uuid');
+      return readFileSync(filename, 'utf-8');
+    } catch (e) {} // eslint-disable-line no-empty
+  }
+
+  private getDevConfig(): ApmAgentConfig {
+    try {
+      const apmDevConfigPath = join(this.rootDir, 'config', 'apm.dev.js');
+      return require(apmDevConfigPath);
+    } catch (e) {
+      return {};
+    }
+  }
+
+  private getGitRev() {
+    if (this.isDistributable) {
+      return this.pkgBuild.sha;
+    }
+    try {
+      return execSync('git rev-parse --short HEAD', {
+        encoding: 'utf-8' as BufferEncoding,
+        stdio: ['ignore', 'pipe', 'ignore'],
+      }).trim();
+    } catch (e) {
+      return null;
+    }
+  }
+}
diff --git a/packages/kbn-apm-config-loader/src/config_loader.test.mocks.ts b/packages/kbn-apm-config-loader/src/config_loader.test.mocks.ts
new file mode 100644
index 0000000000000..74b50d9daf632
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/config_loader.test.mocks.ts
@@ -0,0 +1,45 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const getConfigurationFilePathsMock = jest.fn();
+jest.doMock('./utils/get_config_file_paths', () => ({
+  getConfigurationFilePaths: getConfigurationFilePathsMock,
+}));
+
+export const getConfigFromFilesMock = jest.fn();
+jest.doMock('./utils/read_config', () => ({
+  getConfigFromFiles: getConfigFromFilesMock,
+}));
+
+export const applyConfigOverridesMock = jest.fn();
+jest.doMock('./utils/apply_config_overrides', () => ({
+  applyConfigOverrides: applyConfigOverridesMock,
+}));
+
+export const ApmConfigurationMock = jest.fn();
+jest.doMock('./config', () => ({
+  ApmConfiguration: ApmConfigurationMock,
+}));
+
+export const resetAllMocks = () => {
+  getConfigurationFilePathsMock.mockReset();
+  getConfigFromFilesMock.mockReset();
+  applyConfigOverridesMock.mockReset();
+  ApmConfigurationMock.mockReset();
+};
diff --git a/packages/kbn-apm-config-loader/src/config_loader.test.ts b/packages/kbn-apm-config-loader/src/config_loader.test.ts
new file mode 100644
index 0000000000000..da59237de231e
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/config_loader.test.ts
@@ -0,0 +1,75 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  ApmConfigurationMock,
+  applyConfigOverridesMock,
+  getConfigFromFilesMock,
+  getConfigurationFilePathsMock,
+  resetAllMocks,
+} from './config_loader.test.mocks';
+
+import { loadConfiguration } from './config_loader';
+
+describe('loadConfiguration', () => {
+  const argv = ['some', 'arbitrary', 'args'];
+  const rootDir = '/root/dir';
+  const isDistributable = false;
+
+  afterEach(() => {
+    resetAllMocks();
+  });
+
+  it('calls `getConfigurationFilePaths` with the correct arguments', () => {
+    loadConfiguration(argv, rootDir, isDistributable);
+    expect(getConfigurationFilePathsMock).toHaveBeenCalledTimes(1);
+    expect(getConfigurationFilePathsMock).toHaveBeenCalledWith(argv);
+  });
+
+  it('calls `getConfigFromFiles` with the correct arguments', () => {
+    const configPaths = ['/path/to/config', '/path/to/other/config'];
+    getConfigurationFilePathsMock.mockReturnValue(configPaths);
+
+    loadConfiguration(argv, rootDir, isDistributable);
+    expect(getConfigFromFilesMock).toHaveBeenCalledTimes(1);
+    expect(getConfigFromFilesMock).toHaveBeenCalledWith(configPaths);
+  });
+
+  it('calls `applyConfigOverrides` with the correct arguments', () => {
+    const config = { server: { uuid: 'uuid' } };
+    getConfigFromFilesMock.mockReturnValue(config);
+
+    loadConfiguration(argv, rootDir, isDistributable);
+    expect(applyConfigOverridesMock).toHaveBeenCalledTimes(1);
+    expect(applyConfigOverridesMock).toHaveBeenCalledWith(config, argv);
+  });
+
+  it('creates and return an `ApmConfiguration` instance', () => {
+    const apmInstance = { apmInstance: true };
+    ApmConfigurationMock.mockImplementation(() => apmInstance);
+
+    const config = { server: { uuid: 'uuid' } };
+    getConfigFromFilesMock.mockReturnValue(config);
+
+    const instance = loadConfiguration(argv, rootDir, isDistributable);
+    expect(ApmConfigurationMock).toHaveBeenCalledTimes(1);
+    expect(ApmConfigurationMock).toHaveBeenCalledWith(rootDir, config, isDistributable);
+    expect(instance).toBe(apmInstance);
+  });
+});
diff --git a/packages/kbn-apm-config-loader/src/config_loader.ts b/packages/kbn-apm-config-loader/src/config_loader.ts
new file mode 100644
index 0000000000000..edddd445b9b7a
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/config_loader.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getConfigurationFilePaths, getConfigFromFiles, applyConfigOverrides } from './utils';
+import { ApmConfiguration } from './config';
+
+/**
+ * Load the APM configuration.
+ *
+ * @param argv the `process.argv` arguments
+ * @param rootDir The root directory of kibana (where the sources and the `package.json` file are)
+ * @param production true for production builds, false otherwise
+ */
+export const loadConfiguration = (
+  argv: string[],
+  rootDir: string,
+  isDistributable: boolean
+): ApmConfiguration => {
+  const configPaths = getConfigurationFilePaths(argv);
+  const rawConfiguration = getConfigFromFiles(configPaths);
+  applyConfigOverrides(rawConfiguration, argv);
+  return new ApmConfiguration(rootDir, rawConfiguration, isDistributable);
+};
diff --git a/packages/kbn-apm-config-loader/src/index.ts b/packages/kbn-apm-config-loader/src/index.ts
new file mode 100644
index 0000000000000..0d9c057c7cf89
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { loadConfiguration } from './config_loader';
+export type { ApmConfiguration } from './config';
+export type { ApmAgentConfig } from './types';
diff --git a/packages/kbn-apm-config-loader/src/types.ts b/packages/kbn-apm-config-loader/src/types.ts
new file mode 100644
index 0000000000000..172edfe0af009
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/types.ts
@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// There is an (incomplete) `AgentConfigOptions` type declared in node_modules/elastic-apm-node/index.d.ts
+// but it's not exported, and using ts tricks to retrieve the type via Parameters<ApmAgent['start']>[0]
+// causes errors in the generated .d.ts file because of esModuleInterop and the fact that the apm module
+// is just exporting an instance of the `ApmAgent` type.
+export type ApmAgentConfig = Record<string, any>;
diff --git a/packages/kbn-apm-config-loader/src/utils/__snapshots__/read_config.test.ts.snap b/packages/kbn-apm-config-loader/src/utils/__snapshots__/read_config.test.ts.snap
new file mode 100644
index 0000000000000..afdce4e76d3f5
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/__snapshots__/read_config.test.ts.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`different cwd() resolves relative files based on the cwd 1`] = `
+Object {
+  "abc": Object {
+    "def": "test",
+    "qwe": 1,
+    "zyx": Object {
+      "val": 1,
+    },
+  },
+  "bar": true,
+  "empty_arr": Array [],
+  "foo": 1,
+  "pom": Object {
+    "bom": 3,
+  },
+  "xyz": Array [
+    "1",
+    "2",
+  ],
+}
+`;
+
+exports[`reads and merges multiple yaml files from file system and parses to json 1`] = `
+Object {
+  "abc": Object {
+    "def": "test",
+    "ghi": "test2",
+    "qwe": 2,
+    "zyx": Object {},
+  },
+  "arr": Array [
+    1,
+  ],
+  "bar": true,
+  "baz": "bonkers",
+  "empty_arr": Array [],
+  "foo": 2,
+  "pom": Object {
+    "bom": 3,
+    "mob": 4,
+  },
+  "xyz": Array [
+    "3",
+    "4",
+  ],
+}
+`;
+
+exports[`reads single yaml from file system and parses to json 1`] = `
+Object {
+  "arr": Array [
+    1,
+    2,
+  ],
+  "empty_arr": Array [],
+  "empty_obj": Object {},
+  "obj": Object {
+    "val": 3,
+  },
+  "pid": Object {
+    "arr": Array [
+      1,
+    ],
+    "empty_arr": Array [],
+    "empty_obj": Object {},
+    "enabled": true,
+    "file": "/var/run/kibana.pid",
+    "obj": Object {
+      "val": 3,
+    },
+  },
+}
+`;
+
+exports[`returns a deep object 1`] = `
+Object {
+  "pid": Object {
+    "arr": Array [
+      1,
+      2,
+    ],
+    "empty_arr": Array [],
+    "empty_obj": Object {},
+    "enabled": true,
+    "file": "/var/run/kibana.pid",
+    "obj": Object {
+      "val": 3,
+    },
+  },
+}
+`;
+
+exports[`should inject an environment variable value when setting a value with \${ENV_VAR} 1`] = `
+Object {
+  "bar": "pre-val1-mid-val2-post",
+  "elasticsearch": Object {
+    "requestHeadersWhitelist": Array [
+      "val1",
+      "val2",
+    ],
+  },
+  "foo": 1,
+}
+`;
+
+exports[`should throw an exception when referenced environment variable in a config value does not exist 1`] = `"Unknown environment variable referenced in config : KBN_ENV_VAR1"`;
diff --git a/packages/kbn-apm-config-loader/src/utils/apply_config_overrides.test.ts b/packages/kbn-apm-config-loader/src/utils/apply_config_overrides.test.ts
new file mode 100644
index 0000000000000..1d86f7e1f6e8a
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/apply_config_overrides.test.ts
@@ -0,0 +1,58 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { applyConfigOverrides } from './apply_config_overrides';
+
+describe('applyConfigOverrides', () => {
+  it('overrides `server.uuid` when provided as a command line argument', () => {
+    const config: Record<string, any> = {
+      server: {
+        uuid: 'from-config',
+      },
+    };
+    const argv = ['--server.uuid', 'from-argv'];
+
+    applyConfigOverrides(config, argv);
+
+    expect(config.server.uuid).toEqual('from-argv');
+  });
+
+  it('overrides `path.data` when provided as a command line argument', () => {
+    const config: Record<string, any> = {
+      path: {
+        data: '/from/config',
+      },
+    };
+    const argv = ['--path.data', '/from/argv'];
+
+    applyConfigOverrides(config, argv);
+
+    expect(config.path.data).toEqual('/from/argv');
+  });
+
+  it('properly set the overridden properties even if the parent object is not present in the config', () => {
+    const config: Record<string, any> = {};
+    const argv = ['--server.uuid', 'from-argv', '--path.data', '/data-path'];
+
+    applyConfigOverrides(config, argv);
+
+    expect(config.server.uuid).toEqual('from-argv');
+    expect(config.path.data).toEqual('/data-path');
+  });
+});
diff --git a/packages/kbn-apm-config-loader/src/utils/apply_config_overrides.ts b/packages/kbn-apm-config-loader/src/utils/apply_config_overrides.ts
new file mode 100644
index 0000000000000..6a3bf95f9954d
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/apply_config_overrides.ts
@@ -0,0 +1,38 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { set } from '@elastic/safer-lodash-set';
+import { getArgValue } from './read_argv';
+
+/**
+ * Manually applies the specific configuration overrides we need to load the APM config.
+ * Currently, only these are needed:
+ *   - server.uuid
+ *   - path.data
+ */
+export const applyConfigOverrides = (config: Record<string, any>, argv: string[]) => {
+  const serverUuid = getArgValue(argv, '--server.uuid');
+  if (serverUuid) {
+    set(config, 'server.uuid', serverUuid);
+  }
+  const dataPath = getArgValue(argv, '--path.data');
+  if (dataPath) {
+    set(config, 'path.data', dataPath);
+  }
+};
diff --git a/packages/kbn-apm-config-loader/src/utils/ensure_deep_object.test.ts b/packages/kbn-apm-config-loader/src/utils/ensure_deep_object.test.ts
new file mode 100644
index 0000000000000..5a520fbeef316
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/ensure_deep_object.test.ts
@@ -0,0 +1,156 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ensureDeepObject } from './ensure_deep_object';
+
+test('flat object', () => {
+  const obj = {
+    'foo.a': 1,
+    'foo.b': 2,
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    foo: {
+      a: 1,
+      b: 2,
+    },
+  });
+});
+
+test('deep object', () => {
+  const obj = {
+    foo: {
+      a: 1,
+      b: 2,
+    },
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    foo: {
+      a: 1,
+      b: 2,
+    },
+  });
+});
+
+test('flat within deep object', () => {
+  const obj = {
+    foo: {
+      b: 2,
+      'bar.a': 1,
+    },
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    foo: {
+      b: 2,
+      bar: {
+        a: 1,
+      },
+    },
+  });
+});
+
+test('flat then flat object', () => {
+  const obj = {
+    'foo.bar': {
+      b: 2,
+      'quux.a': 1,
+    },
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    foo: {
+      bar: {
+        b: 2,
+        quux: {
+          a: 1,
+        },
+      },
+    },
+  });
+});
+
+test('full with empty array', () => {
+  const obj = {
+    a: 1,
+    b: [],
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    a: 1,
+    b: [],
+  });
+});
+
+test('full with array of primitive values', () => {
+  const obj = {
+    a: 1,
+    b: [1, 2, 3],
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    a: 1,
+    b: [1, 2, 3],
+  });
+});
+
+test('full with array of full objects', () => {
+  const obj = {
+    a: 1,
+    b: [{ c: 2 }, { d: 3 }],
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    a: 1,
+    b: [{ c: 2 }, { d: 3 }],
+  });
+});
+
+test('full with array of flat objects', () => {
+  const obj = {
+    a: 1,
+    b: [{ 'c.d': 2 }, { 'e.f': 3 }],
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    a: 1,
+    b: [{ c: { d: 2 } }, { e: { f: 3 } }],
+  });
+});
+
+test('flat with flat and array of flat objects', () => {
+  const obj = {
+    a: 1,
+    'b.c': 2,
+    d: [3, { 'e.f': 4 }, { 'g.h': 5 }],
+  };
+
+  expect(ensureDeepObject(obj)).toEqual({
+    a: 1,
+    b: { c: 2 },
+    d: [3, { e: { f: 4 } }, { g: { h: 5 } }],
+  });
+});
+
+test('array composed of flat objects', () => {
+  const arr = [{ 'c.d': 2 }, { 'e.f': 3 }];
+
+  expect(ensureDeepObject(arr)).toEqual([{ c: { d: 2 } }, { e: { f: 3 } }]);
+});
diff --git a/packages/kbn-apm-config-loader/src/utils/ensure_deep_object.ts b/packages/kbn-apm-config-loader/src/utils/ensure_deep_object.ts
new file mode 100644
index 0000000000000..6eaaef983355c
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/ensure_deep_object.ts
@@ -0,0 +1,61 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const separator = '.';
+
+/**
+ * Recursively traverses through the object's properties and expands ones with
+ * dot-separated names into nested objects (eg. { a.b: 'c'} -> { a: { b: 'c' }).
+ * @param obj Object to traverse through.
+ * @returns Same object instance with expanded properties.
+ */
+export function ensureDeepObject(obj: any): any {
+  if (obj == null || typeof obj !== 'object') {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => ensureDeepObject(item));
+  }
+
+  return Object.keys(obj).reduce((fullObject, propertyKey) => {
+    const propertyValue = obj[propertyKey];
+    if (!propertyKey.includes(separator)) {
+      fullObject[propertyKey] = ensureDeepObject(propertyValue);
+    } else {
+      walk(fullObject, propertyKey.split(separator), propertyValue);
+    }
+
+    return fullObject;
+  }, {} as any);
+}
+
+function walk(obj: any, keys: string[], value: any) {
+  const key = keys.shift()!;
+  if (keys.length === 0) {
+    obj[key] = value;
+    return;
+  }
+
+  if (obj[key] === undefined) {
+    obj[key] = {};
+  }
+
+  walk(obj[key], keys, ensureDeepObject(value));
+}
diff --git a/packages/kbn-apm-config-loader/src/utils/get_config_file_paths.test.ts b/packages/kbn-apm-config-loader/src/utils/get_config_file_paths.test.ts
new file mode 100644
index 0000000000000..c18069f21180b
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/get_config_file_paths.test.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { resolve, join } from 'path';
+import { getConfigPath } from '@kbn/utils';
+import { getConfigurationFilePaths } from './get_config_file_paths';
+
+describe('getConfigurationFilePaths', () => {
+  const cwd = process.cwd();
+
+  it('retrieve the config file paths from the command line arguments', () => {
+    const argv = ['--config', './relative-path', '-c', '/absolute-path'];
+
+    expect(getConfigurationFilePaths(argv)).toEqual([
+      resolve(cwd, join('.', 'relative-path')),
+      '/absolute-path',
+    ]);
+  });
+
+  it('fallbacks to `getConfigPath` value', () => {
+    expect(getConfigurationFilePaths([])).toEqual([getConfigPath()]);
+  });
+});
diff --git a/packages/kbn-apm-config-loader/src/utils/get_config_file_paths.ts b/packages/kbn-apm-config-loader/src/utils/get_config_file_paths.ts
new file mode 100644
index 0000000000000..262f0d1c8b3f5
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/get_config_file_paths.ts
@@ -0,0 +1,37 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { resolve } from 'path';
+// deep import to avoid loading the whole package
+import { getConfigPath } from '@kbn/utils/target/path';
+import { getArgValues } from './read_argv';
+
+/**
+ * Return the configuration files that needs to be loaded.
+ *
+ * This mimics the behavior of the `src/cli/serve/serve.js` cli script by reading
+ * `-c` and `--config` options from process.argv, and fallbacks to `@kbn/utils`'s `getConfigPath()`
+ */
+export const getConfigurationFilePaths = (argv: string[]): string[] => {
+  const rawPaths = getArgValues(argv, ['-c', '--config']);
+  if (rawPaths.length) {
+    return rawPaths.map((path) => resolve(process.cwd(), path));
+  }
+  return [getConfigPath()];
+};
diff --git a/packages/kbn-apm-config-loader/src/utils/index.ts b/packages/kbn-apm-config-loader/src/utils/index.ts
new file mode 100644
index 0000000000000..03a44e31a44d5
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { getConfigFromFiles } from './read_config';
+export { getConfigurationFilePaths } from './get_config_file_paths';
+export { applyConfigOverrides } from './apply_config_overrides';
diff --git a/packages/kbn-apm-config-loader/src/utils/read_argv.test.ts b/packages/kbn-apm-config-loader/src/utils/read_argv.test.ts
new file mode 100644
index 0000000000000..282810e71681e
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/read_argv.test.ts
@@ -0,0 +1,80 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getArgValue, getArgValues } from './read_argv';
+
+describe('getArgValues', () => {
+  it('retrieve the arg value from the provided argv arguments', () => {
+    const argValues = getArgValues(
+      ['--config', 'my-config', '--foo', '-b', 'bar', '--config', 'other-config', '--baz'],
+      '--config'
+    );
+    expect(argValues).toEqual(['my-config', 'other-config']);
+  });
+
+  it('accept aliases', () => {
+    const argValues = getArgValues(
+      ['--config', 'my-config', '--foo', '-b', 'bar', '-c', 'other-config', '--baz'],
+      ['--config', '-c']
+    );
+    expect(argValues).toEqual(['my-config', 'other-config']);
+  });
+
+  it('returns an empty array when the arg is not found', () => {
+    const argValues = getArgValues(
+      ['--config', 'my-config', '--foo', '-b', 'bar', '-c', 'other-config', '--baz'],
+      '--unicorn'
+    );
+    expect(argValues).toEqual([]);
+  });
+
+  it('ignores the flag when no value is provided', () => {
+    const argValues = getArgValues(
+      ['-c', 'my-config', '--foo', '-b', 'bar', '--config'],
+      ['--config', '-c']
+    );
+    expect(argValues).toEqual(['my-config']);
+  });
+});
+
+describe('getArgValue', () => {
+  it('retrieve the first arg value from the provided argv arguments', () => {
+    const argValues = getArgValue(
+      ['--config', 'my-config', '--foo', '-b', 'bar', '--config', 'other-config', '--baz'],
+      '--config'
+    );
+    expect(argValues).toEqual('my-config');
+  });
+
+  it('accept aliases', () => {
+    const argValues = getArgValue(
+      ['-c', 'my-config', '--foo', '-b', 'bar', '--config', 'other-config', '--baz'],
+      ['--config', '-c']
+    );
+    expect(argValues).toEqual('my-config');
+  });
+
+  it('returns undefined the arg is not found', () => {
+    const argValues = getArgValue(
+      ['--config', 'my-config', '--foo', '-b', 'bar', '-c', 'other-config', '--baz'],
+      '--unicorn'
+    );
+    expect(argValues).toBeUndefined();
+  });
+});
diff --git a/packages/kbn-apm-config-loader/src/utils/read_argv.ts b/packages/kbn-apm-config-loader/src/utils/read_argv.ts
new file mode 100644
index 0000000000000..9a74d5344a0fc
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/read_argv.ts
@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const getArgValues = (argv: string[], flag: string | string[]): string[] => {
+  const flags = typeof flag === 'string' ? [flag] : flag;
+  const values: string[] = [];
+  for (let i = 0; i < argv.length; i++) {
+    if (flags.includes(argv[i]) && argv[i + 1]) {
+      values.push(argv[++i]);
+    }
+  }
+  return values;
+};
+
+export const getArgValue = (argv: string[], flag: string | string[]): string | undefined => {
+  const values = getArgValues(argv, flag);
+  if (values.length) {
+    return values[0];
+  }
+};
diff --git a/packages/kbn-apm-config-loader/src/utils/read_config.test.ts b/packages/kbn-apm-config-loader/src/utils/read_config.test.ts
new file mode 100644
index 0000000000000..7320e5dcbd6ce
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/read_config.test.ts
@@ -0,0 +1,79 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { relative, resolve } from 'path';
+import { getConfigFromFiles } from './read_config';
+
+const fixtureFile = (name: string) => resolve(__dirname, '..', '..', '__fixtures__', name);
+
+test('reads single yaml from file system and parses to json', () => {
+  const config = getConfigFromFiles([fixtureFile('config.yml')]);
+
+  expect(config).toMatchSnapshot();
+});
+
+test('returns a deep object', () => {
+  const config = getConfigFromFiles([fixtureFile('config_flat.yml')]);
+
+  expect(config).toMatchSnapshot();
+});
+
+test('reads and merges multiple yaml files from file system and parses to json', () => {
+  const config = getConfigFromFiles([fixtureFile('one.yml'), fixtureFile('two.yml')]);
+
+  expect(config).toMatchSnapshot();
+});
+
+test('should inject an environment variable value when setting a value with ${ENV_VAR}', () => {
+  process.env.KBN_ENV_VAR1 = 'val1';
+  process.env.KBN_ENV_VAR2 = 'val2';
+
+  const config = getConfigFromFiles([fixtureFile('en_var_ref_config.yml')]);
+
+  delete process.env.KBN_ENV_VAR1;
+  delete process.env.KBN_ENV_VAR2;
+
+  expect(config).toMatchSnapshot();
+});
+
+test('should throw an exception when referenced environment variable in a config value does not exist', () => {
+  expect(() =>
+    getConfigFromFiles([fixtureFile('en_var_ref_config.yml')])
+  ).toThrowErrorMatchingSnapshot();
+});
+
+describe('different cwd()', () => {
+  const originalCwd = process.cwd();
+  const tempCwd = resolve(__dirname);
+
+  beforeAll(() => process.chdir(tempCwd));
+  afterAll(() => process.chdir(originalCwd));
+
+  test('resolves relative files based on the cwd', () => {
+    const relativePath = relative(tempCwd, fixtureFile('one.yml'));
+    const config = getConfigFromFiles([relativePath]);
+
+    expect(config).toMatchSnapshot();
+  });
+
+  test('fails to load relative paths, not found because of the cwd', () => {
+    const relativePath = relative(resolve(__dirname, '..', '..'), fixtureFile('one.yml'));
+    expect(() => getConfigFromFiles([relativePath])).toThrowError(/ENOENT/);
+  });
+});
diff --git a/packages/kbn-apm-config-loader/src/utils/read_config.ts b/packages/kbn-apm-config-loader/src/utils/read_config.ts
new file mode 100644
index 0000000000000..825bfd60181bf
--- /dev/null
+++ b/packages/kbn-apm-config-loader/src/utils/read_config.ts
@@ -0,0 +1,64 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { readFileSync } from 'fs';
+import { safeLoad } from 'js-yaml';
+
+import { set } from '@elastic/safer-lodash-set';
+import { isPlainObject } from 'lodash';
+import { ensureDeepObject } from './ensure_deep_object';
+
+const readYaml = (path: string) => safeLoad(readFileSync(path, 'utf8'));
+
+function replaceEnvVarRefs(val: string) {
+  return val.replace(/\$\{(\w+)\}/g, (match, envVarName) => {
+    const envVarValue = process.env[envVarName];
+    if (envVarValue !== undefined) {
+      return envVarValue;
+    }
+
+    throw new Error(`Unknown environment variable referenced in config : ${envVarName}`);
+  });
+}
+
+function merge(target: Record<string, any>, value: any, key?: string) {
+  if ((isPlainObject(value) || Array.isArray(value)) && Object.keys(value).length > 0) {
+    for (const [subKey, subVal] of Object.entries(value)) {
+      merge(target, subVal, key ? `${key}.${subKey}` : subKey);
+    }
+  } else if (key !== undefined) {
+    set(target, key, typeof value === 'string' ? replaceEnvVarRefs(value) : value);
+  }
+
+  return target;
+}
+
+/** @internal */
+export const getConfigFromFiles = (configFiles: readonly string[]): Record<string, any> => {
+  let mergedYaml: Record<string, any> = {};
+
+  for (const configFile of configFiles) {
+    const yaml = readYaml(configFile);
+    if (yaml !== null) {
+      mergedYaml = merge(mergedYaml, yaml);
+    }
+  }
+
+  return ensureDeepObject(mergedYaml);
+};
diff --git a/packages/kbn-apm-config-loader/tsconfig.json b/packages/kbn-apm-config-loader/tsconfig.json
new file mode 100644
index 0000000000000..ba00ddfa6adb6
--- /dev/null
+++ b/packages/kbn-apm-config-loader/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "./target",
+    "stripInternal": false,
+    "declarationMap": true,
+    "types": ["jest", "node"]
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": ["target"]
+}
diff --git a/packages/kbn-apm-config-loader/yarn.lock b/packages/kbn-apm-config-loader/yarn.lock
new file mode 120000
index 0000000000000..3f82ebc9cdbae
--- /dev/null
+++ b/packages/kbn-apm-config-loader/yarn.lock
@@ -0,0 +1 @@
+../../yarn.lock
\ No newline at end of file
diff --git a/src/apm.js b/src/apm.js
index effa6c77d7614..8a0c010d993f1 100644
--- a/src/apm.js
+++ b/src/apm.js
@@ -18,67 +18,11 @@
  */
 
 const { join } = require('path');
-const { readFileSync } = require('fs');
-const { execSync } = require('child_process');
-const { merge } = require('lodash');
-const { name, version, build } = require('../package.json');
+const { name, build } = require('../package.json');
+const { loadConfiguration } = require('@kbn/apm-config-loader');
 
 const ROOT_DIR = join(__dirname, '..');
-
-function gitRev() {
-  try {
-    return execSync('git rev-parse --short HEAD', {
-      encoding: 'utf-8',
-      stdio: ['ignore', 'pipe', 'ignore'],
-    }).trim();
-  } catch (e) {
-    return null;
-  }
-}
-
-function devConfig() {
-  try {
-    const apmDevConfigPath = join(ROOT_DIR, 'config', 'apm.dev.js');
-    return require(apmDevConfigPath); // eslint-disable-line import/no-dynamic-require
-  } catch (e) {
-    return {};
-  }
-}
-
-const apmConfig = merge(
-  {
-    active: false,
-    serverUrl: 'https://f1542b814f674090afd914960583265f.apm.us-central1.gcp.cloud.es.io:443',
-    // The secretToken below is intended to be hardcoded in this file even though
-    // it makes it public. This is not a security/privacy issue. Normally we'd
-    // instead disable the need for a secretToken in the APM Server config where
-    // the data is transmitted to, but due to how it's being hosted, it's easier,
-    // for now, to simply leave it in.
-    secretToken: 'R0Gjg46pE9K9wGestd',
-    globalLabels: {},
-    breakdownMetrics: true,
-    centralConfig: false,
-    logUncaughtExceptions: true,
-  },
-  devConfig()
-);
-
-try {
-  const filename = join(ROOT_DIR, 'data', 'uuid');
-  apmConfig.globalLabels.kibana_uuid = readFileSync(filename, 'utf-8');
-} catch (e) {} // eslint-disable-line no-empty
-
-const rev = gitRev();
-if (rev !== null) apmConfig.globalLabels.git_rev = rev;
-
-function getConfig(serviceName) {
-  return {
-    ...apmConfig,
-    ...{
-      serviceName: `${serviceName}-${version.replace(/\./g, '_')}`,
-    },
-  };
-}
+let apmConfig;
 
 /**
  * Flag to disable APM RUM support on all kibana builds by default
@@ -86,12 +30,24 @@ function getConfig(serviceName) {
 const isKibanaDistributable = Boolean(build && build.distributable === true);
 
 module.exports = function (serviceName = name) {
-  if (process.env.kbnWorkerType === 'optmzr') return;
-
-  const conf = getConfig(serviceName);
+  if (process.env.kbnWorkerType === 'optmzr') {
+    return;
+  }
 
+  apmConfig = loadConfiguration(process.argv, ROOT_DIR, isKibanaDistributable);
+  const conf = apmConfig.getConfig(serviceName);
   require('elastic-apm-node').start(conf);
 };
 
-module.exports.getConfig = getConfig;
+module.exports.getConfig = (serviceName) => {
+  // integration test runner starts a kibana server that import the module without initializing APM.
+  // so we need to check initialization of the config.
+  // note that we can't just load the configuration during this module's import
+  // because jest IT are ran with `--config path-to-jest-config.js` which conflicts with the CLI's `config` arg
+  // causing the config loader to try to load the jest js config as yaml and throws.
+  if (apmConfig) {
+    return apmConfig.getConfig(serviceName);
+  }
+  return {};
+};
 module.exports.isKibanaDistributable = isKibanaDistributable;
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts
index c17845fd61468..75974ef9c202c 100644
--- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts
+++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts
@@ -14,16 +14,40 @@ When(/^the user filters by "([^"]*)"$/, (filterName) => {
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
   cy.get(`#local-filter-${filterName}`).click();
 
-  if (filterName === 'os') {
-    cy.get('span.euiSelectableListItem__text', DEFAULT_TIMEOUT)
-      .contains('Mac OS X')
-      .click();
-  } else {
-    cy.get('span.euiSelectableListItem__text', DEFAULT_TIMEOUT)
-      .contains('DE')
-      .click();
-  }
-  cy.get('[data-cy=applyFilter]').click();
+  cy.get(`#local-filter-popover-${filterName}`, DEFAULT_TIMEOUT).within(() => {
+    if (filterName === 'os') {
+      const osItem = cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(2);
+      osItem.should('have.text', 'Mac OS X8 ');
+      osItem.click();
+
+      // sometimes click doesn't work as expected so we need to retry here
+      osItem.invoke('attr', 'aria-selected').then((val) => {
+        if (val === 'false') {
+          cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(2).click();
+        }
+      });
+    } else {
+      const deItem = cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(0);
+      deItem.should('have.text', 'DE28 ');
+      deItem.click();
+
+      // sometimes click doesn't work as expected so we need to retry here
+      deItem.invoke('attr', 'aria-selected').then((val) => {
+        if (val === 'false') {
+          cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(0).click();
+        }
+      });
+    }
+    cy.get('[data-cy=applyFilter]').click();
+  });
+
+  cy.get(`div#local-filter-values-${filterName}`, DEFAULT_TIMEOUT).within(
+    () => {
+      cy.get('span.euiBadge__content')
+        .eq(0)
+        .should('have.text', filterName === 'os' ? 'Mac OS X' : 'DE');
+    }
+  );
 });
 
 Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => {
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts
index 4169149bc7339..b3899a5649b72 100644
--- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts
+++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts
@@ -5,15 +5,13 @@
  */
 
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
-import { DEFAULT_TIMEOUT } from '../apm';
 import { verifyClientMetrics } from './client_metrics_helper';
+import { DEFAULT_TIMEOUT } from './csm_dashboard';
 
-When('the user changes the selected service name', (filterName) => {
+When('the user changes the selected service name', () => {
   // wait for all loading to finish
   cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get(`[data-cy=serviceNameFilter]`, { timeout: DEFAULT_TIMEOUT }).select(
-    'client'
-  );
+  cy.get(`[data-cy=serviceNameFilter]`, DEFAULT_TIMEOUT).select('client');
 });
 
 Then(`it displays relevant client metrics`, () => {
diff --git a/x-pack/plugins/apm/e2e/ingest-data/replay.js b/x-pack/plugins/apm/e2e/ingest-data/replay.js
index 74c86b1b09ab4..326cb739e23c6 100644
--- a/x-pack/plugins/apm/e2e/ingest-data/replay.js
+++ b/x-pack/plugins/apm/e2e/ingest-data/replay.js
@@ -96,7 +96,7 @@ function setRumAgent(item) {
   if (item.body) {
     item.body = item.body.replace(
       '"name":"client"',
-      '"name":"opbean-client-rum"'
+      '"name":"elastic-frontend"'
     );
   }
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
index a77d27c4bc883..bc1e0a86f17db 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
@@ -6,10 +6,12 @@
 import * as React from 'react';
 import numeral from '@elastic/numeral';
 import styled from 'styled-components';
+import { useContext, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiToolTip } from '@elastic/eui';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { I18LABELS } from '../translations';
+import { CsmSharedContext } from '../CsmSharedContext';
 
 const ClFlexGroup = styled(EuiFlexGroup)`
   flex-direction: row;
@@ -45,6 +47,12 @@ export function ClientMetrics() {
     [start, end, uiFilters, searchTerm]
   );
 
+  const { setSharedData } = useContext(CsmSharedContext);
+
+  useEffect(() => {
+    setSharedData({ totalPageViews: data?.pageViews?.value ?? 0 });
+  }, [data, setSharedData]);
+
   const STAT_STYLE = { width: '240px' };
 
   return (
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CsmSharedContext/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CsmSharedContext/index.tsx
new file mode 100644
index 0000000000000..3d445104d6d10
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CsmSharedContext/index.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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, { createContext, useMemo, useState } from 'react';
+
+interface SharedData {
+  totalPageViews: number;
+}
+
+interface Index {
+  sharedData: SharedData;
+  setSharedData: (data: SharedData) => void;
+}
+
+const defaultContext: Index = {
+  sharedData: { totalPageViews: 0 },
+  setSharedData: (d) => {
+    throw new Error(
+      'setSharedData was not initialized, set it when you invoke the context'
+    );
+  },
+};
+
+export const CsmSharedContext = createContext(defaultContext);
+
+export function CsmSharedContextProvider({
+  children,
+}: {
+  children: JSX.Element[];
+}) {
+  const [newData, setNewData] = useState<SharedData>({ totalPageViews: 0 });
+
+  const setSharedData = React.useCallback((data: SharedData) => {
+    setNewData(data);
+  }, []);
+
+  const value = useMemo(() => {
+    return { sharedData: newData, setSharedData };
+  }, [newData, setSharedData]);
+
+  return <CsmSharedContext.Provider value={value} children={children} />;
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx
new file mode 100644
index 0000000000000..805b328cb1fb0
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx
@@ -0,0 +1,138 @@
+/*
+ * 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, { useContext, useState } from 'react';
+import {
+  EuiBasicTable,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiSpacer,
+  EuiTitle,
+  EuiStat,
+  EuiToolTip,
+} from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import { i18n } from '@kbn/i18n';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { I18LABELS } from '../translations';
+import { CsmSharedContext } from '../CsmSharedContext';
+
+export function JSErrors() {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end, serviceName } = urlParams;
+
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end && serviceName) {
+        return callApmApi({
+          pathname: '/api/apm/rum-client/js-errors',
+          params: {
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              pageSize: String(pagination.pageSize),
+              pageIndex: String(pagination.pageIndex),
+            },
+          },
+        });
+      }
+      return Promise.resolve(null);
+    },
+    [start, end, serviceName, uiFilters, pagination]
+  );
+
+  const {
+    sharedData: { totalPageViews },
+  } = useContext(CsmSharedContext);
+
+  const items = (data?.items ?? []).map(({ errorMessage, count }) => ({
+    errorMessage,
+    percent: i18n.translate('xpack.apm.rum.jsErrors.percent', {
+      defaultMessage: '{pageLoadPercent} %',
+      values: { pageLoadPercent: ((count / totalPageViews) * 100).toFixed(1) },
+    }),
+  }));
+
+  const cols = [
+    {
+      field: 'errorMessage',
+      name: I18LABELS.errorMessage,
+    },
+    {
+      name: I18LABELS.impactedPageLoads,
+      field: 'percent',
+      align: 'right' as const,
+    },
+  ];
+
+  const onTableChange = ({
+    page,
+  }: {
+    page: { size: number; index: number };
+  }) => {
+    setPagination({
+      pageIndex: page.index,
+      pageSize: page.size,
+    });
+  };
+
+  return (
+    <>
+      <EuiTitle size="xs">
+        <h3>{I18LABELS.jsErrors}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiStat
+            titleSize="s"
+            title={
+              <EuiToolTip content={data?.totalErrors ?? 0}>
+                <>{numeral(data?.totalErrors ?? 0).format('0 a')}</>
+              </EuiToolTip>
+            }
+            description={I18LABELS.totalErrors}
+            isLoading={status !== 'success'}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiStat
+            titleSize="s"
+            title={i18n.translate('xpack.apm.rum.jsErrors.errorRateValue', {
+              defaultMessage: '{errorRate} %',
+              values: {
+                errorRate: (
+                  ((data?.totalErrorPages ?? 0) / totalPageViews) *
+                  100
+                ).toFixed(0),
+              },
+            })}
+            description={I18LABELS.errorRate}
+            isLoading={status !== 'success'}
+          />
+        </EuiFlexItem>{' '}
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+      <EuiBasicTable
+        loading={status !== 'success'}
+        responsive={false}
+        compressed={true}
+        columns={cols}
+        items={items}
+        onChange={onTableChange}
+        pagination={{
+          ...pagination,
+          totalItemCount: data?.totalErrorGroups ?? 0,
+        }}
+      />
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/index.tsx
new file mode 100644
index 0000000000000..34cb6338eb948
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/index.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexItem, EuiPanel, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { JSErrors } from './JSErrors';
+
+export function ImpactfulMetrics() {
+  return (
+    <EuiPanel>
+      <EuiSpacer size="xs" />
+      <EuiFlexGroup wrap>
+        <EuiFlexItem style={{ flexBasis: 650 }}>
+          <JSErrors />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
index ddef5cd08e521..37522b06970c1 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -19,6 +19,7 @@ import { I18LABELS } from './translations';
 import { VisitorBreakdown } from './VisitorBreakdown';
 import { UXMetrics } from './UXMetrics';
 import { VisitorBreakdownMap } from './VisitorBreakdownMap';
+import { ImpactfulMetrics } from './ImpactfulMetrics';
 
 export function RumDashboard() {
   return (
@@ -66,6 +67,9 @@ export function RumDashboard() {
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
+      <EuiFlexItem>
+        <ImpactfulMetrics />
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
index 9abf792d7a0cf..28bb5307b6e8c 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { RumOverview } from '../RumDashboard';
 import { RumHeader } from './RumHeader';
+import { CsmSharedContextProvider } from './CsmSharedContext';
 
 export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
   defaultMessage: 'User Experience',
@@ -17,16 +18,18 @@ export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
 export function RumHome() {
   return (
     <div>
-      <RumHeader>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="l">
-              <h1>{UX_LABEL}</h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </RumHeader>
-      <RumOverview />
+      <CsmSharedContextProvider>
+        <RumHeader>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="l">
+                <h1>{UX_LABEL}</h1>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </RumHeader>
+        <RumOverview />
+      </CsmSharedContextProvider>
     </div>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
index 714788ef468c6..f92a1d5a5945b 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
@@ -37,6 +37,18 @@ export const I18LABELS = {
       defaultMessage: 'Page load distribution',
     }
   ),
+  jsErrors: i18n.translate(
+    'xpack.apm.rum.dashboard.impactfulMetrics.jsErrors',
+    {
+      defaultMessage: 'JavaScript errors',
+    }
+  ),
+  highTrafficPages: i18n.translate(
+    'xpack.apm.rum.dashboard.impactfulMetrics.highTrafficPages',
+    {
+      defaultMessage: 'High traffic pages',
+    }
+  ),
   resetZoom: i18n.translate('xpack.apm.rum.dashboard.resetZoom.label', {
     defaultMessage: 'Reset zoom',
   }),
@@ -105,6 +117,21 @@ export const I18LABELS = {
   noResults: i18n.translate('xpack.apm.rum.filters.url.noResults', {
     defaultMessage: 'No results available',
   }),
+  totalErrors: i18n.translate('xpack.apm.rum.jsErrors.totalErrors', {
+    defaultMessage: 'Total errors',
+  }),
+  errorRate: i18n.translate('xpack.apm.rum.jsErrors.errorRate', {
+    defaultMessage: 'Error rate',
+  }),
+  errorMessage: i18n.translate('xpack.apm.rum.jsErrors.errorMessage', {
+    defaultMessage: 'Error message',
+  }),
+  impactedPageLoads: i18n.translate(
+    'xpack.apm.rum.jsErrors.impactedPageLoads',
+    {
+      defaultMessage: 'Impacted page loads',
+    }
+  ),
 };
 
 export const VisitorBreakdownLabel = i18n.translate(
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
index ed8d865d2d288..ee240cfef3b21 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
@@ -19,6 +19,7 @@ const BadgeText = styled.div`
 interface Props {
   value: string[];
   onRemove: (val: string) => void;
+  name: string;
 }
 
 const removeFilterLabel = i18n.translate(
@@ -26,9 +27,9 @@ const removeFilterLabel = i18n.translate(
   { defaultMessage: 'Remove filter' }
 );
 
-function FilterBadgeList({ onRemove, value }: Props) {
+function FilterBadgeList({ onRemove, value, name }: Props) {
   return (
-    <EuiFlexGrid gutterSize="s">
+    <EuiFlexGrid gutterSize="s" id={`local-filter-values-${name}`}>
       {value.map((val) => (
         <EuiFlexItem key={val} grow={false}>
           <EuiBadge
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
index 48ebc2add0053..82c07a278b2ba 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
@@ -113,7 +113,7 @@ function Filter({ name, title, options, onChange, value, showCount }: Props) {
           searchable={true}
         >
           {(list, search) => (
-            <SelectContainer>
+            <SelectContainer id={`local-filter-popover-${name}`}>
               <EuiFlexGroup direction="column" gutterSize="none">
                 <FlexItem grow={true}>
                   <EuiTitle size="xxxs" textTransform="uppercase">
@@ -159,6 +159,7 @@ function Filter({ name, title, options, onChange, value, showCount }: Props) {
       {value.length ? (
         <>
           <FilterBadgeList
+            name={name}
             onRemove={(val) => {
               onChange(value.filter((v) => val !== v));
             }}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
index ceffb4f4d6654..66cfa954965d2 100644
--- a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
+++ b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
@@ -72,6 +72,97 @@ Object {
 }
 `;
 
+exports[`rum client dashboard queries fetches js errors 1`] = `
+Object {
+  "apm": Object {
+    "events": Array [
+      "error",
+    ],
+  },
+  "body": Object {
+    "aggs": Object {
+      "errors": Object {
+        "aggs": Object {
+          "bucket_truncate": Object {
+            "bucket_sort": Object {
+              "from": 0,
+              "size": 5,
+            },
+          },
+          "sample": Object {
+            "top_hits": Object {
+              "_source": Array [
+                "error.exception.message",
+                "error.exception.type",
+                "error.grouping_key",
+                "@timestamp",
+              ],
+              "size": 1,
+              "sort": Array [
+                Object {
+                  "@timestamp": "desc",
+                },
+              ],
+            },
+          },
+        },
+        "terms": Object {
+          "field": "error.grouping_key",
+          "size": 500,
+        },
+      },
+      "totalErrorGroups": Object {
+        "cardinality": Object {
+          "field": "error.grouping_key",
+        },
+      },
+      "totalErrorPages": Object {
+        "cardinality": Object {
+          "field": "transaction.id",
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "agent.name": "rum-js",
+            },
+          },
+          Object {
+            "term": Object {
+              "transaction.type": "page-load",
+            },
+          },
+          Object {
+            "term": Object {
+              "service.language.name": "javascript",
+            },
+          },
+          Object {
+            "term": Object {
+              "my.custom.ui.filter": "foo-bar",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+    "track_total_hits": true,
+  },
+}
+`;
+
 exports[`rum client dashboard queries fetches long task metrics 1`] = `
 Object {
   "apm": Object {
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_js_errors.ts b/x-pack/plugins/apm/server/lib/rum_client/get_js_errors.ts
new file mode 100644
index 0000000000000..0540ea4bf09dd
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_js_errors.ts
@@ -0,0 +1,99 @@
+/*
+ * 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 { mergeProjection } from '../../projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+import { getRumErrorsProjection } from '../../projections/rum_page_load_transactions';
+import {
+  ERROR_EXC_MESSAGE,
+  ERROR_EXC_TYPE,
+  ERROR_GROUP_ID,
+  TRANSACTION_ID,
+} from '../../../common/elasticsearch_fieldnames';
+
+export async function getJSErrors({
+  setup,
+  pageSize,
+  pageIndex,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+  pageSize: number;
+  pageIndex: number;
+}) {
+  const projection = getRumErrorsProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      track_total_hits: true,
+      aggs: {
+        totalErrorGroups: {
+          cardinality: {
+            field: ERROR_GROUP_ID,
+          },
+        },
+        totalErrorPages: {
+          cardinality: {
+            field: TRANSACTION_ID,
+          },
+        },
+        errors: {
+          terms: {
+            field: ERROR_GROUP_ID,
+            size: 500,
+          },
+          aggs: {
+            bucket_truncate: {
+              bucket_sort: {
+                size: pageSize,
+                from: pageIndex * pageSize,
+              },
+            },
+            sample: {
+              top_hits: {
+                _source: [
+                  ERROR_EXC_MESSAGE,
+                  ERROR_EXC_TYPE,
+                  ERROR_GROUP_ID,
+                  '@timestamp',
+                ],
+                sort: [{ '@timestamp': 'desc' as const }],
+                size: 1,
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const { apmEventClient } = setup;
+
+  const response = await apmEventClient.search(params);
+
+  const { totalErrorGroups, totalErrorPages, errors } =
+    response.aggregations ?? {};
+
+  return {
+    totalErrorPages: totalErrorPages?.value ?? 0,
+    totalErrors: response.hits.total.value ?? 0,
+    totalErrorGroups: totalErrorGroups?.value ?? 0,
+    items: errors?.buckets.map(({ sample, doc_count: count }) => {
+      return {
+        count,
+        errorMessage: (sample.hits.hits[0]._source as {
+          error: { exception: Array<{ message: string }> };
+        }).error.exception?.[0].message,
+      };
+    }),
+  };
+}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts b/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
index 14cec21cceb79..23d2cb829b8d5 100644
--- a/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
+++ b/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
@@ -14,6 +14,7 @@ import { getPageLoadDistribution } from './get_page_load_distribution';
 import { getRumServices } from './get_rum_services';
 import { getLongTaskMetrics } from './get_long_task_metrics';
 import { getWebCoreVitals } from './get_web_core_vitals';
+import { getJSErrors } from './get_js_errors';
 
 describe('rum client dashboard queries', () => {
   let mock: SearchParamsMock;
@@ -79,4 +80,15 @@ describe('rum client dashboard queries', () => {
     );
     expect(mock.params).toMatchSnapshot();
   });
+
+  it('fetches js errors', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getJSErrors({
+        setup,
+        pageSize: 5,
+        pageIndex: 0,
+      })
+    );
+    expect(mock.params).toMatchSnapshot();
+  });
 });
diff --git a/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts b/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts
index 3c3eaaca7efdb..a8505337e8aec 100644
--- a/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts
+++ b/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts
@@ -11,7 +11,9 @@ import {
 } from '../../server/lib/helpers/setup_request';
 import {
   SPAN_TYPE,
+  AGENT_NAME,
   TRANSACTION_TYPE,
+  SERVICE_LANGUAGE_NAME,
 } from '../../common/elasticsearch_fieldnames';
 import { rangeFilter } from '../../common/utils/range_filter';
 import { ProcessorEvent } from '../../common/processor_event';
@@ -90,3 +92,36 @@ export function getRumLongTasksProjection({
     },
   };
 }
+
+export function getRumErrorsProjection({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const { start, end, uiFiltersES } = setup;
+
+  const bool = {
+    filter: [
+      { range: rangeFilter(start, end) },
+      { term: { [AGENT_NAME]: 'rum-js' } },
+      { term: { [TRANSACTION_TYPE]: TRANSACTION_PAGE_LOAD } },
+      {
+        term: {
+          [SERVICE_LANGUAGE_NAME]: 'javascript',
+        },
+      },
+      ...uiFiltersES,
+    ],
+  };
+
+  return {
+    apm: {
+      events: [ProcessorEvent.error],
+    },
+    body: {
+      query: {
+        bool,
+      },
+    },
+  };
+}
diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
index f975ab177f147..0560b977e708e 100644
--- a/x-pack/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -69,17 +69,6 @@ import {
   listCustomLinksRoute,
   customLinkTransactionRoute,
 } from './settings/custom_link';
-import {
-  rumClientMetricsRoute,
-  rumPageViewsTrendRoute,
-  rumPageLoadDistributionRoute,
-  rumPageLoadDistBreakdownRoute,
-  rumServicesRoute,
-  rumVisitorsBreakdownRoute,
-  rumWebCoreVitals,
-  rumUrlSearch,
-  rumLongTaskMetrics,
-} from './rum_client';
 import {
   observabilityOverviewHasDataRoute,
   observabilityOverviewRoute,
@@ -89,6 +78,18 @@ import {
   createAnomalyDetectionJobsRoute,
   anomalyDetectionEnvironmentsRoute,
 } from './settings/anomaly_detection';
+import {
+  rumClientMetricsRoute,
+  rumJSErrors,
+  rumLongTaskMetrics,
+  rumPageLoadDistBreakdownRoute,
+  rumPageLoadDistributionRoute,
+  rumPageViewsTrendRoute,
+  rumServicesRoute,
+  rumUrlSearch,
+  rumVisitorsBreakdownRoute,
+  rumWebCoreVitals,
+} from './rum_client';
 
 const createApmApi = () => {
   const api = createApi()
@@ -165,7 +166,16 @@ const createApmApi = () => {
     .add(listCustomLinksRoute)
     .add(customLinkTransactionRoute)
 
-    // Rum Overview
+    // Observability dashboard
+    .add(observabilityOverviewHasDataRoute)
+    .add(observabilityOverviewRoute)
+
+    // Anomaly detection
+    .add(anomalyDetectionJobsRoute)
+    .add(createAnomalyDetectionJobsRoute)
+    .add(anomalyDetectionEnvironmentsRoute)
+
+    // User Experience app api routes
     .add(rumOverviewLocalFiltersRoute)
     .add(rumPageViewsTrendRoute)
     .add(rumPageLoadDistributionRoute)
@@ -174,17 +184,9 @@ const createApmApi = () => {
     .add(rumServicesRoute)
     .add(rumVisitorsBreakdownRoute)
     .add(rumWebCoreVitals)
+    .add(rumJSErrors)
     .add(rumUrlSearch)
-    .add(rumLongTaskMetrics)
-
-    // Observability dashboard
-    .add(observabilityOverviewHasDataRoute)
-    .add(observabilityOverviewRoute)
-
-    // Anomaly detection
-    .add(anomalyDetectionJobsRoute)
-    .add(createAnomalyDetectionJobsRoute)
-    .add(anomalyDetectionEnvironmentsRoute);
+    .add(rumLongTaskMetrics);
 
   return api;
 };
diff --git a/x-pack/plugins/apm/server/routes/rum_client.ts b/x-pack/plugins/apm/server/routes/rum_client.ts
index e3a846f9fb5c7..c0351991e4c0d 100644
--- a/x-pack/plugins/apm/server/routes/rum_client.ts
+++ b/x-pack/plugins/apm/server/routes/rum_client.ts
@@ -15,6 +15,7 @@ import { getPageLoadDistBreakdown } from '../lib/rum_client/get_pl_dist_breakdow
 import { getRumServices } from '../lib/rum_client/get_rum_services';
 import { getVisitorBreakdown } from '../lib/rum_client/get_visitor_breakdown';
 import { getWebCoreVitals } from '../lib/rum_client/get_web_core_vitals';
+import { getJSErrors } from '../lib/rum_client/get_js_errors';
 import { getLongTaskMetrics } from '../lib/rum_client/get_long_task_metrics';
 import { getUrlSearch } from '../lib/rum_client/get_url_search';
 
@@ -191,3 +192,27 @@ export const rumUrlSearch = createRoute(() => ({
     return getUrlSearch({ setup, urlQuery });
   },
 }));
+
+export const rumJSErrors = createRoute(() => ({
+  path: '/api/apm/rum-client/js-errors',
+  params: {
+    query: t.intersection([
+      uiFiltersRt,
+      rangeRt,
+      t.type({ pageSize: t.string, pageIndex: t.string }),
+    ]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+
+    const {
+      query: { pageSize, pageIndex },
+    } = context.params;
+
+    return getJSErrors({
+      setup,
+      pageSize: Number(pageSize),
+      pageIndex: Number(pageIndex),
+    });
+  },
+}));
diff --git a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
index 93f8b115256b4..534321201938d 100644
--- a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
+++ b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
@@ -153,6 +153,11 @@ export interface AggregationOptionsByType {
     keyed?: boolean;
     hdr?: { number_of_significant_value_digits: number };
   } & AggregationSourceOptions;
+  bucket_sort: {
+    sort?: SortOptions;
+    from?: number;
+    size?: number;
+  };
 }
 
 type AggregationType = keyof AggregationOptionsByType;
@@ -329,6 +334,7 @@ interface AggregationResponsePart<
       ? Array<{ key: number; value: number }>
       : Record<string, number>;
   };
+  bucket_sort: undefined;
 }
 
 // Type for debugging purposes. If you see an error in AggregationResponseMap
diff --git a/x-pack/plugins/apm/typings/elasticsearch/index.ts b/x-pack/plugins/apm/typings/elasticsearch/index.ts
index 064b684cf9aa6..9a05fe631e888 100644
--- a/x-pack/plugins/apm/typings/elasticsearch/index.ts
+++ b/x-pack/plugins/apm/typings/elasticsearch/index.ts
@@ -7,11 +7,22 @@
 import { SearchParams, SearchResponse } from 'elasticsearch';
 import { AggregationResponseMap, AggregationInputMap } from './aggregations';
 
+interface CollapseQuery {
+  field: string;
+  inner_hits: {
+    name: string;
+    size?: number;
+    sort?: [{ date: 'asc' | 'desc' }];
+  };
+  max_concurrent_group_searches?: number;
+}
+
 export interface ESSearchBody {
   query?: any;
   size?: number;
   aggs?: AggregationInputMap;
   track_total_hits?: boolean | number;
+  collapse?: CollapseQuery;
 }
 
 export type ESSearchRequest = Omit<SearchParams, 'body'> & {
diff --git a/x-pack/plugins/enterprise_search/common/types/index.ts b/x-pack/plugins/enterprise_search/common/types/index.ts
index d5774adc0d516..1006d39138759 100644
--- a/x-pack/plugins/enterprise_search/common/types/index.ts
+++ b/x-pack/plugins/enterprise_search/common/types/index.ts
@@ -30,3 +30,14 @@ export interface IConfiguredLimits {
   appSearch: IAppSearchConfiguredLimits;
   workplaceSearch: IWorkplaceSearchConfiguredLimits;
 }
+
+export interface IMetaPage {
+  current: number;
+  size: number;
+  total_pages: number;
+  total_results: number;
+}
+
+export interface IMeta {
+  page: IMetaPage;
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/constants.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/constants.ts
new file mode 100644
index 0000000000000..92d14f7275185
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/constants.ts
@@ -0,0 +1,41 @@
+/*
+ * 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';
+
+export const ADMIN = 'admin';
+export const PRIVATE = 'private';
+export const SEARCH = 'search';
+
+export const TOKEN_TYPE_DESCRIPTION = {
+  [SEARCH]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.search.description', {
+    defaultMessage: 'Public Search Keys are used for search endpoints only.',
+  }),
+  [PRIVATE]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.private.description', {
+    defaultMessage:
+      'Private API Keys are used for read and/or write access on one or more Engines.',
+  }),
+  [ADMIN]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.admin.description', {
+    defaultMessage: 'Private Admin Keys are used to interact with the Credentials API.',
+  }),
+};
+
+export const TOKEN_TYPE_DISPLAY_NAMES = {
+  [SEARCH]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.search.name', {
+    defaultMessage: 'Public Search Key',
+  }),
+  [PRIVATE]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.private.name', {
+    defaultMessage: 'Private API Key',
+  }),
+  [ADMIN]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.admin.name', {
+    defaultMessage: 'Private Admin Key',
+  }),
+};
+
+export const TOKEN_TYPE_INFO = [
+  { value: SEARCH, text: TOKEN_TYPE_DISPLAY_NAMES[SEARCH] },
+  { value: PRIVATE, text: TOKEN_TYPE_DISPLAY_NAMES[PRIVATE] },
+  { value: ADMIN, text: TOKEN_TYPE_DISPLAY_NAMES[ADMIN] },
+];
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.test.ts
new file mode 100644
index 0000000000000..c5cb8a2c61759
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.test.ts
@@ -0,0 +1,1196 @@
+/*
+ * 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 { resetContext } from 'kea';
+
+import { CredentialsLogic } from './credentials_logic';
+import { ADMIN, PRIVATE } from './constants';
+
+jest.mock('../../../shared/http', () => ({
+  HttpLogic: { values: { http: { get: jest.fn(), delete: jest.fn() } } },
+}));
+import { HttpLogic } from '../../../shared/http';
+jest.mock('../../../shared/flash_messages', () => ({
+  flashAPIErrors: jest.fn(),
+}));
+import { flashAPIErrors } from '../../../shared/flash_messages';
+
+describe('CredentialsLogic', () => {
+  const DEFAULT_VALUES = {
+    activeApiToken: {
+      name: '',
+      type: PRIVATE,
+      read: true,
+      write: true,
+      access_all_engines: true,
+    },
+    activeApiTokenIsExisting: false,
+    activeApiTokenRawName: '',
+    apiTokens: [],
+    dataLoading: true,
+    engines: [],
+    formErrors: [],
+    isCredentialsDataComplete: false,
+    isCredentialsDetailsComplete: false,
+    meta: {},
+    nameInputBlurred: false,
+    showCredentialsForm: false,
+  };
+
+  const mount = (defaults?: object) => {
+    if (!defaults) {
+      resetContext({});
+    } else {
+      resetContext({
+        defaults: {
+          enterprise_search: {
+            app_search: {
+              credentials_logic: {
+                ...defaults,
+              },
+            },
+          },
+        },
+      });
+    }
+    CredentialsLogic.mount();
+  };
+
+  const newToken = {
+    id: 1,
+    name: 'myToken',
+    type: PRIVATE,
+    read: true,
+    write: true,
+    access_all_engines: true,
+    engines: [],
+  };
+
+  const credentialsDetails = {
+    engines: [
+      { name: 'engine1', type: 'indexed', language: 'english', result_fields: [] },
+      { name: 'engine1', type: 'indexed', language: 'english', result_fields: [] },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('has expected default values', () => {
+    mount();
+    expect(CredentialsLogic.values).toEqual(DEFAULT_VALUES);
+  });
+
+  describe('addEngineName', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: expect.any(Object),
+    };
+
+    describe('activeApiToken', () => {
+      it("should add an engine to the active api token's engine list", () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            engines: ['someEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.addEngineName('newEngine');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: ['someEngine', 'newEngine'] },
+        });
+      });
+
+      it("should create a new engines list if one doesn't exist", () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            engines: undefined,
+          },
+        });
+
+        CredentialsLogic.actions.addEngineName('newEngine');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: ['newEngine'] },
+        });
+      });
+    });
+  });
+
+  describe('removeEngineName', () => {
+    describe('activeApiToken', () => {
+      const values = {
+        ...DEFAULT_VALUES,
+        activeApiToken: expect.any(Object),
+      };
+
+      it("should remove an engine from the active api token's engine list", () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.removeEngineName('someEngine');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: ['anotherEngine'] },
+        });
+      });
+
+      it('will not remove the engine if it is not found', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.removeEngineName('notfound');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: ['someEngine', 'anotherEngine'] },
+        });
+      });
+
+      it('does not throw a type error if no engines are stored in state', () => {
+        mount({
+          activeApiToken: {},
+        });
+        CredentialsLogic.actions.removeEngineName('');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { engines: [] },
+        });
+      });
+    });
+  });
+
+  describe('setAccessAllEngines', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: expect.any(Object),
+    };
+
+    describe('activeApiToken', () => {
+      it('should set the value of access_all_engines and clear out engines list if true', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            access_all_engines: false,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.setAccessAllEngines(true);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: [], access_all_engines: true },
+        });
+      });
+
+      it('should set the value of access_all_engines and but maintain engines list if false', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            access_all_engines: true,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.setAccessAllEngines(false);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: {
+            ...newToken,
+            access_all_engines: false,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+      });
+    });
+  });
+
+  describe('onApiKeyDelete', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      apiTokens: expect.any(Array),
+    };
+
+    describe('apiTokens', () => {
+      it('should remove specified token from apiTokens if name matches', () => {
+        mount({
+          apiTokens: [newToken],
+        });
+
+        CredentialsLogic.actions.onApiKeyDelete(newToken.name);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [],
+        });
+      });
+
+      it('should not remove specified token from apiTokens if name does not match', () => {
+        mount({
+          apiTokens: [newToken],
+        });
+
+        CredentialsLogic.actions.onApiKeyDelete('foo');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [newToken],
+        });
+      });
+    });
+  });
+
+  describe('onApiTokenCreateSuccess', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      apiTokens: expect.any(Array),
+      activeApiToken: expect.any(Object),
+      activeApiTokenRawName: expect.any(String),
+      showCredentialsForm: expect.any(Boolean),
+      formErrors: expect.any(Array),
+    };
+
+    describe('apiTokens', () => {
+      const existingToken = {
+        name: 'some_token',
+        type: PRIVATE,
+      };
+
+      it('should add the provided token to the apiTokens list', () => {
+        mount({
+          apiTokens: [existingToken],
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [existingToken, newToken],
+        });
+      });
+    });
+
+    describe('activeApiToken', () => {
+      // TODO It is weird that methods like this update activeApiToken but not activeApiTokenIsExisting...
+      it('should reset to the default value, which effectively clears out the current form', () => {
+        mount({
+          activeApiToken: newToken,
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: DEFAULT_VALUES.activeApiToken,
+        });
+      });
+    });
+
+    describe('activeApiTokenRawName', () => {
+      it('should reset to the default value, which effectively clears out the current form', () => {
+        mount({
+          activeApiTokenRawName: 'foo',
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: DEFAULT_VALUES.activeApiTokenRawName,
+        });
+      });
+    });
+
+    describe('showCredentialsForm', () => {
+      it('should reset to the default value, which closes the credentials form', () => {
+        mount({
+          showCredentialsForm: true,
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: false,
+        });
+      });
+    });
+
+    describe('formErrors', () => {
+      it('should reset `formErrors`', () => {
+        mount({
+          formErrors: ['I am an error'],
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          formErrors: [],
+        });
+      });
+    });
+  });
+
+  describe('onApiTokenError', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      formErrors: expect.any(Array),
+    };
+
+    describe('formErrors', () => {
+      it('should set `formErrors`', () => {
+        mount({
+          formErrors: ['I am an error'],
+        });
+
+        CredentialsLogic.actions.onApiTokenError(['I am the NEW error']);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          formErrors: ['I am the NEW error'],
+        });
+      });
+    });
+  });
+
+  describe('onApiTokenUpdateSuccess', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      apiTokens: expect.any(Array),
+      activeApiToken: expect.any(Object),
+      activeApiTokenRawName: expect.any(String),
+      showCredentialsForm: expect.any(Boolean),
+    };
+
+    describe('apiTokens', () => {
+      const existingToken = {
+        name: 'some_token',
+        type: PRIVATE,
+      };
+
+      it('should replace the existing token with the new token by name', () => {
+        mount({
+          apiTokens: [newToken, existingToken],
+        });
+        const updatedExistingToken = {
+          ...existingToken,
+          type: ADMIN,
+        };
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess(updatedExistingToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [newToken, updatedExistingToken],
+        });
+      });
+
+      // TODO Not sure if this is a good behavior or not
+      it('if for some reason the existing token is not found, it adds a new token...', () => {
+        mount({
+          apiTokens: [newToken, existingToken],
+        });
+        const brandNewToken = {
+          name: 'brand new token',
+          type: ADMIN,
+        };
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess(brandNewToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [newToken, existingToken, brandNewToken],
+        });
+      });
+    });
+
+    describe('activeApiToken', () => {
+      it('should reset to the default value, which effectively clears out the current form', () => {
+        mount({
+          activeApiToken: newToken,
+        });
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess({ ...newToken, type: ADMIN });
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: DEFAULT_VALUES.activeApiToken,
+        });
+      });
+    });
+
+    describe('activeApiTokenRawName', () => {
+      it('should reset to the default value, which effectively clears out the current form', () => {
+        mount({
+          activeApiTokenRawName: 'foo',
+        });
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess({ ...newToken, type: ADMIN });
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: DEFAULT_VALUES.activeApiTokenRawName,
+        });
+      });
+    });
+
+    describe('showCredentialsForm', () => {
+      it('should reset to the default value, which closes the credentials form', () => {
+        mount({
+          showCredentialsForm: true,
+        });
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess({ ...newToken, type: ADMIN });
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: false,
+        });
+      });
+    });
+  });
+
+  describe('setCredentialsData', () => {
+    const meta = {
+      page: {
+        current: 1,
+        size: 1,
+        total_pages: 1,
+        total_results: 1,
+      },
+    };
+
+    const values = {
+      ...DEFAULT_VALUES,
+      apiTokens: expect.any(Array),
+      meta: expect.any(Object),
+      isCredentialsDataComplete: expect.any(Boolean),
+    };
+
+    describe('apiTokens', () => {
+      it('should be set', () => {
+        mount();
+
+        CredentialsLogic.actions.setCredentialsData(meta, [newToken, newToken]);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [newToken, newToken],
+        });
+      });
+    });
+
+    describe('meta', () => {
+      it('should be set', () => {
+        mount();
+
+        CredentialsLogic.actions.setCredentialsData(meta, [newToken, newToken]);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          meta,
+        });
+      });
+    });
+
+    describe('isCredentialsDataComplete', () => {
+      it('should be set to true so we know that data fetching has completed', () => {
+        mount({
+          isCredentialsDataComplete: false,
+        });
+
+        CredentialsLogic.actions.setCredentialsData(meta, [newToken, newToken]);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          isCredentialsDataComplete: true,
+        });
+      });
+    });
+  });
+
+  describe('setCredentialsDetails', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      engines: expect.any(Array),
+      isCredentialsDetailsComplete: expect.any(Boolean),
+    };
+
+    describe('isCredentialsDataComplete', () => {
+      it('should be set to true so that we know data fetching has been completed', () => {
+        mount({
+          isCredentialsDetailsComplete: false,
+        });
+
+        CredentialsLogic.actions.setCredentialsDetails(credentialsDetails);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          isCredentialsDetailsComplete: true,
+        });
+      });
+    });
+
+    describe('engines', () => {
+      it('should set `engines` from the provided details object', () => {
+        mount({
+          engines: [],
+        });
+
+        CredentialsLogic.actions.setCredentialsDetails(credentialsDetails);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          engines: credentialsDetails.engines,
+        });
+      });
+    });
+  });
+
+  describe('setNameInputBlurred', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      nameInputBlurred: expect.any(Boolean),
+    };
+
+    describe('nameInputBlurred', () => {
+      it('should set this value', () => {
+        mount({
+          nameInputBlurred: false,
+        });
+
+        CredentialsLogic.actions.setNameInputBlurred(true);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          nameInputBlurred: true,
+        });
+      });
+    });
+  });
+
+  describe('setTokenReadWrite', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: expect.any(Object),
+    };
+
+    describe('activeApiToken', () => {
+      it('should set "read" or "write" values', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            read: false,
+          },
+        });
+
+        CredentialsLogic.actions.setTokenReadWrite({ name: 'read', checked: true });
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: {
+            ...newToken,
+            read: true,
+          },
+        });
+      });
+    });
+  });
+
+  describe('setTokenName', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: expect.any(Object),
+      activeApiTokenRawName: expect.any(String),
+    };
+
+    describe('activeApiToken', () => {
+      it('update the name property on the activeApiToken, formatted correctly', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            name: 'bar',
+          },
+        });
+
+        CredentialsLogic.actions.setTokenName('New Name');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, name: 'new-name' },
+        });
+      });
+    });
+
+    describe('activeApiTokenRawName', () => {
+      it('updates the raw name, with no formatting applied', () => {
+        mount();
+
+        CredentialsLogic.actions.setTokenName('New Name');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: 'New Name',
+        });
+      });
+    });
+  });
+
+  describe('setTokenType', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: {
+        ...newToken,
+        type: expect.any(String),
+        read: expect.any(Boolean),
+        write: expect.any(Boolean),
+        access_all_engines: expect.any(Boolean),
+        engines: expect.any(Array),
+      },
+    };
+
+    describe('activeApiToken.access_all_engines', () => {
+      describe('when value is ADMIN', () => {
+        it('updates access_all_engines to false', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              access_all_engines: true,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(ADMIN);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              access_all_engines: false,
+            },
+          });
+        });
+      });
+
+      describe('when value is not ADMIN', () => {
+        it('will maintain access_all_engines value when true', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              access_all_engines: true,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              access_all_engines: true,
+            },
+          });
+        });
+
+        it('will maintain access_all_engines value when false', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              access_all_engines: false,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              access_all_engines: false,
+            },
+          });
+        });
+      });
+    });
+
+    describe('activeApiToken.engines', () => {
+      describe('when value is ADMIN', () => {
+        it('clears the array', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              engines: [{}, {}],
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(ADMIN);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              engines: [],
+            },
+          });
+        });
+      });
+
+      describe('when value is not ADMIN', () => {
+        it('will maintain engines array', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              engines: [{}, {}],
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              engines: [{}, {}],
+            },
+          });
+        });
+      });
+    });
+
+    describe('activeApiToken.write', () => {
+      describe('when value is PRIVATE', () => {
+        it('sets this to true', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              write: false,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              write: true,
+            },
+          });
+        });
+      });
+
+      describe('when value is not PRIVATE', () => {
+        it('sets this to false', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              write: true,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(ADMIN);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              write: false,
+            },
+          });
+        });
+      });
+    });
+
+    describe('activeApiToken.read', () => {
+      describe('when value is PRIVATE', () => {
+        it('sets this to true', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              read: false,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              read: true,
+            },
+          });
+        });
+      });
+
+      describe('when value is not PRIVATE', () => {
+        it('sets this to false', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              read: true,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(ADMIN);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              read: false,
+            },
+          });
+        });
+      });
+    });
+
+    describe('activeApiToken.type', () => {
+      it('sets the type value', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            type: ADMIN,
+          },
+        });
+
+        CredentialsLogic.actions.setTokenType(PRIVATE);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: {
+            ...values.activeApiToken,
+            type: PRIVATE,
+          },
+        });
+      });
+    });
+  });
+
+  describe('toggleCredentialsForm', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiTokenIsExisting: expect.any(Boolean),
+      activeApiToken: expect.any(Object),
+      activeApiTokenRawName: expect.any(String),
+      formErrors: expect.any(Array),
+      showCredentialsForm: expect.any(Boolean),
+    };
+
+    describe('showCredentialsForm', () => {
+      it('should toggle `showCredentialsForm`', () => {
+        mount({
+          showCredentialsForm: false,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: true,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: false,
+        });
+      });
+    });
+
+    describe('formErrors', () => {
+      it('should reset `formErrors`', () => {
+        mount({
+          formErrors: ['I am an error'],
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          formErrors: [],
+        });
+      });
+    });
+
+    describe('activeApiTokenRawName', () => {
+      it('should set `activeApiTokenRawName` to the name of the provided token', () => {
+        mount();
+
+        CredentialsLogic.actions.toggleCredentialsForm(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: 'myToken',
+        });
+      });
+
+      it('should set `activeApiTokenRawName` to the default value if no token is provided', () => {
+        mount();
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: DEFAULT_VALUES.activeApiTokenRawName,
+        });
+      });
+
+      // TODO: This fails, is this an issue? Instead of reseting back to the default value, it sets it to the previously
+      // used value... to be honest, this should probably just be a selector
+      // it('should set `activeApiTokenRawName` back to the default value if no token is provided', () => {
+      //   mount();
+      //   CredentialsLogic.actions.toggleCredentialsForm(newToken);
+      //   CredentialsLogic.actions.toggleCredentialsForm();
+      //   expect(CredentialsLogic.values).toEqual({
+      //     ...values,
+      //     activeApiTokenRawName: DEFAULT_VALUES.activeApiTokenRawName,
+      // });
+      // });
+    });
+
+    describe('activeApiToken', () => {
+      it('should set `activeApiToken` to the provided token', () => {
+        mount();
+
+        CredentialsLogic.actions.toggleCredentialsForm(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: newToken,
+        });
+      });
+
+      it('should set `activeApiToken` to the default value if no token is provided', () => {
+        mount({
+          activeApiToken: newToken,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: DEFAULT_VALUES.activeApiToken,
+        });
+      });
+    });
+
+    // TODO: This should probably just be a selector...
+    describe('activeApiTokenIsExisting', () => {
+      it('should set `activeApiTokenIsExisting` to true when the provided token has an id', () => {
+        mount({
+          activeApiTokenIsExisting: false,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenIsExisting: true,
+        });
+      });
+
+      it('should set `activeApiTokenIsExisting` to false when the provided token has no id', () => {
+        mount({
+          activeApiTokenIsExisting: true,
+        });
+        const { id, ...newTokenWithoutId } = newToken;
+
+        CredentialsLogic.actions.toggleCredentialsForm(newTokenWithoutId);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenIsExisting: false,
+        });
+      });
+
+      it('should set `activeApiTokenIsExisting` to false when no token is provided', () => {
+        mount({
+          activeApiTokenIsExisting: true,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenIsExisting: false,
+        });
+      });
+    });
+  });
+
+  describe('hideCredentialsForm', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      showCredentialsForm: expect.any(Boolean),
+      activeApiTokenRawName: expect.any(String),
+    };
+
+    describe('activeApiTokenRawName', () => {
+      it('resets this value', () => {
+        mount({
+          activeApiTokenRawName: 'foo',
+        });
+
+        CredentialsLogic.actions.hideCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: '',
+        });
+      });
+    });
+
+    describe('showCredentialsForm', () => {
+      it('resets this value', () => {
+        mount({
+          showCredentialsForm: true,
+        });
+
+        CredentialsLogic.actions.hideCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: false,
+        });
+      });
+    });
+  });
+
+  describe('resetCredentials', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      isCredentialsDetailsComplete: expect.any(Boolean),
+      isCredentialsDataComplete: expect.any(Boolean),
+      formErrors: expect.any(Array),
+    };
+
+    describe('isCredentialsDetailsComplete', () => {
+      it('should reset to false', () => {
+        mount({
+          isCredentialsDetailsComplete: true,
+        });
+
+        CredentialsLogic.actions.resetCredentials();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          isCredentialsDetailsComplete: false,
+        });
+      });
+    });
+
+    describe('isCredentialsDataComplete', () => {
+      it('should reset to false', () => {
+        mount({
+          isCredentialsDataComplete: true,
+        });
+
+        CredentialsLogic.actions.resetCredentials();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          isCredentialsDataComplete: false,
+        });
+      });
+    });
+
+    describe('formErrors', () => {
+      it('should reset', () => {
+        mount({
+          formErrors: ['I am an error'],
+        });
+
+        CredentialsLogic.actions.resetCredentials();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          formErrors: [],
+        });
+      });
+    });
+  });
+
+  describe('initializeCredentialsData', () => {
+    it('should call fetchCredentials and fetchDetails', () => {
+      mount();
+      jest.spyOn(CredentialsLogic.actions, 'fetchCredentials').mockImplementationOnce(() => {});
+      jest.spyOn(CredentialsLogic.actions, 'fetchDetails').mockImplementationOnce(() => {});
+
+      CredentialsLogic.actions.initializeCredentialsData();
+      expect(CredentialsLogic.actions.fetchCredentials).toHaveBeenCalled();
+      expect(CredentialsLogic.actions.fetchDetails).toHaveBeenCalled();
+    });
+  });
+
+  describe('fetchCredentials', () => {
+    const meta = {
+      page: {
+        current: 1,
+        size: 1,
+        total_pages: 1,
+        total_results: 1,
+      },
+    };
+    const results: object[] = [];
+
+    it('will call an API endpoint and set the results with the `setCredentialsData` action', async () => {
+      mount();
+      jest.spyOn(CredentialsLogic.actions, 'setCredentialsData').mockImplementationOnce(() => {});
+      const promise = Promise.resolve({ meta, results });
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.fetchCredentials(2);
+      expect(HttpLogic.values.http.get).toHaveBeenCalledWith('/api/app_search/credentials', {
+        query: {
+          'page[current]': 2,
+        },
+      });
+      await promise;
+      expect(CredentialsLogic.actions.setCredentialsData).toHaveBeenCalledWith(meta, results);
+    });
+
+    it('handles errors', async () => {
+      mount();
+      const promise = Promise.reject('An error occured');
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.fetchCredentials();
+      try {
+        await promise;
+      } catch {
+        expect(flashAPIErrors).toHaveBeenCalledWith('An error occured');
+      }
+    });
+  });
+
+  describe('fetchDetails', () => {
+    it('will call an API endpoint and set the results with the `setCredentialsDetails` action', async () => {
+      mount();
+      jest
+        .spyOn(CredentialsLogic.actions, 'setCredentialsDetails')
+        .mockImplementationOnce(() => {});
+      const promise = Promise.resolve(credentialsDetails);
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.fetchDetails();
+      expect(HttpLogic.values.http.get).toHaveBeenCalledWith('/api/app_search/credentials/details');
+      await promise;
+      expect(CredentialsLogic.actions.setCredentialsDetails).toHaveBeenCalledWith(
+        credentialsDetails
+      );
+    });
+
+    it('handles errors', async () => {
+      mount();
+      const promise = Promise.reject('An error occured');
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.fetchDetails();
+      try {
+        await promise;
+      } catch {
+        expect(flashAPIErrors).toHaveBeenCalledWith('An error occured');
+      }
+    });
+  });
+
+  describe('deleteApiKey', () => {
+    const tokenName = 'abc123';
+
+    it('will call an API endpoint and set the results with the `onApiKeyDelete` action', async () => {
+      mount();
+      jest.spyOn(CredentialsLogic.actions, 'onApiKeyDelete').mockImplementationOnce(() => {});
+      const promise = Promise.resolve();
+      (HttpLogic.values.http.delete as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.deleteApiKey(tokenName);
+      expect(HttpLogic.values.http.delete).toHaveBeenCalledWith(
+        `/api/app_search/credentials/${tokenName}`
+      );
+      await promise;
+      expect(CredentialsLogic.actions.onApiKeyDelete).toHaveBeenCalledWith(tokenName);
+    });
+
+    it('handles errors', async () => {
+      mount();
+      const promise = Promise.reject('An error occured');
+      (HttpLogic.values.http.delete as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.deleteApiKey(tokenName);
+      try {
+        await promise;
+      } catch {
+        expect(flashAPIErrors).toHaveBeenCalledWith('An error occured');
+      }
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.ts
new file mode 100644
index 0000000000000..43f2731711823
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.ts
@@ -0,0 +1,264 @@
+/*
+ * 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 { kea, MakeLogicType } from 'kea';
+
+import { formatApiName } from '../../utils/format_api_name';
+import { ADMIN, PRIVATE } from './constants';
+
+import { HttpLogic } from '../../../shared/http';
+import { IMeta } from '../../../../../common/types';
+import { flashAPIErrors } from '../../../shared/flash_messages';
+import { IEngine } from '../../types';
+import { IApiToken, ICredentialsDetails } from './types';
+
+interface ITokenReadWrite {
+  name: 'read' | 'write';
+  checked: boolean;
+}
+
+const defaultApiToken: IApiToken = {
+  name: '',
+  type: PRIVATE,
+  read: true,
+  write: true,
+  access_all_engines: true,
+};
+
+// TODO CREATE_MESSAGE, UPDATE_MESSAGE, and DELETE_MESSAGE from ent-search
+
+export interface ICredentialsLogicActions {
+  addEngineName(engineName: string): string;
+  onApiKeyDelete(tokenName: string): string;
+  onApiTokenCreateSuccess(apiToken: IApiToken): IApiToken;
+  onApiTokenError(formErrors: string[]): string[];
+  onApiTokenUpdateSuccess(apiToken: IApiToken): IApiToken;
+  removeEngineName(engineName: string): string;
+  setAccessAllEngines(accessAll: boolean): boolean;
+  setCredentialsData(meta: IMeta, apiTokens: IApiToken[]): { meta: IMeta; apiTokens: IApiToken[] };
+  setCredentialsDetails(details: ICredentialsDetails): ICredentialsDetails;
+  setNameInputBlurred(isBlurred: boolean): boolean;
+  setTokenReadWrite(tokenReadWrite: ITokenReadWrite): ITokenReadWrite;
+  setTokenName(name: string): string;
+  setTokenType(tokenType: string): string;
+  toggleCredentialsForm(apiToken?: IApiToken): IApiToken;
+  hideCredentialsForm(): { value: boolean };
+  resetCredentials(): { value: boolean };
+  initializeCredentialsData(): { value: boolean };
+  fetchCredentials(page?: number): number;
+  fetchDetails(): { value: boolean };
+  deleteApiKey(tokenName: string): string;
+}
+
+export interface ICredentialsLogicValues {
+  activeApiToken: IApiToken;
+  activeApiTokenIsExisting: boolean;
+  activeApiTokenRawName: string;
+  apiTokens: IApiToken[];
+  dataLoading: boolean;
+  engines: IEngine[];
+  formErrors: string[];
+  isCredentialsDataComplete: boolean;
+  isCredentialsDetailsComplete: boolean;
+  fullEngineAccessChecked: boolean;
+  meta: Partial<IMeta>;
+  nameInputBlurred: boolean;
+  showCredentialsForm: boolean;
+}
+
+export const CredentialsLogic = kea<
+  MakeLogicType<ICredentialsLogicValues, ICredentialsLogicActions>
+>({
+  path: ['enterprise_search', 'app_search', 'credentials_logic'],
+  actions: () => ({
+    addEngineName: (engineName) => engineName,
+    onApiKeyDelete: (tokenName) => tokenName,
+    onApiTokenCreateSuccess: (apiToken) => apiToken,
+    onApiTokenError: (formErrors) => formErrors,
+    onApiTokenUpdateSuccess: (apiToken) => apiToken,
+    removeEngineName: (engineName) => engineName,
+    setAccessAllEngines: (accessAll) => accessAll,
+    setCredentialsData: (meta, apiTokens) => ({ meta, apiTokens }),
+    setCredentialsDetails: (details) => details,
+    setNameInputBlurred: (nameInputBlurred) => nameInputBlurred,
+    setTokenReadWrite: ({ name, checked }) => ({
+      name,
+      checked,
+    }),
+    setTokenName: (name) => name,
+    setTokenType: (tokenType) => tokenType,
+    toggleCredentialsForm: (apiToken = { ...defaultApiToken }) => apiToken,
+    hideCredentialsForm: false,
+    resetCredentials: false,
+    initializeCredentialsData: true,
+    fetchCredentials: (page) => page,
+    fetchDetails: true,
+    deleteApiKey: (tokenName) => tokenName,
+  }),
+  reducers: () => ({
+    apiTokens: [
+      [],
+      {
+        setCredentialsData: (_, { apiTokens }) => apiTokens,
+        onApiTokenCreateSuccess: (apiTokens, apiToken) => [...apiTokens, apiToken],
+        onApiTokenUpdateSuccess: (apiTokens, apiToken) => [
+          ...apiTokens.filter((token) => token.name !== apiToken.name),
+          apiToken,
+        ],
+        onApiKeyDelete: (apiTokens, tokenName) =>
+          apiTokens.filter((token) => token.name !== tokenName),
+      },
+    ],
+    meta: [
+      {},
+      {
+        setCredentialsData: (_, { meta }) => meta,
+      },
+    ],
+    isCredentialsDetailsComplete: [
+      false,
+      {
+        setCredentialsDetails: () => true,
+        resetCredentials: () => false,
+      },
+    ],
+    isCredentialsDataComplete: [
+      false,
+      {
+        setCredentialsData: () => true,
+        resetCredentials: () => false,
+      },
+    ],
+    engines: [
+      [],
+      {
+        setCredentialsDetails: (_, { engines }) => engines,
+      },
+    ],
+    nameInputBlurred: [
+      false,
+      {
+        setNameInputBlurred: (_, nameInputBlurred) => nameInputBlurred,
+      },
+    ],
+    activeApiToken: [
+      defaultApiToken,
+      {
+        addEngineName: (activeApiToken, engineName) => ({
+          ...activeApiToken,
+          engines: [...(activeApiToken.engines || []), engineName],
+        }),
+        removeEngineName: (activeApiToken, engineName) => ({
+          ...activeApiToken,
+          engines: (activeApiToken.engines || []).filter((name) => name !== engineName),
+        }),
+        setAccessAllEngines: (activeApiToken, accessAll) => ({
+          ...activeApiToken,
+          access_all_engines: accessAll,
+          engines: accessAll ? [] : activeApiToken.engines,
+        }),
+        onApiTokenCreateSuccess: () => defaultApiToken,
+        onApiTokenUpdateSuccess: () => defaultApiToken,
+        setTokenName: (activeApiToken, name) => ({ ...activeApiToken, name: formatApiName(name) }),
+        setTokenReadWrite: (activeApiToken, { name, checked }) => ({
+          ...activeApiToken,
+          [name]: checked,
+        }),
+        setTokenType: (activeApiToken, tokenType) => ({
+          ...activeApiToken,
+          access_all_engines: tokenType === ADMIN ? false : activeApiToken.access_all_engines,
+          engines: tokenType === ADMIN ? [] : activeApiToken.engines,
+          write: tokenType === PRIVATE,
+          read: tokenType === PRIVATE,
+          type: tokenType,
+        }),
+        toggleCredentialsForm: (_, activeApiToken) => activeApiToken,
+      },
+    ],
+    activeApiTokenRawName: [
+      '',
+      {
+        setTokenName: (_, activeApiTokenRawName) => activeApiTokenRawName,
+        toggleCredentialsForm: (activeApiTokenRawName, activeApiToken) =>
+          activeApiToken.name || activeApiTokenRawName,
+        hideCredentialsForm: () => '',
+        onApiTokenCreateSuccess: () => '',
+        onApiTokenUpdateSuccess: () => '',
+      },
+    ],
+    activeApiTokenIsExisting: [
+      false,
+      {
+        toggleCredentialsForm: (_, activeApiToken) => !!activeApiToken.id,
+      },
+    ],
+    showCredentialsForm: [
+      false,
+      {
+        toggleCredentialsForm: (showCredentialsForm) => !showCredentialsForm,
+        hideCredentialsForm: () => false,
+        onApiTokenCreateSuccess: () => false,
+        onApiTokenUpdateSuccess: () => false,
+      },
+    ],
+    formErrors: [
+      [],
+      {
+        onApiTokenError: (_, formErrors) => formErrors,
+        onApiTokenCreateSuccess: () => [],
+        toggleCredentialsForm: () => [],
+        resetCredentials: () => [],
+      },
+    ],
+  }),
+  selectors: ({ selectors }) => ({
+    // TODO fullEngineAccessChecked from ent-search
+    dataLoading: [
+      () => [selectors.isCredentialsDetailsComplete, selectors.isCredentialsDataComplete],
+      (isCredentialsDetailsComplete, isCredentialsDataComplete) => {
+        return isCredentialsDetailsComplete === false || isCredentialsDataComplete === false;
+      },
+    ],
+  }),
+  listeners: ({ actions, values }) => ({
+    initializeCredentialsData: () => {
+      actions.fetchCredentials();
+      actions.fetchDetails();
+    },
+    fetchCredentials: async (page = 1) => {
+      try {
+        const { http } = HttpLogic.values;
+        const query = { 'page[current]': page };
+        const response = await http.get('/api/app_search/credentials', { query });
+        actions.setCredentialsData(response.meta, response.results);
+      } catch (e) {
+        flashAPIErrors(e);
+      }
+    },
+    fetchDetails: async () => {
+      try {
+        const { http } = HttpLogic.values;
+        const response = await http.get('/api/app_search/credentials/details');
+
+        actions.setCredentialsDetails(response);
+      } catch (e) {
+        flashAPIErrors(e);
+      }
+    },
+    deleteApiKey: async (tokenName) => {
+      try {
+        const { http } = HttpLogic.values;
+        await http.delete(`/api/app_search/credentials/${tokenName}`);
+
+        actions.onApiKeyDelete(tokenName);
+      } catch (e) {
+        flashAPIErrors(e);
+      }
+    },
+    // TODO onApiTokenChange from ent-search
+    // TODO onEngineSelect from ent-search
+  }),
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/types.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/types.ts
new file mode 100644
index 0000000000000..9b09bd13a9086
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/types.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { IEngine } from '../../types';
+
+export interface ICredentialsDetails {
+  engines: IEngine[];
+}
+
+export interface IApiToken {
+  access_all_engines?: boolean;
+  key?: string;
+  engines?: string[];
+  id?: number;
+  name: string;
+  read?: boolean;
+  type: string;
+  write?: boolean;
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/types.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/types.ts
index 3cabc1051c74a..568a0a3365982 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/types.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/types.ts
@@ -6,3 +6,10 @@
 
 export * from '../../../common/types/app_search';
 export { IRole, TRole, TAbility } from './utils/role';
+
+export interface IEngine {
+  name: string;
+  type: string;
+  language: string;
+  result_fields: object[];
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.test.ts
new file mode 100644
index 0000000000000..352ff237e4f08
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.test.ts
@@ -0,0 +1,25 @@
+/*
+ * 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 { formatApiName } from '.';
+
+describe('formatApiName', () => {
+  it('replaces non-alphanumeric characters with dashes', () => {
+    expect(formatApiName('f1  &&o$ 1  2 *&%da')).toEqual('f1-o-1-2-da');
+  });
+
+  it('strips leading and trailing non-alphanumeric characters', () => {
+    expect(formatApiName('$$hello world**')).toEqual('hello-world');
+  });
+
+  it('strips leading and trailing whitespace', () => {
+    expect(formatApiName('  test  ')).toEqual('test');
+  });
+
+  it('lowercases text', () => {
+    expect(formatApiName('SomeName')).toEqual('somename');
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.ts
new file mode 100644
index 0000000000000..cd1b1cfe15637
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.ts
@@ -0,0 +1,12 @@
+/*
+ * 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 const formatApiName = (rawName: string) =>
+  rawName
+    .trim()
+    .replace(/[^a-zA-Z0-9]+/g, '-') // Replace all special/non-alphanumerical characters with dashes
+    .replace(/^[-]+|[-]+$/g, '') // Strip all leading and trailing dashes
+    .toLowerCase();
diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts
index 000e6d63b5999..6b5f4a05b3aa6 100644
--- a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts
+++ b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts
@@ -25,41 +25,6 @@ describe('credentials routes', () => {
     it('creates a request handler', () => {
       expect(mockRequestHandler.createRequest).toHaveBeenCalledWith({
         path: '/as/credentials/collection',
-        hasValidData: expect.any(Function),
-      });
-    });
-
-    describe('hasValidData', () => {
-      it('should correctly validate that a response has data', () => {
-        const response = {
-          meta: {
-            page: {
-              current: 1,
-              total_pages: 1,
-              total_results: 1,
-              size: 25,
-            },
-          },
-          results: [
-            {
-              id: 'loco_moco_account_id:5f3575de2b76ff13405f3155|name:asdfasdf',
-              key: 'search-fe49u2z8d5gvf9s4ekda2ad4',
-              name: 'asdfasdf',
-              type: 'search',
-              access_all_engines: true,
-            },
-          ],
-        };
-
-        expect(mockRequestHandler.hasValidData(response)).toBe(true);
-      });
-
-      it('should correctly validate that a response does not have data', () => {
-        const response = {
-          foo: 'bar',
-        };
-
-        expect(mockRequestHandler.hasValidData(response)).toBe(false);
       });
     });
 
@@ -75,4 +40,52 @@ describe('credentials routes', () => {
       });
     });
   });
+
+  describe('GET /api/app_search/credentials/details', () => {
+    let mockRouter: MockRouter;
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      mockRouter = new MockRouter({ method: 'get', payload: 'query' });
+
+      registerCredentialsRoutes({
+        ...mockDependencies,
+        router: mockRouter.router,
+      });
+    });
+
+    it('creates a request handler', () => {
+      expect(mockRequestHandler.createRequest).toHaveBeenCalledWith({
+        path: '/as/credentials/details',
+      });
+    });
+  });
+
+  describe('DELETE /api/app_search/credentials/{name}', () => {
+    let mockRouter: MockRouter;
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      mockRouter = new MockRouter({ method: 'delete', payload: 'params' });
+
+      registerCredentialsRoutes({
+        ...mockDependencies,
+        router: mockRouter.router,
+      });
+    });
+
+    it('creates a request to enterprise search', () => {
+      const mockRequest = {
+        params: {
+          name: 'abc123',
+        },
+      };
+
+      mockRouter.callRoute(mockRequest);
+
+      expect(mockRequestHandler.createRequest).toHaveBeenCalledWith({
+        path: '/as/credentials/abc123',
+      });
+    });
+  });
 });
diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.ts
index 432f54c8e5b1c..0f2c1133192c5 100644
--- a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.ts
+++ b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.ts
@@ -8,25 +8,6 @@ import { schema } from '@kbn/config-schema';
 
 import { IRouteDependencies } from '../../plugin';
 
-interface ICredential {
-  id: string;
-  key: string;
-  name: string;
-  type: string;
-  access_all_engines: boolean;
-}
-interface ICredentialsResponse {
-  results: ICredential[];
-  meta?: {
-    page?: {
-      current: number;
-      total_results: number;
-      total_pages: number;
-      size: number;
-    };
-  };
-}
-
 export function registerCredentialsRoutes({
   router,
   enterpriseSearchRequestHandler,
@@ -42,9 +23,30 @@ export function registerCredentialsRoutes({
     },
     enterpriseSearchRequestHandler.createRequest({
       path: '/as/credentials/collection',
-      hasValidData: (body?: ICredentialsResponse) => {
-        return Array.isArray(body?.results) && typeof body?.meta?.page?.total_results === 'number';
-      },
     })
   );
+  router.get(
+    {
+      path: '/api/app_search/credentials/details',
+      validate: false,
+    },
+    enterpriseSearchRequestHandler.createRequest({
+      path: '/as/credentials/details',
+    })
+  );
+  router.delete(
+    {
+      path: '/api/app_search/credentials/{name}',
+      validate: {
+        params: schema.object({
+          name: schema.string(),
+        }),
+      },
+    },
+    async (context, request, response) => {
+      return enterpriseSearchRequestHandler.createRequest({
+        path: `/as/credentials/${request.params.name}`,
+      })(context, request, response);
+    }
+  );
 }
diff --git a/x-pack/test/apm_api_integration/trial/tests/csm/js_errors.ts b/x-pack/test/apm_api_integration/trial/tests/csm/js_errors.ts
new file mode 100644
index 0000000000000..0edffe7999a65
--- /dev/null
+++ b/x-pack/test/apm_api_integration/trial/tests/csm/js_errors.ts
@@ -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 expect from '@kbn/expect';
+import { expectSnapshot } from '../../../common/match_snapshot';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+export default function rumJsErrorsApiTests({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  const esArchiver = getService('esArchiver');
+
+  describe('CSM js errors', () => {
+    describe('when there is no data', () => {
+      it('returns no js errors', async () => {
+        const response = await supertest.get(
+          '/api/apm/rum-client/js-errors?pageSize=5&pageIndex=0&start=2020-09-07T20%3A35%3A54.654Z&end=2020-09-14T20%3A35%3A54.654Z&uiFilters=%7B%22serviceName%22%3A%5B%22elastic-co-rum-test%22%5D%7D'
+        );
+
+        expect(response.status).to.be(200);
+        expectSnapshot(response.body).toMatchInline(`
+          Object {
+            "totalErrorGroups": 0,
+            "totalErrorPages": 0,
+            "totalErrors": 0,
+          }
+        `);
+      });
+    });
+
+    describe('when there is data', () => {
+      before(async () => {
+        await esArchiver.load('8.0.0');
+        await esArchiver.load('rum_8.0.0');
+      });
+      after(async () => {
+        await esArchiver.unload('8.0.0');
+        await esArchiver.unload('rum_8.0.0');
+      });
+
+      it('returns js errors', async () => {
+        const response = await supertest.get(
+          '/api/apm/rum-client/js-errors?pageSize=5&pageIndex=0&start=2020-09-07T20%3A35%3A54.654Z&end=2020-09-16T20%3A35%3A54.654Z&uiFilters=%7B%22serviceName%22%3A%5B%22kibana-frontend-8_0_0%22%5D%7D'
+        );
+
+        expect(response.status).to.be(200);
+
+        expectSnapshot(response.body).toMatchInline(`
+          Object {
+            "items": Array [],
+            "totalErrorGroups": 0,
+            "totalErrorPages": 0,
+            "totalErrors": 0,
+          }
+        `);
+      });
+    });
+  });
+}
diff --git a/x-pack/test/apm_api_integration/trial/tests/index.ts b/x-pack/test/apm_api_integration/trial/tests/index.ts
index 69e54ea33c559..a6a031def34ea 100644
--- a/x-pack/test/apm_api_integration/trial/tests/index.ts
+++ b/x-pack/test/apm_api_integration/trial/tests/index.ts
@@ -37,6 +37,7 @@ export default function observabilityApiIntegrationTests({ loadTestFile }: FtrPr
       loadTestFile(require.resolve('./csm/long_task_metrics.ts'));
       loadTestFile(require.resolve('./csm/url_search.ts'));
       loadTestFile(require.resolve('./csm/page_views.ts'));
+      loadTestFile(require.resolve('./csm/js_errors.ts'));
     });
   });
 }