diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index a90e3c4ac223..fd4e2984aa07 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +1 @@
-*   @ananzh @kavilla @seanneumann @AMoo-Miki @ashwin-pc @joshuarrrr @abbyhu2000 @zengyan-amazon @kristenTian @zhongnansu @manasvinibs @ZilongX @Flyingliuhub @BSFishy
+*   @ananzh @kavilla @seanneumann @AMoo-Miki @ashwin-pc @joshuarrrr @abbyhu2000 @zengyan-amazon @kristenTian @zhongnansu @manasvinibs @ZilongX @Flyingliuhub @BSFishy @curq
diff --git a/.github/workflows/build_and_test_workflow.yml b/.github/workflows/build_and_test_workflow.yml
index a12d6f3ae87e..a9175ad23f8b 100644
--- a/.github/workflows/build_and_test_workflow.yml
+++ b/.github/workflows/build_and_test_workflow.yml
@@ -318,7 +318,7 @@ jobs:
         working-directory: ./artifacts
     strategy:
       matrix:
-        version: [osd-2.0.0, osd-2.1.0, osd-2.2.0, osd-2.3.0, osd-2.4.0, osd-2.5.0, osd-2.6.0, osd-2.7.0]
+        version: [osd-2.0.0, osd-2.1.0, osd-2.2.0, osd-2.3.0, osd-2.4.0, osd-2.5.0, osd-2.6.0, osd-2.7.0, osd-2.8.0, osd-2.9.0]
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -346,7 +346,7 @@ jobs:
 
       - name: Set OpenSearch URL
         run: |
-          echo "OPENSEARCH_URL=https://ci.opensearch.org/ci/dbc/distribution-build-opensearch/${{ env.VERSION }}/latest/linux/x64/tar/dist/opensearch/opensearch-${{ env.VERSION }}-linux-x64.tar.gz" >> $GITHUB_ENV
+          echo "OPENSEARCH_URL=https://artifacts.opensearch.org/snapshots/core/opensearch/${{ env.VERSION }}-SNAPSHOT/opensearch-min-${{ env.VERSION }}-SNAPSHOT-linux-x64-latest.tar.gz" >> $GITHUB_ENV
 
       - name: Verify if OpenSearch is available for version
         id: verify-opensearch-exists
diff --git a/.lycheeexclude b/.lycheeexclude
index 5bb9c969dad1..67ed88344a25 100644
--- a/.lycheeexclude
+++ b/.lycheeexclude
@@ -124,3 +124,4 @@ http://helpmenow.com/problem2
 https://sass-lang.com/*
 http://api.jquery.com/*
 http://brandonaaron.net
+https://www.circl.lu/doc/misp/
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00061357535d..395f608e85ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [CVE-2023-26115] Bump `word-wrap` from `1.2.3` to `1.2.4` ([#4589](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4589))
 - Bump `node-sass` to a version that uses a newer `libsass` ([#4649](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4649))
 - [CVE-2019-11358] Bump version of tinygradient from 0.4.3 to 1.1.5 ([#4742](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4742))
+- [CVE-2021-3520] Bump `lmdb` from `2.8.0` to `2.8.5` ([#4804](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4804))
+- Remove examples and other unwanted artifacts from installed dependencies ([#4896](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4896))
 
 ### 📈 Features/Enhancements
 
@@ -24,9 +26,18 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Add resource ID filtering in fetch `augment-vis` obj queries ([#4608](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4608))
 - Reduce the amount of comments in compiled CSS ([#4648](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4648))
 - [Saved Object Service] Customize saved objects service status ([#4696](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4696))
+- Remove minimum constraint on opensearch hosts to allow empty host ([#4701](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4701))
 - [Discover] Update styles to compatible with OUI `next` theme ([#4644](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4644))
+- [Home] Add modal to introduce the `next` theme ([#4715](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4715))
+- [Home] Add new theme sample dashboard screenshots ([#4906](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4906))
 - Remove visualization editor sidebar background ([#4719](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4719))
 - [Vis Colors] Remove customized colors from sample visualizations and dashboards ([#4741](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4741))
+- [Vis Colors] Update color mapper to prioritize unique colors per visualization rather than across entire dashboard ([#4890](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4890))
+- [Decouple] Allow plugin manifest config to define semver compatible OpenSearch plugin and verify if it is installed on the cluster([#4612](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4612))
+- [Advanced Settings] Consolidate settings into new "Appearance" category and add category IDs ([#4845](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4845))
+- Adds Data explorer framework and implements Discover using it ([#4806](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4806))
+- [Theme] Use themes' definitions to render the initial view ([#4936](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4936/))
+- [Theme] Make `next` theme the default ([#4854](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4854/))
 
 ### 🐛 Bug Fixes
 
@@ -34,7 +45,14 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Cleanup unused url ([#3847](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3847))
 - Fix Node.js download link ([#4556](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4556))
 - [TSVB, Dashboards] Fix inconsistent dark mode code editor themes ([#4609](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4609))
+- [Table Visualization] Fix width of multiple tables when rendered in column view ([#4638](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4638))
 - [Legacy Maps] Fix dark mode style overrides ([#4658](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4658))
+- [BUG] Fix management overview page duplicate rendering ([#4636](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4636))
+- [Table Vis] Fix filter actions on data table vis cells ([#4837](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4837))
+- Fix broken app when management is turned off ([#4891](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4891))
+- Correct the generated path for downloading plugins by their names on Windows ([#4953](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4953))
+- [BUG] Fix buildPointSeriesData unit test fails due to local timezone ([#4992](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4992))
+- [BUG][Data Explorer][Discover] Fix total hits issue for no time based data ([#5087](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5087))
 
 ### 🚞 Infrastructure
 
@@ -50,11 +68,14 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ### 🛠 Maintenance
 
+- Remove angular html extractor ([#4680](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4680))
 - Removes `minimatch` manual resolution ([#3019](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3019))
 - Upgrade `vega-lite` dependency from `4.17.0` to `^5.6.0` ([#3076](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3076)). Backwards-compatible version included in v2.5.0 release.
 - Bump `js-yaml` from `3.14.0` to `4.1.0` ([#3770](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3770))
 - [@osd/pm] Automate multi-target bootstrap and build ([#4650](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4650))
 - Update webpack environment targets ([#4649](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4649))
+- Add @curq as maintainer ([#4760](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4760))
+- Bump `oui` to `1.3.0` ([#4941](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4941))
 
 ### 🪛 Refactoring
 
@@ -69,9 +90,12 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Console] Migrate `/lib/autocomplete/` module to TypeScript ([#4148](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4148))
 - [Console] Migrate `/lib/!autocomplete/` module to TypeScript ([#4150](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4150))
 - [Dashboard] Restructure the `Dashboard` plugin folder to be more cohesive with the project ([#4575](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4575))
+- Refactor logo usage to centralize and optimize assets and improve tests ([#4702](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4702))
 
 ### 🔩 Tests
 
+- [Tests] Add BWC tests for 2.9 and 2.10 ([#4762](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4762))
+
 ## [1.3.12 - 2023-08-10](https://github.com/opensearch-project/OpenSearch-Dashboards/releases/tag/1.3.12)
 
 ### 🛡 Security
@@ -126,6 +150,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Enable plugins to augment visualizations with additional data and context ([#4361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4361))
 - Dashboard De-Angularization ([#4502](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4502))
 - New management overview page and rename stack management to dashboard management ([#4287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4287))
+- [Console] Add support for JSON with long numerals ([#4562](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4562))
 - [Vis Augmenter] Update base vis height in view events flyout ([#4535](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4535))
 - [Dashboard De-Angular] Add more unit tests for utils folder ([#4641](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4641))
 - [Dashboard De-Angular] Add unit tests for dashboard_listing and dashboard_top_nav ([#4640](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4640))
@@ -145,6 +170,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Upgrade the backport workflow ([#4343](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4343))
 - [Lint] Add custom stylelint rules and config to prevent unintended style overrides ([#4290](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4290))
 - [Lint] Add stylelint rule to define properties that are restricted from being used ([#4374](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4374))
+- [Lint] Add stylelint rule to define values that are restricted from being used ([#4413](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4413))
 - [Lint] Add typing to Stylelint rules ([#4392](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4392))
 - [CI] Split build and verify into parallel jobs ([#4467](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4467))
 
@@ -176,6 +202,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Console] Migrate `/lib/autocomplete/` module to TypeScript ([#4148](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4148))
 - [Dashboard] Restructure the `Dashboard` plugin folder to be more cohesive with the project ([#4575](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4575))
 - [Chrome] Remove breadcrumb style overrrides ([#4621](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4621))
+- Replace tinymath with math.js ([#4492](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4492))
 
 ### 🔩 Tests
 
@@ -304,6 +331,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [VisBuilder] Add metric to metric, bucket to bucket aggregation persistence ([#3495](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3495))
 - [VisBuilder] Add UI actions handler ([#3732](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3732))
 - [VisBuilder] Add persistence to visualizations inner state ([#3751](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3751))
+- [Console] Add support for exporting and restoring commands in Dev Tools ([#3810](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3810))
 
 ### 🐛 Bug Fixes
 
diff --git a/DEVELOPER_GUIDE.md b/DEVELOPER_GUIDE.md
index ac26f4bcd8b2..24c7851c21eb 100644
--- a/DEVELOPER_GUIDE.md
+++ b/DEVELOPER_GUIDE.md
@@ -64,15 +64,17 @@ If it's the only version of node installed, it will automatically be set to the
 
 #### Install `yarn`
 
-Take a look at the [latest Yarn release](https://github.com/yarnpkg/berry/releases/latest), note the version number, and run:
+OpenSearch Dashboards is set up using yarn, which can be installed through corepack. To install yarn, run:
 
 ```bash
+$ # Update corepack to the latest version
 $ npm i -g corepack
 
-$ corepack prepare yarn@<version> --activate
+$ # Install the correct version of yarn
+$ corepack install
 ```
 
-(See the [Yarn installation documentation](https://yarnpkg.com/getting-started/install) for more information.)
+(See the [corepack documentation](https://github.com/nodejs/corepack#-corepack) for more information.)
 
 ### Fork and clone OpenSearch Dashboards
 
diff --git a/MAINTAINERS.md b/MAINTAINERS.md
index 1deb190bdd19..a7ee5ce2fcdc 100644
--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@@ -20,6 +20,7 @@ This document contains a list of maintainers in this repo. See [opensearch-proje
 | Tao Liu                   | [Flyingliuhub](https://github.com/Flyingliuhub)     | Amazon      |
 | Zilong Xia                | [ZilongX](https://github.com/ZilongX)               | Amazon      |
 | Matt Provost              | [BSFishy](https://github.com/BSFishy)               | Amazon      |
+| Sirazh Gabdullin          | [curq](https://github.com/curq)                     | External contributor |
 
 ## Emeritus
 
diff --git a/README.md b/README.md
index 70bc8200f61c..5bafaf4c7c1a 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ Set up your [OpenSearch Dashboards development environment](ttps://github.com/op
 * [Project Website](https://opensearch.org/)
 * [Downloads](https://opensearch.org/downloads.html)
 * [Documentation](https://opensearch.org/docs/)
-* Need help? See the [communication guide](COMMUNICATION.md) for various options
+* Need help? See the [communication guide](COMMUNICATIONS.md) for various options
 * [Project Principles](https://opensearch.org/#principles)
 * [Developer Guide](DEVELOPER_GUIDE.md)
 * [Contributing to OpenSearch](CONTRIBUTING.md)
@@ -53,4 +53,4 @@ Copyright OpenSearch Contributors. See [NOTICE](NOTICE.txt) for details.
 [codecov-badge]: https://codecov.io/gh/opensearch-project/OpenSearch-Dashboards/branch/main/graphs/badge.svg
 [codecov-link]: https://app.codecov.io/gh/opensearch-project/OpenSearch-Dashboards
 [link-checker-badge]: https://github.com/opensearch-project/OpenSearch-Dashboards/actions/workflows/links_checker.yml/badge.svg
-[link-checker-link]: https://github.com/opensearch-project/OpenSearch-Dashboards/actions/workflows/links_checker.yml
\ No newline at end of file
+[link-checker-link]: https://github.com/opensearch-project/OpenSearch-Dashboards/actions/workflows/links_checker.yml
diff --git a/bwctest.sh b/bwctest.sh
index f85764f9f68b..89030e38c192 100755
--- a/bwctest.sh
+++ b/bwctest.sh
@@ -13,7 +13,7 @@
 
 set -e
 
-DEFAULT_VERSIONS="osd-2.0.0,osd-2.1.0,osd-2.2.0,osd-2.3.0,osd-2.4.0,osd-2.5.0,osd-2.6.0,osd-2.7.0"
+DEFAULT_VERSIONS="osd-2.0.0,osd-2.1.0,osd-2.2.0,osd-2.3.0,osd-2.4.0,osd-2.5.0,osd-2.6.0,osd-2.7.0,osd-2.8.0,osd-2.9.0"
 
 function usage() {
     echo ""
diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
index 73f31233a783..9c6c040433b4 100644
--- a/config/opensearch_dashboards.yml
+++ b/config/opensearch_dashboards.yml
@@ -32,6 +32,12 @@
 # The default application to load.
 #opensearchDashboards.defaultAppId: "home"
 
+# Set the value to true to disable the welcome screen
+#home.disableWelcomeScreen: false
+
+# Set the value to true to disable the new theme introduction modal
+#home.disableNewThemeModal: false
+
 # Setting for an optimized healthcheck that only uses the local OpenSearch node to do Dashboards healthcheck.
 # This settings should be used for large clusters or for clusters with ingest heavy nodes.
 # It allows Dashboards to only healthcheck using the local OpenSearch node rather than fan out requests across all nodes.
@@ -267,4 +273,3 @@
 
 # Set the value of this setting to true to enable plugin augmentation on Dashboard
 # vis_augmenter.pluginAugmentationEnabled: true
-
diff --git a/cypress/test-data/without-security/osd-2.8.0.tar.gz b/cypress/test-data/without-security/osd-2.8.0.tar.gz
new file mode 100644
index 000000000000..b0f95eb5894d
Binary files /dev/null and b/cypress/test-data/without-security/osd-2.8.0.tar.gz differ
diff --git a/cypress/test-data/without-security/osd-2.9.0.tar.gz b/cypress/test-data/without-security/osd-2.9.0.tar.gz
new file mode 100644
index 000000000000..a1a67d05737d
Binary files /dev/null and b/cypress/test-data/without-security/osd-2.9.0.tar.gz differ
diff --git a/package.json b/package.json
index 190da4d3c6c5..1e66bbfbd290 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "bugs": {
     "url": "http://github.com/opensearch-project/OpenSearch-Dashboards/issues"
   },
+  "packageManager": "yarn@1.22.19",
   "opensearchDashboards": {
     "clean": {
       "extraPatterns": [
@@ -40,6 +41,7 @@
   "author": "opensearch-project",
   "scripts": {
     "preinstall": "scripts/use_node ./preinstall_check",
+    "postinstall": "scripts/use_node scripts/postinstall",
     "osd": "scripts/use_node scripts/osd",
     "opensearch": "scripts/use_node scripts/opensearch",
     "test": "grunt test",
@@ -122,7 +124,7 @@
   "dependencies": {
     "@aws-crypto/client-node": "^3.1.1",
     "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/numeral": "^2.5.0",
     "@elastic/request-crypto": "2.0.0",
@@ -138,7 +140,7 @@
     "@hapi/podium": "^4.1.3",
     "@hapi/vision": "^6.1.0",
     "@hapi/wreck": "^17.1.0",
-    "@opensearch-project/opensearch": "^2.2.0",
+    "@opensearch-project/opensearch": "^2.3.1",
     "@osd/ace": "1.0.0",
     "@osd/analytics": "1.0.0",
     "@osd/apm-config-loader": "1.0.0",
@@ -192,6 +194,7 @@
     "json-stringify-safe": "5.0.1",
     "lodash": "^4.17.21",
     "lru-cache": "^4.1.5",
+    "mathjs": "^11.8.2",
     "minimatch": "^3.0.4",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
@@ -218,7 +221,6 @@
     "symbol-observable": "^1.2.0",
     "tar": "^6.1.11",
     "tinygradient": "^1.1.5",
-    "tinymath": "1.2.1",
     "tslib": "^2.0.0",
     "type-detect": "^4.0.8",
     "uuid": "3.3.2",
diff --git a/packages/osd-dev-utils/src/serializers/flat_object_serializer.ts b/packages/osd-dev-utils/src/serializers/flat_object_serializer.ts
new file mode 100644
index 000000000000..e3dec842ad9f
--- /dev/null
+++ b/packages/osd-dev-utils/src/serializers/flat_object_serializer.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const walk = (value: any, path: string[] = [], collector: string[] = []) => {
+  let objValue;
+  switch (Object.prototype.toString.call(value)) {
+    case '[object Map]':
+    case '[object WeakMap]':
+      // Turn into an Object so it can be iterated
+      objValue = Object.fromEntries(value);
+      break;
+
+    case '[object Set]':
+    case '[object WeakSet]':
+      // Turn into an Array so it can be iterated
+      objValue = Array.from(value);
+      break;
+
+    case '[object Object]':
+    case '[object Array]':
+      objValue = value;
+      break;
+
+    case '[object RegExp]':
+    case '[object Function]':
+    case '[object Date]':
+    case '[object Boolean]':
+    case '[object Number]':
+    case '[object Symbol]':
+    case '[object Error]':
+      collector.push(`${path.join('.')} = ${value.toString()}`);
+      break;
+
+    case '[object Null]':
+      collector.push(`${path.join('.')} = null`);
+      break;
+
+    case '[object Undefined]':
+      collector.push(`${path.join('.')} = undefined`);
+      break;
+
+    case '[object String]':
+      collector.push(`${path.join('.')} = ${JSON.stringify(value)}`);
+      break;
+
+    case '[object BigInt]':
+      collector.push(`${path.join('.')} = ${value.toString()}n`);
+      break;
+
+    default:
+      // if it is a TypedArray, turn it into an array
+      if (value instanceof Object.getPrototypeOf(Uint8Array)) {
+        objValue = Array.from(value);
+      }
+  }
+
+  // If objValue is set, it is an Array or Object that can be iterated; else bail.
+  if (!objValue) return collector;
+
+  if (Array.isArray(objValue)) {
+    objValue.forEach((v, i) => {
+      walk(v, [...path, i.toString()], collector);
+    });
+  } else {
+    // eslint-disable-next-line guard-for-in
+    for (const key in objValue) {
+      walk(objValue[key], [...path, key], collector);
+    }
+  }
+
+  return collector;
+};
+
+/**
+ * The serializer flattens objects into dotified key-value pairs, each on a line, and
+ * sorts them to aid in diff-ing.
+ *
+ * Example:
+ * { K: ["a", "b", { X: 1n }], Y: 1}
+ *
+ * Serialized:
+ * K.0 = "a"
+ * K.1 = "b"
+ * K.2.X = 1n
+ * Y = 1
+ */
+export const flatObjectSerializer = {
+  test: (value: any) =>
+    ['[object Object]', '[object Array]'].includes(Object.prototype.toString.call(value)),
+  serialize: (value: any) => walk(value).sort().join('\n'),
+};
diff --git a/packages/osd-dev-utils/src/serializers/index.ts b/packages/osd-dev-utils/src/serializers/index.ts
index 2755a5a79147..e31ef04898bc 100644
--- a/packages/osd-dev-utils/src/serializers/index.ts
+++ b/packages/osd-dev-utils/src/serializers/index.ts
@@ -34,3 +34,4 @@ export * from './recursive_serializer';
 export * from './any_instance_serizlizer';
 export * from './replace_serializer';
 export * from './strip_promises_serizlizer';
+export * from './flat_object_serializer';
diff --git a/packages/osd-opensearch-archiver/package.json b/packages/osd-opensearch-archiver/package.json
index 1c036dc10c50..4246817d4daf 100644
--- a/packages/osd-opensearch-archiver/package.json
+++ b/packages/osd-opensearch-archiver/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@osd/dev-utils": "1.0.0",
-    "@opensearch-project/opensearch": "^2.2.0"
+    "@osd/std": "1.0.0",
+    "@opensearch-project/opensearch": "^2.3.1"
   },
   "devDependencies": {}
 }
diff --git a/packages/osd-opensearch/package.json b/packages/osd-opensearch/package.json
index 44404a9ae5a3..1675b0ef134a 100644
--- a/packages/osd-opensearch/package.json
+++ b/packages/osd-opensearch/package.json
@@ -12,7 +12,7 @@
     "osd:watch": "../../scripts/use_node scripts/build --watch"
   },
   "dependencies": {
-    "@opensearch-project/opensearch": "^2.2.0",
+    "@opensearch-project/opensearch": "^2.3.1",
     "@osd/dev-utils": "1.0.0",
     "abort-controller": "^3.0.0",
     "chalk": "^4.1.0",
diff --git a/packages/osd-optimizer/package.json b/packages/osd-optimizer/package.json
index aa9fae9b0d9f..d1e0edbe59e6 100644
--- a/packages/osd-optimizer/package.json
+++ b/packages/osd-optimizer/package.json
@@ -35,7 +35,6 @@
     "rxjs": "^6.5.5",
     "source-map-support": "^0.5.19",
     "terser-webpack-plugin": "^2.1.2",
-    "tinymath": "1.2.1",
     "watchpack": "^2.1.1",
     "webpack-merge": "^4.2.2"
   },
diff --git a/packages/osd-optimizer/src/worker/webpack.config.ts b/packages/osd-optimizer/src/worker/webpack.config.ts
index 66e726961879..a66ad06de032 100644
--- a/packages/osd-optimizer/src/worker/webpack.config.ts
+++ b/packages/osd-optimizer/src/worker/webpack.config.ts
@@ -235,6 +235,21 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
             },
           },
         },
+        {
+          test: /\.js$/,
+          /* reactflow and some of its dependencies don't have es5 builds
+           * so we need to build from source and transpile for webpack v4
+           */
+          include: /node_modules[\\/]@?reactflow/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              babelrc: false,
+              envName: worker.dist ? 'production' : 'development',
+              presets: [BABEL_PRESET_PATH],
+            },
+          },
+        },
         {
           test: /\.(html|md|txt|tmpl)$/,
           use: {
@@ -248,7 +263,6 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
       extensions: ['.js', '.ts', '.tsx', '.json'],
       mainFields: ['browser', 'main'],
       alias: {
-        tinymath: require.resolve('tinymath/lib/tinymath.es5.js'),
         core_app_image_assets: Path.resolve(worker.repoRoot, 'src/core/public/core_app/images'),
       },
     },
diff --git a/packages/osd-std/README.md b/packages/osd-std/README.md
index 3730735cb5a4..24f888979d25 100644
--- a/packages/osd-std/README.md
+++ b/packages/osd-std/README.md
@@ -1,3 +1,73 @@
 # `@osd/std` — OpenSearch Dashboards standard library
 
-This package is a set of utilities that can be used both on server-side and client-side.
\ No newline at end of file
+This package is a set of utilities that can be used both on server-side and client-side.
+
+## API
+
+#### `assertNever`
+
+Can be used in switch statements to ensure we perform exhaustive checks.
+
+#### `deepFreeze`
+
+Apply `Object.freeze` to a value recursively and convert the return type to `Readonly` variant recursively.
+
+#### `get`
+
+Retrieve the value for the specified path of an object.
+
+#### `getFlattenedObject`
+
+Flatten a deeply nested object to a map of dot-separated paths, pointing to all of its primitive values and arrays.
+
+#### `stringify` and `parse`
+
+Drop-in replacement for `JSON.stringify` and `JSON.parse`, capable of handling long numerals and `BigInt` values.
+
+#### `mapToObject`
+
+Convert a map to an object.
+
+#### `mapValuesOfMap`
+
+Create a new `Map` populated with the results of calling a provided function on every element in the input `Map`.
+
+#### `groupIntoMap`
+
+Group elements of an `Array` into a `Map` based on a provided function.
+
+#### `merge`
+
+Deeply merge two objects, omitting undefined values, and not deeply merging arrays.
+
+#### `pick`
+
+Create a new `Object` of specified keys and their values from an input `Object`.
+
+#### `withTimeout`
+
+Apply a `timeout` duration to a `Promise` before throwing an `Error` with the provided message.
+
+#### `firstValueFrom` and `lastValueFrom`
+
+Get a `Promise` that resolves as soon as the first or last value arrives from an observable.
+
+#### `unset`
+
+Unset a (potentially nested) key from given object.
+
+#### `modifyUrl`
+
+Get an `Object` resulting from applying a provided function to the meaningful parts of a URL.
+
+#### `isRelativeUrl`
+
+Determine if a url is relative.
+
+#### `getUrlOrigin`
+
+Get the origin URL of a provided URL.
+
+#### `validateObject`
+
+Deeply validate that an `Object` does not contain any `__proto__` or `constructor.prototype` keys, or circular references.
\ No newline at end of file
diff --git a/packages/osd-std/src/__snapshots__/json.test.ts.snap b/packages/osd-std/src/__snapshots__/json.test.ts.snap
new file mode 100644
index 000000000000..42854db1dd78
--- /dev/null
+++ b/packages/osd-std/src/__snapshots__/json.test.ts.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`json can apply a replacer and spaces values while stringifying BigInts 1`] = `
+"{
+    \\"\\\\\\": 18014398509481982\\": \\"<![CDATA[[ -18014398509481982, 18014398509481982 ]]]>\\",
+    \\"positive\\": 54043195528445946,
+    \\"negative\\": -54043195528445946,
+    \\"array\\": [
+        -54043195528445946,
+        54043195528445946,
+        [
+            \\"<![CDATA[<empty>]]>\\"
+        ]
+    ],
+    \\"number\\": \\"5d9d89cc6b13\\"
+}"
+`;
+
+exports[`json can handle BigInt values while stringifying 1`] = `"{\\"\\\\\\": 18014398509481982\\":\\"[ -18014398509481982, 18014398509481982 ]\\",\\"positive\\":18014398509481982,\\"negative\\":-18014398509481982,\\"array\\":[-18014398509481982,18014398509481982],\\"number\\":102931203123987}"`;
diff --git a/packages/osd-std/src/index.ts b/packages/osd-std/src/index.ts
index 0b3c65d8cc04..170c819a2b0a 100644
--- a/packages/osd-std/src/index.ts
+++ b/packages/osd-std/src/index.ts
@@ -42,3 +42,4 @@ export { unset } from './unset';
 export { getFlattenedObject } from './get_flattened_object';
 export { validateObject } from './validate_object';
 export * from './rxjs_7';
+export { parse, stringify } from './json';
diff --git a/packages/osd-std/src/json.test.ts b/packages/osd-std/src/json.test.ts
new file mode 100644
index 000000000000..33abd71d91d2
--- /dev/null
+++ b/packages/osd-std/src/json.test.ts
@@ -0,0 +1,176 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { stringify, parse } from './json';
+
+describe('json', () => {
+  it('can parse', () => {
+    const input = {
+      a: [
+        { A: 1 },
+        { B: '2' },
+        { C: [1, 2, 3, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'] },
+      ],
+      b: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      c: {
+        i: {},
+        ii: [],
+        iii: '',
+        iv: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      },
+    };
+    const result = parse(JSON.stringify(input));
+    expect(result).toEqual(input);
+  });
+
+  it('can stringify', () => {
+    const input = {
+      a: [
+        { A: 1 },
+        { B: '2' },
+        { C: [1, 2, 3, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'] },
+      ],
+      b: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      c: {
+        i: {},
+        ii: [],
+        iii: '',
+        iv: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      },
+    };
+    const result = stringify(input);
+    expect(result).toEqual(JSON.stringify(input));
+  });
+
+  it('can apply a reviver while parsing', () => {
+    const input = {
+      A: 255,
+      B: {
+        i: [[]],
+        ii: 'Lorem ipsum',
+        iii: {},
+        rand: Math.random(),
+      },
+    };
+    const text = JSON.stringify(input);
+    function reviver(this: any, key: string, val: any) {
+      if (Array.isArray(val) && toString.call(this) === '[object Object]') this._hasArrays = true;
+      else if (typeof val === 'string') val = `<![CDATA[${val}]]>`;
+      else if (typeof val === 'number') val = val.toString(16);
+      else if (toString.call(this) === '[object Object]' && key === 'rand' && val === input.B.rand)
+        this._found = true;
+      return val;
+    }
+
+    expect(parse(text, reviver)).toEqual(JSON.parse(text, reviver));
+  });
+
+  it('can apply a replacer and spaces while stringifying', () => {
+    const input = {
+      A: 255,
+      B: {
+        i: [[]],
+        ii: 'Lorem ipsum',
+        iii: {},
+        rand: Math.random(),
+      },
+    };
+
+    function replacer(this: any, key: string, val: any) {
+      if (Array.isArray(val) && val.length === 0) val.push('<empty>');
+      else if (typeof val === 'string') val = `<![CDATA[${val}]]>`;
+      else if (typeof val === 'number') val = val.toString(16);
+      else if (toString.call(this) === '[object Object]' && key === 'rand' && val === input.B.rand)
+        val = 1;
+      return val;
+    }
+
+    expect(stringify(input, replacer, 2)).toEqual(JSON.stringify(input, replacer, 2));
+  });
+
+  it('can handle long numerals while parsing', () => {
+    const longPositive = BigInt(Number.MAX_SAFE_INTEGER) * 2n;
+    const longNegative = BigInt(Number.MIN_SAFE_INTEGER) * 2n;
+    const text =
+      `{` +
+      // The space before and after the values, and the lack of spaces before comma are intentional
+      `"\\":${longPositive}": "[ ${longNegative.toString()}, ${longPositive.toString()} ]", ` +
+      `"positive": ${longPositive.toString()}, ` +
+      `"array": [ ${longNegative.toString()}, ${longPositive.toString()} ], ` +
+      `"negative": ${longNegative.toString()},` +
+      `"number": 102931203123987` +
+      `}`;
+
+    const result = parse(text);
+    expect(result.positive).toBe(longPositive);
+    expect(result.negative).toBe(longNegative);
+    expect(result.array).toEqual([longNegative, longPositive]);
+    expect(result['":' + longPositive]).toBe(
+      `[ ${longNegative.toString()}, ${longPositive.toString()} ]`
+    );
+    expect(result.number).toBe(102931203123987);
+  });
+
+  it('can handle BigInt values while stringifying', () => {
+    const longPositive = BigInt(Number.MAX_SAFE_INTEGER) * 2n;
+    const longNegative = BigInt(Number.MIN_SAFE_INTEGER) * 2n;
+    const input = {
+      [`": ${longPositive}`]: `[ ${longNegative.toString()}, ${longPositive.toString()} ]`,
+      positive: longPositive,
+      negative: longNegative,
+      array: [longNegative, longPositive],
+      number: 102931203123987,
+    };
+
+    expect(stringify(input)).toMatchSnapshot();
+  });
+
+  it('can apply a reviver on long numerals while parsing', () => {
+    const longPositive = BigInt(Number.MAX_SAFE_INTEGER) * 2n;
+    const longNegative = BigInt(Number.MIN_SAFE_INTEGER) * 2n;
+    const text =
+      `{` +
+      // The space before and after the values, and the lack of spaces before comma are intentional
+      `"\\":${longPositive}": "[ ${longNegative.toString()}, ${longPositive.toString()} ]", ` +
+      `"positive": ${longPositive.toString()}, ` +
+      `"array": [ ${longNegative.toString()}, ${longPositive.toString()} ], ` +
+      `"negative": ${longNegative.toString()},` +
+      `"number": 102931203123987` +
+      `}`;
+
+    const reviver = (key: string, val: any) => (typeof val === 'bigint' ? val * 3n : val);
+
+    const result = parse(text, reviver);
+    expect(result.positive).toBe(longPositive * 3n);
+    expect(result.negative).toBe(longNegative * 3n);
+    expect(result.array).toEqual([longNegative * 3n, longPositive * 3n]);
+    expect(result['":' + longPositive]).toBe(
+      `[ ${longNegative.toString()}, ${longPositive.toString()} ]`
+    );
+    expect(result.number).toBe(102931203123987);
+  });
+
+  it('can apply a replacer and spaces values while stringifying BigInts', () => {
+    const longPositive = BigInt(Number.MAX_SAFE_INTEGER) * 2n;
+    const longNegative = BigInt(Number.MIN_SAFE_INTEGER) * 2n;
+    const input = {
+      [`": ${longPositive}`]: `[ ${longNegative.toString()}, ${longPositive.toString()} ]`,
+      positive: longPositive,
+      negative: longNegative,
+      array: [longNegative, longPositive, []],
+      number: 102931203123987,
+    };
+
+    function replacer(this: any, key: string, val: any) {
+      if (typeof val === 'bigint') val = val * 3n;
+      else if (Array.isArray(val) && val.length === 0) val.push('<empty>');
+      else if (typeof val === 'string') val = `<![CDATA[${val}]]>`;
+      else if (typeof val === 'number') val = val.toString(16);
+      return val;
+    }
+
+    expect(stringify(input, replacer, 4)).toMatchSnapshot();
+  });
+});
diff --git a/packages/osd-std/src/json.ts b/packages/osd-std/src/json.ts
new file mode 100644
index 000000000000..7c619dcd1656
--- /dev/null
+++ b/packages/osd-std/src/json.ts
@@ -0,0 +1,321 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* In JavaScript, a `Number` is a 64-bit floating-point value which can store 16 digits. However, the
+ * serializer and deserializer will need to cater to numeric values generated by other languages which
+ * can have up to 19 digits. Native JSON parser and stringifier, incapable of handling the extra
+ * digits, corrupt the values, making them unusable.
+ *
+ * To work around this limitation, the deserializer converts long sequences of digits into strings and
+ * marks them before applying the parser. During the parsing, string values that begin with the mark
+ * are converted to `BigInt` values.
+ * Similarly, during stringification, the serializer converts `BigInt` values to marked strings and
+ * when done, it replaces them with plain numerals.
+ *
+ * `Number.MAX_SAFE_INTEGER`, 9,007,199,254,740,991, is the largest number that the native methods can
+ * parse and stringify, and any numeral greater than that would need to be translated using the
+ * workaround; all 17-digits or longer and only tail-end of the 16-digits need translation. It would
+ * be unfair to all the 16-digit numbers if the translation applied to `\d{16,}` only to cover the
+ * less than 10%. Hence, a RegExp is created to only match numerals too long to be a number.
+ *
+ * To make the explanation simpler, let's assume that MAX_SAFE_INTEGER is 8921 which has 4 digits.
+ * Starting from the right, we take each digit onwards, `[<start>-9]`:
+ *    1) 7922 - 7929: 792[2-9]\d{0}
+ *    2) 7930 - 7999: 79[3-9]\d{1}
+ *    9) 9 + 1 = 10 which results in a rollover; no need to do anything.
+ *    8) 9000 - 9999: [9-9]\d{3}
+ *    Finally we add anything 5 digits or longer: `\d{5,}
+ *
+ * Note: A better solution would use AST but considering its performance penalty, RegExp is the next
+ * best thing.
+ */
+const maxIntAsString = String(Number.MAX_SAFE_INTEGER);
+const maxIntLength = maxIntAsString.length;
+// Sub-patterns for each digit
+const longNumeralMatcherTokens = [`\\d{${maxIntAsString.length + 1},}`];
+for (let i = 0; i < maxIntLength; i++) {
+  if (maxIntAsString[i] !== '9') {
+    longNumeralMatcherTokens.push(
+      maxIntAsString.substring(0, i) +
+        `[${parseInt(maxIntAsString[i], 10) + 1}-9]` +
+        `\\d{${maxIntLength - i - 1}}`
+    );
+  }
+}
+
+/* The matcher that looks for `": <numerals>, ...}` and `[..., <numeral>, ...]`
+ *
+ * The pattern starts by looking for `":` not immediately preceded by a `\`. That should be
+ * followed by any of the numeric sub-patterns. A comma, end of an array, end of an object, or
+ * the end of the input are the only acceptable elements after it.
+ *
+ * Note: This RegExp can result in false-positive hits on the likes of `{"key": "[ <numeral> ]"}` and
+ * those are cleaned out during parsing.
+ */
+const longNumeralMatcher = new RegExp(
+  `((?:\\[|,|(?<!\\\\)"\\s*:)\\s*)(-?(?:${longNumeralMatcherTokens.join('|')}))(\\s*)(?=,|}|]|$)`,
+  'g'
+);
+
+/* The characters with a highly unlikely chance of occurrence in strings, alone or in combination.
+ * These will be combined in various orders and lengths, to find a specific "marker" that is not
+ * present in the JSON string.
+ */
+const markerChars = ['෴', '߷', '֍'];
+
+/* Generates an array of all combinations of `markerChars` with the requested length. */
+const getMarkerChoices = (length: number): string[] => {
+  // coverage:ignore-line
+  if (!length || length < 0) return [];
+  const choices = [];
+  const arr = markerChars;
+  const arrLength = arr.length;
+  const temp = Array(length);
+
+  (function fill(pos, start) {
+    if (pos === length) return choices.push(temp.join(''));
+
+    for (let i = start; i < arrLength; i++) {
+      temp[pos] = arr[i];
+      fill(pos + 1, i);
+    }
+  })(0, 0);
+
+  return choices;
+};
+
+/* Experiments with different combinations of various lengths, until one is found to not be in
+ * the input string.
+ */
+const getMarker = (text: string): { marker: string; length: number } => {
+  let marker;
+  let length = 0;
+  do {
+    length++;
+    getMarkerChoices(length).some((markerChoice) => {
+      if (text.indexOf(markerChoice) === -1) {
+        marker = markerChoice;
+        return true;
+      }
+    });
+  } while (!marker);
+
+  return {
+    marker,
+    length,
+  };
+};
+
+const parseStringWithLongNumerals = (
+  text: string,
+  reviver?: ((this: any, key: string, value: any) => any) | null
+): any => {
+  const { marker, length } = getMarker(text);
+
+  let hadException;
+  let obj;
+  let markedJSON = text.replace(longNumeralMatcher, `$1"${marker}$2"$3`);
+  const markedValueMatcher = new RegExp(`^${marker}-?\\d+$`);
+
+  /* Convert marked values to BigInt values.
+   * The `startsWith` is purely for performance, to avoid running `test` if not needed.
+   */
+  const convertMarkedValues = (val: any) =>
+    typeof val === 'string' && val.startsWith(marker) && markedValueMatcher.test(val)
+      ? BigInt(val.substring(length))
+      : val;
+
+  /* For better performance, instead of testing for existence of `reviver` on each value, two almost
+   * identical functions are used.
+   */
+  const parseMarkedText = reviver
+    ? (markedText: string) =>
+        JSON.parse(markedText, function (key, val) {
+          return reviver.call(this, key, convertMarkedValues(val));
+        })
+    : (markedText: string) => JSON.parse(markedText, (key, val) => convertMarkedValues(val));
+
+  /* RegExp cannot replace AST and the process of marking adds quotes. So, any false-positive hit
+   * will make the JSON string unparseable.
+   *
+   * To find those instances, we try to parse and watch for the location of any errors. If an error
+   * is caused by the marking, we remove that single marking and try again.
+   */
+  do {
+    try {
+      hadException = false;
+      obj = parseMarkedText(markedJSON);
+    } catch (e) {
+      hadException = true;
+      /* There are two types of exception objects that can be raised:
+       *  1) a proper object with lineNumber and columnNumber which we can use
+       *  2) a textual message with the position that we need to parse
+       */
+      let { lineNumber, columnNumber } = e;
+      if (!lineNumber || !columnNumber) {
+        const match = e?.message?.match?.(/^Unexpected token.*at position (\d+)$/);
+        if (match) {
+          lineNumber = 1;
+          // The position is zero-indexed; adding 1 to normalize it for the -2 that comes later
+          columnNumber = parseInt(match[1], 10) + 1;
+        }
+      }
+
+      if (lineNumber < 1 || columnNumber < 2) {
+        /* The problem is not with this replacement.
+         * Note: This will never happen because the outer parse would have already thrown.
+         */
+        // coverage:ignore-line
+        throw e;
+      }
+
+      /* We need to skip e.lineNumber - 1 number of `\n` occurrences.
+       * Then, we need to go to e.columnNumber - 2 to look for `"<mark>\d+"`; we need to `-1` to
+       * account for the quote but an additional `-1` is needed because columnNumber starts from 1.
+       */
+      const re = new RegExp(
+        `^((?:.*\\n){${lineNumber - 1}}[^\\n]{${columnNumber - 2}})"${marker}(-?\\d+)"`
+      );
+      if (!re.test(markedJSON)) {
+        /* The exception is not caused by adding the marker.
+         * Note: This will never happen because the outer parse would have already thrown.
+         */
+        // coverage:ignore-line
+        throw e;
+      }
+
+      // We have found a bad replacement; let's remove it.
+      markedJSON = markedJSON.replace(re, '$1$2');
+    }
+  } while (hadException);
+
+  return obj;
+};
+
+const stringifyObjectWithBigInts = (
+  obj: any,
+  candidate: string,
+  replacer?: ((this: any, key: string, value: any) => any) | null,
+  space?: string | number
+): string => {
+  const { marker } = getMarker(candidate);
+
+  /* The matcher that looks for "<marker><numerals>"
+   * Because we have made sure that `marker` was never present in the original object, we can
+   * carelessly assume every "<marker><numerals>" is due to our marking.
+   */
+  const markedBigIntMatcher = new RegExp(`"${marker}(-?\\d+)"`, 'g');
+
+  /* Convert BigInt values to a string and mark them.
+   * Can't be bothered with Number values outside the safe range because they are already corrupted.
+   *
+   * For better performance, instead of testing for existence of `replacer` on each value, two almost
+   * identical functions are used.
+   */
+  const addMarkerToBigInts = replacer
+    ? function (this: any, key: string, val: any) {
+        // replacer is called before marking because marking changes the type
+        const newVal = replacer.call(this, key, val);
+        return typeof newVal === 'bigint' ? `${marker}${newVal.toString()}` : newVal;
+      }
+    : (key: string, val: any) => (typeof val === 'bigint' ? `${marker}${val.toString()}` : val);
+
+  return (
+    JSON.stringify(obj, addMarkerToBigInts, space)
+      // Replace marked substrings with just the numerals
+      .replace(markedBigIntMatcher, '$1')
+  );
+};
+
+export const stringify = (
+  obj: any,
+  replacer?: ((this: any, key: string, value: any) => any) | null,
+  space?: string | number
+): string => {
+  let text;
+  let numeralsAreNumbers = true;
+  /* For better performance, instead of testing for existence of `replacer` on each value, two almost
+   * identical functions are used.
+   *
+   * Note: Converting BigInt values to numbers, `Number()` is much faster that `parseInt()`. Since we
+   * check the `type`, it is safe to just use `Number()`.
+   */
+  const checkForBigInts = replacer
+    ? function (this: any, key: string, val: any) {
+        if (typeof val === 'bigint') {
+          numeralsAreNumbers = false;
+          return replacer.call(this, key, Number(val));
+        }
+        return replacer.call(this, key, val);
+      }
+    : (key: string, val: any) => {
+        if (typeof val === 'bigint') {
+          numeralsAreNumbers = false;
+          return Number(val);
+        }
+        return val;
+      };
+
+  /* While this is a check for possibly having BigInt values, if none were found, the results is
+   * sufficient to fulfill the purpose of the function. However, if BigInt values were found, we will
+   * use `stringifyObjectWithBigInts` to do this again.
+   *
+   * The goal was not to punish every object that doesn't have a BigInt with the more expensive
+   * `stringifyObjectWithBigInts`. Those with BigInt values are also not unduly burdened because we
+   * still need it in its string form to find a suitable marker.
+   */
+  text = JSON.stringify(obj, checkForBigInts, space);
+
+  if (!numeralsAreNumbers) {
+    text = stringifyObjectWithBigInts(obj, text, replacer, space);
+  }
+
+  return text;
+};
+
+export const parse = (
+  text: string,
+  reviver?: ((this: any, key: string, value: any) => any) | null
+): any => {
+  let obj;
+  let numeralsAreNumbers = true;
+  const inspectValueForLargeNumerals = (val: any) => {
+    if (
+      numeralsAreNumbers &&
+      typeof val === 'number' &&
+      (val < Number.MAX_SAFE_INTEGER || val > Number.MAX_SAFE_INTEGER)
+    ) {
+      numeralsAreNumbers = false;
+    }
+
+    // This function didn't have to have a return value but having it makes the rest cleaner
+    return val;
+  };
+
+  /* For better performance, instead of testing for existence of `reviver` on each value, two almost
+   * identical functions are used.
+   */
+  const checkForLargeNumerals = reviver
+    ? function (this: any, key: string, val: any) {
+        return inspectValueForLargeNumerals(reviver.call(this, key, val));
+      }
+    : (key: string, val: any) => inspectValueForLargeNumerals(val);
+
+  /* While this is a check for possibly having BigInt values, if none were found, the results is
+   * sufficient to fulfill the purpose of the function. However, if BigInt values were found, we will
+   * use `stringifyObjectWithBigInts` to do this again.
+   *
+   * The goal was not to punish every object that doesn't have a BigInt with the more expensive
+   * `stringifyObjectWithBigInts`. Those with BigInt values are also not unduly burdened because we
+   * still need it in its string form to find a suitable marker.
+   */
+  obj = JSON.parse(text, checkForLargeNumerals);
+
+  if (!numeralsAreNumbers) {
+    obj = parseStringWithLongNumerals(text, reviver);
+  }
+
+  return obj;
+};
diff --git a/packages/osd-stylelint-config/.stylelintrc.js b/packages/osd-stylelint-config/.stylelintrc.js
index aa06f1a72f08..4f780d112e43 100644
--- a/packages/osd-stylelint-config/.stylelintrc.js
+++ b/packages/osd-stylelint-config/.stylelintrc.js
@@ -15,26 +15,34 @@ module.exports = {
   ],
 
   rules: {
-    '@osd/stylelint/no_restricted_properties': [
+    '@osd/stylelint/no_modifying_global_selectors': [
       {
-        config: "./../../../osd-stylelint-config/config/restricted_properties.json"
+        config: "./../../../osd-stylelint-config/config/global_selectors.json"
       },
       {
         severity: "error"
       }
     ],
-    '@osd/stylelint/no_modifying_global_selectors': [
+    '@osd/stylelint/no_custom_colors': [
       {
-        config: "./../../../osd-stylelint-config/config/global_selectors.json"
+        config: './../../../osd-stylelint-config/config/colors.json'
+      },
+    ],
+    '@osd/stylelint/no_restricted_properties': [
+      {
+        config: "./../../../osd-stylelint-config/config/restricted_properties.json"
       },
       {
         severity: "error"
       }
     ],
-    '@osd/stylelint/no_custom_colors': [
+    '@osd/stylelint/no_restricted_values': [
       {
-        config: './../../../osd-stylelint-config/config/colors.json'
+        config: "./../../../osd-stylelint-config/config/restricted_values.json"
       },
-    ]
+      {
+        severity: "error"
+      }
+    ],
   }
 }
diff --git a/packages/osd-stylelint-config/config/global_selectors.json b/packages/osd-stylelint-config/config/global_selectors.json
index 19451066878c..760717c8dab5 100644
--- a/packages/osd-stylelint-config/config/global_selectors.json
+++ b/packages/osd-stylelint-config/config/global_selectors.json
@@ -23,8 +23,9 @@
       "src/plugins/vis_builder/public/application/components/searchable_dropdown.scss",
       "src/plugins/vis_builder/public/application/components/side_nav.scss",
       "packages/osd-ui-framework/src/components/button/button_group/_button_group.scss",
-      "src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss",
-      "src/plugins/discover/public/application/angular/doc_table/components/table_row/_open.scss"
+      "src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.scss",
+      "src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_open.scss",
+      "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss"
     ]
   }
 }
diff --git a/packages/osd-stylelint-config/config/restricted_properties.json b/packages/osd-stylelint-config/config/restricted_properties.json
index ff79c6fed46b..d229764c8d88 100644
--- a/packages/osd-stylelint-config/config/restricted_properties.json
+++ b/packages/osd-stylelint-config/config/restricted_properties.json
@@ -1,7 +1,8 @@
 {
   "font-family": {
+    "explanation": "All \"font-family\" styles should be inherited from OUI themes and components. Remove the rule.",
     "approved": [
-      "src/plugins/discover/public/application/_discover.scss",
+      "src/plugins/discover_legacy/public/application/_discover.scss",
       "src/plugins/maps_legacy/public/map/_leaflet_overrides.scss",
       "src/plugins/maps_legacy/public/map/_legend.scss",
       "src/plugins/opensearch_dashboards_legacy/public/font_awesome/font_awesome.scss",
@@ -11,7 +12,8 @@
       "src/plugins/data/public/ui/typeahead/_suggestion.scss",
       "src/plugins/vis_type_timeseries/public/application/components/_error.scss",
       "packages/osd-ui-framework/src/components/form/check_box/_check_box.scss",
-      "src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss"
+      "src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss",
+      "src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/packages/osd-stylelint-config/config/restricted_values.json b/packages/osd-stylelint-config/config/restricted_values.json
new file mode 100644
index 000000000000..2d925bd67e2d
--- /dev/null
+++ b/packages/osd-stylelint-config/config/restricted_values.json
@@ -0,0 +1,25 @@
+{
+  "/#[a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?/": {
+    "explanation": "All colors should be inherited from the OUI theme, not hard-coded. Either remove the custom color rule or use OUI SASS variables instead.",
+    "approved": [
+      "src/core/public/_variables.scss",
+      "src/core/public/styles/_ace_overrides.scss",
+      "packages/osd-ui-framework/src/components/tool_bar/_tool_bar_search.scss",
+      "packages/osd-ui-framework/src/components/view/_index.scss",
+      "src/core/public/chrome/ui/header/header_breadcrumbs.scss",
+      "src/plugins/vis_type_timeseries/public/application/components/vis_types/_vis_types.scss",
+      "src/plugins/vis_type_vislib/public/vislib/visualizations/point_series/_labels.scss"
+    ]
+  },
+  "/(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\\([^)]*\\)/": {
+    "explanation": "All colors should be inherited from the OUI theme, not hard-coded. Either remove the custom color rule or use OUI SASS variables instead.",
+    "approved": [
+      "src/core/public/styles/_ace_overrides.scss",
+      "src/plugins/opensearch_dashboards_react/public/markdown/_markdown.scss",
+      "packages/osd-ui-framework/src/components/info_panel/_info_panel.scss",
+      "packages/osd-ui-framework/src/components/local_nav/_local_menu.scss",
+      "packages/osd-ui-framework/src/global_styling/mixins/_shadow.scss",
+      "packages/osd-ui-framework/src/global_styling/variables/_colors.scss"
+    ]
+  }
+}
diff --git a/packages/osd-stylelint-plugin-stylelint/src/rules/index.ts b/packages/osd-stylelint-plugin-stylelint/src/rules/index.ts
index 6dc26fe93f26..21c06b81e9e7 100644
--- a/packages/osd-stylelint-plugin-stylelint/src/rules/index.ts
+++ b/packages/osd-stylelint-plugin-stylelint/src/rules/index.ts
@@ -9,13 +9,15 @@
  * GitHub history for details.
  */
 
-import noRestrictedProperties from './no_restricted_properties';
 import noCustomColors from './no_custom_colors';
 import noModifyingGlobalSelectors from './no_modifying_global_selectors';
+import noRestrictedProperties from './no_restricted_properties';
+import noRestrictedValues from './no_restricted_values';
 
 // eslint-disable-next-line import/no-default-export
 export default {
   no_custom_colors: noCustomColors,
   no_modifying_global_selectors: noModifyingGlobalSelectors,
   no_restricted_properties: noRestrictedProperties,
+  no_restricted_values: noRestrictedValues,
 };
diff --git a/packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts b/packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts
index d58e7819688f..b4bf6ac7da15 100644
--- a/packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts
+++ b/packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts
@@ -79,7 +79,10 @@ const ruleFunction: stylelint.Rule = (
       }
 
       reportInfo.message = messages.expected(
-        getNotCompliantMessage(`Modifying global selector "${rule.selector}" not allowed.`)
+        getNotCompliantMessage(
+          `Modifying the global selector "${rule.selector}" is not allowed.`,
+          selectorRule.explanation
+        )
       );
       report(reportInfo);
     });
diff --git a/packages/osd-stylelint-plugin-stylelint/src/rules/no_restricted_properties/index.ts b/packages/osd-stylelint-plugin-stylelint/src/rules/no_restricted_properties/index.ts
index 9da587545b1d..dbe20baac0ae 100644
--- a/packages/osd-stylelint-plugin-stylelint/src/rules/no_restricted_properties/index.ts
+++ b/packages/osd-stylelint-plugin-stylelint/src/rules/no_restricted_properties/index.ts
@@ -73,7 +73,10 @@ const ruleFunction: stylelint.Rule = (
       }
 
       reportInfo.message = messages.expected(
-        getNotCompliantMessage(`Usage of property "${decl.prop}" is not allowed.`)
+        getNotCompliantMessage(
+          `Specifying the "${decl.prop}" property is not allowed.`,
+          propertyRule.explanation
+        )
       );
       report(reportInfo);
     });
diff --git a/packages/osd-stylelint-plugin-stylelint/src/rules/no_restricted_values/index.ts b/packages/osd-stylelint-plugin-stylelint/src/rules/no_restricted_values/index.ts
new file mode 100644
index 000000000000..ae99eacfba13
--- /dev/null
+++ b/packages/osd-stylelint-plugin-stylelint/src/rules/no_restricted_values/index.ts
@@ -0,0 +1,90 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import stylelint from 'stylelint';
+import { NAMESPACE } from '../..';
+import {
+  getNotCompliantMessage,
+  getRuleFromConfig,
+  getRulesFromConfig,
+  isValidOptions,
+  FileBasedConfig,
+} from '../../utils';
+
+const { ruleMessages, report } = stylelint.utils;
+
+const ruleName = 'no_restricted_values';
+const messages = ruleMessages(ruleName, {
+  expected: (message) => `${message}`,
+});
+
+const ruleFunction: stylelint.Rule = (
+  primaryOption: Record<string, any>,
+  secondaryOptionObject: Record<string, any>,
+  context
+) => {
+  return (postcssRoot, postcssResult) => {
+    const validOptions = isValidOptions(postcssResult, ruleName, primaryOption);
+    if (!validOptions) {
+      return;
+    }
+
+    const rules: FileBasedConfig = getRulesFromConfig(primaryOption.config);
+
+    const isAutoFixing = Boolean(context.fix);
+
+    postcssRoot.walkDecls((decl) => {
+      const valueRule = getRuleFromConfig(rules, decl.value);
+      if (!valueRule) {
+        return;
+      }
+
+      let shouldReport = false;
+
+      const file = postcssRoot.source?.input.file;
+      if (!file) {
+        return;
+      }
+
+      const approvedFiles = valueRule.approved;
+
+      const reportInfo = {
+        ruleName: `${NAMESPACE}/${ruleName}`,
+        result: postcssResult,
+        node: decl,
+        message: '',
+      };
+
+      if (approvedFiles) {
+        shouldReport = !approvedFiles.some((inspectedFile) => {
+          return file.includes(inspectedFile);
+        });
+      }
+
+      if (shouldReport && isAutoFixing) {
+        decl.remove();
+        return;
+      }
+
+      if (!shouldReport) {
+        return;
+      }
+
+      reportInfo.message = messages.expected(
+        getNotCompliantMessage(
+          `Using the value "${decl.value}" is not allowed.`,
+          valueRule.explanation
+        )
+      );
+      report(reportInfo);
+    });
+  };
+};
+
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+
+// eslint-disable-next-line import/no-default-export
+export default ruleFunction;
diff --git a/packages/osd-stylelint-plugin-stylelint/src/utils/get_message.ts b/packages/osd-stylelint-plugin-stylelint/src/utils/get_message.ts
index 65e236aaffad..b966f775e4d6 100644
--- a/packages/osd-stylelint-plugin-stylelint/src/utils/get_message.ts
+++ b/packages/osd-stylelint-plugin-stylelint/src/utils/get_message.ts
@@ -15,4 +15,10 @@ export const getUntrackedMessage = (nodeInfo: { selector: string; prop: string;
 export const getTrackedMessage = (nodeInfo: { selector: string; prop: string; value: string }) =>
   `Tracked but missing approval: "${nodeInfo.selector}.${nodeInfo.prop}: ${nodeInfo.value}"`;
 
-export const getNotCompliantMessage = (message: string) => `${message}`;
+export const getNotCompliantMessage = (message: string, explanation?: string) => {
+  if (explanation) {
+    return `${message} ${explanation}`;
+  }
+
+  return message;
+};
diff --git a/packages/osd-stylelint-plugin-stylelint/src/utils/get_rules_from_config.ts b/packages/osd-stylelint-plugin-stylelint/src/utils/get_rules_from_config.ts
index cc97d13a030c..5467915cbabb 100644
--- a/packages/osd-stylelint-plugin-stylelint/src/utils/get_rules_from_config.ts
+++ b/packages/osd-stylelint-plugin-stylelint/src/utils/get_rules_from_config.ts
@@ -13,7 +13,7 @@ import path from 'path';
 import { readFileSync } from 'fs';
 import { matches } from './matches';
 
-export type FileBasedConfig = Record<string, { approved?: string[] }>;
+export type FileBasedConfig = Record<string, { approved?: string[]; explanation?: string }>;
 export type ValueBasedConfig = Record<
   string,
   Record<string, Array<{ approved?: string; rejected?: string[] }>>
diff --git a/packages/osd-ui-framework/package.json b/packages/osd-ui-framework/package.json
index 8375cc3b8295..156ccbbdfcd6 100644
--- a/packages/osd-ui-framework/package.json
+++ b/packages/osd-ui-framework/package.json
@@ -23,7 +23,7 @@
     "enzyme-adapter-react-16": "^1.9.1"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
     "@osd/babel-preset": "1.0.0",
     "@osd/optimizer": "1.0.0",
     "comment-stripper": "^0.0.4",
diff --git a/packages/osd-ui-shared-deps/package.json b/packages/osd-ui-shared-deps/package.json
index 3e73fa0c8575..fca9abd7c537 100644
--- a/packages/osd-ui-shared-deps/package.json
+++ b/packages/osd-ui-shared-deps/package.json
@@ -10,8 +10,9 @@
   },
   "dependencies": {
     "@elastic/charts": "31.1.0",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
     "@elastic/numeral": "^2.5.0",
+    "@opensearch/datemath": "5.0.3",
     "@osd/i18n": "1.0.0",
     "@osd/monaco": "1.0.0",
     "abortcontroller-polyfill": "^1.4.0",
diff --git a/packages/osd-ui-shared-deps/theme.ts b/packages/osd-ui-shared-deps/theme.ts
index 45a4f68cfd4b..c803a5e37ef7 100644
--- a/packages/osd-ui-shared-deps/theme.ts
+++ b/packages/osd-ui-shared-deps/theme.ts
@@ -28,6 +28,7 @@
  * under the License.
  */
 
+// ToDo: Use `THEME_SOURCES` from `src/core/server/rendering/views/theme` to generate the logic below.
 import LightTheme from '@elastic/eui/dist/eui_theme_light.json';
 
 const globals: any = typeof window === 'undefined' ? {} : window;
@@ -36,7 +37,7 @@ export type Theme = typeof LightTheme;
 
 // in the OpenSearch Dashboards app we can rely on this global being defined, but in
 // some cases (like jest) the global is undefined
-export const tag: string = globals.__osdThemeTag__ || 'v7light';
+export const tag: string = globals.__osdThemeTag__ || 'v8light';
 export const version = tag.startsWith('v7') ? 7 : 8;
 export const darkMode = tag.endsWith('dark');
 
diff --git a/release-notes/opensearch-dashboards.release-notes-1.3.13.md b/release-notes/opensearch-dashboards.release-notes-1.3.13.md
new file mode 100644
index 000000000000..8ad93c19ba22
--- /dev/null
+++ b/release-notes/opensearch-dashboards.release-notes-1.3.13.md
@@ -0,0 +1,24 @@
+# Version 1.3.13 Release Notes
+
+### 🛡 Security
+
+- [CVE-2019-11358] Bump version of `tinygradient` from `0.4.3` to `1.1.5` ([#4571](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4751))
+- [CVE-2023-26136] Bump `word-wrap` from `1.2.3` to `1.2.4` ([#5002](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5002))
+- [CVE-2022-21670] Bump `markdown-it` from `10.0.0` to `12.3.2` ([#5016](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5016))
+- [CVE-2022-33987] Partially fix security issues for `got` by bumping `@elastic/makelogs` from `6.0.0` to `6.1.1` and updating yarn.lock ([#5006](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5006))
+- Bump `yo` from `2.0.6` to `3.1.1` ([#5005]( https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5005))
+- [CVE-2023-0842] Bump `xml2js` from `0.4.22` to `0.6.2` ([#5024](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5024))
+
+### 📈 Features/Enhancements
+
+### 🐛 Bug Fixes
+
+### 🚞 Infrastructure
+
+### 📝 Documentation
+
+### 🛠 Maintenance
+
+- [Version] Increment version to 1.3.13 ([#4721](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4721))
+- [Chore] Add company.net to exclusion list in linkchecker ([#4704](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4704))
+- [Chore] Exclude checking dead link in linkchecker ([#4868](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4868))
diff --git a/release-notes/opensearch-dashboards.release-notes-2.10.0.md b/release-notes/opensearch-dashboards.release-notes-2.10.0.md
new file mode 100644
index 000000000000..6cdfffdba513
--- /dev/null
+++ b/release-notes/opensearch-dashboards.release-notes-2.10.0.md
@@ -0,0 +1,84 @@
+## Version 2.10.0 Release Notes
+
+### 🛡 Security
+
+- Bump word-wrap from 1.2.3 to 1.2.4 ([#4589](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4589))
+- Bump version of tinygradient from 0.4.3 to 1.1.5 ([#4742](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4742))
+- Bump lmdb from 2.8.0 to 2.8.5 ([#4804](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4804))
+- Alias and bump mocha ([#4874](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4874))
+- Remove examples and other unwanted artifacts from installed dependencies ([#4896](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4896))
+
+### 📈 Features/Enhancements
+
+- [Vis colors] Update legacy mapped colors in charts plugin to use ouiPaletteColorBlind() ([#4398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4398))
+- [Saved Objects Management] Add new or remove extra tags and styles ([#4069](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4069))
+- Chore (home): Update visual consistency dashboard TSVB colors ([#4501](http://github.com/opensearch-project/OpenSearch-Dashboards/pull/4501))
+- Feature (home): Update visual consistency sample dashboard with more vis ([#4581](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4581))
+- Add resource ID filtering in fetch augment-vis obj queries ([#4608](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4608))
+- Enable theme-switching via Advanced Settings to preview the Next theme ([#4475](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4475))
+- Feat (home): Add remaining vis type examples ([#4619](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4619))
+- Feat (Discover): Update styles to be compatible with next theme ([#4644](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4644))
+- Update webpack environment targets ([#4649](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4649))
+- [Table Visualization] Replace div containers with OuiFlex components ([#4272](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4272))
+- Reduce the amount of comments in compiled CSS ([#4648](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4648))
+- Feat (home): Remove color customizations from sample dashboards ([#4741](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4741))
+- Remove visualization editor background ([#4719](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4719))
+- Add saved objects service status api ([#4696](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4696))
+- Allow plugin manifest config to define semver compatible OpenSearch plugin and verify if it is installed on the cluster ([#4612](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4612))
+- Eliminate duplicate dashboard breadcrumb text ID ([#4805](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4805))
+- [@osd/pm] Automate multi-target bootstrap and build ([#4650](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4650))
+- [Home] Add modal to introduce the `next` theme ([#4715](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4715))
+- [Home] Add new theme sample dashboard screenshots ([#4906](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4906))
+- Change color fn used to calculate icon colors for search typeahead suggestions ([#4884](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4884))
+- [Next Theme] Make next theme the default ([#4854](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4854))
+- [Vis Colors] Update color mapper to prioritize unique colors per vis ([#4890](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4890))
+- [Advanced Settings] Consolidate settings into new "Appearance" category and add category IDs ([#4845](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4845))
+- Adds Data explorer framework and implements Discover using it ([#4806](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4806))
+- Use themes' definitions to render the initial view. This impacts the loading screen font and colors ([#4936](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4936))
+
+### 🐛 Bug Fixes
+
+- [VisLib] Replace legend color palette with OUI color palette ([#4365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4365))
+- Fix (styles): Make ace code editor themes consistent ([#4609](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4609))
+- [i18n] fix generation scripts ([#4252](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4252))
+- Fix (Legacy Maps): Add necessary specificity for dark mode style overrides ([#4658](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4658))
+- Fix --font-text CSS var usage and add more leaflet font overrides ([#4674](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4674))
+- Fix snapshots that didn't get updated between PRs ([#4863](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4863))
+- [BUG] Fix management overview page duplicate rendering ([#4636](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4636))
+- Fixes broken app when management is turned off ([#4891](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4891))
+- [CCI] Fix EUI/OUI type errors ([#3798](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3798))
+- Correct the generated path for downloading plugins by their names on Windows ([#4953](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4953))
+
+### 📝 Documentation
+
+- Add missing 1.3.x patch release notes to 2.x branch ([#4771](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4771))
+- [Vis Augmenter] Add documentation to `vis_augmenter` plugin ([#4527](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4527))
+
+### 🛠 Maintenance
+
+- Version increment from 2.9 to 2.10 ([#4545](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4545))
+- Bump OpenSearch-Dashboards 2.10.0 to use nodejs 18.16.0 version ([#4948](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4948))
+- Bump `oui` to `1.3.0` ([#4941](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4941))
+
+### 🪛 Refactoring
+
+- [Markdown] Replace custom css styles and native html with OUI ([#4390](http://github.com/opensearch-project/OpenSearch-Dashboards/pull/4390))
+- Removed KUI usage in `maps_legacy` plugin ([#3998](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3998))
+- [Console] Converted all `/lib/autocomplete/**/*.js` files to typescript ([#4148](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4148))
+- [Console] Convert all non-autocomplete lib files to typescript ([#4150](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4150))
+- Refactor/remove breadcrumb styling main ([#4621](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4621))
+- Bump `node-sass` to a version that uses a newer `libsass` ([#4651](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4651))
+- [Dashboards] restructure folder to be more cohesive with the project ([#4575](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4575))
+- Remove minimum constraint on opensearch hosts ([#4701](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4701))
+- [CCI] Remove unused tags in the navigation plugin ([#3964](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3964))
+- Refactor logo usage ([#4702](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4702))
+
+### 🔩 Tests
+
+- [CI] Fix BWC related CI failures by swapping dist url with snapshot url ([#4828](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4828))
+- [Dashboard De-Angular] Add unit tests for `dashboard_listing` and `dashboard_top_nav` ([#4640](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4640))
+- [Tests] Add BWC tests for 2.9 and 2.10 versions ([#4762](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4762))
+- [Stylelint] Add `no_restricted_values` linter rule ([#4413](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4413))
+- Units test for utils folder ([#4641](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4641))
+- Test (linkchecker): Exclude checking dead link ([#4720](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4720))
+- Update baseline images for functional tests ([#4879](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4879))
diff --git a/scripts/bwc/opensearch_service.sh b/scripts/bwc/opensearch_service.sh
index ecd95990de7e..09f3b5d50c8c 100755
--- a/scripts/bwc/opensearch_service.sh
+++ b/scripts/bwc/opensearch_service.sh
@@ -24,7 +24,12 @@ function setup_opensearch() {
 function run_opensearch() {
   echo "[ Attempting to start OpenSearch... ]"
   cd "$OPENSEARCH_DIR"
-  spawn_process_and_save_PID "./opensearch-tar-install.sh > ${LOGS_DIR}/opensearch.log 2>&1 &"
+  # Check if opensearch-tar-install.sh exists
+  if [ -f "./opensearch-tar-install.sh" ]; then
+    spawn_process_and_save_PID "./opensearch-tar-install.sh > ${LOGS_DIR}/opensearch.log 2>&1 &"
+  else
+    spawn_process_and_save_PID "./bin/opensearch > ${LOGS_DIR}/opensearch.log 2>&1 &"
+  fi
 }
 
 # Checks the running status of OpenSearch
diff --git a/scripts/postinstall.js b/scripts/postinstall.js
new file mode 100644
index 000000000000..e84ee6b38ac8
--- /dev/null
+++ b/scripts/postinstall.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* eslint no-restricted-syntax: 0 */
+
+const fs = require('fs/promises');
+
+/**
+ * Some libraries pack their demos and examples into their release artifacts.
+ * This unwanted content makes our release artifacts larger but more importantly,
+ * some contain in-browser references to outdated and vulnerable versions of
+ * libraries that are not even mentioned in the dependency tree. This is a
+ * problem when vulnerability scanners point them out, and we have no way to fix
+ * them. This function looks for folders that are unwanted and deletes them.
+ */
+const removeUnwantedFolders = async (root, unwantedNames) => {
+  const items = await fs.readdir(root, { withFileTypes: true });
+  const promises = [];
+  for (const item of items) {
+    if (!item.isDirectory()) continue;
+
+    if (unwantedNames.includes(item.name)) {
+      promises.push(fs.rm(`${root}/${item.name}`, { recursive: true, force: true }));
+    } else {
+      promises.push(...(await removeUnwantedFolders(`${root}/${item.name}`, unwantedNames)));
+    }
+  }
+
+  return promises;
+};
+const run = async () => {
+  const promises = await removeUnwantedFolders('node_modules', ['demo', 'example', 'examples']);
+  await Promise.all(promises);
+};
+
+run().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
diff --git a/src/cli_plugin/install/settings.js b/src/cli_plugin/install/settings.js
index 2b0c34bfcd37..cfd576f8ff5a 100644
--- a/src/cli_plugin/install/settings.js
+++ b/src/cli_plugin/install/settings.js
@@ -42,10 +42,11 @@ function generateUrls({ version, plugin }) {
 }
 
 function generatePluginUrl(version, plugin) {
-  const platform = process.platform === 'win32' ? 'windows' : process.platform;
+  const [platform, type] =
+    process.platform === 'win32' ? ['windows', 'zip'] : [process.platform, 'tar'];
   const arch = process.arch === 'arm64' ? 'arm64' : 'x64';
 
-  return `${LATEST_PLUGIN_BASE_URL}/${version}/latest/${platform}/${arch}/tar/builds/opensearch-dashboards/plugins/${plugin}-${version}.zip`;
+  return `${LATEST_PLUGIN_BASE_URL}/${version}/latest/${platform}/${arch}/${type}/builds/opensearch-dashboards/plugins/${plugin}-${version}.zip`;
 }
 
 export function parseMilliseconds(val) {
diff --git a/src/cli_plugin/install/settings.test.js b/src/cli_plugin/install/settings.test.js
index ac7cf94e6761..60313e3fe9b8 100644
--- a/src/cli_plugin/install/settings.test.js
+++ b/src/cli_plugin/install/settings.test.js
@@ -157,7 +157,7 @@ describe('parse function', function () {
         "timeout": 0,
         "urls": Array [
           "plugin name",
-          "https://ci.opensearch.org/ci/dbc/distribution-build-opensearch-dashboards/1234/latest/windows/x64/tar/builds/opensearch-dashboards/plugins/plugin name-1234.zip",
+          "https://ci.opensearch.org/ci/dbc/distribution-build-opensearch-dashboards/1234/latest/windows/x64/zip/builds/opensearch-dashboards/plugins/plugin name-1234.zip",
         ],
         "version": 1234,
         "workingPath": <absolute path>/plugins/.plugin.installing,
diff --git a/src/core/common/index.ts b/src/core/common/index.ts
new file mode 100644
index 000000000000..64fb2c6f4353
--- /dev/null
+++ b/src/core/common/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ImageType, ColorScheme, getLogos } from './logos';
+export type { Logos } from './types';
diff --git a/src/core/common/logos/__snapshots__/get_logos.test.ts.snap b/src/core/common/logos/__snapshots__/get_logos.test.ts.snap
new file mode 100644
index 000000000000..6c7746f3533a
--- /dev/null
+++ b/src/core/common/logos/__snapshots__/get_logos.test.ts.snap
@@ -0,0 +1,613 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getLogos when branding has both light and dark logos and only light spinners returns the correct logos 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos and only light spinners returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo-darkmode.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark-darkmode.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark-darkmode.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo-darkmode.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has both light and dark logos and only light spinners returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos and spinners returns the correct logos 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner-darkmode.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos and spinners returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner-darkmode.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner-darkmode.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo-darkmode.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark-darkmode.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark-darkmode.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo-darkmode.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has both light and dark logos and spinners returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner-darkmode.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos returns the correct logos 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark-darkmode.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark-darkmode.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark-darkmode.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo-darkmode.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark-darkmode.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark-darkmode.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo-darkmode.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has both light and dark logos returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark-darkmode.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has only light logos and spinner returns the correct logos 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has only light logos and spinner returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has only light logos and spinner returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has only light logos returns the correct logos 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has only light logos returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has only light logos returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when unbranded returns the correct logos 1`] = `
+AnimatedMark.dark.type = "default"
+AnimatedMark.dark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_dark.svg"
+AnimatedMark.light.type = "default"
+AnimatedMark.light.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+AnimatedMark.type = "default"
+AnimatedMark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+Application.dark.type = "default"
+Application.dark.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_dark.svg"
+Application.light.type = "default"
+Application.light.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+Application.type = "default"
+Application.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+CenterMark.dark.type = "default"
+CenterMark.dark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_dark.svg"
+CenterMark.light.type = "default"
+CenterMark.light.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+CenterMark.type = "default"
+CenterMark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+Mark.dark.type = "default"
+Mark.dark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_dark.svg"
+Mark.light.type = "default"
+Mark.light.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+Mark.type = "default"
+Mark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+OpenSearch.dark.type = "default"
+OpenSearch.dark.url = "/mocked/base/path/ui/logos/opensearch_on_dark.svg"
+OpenSearch.light.type = "default"
+OpenSearch.light.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+OpenSearch.type = "default"
+OpenSearch.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when unbranded returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "default"
+AnimatedMark.dark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_dark.svg"
+AnimatedMark.light.type = "default"
+AnimatedMark.light.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+AnimatedMark.type = "default"
+AnimatedMark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_dark.svg"
+Application.dark.type = "default"
+Application.dark.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_dark.svg"
+Application.light.type = "default"
+Application.light.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+Application.type = "default"
+Application.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_dark.svg"
+CenterMark.dark.type = "default"
+CenterMark.dark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_dark.svg"
+CenterMark.light.type = "default"
+CenterMark.light.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+CenterMark.type = "default"
+CenterMark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_dark.svg"
+Mark.dark.type = "default"
+Mark.dark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_dark.svg"
+Mark.light.type = "default"
+Mark.light.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+Mark.type = "default"
+Mark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_dark.svg"
+OpenSearch.dark.type = "default"
+OpenSearch.dark.url = "/mocked/base/path/ui/logos/opensearch_on_dark.svg"
+OpenSearch.light.type = "default"
+OpenSearch.light.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+OpenSearch.type = "default"
+OpenSearch.url = "/mocked/base/path/ui/logos/opensearch_on_dark.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when unbranded returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "default"
+AnimatedMark.dark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_dark.svg"
+AnimatedMark.light.type = "default"
+AnimatedMark.light.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+AnimatedMark.type = "default"
+AnimatedMark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+Application.dark.type = "default"
+Application.dark.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_dark.svg"
+Application.light.type = "default"
+Application.light.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+Application.type = "default"
+Application.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+CenterMark.dark.type = "default"
+CenterMark.dark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_dark.svg"
+CenterMark.light.type = "default"
+CenterMark.light.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+CenterMark.type = "default"
+CenterMark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+Mark.dark.type = "default"
+Mark.dark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_dark.svg"
+Mark.light.type = "default"
+Mark.light.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+Mark.type = "default"
+Mark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+OpenSearch.dark.type = "default"
+OpenSearch.dark.url = "/mocked/base/path/ui/logos/opensearch_on_dark.svg"
+OpenSearch.light.type = "default"
+OpenSearch.light.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+OpenSearch.type = "default"
+OpenSearch.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+colorScheme = "light"
+`;
diff --git a/src/core/common/logos/constants.ts b/src/core/common/logos/constants.ts
new file mode 100644
index 000000000000..0972554f1161
--- /dev/null
+++ b/src/core/common/logos/constants.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export enum ImageType {
+  DEFAULT = 'default',
+  CUSTOM = 'custom',
+  ALTERNATIVE = 'alternative',
+}
+
+export enum ColorScheme {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
diff --git a/src/core/common/logos/get_logos.mock.ts b/src/core/common/logos/get_logos.mock.ts
new file mode 100644
index 000000000000..d36591c52b6a
--- /dev/null
+++ b/src/core/common/logos/get_logos.mock.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getLogos } from './get_logos';
+import { Logos } from './types';
+
+export const getLogosMock: {
+  default: DeeplyMockedKeys<Logos>;
+  branded: DeeplyMockedKeys<Logos>;
+} = {
+  default: getLogos({}, ''),
+  branded: getLogos(
+    {
+      logo: {
+        defaultUrl: '/custom/branded/logo.svg',
+        darkModeUrl: '/custom/branded/logo-darkmode.svg',
+      },
+      mark: {
+        defaultUrl: '/custom/branded/mark.svg',
+        darkModeUrl: '/custom/branded/mark-darkmode.svg',
+      },
+    },
+    ''
+  ),
+};
diff --git a/src/core/common/logos/get_logos.test.ts b/src/core/common/logos/get_logos.test.ts
new file mode 100644
index 000000000000..d79564af4318
--- /dev/null
+++ b/src/core/common/logos/get_logos.test.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getLogos } from './get_logos';
+import { flatObjectSerializer } from '@osd/dev-utils';
+
+const serverBasePathMocked = '/mocked/base/path';
+
+expect.addSnapshotSerializer(flatObjectSerializer);
+
+describe('getLogos', () => {
+  describe('when unbranded', () => {
+    const branding = {};
+
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has only light logos', () => {
+    const branding = {
+      logo: { defaultUrl: '/custom/branded/logo.svg' },
+      mark: { defaultUrl: '/custom/branded/mark.svg' },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has only light logos and spinner', () => {
+    const branding = {
+      logo: { defaultUrl: '/custom/branded/logo.svg' },
+      mark: { defaultUrl: '/custom/branded/mark.svg' },
+      loadingLogo: { defaultUrl: '/custom/branded/spinner.svg' },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has both light and dark logos', () => {
+    const branding = {
+      logo: {
+        defaultUrl: '/custom/branded/logo.svg',
+        darkModeUrl: '/custom/branded/logo-darkmode.svg',
+      },
+      mark: {
+        defaultUrl: '/custom/branded/mark.svg',
+        darkModeUrl: '/custom/branded/mark-darkmode.svg',
+      },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has both light and dark logos and spinners', () => {
+    const branding = {
+      logo: {
+        defaultUrl: '/custom/branded/logo.svg',
+        darkModeUrl: '/custom/branded/logo-darkmode.svg',
+      },
+      mark: {
+        defaultUrl: '/custom/branded/mark.svg',
+        darkModeUrl: '/custom/branded/mark-darkmode.svg',
+      },
+      loadingLogo: {
+        defaultUrl: '/custom/branded/spinner.svg',
+        darkModeUrl: '/custom/branded/spinner-darkmode.svg',
+      },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has both light and dark logos and only light spinners', () => {
+    const branding = {
+      logo: {
+        defaultUrl: '/custom/branded/logo.svg',
+        darkModeUrl: '/custom/branded/logo-darkmode.svg',
+      },
+      mark: {
+        defaultUrl: '/custom/branded/mark.svg',
+        darkModeUrl: '/custom/branded/mark-darkmode.svg',
+      },
+      loadingLogo: {
+        defaultUrl: '/custom/branded/spinner.svg',
+      },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/core/common/logos/get_logos.ts b/src/core/common/logos/get_logos.ts
new file mode 100644
index 000000000000..c27a5306e9e1
--- /dev/null
+++ b/src/core/common/logos/get_logos.ts
@@ -0,0 +1,142 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { deepFreeze } from '@osd/std';
+import type { ImageItem, LogoItem, Logos } from './types';
+import { ColorScheme, ImageType } from './constants';
+import { Branding } from '../../types';
+
+// The logos are stored at `src/core/server/core_app/assets/logos` to have a pretty URL
+export const OPENSEARCH_DASHBOARDS_THEMED = 'ui/logos/opensearch_dashboards.svg';
+export const OPENSEARCH_DASHBOARDS_ON_LIGHT = 'ui/logos/opensearch_dashboards_on_light.svg';
+export const OPENSEARCH_DASHBOARDS_ON_DARK = 'ui/logos/opensearch_dashboards_on_dark.svg';
+export const OPENSEARCH_THEMED = 'ui/logos/opensearch.svg';
+export const OPENSEARCH_ON_LIGHT = 'ui/logos/opensearch_on_light.svg';
+export const OPENSEARCH_ON_DARK = 'ui/logos/opensearch_on_dark.svg';
+export const MARK_THEMED = 'ui/logos/opensearch_mark.svg';
+export const MARK_ON_LIGHT = 'ui/logos/opensearch_mark_on_light.svg';
+export const MARK_ON_DARK = 'ui/logos/opensearch_mark_on_dark.svg';
+export const CENTER_MARK_THEMED = 'ui/logos/opensearch_center_mark.svg';
+export const CENTER_MARK_ON_LIGHT = 'ui/logos/opensearch_center_mark_on_light.svg';
+export const CENTER_MARK_ON_DARK = 'ui/logos/opensearch_center_mark_on_dark.svg';
+export const ANIMATED_MARK_THEMED = 'ui/logos/opensearch_spinner.svg';
+export const ANIMATED_MARK_ON_LIGHT = 'ui/logos/opensearch_spinner_on_light.svg';
+export const ANIMATED_MARK_ON_DARK = 'ui/logos/opensearch_spinner_on_dark.svg';
+
+interface AssetOption {
+  url?: string;
+  type: ImageType;
+  colorScheme: ColorScheme;
+}
+
+/**
+ * Loops through the assets to find one that has a `url` set. If dark color-scheme asset is needed,
+ * light assets can be used for fallback but not vice vera.
+ * Place defaults at the end of assets to use them as final fallbacks.
+ * `assets` should have dark - light assets of each type, one after the other.
+ */
+const getFirstUsableAsset = (
+  assets: AssetOption[],
+  requireDarkColorScheme: boolean = false
+): ImageItem => {
+  for (const { url, type, colorScheme } of assets) {
+    if (url && (requireDarkColorScheme || colorScheme === 'light')) return { url, type };
+  }
+
+  // `assets` will contain the default assets so the code will never get here
+  throw new Error('No default asset found');
+};
+
+const getLogo = (assets: AssetOption[], requireDarkColorScheme: boolean = false): LogoItem => {
+  const lightAsset = getFirstUsableAsset(assets, false);
+  const darkAsset = getFirstUsableAsset(assets, true);
+  const colorSchemeAsset = requireDarkColorScheme ? darkAsset : lightAsset;
+
+  return {
+    light: lightAsset,
+    dark: darkAsset,
+    url: colorSchemeAsset.url,
+    type: colorSchemeAsset.type!,
+  };
+};
+
+/**
+ * Generates all the combinations of logos based on the color-scheme and branding config
+ *
+ * Ideally, the default logos would point to color-scheme-aware (aka themed) imagery while the dark and light
+ * subtypes reference the dark and light variants. Sadly, Safari doesn't support color-schemes in SVGs yet.
+ * https://bugs.webkit.org/show_bug.cgi?id=199134
+ */
+export const getLogos = (branding: Branding = {}, serverBasePath: string): Logos => {
+  const {
+    logo: { defaultUrl: customLogoUrl, darkModeUrl: customDarkLogoUrl } = {},
+    mark: { defaultUrl: customMarkUrl, darkModeUrl: customDarkMarkUrl } = {},
+    loadingLogo: { defaultUrl: customAnimatedUrl, darkModeUrl: customDarkAnimatedMarkUrl } = {},
+    darkMode = false,
+  } = branding;
+
+  // OSD logos
+  const defaultLightColorSchemeOpenSearchDashboards = `${serverBasePath}/${OPENSEARCH_DASHBOARDS_ON_LIGHT}`;
+  const defaultDarkColorSchemeOpenSearchDashboards = `${serverBasePath}/${OPENSEARCH_DASHBOARDS_ON_DARK}`;
+  // OS logos
+  const defaultLightColorSchemeOpenSearch = `${serverBasePath}/${OPENSEARCH_ON_LIGHT}`;
+  const defaultDarkColorSchemeOpenSearch = `${serverBasePath}/${OPENSEARCH_ON_DARK}`;
+  // OS marks
+  const defaultLightColorSchemeMark = `${serverBasePath}/${MARK_ON_LIGHT}`;
+  const defaultDarkColorSchemeMark = `${serverBasePath}/${MARK_ON_DARK}`;
+  // OS marks variant padded (but not centered) within the container
+  // ToDo: This naming is misleading; figure out if the distinction could be handled with CSS padding alone
+  // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4714
+  const defaultLightColorSchemeCenterMark = `${serverBasePath}/${CENTER_MARK_ON_LIGHT}`;
+  const defaultDarkColorSchemeCenterMark = `${serverBasePath}/${CENTER_MARK_ON_DARK}`;
+  // OS animated marks
+  const defaultLightColorSchemeAnimatedMark = `${serverBasePath}/${ANIMATED_MARK_ON_LIGHT}`;
+  const defaultDarkColorSchemeAnimatedMark = `${serverBasePath}/${ANIMATED_MARK_ON_DARK}`;
+
+  const colorScheme: ColorScheme = darkMode ? ColorScheme.DARK : ColorScheme.LIGHT;
+
+  // It is easier to read the lines unwrapped, so
+  // prettier-ignore
+  return deepFreeze({
+    OpenSearch: getLogo([
+      { url: customDarkLogoUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customLogoUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeOpenSearch, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeOpenSearch, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    Application: getLogo([
+      { url: customDarkLogoUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customLogoUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeOpenSearchDashboards, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeOpenSearchDashboards, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    Mark: getLogo([
+      { url: customDarkMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    CenterMark: getLogo([
+      { url: customDarkMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeCenterMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeCenterMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    AnimatedMark: getLogo([
+      { url: customDarkAnimatedMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customAnimatedUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: customDarkMarkUrl, type: ImageType.ALTERNATIVE, colorScheme: ColorScheme.DARK },
+      { url: customMarkUrl, type: ImageType.ALTERNATIVE, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeAnimatedMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeAnimatedMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    colorScheme,
+  });
+};
diff --git a/src/core/common/logos/index.ts b/src/core/common/logos/index.ts
new file mode 100644
index 000000000000..7525b1a3a31f
--- /dev/null
+++ b/src/core/common/logos/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// ToDo: Extend this to handle everything related to white-labelling
+
+export { getLogos } from './get_logos';
+export { ImageType, ColorScheme } from './constants';
diff --git a/src/core/common/logos/types.ts b/src/core/common/logos/types.ts
new file mode 100644
index 000000000000..1885b09017a3
--- /dev/null
+++ b/src/core/common/logos/types.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ColorScheme, ImageType } from './constants';
+
+/**
+ * @public
+ */
+export interface Logos {
+  /**
+   * @deprecated Use {@link Logos.Application} instead.
+   */
+  readonly OpenSearch: LogoItem;
+  readonly Application: LogoItem;
+  readonly Mark: LogoItem;
+  /**
+   * @deprecated Use {@link Logos.Mark} instead.
+   */
+  readonly CenterMark: LogoItem;
+  readonly AnimatedMark: LogoItem;
+  readonly colorScheme: ColorScheme;
+}
+
+export type LogoItem = ImageItem & Record<ColorScheme, ImageItem>;
+
+export interface ImageItem {
+  /**
+   * The URL of the image
+   */
+  readonly url: string;
+  readonly type: ImageType;
+}
diff --git a/src/core/common/mocks.ts b/src/core/common/mocks.ts
new file mode 100644
index 000000000000..b1863a96fa38
--- /dev/null
+++ b/src/core/common/mocks.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { getLogosMock } from './logos/get_logos.mock';
diff --git a/src/core/common/types.ts b/src/core/common/types.ts
new file mode 100644
index 000000000000..1f618a8c396f
--- /dev/null
+++ b/src/core/common/types.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export type { Logos } from './logos/types';
diff --git a/src/core/public/chrome/chrome_service.mock.ts b/src/core/public/chrome/chrome_service.mock.ts
index 8e5205e6f9bf..14b516ff95bc 100644
--- a/src/core/public/chrome/chrome_service.mock.ts
+++ b/src/core/public/chrome/chrome_service.mock.ts
@@ -30,7 +30,8 @@
 
 import { BehaviorSubject } from 'rxjs';
 import type { PublicMethodsOf } from '@osd/utility-types';
-import { ChromeBadge, ChromeBrand, ChromeBreadcrumb, ChromeService, InternalChromeStart } from './';
+import { ChromeBadge, ChromeBreadcrumb, ChromeService, InternalChromeStart } from './';
+import { getLogosMock } from '../../common/mocks';
 
 const createStartContractMock = () => {
   const startContract: DeeplyMockedKeys<InternalChromeStart> = {
@@ -54,6 +55,7 @@ const createStartContractMock = () => {
       change: jest.fn(),
       reset: jest.fn(),
     },
+    logos: getLogosMock.default,
     navControls: {
       registerLeft: jest.fn(),
       registerCenter: jest.fn(),
@@ -63,8 +65,6 @@ const createStartContractMock = () => {
       getRight$: jest.fn(),
     },
     setAppTitle: jest.fn(),
-    setBrand: jest.fn(),
-    getBrand$: jest.fn(),
     setIsVisible: jest.fn(),
     getIsVisible$: jest.fn(),
     addApplicationClass: jest.fn(),
@@ -82,7 +82,6 @@ const createStartContractMock = () => {
     setCustomNavLink: jest.fn(),
   };
   startContract.navLinks.getAll.mockReturnValue([]);
-  startContract.getBrand$.mockReturnValue(new BehaviorSubject({} as ChromeBrand));
   startContract.getIsVisible$.mockReturnValue(new BehaviorSubject(false));
   startContract.getApplicationClasses$.mockReturnValue(new BehaviorSubject(['class-name']));
   startContract.getBadge$.mockReturnValue(new BehaviorSubject({} as ChromeBadge));
diff --git a/src/core/public/chrome/chrome_service.test.ts b/src/core/public/chrome/chrome_service.test.ts
index b8635f5a070f..f11b0f3965e6 100644
--- a/src/core/public/chrome/chrome_service.test.ts
+++ b/src/core/public/chrome/chrome_service.test.ts
@@ -145,36 +145,6 @@ describe('start', () => {
     });
   });
 
-  describe('brand', () => {
-    it('updates/emits the brand as it changes', async () => {
-      const { chrome, service } = await start();
-      const promise = chrome.getBrand$().pipe(toArray()).toPromise();
-
-      chrome.setBrand({
-        logo: 'big logo',
-        smallLogo: 'not so big logo',
-      });
-      chrome.setBrand({
-        logo: 'big logo without small logo',
-      });
-      service.stop();
-
-      await expect(promise).resolves.toMatchInlineSnapshot(`
-                      Array [
-                        Object {},
-                        Object {
-                          "logo": "big logo",
-                          "smallLogo": "not so big logo",
-                        },
-                        Object {
-                          "logo": "big logo without small logo",
-                          "smallLogo": undefined,
-                        },
-                      ]
-                  `);
-    });
-  });
-
   describe('visibility', () => {
     it('emits false when no application is mounted', async () => {
       const { chrome, service } = await start();
@@ -478,7 +448,6 @@ describe('stop', () => {
   it('completes applicationClass$, getIsNavDrawerLocked, breadcrumbs$, isVisible$, and brand$ observables', async () => {
     const { chrome, service } = await start();
     const promise = Rx.combineLatest(
-      chrome.getBrand$(),
       chrome.getApplicationClasses$(),
       chrome.getIsNavDrawerLocked$(),
       chrome.getBreadcrumbs$(),
@@ -496,7 +465,6 @@ describe('stop', () => {
 
     await expect(
       Rx.combineLatest(
-        chrome.getBrand$(),
         chrome.getApplicationClasses$(),
         chrome.getIsNavDrawerLocked$(),
         chrome.getBreadcrumbs$(),
diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
index 97746f465abc..d094d86360ef 100644
--- a/src/core/public/chrome/chrome_service.tsx
+++ b/src/core/public/chrome/chrome_service.tsx
@@ -49,6 +49,9 @@ import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_acce
 import { Header } from './ui';
 import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
 import { Branding } from '../';
+import { getLogos } from '../../common';
+import type { Logos } from '../../common/types';
+
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
 const IS_LOCKED_KEY = 'core.chrome.isLocked';
@@ -60,12 +63,6 @@ export interface ChromeBadge {
   iconType?: IconType;
 }
 
-/** @public */
-export interface ChromeBrand {
-  logo?: string;
-  smallLogo?: string;
-}
-
 /** @public */
 export type ChromeBreadcrumb = EuiBreadcrumb;
 
@@ -156,7 +153,6 @@ export class ChromeService {
     this.initVisibility(application);
 
     const appTitle$ = new BehaviorSubject<string>('Overview');
-    const brand$ = new BehaviorSubject<ChromeBrand>({});
     const applicationClasses$ = new BehaviorSubject<Set<string>>(new Set());
     const helpExtension$ = new BehaviorSubject<ChromeHelpExtension | undefined>(undefined);
     const breadcrumbs$ = new BehaviorSubject<ChromeBreadcrumb[]>([]);
@@ -185,6 +181,8 @@ export class ChromeService {
 
     const getIsNavDrawerLocked$ = isNavDrawerLocked$.pipe(takeUntil(this.stop$));
 
+    const logos = getLogos(injectedMetadata.getBranding(), http.basePath.serverBasePath);
+
     const isIE = () => {
       const ua = window.navigator.userAgent;
       const msie = ua.indexOf('MSIE '); // IE 10 or older
@@ -234,6 +232,7 @@ export class ChromeService {
       navLinks,
       recentlyAccessed,
       docTitle,
+      logos,
 
       getHeaderComponent: () => (
         <Header
@@ -261,23 +260,13 @@ export class ChromeService {
           onIsLockedUpdate={setIsNavDrawerLocked}
           isLocked$={getIsNavDrawerLocked$}
           branding={injectedMetadata.getBranding()}
+          logos={logos}
           survey={injectedMetadata.getSurvey()}
         />
       ),
 
       setAppTitle: (appTitle: string) => appTitle$.next(appTitle),
 
-      getBrand$: () => brand$.pipe(takeUntil(this.stop$)),
-
-      setBrand: (brand: ChromeBrand) => {
-        brand$.next(
-          Object.freeze({
-            logo: brand.logo,
-            smallLogo: brand.smallLogo,
-          })
-        );
-      },
-
       getIsVisible$: () => this.isVisible$,
 
       setIsVisible: (isVisible: boolean) => this.isForceHidden$.next(!isVisible),
@@ -371,6 +360,8 @@ export interface ChromeStart {
   recentlyAccessed: ChromeRecentlyAccessed;
   /** {@inheritdoc ChromeDocTitle} */
   docTitle: ChromeDocTitle;
+  /** {@inheritdoc Logos} */
+  readonly logos: Logos;
 
   /**
    * Sets the current app's title
@@ -381,31 +372,6 @@ export interface ChromeStart {
    */
   setAppTitle(appTitle: string): void;
 
-  /**
-   * Get an observable of the current brand information.
-   */
-  getBrand$(): Observable<ChromeBrand>;
-
-  /**
-   * Set the brand configuration.
-   *
-   * @remarks
-   * Normally the `logo` property will be rendered as the
-   * CSS background for the home link in the chrome navigation, but when the page is
-   * rendered in a small window the `smallLogo` will be used and rendered at about
-   * 45px wide.
-   *
-   * @example
-   * ```js
-   * chrome.setBrand({
-   *   logo: 'url(/plugins/app/logo.png) center no-repeat'
-   *   smallLogo: 'url(/plugins/app/logo-small.png) center no-repeat'
-   * })
-   * ```
-   *
-   */
-  setBrand(brand: ChromeBrand): void;
-
   /**
    * Get an observable of the current visibility state of the chrome.
    */
diff --git a/src/core/public/chrome/index.ts b/src/core/public/chrome/index.ts
index 3b9ad62cfe1a..4cd43362767c 100644
--- a/src/core/public/chrome/index.ts
+++ b/src/core/public/chrome/index.ts
@@ -34,7 +34,6 @@ export {
   ChromeService,
   ChromeStart,
   InternalChromeStart,
-  ChromeBrand,
   ChromeHelpExtension,
 } from './chrome_service';
 export {
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 9bdbec781c5e..7b4e3ba472dc 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -60,15 +60,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -131,6 +123,71 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -757,9 +814,9 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="/defaultModeLogo"
+              data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="/defaultModeLogo"
+              iconType="/test/ui/logos/opensearch_mark_on_light.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -780,7 +837,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     >
                       <EuiIcon
                         size="l"
-                        type="/defaultModeLogo"
+                        type="/test/ui/logos/opensearch_mark_on_light.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -798,7 +855,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="/defaultModeLogo"
+                data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -809,7 +866,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="/defaultModeLogo"
+                  data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -858,10 +915,10 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="/defaultModeLogo"
+                                  type="/test/ui/logos/opensearch_mark_on_light.svg"
                                 >
                                   <span
-                                    data-euiicon-type="/defaultModeLogo"
+                                    data-euiicon-type="/test/ui/logos/opensearch_mark_on_light.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
@@ -1954,15 +2011,7 @@ exports[`CollapsibleNav renders the default nav 1`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -2017,6 +2066,71 @@ exports[`CollapsibleNav renders the default nav 1`] = `
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={false}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -2199,15 +2313,7 @@ exports[`CollapsibleNav renders the default nav 2`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -2263,6 +2369,71 @@ exports[`CollapsibleNav renders the default nav 2`] = `
   isLocked={false}
   isNavOpen={false}
   isOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -2445,15 +2616,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -2509,6 +2672,71 @@ exports[`CollapsibleNav renders the default nav 3`] = `
   isLocked={true}
   isNavOpen={false}
   isOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -2922,7 +3150,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] = `
+exports[`CollapsibleNav with custom branding renders the nav bar in dark mode 1`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -2985,9 +3213,13 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
   branding={
     Object {
       "darkMode": true,
+      "logo": Object {
+        "darkModeUrl": "/custom/branded/logo-darkmode.svg",
+        "defaultUrl": "/custom/branded/logo.svg",
+      },
       "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
+        "darkModeUrl": "/custom/branded/mark-darkmode.svg",
+        "defaultUrl": "/custom/branded/mark.svg",
       },
     }
   }
@@ -3045,6 +3277,71 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "alternative",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "alternative",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "alternative",
+        "url": "/custom/branded/mark-darkmode.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/logo-darkmode.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/mark-darkmode.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/mark-darkmode.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/logo-darkmode.svg",
+      },
+      "colorScheme": "dark",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -3435,9 +3732,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="/darkModeLogo"
+              data-test-opensearch-logo="/custom/branded/mark-darkmode.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="/darkModeLogo"
+              iconType="/custom/branded/mark-darkmode.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -3458,7 +3755,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
                     >
                       <EuiIcon
                         size="l"
-                        type="/darkModeLogo"
+                        type="/custom/branded/mark-darkmode.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -3476,7 +3773,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="/darkModeLogo"
+                data-test-opensearch-logo="/custom/branded/mark-darkmode.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -3487,7 +3784,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="/darkModeLogo"
+                  data-test-opensearch-logo="/custom/branded/mark-darkmode.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -3536,10 +3833,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="/darkModeLogo"
+                                  type="/custom/branded/mark-darkmode.svg"
                                 >
                                   <span
-                                    data-euiicon-type="/darkModeLogo"
+                                    data-euiicon-type="/custom/branded/mark-darkmode.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
@@ -3968,7 +4265,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] = `
+exports[`CollapsibleNav with custom branding renders the nav bar in default mode 1`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -4030,9 +4327,13 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
   }
   branding={
     Object {
-      "darkMode": true,
+      "logo": Object {
+        "darkModeUrl": "/custom/branded/logo-darkmode.svg",
+        "defaultUrl": "/custom/branded/logo.svg",
+      },
       "mark": Object {
-        "defaultUrl": "/defaultModeLogo",
+        "darkModeUrl": "/custom/branded/mark-darkmode.svg",
+        "defaultUrl": "/custom/branded/mark.svg",
       },
     }
   }
@@ -4090,6 +4391,71 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "alternative",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "alternative",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "alternative",
+        "url": "/custom/branded/mark.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/logo.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/mark.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/mark.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/logo.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -4480,9 +4846,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="/defaultModeLogo"
+              data-test-opensearch-logo="/custom/branded/mark.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="/defaultModeLogo"
+              iconType="/custom/branded/mark.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -4503,7 +4869,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
                     >
                       <EuiIcon
                         size="l"
-                        type="/defaultModeLogo"
+                        type="/custom/branded/mark.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -4521,7 +4887,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="/defaultModeLogo"
+                data-test-opensearch-logo="/custom/branded/mark.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -4532,7 +4898,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="/defaultModeLogo"
+                  data-test-opensearch-logo="/custom/branded/mark.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -4581,10 +4947,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="/defaultModeLogo"
+                                  type="/custom/branded/mark.svg"
                                 >
                                   <span
-                                    data-euiicon-type="/defaultModeLogo"
+                                    data-euiicon-type="/custom/branded/mark.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
@@ -5013,7 +5379,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] = `
+exports[`CollapsibleNav without custom branding renders the nav bar in dark mode 1`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -5075,8 +5441,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
   }
   branding={
     Object {
-      "darkMode": false,
-      "mark": Object {},
+      "darkMode": true,
     }
   }
   closeNav={[Function]}
@@ -5133,6 +5498,71 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_dark.svg",
+      },
+      "colorScheme": "dark",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -5523,9 +5953,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+              data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_dark.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="undefined/opensearch_mark_default_mode.svg"
+              iconType="/test/ui/logos/opensearch_mark_on_dark.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -5546,7 +5976,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
                     >
                       <EuiIcon
                         size="l"
-                        type="undefined/opensearch_mark_default_mode.svg"
+                        type="/test/ui/logos/opensearch_mark_on_dark.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -5564,7 +5994,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+                data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_dark.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -5575,7 +6005,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+                  data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_dark.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -5624,10 +6054,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="undefined/opensearch_mark_default_mode.svg"
+                                  type="/test/ui/logos/opensearch_mark_on_dark.svg"
                                 >
                                   <span
-                                    data-euiicon-type="undefined/opensearch_mark_default_mode.svg"
+                                    data-euiicon-type="/test/ui/logos/opensearch_mark_on_dark.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
@@ -6056,7 +6486,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the nav bar with custom logo in default mode 1`] = `
+exports[`CollapsibleNav without custom branding renders the nav bar in default mode 1`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -6116,15 +6546,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 1`]
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -6179,1049 +6601,71 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 1`]
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [
-        Object {
-          "baseUrl": "/",
-          "category": Object {
-            "euiIconType": "inputOutput",
-            "id": "opensearchDashboards",
-            "label": "OpenSearch Dashboards",
-            "order": 1000,
-          },
-          "data-test-subj": "discover",
-          "href": "discover",
-          "id": "discover",
-          "isActive": true,
-          "title": "discover",
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
         },
-        Object {
-          "baseUrl": "/",
-          "category": Object {
-            "euiIconType": "logoObservability",
-            "id": "observability",
-            "label": "Observability",
-            "order": 3000,
-          },
-          "data-test-subj": "discover",
-          "href": "discover",
-          "id": "discover",
-          "isActive": true,
-          "title": "discover",
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
         },
-      ],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
         },
-      ],
-      "thrownError": null,
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
     }
   }
-  navigateToApp={[Function]}
-  navigateToUrl={[Function]}
-  onIsLockedUpdate={[Function]}
-  recentlyAccessed$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [
-        Object {
-          "id": "recent",
-          "label": "recent",
-          "link": "recent",
-        },
-      ],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  storage={
-    StubBrowserStorage {
-      "keys": Array [],
-      "size": 0,
-      "sizeLimit": 5000000,
-      "values": Array [],
-    }
-  }
->
-  <EuiCollapsibleNav
-    aria-label="Primary"
-    data-test-subj="collapsibleNav"
-    id="collapsibe-nav"
-    isDocked={false}
-    isOpen={true}
-    onClose={[Function]}
-    outsideClickCloses={false}
-  >
-    <EuiFlyout
-      aria-label="Primary"
-      as="nav"
-      className="euiCollapsibleNav"
-      closeButtonPosition="outside"
-      data-test-subj="collapsibleNav"
-      hideCloseButton={false}
-      id="collapsibe-nav"
-      onClose={[Function]}
-      outsideClickCloses={false}
-      ownFocus={true}
-      paddingSize="none"
-      pushMinBreakpoint="l"
-      role={null}
-      side="left"
-      size={320}
-      type="overlay"
-    >
-      <nav
-        data-eui="EuiFlyout"
-        data-test-subj="collapsibleNav"
-        role={null}
-      >
-        <button
-          data-test-subj="euiFlyoutCloseButton"
-          onClick={[Function]}
-          type="button"
-        />
-        <EuiCollapsibleNavGroup
-          background="light"
-          data-test-subj="collapsibleNavGroup-recentlyViewed"
-          initialIsOpen={true}
-          isCollapsible={true}
-          key="recentlyViewed"
-          onToggle={[Function]}
-          title="Recently viewed"
-        >
-          <EuiAccordion
-            arrowDisplay="right"
-            buttonClassName="euiCollapsibleNavGroup__heading"
-            buttonContent={
-              <EuiFlexGroup
-                alignItems="center"
-                gutterSize="m"
-                responsive={false}
-              >
-                <EuiFlexItem>
-                  <EuiTitle
-                    size="xxs"
-                  >
-                    <h3
-                      className="euiCollapsibleNavGroup__title"
-                      id="mockId__title"
-                    >
-                      Recently viewed
-                    </h3>
-                  </EuiTitle>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            }
-            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-            data-test-subj="collapsibleNavGroup-recentlyViewed"
-            id="mockId"
-            initialIsOpen={true}
-            isLoading={false}
-            isLoadingMessage={false}
-            onToggle={[Function]}
-            paddingSize="none"
-          >
-            <div
-              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-              data-test-subj="collapsibleNavGroup-recentlyViewed"
-              onToggle={[Function]}
-            >
-              <div
-                className="euiAccordion__triggerWrapper"
-              >
-                <button
-                  aria-controls="mockId"
-                  aria-expanded={true}
-                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                  id="mockId"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="euiAccordion__iconWrapper"
-                  >
-                    <EuiIcon
-                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                      size="m"
-                      type="arrowRight"
-                    >
-                      <span
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        data-euiicon-type="arrowRight"
-                        size="m"
-                      />
-                    </EuiIcon>
-                  </span>
-                  <span
-                    className="euiIEFlexWrapFix"
-                  >
-                    <EuiFlexGroup
-                      alignItems="center"
-                      gutterSize="m"
-                      responsive={false}
-                    >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                      >
-                        <EuiFlexItem>
-                          <div
-                            className="euiFlexItem"
-                          >
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <h3
-                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                id="mockId__title"
-                              >
-                                Recently viewed
-                              </h3>
-                            </EuiTitle>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </span>
-                </button>
-              </div>
-              <div
-                aria-labelledby="mockId"
-                className="euiAccordion__childWrapper"
-                id="mockId"
-                role="region"
-                tabIndex={-1}
-              >
-                <EuiResizeObserver
-                  onResize={[Function]}
-                >
-                  <div>
-                    <div
-                      className=""
-                    >
-                      <div
-                        className="euiCollapsibleNavGroup__children"
-                      >
-                        <EuiListGroup
-                          aria-label="Recently viewed links"
-                          className="osdCollapsibleNav__recentsListGroup"
-                          color="subdued"
-                          gutterSize="none"
-                          listItems={
-                            Array [
-                              Object {
-                                "aria-label": "recent",
-                                "data-test-subj": "collapsibleNavAppLink--recent",
-                                "href": "http://localhost/recent",
-                                "label": "recent",
-                                "onClick": [Function],
-                                "title": "recent",
-                              },
-                            ]
-                          }
-                          maxWidth="none"
-                          size="s"
-                        >
-                          <ul
-                            aria-label="Recently viewed links"
-                            className="euiListGroup osdCollapsibleNav__recentsListGroup"
-                            style={
-                              Object {
-                                "maxWidth": "none",
-                              }
-                            }
-                          >
-                            <EuiListGroupItem
-                              aria-label="recent"
-                              color="subdued"
-                              data-test-subj="collapsibleNavAppLink--recent"
-                              href="http://localhost/recent"
-                              key="title-0"
-                              label="recent"
-                              onClick={[Function]}
-                              showToolTip={false}
-                              size="s"
-                              title="recent"
-                              wrapText={false}
-                            >
-                              <li
-                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                              >
-                                <a
-                                  aria-label="recent"
-                                  className="euiListGroupItem__button"
-                                  data-test-subj="collapsibleNavAppLink--recent"
-                                  href="http://localhost/recent"
-                                  onClick={[Function]}
-                                  rel="noreferrer"
-                                  title="recent"
-                                >
-                                  <span
-                                    className="euiListGroupItem__label"
-                                    title="recent"
-                                  >
-                                    recent
-                                  </span>
-                                </a>
-                              </li>
-                            </EuiListGroupItem>
-                          </ul>
-                        </EuiListGroup>
-                      </div>
-                    </div>
-                  </div>
-                </EuiResizeObserver>
-              </div>
-            </div>
-          </EuiAccordion>
-        </EuiCollapsibleNavGroup>
-        <EuiHorizontalRule
-          margin="none"
-        >
-          <hr
-            className="euiHorizontalRule euiHorizontalRule--full"
-          />
-        </EuiHorizontalRule>
-        <EuiFlexItem
-          className="eui-yScroll"
-        >
-          <div
-            className="euiFlexItem eui-yScroll"
-          >
-            <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="/defaultModeLogo"
-              data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="/defaultModeLogo"
-              initialIsOpen={true}
-              isCollapsible={true}
-              key="opensearchDashboards"
-              onToggle={[Function]}
-              title="OpenSearch Dashboards"
-            >
-              <EuiAccordion
-                arrowDisplay="right"
-                buttonClassName="euiCollapsibleNavGroup__heading"
-                buttonContent={
-                  <EuiFlexGroup
-                    alignItems="center"
-                    gutterSize="m"
-                    responsive={false}
-                  >
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <EuiIcon
-                        size="l"
-                        type="/defaultModeLogo"
-                      />
-                    </EuiFlexItem>
-                    <EuiFlexItem>
-                      <EuiTitle
-                        size="xxs"
-                      >
-                        <h3
-                          className="euiCollapsibleNavGroup__title"
-                          id="mockId__title"
-                        >
-                          OpenSearch Dashboards
-                        </h3>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                }
-                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="/defaultModeLogo"
-                data-test-subj="collapsibleNavGroup-opensearchDashboards"
-                id="mockId"
-                initialIsOpen={true}
-                isLoading={false}
-                isLoadingMessage={false}
-                onToggle={[Function]}
-                paddingSize="none"
-              >
-                <div
-                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="/defaultModeLogo"
-                  data-test-subj="collapsibleNavGroup-opensearchDashboards"
-                  onToggle={[Function]}
-                >
-                  <div
-                    className="euiAccordion__triggerWrapper"
-                  >
-                    <button
-                      aria-controls="mockId"
-                      aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                      id="mockId"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
-                      >
-                        <EuiFlexGroup
-                          alignItems="center"
-                          gutterSize="m"
-                          responsive={false}
-                        >
-                          <div
-                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                          >
-                            <EuiFlexItem
-                              grow={false}
-                            >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                              >
-                                <EuiIcon
-                                  size="l"
-                                  type="/defaultModeLogo"
-                                >
-                                  <span
-                                    data-euiicon-type="/defaultModeLogo"
-                                    size="l"
-                                  />
-                                </EuiIcon>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem>
-                              <div
-                                className="euiFlexItem"
-                              >
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    OpenSearch Dashboards
-                                  </h3>
-                                </EuiTitle>
-                              </div>
-                            </EuiFlexItem>
-                          </div>
-                        </EuiFlexGroup>
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-labelledby="mockId"
-                    className="euiAccordion__childWrapper"
-                    id="mockId"
-                    role="region"
-                    tabIndex={-1}
-                  >
-                    <EuiResizeObserver
-                      onResize={[Function]}
-                    >
-                      <div>
-                        <div
-                          className=""
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup__children"
-                          >
-                            <EuiListGroup
-                              aria-label="Primary navigation links, OpenSearch Dashboards"
-                              color="subdued"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "data-test-subj": "collapsibleNavAppLink",
-                                    "href": "discover",
-                                    "isActive": false,
-                                    "isDisabled": undefined,
-                                    "label": "discover",
-                                    "onClick": [Function],
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
-                            >
-                              <ul
-                                aria-label="Primary navigation links, OpenSearch Dashboards"
-                                className="euiListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
-                                }
-                              >
-                                <EuiListGroupItem
-                                  color="subdued"
-                                  data-test-subj="collapsibleNavAppLink"
-                                  href="discover"
-                                  isActive={false}
-                                  key="title-0"
-                                  label="discover"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  wrapText={false}
-                                >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavAppLink"
-                                      href="discover"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
-                                    >
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="discover"
-                                      >
-                                        discover
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </div>
-                    </EuiResizeObserver>
-                  </div>
-                </div>
-              </EuiAccordion>
-            </EuiCollapsibleNavGroup>
-            <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="logoObservability"
-              data-test-subj="collapsibleNavGroup-observability"
-              iconType="logoObservability"
-              initialIsOpen={true}
-              isCollapsible={true}
-              key="observability"
-              onToggle={[Function]}
-              title="Observability"
-            >
-              <EuiAccordion
-                arrowDisplay="right"
-                buttonClassName="euiCollapsibleNavGroup__heading"
-                buttonContent={
-                  <EuiFlexGroup
-                    alignItems="center"
-                    gutterSize="m"
-                    responsive={false}
-                  >
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <EuiIcon
-                        size="l"
-                        type="logoObservability"
-                      />
-                    </EuiFlexItem>
-                    <EuiFlexItem>
-                      <EuiTitle
-                        size="xxs"
-                      >
-                        <h3
-                          className="euiCollapsibleNavGroup__title"
-                          id="mockId__title"
-                        >
-                          Observability
-                        </h3>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                }
-                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="logoObservability"
-                data-test-subj="collapsibleNavGroup-observability"
-                id="mockId"
-                initialIsOpen={true}
-                isLoading={false}
-                isLoadingMessage={false}
-                onToggle={[Function]}
-                paddingSize="none"
-              >
-                <div
-                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="logoObservability"
-                  data-test-subj="collapsibleNavGroup-observability"
-                  onToggle={[Function]}
-                >
-                  <div
-                    className="euiAccordion__triggerWrapper"
-                  >
-                    <button
-                      aria-controls="mockId"
-                      aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                      id="mockId"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
-                      >
-                        <EuiFlexGroup
-                          alignItems="center"
-                          gutterSize="m"
-                          responsive={false}
-                        >
-                          <div
-                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                          >
-                            <EuiFlexItem
-                              grow={false}
-                            >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                              >
-                                <EuiIcon
-                                  size="l"
-                                  type="logoObservability"
-                                >
-                                  <span
-                                    data-euiicon-type="logoObservability"
-                                    size="l"
-                                  />
-                                </EuiIcon>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem>
-                              <div
-                                className="euiFlexItem"
-                              >
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    Observability
-                                  </h3>
-                                </EuiTitle>
-                              </div>
-                            </EuiFlexItem>
-                          </div>
-                        </EuiFlexGroup>
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-labelledby="mockId"
-                    className="euiAccordion__childWrapper"
-                    id="mockId"
-                    role="region"
-                    tabIndex={-1}
-                  >
-                    <EuiResizeObserver
-                      onResize={[Function]}
-                    >
-                      <div>
-                        <div
-                          className=""
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup__children"
-                          >
-                            <EuiListGroup
-                              aria-label="Primary navigation links, Observability"
-                              color="subdued"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "data-test-subj": "collapsibleNavAppLink",
-                                    "href": "discover",
-                                    "isActive": false,
-                                    "isDisabled": undefined,
-                                    "label": "discover",
-                                    "onClick": [Function],
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
-                            >
-                              <ul
-                                aria-label="Primary navigation links, Observability"
-                                className="euiListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
-                                }
-                              >
-                                <EuiListGroupItem
-                                  color="subdued"
-                                  data-test-subj="collapsibleNavAppLink"
-                                  href="discover"
-                                  isActive={false}
-                                  key="title-0"
-                                  label="discover"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  wrapText={false}
-                                >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavAppLink"
-                                      href="discover"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
-                                    >
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="discover"
-                                      >
-                                        discover
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </div>
-                    </EuiResizeObserver>
-                  </div>
-                </div>
-              </EuiAccordion>
-            </EuiCollapsibleNavGroup>
-            <EuiShowFor
-              sizes={
-                Array [
-                  "l",
-                  "xl",
-                ]
-              }
-            >
-              <EuiCollapsibleNavGroup>
-                <div
-                  className="euiCollapsibleNavGroup"
-                  id="mockId"
-                >
-                  <div
-                    className="euiCollapsibleNavGroup__children"
-                  >
-                    <EuiListGroup
-                      flush={true}
-                    >
-                      <ul
-                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                      >
-                        <EuiListGroupItem
-                          aria-label="Dock primary navigation"
-                          buttonRef={
-                            Object {
-                              "current": <button
-                                aria-label="Dock primary navigation"
-                                class="euiListGroupItem__button"
-                                data-test-subj="collapsible-nav-lock"
-                                type="button"
-                              >
-                                <span
-                                  class="euiListGroupItem__icon"
-                                  color="inherit"
-                                  data-euiicon-type="lockOpen"
-                                />
-                                <span
-                                  class="euiListGroupItem__label"
-                                  title="Dock navigation"
-                                >
-                                  Dock navigation
-                                </span>
-                              </button>,
-                            }
-                          }
-                          color="subdued"
-                          data-test-subj="collapsible-nav-lock"
-                          iconType="lockOpen"
-                          label="Dock navigation"
-                          onClick={[Function]}
-                          size="xs"
-                        >
-                          <li
-                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                          >
-                            <button
-                              aria-label="Dock primary navigation"
-                              className="euiListGroupItem__button"
-                              data-test-subj="collapsible-nav-lock"
-                              disabled={false}
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <EuiIcon
-                                className="euiListGroupItem__icon"
-                                color="inherit"
-                                type="lockOpen"
-                              >
-                                <span
-                                  className="euiListGroupItem__icon"
-                                  color="inherit"
-                                  data-euiicon-type="lockOpen"
-                                />
-                              </EuiIcon>
-                              <span
-                                className="euiListGroupItem__label"
-                                title="Dock navigation"
-                              >
-                                Dock navigation
-                              </span>
-                            </button>
-                          </li>
-                        </EuiListGroupItem>
-                      </ul>
-                    </EuiListGroup>
-                  </div>
-                </div>
-              </EuiCollapsibleNavGroup>
-            </EuiShowFor>
-          </div>
-        </EuiFlexItem>
-      </nav>
-    </EuiFlyout>
-  </EuiCollapsibleNav>
-</CollapsibleNav>
-`;
-
-exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`] = `
-<CollapsibleNav
-  appId$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": "test",
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  basePath={
-    BasePath {
-      "basePath": "/test",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/test",
-    }
-  }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {},
-    }
-  }
-  closeNav={[Function]}
-  customNavLink$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": undefined,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  homeHref="/"
-  id="collapsibe-nav"
-  isLocked={false}
-  isNavOpen={true}
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -7612,9 +7056,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+              data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="undefined/opensearch_mark_default_mode.svg"
+              iconType="/test/ui/logos/opensearch_mark_on_light.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -7635,7 +7079,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
                     >
                       <EuiIcon
                         size="l"
-                        type="undefined/opensearch_mark_default_mode.svg"
+                        type="/test/ui/logos/opensearch_mark_on_light.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -7653,7 +7097,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+                data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -7664,7 +7108,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+                  data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -7713,10 +7157,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="undefined/opensearch_mark_default_mode.svg"
+                                  type="/test/ui/logos/opensearch_mark_on_light.svg"
                                 >
                                   <span
-                                    data-euiicon-type="undefined/opensearch_mark_default_mode.svg"
+                                    data-euiicon-type="/test/ui/logos/opensearch_mark_on_light.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 9068e225c8ba..b9da5ac37dbe 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -247,18 +247,7 @@ exports[`Header handles visibility and lock changes 1`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "applicationTitle": "OpenSearch Dashboards",
-      "darkMode": false,
-      "logo": Object {
-        "defaultUrl": "/",
-      },
-      "mark": Object {
-        "defaultUrl": "/",
-      },
-    }
-  }
+  branding={Object {}}
   breadcrumbs$={
     BehaviorSubject {
       "_isScalar": false,
@@ -1437,6 +1426,71 @@ exports[`Header handles visibility and lock changes 1`] = `
       "thrownError": null,
     }
   }
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navControlsCenter$={
     BehaviorSubject {
       "_isScalar": false,
@@ -1888,27 +1942,8 @@ exports[`Header handles visibility and lock changes 1`] = `
               "borders": "none",
               "items": Array [
                 <HeaderLogo
-                  basePath={
-                    BasePath {
-                      "basePath": "/test",
-                      "get": [Function],
-                      "prepend": [Function],
-                      "remove": [Function],
-                      "serverBasePath": "/test",
-                    }
-                  }
-                  branding={
-                    Object {
-                      "applicationTitle": "OpenSearch Dashboards",
-                      "darkMode": false,
-                      "logo": Object {
-                        "defaultUrl": "/",
-                      },
-                      "mark": Object {
-                        "defaultUrl": "/",
-                      },
-                    }
-                  }
+                  backgroundColorScheme="dark"
+                  branding={Object {}}
                   forceNavigation$={
                     BehaviorSubject {
                       "_isScalar": false,
@@ -1996,6 +2031,71 @@ exports[`Header handles visibility and lock changes 1`] = `
                     }
                   }
                   href="/"
+                  logos={
+                    Object {
+                      "AnimatedMark": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                      },
+                      "Application": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                      },
+                      "CenterMark": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                      },
+                      "Mark": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_mark_on_light.svg",
+                      },
+                      "OpenSearch": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_on_light.svg",
+                      },
+                      "colorScheme": "light",
+                    }
+                  }
                   navLinks$={
                     BehaviorSubject {
                       "_isScalar": false,
@@ -2127,7 +2227,6 @@ exports[`Header handles visibility and lock changes 1`] = `
                     }
                   }
                   navigateToApp={[MockFunction]}
-                  theme="dark"
                 />,
               ],
             },
@@ -2335,27 +2434,8 @@ exports[`Header handles visibility and lock changes 1`] = `
                   className="euiHeaderSectionItem"
                 >
                   <HeaderLogo
-                    basePath={
-                      BasePath {
-                        "basePath": "/test",
-                        "get": [Function],
-                        "prepend": [Function],
-                        "remove": [Function],
-                        "serverBasePath": "/test",
-                      }
-                    }
-                    branding={
-                      Object {
-                        "applicationTitle": "OpenSearch Dashboards",
-                        "darkMode": false,
-                        "logo": Object {
-                          "defaultUrl": "/",
-                        },
-                        "mark": Object {
-                          "defaultUrl": "/",
-                        },
-                      }
-                    }
+                    backgroundColorScheme="dark"
+                    branding={Object {}}
                     forceNavigation$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -2443,6 +2523,71 @@ exports[`Header handles visibility and lock changes 1`] = `
                       }
                     }
                     href="/"
+                    logos={
+                      Object {
+                        "AnimatedMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                        },
+                        "Application": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                        },
+                        "CenterMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                        },
+                        "Mark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_light.svg",
+                        },
+                        "OpenSearch": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_light.svg",
+                        },
+                        "colorScheme": "light",
+                      }
+                    }
                     navLinks$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -2574,7 +2719,6 @@ exports[`Header handles visibility and lock changes 1`] = `
                       }
                     }
                     navigateToApp={[MockFunction]}
-                    theme="dark"
                   >
                     <a
                       aria-label="Go to home page"
@@ -2584,12 +2728,12 @@ exports[`Header handles visibility and lock changes 1`] = `
                       onClick={[Function]}
                     >
                       <img
-                        alt="OpenSearch Dashboards logo"
+                        alt="opensearch dashboards logo"
                         className="logoImage"
-                        data-test-image-url="/"
-                        data-test-subj="customLogo"
+                        data-test-image-url="/ui/logos/opensearch_dashboards_on_dark.svg"
+                        data-test-subj="defaultLogo"
                         loading="lazy"
-                        src="/"
+                        src="/ui/logos/opensearch_dashboards_on_dark.svg"
                       />
                     </a>
                   </HeaderLogo>
@@ -2948,18 +3092,7 @@ exports[`Header handles visibility and lock changes 1`] = `
                   className="euiHeaderSectionItem euiHeaderSectionItem--borderRight"
                 >
                   <HomeLoader
-                    branding={
-                      Object {
-                        "applicationTitle": "OpenSearch Dashboards",
-                        "darkMode": false,
-                        "logo": Object {
-                          "defaultUrl": "/",
-                        },
-                        "mark": Object {
-                          "defaultUrl": "/",
-                        },
-                      }
-                    }
+                    branding={Object {}}
                     forceNavigation$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -3133,6 +3266,71 @@ exports[`Header handles visibility and lock changes 1`] = `
                         "thrownError": null,
                       }
                     }
+                    logos={
+                      Object {
+                        "AnimatedMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                        },
+                        "Application": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                        },
+                        "CenterMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                        },
+                        "Mark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_light.svg",
+                        },
+                        "OpenSearch": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_light.svg",
+                        },
+                        "colorScheme": "light",
+                      }
+                    }
                     navLinks$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -3299,10 +3497,10 @@ exports[`Header handles visibility and lock changes 1`] = `
                                     >
                                       <span
                                         class="logoImage"
-                                        data-euiicon-type="/"
-                                        data-test-image-url="/"
-                                        data-test-subj="customMark"
-                                        title="OpenSearch Dashboards home"
+                                        data-euiicon-type="home"
+                                        data-test-image-url="home"
+                                        data-test-subj="homeIcon"
+                                        title="opensearch dashboards home"
                                       />
                                     </div>
                                     <div
@@ -3360,34 +3558,88 @@ exports[`Header handles visibility and lock changes 1`] = `
                                     className="homeIconContainer"
                                   >
                                     <HomeIcon
-                                      applicationTitle="OpenSearch Dashboards"
-                                      darkMode={false}
-                                      logo={
+                                      branding={Object {}}
+                                      logos={
                                         Object {
-                                          "defaultUrl": "/",
-                                        }
-                                      }
-                                      mark={
-                                        Object {
-                                          "defaultUrl": "/",
+                                          "AnimatedMark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                                          },
+                                          "Application": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                                          },
+                                          "CenterMark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                                          },
+                                          "Mark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_mark_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                                          },
+                                          "OpenSearch": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_on_light.svg",
+                                          },
+                                          "colorScheme": "light",
                                         }
                                       }
                                     >
                                       <EuiIcon
                                         className="logoImage"
-                                        data-test-image-url="/"
-                                        data-test-subj="customMark"
-                                        size="l"
-                                        title="OpenSearch Dashboards home"
-                                        type="/"
+                                        data-test-image-url="home"
+                                        data-test-subj="homeIcon"
+                                        size="m"
+                                        title="opensearch dashboards home"
+                                        type="home"
                                       >
                                         <span
                                           className="logoImage"
-                                          data-euiicon-type="/"
-                                          data-test-image-url="/"
-                                          data-test-subj="customMark"
-                                          size="l"
-                                          title="OpenSearch Dashboards home"
+                                          data-euiicon-type="home"
+                                          data-test-image-url="home"
+                                          data-test-subj="homeIcon"
+                                          size="m"
+                                          title="opensearch dashboards home"
                                         />
                                       </EuiIcon>
                                     </HomeIcon>
@@ -5625,18 +5877,6 @@ exports[`Header handles visibility and lock changes 1`] = `
           "serverBasePath": "/test",
         }
       }
-      branding={
-        Object {
-          "applicationTitle": "OpenSearch Dashboards",
-          "darkMode": false,
-          "logo": Object {
-            "defaultUrl": "/",
-          },
-          "mark": Object {
-            "defaultUrl": "/",
-          },
-        }
-      }
       closeNav={[Function]}
       customNavLink$={
         BehaviorSubject {
@@ -5696,6 +5936,71 @@ exports[`Header handles visibility and lock changes 1`] = `
       id="mockId"
       isLocked={true}
       isNavOpen={false}
+      logos={
+        Object {
+          "AnimatedMark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "Application": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "CenterMark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "Mark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "OpenSearch": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "colorScheme": "light",
+        }
+      }
       navLinks$={
         BehaviorSubject {
           "_isScalar": false,
@@ -6634,14 +6939,6 @@ exports[`Header renders condensed header 1`] = `
   }
   branding={
     Object {
-      "applicationTitle": "Foobar Dashboards",
-      "darkMode": false,
-      "logo": Object {
-        "defaultUrl": "/foo",
-      },
-      "mark": Object {
-        "defaultUrl": "/foo",
-      },
       "useExpandedHeader": false,
     }
   }
@@ -7777,6 +8074,71 @@ exports[`Header renders condensed header 1`] = `
       "thrownError": null,
     }
   }
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navControlsCenter$={
     BehaviorSubject {
       "_isScalar": false,
@@ -8280,14 +8642,6 @@ exports[`Header renders condensed header 1`] = `
                   <HomeLoader
                     branding={
                       Object {
-                        "applicationTitle": "Foobar Dashboards",
-                        "darkMode": false,
-                        "logo": Object {
-                          "defaultUrl": "/foo",
-                        },
-                        "mark": Object {
-                          "defaultUrl": "/foo",
-                        },
                         "useExpandedHeader": false,
                       }
                     }
@@ -8427,6 +8781,71 @@ exports[`Header renders condensed header 1`] = `
                         "thrownError": null,
                       }
                     }
+                    logos={
+                      Object {
+                        "AnimatedMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                        },
+                        "Application": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                        },
+                        "CenterMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                        },
+                        "Mark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_light.svg",
+                        },
+                        "OpenSearch": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_light.svg",
+                        },
+                        "colorScheme": "light",
+                      }
+                    }
                     navLinks$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -8549,10 +8968,10 @@ exports[`Header renders condensed header 1`] = `
                                     >
                                       <span
                                         class="logoImage"
-                                        data-euiicon-type="/foo"
-                                        data-test-image-url="/foo"
-                                        data-test-subj="customMark"
-                                        title="Foobar Dashboards home"
+                                        data-euiicon-type="/ui/logos/opensearch_mark_on_light.svg"
+                                        data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+                                        data-test-subj="defaultMark"
+                                        title="opensearch dashboards home"
                                       />
                                     </div>
                                     <div
@@ -8610,35 +9029,92 @@ exports[`Header renders condensed header 1`] = `
                                     className="homeIconContainer"
                                   >
                                     <HomeIcon
-                                      applicationTitle="Foobar Dashboards"
-                                      darkMode={false}
-                                      logo={
+                                      branding={
                                         Object {
-                                          "defaultUrl": "/foo",
+                                          "useExpandedHeader": false,
                                         }
                                       }
-                                      mark={
+                                      logos={
                                         Object {
-                                          "defaultUrl": "/foo",
+                                          "AnimatedMark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                                          },
+                                          "Application": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                                          },
+                                          "CenterMark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                                          },
+                                          "Mark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_mark_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                                          },
+                                          "OpenSearch": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_on_light.svg",
+                                          },
+                                          "colorScheme": "light",
                                         }
                                       }
-                                      useExpandedHeader={false}
                                     >
                                       <EuiIcon
                                         className="logoImage"
-                                        data-test-image-url="/foo"
-                                        data-test-subj="customMark"
+                                        data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+                                        data-test-subj="defaultMark"
                                         size="l"
-                                        title="Foobar Dashboards home"
-                                        type="/foo"
+                                        title="opensearch dashboards home"
+                                        type="/ui/logos/opensearch_mark_on_light.svg"
                                       >
                                         <span
                                           className="logoImage"
-                                          data-euiicon-type="/foo"
-                                          data-test-image-url="/foo"
-                                          data-test-subj="customMark"
+                                          data-euiicon-type="/ui/logos/opensearch_mark_on_light.svg"
+                                          data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+                                          data-test-subj="defaultMark"
                                           size="l"
-                                          title="Foobar Dashboards home"
+                                          title="opensearch dashboards home"
                                         />
                                       </EuiIcon>
                                     </HomeIcon>
@@ -10872,19 +11348,6 @@ exports[`Header renders condensed header 1`] = `
           "serverBasePath": "/test",
         }
       }
-      branding={
-        Object {
-          "applicationTitle": "Foobar Dashboards",
-          "darkMode": false,
-          "logo": Object {
-            "defaultUrl": "/foo",
-          },
-          "mark": Object {
-            "defaultUrl": "/foo",
-          },
-          "useExpandedHeader": false,
-        }
-      }
       closeNav={[Function]}
       customNavLink$={
         BehaviorSubject {
@@ -10939,6 +11402,71 @@ exports[`Header renders condensed header 1`] = `
       id="mockId"
       isLocked={false}
       isNavOpen={false}
+      logos={
+        Object {
+          "AnimatedMark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "Application": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "CenterMark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "Mark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "OpenSearch": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "colorScheme": "light",
+        }
+      }
       navLinks$={
         BehaviorSubject {
           "_isScalar": false,
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap
index 7e44e456f320..ed8ee0c5f18c 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap
@@ -1,2176 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header logo when dark-themed uses custom dark-mode logo if branding dark-mode logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/darkModeLogo"
-      data-test-subj="customLogo"
-      loading="lazy"
-      src="/darkModeLogo"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when dark-themed uses dashboards' dark logo if branding containing a mark but not a logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {},
-      "mark": Object {
-        "defaultUrl": "/defaultModeMark",
-      },
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when dark-themed uses dashboards' dark logo if branding containing no logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {},
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when dark-themed uses dashboards' dark logo if no branding is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={Object {}}
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="opensearch dashboards logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when dark-themed uses default-themed custom logo if branding without dark-mode logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {
-        "defaultUrl": "/defaultModeLogo",
-      },
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/defaultModeLogo"
-      data-test-subj="customLogo"
-      loading="lazy"
-      src="/defaultModeLogo"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when default-themed  uses custom default-mode logo if branding logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {
-        "defaultUrl": "/defaultModeLogo",
-      },
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="default"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/defaultModeLogo"
-      data-test-subj="customLogo"
-      loading="lazy"
-      src="/defaultModeLogo"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when default-themed  uses dashboards logo if branding containing a mark but not a logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {},
-      "mark": Object {
-        "defaultUrl": "/defaultModeMark",
-      },
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="default"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when default-themed  uses dashboards logo if branding containing no logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {},
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="default"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when default-themed  uses dashboards logo if no branding is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={Object {}}
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="default"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="opensearch dashboards logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards.svg"
-    />
-  </a>
-</HeaderLogo>
+exports[`Header logo uses branded application title when provided 1`] = `
+<a
+  aria-label="Go to home page"
+  className="logoContainer"
+  data-test-subj="logo"
+  href="/"
+  onClick={[Function]}
+>
+  <img
+    alt="Page Title logo"
+    className="logoImage"
+    data-test-image-url="/custom/branded/logo.svg"
+    data-test-subj="customLogo"
+    loading="lazy"
+    src="/custom/branded/logo.svg"
+  />
+</a>
+`;
+
+exports[`Header logo uses default application title when not branded 1`] = `
+<a
+  aria-label="Go to home page"
+  className="logoContainer"
+  data-test-subj="logo"
+  href="/"
+  onClick={[Function]}
+>
+  <img
+    alt="opensearch dashboards logo"
+    className="logoImage"
+    data-test-image-url="/ui/logos/opensearch_dashboards_on_light.svg"
+    data-test-subj="defaultLogo"
+    loading="lazy"
+    src="/ui/logos/opensearch_dashboards_on_light.svg"
+  />
+</a>
 `;
diff --git a/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap
index 63e83acd78e3..c1a7c11b69f9 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap
@@ -1,1995 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Home button icon  in condensed dark mode  uses custom mark dark mode URL 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "darkModeUrl": "/darkModeMark",
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/darkModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/darkModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/darkModeMark"
-      data-test-image-url="/darkModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed dark mode  uses custom mark default mode URL if no dark mode mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/defaultModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/defaultModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/defaultModeMark"
-      data-test-image-url="/defaultModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed dark mode  uses opensearch mark if custom logo provided without mark 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={
-    Object {
-      "defaultUrl": "/defaultModeLogo",
-    }
-  }
-  mark={Object {}}
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-    data-test-subj="defaultMark"
-    size="l"
-    title="custom title home"
-    type="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-      data-test-image-url="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-      data-test-subj="defaultMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed dark mode  uses opensearch mark if no mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={Object {}}
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-    data-test-subj="defaultMark"
-    size="l"
-    title="custom title home"
-    type="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-      data-test-image-url="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-      data-test-subj="defaultMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed light mode  uses custom mark default mode URL 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/defaultModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/defaultModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/defaultModeMark"
-      data-test-image-url="/defaultModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed light mode  uses opensearch mark if custom logo provided without mark 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={
-    Object {
-      "defaultUrl": "/defaultModeLogo",
-    }
-  }
-  mark={Object {}}
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="base/ui/default_branding/opensearch_mark_default_mode.svg"
-    data-test-subj="defaultMark"
-    size="l"
-    title="custom title home"
-    type="base/ui/default_branding/opensearch_mark_default_mode.svg"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="base/ui/default_branding/opensearch_mark_default_mode.svg"
-      data-test-image-url="base/ui/default_branding/opensearch_mark_default_mode.svg"
-      data-test-subj="defaultMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed light mode  uses opensearch mark if no mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={Object {}}
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="base/ui/default_branding/opensearch_mark_default_mode.svg"
-    data-test-subj="defaultMark"
-    size="l"
-    title="custom title home"
-    type="base/ui/default_branding/opensearch_mark_default_mode.svg"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="base/ui/default_branding/opensearch_mark_default_mode.svg"
-      data-test-image-url="base/ui/default_branding/opensearch_mark_default_mode.svg"
-      data-test-subj="defaultMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in dark mode  uses custom mark dark mode URL 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "darkModeUrl": "/darkModeMark",
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/darkModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/darkModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/darkModeMark"
-      data-test-image-url="/darkModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in dark mode  uses custom mark default mode URL if no dark mode mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/defaultModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/defaultModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/defaultModeMark"
-      data-test-image-url="/defaultModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in dark mode  uses home icon if custom logo provided without mark 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={
-    Object {
-      "defaultUrl": "/defaultModeLogo",
-    }
-  }
-  mark={Object {}}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="custom title home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in dark mode  uses home icon if no mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={Object {}}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="custom title home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in light mode  uses custom mark default mode URL 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/defaultModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/defaultModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/defaultModeMark"
-      data-test-image-url="/defaultModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in light mode  uses home icon if custom logo provided without mark 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={
-    Object {
-      "defaultUrl": "/defaultModeLogo",
-    }
-  }
-  mark={Object {}}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="custom title home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in light mode  uses home icon if no branding provided 1`] = `
-<HomeIcon
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="opensearch dashboards home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="opensearch dashboards home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in light mode  uses home icon if no mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={Object {}}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="custom title home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
+exports[`Home icon, custom branded, uses the custom logo when header is expanded 1`] = `
+<EuiIcon
+  className="logoImage"
+  data-test-image-url="/custom/branded/mark.svg"
+  data-test-subj="customMark"
+  size="l"
+  title="Page Title home"
+  type="/custom/branded/mark.svg"
+/>
+`;
+
+exports[`Home icon, custom branded, uses the custom logo when header is not expanded 1`] = `
+<EuiIcon
+  className="logoImage"
+  data-test-image-url="/custom/branded/mark.svg"
+  data-test-subj="customMark"
+  size="l"
+  title="Page Title home"
+  type="/custom/branded/mark.svg"
+/>
+`;
+
+exports[`Home icon, unbranded, uses the home icon when header is expanded 1`] = `
+<EuiIcon
+  className="logoImage"
+  data-test-image-url="home"
+  data-test-subj="homeIcon"
+  size="m"
+  title="opensearch dashboards home"
+  type="home"
+/>
+`;
+
+exports[`Home icon, unbranded, uses the mark logo when header is not expanded 1`] = `
+<EuiIcon
+  className="logoImage"
+  data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+  data-test-subj="defaultMark"
+  size="l"
+  title="opensearch dashboards home"
+  type="/ui/logos/opensearch_mark_on_light.svg"
+/>
 `;
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
index dc44fe5053fe..955b7d7ca242 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
@@ -37,6 +37,7 @@ import { ChromeNavLink, DEFAULT_APP_CATEGORIES } from '../../..';
 import { httpServiceMock } from '../../../http/http_service.mock';
 import { ChromeRecentlyAccessedHistoryItem } from '../../recently_accessed';
 import { CollapsibleNav } from './collapsible_nav';
+import { getLogos } from '../../../../common';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => 'mockId',
@@ -64,10 +65,22 @@ function mockRecentNavLink({ label = 'recent' }: Partial<ChromeRecentlyAccessedH
   };
 }
 
-function mockProps() {
+const mockBasePath = httpServiceMock.createSetupContract({ basePath: '/test' }).basePath;
+const mockBranding = {
+  logo: {
+    defaultUrl: '/custom/branded/logo.svg',
+    darkModeUrl: '/custom/branded/logo-darkmode.svg',
+  },
+  mark: {
+    defaultUrl: '/custom/branded/mark.svg',
+    darkModeUrl: '/custom/branded/mark-darkmode.svg',
+  },
+};
+
+function mockProps(branding = {}) {
   return {
     appId$: new BehaviorSubject('test'),
-    basePath: httpServiceMock.createSetupContract({ basePath: '/test' }).basePath,
+    basePath: mockBasePath,
     id: 'collapsibe-nav',
     isLocked: false,
     isNavOpen: false,
@@ -80,13 +93,8 @@ function mockProps() {
     navigateToApp: () => Promise.resolve(),
     navigateToUrl: () => Promise.resolve(),
     customNavLink$: new BehaviorSubject(undefined),
-    branding: {
-      darkMode: false,
-      mark: {
-        defaultUrl: '/defaultModeLogo',
-        darkModeUrl: '/darkModeLogo',
-      },
-    },
+    branding,
+    logos: getLogos(branding, mockBasePath.serverBasePath),
   };
 }
 
@@ -212,77 +220,79 @@ describe('CollapsibleNav', () => {
     expectNavIsClosed(component);
   });
 
-  it('renders the nav bar with custom logo in default mode', () => {
-    const navLinks = [
-      mockLink({ category: opensearchDashboards }),
-      mockLink({ category: observability }),
-    ];
-    const recentNavLinks = [mockRecentNavLink({})];
-    const component = mount(
-      <CollapsibleNav
-        {...mockProps()}
-        isNavOpen={true}
-        navLinks$={new BehaviorSubject(navLinks)}
-        recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
-      />
-    );
-    // check if nav bar renders default mode custom logo
-    expect(component).toMatchSnapshot();
+  describe('with custom branding', () => {
+    it('renders the nav bar in default mode', () => {
+      const navLinks = [
+        mockLink({ category: opensearchDashboards }),
+        mockLink({ category: observability }),
+      ];
+      const recentNavLinks = [mockRecentNavLink({})];
+      const component = mount(
+        <CollapsibleNav
+          {...mockProps(mockBranding)}
+          isNavOpen={true}
+          navLinks$={new BehaviorSubject(navLinks)}
+          recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        />
+      );
 
-    // check if nav bar renders the original default mode opensearch mark
-    component.setProps({
-      branding: {
-        darkMode: false,
-        mark: {},
-      },
+      expect(component).toMatchSnapshot();
     });
-    expect(component).toMatchSnapshot();
-  });
 
-  it('renders the nav bar with custom logo in dark mode', () => {
-    const navLinks = [
-      mockLink({ category: opensearchDashboards }),
-      mockLink({ category: observability }),
-    ];
-    const recentNavLinks = [mockRecentNavLink({})];
-    const component = mount(
-      <CollapsibleNav
-        {...mockProps()}
-        isNavOpen={true}
-        navLinks$={new BehaviorSubject(navLinks)}
-        recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
-      />
-    );
-    // check if nav bar renders dark mode custom logo
-    component.setProps({
-      branding: {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-          darkModeUrl: '/darkModeLogo',
-        },
-      },
+    it('renders the nav bar in dark mode', () => {
+      const navLinks = [
+        mockLink({ category: opensearchDashboards }),
+        mockLink({ category: observability }),
+      ];
+      const recentNavLinks = [mockRecentNavLink({})];
+      const component = mount(
+        <CollapsibleNav
+          {...mockProps({ ...mockBranding, darkMode: true })}
+          isNavOpen={true}
+          navLinks$={new BehaviorSubject(navLinks)}
+          recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
     });
-    expect(component).toMatchSnapshot();
+  });
 
-    // check if nav bar renders default mode custom logo
-    component.setProps({
-      branding: {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-        },
-      },
+  describe('without custom branding', () => {
+    it('renders the nav bar in default mode', () => {
+      const navLinks = [
+        mockLink({ category: opensearchDashboards }),
+        mockLink({ category: observability }),
+      ];
+      const recentNavLinks = [mockRecentNavLink({})];
+      const component = mount(
+        <CollapsibleNav
+          {...mockProps()}
+          isNavOpen={true}
+          navLinks$={new BehaviorSubject(navLinks)}
+          recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
     });
-    expect(component).toMatchSnapshot();
 
-    // check if nav bar renders the original dark mode opensearch mark
-    component.setProps({
-      branding: {
-        darkMode: false,
-        mark: {},
-      },
+    it('renders the nav bar in dark mode', () => {
+      const navLinks = [
+        mockLink({ category: opensearchDashboards }),
+        mockLink({ category: observability }),
+      ];
+      const recentNavLinks = [mockRecentNavLink({})];
+      const component = mount(
+        <CollapsibleNav
+          {...mockProps({ darkMode: true })}
+          isNavOpen={true}
+          navLinks$={new BehaviorSubject(navLinks)}
+          recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
     });
-    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
index 51d43d96f7fd..8b178200114a 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -50,7 +50,7 @@ import { InternalApplicationStart } from '../../../application/types';
 import { HttpStart } from '../../../http';
 import { OnIsLockedUpdate } from './';
 import { createEuiListItem, createRecentNavLink, isModifiedOrPrevented } from './nav_link';
-import { ChromeBranding } from '../../chrome_service';
+import type { Logos } from '../../../../common/types';
 
 function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>) {
   const allCategories = {} as Record<string, AppCategory | undefined>;
@@ -101,7 +101,7 @@ interface Props {
   navigateToApp: InternalApplicationStart['navigateToApp'];
   navigateToUrl: InternalApplicationStart['navigateToUrl'];
   customNavLink$: Rx.Observable<ChromeNavLink | undefined>;
-  branding: ChromeBranding;
+  logos: Logos;
 }
 
 export function CollapsibleNav({
@@ -115,7 +115,7 @@ export function CollapsibleNav({
   closeNav,
   navigateToApp,
   navigateToUrl,
-  branding,
+  logos,
   ...observables
 }: Props) {
   const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden);
@@ -138,42 +138,6 @@ export function CollapsibleNav({
     });
   };
 
-  const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`;
-  const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`;
-
-  const darkMode = branding.darkMode;
-  const markDefault = branding.mark?.defaultUrl;
-  const markDarkMode = branding.mark?.darkModeUrl;
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * side menu opensearch logo in default mode
-   *
-   * @returns a valid custom URL or original default mode opensearch mark if no valid URL is provided
-   */
-  const customSideMenuLogoDefaultMode = () => {
-    return markDefault ?? DEFAULT_OPENSEARCH_MARK;
-  };
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * side menu opensearch logo in dark mode
-   *
-   * @returns a valid custom URL or original dark mode opensearch mark if no valid URL is provided
-   */
-  const customSideMenuLogoDarkMode = () => {
-    return markDarkMode ?? markDefault ?? DARKMODE_OPENSEARCH_MARK;
-  };
-
-  /**
-   * Render custom side menu logo for both default mode and dark mode
-   *
-   * @returns a valid logo URL
-   */
-  const customSideMenuLogo = () => {
-    return darkMode ? customSideMenuLogoDarkMode() : customSideMenuLogoDefaultMode();
-  };
-
   return (
     <EuiCollapsibleNav
       data-test-subj="collapsibleNav"
@@ -277,7 +241,7 @@ export function CollapsibleNav({
         {orderedCategories.map((categoryName) => {
           const category = categoryDictionary[categoryName]!;
           const opensearchLinkLogo =
-            category.id === 'opensearchDashboards' ? customSideMenuLogo() : category.euiIconType;
+            category.id === 'opensearchDashboards' ? logos.Mark.url : category.euiIconType;
 
           return (
             <EuiCollapsibleNavGroup
diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx
index 319dea4c394b..c829361ff5c1 100644
--- a/src/core/public/chrome/ui/header/header.test.tsx
+++ b/src/core/public/chrome/ui/header/header.test.tsx
@@ -33,7 +33,7 @@ import { act } from 'react-dom/test-utils';
 import { BehaviorSubject } from 'rxjs';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { httpServiceMock } from '../../../http/http_service.mock';
-import { applicationServiceMock } from '../../../mocks';
+import { applicationServiceMock, chromeServiceMock } from '../../../mocks';
 import { Header } from './header';
 import { StubBrowserStorage } from 'test_utils/stub_browser_storage';
 
@@ -69,13 +69,9 @@ function mockProps() {
     isLocked$: new BehaviorSubject(false),
     loadingCount$: new BehaviorSubject(0),
     onIsLockedUpdate: () => {},
-    branding: {
-      darkMode: false,
-      logo: { defaultUrl: '/' },
-      mark: { defaultUrl: '/' },
-      applicationTitle: 'OpenSearch Dashboards',
-    },
+    branding: {},
     survey: '/',
+    logos: chromeServiceMock.createStartContract().logos,
   };
 }
 
@@ -102,17 +98,17 @@ describe('Header', () => {
     const recentlyAccessed$ = new BehaviorSubject([
       { link: '', label: 'dashboard', id: 'dashboard' },
     ]);
-    const component = mountWithIntl(
-      <Header
-        {...mockProps()}
-        isVisible$={isVisible$}
-        breadcrumbs$={breadcrumbs$}
-        navLinks$={navLinks$}
-        recentlyAccessed$={recentlyAccessed$}
-        isLocked$={isLocked$}
-        customNavLink$={customNavLink$}
-      />
-    );
+    const props = {
+      ...mockProps(),
+      isVisible$,
+      breadcrumbs$,
+      navLinks$,
+      recentlyAccessed$,
+      isLocked$,
+      customNavLink$,
+    };
+
+    const component = mountWithIntl(<Header {...props} />);
     expect(component.find('EuiHeader').exists()).toBeFalsy();
     expect(component.find('EuiProgress').exists()).toBeTruthy();
 
@@ -120,7 +116,6 @@ describe('Header', () => {
     component.update();
     expect(component.find('EuiHeader.primaryHeader').exists()).toBeTruthy();
     expect(component.find('EuiHeader.expandedHeader').exists()).toBeTruthy();
-    expect(component.find('HeaderLogo').exists()).toBeTruthy();
     expect(component.find('HeaderNavControls')).toHaveLength(5);
     expect(component.find('[data-test-subj="toggleNavButton"]').exists()).toBeTruthy();
     expect(component.find('HomeLoader').exists()).toBeTruthy();
@@ -131,6 +126,11 @@ describe('Header', () => {
 
     expect(component.find('EuiFlyout[aria-label="Primary"]').exists()).toBeFalsy();
 
+    const headerLogo = component.find('HeaderLogo');
+    expect(headerLogo.exists()).toBeTruthy();
+    expect(headerLogo.prop('backgroundColorScheme')).toEqual('dark');
+    expect(headerLogo.prop('logos')).toEqual(props.logos);
+
     act(() => isLocked$.next(true));
     component.update();
     expect(component.find('EuiFlyout[aria-label="Primary"]').exists()).toBeTruthy();
@@ -139,16 +139,13 @@ describe('Header', () => {
 
   it('renders condensed header', () => {
     const branding = {
-      darkMode: false,
-      logo: { defaultUrl: '/foo' },
-      mark: { defaultUrl: '/foo' },
-      applicationTitle: 'Foobar Dashboards',
       useExpandedHeader: false,
     };
     const props = {
       ...mockProps(),
       branding,
     };
+
     const component = mountWithIntl(<Header {...props} />);
 
     expect(component.find('EuiHeader.primaryHeader').exists()).toBeTruthy();
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 9496b76b9980..acc7c6869145 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -64,6 +64,7 @@ import { HomeLoader } from './home_loader';
 import { HeaderNavControls } from './header_nav_controls';
 import { HeaderActionMenu } from './header_action_menu';
 import { HeaderLogo } from './header_logo';
+import type { Logos } from '../../../../common/types';
 
 export interface HeaderProps {
   opensearchDashboardsVersion: string;
@@ -90,6 +91,7 @@ export interface HeaderProps {
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   onIsLockedUpdate: OnIsLockedUpdate;
   branding: ChromeBranding;
+  logos: Logos;
   survey: string | undefined;
 }
 
@@ -102,6 +104,7 @@ export function Header({
   homeHref,
   branding,
   survey,
+  logos,
   ...observables
 }: HeaderProps) {
   const isVisible = useObservable(observables.isVisible$, false);
@@ -117,7 +120,7 @@ export function Header({
   const className = classnames('hide-for-sharing', 'headerGlobalNav');
   const { useExpandedHeader = true } = branding;
 
-  const headerTheme: EuiHeaderProps['theme'] = 'dark';
+  const expandedHeaderColorScheme: EuiHeaderProps['theme'] = 'dark';
 
   return (
     <>
@@ -126,7 +129,7 @@ export function Header({
           {useExpandedHeader && (
             <EuiHeader
               className="expandedHeader"
-              theme={headerTheme}
+              theme={expandedHeaderColorScheme}
               position="fixed"
               sections={[
                 {
@@ -137,9 +140,9 @@ export function Header({
                       navLinks$={observables.navLinks$}
                       navigateToApp={application.navigateToApp}
                       branding={branding}
-                      basePath={basePath}
-                      /* This `theme` should match the theme of EuiHeader */
-                      theme={headerTheme}
+                      logos={logos}
+                      /* This color-scheme should match the `theme` of the parent EuiHeader */
+                      backgroundColorScheme={expandedHeaderColorScheme}
                     />,
                   ],
                   borders: 'none',
@@ -200,6 +203,7 @@ export function Header({
                   navLinks$={observables.navLinks$}
                   navigateToApp={application.navigateToApp}
                   branding={branding}
+                  logos={logos}
                   loadingCount$={observables.loadingCount$}
                 />
               </EuiHeaderSectionItem>
@@ -259,7 +263,7 @@ export function Header({
             }
           }}
           customNavLink$={observables.customNavLink$}
-          branding={branding}
+          logos={logos}
         />
       </header>
     </>
diff --git a/src/core/public/chrome/ui/header/header_logo.test.tsx b/src/core/public/chrome/ui/header/header_logo.test.tsx
index 6d31e71c1f0a..c43073ec7f48 100644
--- a/src/core/public/chrome/ui/header/header_logo.test.tsx
+++ b/src/core/public/chrome/ui/header/header_logo.test.tsx
@@ -3,183 +3,102 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiHeaderProps } from '@elastic/eui';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { HeaderLogo, DEFAULT_DARK_LOGO, DEFAULT_LOGO } from './header_logo';
-import { BasePath } from '../../../http/base_path';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { HeaderLogo } from './header_logo';
+import { getLogosMock } from '../../../../common/mocks';
 
-const basePath = new BasePath('/base');
+const mockTitle = 'Page Title';
 const mockProps = () => ({
   href: '/',
-  basePath,
   navLinks$: new BehaviorSubject([]),
   forceNavigation$: new BehaviorSubject(false),
   navigateToApp: jest.fn(),
   branding: {},
-  theme: 'default' as EuiHeaderProps['theme'],
+  logos: getLogosMock.default,
 });
 
 describe('Header logo', () => {
-  describe('when default-themed ', () => {
-    it('uses dashboards logo if no branding is provided', () => {
-      const branding = {};
-      const props = {
-        ...mockProps(),
-        branding,
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_LOGO}`);
-      expect(img.prop('alt')).toEqual(`opensearch dashboards logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it("uses the light color-scheme's Application logo by default", () => {
+    const props = {
+      ...mockProps(),
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('src')).toEqual(props.logos.Application.light.url);
+  });
 
-    it('uses dashboards logo if branding containing no logo is provided', () => {
-      const branding = {
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_LOGO}`);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it("uses the light color-scheme's Application logo if the header's theme is not dark", () => {
+    const props = {
+      ...mockProps(),
+      backgroundColorScheme: 'light' as const,
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('src')).toEqual(props.logos.Application.light.url);
+  });
 
-    it('uses dashboards logo if branding containing a mark but not a logo is provided', () => {
-      const branding = {
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_LOGO}`);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it("uses the normal color-scheme's Application logo if the header's theme is not dark", () => {
+    const props = {
+      ...mockProps(),
+      backgroundColorScheme: 'normal' as const,
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('src')).toEqual(props.logos.Application.light.url);
+  });
 
-    it('uses custom default-mode logo if branding logo is provided', () => {
-      const branding = {
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(branding.logo.defaultUrl);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it("uses the dark color-scheme's Application logo if the header's theme is dark", () => {
+    const props = {
+      ...mockProps(),
+      backgroundColorScheme: 'dark' as const,
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('src')).toEqual(props.logos.Application.dark.url);
   });
 
-  describe('when dark-themed', () => {
-    it("uses dashboards' dark logo if no branding is provided", () => {
-      const branding = {};
-      const props = {
-        ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_DARK_LOGO}`);
-      expect(img.prop('alt')).toEqual(`opensearch dashboards logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it('uses default application title when not branded', () => {
+    const props = {
+      ...mockProps(),
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('data-test-subj')).toEqual(`defaultLogo`);
+    expect(img.prop('alt')).toEqual(`opensearch dashboards logo`);
+    expect(component).toMatchSnapshot();
+  });
 
-    it("uses dashboards' dark logo if branding containing no logo is provided", () => {
-      const branding = {
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_DARK_LOGO}`);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it('uses branded application title when provided', () => {
+    const props = {
+      ...mockProps(),
+      logos: getLogosMock.branded,
+      branding: {
+        applicationTitle: mockTitle,
+      },
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('data-test-subj')).toEqual(`customLogo`);
+    expect(img.prop('alt')).toEqual(`${mockTitle} logo`);
+    expect(component).toMatchSnapshot();
+  });
 
-    it("uses dashboards' dark logo if branding containing a mark but not a logo is provided", () => {
-      const branding = {
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
+  describe('onClick', () => {
+    it('uses default application title when not branded', () => {
       const props = {
         ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
       };
       const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_DARK_LOGO}`);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+      component.find('.logoContainer img').simulate('click');
 
-    it('uses default-themed custom logo if branding without dark-mode logo is provided', () => {
-      const branding = {
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(branding.logo.defaultUrl);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
+      expect(props.navigateToApp).toHaveBeenCalledTimes(1);
+      expect(props.navigateToApp).toHaveBeenCalledWith('home');
     });
 
-    it('uses custom dark-mode logo if branding dark-mode logo is provided', () => {
-      const branding = {
-        logo: { defaultUrl: '/defaultModeLogo', darkModeUrl: '/darkModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(branding.logo.darkModeUrl);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+    // ToDo: Add tests for onClick
+    // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4692
+    it.todo('performs all the complications');
   });
 });
diff --git a/src/core/public/chrome/ui/header/header_logo.tsx b/src/core/public/chrome/ui/header/header_logo.tsx
index 00de679f5184..b5fddee0e595 100644
--- a/src/core/public/chrome/ui/header/header_logo.tsx
+++ b/src/core/public/chrome/ui/header/header_logo.tsx
@@ -29,29 +29,13 @@
  */
 
 import './header_logo.scss';
-import { EuiHeaderProps } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeNavLink } from '../..';
 import { ChromeBranding } from '../../chrome_service';
-import { HttpStart } from '../../../http';
-
-function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void {
-  let current = element;
-  while (current) {
-    if (current.tagName === 'A') {
-      return current as HTMLAnchorElement;
-    }
-
-    if (!current.parentElement || current.parentElement === document.body) {
-      return undefined;
-    }
-
-    current = current.parentElement;
-  }
-}
+import type { Logos } from '../../../../common/types';
 
 function onClick(
   event: React.MouseEvent<HTMLAnchorElement>,
@@ -59,7 +43,7 @@ function onClick(
   navLinks: ChromeNavLink[],
   navigateToApp: (appId: string) => void
 ) {
-  const anchor = findClosestAnchor((event as any).nativeEvent.target);
+  const anchor = (event.nativeEvent.target as HTMLAnchorElement)?.closest('a');
   if (!anchor) {
     return;
   }
@@ -98,44 +82,36 @@ function onClick(
   }
 }
 
-export const DEFAULT_LOGO = 'ui/logos/opensearch_dashboards.svg';
-export const DEFAULT_DARK_LOGO = 'ui/logos/opensearch_dashboards_darkmode.svg';
-
 interface Props {
   href: string;
   navLinks$: Observable<ChromeNavLink[]>;
   forceNavigation$: Observable<boolean>;
   navigateToApp: (appId: string) => void;
   branding: ChromeBranding;
-  basePath: HttpStart['basePath'];
-  // What background is the logo appearing on; this is independent of theme:darkMode
-  theme?: EuiHeaderProps['theme'];
+  logos: Logos;
+  /* indicates the background color-scheme this element will appear over
+   * `'normal'` and `'light'` are synonyms of being `undefined`, to mean not `'dark'`
+   */
+  backgroundColorScheme?: 'normal' | 'light' | 'dark';
 }
 
 export function HeaderLogo({
   href,
   navigateToApp,
   branding,
-  basePath,
-  theme = 'default',
+  logos,
+  backgroundColorScheme,
   ...observables
 }: Props) {
   const forceNavigation = useObservable(observables.forceNavigation$, false);
   const navLinks = useObservable(observables.navLinks$, []);
-  const {
-    logo: { defaultUrl: customLogoUrl, darkModeUrl: customDarkLogoUrl } = {},
-    applicationTitle = 'opensearch dashboards',
-  } = branding;
+  const { applicationTitle = 'opensearch dashboards' } = branding;
 
-  // Attempt to find a suitable custom branded logo before falling back on OSD's
-  let logoSrc = theme === 'dark' && customDarkLogoUrl ? customDarkLogoUrl : customLogoUrl;
-  let testSubj = 'customLogo';
-
-  // If no custom branded logo was set, use OSD's
-  if (!logoSrc) {
-    logoSrc = `${basePath.serverBasePath}/${theme === 'dark' ? DEFAULT_DARK_LOGO : DEFAULT_LOGO}`;
-    testSubj = 'defaultLogo';
-  }
+  const {
+    [backgroundColorScheme === 'dark' ? 'dark' : 'light']: { url: logoURL },
+    type: logoType,
+  } = logos.Application;
+  const testSubj = `${logoType}Logo`;
 
   const alt = `${applicationTitle} logo`;
 
@@ -151,8 +127,8 @@ export function HeaderLogo({
     >
       <img
         data-test-subj={testSubj}
-        data-test-image-url={logoSrc}
-        src={logoSrc}
+        data-test-image-url={logoURL}
+        src={logoURL}
         alt={alt}
         loading="lazy"
         className="logoImage"
diff --git a/src/core/public/chrome/ui/header/home_icon.test.tsx b/src/core/public/chrome/ui/header/home_icon.test.tsx
index d1ede9e2c5a3..05ffd5591594 100644
--- a/src/core/public/chrome/ui/header/home_icon.test.tsx
+++ b/src/core/public/chrome/ui/header/home_icon.test.tsx
@@ -4,251 +4,109 @@
  */
 
 import React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { DEFAULT_MARK, DEFAULT_DARK_MARK, HomeIcon } from './home_icon';
-
-// TODO: many of these tests cover the conditional logic of which mark to load depending on raw branding configurations
-// Dark mode and custom/default fallbacks should instead be consolidated and centralized elsewhere:
-// https://github.com/opensearch-project/OpenSearch-Dashboards/issues/895#issuecomment-1164995007
-describe('Home button icon ', () => {
-  describe('in condensed light mode ', () => {
-    it('uses opensearch mark if no mark provided', () => {
-      const branding = {
-        darkMode: false,
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}/${DEFAULT_MARK}`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+import { shallow } from 'enzyme';
+import { HomeIcon } from './home_icon';
+import { getLogosMock } from '../../../../common/mocks';
 
-    it('uses opensearch mark if custom logo provided without mark', () => {
-      const branding = {
-        darkMode: false,
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}/${DEFAULT_MARK}`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+const mockTitle = 'Page Title';
 
-    it('uses custom mark default mode URL', () => {
-      const branding = {
-        darkMode: false,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.defaultUrl);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
+describe('Home icon,', () => {
+  describe('unbranded,', () => {
+    const mockProps = () => ({
+      branding: {},
+      logos: getLogosMock.default,
     });
-  });
 
-  describe('in condensed dark mode ', () => {
-    it('uses opensearch mark if no mark provided', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+    it('uses the home icon by default', () => {
+      const props = mockProps();
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}/${DEFAULT_DARK_MARK}`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
+      expect(icon.prop('data-test-subj')).toEqual('homeIcon');
+      expect(icon.prop('type')).toEqual('home');
+      expect(icon.prop('size')).toEqual('m');
+      expect(icon.prop('title')).toEqual('opensearch dashboards home');
     });
 
-    it('uses opensearch mark if custom logo provided without mark', () => {
-      const branding = {
-        darkMode: true,
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
+    it('uses the home icon when header is expanded', () => {
+      const props = {
+        ...mockProps(),
+        branding: {
+          useExpandedHeader: true,
+        },
       };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}/${DEFAULT_DARK_MARK}`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+      expect(icon.prop('data-test-subj')).toEqual('homeIcon');
+      expect(icon.prop('type')).toEqual('home');
+      expect(icon.prop('size')).toEqual('m');
+      expect(icon.prop('title')).toEqual('opensearch dashboards home');
 
-    it('uses custom mark default mode URL if no dark mode mark provided', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.defaultUrl);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
       expect(component).toMatchSnapshot();
     });
 
-    it('uses custom mark dark mode URL', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
+    it('uses the mark logo when header is not expanded', () => {
+      const props = {
+        ...mockProps(),
+        branding: {
+          useExpandedHeader: false,
+        },
       };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.darkModeUrl);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
+      expect(icon.prop('data-test-subj')).toEqual('defaultMark');
+      expect(icon.prop('type')).toEqual(props.logos.Mark.url);
+      expect(icon.prop('size')).toEqual('l');
+      expect(icon.prop('title')).toEqual('opensearch dashboards home');
+
       expect(component).toMatchSnapshot();
     });
   });
 
-  describe('in light mode ', () => {
-    it('uses home icon if no branding provided', () => {
-      const branding = {};
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`opensearch dashboards home`);
-      expect(component).toMatchSnapshot();
+  describe('custom branded,', () => {
+    const mockProps = () => ({
+      branding: {
+        applicationTitle: mockTitle,
+      },
+      logos: getLogosMock.branded,
     });
 
-    it('uses home icon if no mark provided', () => {
-      const branding = {
-        darkMode: false,
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+    it('uses the custom logo by default', () => {
+      const props = mockProps();
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
+      expect(icon.prop('data-test-subj')).toEqual('customMark');
+      expect(icon.prop('type')).toEqual(props.logos.Mark.url);
+      expect(icon.prop('size')).toEqual('l');
+      expect(icon.prop('title')).toEqual(`${mockTitle} home`);
     });
 
-    it('uses home icon if custom logo provided without mark', () => {
-      const branding = {
-        darkMode: false,
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+    it('uses the custom logo when header is expanded', () => {
+      const props = mockProps();
+      // @ts-expect-error
+      props.branding.useExpandedHeader = true;
 
-    it('uses custom mark default mode URL', () => {
-      const branding = {
-        darkMode: false,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.defaultUrl);
-      expect(icon.prop('size')).toEqual(`l`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
-  });
+      expect(icon.prop('data-test-subj')).toEqual('customMark');
+      expect(icon.prop('type')).toEqual(props.logos.Mark.url);
+      expect(icon.prop('size')).toEqual('l');
+      expect(icon.prop('title')).toEqual(`${mockTitle} home`);
 
-  describe('in dark mode ', () => {
-    it('uses home icon if no mark provided', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
       expect(component).toMatchSnapshot();
     });
 
-    it('uses home icon if custom logo provided without mark', () => {
-      const branding = {
-        darkMode: true,
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+    it('uses the custom logo when header is not expanded', () => {
+      const props = mockProps();
+      // @ts-expect-error
+      props.branding.useExpandedHeader = false;
 
-    it('uses custom mark default mode URL if no dark mode mark provided', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.defaultUrl);
-      expect(icon.prop('size')).toEqual(`l`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+      expect(icon.prop('data-test-subj')).toEqual('customMark');
+      expect(icon.prop('type')).toEqual(props.logos.Mark.url);
+      expect(icon.prop('size')).toEqual('l');
+      expect(icon.prop('title')).toEqual(`${mockTitle} home`);
 
-    it('uses custom mark dark mode URL', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.darkModeUrl);
-      expect(icon.prop('size')).toEqual(`l`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
       expect(component).toMatchSnapshot();
     });
   });
diff --git a/src/core/public/chrome/ui/header/home_icon.tsx b/src/core/public/chrome/ui/header/home_icon.tsx
index 9260fc19ccae..2c0beb5a26cb 100644
--- a/src/core/public/chrome/ui/header/home_icon.tsx
+++ b/src/core/public/chrome/ui/header/home_icon.tsx
@@ -4,51 +4,46 @@
  */
 
 import React from 'react';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, IconSize } from '@elastic/eui';
 import { ChromeBranding } from '../../chrome_service';
+import type { Logos } from '../../../../common/types';
 
-export const DEFAULT_MARK = 'opensearch_mark_default_mode.svg';
-export const DEFAULT_DARK_MARK = 'opensearch_mark_dark_mode.svg';
+interface Props {
+  branding: ChromeBranding;
+  logos: Logos;
+}
 
 /**
  * Use branding configurations to render the header mark on the nav bar.
- *
- * @param {ChromeBranding} - branding object consist of mark, darkmode selection, asset path and title
- * @returns Mark component which is going to be rendered on the main page header bar.
  */
-export const HomeIcon = ({
-  darkMode,
-  assetFolderUrl = '',
-  mark,
-  applicationTitle = 'opensearch dashboards',
-  useExpandedHeader = true,
-}: ChromeBranding) => {
-  const { defaultUrl: markUrl, darkModeUrl: darkMarkUrl } = mark ?? {};
-
-  const customMark = darkMode ? darkMarkUrl ?? markUrl : markUrl;
-  const defaultMark = darkMode ? DEFAULT_DARK_MARK : DEFAULT_MARK;
-
-  const getIconProps = () => {
-    const iconType = customMark
-      ? customMark
-      : useExpandedHeader
-      ? 'home'
-      : `${assetFolderUrl}/${defaultMark}`;
-    const testSubj = customMark ? 'customMark' : useExpandedHeader ? 'homeIcon' : 'defaultMark';
-    const title = `${applicationTitle} home`;
-    // marks look better at the large size, but the home icon should be medium to fit in with other icons
-    const size = iconType === 'home' ? ('m' as const) : ('l' as const);
-
-    return {
-      'data-test-subj': testSubj,
-      'data-test-image-url': iconType,
-      type: iconType,
-      title,
-      size,
-    };
-  };
-
-  const props = getIconProps();
-
-  return <EuiIcon className="logoImage" {...props} />;
+export const HomeIcon = ({ branding, logos }: Props) => {
+  const { applicationTitle = 'opensearch dashboards', useExpandedHeader = true } = branding;
+
+  const { url: markURL, type: markType } = logos.Mark;
+
+  let markIcon = markURL;
+  let testSubj = `${markType}Mark`;
+  // Marks look better at the large size
+  let markIconSize: IconSize = 'l';
+
+  // If no custom branded mark was set, use `home` icon only for expanded headers
+  if (markType !== 'custom' && useExpandedHeader) {
+    markIcon = 'home';
+    testSubj = 'homeIcon';
+    // Home icon should be medium to fit in with other icons
+    markIconSize = 'm';
+  }
+
+  const alt = `${applicationTitle} home`;
+
+  return (
+    <EuiIcon
+      data-test-subj={testSubj}
+      data-test-image-url={markIcon}
+      type={markIcon}
+      title={alt}
+      size={markIconSize}
+      className="logoImage"
+    />
+  );
 };
diff --git a/src/core/public/chrome/ui/header/home_loader.tsx b/src/core/public/chrome/ui/header/home_loader.tsx
index 0083df43ff8b..9463b41060f7 100644
--- a/src/core/public/chrome/ui/header/home_loader.tsx
+++ b/src/core/public/chrome/ui/header/home_loader.tsx
@@ -39,6 +39,7 @@ import { ChromeNavLink } from '../..';
 import { ChromeBranding } from '../../chrome_service';
 import { LoadingIndicator } from '../loading_indicator';
 import { HomeIcon } from './home_icon';
+import type { Logos } from '../../../../common/types';
 
 function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void {
   let current = element;
@@ -107,9 +108,10 @@ interface Props {
   loadingCount$: Observable<number>;
   navigateToApp: (appId: string) => void;
   branding: ChromeBranding;
+  logos: Logos;
 }
 
-export function HomeLoader({ href, navigateToApp, branding, ...observables }: Props) {
+export function HomeLoader({ href, navigateToApp, branding, logos, ...observables }: Props) {
   const forceNavigation = useObservable(observables.forceNavigation$, false);
   const navLinks = useObservable(observables.navLinks$, []);
   const loadingCount = useObservable(observables.loadingCount$, 0);
@@ -130,7 +132,7 @@ export function HomeLoader({ href, navigateToApp, branding, ...observables }: Pr
     >
       {!(loadingCount > 0) && (
         <div className="homeIconContainer">
-          <HomeIcon {...branding} />
+          <HomeIcon branding={branding} logos={logos} />
         </div>
       )}
       <div className="loaderContainer">
diff --git a/src/core/public/http/fetch.test.ts b/src/core/public/http/fetch.test.ts
index efc8d4aa31bb..20f070dbba80 100644
--- a/src/core/public/http/fetch.test.ts
+++ b/src/core/public/http/fetch.test.ts
@@ -825,4 +825,39 @@ describe('Fetch', () => {
       expect(usedSpy).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe('long numerals', () => {
+    const longPositive = BigInt(Number.MAX_SAFE_INTEGER) * 2n;
+    const longNegative = BigInt(Number.MIN_SAFE_INTEGER) * 2n;
+
+    it('should use alternate parser on JSON responses when asked to', async () => {
+      fetchMock.get('*', {
+        body: `{"long-max": ${longPositive}, "long-min": ${longNegative}}`,
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      await expect(fetchInstance.fetch('/my/path', { withLongNumerals: true })).resolves.toEqual({
+        'long-max': longPositive,
+        'long-min': longNegative,
+      });
+    });
+
+    it('should use alternate parser on non-JSON responses when asked to', async () => {
+      fetchMock.get('*', {
+        body: `{"long-max": ${longPositive}, "long-min": ${longNegative}}`,
+        status: 200,
+        headers: {
+          'Content-Type': 'text',
+        },
+      });
+
+      await expect(fetchInstance.fetch('/my/path', { withLongNumerals: true })).resolves.toEqual({
+        'long-max': longPositive,
+        'long-min': longNegative,
+      });
+    });
+  });
 });
diff --git a/src/core/public/http/fetch.ts b/src/core/public/http/fetch.ts
index 694372c46d99..767d58643003 100644
--- a/src/core/public/http/fetch.ts
+++ b/src/core/public/http/fetch.ts
@@ -31,7 +31,7 @@
 import { omitBy } from 'lodash';
 import { format } from 'url';
 import { BehaviorSubject } from 'rxjs';
-import { isRelativeUrl } from '@osd/std';
+import { isRelativeUrl, parse } from '@osd/std';
 
 import {
   IBasePath,
@@ -190,12 +190,12 @@ export class Fetch {
       if (NDJSON_CONTENT.test(contentType)) {
         body = await response.blob();
       } else if (JSON_CONTENT.test(contentType)) {
-        body = await response.json();
+        body = fetchOptions.withLongNumerals ? parse(await response.text()) : await response.json();
       } else {
         const text = await response.text();
 
         try {
-          body = JSON.parse(text);
+          body = fetchOptions.withLongNumerals ? parse(text) : JSON.parse(text);
         } catch (err) {
           body = text;
         }
diff --git a/src/core/public/http/types.ts b/src/core/public/http/types.ts
index ab046e6d2d5a..3b7dff71c811 100644
--- a/src/core/public/http/types.ts
+++ b/src/core/public/http/types.ts
@@ -257,6 +257,12 @@ export interface HttpFetchOptions extends HttpRequestInit {
    * response information. When `false`, the return type will just be the parsed response body. Defaults to `false`.
    */
   asResponse?: boolean;
+
+  /**
+   * When `true`, if the response has a JSON mime type, the {@link HttpResponse} will use an alternate JSON parser
+   * that converts long numerals to BigInts. Defaults to `false`.
+   */
+  withLongNumerals?: boolean;
 }
 
 /**
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index 9a38771f513e..03ef6b6392f9 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -50,7 +50,6 @@ import './index.scss';
 
 import {
   ChromeBadge,
-  ChromeBrand,
   ChromeBreadcrumb,
   ChromeHelpExtension,
   ChromeHelpExtensionMenuLink,
@@ -89,6 +88,7 @@ import {
 } from './context';
 import { Branding } from '../types';
 
+export type { Logos } from '../common';
 export { PackageInfo, EnvironmentMode } from '../server/types';
 /** @interal */
 export { CoreContext, CoreSystem } from './core_system';
@@ -193,7 +193,7 @@ export {
   ErrorToastOptions,
 } from './notifications';
 
-export { MountPoint, UnmountCallback, PublicUiSettingsParams } from './types';
+export { MountPoint, UnmountCallback, PublicUiSettingsParams, ChromeBrand } from './types';
 
 export { URL_MAX_LENGTH } from './core_app';
 
@@ -298,7 +298,6 @@ export interface CoreStart {
 export {
   Capabilities,
   ChromeBadge,
-  ChromeBrand,
   ChromeBreadcrumb,
   ChromeHelpExtension,
   ChromeHelpExtensionMenuLink,
diff --git a/src/core/public/plugins/plugins_service.test.ts b/src/core/public/plugins/plugins_service.test.ts
index 5fa3bf888b5c..b2cf4e8880cf 100644
--- a/src/core/public/plugins/plugins_service.test.ts
+++ b/src/core/public/plugins/plugins_service.test.ts
@@ -84,7 +84,7 @@ function createManifest(
     version: 'some-version',
     configPath: ['path'],
     requiredPlugins: required,
-    requiredOpenSearchPlugins: optional,
+    requiredEnginePlugins: optional,
     optionalPlugins: optional,
     requiredBundles: [],
   };
diff --git a/src/core/public/styles/_base.scss b/src/core/public/styles/_base.scss
index 4ef3313cc772..24e3bfb8a590 100644
--- a/src/core/public/styles/_base.scss
+++ b/src/core/public/styles/_base.scss
@@ -13,9 +13,6 @@
 @import "@elastic/charts/dist/theme";
 @import "@elastic/eui/src/themes/charts/theme";
 
-// Grab some nav-specific EUI vars
-@import "@elastic/eui/src/components/collapsible_nav/variables";
-
 // Application Layout
 $euiCollapsibleNavWidth: $euiSize * 20;
 
diff --git a/src/core/public/types.ts b/src/core/public/types.ts
index 0c1d6b70c728..ebbdd53f3cf5 100644
--- a/src/core/public/types.ts
+++ b/src/core/public/types.ts
@@ -37,6 +37,8 @@ export {
   StringValidationRegex,
 } from '../../core/types';
 
+export type { Logos } from '../common/types';
+
 /**
  * A function that should mount DOM content inside the provided container element
  * and return a handler to unmount it.
@@ -55,3 +57,12 @@ export type MountPoint<T extends HTMLElement = HTMLElement> = (element: T) => Un
  * @public
  */
 export type UnmountCallback = () => void;
+
+/**
+ * @deprecated: Use Branding instead
+ * @public
+ */
+export interface ChromeBrand {
+  logo?: string;
+  smallLogo?: string;
+}
diff --git a/src/core/server/core_app/assets/favicons/android-chrome-192x192.png b/src/core/server/core_app/assets/favicons/android-chrome-192x192.png
index 3fb291f8830c..a256e84b28b8 100644
Binary files a/src/core/server/core_app/assets/favicons/android-chrome-192x192.png and b/src/core/server/core_app/assets/favicons/android-chrome-192x192.png differ
diff --git a/src/core/server/core_app/assets/favicons/android-chrome-512x512.png b/src/core/server/core_app/assets/favicons/android-chrome-512x512.png
index 47bc1a2bd52b..404fbfad398f 100644
Binary files a/src/core/server/core_app/assets/favicons/android-chrome-512x512.png and b/src/core/server/core_app/assets/favicons/android-chrome-512x512.png differ
diff --git a/src/core/server/core_app/assets/favicons/apple-touch-icon.png b/src/core/server/core_app/assets/favicons/apple-touch-icon.png
index 3fdcfd3f09ed..00b8c190b08c 100644
Binary files a/src/core/server/core_app/assets/favicons/apple-touch-icon.png and b/src/core/server/core_app/assets/favicons/apple-touch-icon.png differ
diff --git a/src/core/server/core_app/assets/favicons/favicon-32x32.png b/src/core/server/core_app/assets/favicons/favicon-32x32.png
index ce2d8fe187fe..3046f5df76f1 100644
Binary files a/src/core/server/core_app/assets/favicons/favicon-32x32.png and b/src/core/server/core_app/assets/favicons/favicon-32x32.png differ
diff --git a/src/core/server/core_app/assets/favicons/manifest.json b/src/core/server/core_app/assets/favicons/manifest.json
index 9153b046420b..1318668560ac 100644
--- a/src/core/server/core_app/assets/favicons/manifest.json
+++ b/src/core/server/core_app/assets/favicons/manifest.json
@@ -3,12 +3,12 @@
     "short_name": "",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
diff --git a/src/core/server/core_app/assets/favicons/mstile-144x144.png b/src/core/server/core_app/assets/favicons/mstile-144x144.png
index 577ecfed1c02..5a379489e086 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-144x144.png and b/src/core/server/core_app/assets/favicons/mstile-144x144.png differ
diff --git a/src/core/server/core_app/assets/favicons/mstile-150x150.png b/src/core/server/core_app/assets/favicons/mstile-150x150.png
index 938310ed5537..b064558a1eda 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-150x150.png and b/src/core/server/core_app/assets/favicons/mstile-150x150.png differ
diff --git a/src/core/server/core_app/assets/favicons/mstile-310x150.png b/src/core/server/core_app/assets/favicons/mstile-310x150.png
index 6be5bf986934..d938be9ee090 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-310x150.png and b/src/core/server/core_app/assets/favicons/mstile-310x150.png differ
diff --git a/src/core/server/core_app/assets/favicons/mstile-310x310.png b/src/core/server/core_app/assets/favicons/mstile-310x310.png
index b45858ef4bad..0790cc1a7f5f 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-310x310.png and b/src/core/server/core_app/assets/favicons/mstile-310x310.png differ
diff --git a/src/core/server/core_app/assets/favicons/mstile-70x70.png b/src/core/server/core_app/assets/favicons/mstile-70x70.png
index 399a42ff6ae5..5155640f0976 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-70x70.png and b/src/core/server/core_app/assets/favicons/mstile-70x70.png differ
diff --git a/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg b/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg
index 6ea5f91851f0..5f8b7cfd8576 100644
--- a/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg
+++ b/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg
@@ -1,45 +1 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2979 6996 c-2 -2 -35 -7 -73 -11 -214 -21 -466 -145 -630 -310 -141
--142 -253 -355 -282 -535 -3 -19 -10 -55 -15 -80 -14 -73 -4 -345 16 -420 74
--280 294 -478 695 -624 41 -15 84 -31 95 -36 42 -18 300 -96 410 -125 125 -32
-513 -148 630 -188 303 -104 530 -209 705 -327 186 -126 401 -323 508 -465 104
--139 204 -380 228 -550 10 -68 11 -346 1 -420 l-7 -60 58 100 c96 167 179 349
-237 522 38 111 89 323 101 418 2 17 6 41 9 55 25 124 25 574 0 710 -1 8 -6 35
--10 60 -99 650 -448 1261 -970 1695 -80 67 -210 162 -272 200 -197 120 -331
-188 -494 248 -99 37 -281 91 -340 101 -19 3 -45 8 -59 11 -14 3 -47 8 -75 11
--27 3 -57 8 -65 11 -17 6 -395 15 -401 9z"/>
-<path d="M378 5382 c-91 -154 -217 -428 -243 -532 -1 -3 -4 -12 -8 -20 -26
--65 -76 -274 -93 -389 -4 -25 -8 -55 -10 -66 -22 -117 -25 -538 -5 -680 20
--149 22 -156 47 -270 57 -258 165 -534 291 -750 44 -74 136 -218 144 -225 3
--3 19 -25 36 -50 108 -158 310 -366 506 -524 89 -72 280 -206 292 -206 1 0 32
--17 66 -38 94 -56 256 -133 364 -172 292 -105 508 -144 790 -144 197 0 295 13
-430 59 166 56 296 136 421 259 152 151 240 318 290 546 21 98 26 339 8 434
--58 307 -247 497 -661 666 -51 21 -93 36 -93 33 0 -3 -6 -1 -12 4 -18 14 -219
-76 -589 182 -497 142 -717 219 -937 330 -250 125 -426 252 -624 453 -200 202
--314 417 -362 682 -15 85 -19 346 -6 436 4 30 7 56 6 57 -1 2 -23 -32 -48 -75z"/>
-<path d="M6643 4400 c-103 -52 -134 -113 -138 -280 -4 -141 -18 -332 -30 -410
--3 -19 -8 -48 -10 -65 -5 -38 -13 -86 -25 -150 -5 -27 -11 -61 -14 -75 -8 -48
--67 -275 -93 -355 -65 -204 -261 -655 -285 -655 -4 0 -8 -6 -8 -14 0 -17 -9
--33 -150 -246 -178 -271 -394 -523 -614 -715 -31 -28 -71 -63 -89 -78 -220
--194 -597 -427 -902 -557 -55 -23 -109 -46 -120 -51 -37 -16 -160 -61 -175
--64 -8 -2 -51 -15 -95 -29 -102 -32 -251 -69 -385 -95 -139 -27 -150 -29 -228
--36 -37 -4 -78 -8 -92 -11 -35 -5 -173 -14 -312 -19 -133 -4 -182 -20 -235
--75 -119 -123 -86 -312 70 -397 63 -35 523 -16 787 32 14 3 39 7 55 10 26 5
-82 16 150 29 11 3 40 9 65 15 25 7 54 14 64 16 532 124 1171 441 1595 790 196
-162 311 269 471 442 187 201 404 494 522 703 14 25 41 72 60 105 59 105 155
-305 212 446 49 120 141 388 150 436 2 10 9 38 16 63 7 25 13 52 15 60 2 8 11
-44 20 80 9 36 21 88 26 115 4 28 11 61 14 75 3 14 8 45 11 70 3 25 7 52 9 60
-3 8 7 38 10 65 3 28 7 66 10 85 11 79 20 263 20 395 0 115 -3 146 -18 172 -33
-61 -77 102 -133 123 -77 28 -129 26 -201 -10z"/>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 700 700"><path d="M297.9.4c-.2.2-3.5.7-7.3 1.1-21.4 2.1-46.6 14.5-63 31C213.5 46.7 202.3 68 199.4 86c-.3 1.9-1 5.5-1.5 8-1.4 7.3-.4 34.5 1.6 42 7.4 28 29.4 47.8 69.5 62.4 4.1 1.5 8.4 3.1 9.5 3.6 4.2 1.8 30 9.6 41 12.5 12.5 3.2 51.3 14.8 63 18.8 30.3 10.4 53 20.9 70.5 32.7 18.6 12.6 40.1 32.3 50.8 46.5 10.4 13.9 20.4 38 22.8 55 1 6.8 1.1 34.6.1 42l-.7 6 5.8-10c9.6-16.7 17.9-34.9 23.7-52.2 3.8-11.1 8.9-32.3 10.1-41.8.2-1.7.6-4.1.9-5.5 2.5-12.4 2.5-57.4 0-71-.1-.8-.6-3.5-1-6-9.9-65-44.8-126.1-97-169.5-8-6.7-21-16.2-27.2-20-19.7-12-33.1-18.8-49.4-24.8-9.9-3.7-28.1-9.1-34-10.1-1.9-.3-4.5-.8-5.9-1.1-1.4-.3-4.7-.8-7.5-1.1-2.7-.3-5.7-.8-6.5-1.1-1.7-.6-39.5-1.5-40.1-.9zM37.8 161.8c-9.1 15.4-21.7 42.8-24.3 53.2-.1.3-.4 1.2-.8 2-2.6 6.5-7.6 27.4-9.3 38.9-.4 2.5-.8 5.5-1 6.6-2.2 11.7-2.5 53.8-.5 68 2 14.9 2.2 15.6 4.7 27 5.7 25.8 16.5 53.4 29.1 75 4.4 7.4 13.6 21.8 14.4 22.5.3.3 1.9 2.5 3.6 5 10.8 15.8 31 36.6 50.6 52.4 8.9 7.2 28 20.6 29.2 20.6.1 0 3.2 1.7 6.6 3.8 9.4 5.6 25.6 13.3 36.4 17.2 29.2 10.5 50.8 14.4 79 14.4 19.7 0 29.5-1.3 43-5.9 16.6-5.6 29.6-13.6 42.1-25.9 15.2-15.1 24-31.8 29-54.6 2.1-9.8 2.6-33.9.8-43.4-5.8-30.7-24.7-49.7-66.1-66.6-5.1-2.1-9.3-3.6-9.3-3.3 0 .3-.6.1-1.2-.4-1.8-1.4-21.9-7.6-58.9-18.2-49.7-14.2-71.7-21.9-93.7-33-25-12.5-42.6-25.2-62.4-45.3-20-20.2-31.4-41.7-36.2-68.2-1.5-8.5-1.9-34.6-.6-43.6.4-3 .7-5.6.6-5.7-.1-.2-2.3 3.2-4.8 7.5z"/><path d="M664.3 260c-10.3 5.2-13.4 11.3-13.8 28-.4 14.1-1.8 33.2-3 41-.3 1.9-.8 4.8-1 6.5-.5 3.8-1.3 8.6-2.5 15-.5 2.7-1.1 6.1-1.4 7.5-.8 4.8-6.7 27.5-9.3 35.5-6.5 20.4-26.1 65.5-28.5 65.5-.4 0-.8.6-.8 1.4 0 1.7-.9 3.3-15 24.6-17.8 27.1-39.4 52.3-61.4 71.5-3.1 2.8-7.1 6.3-8.9 7.8-22 19.4-59.7 42.7-90.2 55.7-5.5 2.3-10.9 4.6-12 5.1-3.7 1.6-16 6.1-17.5 6.4-.8.2-5.1 1.5-9.5 2.9-10.2 3.2-25.1 6.9-38.5 9.5-13.9 2.7-15 2.9-22.8 3.6-3.7.4-7.8.8-9.2 1.1-3.5.5-17.3 1.4-31.2 1.9-13.3.4-18.2 2-23.5 7.5-11.9 12.3-8.6 31.2 7 39.7 6.3 3.5 52.3 1.6 78.7-3.2 1.4-.3 3.9-.7 5.5-1 2.6-.5 8.2-1.6 15-2.9 1.1-.3 4-.9 6.5-1.5 2.5-.7 5.4-1.4 6.4-1.6 53.2-12.4 117.1-44.1 159.5-79 19.6-16.2 31.1-26.9 47.1-44.2 18.7-20.1 40.4-49.4 52.2-70.3 1.4-2.5 4.1-7.2 6-10.5 5.9-10.5 15.5-30.5 21.2-44.6 4.9-12 14.1-38.8 15-43.6.2-1 .9-3.8 1.6-6.3.7-2.5 1.3-5.2 1.5-6l2-8c.9-3.6 2.1-8.8 2.6-11.5.4-2.8 1.1-6.1 1.4-7.5.3-1.4.8-4.5 1.1-7 .3-2.5.7-5.2.9-6 .3-.8.7-3.8 1-6.5.3-2.8.7-6.6 1-8.5 1.1-7.9 2-26.3 2-39.5 0-11.5-.3-14.6-1.8-17.2-3.3-6.1-7.7-10.2-13.3-12.3-7.7-2.8-12.9-2.6-20.1 1z"/></svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch.svg b/src/core/server/core_app/assets/logos/opensearch.svg
new file mode 100644
index 000000000000..9795f6c332ab
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 372 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}}</style>
+  <g class="a">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M107.78 48.26c3.15-4.49 4.72-10.92 4.72-19.28 0-8.36-1.56-14.77-4.69-19.24C104.7 5.24 100.2 3 94.34 3 88.4 3 83.87 5.23 80.72 9.7 77.57 14.15 76 20.55 76 28.91c0 8.43 1.57 14.9 4.72 19.39 3.15 4.47 7.67 6.7 13.55 6.7 5.86 0 10.36-2.25 13.5-6.74Zm-19.94-6.11c-1.46-3.02-2.19-7.4-2.19-13.17 0-5.78.73-10.17 2.2-13.16 1.45-3.02 3.62-4.53 6.49-4.53 5.65 0 8.47 5.9 8.47 17.7 0 11.79-2.85 17.68-8.54 17.68-2.83 0-4.97-1.5-6.43-4.52ZM128.2 54c1.28.74 2.66 1 4.31 1 3.53 0 6.4-1.67 8.44-5.24C142.98 46.2 144 41.28 144 35c0-6.36-.99-11.28-2.96-14.76-1.97-3.5-4.7-5.24-8.18-5.24-3.62 0-6.46 2.16-8.36 6h-.5l-1.5-5h-7v55.5h9V55c0-.65-.13-2.85-.5-6h.5a10.06 10.06 0 0 0 3.69 5Zm-2.3-28.62c.8-1.69 2.09-2.53 3.88-2.53 1.67 0 2.9 1 3.68 2.98.8 2 1.2 5 1.2 9.03 0 8.2-1.6 12.3-4.81 12.3-1.86 0-3.19-.98-4-2.92-.8-1.95-1.2-5.05-1.2-9.3v-1.22c.05-3.9.46-6.67 1.24-8.34ZM161.64 55c-4.84 0-8.67-1.7-11.48-5.13-2.78-3.44-4.17-8.3-4.17-14.58 0-6.37 1.26-11.34 3.8-14.92 2.52-3.58 6.04-5.37 10.56-5.37 4.23 0 7.55 1.54 9.99 4.6 2.43 3.05 3.65 7.34 3.65 12.85v5.05h-18.5c.07 3.44.67 5.88 2.01 7.56a6.77 6.77 0 0 0 5.57 2.5c3.01 0 6.1-.94 9.25-2.81v7.58c-2.97 1.78-6.53 2.67-10.68 2.67Zm-1.35-32.9c-1.33 0-2.42.7-3.27 2.11-.86 1.39-1.4 3.86-1.53 6.79h9.5c-.05-2.82-.55-5.26-1.37-6.72-.8-1.45-1.92-2.18-3.33-2.18Zm36.2 8.9v23h9V29.2c0-4.64-.88-8.17-2.63-10.58C201.14 16.2 198.52 15 195 15c-2.08 0-3.9.51-5.44 1.53-1.55 1-2.74 2.68-3.57 4.47h-.5l-1.25-5H177v38h9.5V35.75c0-4.71.17-7.92 1.1-9.9.92-1.99 2.37-2.98 4.36-2.98 1.5 0 2.59.71 3.25 2.15A13.12 13.12 0 0 1 196.5 31Z"/>
+    <path d="M61.74 26.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 28.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+    <path d="M3.92 17A24.43 24.43 0 0 0 .05 31.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 36.8 25 36 21.79 35.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  </g>
+  <g class="b">
+    <path d="M48.08 41a24.43 24.43 0 0 0 3.87-14.9c-.86-13.73-13.3-24.14-25.03-23.02-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 21.2 27 22 30.21 22.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M362.5 31v23h9V29c0-4.6-.9-8.09-2.7-10.45-1.8-2.38-4.52-3.55-8.05-3.55-3.83 0-6.9 2.24-8.75 6h-.5c.14-1.94.26-3.05.35-3.86.1-.84.15-1.36.15-2.14V.5h-9V54h9.5V35.5c0-4.15.14-7.22 1-9.42.85-2.22 2.34-3.33 4.46-3.33 2.84 0 4.54 2.63 4.54 8.25ZM231.85 51.23c2.43-2.52 3.65-6.14 3.65-10.86 0-2.96-.67-5.59-2-7.9-1.3-2.3-3.63-4.56-6.98-6.77-2.48-1.62-4.22-3.06-5.23-4.33a7.08 7.08 0 0 1-1.47-4.46c0-1.73.41-3.1 1.23-4.08a4.39 4.39 0 0 1 3.58-1.53c1.4 0 2.7.26 3.93.76 1.23.51 2.41 1.09 3.54 1.73l3.15-7.54A21.76 21.76 0 0 0 223.93 3c-4.12 0-7.4 1.27-9.86 3.8-2.43 2.54-3.65 5.98-3.65 10.32 0 2.26.3 4.24.91 5.95.63 1.7 1.51 3.25 2.63 4.63a24.91 24.91 0 0 0 5.02 4.3c2.53 1.7 4.34 3.26 5.44 4.66a7.22 7.22 0 0 1 1.65 4.6c0 1.71-.47 3.06-1.4 4.05-.92 1-2.29 1.49-4.11 1.49-3.2 0-6.72-1.23-10.56-3.7v9.3c3.13 1.74 6.93 2.6 11.4 2.6 4.56 0 8.04-1.26 10.45-3.77Zm9.82-1.36c2.81 3.42 6.64 5.13 11.48 5.13 4.15 0 7.71-.89 10.68-2.67v-7.58c-3.15 1.87-6.24 2.8-9.25 2.8a6.77 6.77 0 0 1-5.57-2.49c-1.34-1.68-1.94-4.12-2.01-7.56h18.5v-5.05c0-5.51-1.22-9.8-3.65-12.84-2.44-3.07-5.76-4.61-9.99-4.61-4.52 0-8.04 1.79-10.57 5.37-2.53 3.58-3.79 8.55-3.79 14.92 0 6.28 1.4 11.14 4.17 14.58Zm6.86-25.66c.85-1.4 1.94-2.11 3.27-2.11 1.41 0 2.52.73 3.33 2.18.82 1.46 1.32 3.9 1.37 6.72H247c.14-2.93.67-5.4 1.53-6.79ZM288 54l-1.5-5h-.5c-1.38 2.26-2.7 3.87-4.18 4.72a10.99 10.99 0 0 1-5.57 1.28 8.17 8.17 0 0 1-6.8-3.18c-1.63-2.12-2.45-5.07-2.45-8.85 0-4.06 1.12-7.07 3.36-9.02 2.27-1.99 5.65-3.08 10.13-3.29l5.19-.2v-2.77c0-3.6-1.58-5.4-4.73-5.4-2.34 0-5.03.9-8.06 2.7l-3.23-6.36A23.23 23.23 0 0 1 282.25 15c4.13 0 7.34 1.18 9.5 3.53 2.16 2.32 3.25 5.63 3.25 9.92V54h-7Zm-7.93-6.2c1.7 0 3.06-.74 4.07-2.24 1.02-1.52 1.54-3.54 1.54-6.05v-3.25l-2.88.14c-2.12.12-3.69.71-4.7 1.8-.97 1.08-1.46 2.7-1.46 4.84 0 3.18 1.14 4.77 3.43 4.77ZM318 15.76a14.31 14.31 0 0 0-3.78-.75 6.1 6.1 0 0 0-4.13 1.55A10.4 10.4 0 0 0 307 21h-.5l-1.5-5h-7v38h9.46V34c0-3.36.22-5.52 1.4-7.27a5.76 5.76 0 0 1 5.09-2.66c1.02 0 1.91.2 2.55.43l1.5-8.75ZM332 55c-4.56 0-8.05-1.52-10.43-4.87-2.38-3.35-3.57-8.27-3.57-14.75 0-6.8 1.12-11.86 3.37-15.2 2.26-3.35 5.65-5.18 10.37-5.18 1.41 0 3.01.36 4.57.78 1.56.41 3.45.94 4.69 1.72l-3.11 7.24c-1.9-1.13-3.58-1.7-5.05-1.7-1.95 0-3.35 1.04-4.23 3.09-.84 2.03-1.27 5.1-1.27 9.18 0 4 .43 6.98 1.27 8.97.85 1.96 2.24 2.94 4.16 2.94 2.3 0 4.68-.8 7.18-2.42v8.1c-2.4 1.5-5.04 2.1-7.95 2.1Z"/>
+  </g>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_center_mark.svg b/src/core/server/core_app/assets/logos/opensearch_center_mark.svg
new file mode 100644
index 000000000000..42a29b55050c
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_center_mark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+    <style>.a{fill:#005EB8}.b{fill:#003B5C}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}}</style>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+    <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_center_mark_on_dark.svg b/src/core/server/core_app/assets/logos/opensearch_center_mark_on_dark.svg
new file mode 100644
index 000000000000..43091f7d039a
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_center_mark_on_dark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+    <style>.a{fill:#00A3E0}.b{fill:#B9D9EB}</style>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+    <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_center_mark_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_center_mark_on_light.svg
new file mode 100644
index 000000000000..5a0d83c568b7
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_center_mark_on_light.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+    <style>.a{fill:#005EB8}.b{fill:#003B5C}</style>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+    <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_dashboards.svg b/src/core/server/core_app/assets/logos/opensearch_dashboards.svg
index bb85dcdd10ed..35f56544a26c 100644
--- a/src/core/server/core_app/assets/logos/opensearch_dashboards.svg
+++ b/src/core/server/core_app/assets/logos/opensearch_dashboards.svg
@@ -1,5 +1,5 @@
 <svg height="28" width="259" viewBox="0 0 148 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <style>.a{fill:#005EB8}.b{fill:#003B5C}.c{fill:#002A3A}</style>
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}.c{fill:#002A3A}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}.c{fill:#D9E1E2}}</style>
   <g class="a">
     <path d="M13.72 5.88a.49.49 0 0 0-.49.49 7.28 7.28 0 0 1-7.28 7.28.49.49 0 1 0 0 .97c4.57 0 8.26-3.7 8.26-8.25a.49.49 0 0 0-.49-.5Z"/>
     <path d="M1.24 3.83A5.28 5.28 0 0 0 .4 7.05c.19 2.96 2.87 5.2 5.4 4.97 1-.1 2.02-.9 1.93-2.36-.04-.63-.35-1-.85-1.28a7.65 7.65 0 0 0-1.78-.64c-.84-.24-1.81-.5-2.56-1.06-.9-.66-1.51-1.42-1.3-2.85Z"/>
diff --git a/src/core/server/core_app/assets/logos/opensearch_dashboards_darkmode.svg b/src/core/server/core_app/assets/logos/opensearch_dashboards_on_dark.svg
similarity index 100%
rename from src/core/server/core_app/assets/logos/opensearch_dashboards_darkmode.svg
rename to src/core/server/core_app/assets/logos/opensearch_dashboards_on_dark.svg
diff --git a/src/core/server/core_app/assets/logos/opensearch_dashboards_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_dashboards_on_light.svg
new file mode 100644
index 000000000000..bb85dcdd10ed
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_dashboards_on_light.svg
@@ -0,0 +1,13 @@
+<svg height="28" width="259" viewBox="0 0 148 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}.c{fill:#002A3A}</style>
+  <g class="a">
+    <path d="M13.72 5.88a.49.49 0 0 0-.49.49 7.28 7.28 0 0 1-7.28 7.28.49.49 0 1 0 0 .97c4.57 0 8.26-3.7 8.26-8.25a.49.49 0 0 0-.49-.5Z"/>
+    <path d="M1.24 3.83A5.28 5.28 0 0 0 .4 7.05c.19 2.96 2.87 5.2 5.4 4.97 1-.1 2.02-.9 1.93-2.36-.04-.63-.35-1-.85-1.28a7.65 7.65 0 0 0-1.78-.64c-.84-.24-1.81-.5-2.56-1.06-.9-.66-1.51-1.42-1.3-2.85Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.67 10.58c.68-.97 1.02-2.36 1.02-4.16 0-1.81-.34-3.2-1.02-4.16A3.33 3.33 0 0 0 20.77.8a3.4 3.4 0 0 0-2.95 1.45c-.68.96-1.02 2.34-1.02 4.15 0 1.82.34 3.22 1.02 4.19a3.36 3.36 0 0 0 2.93 1.44c1.26 0 2.24-.48 2.92-1.45Zm-4.3-1.32a6.74 6.74 0 0 1-.48-2.84c0-1.25.16-2.2.47-2.85.32-.65.78-.98 1.4-.98 1.22 0 1.83 1.28 1.83 3.83 0 2.54-.61 3.82-1.84 3.82-.61 0-1.07-.33-1.39-.98Zm8.7 2.56c.28.16.58.21.93.21.77 0 1.39-.36 1.83-1.13.44-.77.66-1.83.66-3.18 0-1.38-.21-2.44-.64-3.2-.43-.75-1.02-1.12-1.77-1.12-.78 0-1.4.46-1.8 1.3h-.11l-.32-1.09h-1.52V15.6h1.95v-3.57c0-.14-.03-.61-.11-1.3h.1c.17.5.53.92.8 1.09Zm-.5-6.18c.18-.37.46-.55.84-.55.37 0 .63.22.8.65.17.43.26 1.08.26 1.95 0 1.76-.35 2.65-1.04 2.65-.4 0-.69-.21-.86-.63a5.67 5.67 0 0 1-.26-2.01v-.26c0-.84.1-1.44.27-1.8Zm7.73 6.4a3.04 3.04 0 0 1-2.48-1.11c-.6-.75-.9-1.8-.9-3.15 0-1.38.27-2.45.82-3.23a2.64 2.64 0 0 1 2.28-1.15c.91 0 1.63.33 2.16.99.52.66.79 1.58.79 2.77v1.1h-4c.02.74.15 1.26.44 1.63.29.36.69.54 1.2.54.65 0 1.31-.2 2-.61v1.64a4.4 4.4 0 0 1-2.31.57ZM35 4.92c-.28 0-.51.15-.7.45-.18.3-.3.84-.33 1.47h2.05a3.3 3.3 0 0 0-.3-1.45c-.17-.31-.4-.47-.71-.47Zm7.83 1.92v4.97h1.94V6.46c0-1-.2-1.76-.57-2.28-.37-.52-.94-.78-1.7-.78a1.99 1.99 0 0 0-1.94 1.29h-.11l-.27-1.08h-1.57v8.2h2.06V7.89c0-1.02.03-1.71.23-2.14.2-.43.52-.65.94-.65.33 0 .56.16.7.47.15.31.29.68.29 1.3Z"/>
+  </g>
+  <g class="b">
+    <path d="M10.77 9.01c.47-.77.93-1.79.84-3.22C11.42 2.83 8.74.58 6.2.82c-1 .1-2.02.9-1.93 2.36.04.63.35 1 .85 1.28a8.2 8.2 0 0 0 1.79.64c.83.24 1.8.5 2.55 1.05.9.66 1.51 1.43 1.3 2.86Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M78.67 6.85v4.97h1.95v-5.4c0-1-.2-1.75-.59-2.26-.39-.51-.97-.76-1.74-.76-.82 0-1.49.48-1.89 1.3h-.1l.07-.84c.02-.18.03-.3.03-.46V.26h-1.94v11.56h2.05v-4c0-.9.03-1.56.22-2.03.18-.48.5-.72.96-.72.62 0 .98.57.98 1.78Zm-28.21 4.37c.52-.54.79-1.33.79-2.35 0-.63-.15-1.2-.43-1.7a4.6 4.6 0 0 0-1.51-1.46 4.84 4.84 0 0 1-1.13-.94c-.21-.27-.32-.6-.32-.96 0-.38.09-.67.27-.88a.95.95 0 0 1 .77-.33c.3 0 .58.05.85.16s.52.24.76.38l.68-1.63a4.7 4.7 0 0 0-2.44-.7c-.9 0-1.6.27-2.13.82a3.08 3.08 0 0 0-.79 2.22 3.51 3.51 0 0 0 .77 2.29c.24.3.6.6 1.08.93a5 5 0 0 1 1.17 1c.24.3.36.63.36 1s-.1.66-.3.87c-.2.22-.5.32-.89.32a4.3 4.3 0 0 1-2.28-.8v2.01c.68.38 1.5.56 2.46.56.99 0 1.74-.27 2.26-.81Zm2.12-.3c.6.74 1.43 1.11 2.48 1.11.9 0 1.66-.19 2.3-.57V9.82c-.68.4-1.34.6-2 .6-.5 0-.9-.17-1.2-.53-.29-.37-.41-.9-.43-1.64h4V7.16c0-1.19-.27-2.11-.8-2.77a2.6 2.6 0 0 0-2.15-1c-.98 0-1.74.4-2.28 1.16a5.51 5.51 0 0 0-.82 3.23c0 1.35.3 2.4.9 3.15Zm1.48-5.54c.19-.3.42-.45.7-.45.31 0 .55.16.73.47.17.31.28.84.3 1.45h-2.06c.03-.63.14-1.17.33-1.47Zm8.52 6.44-.32-1.08h-.1c-.3.49-.6.83-.9 1.02-.33.18-.73.27-1.21.27-.62 0-1.11-.23-1.47-.68a3.06 3.06 0 0 1-.53-1.91c0-.88.24-1.53.73-1.95a3.5 3.5 0 0 1 2.18-.71l1.12-.05v-.6c0-.77-.34-1.16-1.02-1.16-.5 0-1.08.2-1.74.58l-.7-1.37a5.02 5.02 0 0 1 2.72-.78c.9 0 1.59.25 2.05.76.47.5.7 1.21.7 2.14v5.52h-1.5Zm-1.7-1.34a1 1 0 0 0 .87-.48c.22-.33.33-.77.33-1.31v-.7l-.62.03c-.46.02-.8.15-1.01.39-.21.23-.32.58-.32 1.04 0 .69.25 1.03.74 1.03Zm8.18-6.92a3.1 3.1 0 0 0-.81-.16c-.34 0-.64.1-.9.33-.25.22-.45.44-.66.96h-.11l-.32-1.08h-1.52v8.2h2.05V7.5c0-.73.04-1.2.3-1.57.25-.38.62-.58 1.1-.58.22 0 .41.05.55.1l.32-1.9Zm3.03 8.47c-.99 0-1.74-.33-2.26-1.05a5.48 5.48 0 0 1-.77-3.18c0-1.47.25-2.56.73-3.29a2.52 2.52 0 0 1 2.24-1.11c.3 0 .65.07.99.16.33.1.74.2 1 .38l-.66 1.56a2.2 2.2 0 0 0-1.1-.37c-.41 0-.72.23-.9.67-.19.44-.28 1.1-.28 1.98 0 .86.1 1.5.27 1.94.19.42.49.63.9.63.5 0 1.01-.17 1.55-.52v1.75c-.52.32-1.09.45-1.71.45Z"/>
+  </g>
+  <path class="c" d="M90.82 6.37c0 1.77-.36 3.13-1.08 4.07a3.69 3.69 0 0 1-3.11 1.4H84V1.1h2.87a3.4 3.4 0 0 1 2.91 1.39c.7.92 1.04 2.2 1.04 3.87Zm-2.04.06c0-2.4-.66-3.6-1.98-3.6H86v7.26h.64c.73 0 1.27-.3 1.62-.9.34-.62.52-1.54.52-2.76Zm7.05 5.41-.39-1.12h-.04a2.9 2.9 0 0 1-.9 1c-.3.17-.7.27-1.16.27a1.7 1.7 0 0 1-1.43-.68 3.04 3.04 0 0 1-.51-1.88c0-.86.23-1.5.7-1.91a3.36 3.36 0 0 1 2.12-.7l1.1-.04v-.6c0-.75-.34-1.14-1-1.14-.49 0-1.05.2-1.69.58l-.67-1.35c.81-.52 1.7-.77 2.65-.77.86 0 1.52.25 1.97.74a3 3 0 0 1 .68 2.11v5.49h-1.43Zm-1.7-1.38c.36 0 .65-.16.86-.48.21-.32.32-.75.32-1.28V8l-.6.04c-.45.02-.77.15-.98.38-.2.23-.31.57-.31 1.03 0 .67.24 1 .72 1Zm8.65-1.01c0 .8-.24 1.42-.7 1.87-.47.44-1.16.67-2.07.67-.8 0-1.47-.16-2-.48V9.8a3.82 3.82 0 0 0 1.9.65c.3 0 .52-.07.68-.22a.78.78 0 0 0 .24-.6.95.95 0 0 0-.25-.65 4.24 4.24 0 0 0-.91-.68 3.82 3.82 0 0 1-1.28-1.12c-.26-.4-.38-.88-.38-1.42 0-.7.23-1.24.7-1.65.49-.4 1.14-.6 1.98-.6.72 0 1.4.18 2.04.56l-.64 1.4a2.99 2.99 0 0 0-1.38-.42c-.24 0-.43.06-.56.2a.69.69 0 0 0-.18.48c0 .22.07.42.22.59.16.17.45.38.87.64.5.3.87.57 1.07.78a2.32 2.32 0 0 1 .65 1.7Zm4.85 2.39V6.97c0-1.2-.3-1.8-.9-1.8-.45 0-.77.24-.95.71a5.9 5.9 0 0 0-.27 2.03v3.93h-1.95V.42h1.95v2.54c0 .33-.03.91-.09 1.75h.1c.4-.8 1-1.2 1.81-1.2.75 0 1.31.25 1.7.76.38.5.57 1.25.57 2.23v5.34h-1.97Zm6.79-8.33c.74 0 1.32.37 1.75 1.1.42.75.64 1.79.64 3.13a6.3 6.3 0 0 1-.65 3.14c-.42.74-1.02 1.1-1.77 1.1-.37 0-.7-.07-.98-.23a2.42 2.42 0 0 1-.8-.84h-.12l-.33.93h-1.44V.42h1.96V3.1l-.01.35c0 .13-.04.55-.1 1.29h.1c.25-.45.5-.77.78-.95.28-.18.6-.27.97-.27Zm-.68 1.66a.84.84 0 0 0-.8.52c-.17.35-.25.96-.26 1.83v.2c0 .95.08 1.62.24 2 .18.4.45.58.83.58.7 0 1.06-.86 1.06-2.6 0-1.68-.36-2.53-1.07-2.53Zm10.04 2.57c0 1.34-.28 2.38-.85 3.13a2.77 2.77 0 0 1-2.33 1.12 2.8 2.8 0 0 1-1.66-.52 3.25 3.25 0 0 1-1.1-1.47 6.02 6.02 0 0 1-.4-2.26c0-1.33.28-2.36.85-3.1a2.76 2.76 0 0 1 2.34-1.13c.96 0 1.73.38 2.3 1.15a5 5 0 0 1 .85 3.08Zm-4.34 0c0 .85.1 1.5.28 1.93.18.43.48.65.9.65.77 0 1.17-.86 1.17-2.58 0-.86-.1-1.5-.3-1.92-.18-.42-.47-.64-.88-.64-.4 0-.7.22-.9.64a5 5 0 0 0-.27 1.92Zm9.26 4.1-.38-1.12h-.04c-.3.48-.6.81-.9 1-.3.17-.7.27-1.17.27a1.7 1.7 0 0 1-1.42-.68 3.04 3.04 0 0 1-.51-1.88c0-.86.23-1.5.7-1.91a3.36 3.36 0 0 1 2.12-.7l1.09-.04v-.6c0-.75-.33-1.14-1-1.14-.48 0-1.04.2-1.68.58l-.68-1.35c.82-.52 1.7-.77 2.65-.77.87 0 1.53.25 1.98.74.45.5.68 1.2.68 2.11v5.49h-1.43Zm-1.69-1.38c.36 0 .64-.16.85-.48.22-.32.33-.75.33-1.28V8l-.6.04c-.45.02-.78.15-.99.38-.2.23-.3.57-.3 1.03 0 .67.23 1 .71 1Zm7.74-6.95c.24 0 .48.04.7.11l-.22 1.9a1.62 1.62 0 0 0-.54-.08c-.47 0-.84.19-1.1.57a2.9 2.9 0 0 0-.37 1.62v4.2h-1.95V3.67h1.6l.22 1.28h.07c.21-.51.45-.88.7-1.1.26-.22.55-.33.9-.33Zm3.28 8.48c-.75 0-1.35-.38-1.78-1.12a6.17 6.17 0 0 1-.66-3.1c0-1.33.22-2.38.64-3.13.43-.75 1.01-1.13 1.76-1.13.37 0 .7.1.96.28.28.18.53.49.76.92h.12a23 23 0 0 1-.1-1.56V.42h1.96v11.42h-1.45l-.33-1.07h-.07c-.42.81-1.02 1.22-1.81 1.22Zm.63-1.66c.36 0 .63-.16.8-.49.16-.33.25-.93.26-1.8v-.26c0-.95-.08-1.62-.25-2-.17-.39-.45-.58-.83-.58-.36 0-.63.22-.8.67a5.9 5.9 0 0 0-.24 1.93c0 .84.09 1.48.25 1.9.17.42.44.63.8.63Zm8.61-.88c0 .8-.24 1.42-.7 1.87-.47.44-1.16.67-2.07.67-.8 0-1.47-.16-2-.48V9.8a3.83 3.83 0 0 0 1.9.65c.3 0 .53-.07.68-.22a.78.78 0 0 0 .24-.6.95.95 0 0 0-.24-.65 4.24 4.24 0 0 0-.92-.68 3.82 3.82 0 0 1-1.28-1.12 2.6 2.6 0 0 1-.38-1.42c0-.7.24-1.24.71-1.65a3 3 0 0 1 1.97-.6c.72 0 1.4.18 2.05.56l-.64 1.4a2.98 2.98 0 0 0-1.38-.42c-.25 0-.44.06-.57.2a.69.69 0 0 0-.18.48c0 .22.07.42.23.59.15.17.44.38.86.64.51.3.87.57 1.07.78a2.36 2.36 0 0 1 .65 1.7Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_mark.svg b/src/core/server/core_app/assets/logos/opensearch_mark.svg
new file mode 100644
index 000000000000..b1986db87913
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_mark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}}</style>
+  <path class="a" d="M61.74 23.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 25.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+  <path class="a" d="M3.92 14A24.43 24.43 0 0 0 .05 28.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 33.8 25 33 21.79 32.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  <path class="b" d="M48.08 38a24.43 24.43 0 0 0 3.87-14.9C51.09 9.36 38.65-1.05 26.92.07c-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 18.2 27 19 30.21 19.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_mark_on_dark.svg b/src/core/server/core_app/assets/logos/opensearch_mark_on_dark.svg
new file mode 100644
index 000000000000..d202064dea30
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_mark_on_dark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <style>.a{fill:#00A3E0}.b{fill:#B9D9EB}</style>
+  <path class="a" d="M61.74 23.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 25.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+  <path class="a" d="M3.92 14A24.43 24.43 0 0 0 .05 28.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 33.8 25 33 21.79 32.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  <path class="b" d="M48.08 38a24.43 24.43 0 0 0 3.87-14.9C51.09 9.36 38.65-1.05 26.92.07c-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 18.2 27 19 30.21 19.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_mark_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_mark_on_light.svg
new file mode 100644
index 000000000000..2c6bc1ee17e0
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_mark_on_light.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}</style>
+  <path class="a" d="M61.74 23.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 25.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+  <path class="a" d="M3.92 14A24.43 24.43 0 0 0 .05 28.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 33.8 25 33 21.79 32.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  <path class="b" d="M48.08 38a24.43 24.43 0 0 0 3.87-14.9C51.09 9.36 38.65-1.05 26.92.07c-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 18.2 27 19 30.21 19.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_on_dark.svg b/src/core/server/core_app/assets/logos/opensearch_on_dark.svg
new file mode 100644
index 000000000000..1830ff7f6683
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_on_dark.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 372 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>.a{fill:#00A3E0}.b{fill:#B9D9EB}</style>
+  <g class="a">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M107.78 48.26c3.15-4.49 4.72-10.92 4.72-19.28 0-8.36-1.56-14.77-4.69-19.24C104.7 5.24 100.2 3 94.34 3 88.4 3 83.87 5.23 80.72 9.7 77.57 14.15 76 20.55 76 28.91c0 8.43 1.57 14.9 4.72 19.39 3.15 4.47 7.67 6.7 13.55 6.7 5.86 0 10.36-2.25 13.5-6.74Zm-19.94-6.11c-1.46-3.02-2.19-7.4-2.19-13.17 0-5.78.73-10.17 2.2-13.16 1.45-3.02 3.62-4.53 6.49-4.53 5.65 0 8.47 5.9 8.47 17.7 0 11.79-2.85 17.68-8.54 17.68-2.83 0-4.97-1.5-6.43-4.52ZM128.2 54c1.28.74 2.66 1 4.31 1 3.53 0 6.4-1.67 8.44-5.24C142.98 46.2 144 41.28 144 35c0-6.36-.99-11.28-2.96-14.76-1.97-3.5-4.7-5.24-8.18-5.24-3.62 0-6.46 2.16-8.36 6h-.5l-1.5-5h-7v55.5h9V55c0-.65-.13-2.85-.5-6h.5a10.06 10.06 0 0 0 3.69 5Zm-2.3-28.62c.8-1.69 2.09-2.53 3.88-2.53 1.67 0 2.9 1 3.68 2.98.8 2 1.2 5 1.2 9.03 0 8.2-1.6 12.3-4.81 12.3-1.86 0-3.19-.98-4-2.92-.8-1.95-1.2-5.05-1.2-9.3v-1.22c.05-3.9.46-6.67 1.24-8.34ZM161.64 55c-4.84 0-8.67-1.7-11.48-5.13-2.78-3.44-4.17-8.3-4.17-14.58 0-6.37 1.26-11.34 3.8-14.92 2.52-3.58 6.04-5.37 10.56-5.37 4.23 0 7.55 1.54 9.99 4.6 2.43 3.05 3.65 7.34 3.65 12.85v5.05h-18.5c.07 3.44.67 5.88 2.01 7.56a6.77 6.77 0 0 0 5.57 2.5c3.01 0 6.1-.94 9.25-2.81v7.58c-2.97 1.78-6.53 2.67-10.68 2.67Zm-1.35-32.9c-1.33 0-2.42.7-3.27 2.11-.86 1.39-1.4 3.86-1.53 6.79h9.5c-.05-2.82-.55-5.26-1.37-6.72-.8-1.45-1.92-2.18-3.33-2.18Zm36.2 8.9v23h9V29.2c0-4.64-.88-8.17-2.63-10.58C201.14 16.2 198.52 15 195 15c-2.08 0-3.9.51-5.44 1.53-1.55 1-2.74 2.68-3.57 4.47h-.5l-1.25-5H177v38h9.5V35.75c0-4.71.17-7.92 1.1-9.9.92-1.99 2.37-2.98 4.36-2.98 1.5 0 2.59.71 3.25 2.15A13.12 13.12 0 0 1 196.5 31Z"/>
+    <path d="M61.74 26.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 28.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+    <path d="M3.92 17A24.43 24.43 0 0 0 .05 31.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 36.8 25 36 21.79 35.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  </g>
+  <g class="b">
+    <path d="M48.08 41a24.43 24.43 0 0 0 3.87-14.9c-.86-13.73-13.3-24.14-25.03-23.02-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 21.2 27 22 30.21 22.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M362.5 31v23h9V29c0-4.6-.9-8.09-2.7-10.45-1.8-2.38-4.52-3.55-8.05-3.55-3.83 0-6.9 2.24-8.75 6h-.5c.14-1.94.26-3.05.35-3.86.1-.84.15-1.36.15-2.14V.5h-9V54h9.5V35.5c0-4.15.14-7.22 1-9.42.85-2.22 2.34-3.33 4.46-3.33 2.84 0 4.54 2.63 4.54 8.25ZM231.85 51.23c2.43-2.52 3.65-6.14 3.65-10.86 0-2.96-.67-5.59-2-7.9-1.3-2.3-3.63-4.56-6.98-6.77-2.48-1.62-4.22-3.06-5.23-4.33a7.08 7.08 0 0 1-1.47-4.46c0-1.73.41-3.1 1.23-4.08a4.39 4.39 0 0 1 3.58-1.53c1.4 0 2.7.26 3.93.76 1.23.51 2.41 1.09 3.54 1.73l3.15-7.54A21.76 21.76 0 0 0 223.93 3c-4.12 0-7.4 1.27-9.86 3.8-2.43 2.54-3.65 5.98-3.65 10.32 0 2.26.3 4.24.91 5.95.63 1.7 1.51 3.25 2.63 4.63a24.91 24.91 0 0 0 5.02 4.3c2.53 1.7 4.34 3.26 5.44 4.66a7.22 7.22 0 0 1 1.65 4.6c0 1.71-.47 3.06-1.4 4.05-.92 1-2.29 1.49-4.11 1.49-3.2 0-6.72-1.23-10.56-3.7v9.3c3.13 1.74 6.93 2.6 11.4 2.6 4.56 0 8.04-1.26 10.45-3.77Zm9.82-1.36c2.81 3.42 6.64 5.13 11.48 5.13 4.15 0 7.71-.89 10.68-2.67v-7.58c-3.15 1.87-6.24 2.8-9.25 2.8a6.77 6.77 0 0 1-5.57-2.49c-1.34-1.68-1.94-4.12-2.01-7.56h18.5v-5.05c0-5.51-1.22-9.8-3.65-12.84-2.44-3.07-5.76-4.61-9.99-4.61-4.52 0-8.04 1.79-10.57 5.37-2.53 3.58-3.79 8.55-3.79 14.92 0 6.28 1.4 11.14 4.17 14.58Zm6.86-25.66c.85-1.4 1.94-2.11 3.27-2.11 1.41 0 2.52.73 3.33 2.18.82 1.46 1.32 3.9 1.37 6.72H247c.14-2.93.67-5.4 1.53-6.79ZM288 54l-1.5-5h-.5c-1.38 2.26-2.7 3.87-4.18 4.72a10.99 10.99 0 0 1-5.57 1.28 8.17 8.17 0 0 1-6.8-3.18c-1.63-2.12-2.45-5.07-2.45-8.85 0-4.06 1.12-7.07 3.36-9.02 2.27-1.99 5.65-3.08 10.13-3.29l5.19-.2v-2.77c0-3.6-1.58-5.4-4.73-5.4-2.34 0-5.03.9-8.06 2.7l-3.23-6.36A23.23 23.23 0 0 1 282.25 15c4.13 0 7.34 1.18 9.5 3.53 2.16 2.32 3.25 5.63 3.25 9.92V54h-7Zm-7.93-6.2c1.7 0 3.06-.74 4.07-2.24 1.02-1.52 1.54-3.54 1.54-6.05v-3.25l-2.88.14c-2.12.12-3.69.71-4.7 1.8-.97 1.08-1.46 2.7-1.46 4.84 0 3.18 1.14 4.77 3.43 4.77ZM318 15.76a14.31 14.31 0 0 0-3.78-.75 6.1 6.1 0 0 0-4.13 1.55A10.4 10.4 0 0 0 307 21h-.5l-1.5-5h-7v38h9.46V34c0-3.36.22-5.52 1.4-7.27a5.76 5.76 0 0 1 5.09-2.66c1.02 0 1.91.2 2.55.43l1.5-8.75ZM332 55c-4.56 0-8.05-1.52-10.43-4.87-2.38-3.35-3.57-8.27-3.57-14.75 0-6.8 1.12-11.86 3.37-15.2 2.26-3.35 5.65-5.18 10.37-5.18 1.41 0 3.01.36 4.57.78 1.56.41 3.45.94 4.69 1.72l-3.11 7.24c-1.9-1.13-3.58-1.7-5.05-1.7-1.95 0-3.35 1.04-4.23 3.09-.84 2.03-1.27 5.1-1.27 9.18 0 4 .43 6.98 1.27 8.97.85 1.96 2.24 2.94 4.16 2.94 2.3 0 4.68-.8 7.18-2.42v8.1c-2.4 1.5-5.04 2.1-7.95 2.1Z"/>
+  </g>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_on_light.svg
new file mode 100644
index 000000000000..f716c67e58f9
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_on_light.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 372 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}</style>
+  <g class="a">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M107.78 48.26c3.15-4.49 4.72-10.92 4.72-19.28 0-8.36-1.56-14.77-4.69-19.24C104.7 5.24 100.2 3 94.34 3 88.4 3 83.87 5.23 80.72 9.7 77.57 14.15 76 20.55 76 28.91c0 8.43 1.57 14.9 4.72 19.39 3.15 4.47 7.67 6.7 13.55 6.7 5.86 0 10.36-2.25 13.5-6.74Zm-19.94-6.11c-1.46-3.02-2.19-7.4-2.19-13.17 0-5.78.73-10.17 2.2-13.16 1.45-3.02 3.62-4.53 6.49-4.53 5.65 0 8.47 5.9 8.47 17.7 0 11.79-2.85 17.68-8.54 17.68-2.83 0-4.97-1.5-6.43-4.52ZM128.2 54c1.28.74 2.66 1 4.31 1 3.53 0 6.4-1.67 8.44-5.24C142.98 46.2 144 41.28 144 35c0-6.36-.99-11.28-2.96-14.76-1.97-3.5-4.7-5.24-8.18-5.24-3.62 0-6.46 2.16-8.36 6h-.5l-1.5-5h-7v55.5h9V55c0-.65-.13-2.85-.5-6h.5a10.06 10.06 0 0 0 3.69 5Zm-2.3-28.62c.8-1.69 2.09-2.53 3.88-2.53 1.67 0 2.9 1 3.68 2.98.8 2 1.2 5 1.2 9.03 0 8.2-1.6 12.3-4.81 12.3-1.86 0-3.19-.98-4-2.92-.8-1.95-1.2-5.05-1.2-9.3v-1.22c.05-3.9.46-6.67 1.24-8.34ZM161.64 55c-4.84 0-8.67-1.7-11.48-5.13-2.78-3.44-4.17-8.3-4.17-14.58 0-6.37 1.26-11.34 3.8-14.92 2.52-3.58 6.04-5.37 10.56-5.37 4.23 0 7.55 1.54 9.99 4.6 2.43 3.05 3.65 7.34 3.65 12.85v5.05h-18.5c.07 3.44.67 5.88 2.01 7.56a6.77 6.77 0 0 0 5.57 2.5c3.01 0 6.1-.94 9.25-2.81v7.58c-2.97 1.78-6.53 2.67-10.68 2.67Zm-1.35-32.9c-1.33 0-2.42.7-3.27 2.11-.86 1.39-1.4 3.86-1.53 6.79h9.5c-.05-2.82-.55-5.26-1.37-6.72-.8-1.45-1.92-2.18-3.33-2.18Zm36.2 8.9v23h9V29.2c0-4.64-.88-8.17-2.63-10.58C201.14 16.2 198.52 15 195 15c-2.08 0-3.9.51-5.44 1.53-1.55 1-2.74 2.68-3.57 4.47h-.5l-1.25-5H177v38h9.5V35.75c0-4.71.17-7.92 1.1-9.9.92-1.99 2.37-2.98 4.36-2.98 1.5 0 2.59.71 3.25 2.15A13.12 13.12 0 0 1 196.5 31Z"/>
+    <path d="M61.74 26.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 28.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+    <path d="M3.92 17A24.43 24.43 0 0 0 .05 31.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 36.8 25 36 21.79 35.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  </g>
+  <g class="b">
+    <path d="M48.08 41a24.43 24.43 0 0 0 3.87-14.9c-.86-13.73-13.3-24.14-25.03-23.02-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 21.2 27 22 30.21 22.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M362.5 31v23h9V29c0-4.6-.9-8.09-2.7-10.45-1.8-2.38-4.52-3.55-8.05-3.55-3.83 0-6.9 2.24-8.75 6h-.5c.14-1.94.26-3.05.35-3.86.1-.84.15-1.36.15-2.14V.5h-9V54h9.5V35.5c0-4.15.14-7.22 1-9.42.85-2.22 2.34-3.33 4.46-3.33 2.84 0 4.54 2.63 4.54 8.25ZM231.85 51.23c2.43-2.52 3.65-6.14 3.65-10.86 0-2.96-.67-5.59-2-7.9-1.3-2.3-3.63-4.56-6.98-6.77-2.48-1.62-4.22-3.06-5.23-4.33a7.08 7.08 0 0 1-1.47-4.46c0-1.73.41-3.1 1.23-4.08a4.39 4.39 0 0 1 3.58-1.53c1.4 0 2.7.26 3.93.76 1.23.51 2.41 1.09 3.54 1.73l3.15-7.54A21.76 21.76 0 0 0 223.93 3c-4.12 0-7.4 1.27-9.86 3.8-2.43 2.54-3.65 5.98-3.65 10.32 0 2.26.3 4.24.91 5.95.63 1.7 1.51 3.25 2.63 4.63a24.91 24.91 0 0 0 5.02 4.3c2.53 1.7 4.34 3.26 5.44 4.66a7.22 7.22 0 0 1 1.65 4.6c0 1.71-.47 3.06-1.4 4.05-.92 1-2.29 1.49-4.11 1.49-3.2 0-6.72-1.23-10.56-3.7v9.3c3.13 1.74 6.93 2.6 11.4 2.6 4.56 0 8.04-1.26 10.45-3.77Zm9.82-1.36c2.81 3.42 6.64 5.13 11.48 5.13 4.15 0 7.71-.89 10.68-2.67v-7.58c-3.15 1.87-6.24 2.8-9.25 2.8a6.77 6.77 0 0 1-5.57-2.49c-1.34-1.68-1.94-4.12-2.01-7.56h18.5v-5.05c0-5.51-1.22-9.8-3.65-12.84-2.44-3.07-5.76-4.61-9.99-4.61-4.52 0-8.04 1.79-10.57 5.37-2.53 3.58-3.79 8.55-3.79 14.92 0 6.28 1.4 11.14 4.17 14.58Zm6.86-25.66c.85-1.4 1.94-2.11 3.27-2.11 1.41 0 2.52.73 3.33 2.18.82 1.46 1.32 3.9 1.37 6.72H247c.14-2.93.67-5.4 1.53-6.79ZM288 54l-1.5-5h-.5c-1.38 2.26-2.7 3.87-4.18 4.72a10.99 10.99 0 0 1-5.57 1.28 8.17 8.17 0 0 1-6.8-3.18c-1.63-2.12-2.45-5.07-2.45-8.85 0-4.06 1.12-7.07 3.36-9.02 2.27-1.99 5.65-3.08 10.13-3.29l5.19-.2v-2.77c0-3.6-1.58-5.4-4.73-5.4-2.34 0-5.03.9-8.06 2.7l-3.23-6.36A23.23 23.23 0 0 1 282.25 15c4.13 0 7.34 1.18 9.5 3.53 2.16 2.32 3.25 5.63 3.25 9.92V54h-7Zm-7.93-6.2c1.7 0 3.06-.74 4.07-2.24 1.02-1.52 1.54-3.54 1.54-6.05v-3.25l-2.88.14c-2.12.12-3.69.71-4.7 1.8-.97 1.08-1.46 2.7-1.46 4.84 0 3.18 1.14 4.77 3.43 4.77ZM318 15.76a14.31 14.31 0 0 0-3.78-.75 6.1 6.1 0 0 0-4.13 1.55A10.4 10.4 0 0 0 307 21h-.5l-1.5-5h-7v38h9.46V34c0-3.36.22-5.52 1.4-7.27a5.76 5.76 0 0 1 5.09-2.66c1.02 0 1.91.2 2.55.43l1.5-8.75ZM332 55c-4.56 0-8.05-1.52-10.43-4.87-2.38-3.35-3.57-8.27-3.57-14.75 0-6.8 1.12-11.86 3.37-15.2 2.26-3.35 5.65-5.18 10.37-5.18 1.41 0 3.01.36 4.57.78 1.56.41 3.45.94 4.69 1.72l-3.11 7.24c-1.9-1.13-3.58-1.7-5.05-1.7-1.95 0-3.35 1.04-4.23 3.09-.84 2.03-1.27 5.1-1.27 9.18 0 4 .43 6.98 1.27 8.97.85 1.96 2.24 2.94 4.16 2.94 2.3 0 4.68-.8 7.18-2.42v8.1c-2.4 1.5-5.04 2.1-7.95 2.1Z"/>
+  </g>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_spinner.svg b/src/core/server/core_app/assets/logos/opensearch_spinner.svg
new file mode 100644
index 000000000000..98c6f2af6189
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_spinner.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}}</style>
+  <g>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <animateTransform attributeName="transform" dur="1.5s" from="0 40 40" keyTimes="0; .3; .7; 1" repeatCount="indefinite" to="359.9 40 40" type="rotate" values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"/>
+  </g>
+  <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+  <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_spinner_on_dark.svg b/src/core/server/core_app/assets/logos/opensearch_spinner_on_dark.svg
new file mode 100644
index 000000000000..8d2b16595121
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_spinner_on_dark.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+  <style>.a{fill:#00A3E0}.b{fill:#B9D9EB}</style>
+  <g>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <animateTransform attributeName="transform" dur="1.5s" from="0 40 40" keyTimes="0; .3; .7; 1" repeatCount="indefinite" to="359.9 40 40" type="rotate" values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"/>
+  </g>
+  <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+  <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_spinner_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_spinner_on_light.svg
new file mode 100644
index 000000000000..41ab3c960b94
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_spinner_on_light.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}</style>
+  <g>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <animateTransform attributeName="transform" dur="1.5s" from="0 40 40" keyTimes="0; .3; .7; 1" repeatCount="indefinite" to="359.9 40 40" type="rotate" values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"/>
+  </g>
+  <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+  <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+</svg>
diff --git a/src/core/server/opensearch/client/cluster_client.test.ts b/src/core/server/opensearch/client/cluster_client.test.ts
index 1510d2b148fe..81f55b987805 100644
--- a/src/core/server/opensearch/client/cluster_client.test.ts
+++ b/src/core/server/opensearch/client/cluster_client.test.ts
@@ -99,8 +99,16 @@ describe('ClusterClient', () => {
 
       const scopedClusterClient = clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({ headers: expect.any(Object) });
+      const expected = { headers: expect.any(Object) };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
 
       expect(scopedClusterClient.asInternalUser).toBe(clusterClient.asInternalUser);
       expect(scopedClusterClient.asCurrentUser).toBe(scopedClient.child.mock.results[0].value);
@@ -113,7 +121,7 @@ describe('ClusterClient', () => {
       const scopedClusterClient1 = clusterClient.asScoped(request);
       const scopedClusterClient2 = clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenCalledTimes(2 * 2);
 
       expect(scopedClusterClient1).not.toBe(scopedClusterClient2);
       expect(scopedClusterClient1.asInternalUser).toBe(scopedClusterClient2.asInternalUser);
@@ -135,10 +143,18 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: { ...DEFAULT_HEADERS, foo: 'bar', 'x-opaque-id': expect.any(String) },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('creates a scoped facade with filtered auth headers', () => {
@@ -155,10 +171,18 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: { ...DEFAULT_HEADERS, authorization: 'auth', 'x-opaque-id': expect.any(String) },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('respects auth headers precedence', () => {
@@ -179,10 +203,18 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: { ...DEFAULT_HEADERS, authorization: 'auth', 'x-opaque-id': expect.any(String) },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('includes the `customHeaders` from the config without filtering them', () => {
@@ -200,15 +232,23 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: {
           ...DEFAULT_HEADERS,
           foo: 'bar',
           hello: 'dolly',
           'x-opaque-id': expect.any(String),
         },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('adds the x-opaque-id header based on the request id', () => {
@@ -225,13 +265,21 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: {
           ...DEFAULT_HEADERS,
           'x-opaque-id': 'my-fake-id',
         },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('respect the precedence of auth headers over config headers', () => {
@@ -251,15 +299,23 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: {
           ...DEFAULT_HEADERS,
           foo: 'auth',
           hello: 'dolly',
           'x-opaque-id': expect.any(String),
         },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('respect the precedence of request headers over config headers', () => {
@@ -279,15 +335,23 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: {
           ...DEFAULT_HEADERS,
           foo: 'request',
           hello: 'dolly',
           'x-opaque-id': expect.any(String),
         },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('respect the precedence of config headers over default headers', () => {
@@ -304,13 +368,21 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: {
           [headerKey]: 'foo',
           'x-opaque-id': expect.any(String),
         },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('respect the precedence of request headers over default headers', () => {
@@ -327,13 +399,21 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: {
           [headerKey]: 'foo',
           'x-opaque-id': expect.any(String),
         },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('respect the precedence of x-opaque-id header over config headers', () => {
@@ -355,13 +435,21 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: {
           ...DEFAULT_HEADERS,
           'x-opaque-id': 'from request',
         },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('filter headers when called with a `FakeRequest`', () => {
@@ -380,10 +468,18 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: { ...DEFAULT_HEADERS, authorization: 'auth' },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
 
     it('does not add auth headers when called with a `FakeRequest`', () => {
@@ -404,10 +500,18 @@ describe('ClusterClient', () => {
 
       clusterClient.asScoped(request);
 
-      expect(scopedClient.child).toHaveBeenCalledTimes(1);
-      expect(scopedClient.child).toHaveBeenCalledWith({
+      const expected = {
         headers: { ...DEFAULT_HEADERS, foo: 'bar' },
-      });
+      };
+      expect(scopedClient.child).toHaveBeenCalledTimes(2);
+      expect(scopedClient.child).toHaveBeenNthCalledWith(1, expect.objectContaining(expected));
+      expect(scopedClient.child).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          ...expected,
+          enableLongNumeralSupport: true,
+        })
+      );
     });
   });
 
diff --git a/src/core/server/opensearch/client/cluster_client.ts b/src/core/server/opensearch/client/cluster_client.ts
index b29eea89d4db..8ea87bb910f7 100644
--- a/src/core/server/opensearch/client/cluster_client.ts
+++ b/src/core/server/opensearch/client/cluster_client.ts
@@ -90,10 +90,27 @@ export class ClusterClient implements ICustomClusterClient {
 
   asScoped(request: ScopeableRequest) {
     const scopedHeaders = this.getScopedHeaders(request);
+
     const scopedClient = this.rootScopedClient.child({
       headers: scopedHeaders,
     });
-    return new ScopedClusterClient(this.asInternalUser, scopedClient);
+
+    const asInternalUserWithLongNumeralsSupport = this.asInternalUser.child({
+      // @ts-expect-error - Remove ignoring after https://github.com/opensearch-project/opensearch-js/pull/598 is included in a release
+      enableLongNumeralSupport: true,
+    });
+
+    const scopedClientWithLongNumeralsSupport = this.rootScopedClient.child({
+      headers: scopedHeaders,
+      // @ts-expect-error - Remove ignoring after https://github.com/opensearch-project/opensearch-js/pull/598 is included in a release
+      enableLongNumeralSupport: true,
+    });
+    return new ScopedClusterClient(
+      this.asInternalUser,
+      scopedClient,
+      asInternalUserWithLongNumeralsSupport,
+      scopedClientWithLongNumeralsSupport
+    );
   }
 
   public async close() {
@@ -101,7 +118,7 @@ export class ClusterClient implements ICustomClusterClient {
       return;
     }
     this.isClosed = true;
-    await Promise.all([this.asInternalUser.close(), this.rootScopedClient.close()]);
+    await Promise.all([this.asInternalUser.close(noop), this.rootScopedClient.close(noop)]);
   }
 
   private getScopedHeaders(request: ScopeableRequest): Headers {
diff --git a/src/core/server/opensearch/client/mocks.ts b/src/core/server/opensearch/client/mocks.ts
index 7b055d5b03cf..40b731f0f3bf 100644
--- a/src/core/server/opensearch/client/mocks.ts
+++ b/src/core/server/opensearch/client/mocks.ts
@@ -112,12 +112,16 @@ const createClientMock = (): OpenSearchClientMock =>
 export interface ScopedClusterClientMock {
   asInternalUser: OpenSearchClientMock;
   asCurrentUser: OpenSearchClientMock;
+  asInternalUserWithLongNumeralsSupport: OpenSearchClientMock;
+  asCurrentUserWithLongNumeralsSupport: OpenSearchClientMock;
 }
 
 const createScopedClusterClientMock = () => {
   const mock: ScopedClusterClientMock = {
     asInternalUser: createClientMock(),
     asCurrentUser: createClientMock(),
+    asInternalUserWithLongNumeralsSupport: createClientMock(),
+    asCurrentUserWithLongNumeralsSupport: createClientMock(),
   };
 
   return mock;
@@ -126,12 +130,16 @@ const createScopedClusterClientMock = () => {
 export interface ClusterClientMock {
   asInternalUser: OpenSearchClientMock;
   asScoped: jest.MockedFunction<() => ScopedClusterClientMock>;
+  asInternalUserWithLongNumeralsSupport: OpenSearchClientMock;
+  asCurrentUserWithLongNumeralsSupport: jest.MockedFunction<() => ScopedClusterClientMock>;
 }
 
 const createClusterClientMock = () => {
   const mock: ClusterClientMock = {
     asInternalUser: createClientMock(),
     asScoped: jest.fn(),
+    asInternalUserWithLongNumeralsSupport: createClientMock(),
+    asCurrentUserWithLongNumeralsSupport: jest.fn(),
   };
 
   mock.asScoped.mockReturnValue(createScopedClusterClientMock());
@@ -145,6 +153,8 @@ const createCustomClusterClientMock = () => {
   const mock: CustomClusterClientMock = {
     asInternalUser: createClientMock(),
     asScoped: jest.fn(),
+    asInternalUserWithLongNumeralsSupport: createClientMock(),
+    asCurrentUserWithLongNumeralsSupport: jest.fn(),
     close: jest.fn(),
   };
 
diff --git a/src/core/server/opensearch/client/scoped_cluster_client.test.ts b/src/core/server/opensearch/client/scoped_cluster_client.test.ts
index 396075d35316..5e3d222c3be2 100644
--- a/src/core/server/opensearch/client/scoped_cluster_client.test.ts
+++ b/src/core/server/opensearch/client/scoped_cluster_client.test.ts
@@ -36,7 +36,12 @@ describe('ScopedClusterClient', () => {
     const internalClient = opensearchClientMock.createOpenSearchClient();
     const scopedClient = opensearchClientMock.createOpenSearchClient();
 
-    const scopedClusterClient = new ScopedClusterClient(internalClient, scopedClient);
+    const scopedClusterClient = new ScopedClusterClient(
+      internalClient,
+      scopedClient,
+      internalClient,
+      scopedClient
+    );
 
     expect(scopedClusterClient.asInternalUser).toBe(internalClient);
   });
@@ -45,7 +50,12 @@ describe('ScopedClusterClient', () => {
     const internalClient = opensearchClientMock.createOpenSearchClient();
     const scopedClient = opensearchClientMock.createOpenSearchClient();
 
-    const scopedClusterClient = new ScopedClusterClient(internalClient, scopedClient);
+    const scopedClusterClient = new ScopedClusterClient(
+      internalClient,
+      scopedClient,
+      internalClient,
+      scopedClient
+    );
 
     expect(scopedClusterClient.asCurrentUser).toBe(scopedClient);
   });
diff --git a/src/core/server/opensearch/client/scoped_cluster_client.ts b/src/core/server/opensearch/client/scoped_cluster_client.ts
index d4db3ce3606c..4453243bd3ba 100644
--- a/src/core/server/opensearch/client/scoped_cluster_client.ts
+++ b/src/core/server/opensearch/client/scoped_cluster_client.ts
@@ -49,12 +49,25 @@ export interface IScopedClusterClient {
    * on behalf of the user that initiated the request to the OpenSearch Dashboards server.
    */
   readonly asCurrentUser: OpenSearchClient;
+  /**
+   * A {@link OpenSearchClient | client}, with support for long numerals, to be used to
+   * query the opensearch cluster on behalf of the internal OpenSearch Dashboards user.
+   */
+  readonly asInternalUserWithLongNumeralsSupport: OpenSearchClient;
+  /**
+   * A {@link OpenSearchClient | client}, with support for long numerals, to be used to
+   * query the opensearch cluster on behalf of the user that initiated the request to
+   * the OpenSearch Dashboards server.
+   */
+  readonly asCurrentUserWithLongNumeralsSupport: OpenSearchClient;
 }
 
 /** @internal **/
 export class ScopedClusterClient implements IScopedClusterClient {
   constructor(
     public readonly asInternalUser: OpenSearchClient,
-    public readonly asCurrentUser: OpenSearchClient
+    public readonly asCurrentUser: OpenSearchClient,
+    public readonly asInternalUserWithLongNumeralsSupport: OpenSearchClient,
+    public readonly asCurrentUserWithLongNumeralsSupport: OpenSearchClient
   ) {}
 }
diff --git a/src/core/server/opensearch/opensearch_config.ts b/src/core/server/opensearch/opensearch_config.ts
index fee26c354fbe..7ef3a7665a97 100644
--- a/src/core/server/opensearch/opensearch_config.ts
+++ b/src/core/server/opensearch/opensearch_config.ts
@@ -53,7 +53,7 @@ export const configSchema = schema.object({
     defaultValue: false,
   }),
   sniffOnConnectionFault: schema.boolean({ defaultValue: false }),
-  hosts: schema.oneOf([hostURISchema, schema.arrayOf(hostURISchema, { minSize: 1 })], {
+  hosts: schema.oneOf([hostURISchema, schema.arrayOf(hostURISchema)], {
     defaultValue: 'http://localhost:9200',
   }),
   username: schema.maybe(
diff --git a/src/core/server/opensearch/opensearch_service.test.ts b/src/core/server/opensearch/opensearch_service.test.ts
index d5d354f9df86..1280479314a6 100644
--- a/src/core/server/opensearch/opensearch_service.test.ts
+++ b/src/core/server/opensearch/opensearch_service.test.ts
@@ -266,6 +266,30 @@ describe('#setup', () => {
       expect(mockedClient.nodes.info).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('opensearchNodeVersionCompatibility$ avoid polling when opensearch hosts is empty', async () => {
+    const mockedClient = mockClusterClientInstance.asInternalUser;
+    configService.atPath.mockReturnValueOnce(
+      new BehaviorSubject({
+        hosts: [],
+        healthCheck: {
+          delay: duration(2000),
+        },
+        ssl: {
+          verificationMode: 'none',
+        },
+      } as any)
+    );
+    opensearchService = new OpenSearchService(coreContext);
+    const setupContract = await opensearchService.setup(setupDeps);
+
+    // reset all mocks called during setup phase
+    MockLegacyClusterClient.mockClear();
+
+    setupContract.opensearchNodesCompatibility$.subscribe(async () => {
+      expect(mockedClient.nodes.info).toHaveBeenCalledTimes(0);
+    });
+  });
 });
 
 describe('#start', () => {
diff --git a/src/core/server/opensearch/opensearch_service.ts b/src/core/server/opensearch/opensearch_service.ts
index 87a2da974ba1..bab3e7ede9f3 100644
--- a/src/core/server/opensearch/opensearch_service.ts
+++ b/src/core/server/opensearch/opensearch_service.ts
@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { Observable, Subject } from 'rxjs';
+import { Observable, Subject, of } from 'rxjs';
 import { first, map, shareReplay, takeUntil } from 'rxjs/operators';
 import { merge } from '@osd/std';
 
@@ -91,14 +91,26 @@ export class OpenSearchService
     this.legacyClient = this.createLegacyClusterClient('data', config);
     this.client = this.createClusterClient('data', config);
 
-    const opensearchNodesCompatibility$ = pollOpenSearchNodesVersion({
-      internalClient: this.client.asInternalUser,
-      optimizedHealthcheck: config.optimizedHealthcheck,
-      log: this.log,
-      ignoreVersionMismatch: config.ignoreVersionMismatch,
-      opensearchVersionCheckInterval: config.healthCheckDelay.asMilliseconds(),
-      opensearchDashboardsVersion: this.opensearchDashboardsVersion,
-    }).pipe(takeUntil(this.stop$), shareReplay({ refCount: true, bufferSize: 1 }));
+    let opensearchNodesCompatibility$;
+    if (config.hosts.length > 0) {
+      opensearchNodesCompatibility$ = pollOpenSearchNodesVersion({
+        internalClient: this.client.asInternalUser,
+        optimizedHealthcheck: config.optimizedHealthcheck,
+        log: this.log,
+        ignoreVersionMismatch: config.ignoreVersionMismatch,
+        opensearchVersionCheckInterval: config.healthCheckDelay.asMilliseconds(),
+        opensearchDashboardsVersion: this.opensearchDashboardsVersion,
+      }).pipe(takeUntil(this.stop$), shareReplay({ refCount: true, bufferSize: 1 }));
+    } else {
+      this.log.debug(`Opensearch is not configured.`);
+      opensearchNodesCompatibility$ = of({
+        isCompatible: true,
+        message: 'Opensearch is not configured',
+        incompatibleNodes: [],
+        warningNodes: [],
+        opensearchDashboardsVersion: this.opensearchDashboardsVersion,
+      });
+    }
 
     this.createLegacyCustomClient = (type, clientConfig = {}) => {
       const finalConfig = merge({}, config, clientConfig);
diff --git a/src/core/server/opensearch/status.ts b/src/core/server/opensearch/status.ts
index 6b5d2741b405..87eda3a8893f 100644
--- a/src/core/server/opensearch/status.ts
+++ b/src/core/server/opensearch/status.ts
@@ -77,7 +77,7 @@ export const calculateStatus$ = (
 
           return {
             level: ServiceStatusLevels.available,
-            summary: `OpenSearch is available`,
+            summary: (message ?? `OpenSearch is available`) || `Unknown`,
             meta: {
               warningNodes: [],
               incompatibleNodes: [],
diff --git a/src/core/server/plugins/discovery/plugin_manifest_parser.test.ts b/src/core/server/plugins/discovery/plugin_manifest_parser.test.ts
index 66fd1336a554..5ef01f88f3f7 100644
--- a/src/core/server/plugins/discovery/plugin_manifest_parser.test.ts
+++ b/src/core/server/plugins/discovery/plugin_manifest_parser.test.ts
@@ -247,72 +247,110 @@ test('return error when manifest contains unrecognized properties', async () =>
   });
 });
 
-describe('requiredOpenSearchPlugins', () => {
-  test('return error when plugin `requiredOpenSearchPlugins` is a string and not an array of string', async () => {
+describe('requiredEnginePlugins', () => {
+  test('return error when plugin `requiredEnginePlugins` is a string and not an object', async () => {
     mockReadFilePromise.mockResolvedValue(
       Buffer.from(
         JSON.stringify({
-          id: 'id1',
+          id: 'invalid-manifest-plugin',
           version: '7.0.0',
           server: true,
-          requiredOpenSearchPlugins: 'abc',
+          requiredEnginePlugins: 'abc',
         })
       )
     );
 
     await expect(parseManifest(pluginPath, packageInfo, logger)).rejects.toMatchObject({
-      message: `The "requiredOpenSearchPlugins" in plugin manifest for "id1" should be an array of strings. (invalid-manifest, ${pluginManifestPath})`,
+      message: `The "requiredEnginePlugins" in plugin manifest for "invalid-manifest-plugin" should be an object that maps a plugin name to a version range. (invalid-manifest, ${pluginManifestPath})`,
       type: PluginDiscoveryErrorType.InvalidManifest,
       path: pluginManifestPath,
     });
   });
 
-  test('return error when `requiredOpenSearchPlugins` is not a string', async () => {
+  test('return error when plugin `requiredEnginePlugins` is an array and not an object', async () => {
     mockReadFilePromise.mockResolvedValue(
-      Buffer.from(JSON.stringify({ id: 'id2', version: '7.0.0', requiredOpenSearchPlugins: 2 }))
+      Buffer.from(
+        JSON.stringify({
+          id: 'invalid-manifest-plugin',
+          version: '7.0.0',
+          server: true,
+          requiredEnginePlugins: [{ 'plugin-1': '1.0.0.0', 'plugin-2': '^2.0.1' }],
+        })
+      )
     );
 
     await expect(parseManifest(pluginPath, packageInfo, logger)).rejects.toMatchObject({
-      message: `The "requiredOpenSearchPlugins" in plugin manifest for "id2" should be an array of strings. (invalid-manifest, ${pluginManifestPath})`,
+      message: `The "requiredEnginePlugins" in plugin manifest for "invalid-manifest-plugin" should be an object that maps a plugin name to a version range. (invalid-manifest, ${pluginManifestPath})`,
       type: PluginDiscoveryErrorType.InvalidManifest,
       path: pluginManifestPath,
     });
   });
 
-  test('return error when plugin requiredOpenSearchPlugins is an array that contains non-string values', async () => {
+  test('return error when plugin requiredEnginePlugins is an object but contains non-string version value', async () => {
     mockReadFilePromise.mockResolvedValue(
       Buffer.from(
-        JSON.stringify({ id: 'id3', version: '7.0.0', requiredOpenSearchPlugins: ['plugin1', 2] })
+        JSON.stringify({
+          id: 'test-invalid-version-type-plugin',
+          version: '7.0.0',
+          requiredEnginePlugins: { 'invalid-plugin-version-range': 2 },
+        })
+      )
+    );
+
+    await expect(parseManifest(pluginPath, packageInfo, logger)).rejects.toMatchObject({
+      message: `The "requiredEnginePlugins" in plugin manifest for "test-invalid-version-type-plugin" should be an object that maps a plugin name to a version range. (invalid-manifest, ${pluginManifestPath})`,
+      type: PluginDiscoveryErrorType.InvalidManifest,
+      path: pluginManifestPath,
+    });
+  });
+
+  test('return error when plugin requiredEnginePlugins contains invalid version range', async () => {
+    mockReadFilePromise.mockResolvedValue(
+      Buffer.from(
+        JSON.stringify({
+          id: 'test-invalid-version-range-plugin',
+          version: '7.0.0',
+          requiredEnginePlugins: {
+            'invalid-version-range-plugin': '?1.0.0',
+            'valid-version-range-plugin': '^1.0.0',
+          },
+        })
       )
     );
 
     await expect(parseManifest(pluginPath, packageInfo, logger)).rejects.toMatchObject({
-      message: `The "requiredOpenSearchPlugins" in plugin manifest for "id3" should be an array of strings. (invalid-manifest, ${pluginManifestPath})`,
+      message: `The "requiredEnginePlugins" in the plugin manifest for "test-invalid-version-range-plugin" contains invalid version ranges: ?1.0.0 for invalid-version-range-plugin (invalid-manifest, ${pluginManifestPath})`,
       type: PluginDiscoveryErrorType.InvalidManifest,
       path: pluginManifestPath,
     });
   });
 
-  test('Happy path when plugin `requiredOpenSearchPlugins` is an array of string', async () => {
+  test('Happy path when plugin `requiredEnginePlugins` is a map of plugin name to its compatible version ranges', async () => {
     mockReadFilePromise.mockResolvedValue(
       Buffer.from(
         JSON.stringify({
-          id: 'id1',
+          id: 'test-plugin-version-range-sanity',
           version: '7.0.0',
           server: true,
-          requiredOpenSearchPlugins: ['plugin1', 'plugin2'],
+          requiredEnginePlugins: {
+            'valid-plugin-1': '^1.0.0',
+            'valid-plugin-2': '1.0.0',
+          },
         })
       )
     );
 
     await expect(parseManifest(pluginPath, packageInfo, logger)).resolves.toEqual({
-      id: 'id1',
-      configPath: 'id_1',
+      id: 'test-plugin-version-range-sanity',
+      configPath: 'test_plugin_version_range_sanity',
       version: '7.0.0',
       opensearchDashboardsVersion: '7.0.0',
       optionalPlugins: [],
       requiredPlugins: [],
-      requiredOpenSearchPlugins: ['plugin1', 'plugin2'],
+      requiredEnginePlugins: {
+        'valid-plugin-1': '^1.0.0',
+        'valid-plugin-2': '1.0.0',
+      },
       requiredBundles: [],
       server: true,
       ui: false,
@@ -374,7 +412,7 @@ test('set defaults for all missing optional fields', async () => {
     opensearchDashboardsVersion: '7.0.0',
     optionalPlugins: [],
     requiredPlugins: [],
-    requiredOpenSearchPlugins: [],
+    requiredEnginePlugins: {},
     requiredBundles: [],
     server: true,
     ui: false,
@@ -391,7 +429,10 @@ test('return all set optional fields as they are in manifest', async () => {
         opensearchDashboardsVersion: '7.0.0',
         requiredPlugins: ['some-required-plugin', 'some-required-plugin-2'],
         optionalPlugins: ['some-optional-plugin'],
-        requiredOpenSearchPlugins: ['test-opensearch-plugin-1', 'test-opensearch-plugin-2'],
+        requiredEnginePlugins: {
+          'test-opensearch-plugin-1': '^1.0.0',
+          'test-opensearch-plugin-2': '>=1.0.0',
+        },
         ui: true,
       })
     )
@@ -405,7 +446,10 @@ test('return all set optional fields as they are in manifest', async () => {
     optionalPlugins: ['some-optional-plugin'],
     requiredBundles: [],
     requiredPlugins: ['some-required-plugin', 'some-required-plugin-2'],
-    requiredOpenSearchPlugins: ['test-opensearch-plugin-1', 'test-opensearch-plugin-2'],
+    requiredEnginePlugins: {
+      'test-opensearch-plugin-1': '^1.0.0',
+      'test-opensearch-plugin-2': '>=1.0.0',
+    },
     server: false,
     ui: true,
   });
@@ -420,7 +464,7 @@ test('return manifest when plugin expected OpenSearch Dashboards version matches
         version: 'some-version',
         opensearchDashboardsVersion: '7.0.0-alpha2',
         requiredPlugins: ['some-required-plugin'],
-        requiredOpenSearchPlugins: [],
+        requiredEnginePlugins: {},
         server: true,
       })
     )
@@ -433,7 +477,7 @@ test('return manifest when plugin expected OpenSearch Dashboards version matches
     opensearchDashboardsVersion: '7.0.0-alpha2',
     optionalPlugins: [],
     requiredPlugins: ['some-required-plugin'],
-    requiredOpenSearchPlugins: [],
+    requiredEnginePlugins: {},
     requiredBundles: [],
     server: true,
     ui: false,
@@ -461,7 +505,7 @@ test('return manifest when plugin expected OpenSearch Dashboards version is `ope
     opensearchDashboardsVersion: 'opensearchDashboards',
     optionalPlugins: [],
     requiredPlugins: ['some-required-plugin'],
-    requiredOpenSearchPlugins: [],
+    requiredEnginePlugins: {},
     requiredBundles: [],
     server: true,
     ui: true,
diff --git a/src/core/server/plugins/discovery/plugin_manifest_parser.ts b/src/core/server/plugins/discovery/plugin_manifest_parser.ts
index ee435d2e310a..cfc23f0dc197 100644
--- a/src/core/server/plugins/discovery/plugin_manifest_parser.ts
+++ b/src/core/server/plugins/discovery/plugin_manifest_parser.ts
@@ -29,6 +29,7 @@
  */
 
 import { readFile, stat } from 'fs/promises';
+import semver from 'semver';
 import { resolve } from 'path';
 import { coerce } from 'semver';
 import { snakeCase } from 'lodash';
@@ -61,7 +62,7 @@ const KNOWN_MANIFEST_FIELDS = (() => {
     version: true,
     configPath: true,
     requiredPlugins: true,
-    requiredOpenSearchPlugins: true,
+    requiredEnginePlugins: true,
     optionalPlugins: true,
     ui: true,
     server: true,
@@ -157,26 +158,42 @@ export async function parseManifest(
     );
   }
 
-  if (
-    manifest.requiredOpenSearchPlugins !== undefined &&
-    (!Array.isArray(manifest.requiredOpenSearchPlugins) ||
-      !manifest.requiredOpenSearchPlugins.every((plugin) => typeof plugin === 'string'))
-  ) {
-    throw PluginDiscoveryError.invalidManifest(
-      manifestPath,
-      new Error(
-        `The "requiredOpenSearchPlugins" in plugin manifest for "${manifest.id}" should be an array of strings.`
+  if ('requiredEnginePlugins' in manifest) {
+    if (
+      typeof manifest.requiredEnginePlugins !== 'object' ||
+      !Object.entries(manifest.requiredEnginePlugins).every(
+        ([pluginId, pluginVersion]) =>
+          typeof pluginId === 'string' && typeof pluginVersion === 'string'
       )
-    );
-  }
+    ) {
+      throw PluginDiscoveryError.invalidManifest(
+        manifestPath,
+        new Error(
+          `The "requiredEnginePlugins" in plugin manifest for "${manifest.id}" should be an object that maps a plugin name to a version range.`
+        )
+      );
+    }
+    const invalidPluginVersions: string[] = [];
+    for (const [pluginName, versionRange] of Object.entries(manifest.requiredEnginePlugins)) {
+      log.info(
+        `Plugin ${manifest.id} has a dependency on engine plugin: [${pluginName}@${versionRange}]`
+      );
 
-  if (
-    Array.isArray(manifest.requiredOpenSearchPlugins) &&
-    manifest.requiredOpenSearchPlugins.length > 0
-  ) {
-    log.info(
-      `Plugin ${manifest.id} has a dependency on following OpenSearch plugin(s): "${manifest.requiredOpenSearchPlugins}".`
-    );
+      if (!isOpenSearchPluginVersionRangeValid(versionRange)) {
+        invalidPluginVersions.push(`${versionRange} for ${pluginName}`);
+      }
+    }
+
+    if (invalidPluginVersions.length > 0) {
+      throw PluginDiscoveryError.invalidManifest(
+        manifestPath,
+        new Error(
+          `The "requiredEnginePlugins" in the plugin manifest for "${
+            manifest.id
+          }" contains invalid version ranges: ${invalidPluginVersions.join(', ')}`
+        )
+      );
+    }
   }
 
   const expectedOpenSearchDashboardsVersion =
@@ -221,9 +238,8 @@ export async function parseManifest(
     opensearchDashboardsVersion: expectedOpenSearchDashboardsVersion,
     configPath: manifest.configPath || snakeCase(manifest.id),
     requiredPlugins: Array.isArray(manifest.requiredPlugins) ? manifest.requiredPlugins : [],
-    requiredOpenSearchPlugins: Array.isArray(manifest.requiredOpenSearchPlugins)
-      ? manifest.requiredOpenSearchPlugins
-      : [],
+    requiredEnginePlugins:
+      manifest.requiredEnginePlugins !== undefined ? manifest.requiredEnginePlugins : {},
     optionalPlugins: Array.isArray(manifest.optionalPlugins) ? manifest.optionalPlugins : [],
     requiredBundles: Array.isArray(manifest.requiredBundles) ? manifest.requiredBundles : [],
     ui: includesUiPlugin,
@@ -276,3 +292,14 @@ function isVersionCompatible(
     0
   );
 }
+/**
+ * Checks whether specified version range is valid.
+ * @param versionRange Version range to be checked.
+ */
+function isOpenSearchPluginVersionRangeValid(versionRange: string) {
+  try {
+    return semver.validRange(versionRange);
+  } catch (err) {
+    return false;
+  }
+}
diff --git a/src/core/server/plugins/integration_tests/plugins_service.test.ts b/src/core/server/plugins/integration_tests/plugins_service.test.ts
index 4d1660f65c75..ea400ddcd913 100644
--- a/src/core/server/plugins/integration_tests/plugins_service.test.ts
+++ b/src/core/server/plugins/integration_tests/plugins_service.test.ts
@@ -42,7 +42,7 @@ import { config } from '../plugins_config';
 import { loggingSystemMock } from '../../logging/logging_system.mock';
 import { environmentServiceMock } from '../../environment/environment_service.mock';
 import { coreMock } from '../../mocks';
-import { Plugin } from '../types';
+import { Plugin, CompatibleEnginePluginVersions } from '../types';
 import { PluginWrapper } from '../plugin';
 
 describe('PluginsService', () => {
@@ -57,7 +57,7 @@ describe('PluginsService', () => {
       disabled = false,
       version = 'some-version',
       requiredPlugins = [],
-      requiredOpenSearchPlugins = [],
+      requiredEnginePlugins = {},
       requiredBundles = [],
       optionalPlugins = [],
       opensearchDashboardsVersion = '7.0.0',
@@ -69,7 +69,7 @@ describe('PluginsService', () => {
       disabled?: boolean;
       version?: string;
       requiredPlugins?: string[];
-      requiredOpenSearchPlugins?: string[];
+      requiredEnginePlugins?: CompatibleEnginePluginVersions;
       requiredBundles?: string[];
       optionalPlugins?: string[];
       opensearchDashboardsVersion?: string;
@@ -86,7 +86,7 @@ describe('PluginsService', () => {
         configPath: `${configPath}${disabled ? '-disabled' : ''}`,
         opensearchDashboardsVersion,
         requiredPlugins,
-        requiredOpenSearchPlugins,
+        requiredEnginePlugins,
         requiredBundles,
         optionalPlugins,
         server,
diff --git a/src/core/server/plugins/plugin.test.ts b/src/core/server/plugins/plugin.test.ts
index 04df84ab8d12..69b781031c7a 100644
--- a/src/core/server/plugins/plugin.test.ts
+++ b/src/core/server/plugins/plugin.test.ts
@@ -69,7 +69,10 @@ function createPluginManifest(manifestProps: Partial<PluginManifest> = {}): Plug
     configPath: 'path',
     opensearchDashboardsVersion: '7.0.0',
     requiredPlugins: ['some-required-dep'],
-    requiredOpenSearchPlugins: ['some-os-plugins'],
+    requiredEnginePlugins: {
+      'test-os-plugin1': '^2.2.1',
+      'test-os-plugin2': '2.2.1 || 2.2.2',
+    },
     optionalPlugins: ['some-optional-dep'],
     requiredBundles: [],
     server: true,
diff --git a/src/core/server/plugins/plugin.ts b/src/core/server/plugins/plugin.ts
index cc53e1b443e9..0aa13e53d650 100644
--- a/src/core/server/plugins/plugin.ts
+++ b/src/core/server/plugins/plugin.ts
@@ -66,7 +66,7 @@ export class PluginWrapper<
   public readonly configPath: PluginManifest['configPath'];
   public readonly requiredPlugins: PluginManifest['requiredPlugins'];
   public readonly optionalPlugins: PluginManifest['optionalPlugins'];
-  public readonly requiredOpenSearchPlugins: PluginManifest['requiredOpenSearchPlugins'];
+  public readonly requiredEnginePlugins: PluginManifest['requiredEnginePlugins'];
   public readonly requiredBundles: PluginManifest['requiredBundles'];
   public readonly includesServerPlugin: PluginManifest['server'];
   public readonly includesUiPlugin: PluginManifest['ui'];
@@ -96,7 +96,7 @@ export class PluginWrapper<
     this.configPath = params.manifest.configPath;
     this.requiredPlugins = params.manifest.requiredPlugins;
     this.optionalPlugins = params.manifest.optionalPlugins;
-    this.requiredOpenSearchPlugins = params.manifest.requiredOpenSearchPlugins;
+    this.requiredEnginePlugins = params.manifest.requiredEnginePlugins;
     this.requiredBundles = params.manifest.requiredBundles;
     this.includesServerPlugin = params.manifest.server;
     this.includesUiPlugin = params.manifest.ui;
diff --git a/src/core/server/plugins/plugin_context.test.ts b/src/core/server/plugins/plugin_context.test.ts
index ca46a97a237e..48c9eb6d6823 100644
--- a/src/core/server/plugins/plugin_context.test.ts
+++ b/src/core/server/plugins/plugin_context.test.ts
@@ -56,7 +56,9 @@ function createPluginManifest(manifestProps: Partial<PluginManifest> = {}): Plug
     configPath: 'path',
     opensearchDashboardsVersion: '7.0.0',
     requiredPlugins: ['some-required-dep'],
-    requiredOpenSearchPlugins: ['some-backend-plugin'],
+    requiredEnginePlugins: {
+      'test-os-plugin1': '^2.2.1',
+    },
     requiredBundles: [],
     optionalPlugins: ['some-optional-dep'],
     server: true,
diff --git a/src/core/server/plugins/plugins_service.test.ts b/src/core/server/plugins/plugins_service.test.ts
index c3ee05d60ed8..36c594908845 100644
--- a/src/core/server/plugins/plugins_service.test.ts
+++ b/src/core/server/plugins/plugins_service.test.ts
@@ -47,7 +47,7 @@ import { PluginsService } from './plugins_service';
 import { PluginsSystem } from './plugins_system';
 import { config } from './plugins_config';
 import { take } from 'rxjs/operators';
-import { DiscoveredPlugin } from './types';
+import { DiscoveredPlugin, CompatibleEnginePluginVersions } from './types';
 
 const { join } = posix;
 const MockPluginsSystem: jest.Mock<PluginsSystem> = PluginsSystem as any;
@@ -78,7 +78,7 @@ const createPlugin = (
     disabled = false,
     version = 'some-version',
     requiredPlugins = [],
-    requiredOpenSearchPlugins = [],
+    requiredEnginePlugins = {},
     requiredBundles = [],
     optionalPlugins = [],
     opensearchDashboardsVersion = '7.0.0',
@@ -90,7 +90,7 @@ const createPlugin = (
     disabled?: boolean;
     version?: string;
     requiredPlugins?: string[];
-    requiredOpenSearchPlugins?: string[];
+    requiredEnginePlugins?: CompatibleEnginePluginVersions;
     requiredBundles?: string[];
     optionalPlugins?: string[];
     opensearchDashboardsVersion?: string;
@@ -107,7 +107,7 @@ const createPlugin = (
       configPath: `${configPath}${disabled ? '-disabled' : ''}`,
       opensearchDashboardsVersion,
       requiredPlugins,
-      requiredOpenSearchPlugins,
+      requiredEnginePlugins,
       requiredBundles,
       optionalPlugins,
       server,
diff --git a/src/core/server/plugins/plugins_system.test.ts b/src/core/server/plugins/plugins_system.test.ts
index 286bb0d97846..dba7388f83b3 100644
--- a/src/core/server/plugins/plugins_system.test.ts
+++ b/src/core/server/plugins/plugins_system.test.ts
@@ -42,7 +42,7 @@ import { CoreContext } from '../core_context';
 import { loggingSystemMock } from '../logging/logging_system.mock';
 
 import { PluginWrapper } from './plugin';
-import { PluginName } from './types';
+import { PluginName, CompatibleEnginePluginVersions } from './types';
 import { PluginsSystem } from './plugins_system';
 import { coreMock } from '../mocks';
 import { Logger } from '../logging';
@@ -53,13 +53,13 @@ function createPlugin(
   {
     required = [],
     optional = [],
-    requiredOSPlugin = [],
+    requiredOSPlugin = {},
     server = true,
     ui = true,
   }: {
     required?: string[];
     optional?: string[];
-    requiredOSPlugin?: string[];
+    requiredOSPlugin?: CompatibleEnginePluginVersions;
     server?: boolean;
     ui?: boolean;
   } = {}
@@ -72,7 +72,7 @@ function createPlugin(
       configPath: 'path',
       opensearchDashboardsVersion: '7.0.0',
       requiredPlugins: required,
-      requiredOpenSearchPlugins: requiredOSPlugin,
+      requiredEnginePlugins: requiredOSPlugin,
       optionalPlugins: optional,
       requiredBundles: [],
       server,
@@ -195,7 +195,12 @@ test('correctly orders plugins and returns exposed values for "setup" and "start
   }
   const plugins = new Map([
     [
-      createPlugin('order-4', { required: ['order-2'], requiredOSPlugin: ['test-plugin'] }),
+      createPlugin('order-4', {
+        required: ['order-2'],
+        requiredOSPlugin: {
+          'test-plugin-1': '^1.1.1',
+        },
+      }),
       {
         setup: { 'order-2': 'added-as-2' },
         start: { 'order-2': 'started-as-2' },
@@ -253,12 +258,12 @@ test('correctly orders plugins and returns exposed values for "setup" and "start
   );
 
   const opensearch = startDeps.opensearch;
-  opensearch.client.asInternalUser.cat.plugins.mockResolvedValue({
+  opensearch.client.asInternalUser.cat.plugins.mockResolvedValueOnce({
     body: [
       {
         name: 'node-1',
-        component: 'test-plugin',
-        version: 'v1',
+        component: 'test-plugin-1',
+        version: '1.9.9',
       },
     ],
   } as any);
@@ -509,7 +514,7 @@ describe('start', () => {
       {
         name: 'node-1',
         component: 'test-plugin',
-        version: 'v1',
+        version: '2.1.0',
       },
     ],
   } as any);
@@ -549,8 +554,12 @@ describe('start', () => {
 
   it('validates opensearch plugin installation when dependency is fulfilled', async () => {
     [
-      createPlugin('order-1', { requiredOSPlugin: ['test-plugin'] }),
-      createPlugin('order-2'),
+      createPlugin('dependency-fulfilled-plugin', {
+        requiredOSPlugin: {
+          'test-plugin': '^2.0.0',
+        },
+      }),
+      createPlugin('no-dependency-plugin'),
     ].forEach((plugin, index) => {
       jest.spyOn(plugin, 'setup').mockResolvedValue(`setup-as-${index}`);
       jest.spyOn(plugin, 'start').mockResolvedValue(`started-as-${index}`);
@@ -561,12 +570,18 @@ describe('start', () => {
     const pluginsStart = await pluginsSystem.startPlugins(startDeps);
     expect(pluginsStart).toBeInstanceOf(Map);
     expect(opensearch.client.asInternalUser.cat.plugins).toHaveBeenCalledTimes(1);
+    const log = logger.get.mock.results[0].value as jest.Mocked<Logger>;
+    expect(log.warn).toHaveBeenCalledTimes(0);
   });
 
   it('validates opensearch plugin installation and does not error out when plugin is not installed', async () => {
     [
-      createPlugin('id-1', { requiredOSPlugin: ['missing-opensearch-dep'] }),
-      createPlugin('id-2'),
+      createPlugin('dependency-missing-plugin', {
+        requiredOSPlugin: {
+          'missing-opensearch-dep': '^2.0.0',
+        },
+      }),
+      createPlugin('no-dependency-plugin'),
     ].forEach((plugin, index) => {
       jest.spyOn(plugin, 'setup').mockResolvedValue(`setup-as-${index}`);
       jest.spyOn(plugin, 'start').mockResolvedValue(`started-as-${index}`);
@@ -577,17 +592,51 @@ describe('start', () => {
     const pluginsStart = await pluginsSystem.startPlugins(startDeps);
     expect(pluginsStart).toBeInstanceOf(Map);
     expect(opensearch.client.asInternalUser.cat.plugins).toHaveBeenCalledTimes(1);
+    const log = logger.get.mock.results[0].value as jest.Mocked<Logger>;
+    expect(log.warn).toHaveBeenCalledTimes(1);
+    expect(log.warn).toHaveBeenCalledWith(
+      `OpenSearch plugin "missing-opensearch-dep" is not installed on the engine for the OpenSearch Dashboards plugin to function as expected.`
+    );
   });
 
-  it('validates opensearch plugin installation and does not error out when there is no dependency', async () => {
-    [createPlugin('id-1'), createPlugin('id-2')].forEach((plugin, index) => {
+  it('validates opensearch plugin installation and log warning when plugin exist but version is incompatible', async () => {
+    [
+      createPlugin('version-mismatch-plugin', {
+        requiredOSPlugin: {
+          'test-plugin-version-mismatch': '^1.0.0',
+        },
+      }),
+      createPlugin('no-dependency-plugin'),
+    ].forEach((plugin, index) => {
       jest.spyOn(plugin, 'setup').mockResolvedValue(`setup-as-${index}`);
       jest.spyOn(plugin, 'start').mockResolvedValue(`started-as-${index}`);
       pluginsSystem.addPlugin(plugin);
     });
+
+    await pluginsSystem.setupPlugins(setupDeps);
+    const pluginsStart = await pluginsSystem.startPlugins(startDeps);
+    expect(pluginsStart).toBeInstanceOf(Map);
+    expect(opensearch.client.asInternalUser.cat.plugins).toHaveBeenCalledTimes(1);
+    const log = logger.get.mock.results[0].value as jest.Mocked<Logger>;
+    expect(log.warn).toHaveBeenCalledTimes(1);
+    expect(log.warn).toHaveBeenCalledWith(
+      `OpenSearch plugin "test-plugin-version-mismatch" is not installed on the engine for the OpenSearch Dashboards plugin to function as expected.`
+    );
+  });
+
+  it('validates opensearch plugin installation and does not warn when there is no dependency', async () => {
+    [createPlugin('no-dependency-plugin-1'), createPlugin('no-dependency-plugin-2')].forEach(
+      (plugin, index) => {
+        jest.spyOn(plugin, 'setup').mockResolvedValue(`setup-as-${index}`);
+        jest.spyOn(plugin, 'start').mockResolvedValue(`started-as-${index}`);
+        pluginsSystem.addPlugin(plugin);
+      }
+    );
     await pluginsSystem.setupPlugins(setupDeps);
     const pluginsStart = await pluginsSystem.startPlugins(startDeps);
     expect(pluginsStart).toBeInstanceOf(Map);
     expect(opensearch.client.asInternalUser.cat.plugins).toHaveBeenCalledTimes(1);
+    const log = logger.get.mock.results[0].value as jest.Mocked<Logger>;
+    expect(log.warn).toHaveBeenCalledTimes(0);
   });
 });
diff --git a/src/core/server/plugins/plugins_system.ts b/src/core/server/plugins/plugins_system.ts
index 6445f38f8e70..07aa88e9db31 100644
--- a/src/core/server/plugins/plugins_system.ts
+++ b/src/core/server/plugins/plugins_system.ts
@@ -29,6 +29,8 @@
  */
 
 import { withTimeout } from '@osd/std';
+import semver from 'semver';
+import { CatPluginsResponse } from '@opensearch-project/opensearch/api/types';
 import { CoreContext } from '../core_context';
 import { Logger } from '../logging';
 import { PluginWrapper } from './plugin';
@@ -167,21 +169,40 @@ export class PluginsSystem {
 
   private async healthCheckOpenSearchPlugins(deps: PluginsServiceStartDeps) {
     // make _cat/plugins?format=json call to the OpenSearch instance
-    const opensearchPlugins = await this.getOpenSearchPlugins(deps);
+    const opensearchInstalledPlugins = await this.getOpenSearchPlugins(deps);
     for (const pluginName of this.satupPlugins) {
       this.log.debug(`For plugin "${pluginName}"...`);
       const plugin = this.plugins.get(pluginName)!;
-      const pluginBackendDeps = new Set([...plugin.requiredOpenSearchPlugins]);
-      pluginBackendDeps.forEach((opensearchPlugin) => {
-        if (!opensearchPlugins.find((obj) => obj.component === opensearchPlugin)) {
+      const pluginOpenSearchDeps = Object.entries(plugin.requiredEnginePlugins);
+      for (const [enginePluginName, versionRange] of pluginOpenSearchDeps) {
+        // add check to see if the installing Dashboards plugin version is compatible with installed OpenSearch plugin
+        if (
+          !this.isVersionCompatibleOSPluginInstalled(
+            opensearchInstalledPlugins,
+            enginePluginName,
+            versionRange
+          )
+        ) {
           this.log.warn(
-            `OpenSearch plugin "${opensearchPlugin}" is not installed on the cluster for the OpenSearch Dashboards plugin to function as expected.`
+            `OpenSearch plugin "${enginePluginName}" is not installed on the engine for the OpenSearch Dashboards plugin to function as expected.`
           );
         }
-      });
+      }
     }
   }
 
+  private isVersionCompatibleOSPluginInstalled(
+    opensearchInstalledPlugins: CatPluginsResponse,
+    depPlugin: string,
+    versionRange: string
+  ) {
+    return opensearchInstalledPlugins.find(
+      (obj) =>
+        obj.component === depPlugin &&
+        semver.satisfies(semver.coerce(obj.version)!.version, versionRange)
+    );
+  }
+
   private async getOpenSearchPlugins(deps: PluginsServiceStartDeps) {
     // Makes cat.plugin api call to fetch list of OpenSearch plugins installed on the cluster
     try {
diff --git a/src/core/server/plugins/types.ts b/src/core/server/plugins/types.ts
index 12b28f48f237..66c8115efc4a 100644
--- a/src/core/server/plugins/types.ts
+++ b/src/core/server/plugins/types.ts
@@ -105,6 +105,9 @@ export type PluginName = string;
 /** @public */
 export type PluginOpaqueId = symbol;
 
+/** @public */
+export type CompatibleEnginePluginVersions = Record<string, string>;
+
 /** @internal */
 export interface PluginDependencies {
   asNames: ReadonlyMap<PluginName, PluginName[]>;
@@ -155,10 +158,10 @@ export interface PluginManifest {
   readonly requiredPlugins: readonly PluginName[];
 
   /**
-   * An optional list of component names of the backend OpenSearch plugins that **must be** installed on the cluster
+   * An optional list of the OpenSearch plugins that **must be** installed on the cluster
    * for this plugin to function properly.
    */
-  readonly requiredOpenSearchPlugins: readonly PluginName[];
+  readonly requiredEnginePlugins: CompatibleEnginePluginVersions;
 
   /**
    * List of plugin ids that this plugin's UI code imports modules from that are
diff --git a/src/core/server/rendering/rendering_service.tsx b/src/core/server/rendering/rendering_service.tsx
index c7c03c1eb72c..d0a62555d4b2 100644
--- a/src/core/server/rendering/rendering_service.tsx
+++ b/src/core/server/rendering/rendering_service.tsx
@@ -198,7 +198,7 @@ export class RenderingService {
 
   /**
    * Assign values for branding related configurations based on branding validation
-   * by calling checkBrandingValid(). For dark mode URLs, add additonal validation
+   * by calling checkBrandingValid(). For dark mode URLs, add additional validation
    * to see if there is a valid default mode URL exist first. If URL is valid, pass in
    * the actual URL; if not, pass in undefined.
    *
diff --git a/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap b/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
index 87a00f601a44..36d073992ec8 100644
--- a/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
+++ b/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
@@ -13,7 +13,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -36,7 +38,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -80,9 +82,12 @@ Array [
         class="loadingLogoContainer"
       >
         <img
-          alt="undefined logo"
+          alt="OpenSearch Dashboards logo"
           class="loadingLogo"
-          src="/darkModeLoadingLogo"
+          data-test-image-url="/defaultModeLoadingLogo"
+          data-test-subj="customLogo"
+          loading="eager"
+          src="/defaultModeLoadingLogo"
         />
       </div>
       <div
@@ -96,26 +101,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -151,7 +143,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -174,7 +168,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -218,8 +212,11 @@ Array [
         class="loadingLogoContainer"
       >
         <img
-          alt="undefined logo"
+          alt="OpenSearch Dashboards logo"
           class="loadingLogo"
+          data-test-image-url="/defaultModeLoadingLogo"
+          data-test-subj="customLogo"
+          loading="eager"
           src="/defaultModeLoadingLogo"
         />
       </div>
@@ -234,26 +231,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -289,7 +273,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -312,7 +298,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -356,9 +342,12 @@ Array [
         class="loadingLogoContainer"
       >
         <img
-          alt="undefined logo"
+          alt="OpenSearch Dashboards logo"
           class="loadingLogo"
-          src="/darkModeMark"
+          data-test-image-url="/defaultModeMark"
+          data-test-subj="alternativeLogo"
+          loading="eager"
+          src="/defaultModeMark"
         />
       </div>
       <div
@@ -375,26 +364,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -430,7 +406,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -453,7 +431,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -497,8 +475,11 @@ Array [
         class="loadingLogoContainer"
       >
         <img
-          alt="undefined logo"
+          alt="OpenSearch Dashboards logo"
           class="loadingLogo"
+          data-test-image-url="/defaultModeMark"
+          data-test-subj="alternativeLogo"
+          loading="eager"
           src="/defaultModeMark"
         />
       </div>
@@ -516,26 +497,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -571,7 +539,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -594,7 +564,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -634,36 +604,18 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 90 90"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="loadingLogoContainer"
       >
-        <g>
-          <path
-            d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-            fill="#005EB8"
-          />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            from="0 40 40"
-            keyTimes="0; .3; .7; 1"
-            repeatCount="indefinite"
-            to="359.9 40 40"
-            type="rotate"
-            values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          />
-        </g>
-        <path
-          d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-          fill="#003B5C"
-        />
-        <path
-          d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-          fill="#005EB8"
+        <img
+          alt="OpenSearch Dashboards logo"
+          class="loadingLogo"
+          data-test-image-url="/ui/logos/opensearch_spinner_on_light.svg"
+          data-test-subj="defaultLogo"
+          loading="eager"
+          src="/ui/logos/opensearch_spinner_on_light.svg"
         />
-      </svg>
+      </div>
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -675,26 +627,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+      data-test-subj="default logo"
+      src="/ui/logos/opensearch_mark_on_light.svg"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -755,7 +694,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -801,6 +740,9 @@ Array [
         <img
           alt="custom title logo"
           class="loadingLogo"
+          data-test-image-url="defaultModeLoadingLogo/"
+          data-test-subj="customLogo"
+          loading="eager"
           src="defaultModeLoadingLogo/"
         />
       </div>
@@ -815,26 +757,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="custom title logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -895,7 +824,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -941,6 +870,9 @@ Array [
         <img
           alt="custom title logo"
           class="loadingLogo"
+          data-test-image-url="/defaultModeMark"
+          data-test-subj="alternativeLogo"
+          loading="eager"
           src="/defaultModeMark"
         />
       </div>
@@ -958,26 +890,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="custom title logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -1038,7 +957,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -1078,36 +997,18 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 90 90"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="loadingLogoContainer"
       >
-        <g>
-          <path
-            d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-            fill="#005EB8"
-          />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            from="0 40 40"
-            keyTimes="0; .3; .7; 1"
-            repeatCount="indefinite"
-            to="359.9 40 40"
-            type="rotate"
-            values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          />
-        </g>
-        <path
-          d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-          fill="#003B5C"
-        />
-        <path
-          d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-          fill="#005EB8"
+        <img
+          alt="custom title logo"
+          class="loadingLogo"
+          data-test-image-url="/ui/logos/opensearch_spinner_on_light.svg"
+          data-test-subj="defaultLogo"
+          loading="eager"
+          src="/ui/logos/opensearch_spinner_on_light.svg"
         />
-      </svg>
+      </div>
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1119,26 +1020,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="custom title logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+      data-test-subj="default logo"
+      src="/ui/logos/opensearch_mark_on_light.svg"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -1174,7 +1062,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="/customFavicon"
     rel="apple-touch-icon"
@@ -1197,7 +1087,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="/customFavicon"
     rel="mask-icon"
   />,
@@ -1237,36 +1127,18 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 90 90"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="loadingLogoContainer"
       >
-        <g>
-          <path
-            d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-            fill="#005EB8"
-          />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            from="0 40 40"
-            keyTimes="0; .3; .7; 1"
-            repeatCount="indefinite"
-            to="359.9 40 40"
-            type="rotate"
-            values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          />
-        </g>
-        <path
-          d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-          fill="#003B5C"
-        />
-        <path
-          d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-          fill="#005EB8"
+        <img
+          alt="OpenSearch Dashboards logo"
+          class="loadingLogo"
+          data-test-image-url="/ui/logos/opensearch_spinner_on_light.svg"
+          data-test-subj="defaultLogo"
+          loading="eager"
+          src="/ui/logos/opensearch_spinner_on_light.svg"
         />
-      </svg>
+      </div>
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1278,26 +1150,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+      data-test-subj="default logo"
+      src="/ui/logos/opensearch_mark_on_light.svg"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -1333,7 +1192,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -1356,7 +1217,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -1396,36 +1257,18 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 90 90"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="loadingLogoContainer"
       >
-        <g>
-          <path
-            d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-            fill="#005EB8"
-          />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            from="0 40 40"
-            keyTimes="0; .3; .7; 1"
-            repeatCount="indefinite"
-            to="359.9 40 40"
-            type="rotate"
-            values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          />
-        </g>
-        <path
-          d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-          fill="#003B5C"
-        />
-        <path
-          d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-          fill="#005EB8"
+        <img
+          alt="OpenSearch Dashboards logo"
+          class="loadingLogo"
+          data-test-image-url="/ui/logos/opensearch_spinner_on_light.svg"
+          data-test-subj="defaultLogo"
+          loading="eager"
+          src="/ui/logos/opensearch_spinner_on_light.svg"
         />
-      </svg>
+      </div>
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1437,26 +1280,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+      data-test-subj="default logo"
+      src="/ui/logos/opensearch_mark_on_light.svg"
+    />
     <h2
       class="osdWelcomeTitle"
     />
diff --git a/src/core/server/rendering/views/fonts.tsx b/src/core/server/rendering/views/fonts.tsx
index 3f2196b56558..61005f2bf209 100644
--- a/src/core/server/rendering/views/fonts.tsx
+++ b/src/core/server/rendering/views/fonts.tsx
@@ -36,7 +36,7 @@ import { RenderingMetadata } from '../types';
 
 interface Props {
   url: RenderingMetadata['uiPublicUrl'];
-  theme: string;
+  theme: RenderingMetadata['themeVersion'];
 }
 
 interface FontFace {
diff --git a/src/core/server/rendering/views/styles.tsx b/src/core/server/rendering/views/styles.tsx
index 29047067efe9..c3edbfe01bfd 100644
--- a/src/core/server/rendering/views/styles.tsx
+++ b/src/core/server/rendering/views/styles.tsx
@@ -33,12 +33,19 @@
 import React, { FunctionComponent } from 'react';
 
 import { RenderingMetadata } from '../types';
+import { getThemeDefinition, ThemeColorSchemes } from './theme';
 
 interface Props {
   darkMode: RenderingMetadata['darkMode'];
+  theme: RenderingMetadata['themeVersion'];
 }
 
-export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
+export const Styles: FunctionComponent<Props> = ({ theme, darkMode }) => {
+  const themeDefinition = getThemeDefinition(
+    theme,
+    darkMode ? ThemeColorSchemes.DARK : ThemeColorSchemes.LIGHT
+  );
+
   return (
     <style
       dangerouslySetInnerHTML={{
@@ -65,9 +72,10 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
             display: block;
           }
 
+          {/* used on loading page */}
           .osdWelcomeView {
             line-height: 1.5;
-            background-color: ${darkMode ? '#1D1E24' : '#FFF'};
+            background-color: ${themeDefinition.ouiHeaderBackgroundColor};
             height: 100%;
             display: -webkit-box;
             display: -webkit-flex;
@@ -92,10 +100,13 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
                     justify-content: center;
           }
 
+          .legacyBrowserErrorLogo {
+            height: 64px;
+          }
+
           .osdWelcomeTitle {
-            color: #000;
+            color: ${themeDefinition.ouiColorFullShade};
             font-size: 20px;
-            font-family: sans-serif;
             margin: 16px 0;
             animation: fadeIn 1s ease-in-out;
             animation-fill-mode: forwards;
@@ -104,21 +115,17 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
           }
 
           .osdWelcomeText {
-            font-family:
             display: inline-block;
             font-size: 14px;
-            font-family: sans-serif;
             line-height: 40px !important;
             height: 40px !important;
-            color: #98a2b3;
-            color: ${darkMode ? '#98A2B3' : '#69707D'};
+            color: ${themeDefinition.euiColorDarkShade};
           }
 
           .osdLoaderWrap {
             text-align: center;
             line-height: 1;
             text-align: center;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial !important;
             letter-spacing: -.005em;
             -webkit-text-size-adjust: 100%;
             -ms-text-size-adjust: 100%;
@@ -143,7 +150,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
             width: 32px;
             height: 4px;
             overflow: hidden;
-            background-color: ${darkMode ? '#25262E' : '#F5F7FA'};
+            background-color: ${themeDefinition.euiColorLightestShade};
             line-height: 1;
           }
 
@@ -161,8 +168,8 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
           }
 
           .loadingLogoContainer {
-            height: 60px;
-            padding: 10px 10px 10px 10px;
+            height: 80px;
+            padding: 8px;
           }
 
           .loadingLogo {
diff --git a/src/core/server/rendering/views/template.tsx b/src/core/server/rendering/views/template.tsx
index 2306b7d82564..8aa7903d8df1 100644
--- a/src/core/server/rendering/views/template.tsx
+++ b/src/core/server/rendering/views/template.tsx
@@ -33,6 +33,7 @@ import React, { FunctionComponent, createElement } from 'react';
 import { RenderingMetadata } from '../types';
 import { Fonts } from './fonts';
 import { Styles } from './styles';
+import { getLogos, ImageType } from '../../../common';
 
 interface Props {
   metadata: RenderingMetadata;
@@ -50,123 +51,10 @@ export const Template: FunctionComponent<Props> = ({
     strictCsp,
   },
 }) => {
-  const openSearchLogo = (
-    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
-  );
-  const openSearchLogoSpinner = (
-    <svg viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g>
-        <path
-          d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-          fill="#005EB8"
-        />
-        <animateTransform
-          attributeName="transform"
-          type="rotate"
-          from="0 40 40"
-          to="359.9 40 40"
-          dur="1.5s"
-          repeatCount="indefinite"
-          values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          keyTimes="0; .3; .7; 1"
-        />
-      </g>
-      <path
-        d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-        fill="#005EB8"
-      />
-    </svg>
-  );
+  const logos = getLogos(injectedMetadata.branding, injectedMetadata.serverBasePath);
 
-  const loadingLogoDefault = injectedMetadata.branding.loadingLogo?.defaultUrl;
-  const loadingLogoDarkMode = injectedMetadata.branding.loadingLogo?.darkModeUrl;
-  const markDefault = injectedMetadata.branding.mark?.defaultUrl;
-  const markDarkMode = injectedMetadata.branding.mark?.darkModeUrl;
   const favicon = injectedMetadata.branding.faviconUrl;
-  const applicationTitle = injectedMetadata.branding.applicationTitle;
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * loading logo in default mode. In default mode, loading logo will
-   * proritize default loading logo URL, and then default mark URL.
-   * If both are invalid, default opensearch logo and spinner will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  const customLoadingLogoDefaultMode = () => {
-    return loadingLogoDefault ?? markDefault ?? undefined;
-  };
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * loading logo in default mode. In dark mode, loading logo will proritize
-   * loading logo URLs, then mark logo URLs.
-   * Within each type, the dark mode URL will be proritized if provided.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  const customLoadingLogoDarkMode = () => {
-    return loadingLogoDarkMode ?? loadingLogoDefault ?? markDarkMode ?? markDefault ?? undefined;
-  };
-
-  /**
-   * Render custom loading logo for both default mode and dark mode
-   *
-   * @returns a valid custom loading logo URL, or undefined
-   */
-  const customLoadingLogo = () => {
-    return darkMode ? customLoadingLogoDarkMode() : customLoadingLogoDefaultMode();
-  };
-
-  /**
-   * Check if a horizontal loading is needed to be rendered.
-   * Loading bar will be rendered only when a default mode mark URL or
-   * dark mode mark URL is rendered as the loading logo. We add the
-   * horizontal loading bar on the bottom of the static mark logo to have
-   * some loading effect for the loading page.
-   *
-   * @returns a loading bar component or no loading bar component
-   */
-  const renderBrandingEnabledOrDisabledLoadingBar = () => {
-    if (customLoadingLogo() && !loadingLogoDefault) {
-      return <div className="osdProgress" />;
-    }
-  };
-
-  /**
-   * Check if we render a custom loading logo or the default opensearch spinner.
-   * If customLoadingLogo() returns undefined(no valid custom URL is found), we
-   * render the default opensearch logo spinenr
-   *
-   * @returns a image component with custom logo URL, or the default opensearch logo spinner
-   */
-  const renderBrandingEnabledOrDisabledLoadingLogo = () => {
-    if (customLoadingLogo()) {
-      return (
-        <div className="loadingLogoContainer">
-          <img className="loadingLogo" src={customLoadingLogo()} alt={applicationTitle + ' logo'} />
-        </div>
-      );
-    }
-    return openSearchLogoSpinner;
-  };
+  const applicationTitle = injectedMetadata.branding.applicationTitle || 'OpenSearch Dashboards';
 
   return (
     <html lang={locale}>
@@ -176,19 +64,22 @@ export const Template: FunctionComponent<Props> = ({
         <meta name="viewport" content="width=device-width" />
         <title>{applicationTitle}</title>
         {/**
+         * ToDo: Custom branded favicons will not work correctly across all browsers with
+         * these `link` elements and single type. Try to guess the image and use only one.
+         *
          * Favicons (generated from https://realfavicongenerator.net/)
          *
          * For user customized favicon using yml file:
-         * If user inputs a valid URL, we gurantee basic favicon customization, such as
+         * If user inputs a valid URL, we guarantee basic favicon customization, such as
          * browser favicon(Chrome, Firefox, Safari, and Edge), apple touch icon, safari
          * pinned icon. (For Safari browser favicon, we recommend input a png image URL,
          * svg image URL might not work)
          *
          * we do not guarantee other advanced favicon customization such as
-         * windows tile icon, Andriod device favicon etc. However, the opensearch favicon
+         * windows tile icon, Android device favicon etc. However, the opensearch favicon
          * will not be shown at those places and the default browser/device icon will be shown instead.
          *
-         * If user inputs a invalid URL, original opensearch favicon will be used.
+         * If user inputs an invalid URL, original Opensearch Dashboards favicon will be used.
          */}
 
         <link
@@ -211,9 +102,10 @@ export const Template: FunctionComponent<Props> = ({
 
         <link rel="manifest" href={favicon ? `` : `${uiPublicUrl}/favicons/manifest.json`} />
 
+        {/* Ignoring all of the above, Safari picks this one */}
         <link
           rel="mask-icon"
-          color="#e8488b"
+          color="#003553"
           href={favicon ?? `${uiPublicUrl}/favicons/safari-pinned-tab.svg`}
         />
         <link rel="shortcut icon" href={favicon ?? `${uiPublicUrl}/favicons/favicon.ico`} />
@@ -224,7 +116,7 @@ export const Template: FunctionComponent<Props> = ({
         />
 
         <meta name="theme-color" content="#ffffff" />
-        <Styles darkMode={darkMode} />
+        <Styles darkMode={darkMode} theme={themeVersion} />
 
         {/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}
         <meta name="add-styles-here" />
@@ -245,23 +137,39 @@ export const Template: FunctionComponent<Props> = ({
           data-test-subj="osdLoadingMessage"
         >
           <div className="osdLoaderWrap" data-test-subj="loadingLogo">
-            {renderBrandingEnabledOrDisabledLoadingLogo()}
+            <div className="loadingLogoContainer">
+              <img
+                className="loadingLogo"
+                src={logos.AnimatedMark.url}
+                alt={`${applicationTitle} logo`}
+                data-test-subj={`${logos.AnimatedMark.type}Logo`}
+                data-test-image-url={logos.AnimatedMark.url}
+                loading="eager"
+              />
+            </div>
             <div
               className="osdWelcomeText"
               data-error-message={i18n('core.ui.welcomeErrorMessage', {
-                defaultMessage: `${injectedMetadata.branding.applicationTitle} did not load properly. Check the server output for more information.`,
+                defaultMessage: `${applicationTitle} did not load properly. Check the server output for more information.`,
               })}
             >
               {i18n('core.ui.welcomeMessage', {
-                defaultMessage: `Loading ${injectedMetadata.branding.applicationTitle}`,
+                defaultMessage: `Loading ${applicationTitle}`,
               })}
             </div>
-            {renderBrandingEnabledOrDisabledLoadingBar()}
+            {/* Show a progress bar if a static custom branded logo is used */}
+            {logos.AnimatedMark.type === ImageType.ALTERNATIVE && <div className="osdProgress" />}
           </div>
         </div>
 
         <div className="osdWelcomeView" id="osd_legacy_browser_error" style={{ display: 'none' }}>
-          {openSearchLogo}
+          <img
+            data-test-subj={logos.Mark.type + ' logo'}
+            data-test-image-url={logos.Mark.url}
+            src={logos.Mark.url}
+            alt={`${applicationTitle} logo`}
+            className="legacyBrowserErrorLogo"
+          />
 
           <h2 className="osdWelcomeTitle">
             {i18n('core.ui.legacyBrowserTitle', {
diff --git a/src/core/server/rendering/views/theme.ts b/src/core/server/rendering/views/theme.ts
new file mode 100644
index 000000000000..736bbeca135d
--- /dev/null
+++ b/src/core/server/rendering/views/theme.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { deepFreeze } from '@osd/std';
+
+export enum ThemeColorSchemes {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+export const THEME_SOURCES: {
+  [key: string]: {
+    [key in ThemeColorSchemes]: string;
+  };
+} = deepFreeze({
+  v7: {
+    [ThemeColorSchemes.LIGHT]: '@elastic/eui/dist/eui_theme_light.json',
+    [ThemeColorSchemes.DARK]: '@elastic/eui/dist/eui_theme_dark.json',
+  },
+  default: {
+    [ThemeColorSchemes.LIGHT]: '@elastic/eui/dist/eui_theme_next_light.json',
+    [ThemeColorSchemes.DARK]: '@elastic/eui/dist/eui_theme_next_dark.json',
+  },
+});
+
+export const getThemeDefinitionSource = (
+  theme: string,
+  colorScheme: ThemeColorSchemes = ThemeColorSchemes.LIGHT
+) => {
+  const themeName = theme in THEME_SOURCES ? theme : 'default';
+  return THEME_SOURCES[themeName][colorScheme];
+};
+
+export const getThemeDefinition = (
+  theme: string,
+  colorScheme: ThemeColorSchemes = ThemeColorSchemes.LIGHT
+) => {
+  const file = getThemeDefinitionSource(theme, colorScheme);
+  return require(file);
+};
diff --git a/src/core/server/ui_settings/settings/accessibility.ts b/src/core/server/ui_settings/settings/accessibility.ts
index 1238ae58d922..56fef57de84b 100644
--- a/src/core/server/ui_settings/settings/accessibility.ts
+++ b/src/core/server/ui_settings/settings/accessibility.ts
@@ -43,7 +43,7 @@ export const getAccessibilitySettings = (): Record<string, UiSettingsParams> =>
         defaultMessage:
           'Turn off all unnecessary animations in the OpenSearch Dashboards UI. Refresh the page to apply the changes.',
       }),
-      category: ['accessibility'],
+      category: ['appearance'],
       requiresPageReload: true,
       schema: schema.boolean(),
     },
diff --git a/src/core/server/ui_settings/settings/navigation.ts b/src/core/server/ui_settings/settings/navigation.ts
index 966e6a58127a..2ea04e180f03 100644
--- a/src/core/server/ui_settings/settings/navigation.ts
+++ b/src/core/server/ui_settings/settings/navigation.ts
@@ -77,6 +77,7 @@ export const getNavigationSettings = (): Record<string, UiSettingsParams> => {
           defaultMessage: 'Legacy',
         }),
       },
+      category: ['appearance'],
       schema: schema.oneOf([schema.literal('modern'), schema.literal('legacy')]),
     },
   };
diff --git a/src/core/server/ui_settings/settings/theme.ts b/src/core/server/ui_settings/settings/theme.ts
index c09106f9676d..94dec047ff35 100644
--- a/src/core/server/ui_settings/settings/theme.ts
+++ b/src/core/server/ui_settings/settings/theme.ts
@@ -43,19 +43,25 @@ export const getThemeSettings = (): Record<string, UiSettingsParams> => {
         defaultMessage: `Enable a dark mode for the OpenSearch Dashboards UI. A page refresh is required for the setting to be applied.`,
       }),
       requiresPageReload: true,
+      category: ['appearance'],
       schema: schema.boolean(),
     },
     'theme:version': {
       name: i18n.translate('core.ui_settings.params.themeVersionTitle', {
         defaultMessage: 'Theme version',
       }),
-      value: 'v7',
+      value: 'Next (preview)',
       type: 'select',
       options: ['v7', 'Next (preview)'],
       description: i18n.translate('core.ui_settings.params.themeVersionText', {
-        defaultMessage: `Switch between the theme used for the current and next version of OpenSearch Dashboards, A page refresh is required for the setting to be applied.`,
+        defaultMessage: `<p>Switch between the themes used for the current and next versions of OpenSearch Dashboards. A page refresh is required for the setting to be applied.</p><p><a href="{href}">{linkText}</a></p>`,
+        values: {
+          href: 'https://forum.opensearch.org/t/feedback-on-dark-mode-experience/15725',
+          linkText: 'Theme feedback',
+        },
       }),
       requiresPageReload: true,
+      category: ['appearance'],
       schema: schema.oneOf([schema.literal('v7'), schema.literal('Next (preview)')]),
     },
   };
diff --git a/src/core/server/ui_settings/ui_settings_config.ts b/src/core/server/ui_settings/ui_settings_config.ts
index 1f71e58bd7ec..6924640ca1e5 100644
--- a/src/core/server/ui_settings/ui_settings_config.ts
+++ b/src/core/server/ui_settings/ui_settings_config.ts
@@ -56,7 +56,7 @@ const configSchema = schema.object({
   overrides: schema.object({}, { unknowns: 'allow' }),
   defaults: schema.object({
     'theme:darkMode': schema.maybe(schema.boolean({ defaultValue: false })),
-    'theme:version': schema.maybe(schema.string({ defaultValue: 'v7' })),
+    'theme:version': schema.maybe(schema.string({ defaultValue: 'v8' })),
   }),
 });
 
diff --git a/src/core/tsconfig.json b/src/core/tsconfig.json
index a3531057767d..3281d2f19cfe 100644
--- a/src/core/tsconfig.json
+++ b/src/core/tsconfig.json
@@ -9,6 +9,7 @@
   },
   "include": [
     "public/**/*",
+    "common/**/*",
     "server/**/*",
     "types/**/*",
     "test_helpers/**/*",
diff --git a/src/core/types/capabilities.ts b/src/core/types/capabilities.ts
index a4d4b59b2a4e..d964cd75b997 100644
--- a/src/core/types/capabilities.ts
+++ b/src/core/types/capabilities.ts
@@ -47,6 +47,6 @@ export interface Capabilities {
   /** Catalogue capabilities. Catalogue entries drive the visibility of the OpenSearch Dashboards homepage options. */
   catalogue: Record<string, boolean>;
 
-  /** Custom capabilities, registered by plugins. */
-  [key: string]: Record<string, boolean | Record<string, boolean>>;
+  /** Custom capabilities, registered by plugins. undefined if the key does not exist */
+  [key: string]: Record<string, boolean | Record<string, boolean>> | undefined;
 }
diff --git a/src/dev/i18n/__snapshots__/extract_default_translations.test.js.snap b/src/dev/i18n/__snapshots__/extract_default_translations.test.js.snap
index b19b366a8db7..68ed0433f1ae 100644
--- a/src/dev/i18n/__snapshots__/extract_default_translations.test.js.snap
+++ b/src/dev/i18n/__snapshots__/extract_default_translations.test.js.snap
@@ -30,13 +30,6 @@ Array [
       "message": "Message 4",
     },
   ],
-  Array [
-    "plugin_1.id_7",
-    Object {
-      "description": undefined,
-      "message": "Message 7",
-    },
-  ],
 ]
 `;
 
diff --git a/src/dev/i18n/extract_default_translations.js b/src/dev/i18n/extract_default_translations.js
index e99c733bcb98..3581e6e6982f 100644
--- a/src/dev/i18n/extract_default_translations.js
+++ b/src/dev/i18n/extract_default_translations.js
@@ -30,7 +30,7 @@
 
 import path from 'path';
 
-import { extractHtmlMessages, extractCodeMessages } from './extractors';
+import { extractCodeMessages } from './extractors';
 import { globAsync, readFileAsync, normalizePath } from './utils';
 
 import { createFailError, isFailError } from '@osd/dev-utils';
@@ -81,7 +81,7 @@ export async function matchEntriesWithExctractors(inputPath, options = {}) {
     '**/*.d.ts',
   ].concat(additionalIgnore);
 
-  const entries = await globAsync('*.{js,jsx,ts,tsx,html}', {
+  const entries = await globAsync('*.{js,jsx,ts,tsx}', {
     cwd: inputPath,
     matchBase: true,
     ignore,
@@ -89,25 +89,13 @@ export async function matchEntriesWithExctractors(inputPath, options = {}) {
     absolute,
   });
 
-  const { htmlEntries, codeEntries } = entries.reduce(
-    (paths, entry) => {
-      const resolvedPath = path.resolve(inputPath, entry);
+  const codeEntries = entries.reduce((paths, entry) => {
+    const resolvedPath = path.resolve(inputPath, entry);
 
-      if (resolvedPath.endsWith('.html')) {
-        paths.htmlEntries.push(resolvedPath);
-      } else {
-        paths.codeEntries.push(resolvedPath);
-      }
-
-      return paths;
-    },
-    { htmlEntries: [], codeEntries: [] }
-  );
-
-  return [
-    [htmlEntries, extractHtmlMessages],
-    [codeEntries, extractCodeMessages],
-  ];
+    paths.push(resolvedPath);
+    return paths;
+  }, []);
+  return [[codeEntries, extractCodeMessages]];
 }
 
 export async function extractMessagesFromPathToMap(inputPath, targetMap, config, reporter) {
diff --git a/src/dev/i18n/extractors/__snapshots__/html.test.js.snap b/src/dev/i18n/extractors/__snapshots__/html.test.js.snap
deleted file mode 100644
index c7cd77b23f1f..000000000000
--- a/src/dev/i18n/extractors/__snapshots__/html.test.js.snap
+++ /dev/null
@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`dev/i18n/extractors/html extracts default messages from HTML 1`] = `
-Array [
-  Array [
-    "osd.dashboard.id-1",
-    Object {
-      "description": "Message description 1",
-      "message": "Message text 1 {value}",
-    },
-  ],
-  Array [
-    "osd.dashboard.id-2",
-    Object {
-      "description": undefined,
-      "message": "Message text 2",
-    },
-  ],
-  Array [
-    "osd.dashboard.id-3",
-    Object {
-      "description": "Message description 3",
-      "message": "Message text 3",
-    },
-  ],
-]
-`;
-
-exports[`dev/i18n/extractors/html extracts default messages from HTML with one-time binding 1`] = `
-Array [
-  Array [
-    "osd.id",
-    Object {
-      "description": undefined,
-      "message": "Message text with {value}",
-    },
-  ],
-]
-`;
-
-exports[`dev/i18n/extractors/html extracts message from i18n filter in interpolating directive 1`] = `
-Array [
-  Array [
-    "namespace.messageId",
-    Object {
-      "description": undefined,
-      "message": "Message",
-    },
-  ],
-]
-`;
-
-exports[`dev/i18n/extractors/html throws on empty i18n-id 1`] = `
-Array [
-  Array [
-    [Error: Empty "i18n-id" value in angular directive is not allowed.],
-  ],
-]
-`;
-
-exports[`dev/i18n/extractors/html throws on i18n filter usage in complex angular expression 1`] = `
-Array [
-  Array [
-    [Error: Couldn't parse angular i18n expression:
-Missing semicolon. (1:5):
- mode as ('metricVis.colorModes.' + mode],
-  ],
-]
-`;
-
-exports[`dev/i18n/extractors/html throws on missing i18n-default-message attribute 1`] = `
-Array [
-  Array [
-    [Error: Empty defaultMessage in angular directive is not allowed ("message-id").],
-  ],
-]
-`;
diff --git a/src/dev/i18n/extractors/html.js b/src/dev/i18n/extractors/html.js
deleted file mode 100644
index a145b2feaf1a..000000000000
--- a/src/dev/i18n/extractors/html.js
+++ /dev/null
@@ -1,274 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Any modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-/*
- * 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 cheerio from 'cheerio';
-import { parse } from '@babel/parser';
-import { isObjectExpression, isStringLiteral } from '@babel/types';
-
-import {
-  isPropertyWithKey,
-  formatHTMLString,
-  formatJSString,
-  traverseNodes,
-  checkValuesProperty,
-  createParserErrorMessage,
-  extractMessageValueFromNode,
-  extractValuesKeysFromNode,
-  extractDescriptionValueFromNode,
-} from '../utils';
-import { DEFAULT_MESSAGE_KEY, DESCRIPTION_KEY, VALUES_KEY } from '../constants';
-import { createFailError, isFailError } from '@osd/dev-utils';
-
-/**
- * Find all substrings of "{{ any text }}" pattern allowing '{' and '}' chars in single quote strings
- *
- * Example: `{{ ::'message.id' | i18n: { defaultMessage: 'Message with {{curlyBraces}}' } }}`
- */
-const ANGULAR_EXPRESSION_REGEX = /{{([^{}]|({([^']|('([^']|(\\'))*'))*?}))*}}+/g;
-
-const LINEBREAK_REGEX = /\n/g;
-const I18N_FILTER_MARKER = '| i18n: ';
-
-function parseExpression(expression) {
-  let ast;
-
-  try {
-    ast = parse(`+${expression}`.replace(LINEBREAK_REGEX, ' '));
-  } catch (error) {
-    if (error instanceof SyntaxError) {
-      const errorWithContext = createParserErrorMessage(` ${expression}`, error);
-      throw createFailError(`Couldn't parse angular i18n expression:\n${errorWithContext}`);
-    }
-  }
-
-  return ast;
-}
-
-/**
- * Extract default message from an angular filter expression argument
- * @param {string} expression JavaScript code containing a filter object
- * @param {string} messageId id of the message
- * @returns {{ message?: string, description?: string, valuesKeys: string[]] }}
- */
-function parseFilterObjectExpression(expression, messageId) {
-  const ast = parseExpression(expression);
-  const objectExpressionNode = [...traverseNodes(ast.program.body)].find((node) =>
-    isObjectExpression(node)
-  );
-
-  if (!objectExpressionNode) {
-    return {};
-  }
-
-  const [messageProperty, descriptionProperty, valuesProperty] = [
-    DEFAULT_MESSAGE_KEY,
-    DESCRIPTION_KEY,
-    VALUES_KEY,
-  ].map((key) =>
-    objectExpressionNode.properties.find((property) => isPropertyWithKey(property, key))
-  );
-
-  const message = messageProperty
-    ? formatJSString(extractMessageValueFromNode(messageProperty.value, messageId))
-    : undefined;
-
-  const description = descriptionProperty
-    ? formatJSString(extractDescriptionValueFromNode(descriptionProperty.value, messageId))
-    : undefined;
-
-  const valuesKeys = valuesProperty
-    ? extractValuesKeysFromNode(valuesProperty.value, messageId)
-    : [];
-
-  return { message, description, valuesKeys };
-}
-
-function parseIdExpression(expression) {
-  const ast = parseExpression(expression);
-  const stringNode = [...traverseNodes(ast.program.body)].find((node) => isStringLiteral(node));
-
-  if (!stringNode) {
-    throw createFailError(`Message id should be a string literal, but got: \n${expression}`);
-  }
-
-  return stringNode ? formatJSString(stringNode.value) : null;
-}
-
-function trimCurlyBraces(string) {
-  if (string.startsWith('{{') && string.endsWith('}}')) {
-    return string.slice(2, -2).trim();
-  }
-
-  return string;
-}
-
-/**
- * Removes one-time binding operator `::` from the start of a string.
- *
- * Example: `::'id' | i18n: { defaultMessage: 'Message' }`
- * @param {string} string string to trim
- */
-function trimOneTimeBindingOperator(string) {
-  if (string.startsWith('::')) {
-    return string.slice(2);
-  }
-
-  return string;
-}
-
-function* extractExpressions(htmlContent) {
-  const elements = cheerio.load(htmlContent)('*').toArray();
-
-  for (const element of elements) {
-    for (const node of element.children) {
-      if (node.type === 'text') {
-        yield* (node.data.match(ANGULAR_EXPRESSION_REGEX) || [])
-          .filter((expression) => expression.includes(I18N_FILTER_MARKER))
-          .map(trimCurlyBraces);
-      }
-    }
-
-    for (const attribute of Object.values(element.attribs)) {
-      if (attribute.includes(I18N_FILTER_MARKER)) {
-        yield trimCurlyBraces(attribute);
-      }
-    }
-  }
-}
-
-function* getFilterMessages(htmlContent, reporter) {
-  for (const expression of extractExpressions(htmlContent)) {
-    const filterStart = expression.indexOf(I18N_FILTER_MARKER);
-
-    const idExpression = trimOneTimeBindingOperator(expression.slice(0, filterStart).trim());
-    const filterObjectExpression = expression.slice(filterStart + I18N_FILTER_MARKER.length).trim();
-
-    try {
-      if (!filterObjectExpression || !idExpression) {
-        throw createFailError(`Cannot parse i18n filter expression: ${expression}`);
-      }
-
-      const messageId = parseIdExpression(idExpression);
-
-      if (!messageId) {
-        throw createFailError('Empty "id" value in angular filter expression is not allowed.');
-      }
-
-      const { message, description, valuesKeys } = parseFilterObjectExpression(
-        filterObjectExpression,
-        messageId
-      );
-
-      if (!message) {
-        throw createFailError(
-          `Empty defaultMessage in angular filter expression is not allowed ("${messageId}").`
-        );
-      }
-
-      checkValuesProperty(valuesKeys, message, messageId);
-
-      yield [messageId, { message, description }];
-    } catch (error) {
-      if (!isFailError(error)) {
-        throw error;
-      }
-
-      reporter.report(error);
-    }
-  }
-}
-
-function* getDirectiveMessages(htmlContent, reporter) {
-  const $ = cheerio.load(htmlContent);
-
-  const elements = $('[i18n-id]')
-    .map((idx, el) => {
-      const $el = $(el);
-
-      return {
-        id: $el.attr('i18n-id'),
-        defaultMessage: $el.attr('i18n-default-message'),
-        description: $el.attr('i18n-description'),
-        values: $el.attr('i18n-values'),
-      };
-    })
-    .toArray();
-
-  for (const element of elements) {
-    const messageId = formatHTMLString(element.id);
-    if (!messageId) {
-      reporter.report(
-        createFailError('Empty "i18n-id" value in angular directive is not allowed.')
-      );
-      continue;
-    }
-
-    const message = formatHTMLString(element.defaultMessage);
-    if (!message) {
-      reporter.report(
-        createFailError(
-          `Empty defaultMessage in angular directive is not allowed ("${messageId}").`
-        )
-      );
-      continue;
-    }
-
-    try {
-      if (element.values) {
-        const ast = parseExpression(element.values);
-        const valuesObjectNode = [...traverseNodes(ast.program.body)].find((node) =>
-          isObjectExpression(node)
-        );
-        const valuesKeys = extractValuesKeysFromNode(valuesObjectNode);
-
-        checkValuesProperty(valuesKeys, message, messageId);
-      } else {
-        checkValuesProperty([], message, messageId);
-      }
-
-      yield [
-        messageId,
-        { message, description: formatHTMLString(element.description) || undefined },
-      ];
-    } catch (error) {
-      if (!isFailError(error)) {
-        throw error;
-      }
-
-      reporter.report(error);
-    }
-  }
-}
-
-export function* extractHtmlMessages(buffer, reporter) {
-  const content = buffer.toString();
-  yield* getDirectiveMessages(content, reporter);
-  yield* getFilterMessages(content, reporter);
-}
diff --git a/src/dev/i18n/extractors/html.test.js b/src/dev/i18n/extractors/html.test.js
deleted file mode 100644
index ffb00207f193..000000000000
--- a/src/dev/i18n/extractors/html.test.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Any modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-/*
- * 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 { extractHtmlMessages } from './html';
-
-const htmlSourceBuffer = Buffer.from(`
-<div name="dashboard">
-  <div>
-    <p
-      i18n-id="osd.dashboard.id-1"
-      i18n-default-message="Message text 1 {value}"
-      i18n-description="Message description 1"
-      i18n-values="{
-        value: 'Multiline
-                string',
-      }"
-    ></p>
-  </div>
-  <div>
-    {{ 'osd.dashboard.id-2' | i18n: { defaultMessage: 'Message text 2' } }}
-  </div>
-  <div>
-    {{ 'osd.dashboard.id-3' | i18n: { defaultMessage: 'Message text 3', description: 'Message description 3' } }}
-  </div>
-</div>
-`);
-
-const report = jest.fn();
-
-describe('dev/i18n/extractors/html', () => {
-  beforeEach(() => {
-    report.mockClear();
-  });
-
-  test('extracts default messages from HTML', () => {
-    const actual = Array.from(extractHtmlMessages(htmlSourceBuffer));
-    expect(actual.sort()).toMatchSnapshot();
-  });
-
-  test('extracts default messages from HTML with one-time binding', () => {
-    const actual = Array.from(
-      extractHtmlMessages(`
-<div>
-  {{::'osd.id' | i18n: { defaultMessage: 'Message text with {value}', values: { value: 'value' } }}}
-</div>
-`)
-    );
-    expect(actual.sort()).toMatchSnapshot();
-  });
-
-  test('throws on empty i18n-id', () => {
-    const source = Buffer.from(`\
-<p
-  i18n-id=""
-  i18n-default-message="Message text"
-  i18n-description="Message description"
-></p>
-`);
-
-    expect(() => extractHtmlMessages(source, { report }).next()).not.toThrow();
-    expect(report.mock.calls).toMatchSnapshot();
-  });
-
-  test('throws on missing i18n-default-message attribute', () => {
-    const source = Buffer.from(`\
-<p
-  i18n-id="message-id"
-></p>
-`);
-
-    expect(() => extractHtmlMessages(source, { report }).next()).not.toThrow();
-    expect(report.mock.calls).toMatchSnapshot();
-  });
-
-  test('throws on i18n filter usage in complex angular expression', () => {
-    const source = Buffer.from(`\
-<div
-  ng-options="mode as ('metricVis.colorModes.' + mode | i18n: { defaultMessage: mode }) for mode in collections.metricColorMode"
-></div>
-`);
-
-    expect(() => extractHtmlMessages(source, { report }).next()).not.toThrow();
-    expect(report.mock.calls).toMatchSnapshot();
-  });
-
-  test('extracts message from i18n filter in interpolating directive', () => {
-    const source = Buffer.from(`
-<icon-tip
-  content="::'namespace.messageId' | i18n: {
-    defaultMessage: 'Message'
-  }"
-  position="'right'"
-></icon-tip>
-`);
-
-    expect(Array.from(extractHtmlMessages(source))).toMatchSnapshot();
-  });
-});
diff --git a/src/dev/i18n/extractors/index.js b/src/dev/i18n/extractors/index.js
index 6e7601aa6599..bd501ba195b0 100644
--- a/src/dev/i18n/extractors/index.js
+++ b/src/dev/i18n/extractors/index.js
@@ -29,4 +29,3 @@
  */
 
 export { extractCodeMessages } from './code';
-export { extractHtmlMessages } from './html';
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
index 645cc92d443f..c00da923a871 100644
--- a/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
+++ b/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Form should not render no settings message when instructed not to 1`] =
 <Fragment>
   <div>
     <EuiPanel
+      id="general"
       paddingSize="l"
     >
       <EuiForm>
@@ -135,6 +136,7 @@ exports[`Form should not render no settings message when instructed not to 1`] =
       size="l"
     />
     <EuiPanel
+      id="dashboard"
       paddingSize="l"
     >
       <EuiForm>
@@ -193,6 +195,7 @@ exports[`Form should render no settings message when there are no settings 1`] =
 <Fragment>
   <div>
     <EuiPanel
+      id="general"
       paddingSize="l"
     >
       <EuiForm>
@@ -324,6 +327,7 @@ exports[`Form should render no settings message when there are no settings 1`] =
       size="l"
     />
     <EuiPanel
+      id="dashboard"
       paddingSize="l"
     >
       <EuiForm>
@@ -382,6 +386,7 @@ exports[`Form should render normally 1`] = `
 <Fragment>
   <div>
     <EuiPanel
+      id="general"
       paddingSize="l"
     >
       <EuiForm>
@@ -513,6 +518,7 @@ exports[`Form should render normally 1`] = `
       size="l"
     />
     <EuiPanel
+      id="dashboard"
       paddingSize="l"
     >
       <EuiForm>
@@ -571,6 +577,7 @@ exports[`Form should render read-only when saving is disabled 1`] = `
 <Fragment>
   <div>
     <EuiPanel
+      id="general"
       paddingSize="l"
     >
       <EuiForm>
@@ -702,6 +709,7 @@ exports[`Form should render read-only when saving is disabled 1`] = `
       size="l"
     />
     <EuiPanel
+      id="dashboard"
       paddingSize="l"
     >
       <EuiForm>
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
index a74199771d2a..adf27cd48ec4 100644
--- a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
@@ -257,7 +257,7 @@ export class Form extends PureComponent<FormProps> {
   renderCategory(category: Category, settings: FieldSetting[], totalSettings: number) {
     return (
       <Fragment key={category}>
-        <EuiPanel paddingSize="l">
+        <EuiPanel paddingSize="l" id={category}>
           <EuiForm>
             <EuiText>
               <EuiFlexGroup alignItems="baseline">
diff --git a/src/plugins/advanced_settings/public/management_app/lib/get_category_name.ts b/src/plugins/advanced_settings/public/management_app/lib/get_category_name.ts
index fbc473ffdbf5..301374747f8b 100644
--- a/src/plugins/advanced_settings/public/management_app/lib/get_category_name.ts
+++ b/src/plugins/advanced_settings/public/management_app/lib/get_category_name.ts
@@ -36,6 +36,9 @@ const names: Record<string, string> = {
   general: i18n.translate('advancedSettings.categoryNames.generalLabel', {
     defaultMessage: 'General',
   }),
+  appearance: i18n.translate('advancedSettings.categoryNames.appearanceLabel', {
+    defaultMessage: 'Appearance',
+  }),
   timeline: i18n.translate('advancedSettings.categoryNames.timelineLabel', {
     defaultMessage: 'Timeline',
   }),
diff --git a/src/plugins/charts/public/services/colors/colors.ts b/src/plugins/charts/public/services/colors/colors.ts
index 1706f67acf97..124931c30ea7 100644
--- a/src/plugins/charts/public/services/colors/colors.ts
+++ b/src/plugins/charts/public/services/colors/colors.ts
@@ -64,7 +64,7 @@ export class ColorsService {
   ) {
     if (!Array.isArray(arrayOfStringsOrNumbers)) {
       throw new Error(
-        `createColorLookupFunction expects an array but recived: ${typeof arrayOfStringsOrNumbers}`
+        `createColorLookupFunction expects an array but received: ${typeof arrayOfStringsOrNumbers}`
       );
     }
 
diff --git a/src/plugins/charts/public/services/colors/mapped_colors.ts b/src/plugins/charts/public/services/colors/mapped_colors.ts
index bc8ad8640985..a6051bf2b30f 100644
--- a/src/plugins/charts/public/services/colors/mapped_colors.ts
+++ b/src/plugins/charts/public/services/colors/mapped_colors.ts
@@ -83,34 +83,36 @@ export class MappedColors {
     const configColors = _.values(configMapping);
     const oldColors = _.values(this._oldMap);
 
+    const alreadyUsedColors: string[] = [];
     const keysToMap: Array<string | number> = [];
     _.each(keys, (key) => {
       // If this key is mapped in the config, it's unnecessary to have it mapped here
-      if (configMapping[key as any]) delete this._mapping[key];
+      if (configMapping[key as any]) {
+        delete this._mapping[key];
+        alreadyUsedColors.push(configMapping[key]);
+      }
 
       // If this key is mapped to a color used by the config color mapping, we need to remap it
       if (_.includes(configColors, this._mapping[key])) keysToMap.push(key);
 
       // if key exist in oldMap, move it to mapping
-      if (this._oldMap[key]) this._mapping[key] = this._oldMap[key];
+      if (this._oldMap[key]) {
+        this._mapping[key] = this._oldMap[key];
+        alreadyUsedColors.push(this._mapping[key]);
+      }
 
       // If this key isn't mapped, we need to map it
       if (this.get(key) == null) keysToMap.push(key);
     });
 
-    // Generate a color palette big enough that all new keys can have unique color values
-    const allColors = _(this._mapping).values().union(configColors).union(oldColors).value();
-    const numColors = allColors.length + keysToMap.length;
+    // Choose colors from euiPaletteColorBlind and filter out any already assigned to keys
     const colorPalette = euiPaletteColorBlind({
-      rotations: Math.ceil(numColors / 10),
+      rotations: Math.ceil(keys.length / 10),
       direction: 'both',
-    }).slice(0, numColors);
-    let newColors = _.difference(colorPalette, allColors);
+    })
+      .filter((color) => !alreadyUsedColors.includes(color.toLowerCase()))
+      .slice(0, keysToMap.length);
 
-    while (keysToMap.length > newColors.length) {
-      newColors = newColors.concat(_.sampleSize(allColors, keysToMap.length - newColors.length));
-    }
-
-    _.merge(this._mapping, _.zipObject(keysToMap, newColors));
+    _.merge(this._mapping, _.zipObject(keysToMap, colorPalette));
   }
 }
diff --git a/src/plugins/console/public/application/components/__snapshots__/import_flyout.test.tsx.snap b/src/plugins/console/public/application/components/__snapshots__/import_flyout.test.tsx.snap
new file mode 100644
index 000000000000..bac6be2733fd
--- /dev/null
+++ b/src/plugins/console/public/application/components/__snapshots__/import_flyout.test.tsx.snap
@@ -0,0 +1,489 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImportFlyout Component renders correctly 1`] = `
+<IntlProvider
+  locale="en"
+>
+  <ImportFlyout
+    close={[MockFunction]}
+    refresh={[MockFunction]}
+  >
+    <EuiFlyout
+      onClose={[MockFunction]}
+      size="s"
+    >
+      <div
+        data-eui="EuiFlyout"
+        role="dialog"
+      >
+        <button
+          data-test-subj="euiFlyoutCloseButton"
+          onClick={[Function]}
+          type="button"
+        />
+        <EuiFlyoutHeader
+          hasBorder={true}
+        >
+          <div
+            className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                <FormattedMessage
+                  defaultMessage="Import queries"
+                  id="console.ImportFlyout.importQueriesTitle"
+                  values={Object {}}
+                >
+                  <span>
+                    Import queries
+                  </span>
+                </FormattedMessage>
+              </h2>
+            </EuiTitle>
+          </div>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <div
+            className="euiFlyoutBody"
+          >
+            <div
+              className="euiFlyoutBody__overflow"
+              tabIndex={0}
+            >
+              <div
+                className="euiFlyoutBody__overflowContent"
+              >
+                <EuiForm>
+                  <div
+                    className="euiForm"
+                  >
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={true}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      label={
+                        <FormattedMessage
+                          defaultMessage="Select a file to import"
+                          id="console.ImportFlyout.selectFileToImportFormRowLabel"
+                          values={Object {}}
+                        />
+                      }
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow euiFormRow--fullWidth"
+                        id="generated-id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <EuiFormLabel
+                            className="euiFormRow__label"
+                            htmlFor="generated-id"
+                            isFocused={false}
+                            type="label"
+                          >
+                            <label
+                              className="euiFormLabel euiFormRow__label"
+                              htmlFor="generated-id"
+                            >
+                              <FormattedMessage
+                                defaultMessage="Select a file to import"
+                                id="console.ImportFlyout.selectFileToImportFormRowLabel"
+                                values={Object {}}
+                              >
+                                <span>
+                                  Select a file to import
+                                </span>
+                              </FormattedMessage>
+                            </label>
+                          </EuiFormLabel>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <EuiFilePicker
+                            accept=".ndjson, .json"
+                            compressed={false}
+                            data-test-subj="queryFilePicker"
+                            display="large"
+                            fullWidth={true}
+                            id="generated-id"
+                            initialPromptText={
+                              <FormattedMessage
+                                defaultMessage="Import"
+                                id="console.ImportFlyout.importPromptText"
+                                values={Object {}}
+                              />
+                            }
+                            name="queryFileImport"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                          >
+                            <EuiI18n
+                              defaults={
+                                Array [
+                                  "Clear selected files",
+                                  "files selected",
+                                ]
+                              }
+                              tokens={
+                                Array [
+                                  "euiFilePicker.clearSelectedFiles",
+                                  "euiFilePicker.filesSelected",
+                                ]
+                              }
+                            >
+                              <div
+                                className="euiFilePicker euiFilePicker--large euiFilePicker--fullWidth"
+                              >
+                                <div
+                                  className="euiFilePicker__wrap"
+                                >
+                                  <EuiValidatableControl>
+                                    <input
+                                      accept=".ndjson, .json"
+                                      aria-describedby="generated-id-filePicker__prompt"
+                                      className="euiFilePicker__input"
+                                      data-test-subj="queryFilePicker"
+                                      id="generated-id"
+                                      name="queryFileImport"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onDragLeave={[Function]}
+                                      onDragOver={[Function]}
+                                      onDrop={[Function]}
+                                      onFocus={[Function]}
+                                      type="file"
+                                    />
+                                  </EuiValidatableControl>
+                                  <div
+                                    className="euiFilePicker__prompt"
+                                    id="generated-id-filePicker__prompt"
+                                  >
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiFilePicker__icon"
+                                      size="l"
+                                      type="importAction"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        className="euiFilePicker__icon"
+                                        data-euiicon-type="importAction"
+                                        size="l"
+                                      />
+                                    </EuiIcon>
+                                    <div
+                                      className="euiFilePicker__promptText"
+                                    >
+                                      <FormattedMessage
+                                        defaultMessage="Import"
+                                        id="console.ImportFlyout.importPromptText"
+                                        values={Object {}}
+                                      >
+                                        <span>
+                                          Import
+                                        </span>
+                                      </FormattedMessage>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </EuiI18n>
+                          </EuiFilePicker>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={true}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow euiFormRow--fullWidth"
+                        id="generated-id-row"
+                      >
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <ImportModeControl
+                            id="generated-id"
+                            initialValues={
+                              Object {
+                                "overwrite": false,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                            updateSelection={[Function]}
+                          >
+                            <EuiFormFieldset
+                              legend={
+                                Object {
+                                  "children": <EuiTitle
+                                    size="xs"
+                                  >
+                                    <span>
+                                      Import options
+                                    </span>
+                                  </EuiTitle>,
+                                }
+                              }
+                            >
+                              <fieldset>
+                                <EuiFormLegend>
+                                  <legend
+                                    className="euiFormLegend"
+                                  >
+                                    <EuiTitle
+                                      size="xs"
+                                    >
+                                      <span
+                                        className="euiTitle euiTitle--xsmall"
+                                      >
+                                        Import options
+                                      </span>
+                                    </EuiTitle>
+                                  </legend>
+                                </EuiFormLegend>
+                                <EuiRadioGroup
+                                  idSelected="overwriteDisabled"
+                                  onChange={[Function]}
+                                  options={
+                                    Array [
+                                      Object {
+                                        "id": "overwriteDisabled",
+                                        "label": "Merge with existing queries",
+                                      },
+                                      Object {
+                                        "id": "overwriteEnabled",
+                                        "label": "Overwrite existing queries",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <div>
+                                    <EuiRadio
+                                      checked={true}
+                                      className="euiRadioGroup__item"
+                                      id="overwriteDisabled"
+                                      key="0"
+                                      label="Merge with existing queries"
+                                      onChange={[Function]}
+                                    >
+                                      <div
+                                        className="euiRadio euiRadioGroup__item"
+                                      >
+                                        <input
+                                          checked={true}
+                                          className="euiRadio__input"
+                                          id="overwriteDisabled"
+                                          onChange={[Function]}
+                                          type="radio"
+                                        />
+                                        <div
+                                          className="euiRadio__circle"
+                                        />
+                                        <label
+                                          className="euiRadio__label"
+                                          htmlFor="overwriteDisabled"
+                                        >
+                                          Merge with existing queries
+                                        </label>
+                                      </div>
+                                    </EuiRadio>
+                                    <EuiRadio
+                                      checked={false}
+                                      className="euiRadioGroup__item"
+                                      id="overwriteEnabled"
+                                      key="1"
+                                      label="Overwrite existing queries"
+                                      onChange={[Function]}
+                                    >
+                                      <div
+                                        className="euiRadio euiRadioGroup__item"
+                                      >
+                                        <input
+                                          checked={false}
+                                          className="euiRadio__input"
+                                          id="overwriteEnabled"
+                                          onChange={[Function]}
+                                          type="radio"
+                                        />
+                                        <div
+                                          className="euiRadio__circle"
+                                        />
+                                        <label
+                                          className="euiRadio__label"
+                                          htmlFor="overwriteEnabled"
+                                        >
+                                          Overwrite existing queries
+                                        </label>
+                                      </div>
+                                    </EuiRadio>
+                                  </div>
+                                </EuiRadioGroup>
+                              </fieldset>
+                            </EuiFormFieldset>
+                          </ImportModeControl>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                  </div>
+                </EuiForm>
+              </div>
+            </div>
+          </div>
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <div
+            className="euiFlyoutFooter"
+          >
+            <EuiFlexGroup
+              justifyContent="spaceBetween"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiButtonEmpty
+                      data-test-subj="importQueriesCancelBtn"
+                      disabled={false}
+                      onClick={[MockFunction]}
+                      size="s"
+                    >
+                      <button
+                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+                        data-test-subj="importQueriesCancelBtn"
+                        disabled={false}
+                        onClick={[MockFunction]}
+                        type="button"
+                      >
+                        <EuiButtonContent
+                          className="euiButtonEmpty__content"
+                          iconSide="left"
+                          iconSize="m"
+                          textProps={
+                            Object {
+                              "className": "euiButtonEmpty__text",
+                            }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButtonEmpty__content"
+                          >
+                            <span
+                              className="euiButtonEmpty__text"
+                            >
+                              <FormattedMessage
+                                defaultMessage="Cancel"
+                                id="console.importFlyout.import.cancelButtonLabel"
+                                values={Object {}}
+                              >
+                                <span>
+                                  Cancel
+                                </span>
+                              </FormattedMessage>
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonEmpty>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiButton
+                      data-test-subj="importQueriesConfirmBtn"
+                      disabled={true}
+                      fill={true}
+                      isLoading={false}
+                      onClick={[Function]}
+                      size="s"
+                    >
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
+                        data-test-subj="importQueriesConfirmBtn"
+                        disabled={true}
+                        element="button"
+                        fill={true}
+                        isDisabled={true}
+                        isLoading={false}
+                        onClick={[Function]}
+                        size="s"
+                        type="button"
+                      >
+                        <button
+                          className="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
+                          data-test-subj="importQueriesConfirmBtn"
+                          disabled={true}
+                          onClick={[Function]}
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                          type="button"
+                        >
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            isLoading={false}
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text"
+                              >
+                                <FormattedMessage
+                                  defaultMessage="Import"
+                                  id="console.importFlyout.import.confirmButtonLabel"
+                                  values={Object {}}
+                                >
+                                  <span>
+                                    Import
+                                  </span>
+                                </FormattedMessage>
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiFlyoutFooter>
+      </div>
+    </EuiFlyout>
+  </ImportFlyout>
+</IntlProvider>
+`;
diff --git a/src/plugins/console/public/application/components/__snapshots__/import_mode_control.test.tsx.snap b/src/plugins/console/public/application/components/__snapshots__/import_mode_control.test.tsx.snap
new file mode 100644
index 000000000000..343c6b351229
--- /dev/null
+++ b/src/plugins/console/public/application/components/__snapshots__/import_mode_control.test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImportModeControl Component should render correclty 1`] = `
+<EuiFormFieldset
+  legend={
+    Object {
+      "children": <EuiTitle
+        size="xs"
+      >
+        <span>
+          Import options
+        </span>
+      </EuiTitle>,
+    }
+  }
+>
+  <EuiRadioGroup
+    idSelected="overwriteDisabled"
+    onChange={[Function]}
+    options={
+      Array [
+        Object {
+          "id": "overwriteDisabled",
+          "label": "Merge with existing queries",
+        },
+        Object {
+          "id": "overwriteEnabled",
+          "label": "Overwrite existing queries",
+        },
+      ]
+    }
+  />
+</EuiFormFieldset>
+`;
diff --git a/src/plugins/console/public/application/components/__snapshots__/overwrite_modal.test.tsx.snap b/src/plugins/console/public/application/components/__snapshots__/overwrite_modal.test.tsx.snap
new file mode 100644
index 000000000000..27228e29674e
--- /dev/null
+++ b/src/plugins/console/public/application/components/__snapshots__/overwrite_modal.test.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverwriteModal Component should render correclty 1`] = `
+<EuiConfirmModal
+  buttonColor="danger"
+  cancelButtonText="Skip"
+  confirmButtonText="Overwrite"
+  defaultFocusedButton="confirm"
+  maxWidth="500px"
+  onCancel={[MockFunction]}
+  onConfirm={[MockFunction]}
+  title="Confirm Overwrite"
+>
+  <p>
+    Are you sure you want to overwrite the existing queries? This action cannot be undone. All existing queries will be deleted and replaced with the imported queries. If you are unsure, please choose the "Merge with existing queries" option instead
+  </p>
+</EuiConfirmModal>
+`;
diff --git a/src/plugins/console/public/application/components/import_flyout.test.tsx b/src/plugins/console/public/application/components/import_flyout.test.tsx
new file mode 100644
index 000000000000..5e7093fe306c
--- /dev/null
+++ b/src/plugins/console/public/application/components/import_flyout.test.tsx
@@ -0,0 +1,268 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { ImportFlyout } from './import_flyout';
+import { ContextValue, ServicesContextProvider } from '../contexts';
+import { serviceContextMock } from '../contexts/services_context.mock';
+import { wrapWithIntl, nextTick } from 'test_utils/enzyme_helpers';
+import { ReactWrapper, mount } from 'enzyme';
+
+const mockFile = new File(['{"text":"Sample JSON data"}'], 'sample.json', {
+  type: 'application/json',
+});
+const mockFile1 = new File(['{"text":"Sample JSON data1"}'], 'sample.json', {
+  type: 'application/json',
+});
+
+const mockInvalidFile = new File(['Some random data'], 'sample.json', {
+  type: 'application/json',
+});
+
+const filePickerIdentifier = '[data-test-subj="queryFilePicker"]';
+const confirmBtnIdentifier = '[data-test-subj="importQueriesConfirmBtn"]';
+const cancelBtnIdentifier = '[data-test-subj="importQueriesCancelBtn"]';
+const confirmModalConfirmButton = '[data-test-subj="confirmModalConfirmButton"]';
+const confirmModalCancelButton = '[data-test-subj="confirmModalCancelButton"]';
+const importErrorTextIdentifier = '[data-test-subj="importSenseObjectsErrorText"]';
+const mergeOptionIdentifier = '[id="overwriteDisabled"]';
+const overwriteOptionIdentifier = '[id="overwriteEnabled"]';
+const callOutIdentifier = 'EuiCallOut';
+
+const invalidFileError = 'The selected file is not valid. Please select a valid JSON file.';
+
+const defaultQuery = {
+  id: '43461752-1fd5-472e-8487-b47ff7fccbc8',
+  createdAt: 1690958998493,
+  updatedAt: 1690958998493,
+  text: 'GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}',
+};
+
+describe('ImportFlyout Component', () => {
+  let mockedAppContextValue: ContextValue;
+  const mockClose = jest.fn();
+  const mockRefresh = jest.fn();
+  const mockFindAll = jest.fn();
+  const mockCreate = jest.fn();
+  const mockUpdate = jest.fn();
+
+  let component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+
+  beforeEach(async () => {
+    jest.clearAllMocks();
+
+    mockedAppContextValue = serviceContextMock.create();
+
+    mockedAppContextValue.services.objectStorageClient.text = {
+      create: mockCreate,
+      update: mockUpdate,
+      findAll: mockFindAll,
+    };
+
+    mockFindAll.mockResolvedValue([defaultQuery]);
+
+    await act(async () => {
+      component = mount(wrapWithIntl(<ImportFlyout close={mockClose} refresh={mockRefresh} />), {
+        wrappingComponent: ServicesContextProvider,
+        wrappingComponentProps: {
+          value: mockedAppContextValue,
+        },
+      });
+    });
+    await nextTick();
+    component.update();
+  });
+
+  it('renders correctly', () => {
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should enable confirm button when select file', async () => {
+    // Confirm button should be disable if no file selected
+    expect(component.find(confirmBtnIdentifier).first().props().disabled).toBe(true);
+    component.update();
+
+    await act(async () => {
+      const nodes = component.find(filePickerIdentifier);
+      // @ts-ignore
+      nodes.first().props().onChange([mockFile1]);
+      await new Promise((r) => setTimeout(r, 1));
+    });
+    await nextTick();
+    component.update();
+
+    // Confirm button should be enable after importing file
+    expect(component.find(confirmBtnIdentifier).first().props().disabled).toBe(false);
+  });
+
+  it('should handle import process with default import mode', async () => {
+    await act(async () => {
+      const nodes = component.find(filePickerIdentifier);
+      // @ts-ignore
+      nodes.first().props().onChange([mockFile]);
+      // Applied a timeout after FileReader.onload event to resolve side effect issue.
+      await new Promise((r) => setTimeout(r, 10));
+    });
+
+    await nextTick();
+    component.update();
+
+    await act(async () => {
+      await nextTick();
+      component.find(confirmBtnIdentifier).first().simulate('click');
+    });
+
+    component.update();
+
+    // default option "Merge with existing queries" should be checked by default
+    expect(component.find(mergeOptionIdentifier).first().props().checked).toBe(true);
+    expect(component.find(overwriteOptionIdentifier).first().props().checked).toBe(false);
+
+    // should update existing query
+    expect(mockUpdate).toBeCalledTimes(1);
+    expect(mockClose).toBeCalledTimes(1);
+    expect(mockRefresh).toBeCalledTimes(1);
+  });
+
+  it('should handle errors during import', async () => {
+    await act(async () => {
+      const nodes = component.find(filePickerIdentifier);
+      // @ts-ignore
+      nodes.first().props().onChange([mockInvalidFile]);
+    });
+
+    component.update();
+
+    await act(async () => {
+      await nextTick();
+      component.find(confirmBtnIdentifier).first().simulate('click');
+    });
+
+    component.update();
+
+    expect(component.find(callOutIdentifier).exists()).toBe(true);
+
+    expect(component.find(importErrorTextIdentifier).text()).toEqual(invalidFileError);
+  });
+
+  it('should handle internal errors', async () => {
+    const errorMessage = 'some internal error';
+    mockFindAll.mockRejectedValue(new Error(errorMessage));
+    await act(async () => {
+      const nodes = component.find(filePickerIdentifier);
+      // @ts-ignore
+      nodes.first().props().onChange([mockFile]);
+      await new Promise((r) => setTimeout(r, 1));
+    });
+
+    component.update();
+
+    await act(async () => {
+      await nextTick();
+      component.find(confirmBtnIdentifier).first().simulate('click');
+    });
+
+    component.update();
+
+    expect(component.find(callOutIdentifier).exists()).toBe(true);
+
+    expect(component.find(importErrorTextIdentifier).text()).toEqual(
+      `The file could not be processed due to error: "${errorMessage}"`
+    );
+  });
+
+  it('should cancel button work normally', async () => {
+    act(() => {
+      component.find(cancelBtnIdentifier).first().simulate('click');
+    });
+
+    expect(mockClose).toBeCalledTimes(1);
+  });
+
+  describe('OverwriteModal', () => {
+    beforeEach(async () => {
+      jest.clearAllMocks();
+      // Select a file
+      await act(async () => {
+        const nodes = component.find(filePickerIdentifier);
+        // @ts-ignore
+        nodes.first().props().onChange([mockFile]);
+        await new Promise((r) => setTimeout(r, 1));
+      });
+      component.update();
+
+      // change import mode to overwrite
+      await act(async () => {
+        await nextTick();
+        component.find(overwriteOptionIdentifier).last().simulate('change');
+      });
+
+      component.update();
+
+      // import selected file
+      await act(async () => {
+        await nextTick();
+        component.find(confirmBtnIdentifier).first().simulate('click');
+      });
+
+      component.update();
+    });
+    it('should handle overwrite confirmation', async () => {
+      // Check confirm overwrite modal exist before confirmation
+      expect(component.find('OverwriteModal').exists()).toBe(true);
+
+      // confirm overwrite
+      await act(async () => {
+        await nextTick();
+        component.find(confirmModalConfirmButton).first().simulate('click');
+      });
+
+      component.update();
+
+      // should update existing query
+      expect(mockUpdate).toBeCalledTimes(1);
+      expect(mockClose).toBeCalledTimes(1);
+      expect(mockRefresh).toBeCalledTimes(1);
+
+      // confirm overwrite modal should close after confirmation.
+      expect(component.find('OverwriteModal').exists()).toBe(false);
+    });
+
+    it('should handle overwrite skip', async () => {
+      // Check confirm overwrite modal exist before skip
+      expect(component.find('OverwriteModal').exists()).toBe(true);
+
+      // confirm overwrite
+      act(() => {
+        component.find(confirmModalCancelButton).first().simulate('click');
+      });
+      await nextTick();
+      component.update();
+
+      // confirm overwrite modal should close after cancel.
+      expect(component.find('OverwriteModal').exists()).toBe(false);
+    });
+
+    it('should create storage text when storage client returns empty result with overwrite import mode', async () => {
+      mockFindAll.mockResolvedValue([]);
+
+      // confirm overwrite
+      await act(async () => {
+        await nextTick();
+        component.find(confirmModalConfirmButton).first().simulate('click');
+      });
+
+      component.update();
+
+      expect(component.find(overwriteOptionIdentifier).first().props().checked).toBe(true);
+
+      // should create new query
+      expect(mockCreate).toBeCalledTimes(1);
+      expect(mockClose).toBeCalledTimes(1);
+      expect(mockRefresh).toBeCalledTimes(1);
+    });
+  });
+});
diff --git a/src/plugins/console/public/application/components/import_flyout.tsx b/src/plugins/console/public/application/components/import_flyout.tsx
new file mode 100644
index 000000000000..d8c791411ade
--- /dev/null
+++ b/src/plugins/console/public/application/components/import_flyout.tsx
@@ -0,0 +1,298 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiCallOut,
+  EuiSpacer,
+  EuiFilePicker,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiForm,
+  EuiFormRow,
+  EuiLoadingSpinner,
+  EuiText,
+  EuiButton,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import moment from 'moment';
+import { i18n } from '@osd/i18n';
+import { FormattedMessage } from '@osd/i18n/react';
+import React, { Fragment, useState } from 'react';
+import { ImportMode, ImportModeControl } from './import_mode_control';
+import { useServicesContext } from '../contexts';
+import { TextObject } from '../../../common/text_object';
+import { OverwriteModal } from './overwrite_modal';
+
+const OVERWRITE_ALL_DEFAULT = false;
+
+export interface ImportFlyoutProps {
+  close: () => void;
+  refresh: () => void;
+}
+
+const getErrorMessage = (e: any) => {
+  const errorMessage =
+    e.body?.error && e.body?.message ? `${e.body.error}: ${e.body.message}` : e.message;
+  return i18n.translate('console.ImportFlyout.importFileErrorMessage', {
+    defaultMessage: 'The file could not be processed due to error: "{error}"',
+    values: {
+      error: errorMessage,
+    },
+  });
+};
+
+export const ImportFlyout = ({ close, refresh }: ImportFlyoutProps) => {
+  const [error, setError] = useState<string>();
+  const [status, setStatus] = useState('idle');
+  const [loadingMessage, setLoadingMessage] = useState<string>();
+  const [file, setFile] = useState<File>();
+  const [jsonData, setJsonData] = useState<TextObject>();
+  const [showOverwriteModal, setShowOverwriteModal] = useState(false);
+  const [importMode, setImportMode] = useState<ImportMode>({
+    overwrite: OVERWRITE_ALL_DEFAULT,
+  });
+
+  const {
+    services: {
+      objectStorageClient,
+      uiSettings,
+      notifications: { toasts },
+    },
+  } = useServicesContext();
+
+  const dateFormat = uiSettings.get<string>('dateFormat');
+
+  const setImportFile = (files: FileList | null) => {
+    const isFirstFileMissing = !files?.[0];
+    if (isFirstFileMissing) {
+      setFile(undefined);
+      return;
+    }
+    const fileContent = files[0];
+    const reader = new FileReader();
+
+    reader.onload = (event) => {
+      const fileData = event.target?.result;
+      if (typeof fileData === 'string') {
+        const parsedData = JSON.parse(fileData);
+        setJsonData(parsedData);
+      }
+    };
+
+    reader.readAsText(fileContent);
+    setFile(fileContent);
+    setStatus('idle');
+  };
+
+  const renderError = () => {
+    if (status !== 'error') {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="console.importFlyout.errorCalloutTitle"
+              defaultMessage="Sorry, there was an error"
+            />
+          }
+          color="danger"
+        >
+          <p data-test-subj="importSenseObjectsErrorText">{error}</p>
+        </EuiCallOut>
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
+  };
+
+  const renderBody = () => {
+    if (status === 'loading') {
+      return (
+        <EuiFlexGroup justifyContent="spaceAround">
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner size="xl" />
+            <EuiSpacer size="m" />
+            <EuiText>
+              <p>{loadingMessage}</p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      );
+    }
+
+    return (
+      <EuiForm>
+        <EuiFormRow
+          fullWidth
+          label={
+            <FormattedMessage
+              id="console.ImportFlyout.selectFileToImportFormRowLabel"
+              defaultMessage="Select a file to import"
+            />
+          }
+        >
+          <EuiFilePicker
+            accept=".ndjson, .json"
+            name="queryFileImport"
+            fullWidth
+            initialPromptText={
+              <FormattedMessage
+                id="console.ImportFlyout.importPromptText"
+                defaultMessage="Import"
+              />
+            }
+            onChange={setImportFile}
+            data-test-subj="queryFilePicker"
+          />
+        </EuiFormRow>
+        <EuiFormRow fullWidth>
+          <ImportModeControl
+            initialValues={importMode}
+            updateSelection={(newValues: ImportMode) => setImportMode(newValues)}
+          />
+        </EuiFormRow>
+      </EuiForm>
+    );
+  };
+
+  const importFile = async (isOverwriteConfirmed?: boolean) => {
+    setStatus('loading');
+    setError(undefined);
+    try {
+      const results = await objectStorageClient.text.findAll();
+      const currentText = results.sort((a, b) => a.createdAt - b.createdAt)[0];
+
+      if (jsonData?.text) {
+        if (importMode.overwrite) {
+          if (!isOverwriteConfirmed) {
+            setShowOverwriteModal(true);
+            return;
+          } else {
+            setLoadingMessage('Importing queries and overwriting existing ones...');
+            const newObject = {
+              createdAt: Date.now(),
+              updatedAt: Date.now(),
+              text: jsonData.text,
+            };
+            if (results.length) {
+              await objectStorageClient.text.update({
+                ...currentText,
+                ...newObject,
+              });
+            } else {
+              await objectStorageClient.text.create({
+                ...newObject,
+              });
+            }
+          }
+          toasts.addSuccess('Queries overwritten.');
+        } else {
+          setLoadingMessage('Importing queries and merging with existing ones...');
+          if (results.length) {
+            await objectStorageClient.text.update({
+              ...currentText,
+              createdAt: Date.now(),
+              updatedAt: Date.now(),
+              text: currentText.text.concat(
+                `\n\n#Imported on ${moment(Date.now()).format(dateFormat)}\n\n${jsonData.text}`
+              ),
+            });
+            toasts.addSuccess('Queries merged.');
+          }
+        }
+        refresh();
+        setLoadingMessage(undefined);
+        setStatus('idle');
+        close();
+      } else {
+        setStatus('error');
+        setError(
+          i18n.translate('console.ImportFlyout.importFileErrorMessage', {
+            defaultMessage: 'The selected file is not valid. Please select a valid JSON file.',
+          })
+        );
+        return;
+      }
+    } catch (e) {
+      setStatus('error');
+      setError(getErrorMessage(e));
+    }
+  };
+
+  const onConfirm = () => {
+    setShowOverwriteModal(false);
+    importFile(true);
+  };
+
+  const onSkip = () => {
+    setShowOverwriteModal(false);
+    setStatus('idle');
+  };
+
+  const renderFooter = () => {
+    return (
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            onClick={close}
+            size="s"
+            disabled={status === 'loading' || status === 'success'}
+            data-test-subj="importQueriesCancelBtn"
+          >
+            <FormattedMessage
+              id="console.importFlyout.import.cancelButtonLabel"
+              defaultMessage="Cancel"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            disabled={!file}
+            onClick={() => importFile(false)}
+            size="s"
+            fill
+            isLoading={status === 'loading'}
+            data-test-subj="importQueriesConfirmBtn"
+          >
+            <FormattedMessage
+              id="console.importFlyout.import.confirmButtonLabel"
+              defaultMessage="Import"
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  return (
+    <EuiFlyout onClose={close} size="s">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>
+            <FormattedMessage
+              id="console.ImportFlyout.importQueriesTitle"
+              defaultMessage="Import queries"
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        {renderError()}
+        {renderBody()}
+      </EuiFlyoutBody>
+
+      <EuiFlyoutFooter>{renderFooter()}</EuiFlyoutFooter>
+      {showOverwriteModal && <OverwriteModal onSkip={onSkip} onConfirm={onConfirm} />}
+    </EuiFlyout>
+  );
+};
diff --git a/src/plugins/console/public/application/components/import_mode_control.test.tsx b/src/plugins/console/public/application/components/import_mode_control.test.tsx
new file mode 100644
index 000000000000..219cc2f1c5fc
--- /dev/null
+++ b/src/plugins/console/public/application/components/import_mode_control.test.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { ReactElement } from 'react';
+import { act } from '@testing-library/react-hooks';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { nextTick, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { ImportModeControl } from './import_mode_control';
+import { EuiFormLegendProps, EuiRadioGroupProps } from '@elastic/eui';
+
+const radioGroupIdentifier = 'EuiRadioGroup';
+
+describe('ImportModeControl Component', () => {
+  let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  const mockUpdateSelection = jest.fn();
+
+  beforeEach(async () => {
+    jest.clearAllMocks();
+    act(() => {
+      component = shallowWithIntl(
+        <ImportModeControl
+          initialValues={{ overwrite: false }}
+          updateSelection={mockUpdateSelection}
+        />
+      );
+    });
+    await nextTick();
+    component.update();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correclty', () => {
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render the correct title in the fieldset legend', () => {
+    const legendText = 'Import options';
+    const legend: EuiFormLegendProps = component.find('EuiFormFieldset').prop('legend');
+    const legendTitle = shallow(legend?.children as ReactElement);
+
+    expect(legendTitle.text()).toBe(legendText);
+  });
+
+  it('should display the correct labels for radio options', () => {
+    const componentProps = (component
+      .find(radioGroupIdentifier)
+      .props() as unknown) as EuiRadioGroupProps;
+
+    // Check if the labels for radio options are displayed correctly
+    const radioOptions = componentProps.options;
+    expect(radioOptions[0].label).toBe('Merge with existing queries');
+    expect(radioOptions[1].label).toBe('Overwrite existing queries');
+
+    // Check the initial selection (overwrite is false, so Merge with existing queries should be selected)
+    const selectedOptionId = component.find(radioGroupIdentifier).prop('idSelected');
+    expect(selectedOptionId).toBe('overwriteDisabled');
+  });
+
+  it('should call updateSelection when the selection is changed', async () => {
+    act(() => {
+      // @ts-ignore
+      component.find(radioGroupIdentifier).first().props().onChange('overwriteEnabled');
+    });
+    component.update();
+
+    // Expect that the updateSelection function has been called with the correct parameters
+    expect(mockUpdateSelection).toHaveBeenCalledWith({ overwrite: true });
+  });
+});
diff --git a/src/plugins/console/public/application/components/import_mode_control.tsx b/src/plugins/console/public/application/components/import_mode_control.tsx
new file mode 100644
index 000000000000..0b543a9c593c
--- /dev/null
+++ b/src/plugins/console/public/application/components/import_mode_control.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { EuiFormFieldset, EuiTitle, EuiRadioGroup } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export interface ImportModeControlProps {
+  initialValues: ImportMode;
+  updateSelection: (result: ImportMode) => void;
+}
+
+export interface ImportMode {
+  overwrite: boolean;
+}
+
+const overwriteEnabled = {
+  id: 'overwriteEnabled',
+  label: i18n.translate('console.importModeControl.overwrite.enabledLabel', {
+    defaultMessage: 'Overwrite existing queries',
+  }),
+};
+const overwriteDisabled = {
+  id: 'overwriteDisabled',
+  label: i18n.translate('console.importModeControl.overwrite.disabledLabel', {
+    defaultMessage: 'Merge with existing queries',
+  }),
+};
+const importOptionsTitle = i18n.translate('console.importModeControl.importOptionsTitle', {
+  defaultMessage: 'Import options',
+});
+
+export const ImportModeControl = ({ initialValues, updateSelection }: ImportModeControlProps) => {
+  const [overwrite, setOverwrite] = useState(initialValues.overwrite);
+
+  const onChange = (partial: Partial<ImportMode>) => {
+    if (partial.overwrite !== undefined) {
+      setOverwrite(partial.overwrite);
+    }
+    updateSelection({ overwrite, ...partial });
+  };
+
+  const overwriteRadio = (
+    <EuiRadioGroup
+      options={[overwriteDisabled, overwriteEnabled]}
+      idSelected={overwrite ? overwriteEnabled.id : overwriteDisabled.id}
+      onChange={(id: string) => onChange({ overwrite: id === overwriteEnabled.id })}
+    />
+  );
+
+  return (
+    <EuiFormFieldset
+      legend={{
+        children: (
+          <EuiTitle size="xs">
+            <span>{importOptionsTitle}</span>
+          </EuiTitle>
+        ),
+      }}
+    >
+      {overwriteRadio}
+    </EuiFormFieldset>
+  );
+};
diff --git a/src/plugins/console/public/application/components/index.ts b/src/plugins/console/public/application/components/index.ts
index d6cceb7c7ca8..dca2bb72d211 100644
--- a/src/plugins/console/public/application/components/index.ts
+++ b/src/plugins/console/public/application/components/index.ts
@@ -36,3 +36,4 @@ export { WelcomePanel } from './welcome_panel';
 export { AutocompleteOptions, DevToolsSettingsModal } from './settings_modal';
 export { HelpPanel } from './help_panel';
 export { EditorContentSpinner } from './editor_content_spinner';
+export { ImportFlyout } from './import_flyout';
diff --git a/src/plugins/console/public/application/components/overwrite_modal.test.tsx b/src/plugins/console/public/application/components/overwrite_modal.test.tsx
new file mode 100644
index 000000000000..46ce18d6534a
--- /dev/null
+++ b/src/plugins/console/public/application/components/overwrite_modal.test.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { OverwriteModal } from './overwrite_modal';
+import { act } from '@testing-library/react-hooks';
+import { ShallowWrapper } from 'enzyme';
+
+const confirmModalIdentifier = 'EuiConfirmModal';
+
+describe('OverwriteModal Component', () => {
+  let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  const mockOnConfirm = jest.fn();
+  const mockOnSkip = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    act(() => {
+      component = shallowWithIntl(<OverwriteModal onConfirm={mockOnConfirm} onSkip={mockOnSkip} />);
+    });
+
+    component.update();
+  });
+
+  it('should render correclty', () => {
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should call onConfirm when clicking the "Overwrite" button', () => {
+    act(() => {
+      // @ts-ignore
+      component.find(confirmModalIdentifier).first().props().onConfirm();
+    });
+
+    component.update();
+
+    // Expect that the onConfirm function has been called
+    expect(mockOnConfirm).toHaveBeenCalled();
+  });
+
+  it('should call onSkip when clicking the "Skip" button', () => {
+    act(() => {
+      // @ts-ignore
+      component.find(confirmModalIdentifier).first().props().onCancel();
+    });
+
+    component.update();
+
+    // Expect that the onSkip function has been called
+    expect(mockOnSkip).toHaveBeenCalled();
+  });
+
+  it('should display the correct title and body text', () => {
+    // Find the title and body text elements
+    const componentProps = component.find(confirmModalIdentifier).first().props();
+    // Find the <p> element inside the component
+    const paragraphElement = component.find('p');
+
+    // Expect the correct translations for title and body text
+    expect(componentProps.title).toBe('Confirm Overwrite');
+
+    // Check the text content of the <p> element
+    const expectedText =
+      'Are you sure you want to overwrite the existing queries? This action cannot be undone. All existing queries will be deleted and replaced with the imported queries. If you are unsure, please choose the "Merge with existing queries" option instead';
+    expect(paragraphElement.text()).toEqual(expectedText);
+  });
+});
diff --git a/src/plugins/console/public/application/components/overwrite_modal.tsx b/src/plugins/console/public/application/components/overwrite_modal.tsx
new file mode 100644
index 000000000000..5432a0fc86c2
--- /dev/null
+++ b/src/plugins/console/public/application/components/overwrite_modal.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EUI_MODAL_CONFIRM_BUTTON, EuiConfirmModal } from '@elastic/eui';
+
+export interface OverwriteModalProps {
+  onSkip: () => void;
+  onConfirm: () => void;
+}
+export const OverwriteModal = ({ onSkip, onConfirm }: OverwriteModalProps) => {
+  return (
+    <EuiConfirmModal
+      title={i18n.translate('console.overwriteModal.title', {
+        defaultMessage: 'Confirm Overwrite',
+      })}
+      cancelButtonText={i18n.translate('console.overwriteModal.cancelButtonText', {
+        defaultMessage: 'Skip',
+      })}
+      confirmButtonText={i18n.translate('console.overwriteModal.overwriteButtonText', {
+        defaultMessage: 'Overwrite',
+      })}
+      buttonColor="danger"
+      onCancel={onSkip}
+      onConfirm={onConfirm}
+      defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+      maxWidth="500px"
+    >
+      <p>
+        {i18n.translate('console.overwriteModal.body.conflict', {
+          defaultMessage:
+            'Are you sure you want to overwrite the existing queries? This action cannot be undone. All existing queries will be deleted and replaced with the imported queries. If you are unsure, please choose the "{option}" option instead',
+          values: { option: 'Merge with existing queries' },
+        })}
+      </p>
+    </EuiConfirmModal>
+  );
+};
diff --git a/src/plugins/console/public/application/containers/main/get_top_nav.ts b/src/plugins/console/public/application/containers/main/get_top_nav.ts
index e7eba5c580ac..cd21321993bb 100644
--- a/src/plugins/console/public/application/containers/main/get_top_nav.ts
+++ b/src/plugins/console/public/application/containers/main/get_top_nav.ts
@@ -34,9 +34,17 @@ interface Props {
   onClickHistory: () => void;
   onClickSettings: () => void;
   onClickHelp: () => void;
+  onClickExport: () => void;
+  onClickImport: () => void;
 }
 
-export function getTopNavConfig({ onClickHistory, onClickSettings, onClickHelp }: Props) {
+export function getTopNavConfig({
+  onClickHistory,
+  onClickSettings,
+  onClickHelp,
+  onClickExport,
+  onClickImport,
+}: Props) {
   return [
     {
       id: 'history',
@@ -77,5 +85,31 @@ export function getTopNavConfig({ onClickHistory, onClickSettings, onClickHelp }
       },
       testId: 'consoleHelpButton',
     },
+    {
+      id: 'export',
+      label: i18n.translate('console.topNav.exportTabLabel', {
+        defaultMessage: 'Export',
+      }),
+      description: i18n.translate('console.topNav.exportTabDescription', {
+        defaultMessage: 'Export',
+      }),
+      onClick: () => {
+        onClickExport();
+      },
+      testId: 'consoleExportButton',
+    },
+    {
+      id: 'import',
+      label: i18n.translate('console.topNav.importTabLabel', {
+        defaultMessage: 'Import',
+      }),
+      description: i18n.translate('console.topNav.importTabDescription', {
+        defaultMessage: 'Import',
+      }),
+      onClick: () => {
+        onClickImport();
+      },
+      testId: 'consoleImportButton',
+    },
   ];
 }
diff --git a/src/plugins/console/public/application/containers/main/main.tsx b/src/plugins/console/public/application/containers/main/main.tsx
index 1967c14615bb..bbe5bd9856eb 100644
--- a/src/plugins/console/public/application/containers/main/main.tsx
+++ b/src/plugins/console/public/application/containers/main/main.tsx
@@ -28,8 +28,10 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { i18n } from '@osd/i18n';
+// @ts-expect-error
+import { saveAs } from '@elastic/filesaver';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiPageContent } from '@elastic/eui';
 import { ConsoleHistory } from '../console_history';
 import { Editor } from '../editor';
@@ -41,6 +43,7 @@ import {
   HelpPanel,
   SomethingWentWrongCallout,
   NetworkRequestStatusBar,
+  ImportFlyout,
 } from '../../components';
 
 import { useServicesContext, useEditorReadContext, useRequestReadContext } from '../../contexts';
@@ -54,7 +57,7 @@ interface MainProps {
 
 export function Main({ dataSourceId }: MainProps) {
   const {
-    services: { storage },
+    services: { storage, objectStorageClient },
   } = useServicesContext();
 
   const { ready: editorsReady } = useEditorReadContext();
@@ -71,6 +74,14 @@ export function Main({ dataSourceId }: MainProps) {
   const [showingHistory, setShowHistory] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
+  const [showImportFlyout, setShowImportFlyout] = useState(false);
+
+  const onExport = async () => {
+    const results = await objectStorageClient.text.findAll();
+    const senseData = results.sort((a, b) => a.createdAt - b.createdAt)[0];
+    const blob = new Blob([JSON.stringify(senseData || {})], { type: 'application/json' });
+    saveAs(blob, 'sense.json');
+  };
 
   const renderConsoleHistory = () => {
     return editorsReady ? <ConsoleHistory close={() => setShowHistory(false)} /> : null;
@@ -111,6 +122,8 @@ export function Main({ dataSourceId }: MainProps) {
                   onClickHistory: () => setShowHistory(!showingHistory),
                   onClickSettings: () => setShowSettings(true),
                   onClickHelp: () => setShowHelp(!showHelp),
+                  onClickExport: () => onExport(),
+                  onClickImport: () => setShowImportFlyout(!showImportFlyout),
                 })}
               />
             </EuiFlexItem>
@@ -152,6 +165,10 @@ export function Main({ dataSourceId }: MainProps) {
       ) : null}
 
       {showHelp ? <HelpPanel onClose={() => setShowHelp(false)} /> : null}
+
+      {showImportFlyout ? (
+        <ImportFlyout refresh={retry} close={() => setShowImportFlyout(false)} />
+      ) : null}
     </div>
   );
 }
diff --git a/src/plugins/console/public/application/contexts/services_context.mock.ts b/src/plugins/console/public/application/contexts/services_context.mock.ts
index 5e39565aca8a..bf12961989bc 100644
--- a/src/plugins/console/public/application/contexts/services_context.mock.ts
+++ b/src/plugins/console/public/application/contexts/services_context.mock.ts
@@ -28,8 +28,11 @@
  * under the License.
  */
 
-import { notificationServiceMock } from '../../../../../core/public/mocks';
-import { httpServiceMock } from '../../../../../core/public/mocks';
+import {
+  notificationServiceMock,
+  uiSettingsServiceMock,
+  httpServiceMock,
+} from '../../../../../core/public/mocks';
 
 import { HistoryMock } from '../../services/history.mock';
 import { SettingsMock } from '../../services/settings.mock';
@@ -53,7 +56,9 @@ export const serviceContextMock = {
         settings: new SettingsMock(storage),
         history: new HistoryMock(storage),
         notifications: notificationServiceMock.createSetupContract(),
+        uiSettings: uiSettingsServiceMock.createSetupContract(),
         objectStorageClient: {} as any,
+        http,
       },
       docLinkVersion: 'NA',
     };
diff --git a/src/plugins/console/public/application/contexts/services_context.tsx b/src/plugins/console/public/application/contexts/services_context.tsx
index fc9ab157f783..0e8398ea8b83 100644
--- a/src/plugins/console/public/application/contexts/services_context.tsx
+++ b/src/plugins/console/public/application/contexts/services_context.tsx
@@ -29,7 +29,7 @@
  */
 
 import React, { createContext, useContext, useEffect } from 'react';
-import { HttpSetup, NotificationsSetup } from 'opensearch-dashboards/public';
+import { HttpSetup, IUiSettingsClient, NotificationsSetup } from 'opensearch-dashboards/public';
 import { History, Settings, Storage } from '../../services';
 import { ObjectStorageClient } from '../../../common/types';
 import { MetricsTracker } from '../../types';
@@ -44,6 +44,7 @@ interface ContextServices {
   trackUiMetric: MetricsTracker;
   opensearchHostService: OpenSearchHostService;
   http: HttpSetup;
+  uiSettings: IUiSettingsClient;
 }
 
 export interface ContextValue {
diff --git a/src/plugins/console/public/application/hooks/use_data_init/use_data_init.ts b/src/plugins/console/public/application/hooks/use_data_init/use_data_init.ts
index b9be1c56d912..9c6ee873806e 100644
--- a/src/plugins/console/public/application/hooks/use_data_init/use_data_init.ts
+++ b/src/plugins/console/public/application/hooks/use_data_init/use_data_init.ts
@@ -32,6 +32,13 @@ import { useCallback, useEffect, useState } from 'react';
 import { migrateToTextObjects } from './data_migration';
 import { useEditorActionContext, useServicesContext } from '../../contexts';
 
+const DEFAULT_INPUT_VALUE = `GET _search
+{
+  "query": {
+    "match_all": {}
+  }
+}`;
+
 export const useDataInit = () => {
   const [error, setError] = useState<Error | null>(null);
   const [done, setDone] = useState<boolean>(false);
@@ -58,7 +65,7 @@ export const useDataInit = () => {
           const newObject = await objectStorageClient.text.create({
             createdAt: Date.now(),
             updatedAt: Date.now(),
-            text: '',
+            text: DEFAULT_INPUT_VALUE,
           });
           dispatch({ type: 'setCurrentTextObject', payload: newObject });
         } else {
diff --git a/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.test.ts b/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.test.ts
index eaa171132785..fbeadf4cc7de 100644
--- a/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.test.ts
+++ b/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.test.ts
@@ -86,6 +86,27 @@ describe('test sendRequestToOpenSearch', () => {
     });
   });
 
+  it('test request success, json with long numerals', () => {
+    const longPositive = BigInt(Number.MAX_SAFE_INTEGER) * 2n;
+    const longNegative = BigInt(Number.MIN_SAFE_INTEGER) * 2n;
+    const mockHttpResponse = createMockHttpResponse(
+      200,
+      'ok',
+      [['Content-Type', 'application/json, utf-8']],
+      {
+        'long-max': longPositive,
+        'long-min': longNegative,
+      }
+    );
+
+    jest.spyOn(opensearch, 'send').mockResolvedValue(mockHttpResponse);
+    sendRequestToOpenSearch(dummyArgs).then((result) => {
+      const value = (result as any)[0].response.value;
+      expect(value).toMatch(new RegExp(`"long-max": ${longPositive}[,\n]`));
+      expect(value).toMatch(new RegExp(`"long-min": ${longNegative}[,\n]`));
+    });
+  });
+
   it('test request success, text', () => {
     const mockHttpResponse = createMockHttpResponse(
       200,
diff --git a/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.ts b/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.ts
index 4e1ae7267542..1cb992a7a99c 100644
--- a/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.ts
+++ b/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/send_request_to_opensearch.ts
@@ -28,6 +28,7 @@
  * under the License.
  */
 
+import { stringify } from '@osd/std';
 import { HttpFetchError, HttpSetup } from 'opensearch-dashboards/public';
 import { extractDeprecationMessages } from '../../../lib/utils';
 import { XJson } from '../../../../../opensearch_ui_shared/public';
@@ -116,7 +117,7 @@ export function sendRequestToOpenSearch(
           const contentType = httpResponse.response.headers.get('Content-Type') as BaseResponseType;
           let value = '';
           if (contentType.includes('application/json')) {
-            value = JSON.stringify(httpResponse.body, null, 2);
+            value = stringify(httpResponse.body, null, 2);
           } else {
             value = httpResponse.body;
           }
@@ -155,7 +156,7 @@ export function sendRequestToOpenSearch(
           if (httpError.body) {
             contentType = httpResponse.headers.get('Content-Type') as string;
             if (contentType?.includes('application/json')) {
-              value = JSON.stringify(httpError.body, null, 2);
+              value = stringify(httpError.body, null, 2);
             } else {
               value = httpError.body;
             }
diff --git a/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/use_send_current_request_to_opensearch.test.tsx b/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/use_send_current_request_to_opensearch.test.tsx
index cc7be7e444f0..8955972d27a0 100644
--- a/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/use_send_current_request_to_opensearch.test.tsx
+++ b/src/plugins/console/public/application/hooks/use_send_current_request_to_opensearch/use_send_current_request_to_opensearch.test.tsx
@@ -74,7 +74,10 @@ describe('useSendCurrentRequestToOpenSearch', () => {
 
     const { result } = renderHook(() => useSendCurrentRequestToOpenSearch(), { wrapper: contexts });
     await act(() => result.current());
-    expect(sendRequestToOpenSearch).toHaveBeenCalledWith({ requests: ['test'] });
+    expect(sendRequestToOpenSearch).toHaveBeenCalledWith({
+      requests: ['test'],
+      http: mockContextValue.services.http,
+    });
 
     // Second call should be the request success
     const [, [requestSucceededCall]] = (dispatch as jest.Mock).mock.calls;
diff --git a/src/plugins/console/public/application/index.tsx b/src/plugins/console/public/application/index.tsx
index c1a107ac500a..ac32909735b2 100644
--- a/src/plugins/console/public/application/index.tsx
+++ b/src/plugins/console/public/application/index.tsx
@@ -30,7 +30,7 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { HttpSetup, NotificationsSetup } from 'src/core/public';
+import { HttpSetup, IUiSettingsClient, NotificationsSetup } from 'src/core/public';
 import { ServicesContextProvider, EditorContextProvider, RequestContextProvider } from './contexts';
 import { Main } from './containers';
 import { createStorage, createHistory, createSettings } from '../services';
@@ -47,6 +47,7 @@ export interface BootDependencies {
   usageCollection?: UsageCollectionSetup;
   element: HTMLElement;
   dataSourceId?: string;
+  uiSettings: IUiSettingsClient;
 }
 
 export function renderApp({
@@ -57,6 +58,7 @@ export function renderApp({
   element,
   http,
   dataSourceId,
+  uiSettings,
 }: BootDependencies) {
   const trackUiMetric = createUsageTracker(usageCollection);
   trackUiMetric.load('opened_app');
@@ -85,6 +87,7 @@ export function renderApp({
             trackUiMetric,
             objectStorageClient,
             http,
+            uiSettings,
           },
         }}
       >
diff --git a/src/plugins/console/public/lib/opensearch/opensearch.ts b/src/plugins/console/public/lib/opensearch/opensearch.ts
index b0158945eb25..d1ba8797e474 100644
--- a/src/plugins/console/public/lib/opensearch/opensearch.ts
+++ b/src/plugins/console/public/lib/opensearch/opensearch.ts
@@ -57,6 +57,7 @@ export async function send(
     body: data,
     prependBasePath: true,
     asResponse: true,
+    withLongNumerals: true,
   });
 }
 
diff --git a/src/plugins/console/public/lib/utils/__tests__/__snapshots__/utils.test.ts.snap b/src/plugins/console/public/lib/utils/__tests__/__snapshots__/utils.test.ts.snap
new file mode 100644
index 000000000000..48739d834c9a
--- /dev/null
+++ b/src/plugins/console/public/lib/utils/__tests__/__snapshots__/utils.test.ts.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Utils class formatRequestBodyDoc changed with indenting 1`] = `
+Object {
+  "changed": true,
+  "data": Array [
+    "{
+  \\"data\\": {
+    \\"long-max\\": 18014398509481982,
+    \\"long-min\\": -18014398509481982,
+    \\"num\\": 2
+  }
+}",
+    "{
+  \\"'\\\\\\"key\\\\\\"'\\": \\"\\"\\"'oddly' 'quoted \\"value\\"'\\"\\"\\",
+  \\"obj\\": \\"\\"\\"{\\"nested\\": \\"inner-value\\", \\"inner-max\\": 18014398509481982\\"\\"\\"
+}",
+    "{
+  \\"version\\": true,
+  \\"size\\": 500,
+  \\"sort\\": [
+    {
+      \\"time\\": {
+        \\"order\\": \\"desc\\",
+        \\"unmapped_type\\": \\"boolean\\"
+      }
+    }
+  ],
+  \\"aggs\\": {
+    \\"2\\": {
+      \\"date_histogram\\": {
+        \\"field\\": \\"time\\",
+        \\"fixed_interval\\": \\"30s\\",
+        \\"time_zone\\": \\"America/Los_Angeles\\",
+        \\"min_doc_count\\": 1
+      }
+    }
+  },
+  \\"_source\\": {
+    \\"excludes\\": []
+  },
+  \\"query\\": {
+    \\"bool\\": {
+      \\"filter\\": [
+        {
+          \\"match_all\\": {}
+        },
+        {
+          \\"range\\": {
+            \\"time\\": {
+              \\"gte\\": \\"2222-22-22T22:22:22.222Z\\",
+              \\"lte\\": \\"3333-33-33T33:33:33.333Z\\",
+              \\"format\\": \\"strict_date_optional_time\\"
+            }
+          }
+        }
+      ]
+    }
+  }
+}",
+    "{
+  \\"version\\": true,
+  \\"size\\": 500,
+  \\"sort\\": [
+    {
+      \\"time\\": {
+        \\"order\\": \\"desc\\",
+        \\"unmapped_type\\": \\"boolean\\"
+      }
+    }
+  ],
+  \\"aggs\\": {
+    \\"2\\": {
+      \\"date_histogram\\": {
+        \\"field\\": \\"time\\",
+        \\"fixed_interval\\": \\"30s\\",
+        \\"time_zone\\": \\"America/Los_Angeles\\",
+        \\"min_doc_count\\": 1
+      }
+    }
+  },
+  \\"_source\\": {
+    \\"excludes\\": []
+  },
+  \\"query\\": {
+    \\"bool\\": {
+      \\"filter\\": [
+        {
+          \\"match_all\\": {}
+        },
+        {
+          \\"range\\": {
+            \\"time\\": {
+              \\"gte\\": \\"2222-22-22T22:22:22.222Z\\",
+              \\"lte\\": \\"3333-33-33T33:33:33.333Z\\",
+              \\"format\\": \\"strict_date_optional_time\\"
+            }
+          }
+        }
+      ]
+    }
+  }
+}",
+  ],
+}
+`;
+
+exports[`Utils class formatRequestBodyDoc changed with no-indenting 1`] = `
+Object {
+  "changed": true,
+  "data": Array [
+    "{\\"data\\":{\\"long-max\\":18014398509481982,\\"long-min\\":-18014398509481982,\\"num\\":2}}",
+    "{\\"'\\\\\\"key\\\\\\"'\\":\\"'oddly' 'quoted \\\\\\"value\\\\\\"'\\",\\"obj\\":\\"{\\\\\\"nested\\\\\\": \\\\\\"inner-value\\\\\\", \\\\\\"inner-max\\\\\\": 18014398509481982\\"}",
+    "{\\"version\\":true,\\"size\\":500,\\"sort\\":[{\\"time\\":{\\"order\\":\\"desc\\",\\"unmapped_type\\":\\"boolean\\"}}],\\"aggs\\":{\\"2\\":{\\"date_histogram\\":{\\"field\\":\\"time\\",\\"fixed_interval\\":\\"30s\\",\\"time_zone\\":\\"America/Los_Angeles\\",\\"min_doc_count\\":1}}},\\"_source\\":{\\"excludes\\":[]},\\"query\\":{\\"bool\\":{\\"filter\\":[{\\"match_all\\":{}},{\\"range\\":{\\"time\\":{\\"gte\\":\\"2222-22-22T22:22:22.222Z\\",\\"lte\\":\\"3333-33-33T33:33:33.333Z\\",\\"format\\":\\"strict_date_optional_time\\"}}}]}}}",
+    "{\\"version\\":true,\\"size\\":500,\\"sort\\":[{\\"time\\":{\\"order\\":\\"desc\\",\\"unmapped_type\\":\\"boolean\\"}}],\\"aggs\\":{\\"2\\":{\\"date_histogram\\":{\\"field\\":\\"time\\",\\"fixed_interval\\":\\"30s\\",\\"time_zone\\":\\"America/Los_Angeles\\",\\"min_doc_count\\":1}}},\\"_source\\":{\\"excludes\\":[]},\\"query\\":{\\"bool\\":{\\"filter\\":[{\\"match_all\\":{}},{\\"range\\":{\\"time\\":{\\"gte\\":\\"2222-22-22T22:22:22.222Z\\",\\"lte\\":\\"3333-33-33T33:33:33.333Z\\",\\"format\\":\\"strict_date_optional_time\\"}}}]}}}",
+  ],
+}
+`;
diff --git a/src/plugins/console/public/lib/utils/__tests__/utils.test.ts b/src/plugins/console/public/lib/utils/__tests__/utils.test.ts
index 7f5f0c0de53f..6004d963e27c 100644
--- a/src/plugins/console/public/lib/utils/__tests__/utils.test.ts
+++ b/src/plugins/console/public/lib/utils/__tests__/utils.test.ts
@@ -29,6 +29,7 @@
  */
 
 import * as utils from '../';
+import { stringify } from '@osd/std';
 
 describe('Utils class', () => {
   test('extract deprecation messages', function () {
@@ -104,4 +105,71 @@ describe('Utils class', () => {
       'e", f"',
     ]);
   });
+
+  describe('formatRequestBodyDoc', () => {
+    const longPositive = BigInt(Number.MAX_SAFE_INTEGER) * 2n;
+    const longNegative = BigInt(Number.MIN_SAFE_INTEGER) * 2n;
+    const sample = {
+      version: true,
+      size: 500,
+      sort: [{ time: { order: 'desc', unmapped_type: 'boolean' } }],
+      aggs: {
+        '2': {
+          date_histogram: {
+            field: 'time',
+            fixed_interval: '30s',
+            time_zone: 'America/Los_Angeles',
+            min_doc_count: 1,
+          },
+        },
+      },
+      _source: { excludes: [] },
+      query: {
+        bool: {
+          filter: [
+            {
+              match_all: {},
+            },
+            {
+              range: {
+                time: {
+                  gte: '2222-22-22T22:22:22.222Z',
+                  lte: '3333-33-33T33:33:33.333Z',
+                  format: 'strict_date_optional_time',
+                },
+              },
+            },
+          ],
+        },
+      },
+    };
+    const objStringSample = {
+      [`'"key"'`]: `'oddly' 'quoted "value"'`,
+      obj: `{"nested": "inner-value", "inner-max": ${longPositive}`,
+    };
+    const data = [
+      stringify({ data: { 'long-max': longPositive, 'long-min': longNegative, num: 2 } }),
+      JSON.stringify(objStringSample),
+      JSON.stringify(sample),
+      JSON.stringify(sample, null, 3),
+    ];
+
+    test('changed with indenting', () => {
+      expect(utils.formatRequestBodyDoc(data, true)).toMatchSnapshot();
+    });
+
+    test('changed with no-indenting', () => {
+      expect(utils.formatRequestBodyDoc(data, false)).toMatchSnapshot();
+    });
+
+    test('unchanged with indenting', () => {
+      const result = utils.formatRequestBodyDoc([JSON.stringify(sample, null, 2)], true);
+      expect(result.changed).toStrictEqual(false);
+    });
+
+    test('unchanged with no-indenting', () => {
+      const result = utils.formatRequestBodyDoc([JSON.stringify(sample)], false);
+      expect(result.changed).toStrictEqual(false);
+    });
+  });
 });
diff --git a/src/plugins/console/public/lib/utils/index.ts b/src/plugins/console/public/lib/utils/index.ts
index 93a0688ae725..7ea4cd9b893f 100644
--- a/src/plugins/console/public/lib/utils/index.ts
+++ b/src/plugins/console/public/lib/utils/index.ts
@@ -28,6 +28,7 @@
  * under the License.
  */
 
+import { parse, stringify } from '@osd/std';
 import _ from 'lodash';
 import { XJson } from '../../../../opensearch_ui_shared/public';
 
@@ -42,7 +43,7 @@ export function textFromRequest(request: any) {
 }
 
 export function jsonToString(data: any, indent: boolean) {
-  return JSON.stringify(data, null, indent ? 2 : 0);
+  return stringify(data, null, indent ? 2 : 0);
 }
 
 export function formatRequestBodyDoc(data: string[], indent: boolean) {
@@ -51,7 +52,7 @@ export function formatRequestBodyDoc(data: string[], indent: boolean) {
   for (let i = 0; i < data.length; i++) {
     const curDoc = data[i];
     try {
-      let newDoc = jsonToString(JSON.parse(collapseLiteralStrings(curDoc)), indent);
+      let newDoc = jsonToString(parse(collapseLiteralStrings(curDoc)), indent);
       if (indent) {
         newDoc = expandLiteralStrings(newDoc);
       }
diff --git a/src/plugins/console/public/plugin.ts b/src/plugins/console/public/plugin.ts
index 5e1478875ec6..300d57d4b75d 100644
--- a/src/plugins/console/public/plugin.ts
+++ b/src/plugins/console/public/plugin.ts
@@ -68,6 +68,7 @@ export class ConsoleUIPlugin implements Plugin<void, void, AppSetupUIPluginDepen
         const {
           i18n: { Context: I18nContext },
           docLinks: { DOC_LINK_VERSION },
+          uiSettings,
         } = core;
 
         const { renderApp } = await import('./application');
@@ -80,6 +81,7 @@ export class ConsoleUIPlugin implements Plugin<void, void, AppSetupUIPluginDepen
           usageCollection,
           element,
           dataSourceId,
+          uiSettings,
         });
       },
     });
diff --git a/src/plugins/console/public/services/storage.ts b/src/plugins/console/public/services/storage.ts
index f143b0cefcfe..870904a4b3d8 100644
--- a/src/plugins/console/public/services/storage.ts
+++ b/src/plugins/console/public/services/storage.ts
@@ -29,6 +29,7 @@
  */
 
 import { transform, keys, startsWith } from 'lodash';
+import { parse, stringify } from '@osd/std';
 
 type IStorageEngine = typeof window.localStorage;
 
@@ -40,12 +41,12 @@ export class Storage {
   constructor(private readonly engine: IStorageEngine, private readonly prefix: string) {}
 
   encode(val: any) {
-    return JSON.stringify(val);
+    return stringify(val);
   }
 
   decode(val: any) {
     if (typeof val === 'string') {
-      return JSON.parse(val);
+      return parse(val);
     }
   }
 
diff --git a/src/plugins/console/server/routes/api/console/proxy/create_handler.ts b/src/plugins/console/server/routes/api/console/proxy/create_handler.ts
index 0a401ded813b..f2155011cd74 100644
--- a/src/plugins/console/server/routes/api/console/proxy/create_handler.ts
+++ b/src/plugins/console/server/routes/api/console/proxy/create_handler.ts
@@ -31,8 +31,8 @@
 import { OpenSearchDashboardsRequest, RequestHandler } from 'opensearch-dashboards/server';
 import { trimStart } from 'lodash';
 import { Readable } from 'stream';
-
-import { ApiResponse } from '@opensearch-project/opensearch/';
+import { stringify } from '@osd/std';
+import { ApiResponse } from '@opensearch-project/opensearch';
 
 // eslint-disable-next-line @osd/eslint/no-restricted-paths
 import { ensureRawRequest } from '../../../../../../../core/server/http/router';
@@ -90,7 +90,7 @@ export const createHandler = ({
   const { path, method, dataSourceId } = query;
   const client = dataSourceId
     ? await ctx.dataSource.opensearch.getClient(dataSourceId)
-    : ctx.core.opensearch.client.asCurrentUser;
+    : ctx.core.opensearch.client.asCurrentUserWithLongNumeralsSupport;
   let opensearchResponse: ApiResponse;
 
   if (!pathFilters.some((re) => re.test(path))) {
@@ -116,14 +116,24 @@ export const createHandler = ({
       { headers: requestHeaders }
     );
 
-    const { statusCode, body: responseContent, warnings } = opensearchResponse;
+    const {
+      statusCode,
+      body: responseContent,
+      warnings,
+      headers: responseHeaders,
+    } = opensearchResponse;
 
     if (method.toUpperCase() !== 'HEAD') {
+      /* If a response is a parse JSON object, we need to use a custom `stringify` to handle BigInt
+       * values.
+       */
+      const isJSONResponse = responseHeaders?.['content-type']?.includes?.('application/json');
       return response.custom({
         statusCode: statusCode!,
-        body: responseContent,
+        body: isJSONResponse ? stringify(responseContent) : responseContent,
         headers: {
           warning: warnings || '',
+          ...(isJSONResponse ? { 'Content-Type': 'application/json; charset=utf-8' } : {}),
         },
       });
     }
@@ -139,7 +149,7 @@ export const createHandler = ({
   } catch (e: any) {
     const isResponseErrorFlag = isResponseError(e);
     if (!isResponseError) log.error(e);
-    const errorMessage = isResponseErrorFlag ? JSON.stringify(e.meta.body) : e.message;
+    const errorMessage = isResponseErrorFlag ? stringify(e.meta.body) : e.message;
     // core http route handler has special logic that asks for stream readable input to pass error opaquely
     const errorResponseBody = new Readable({
       read() {
diff --git a/src/plugins/console/server/routes/api/console/proxy/tests/body.test.ts b/src/plugins/console/server/routes/api/console/proxy/tests/body.test.ts
index 95b243dd4734..59008fc81684 100644
--- a/src/plugins/console/server/routes/api/console/proxy/tests/body.test.ts
+++ b/src/plugins/console/server/routes/api/console/proxy/tests/body.test.ts
@@ -50,7 +50,9 @@ describe('Console Proxy Route', () => {
       const requestHandlerContextMock = coreMock.createRequestHandlerContext();
       opensearchClient = requestHandlerContextMock.opensearch.client;
 
-      opensearchClient.asCurrentUser.transport.request.mockResolvedValueOnce(mockResponse);
+      opensearchClient.asCurrentUserWithLongNumeralsSupport.transport.request.mockResolvedValueOnce(
+        mockResponse
+      );
       const handler = createHandler(getProxyRouteHandlerDeps({}));
 
       return handler(
diff --git a/src/plugins/console/server/routes/api/console/proxy/tests/headers.test.ts b/src/plugins/console/server/routes/api/console/proxy/tests/headers.test.ts
index a1964d160e2c..7a6b3f70f490 100644
--- a/src/plugins/console/server/routes/api/console/proxy/tests/headers.test.ts
+++ b/src/plugins/console/server/routes/api/console/proxy/tests/headers.test.ts
@@ -85,7 +85,9 @@ describe('Console Proxy Route', () => {
         opensearchDashboardsResponseFactory
       );
 
-      const [[, opts]] = opensearchClient.asCurrentUser.transport.request.mock.calls;
+      const [
+        [, opts],
+      ] = opensearchClient.asCurrentUserWithLongNumeralsSupport.transport.request.mock.calls;
       const headers = opts?.headers;
       expect(headers).to.have.property('x-forwarded-for');
       expect(headers!['x-forwarded-for']).to.be('0.0.0.0');
diff --git a/src/plugins/console/server/routes/api/console/proxy/tests/params.test.ts b/src/plugins/console/server/routes/api/console/proxy/tests/params.test.ts
index 80523c8031df..2e191425752a 100644
--- a/src/plugins/console/server/routes/api/console/proxy/tests/params.test.ts
+++ b/src/plugins/console/server/routes/api/console/proxy/tests/params.test.ts
@@ -75,7 +75,9 @@ describe('Console Proxy Route', () => {
           );
 
           const mockResponse = opensearchServiceMock.createSuccessTransportRequestPromise('foo');
-          opensearchClient.asCurrentUser.transport.request.mockResolvedValueOnce(mockResponse);
+          opensearchClient.asCurrentUserWithLongNumeralsSupport.transport.request.mockResolvedValueOnce(
+            mockResponse
+          );
 
           const { status } = await handler(
             { core: requestHandlerContextMock, dataSource: {} as any },
@@ -93,7 +95,9 @@ describe('Console Proxy Route', () => {
           );
 
           const mockResponse = opensearchServiceMock.createSuccessTransportRequestPromise('foo');
-          opensearchClient.asCurrentUser.transport.request.mockResolvedValueOnce(mockResponse);
+          opensearchClient.asCurrentUserWithLongNumeralsSupport.transport.request.mockResolvedValueOnce(
+            mockResponse
+          );
 
           const { status } = await handler(
             { core: requestHandlerContextMock, dataSource: {} as any },
diff --git a/src/plugins/console/server/routes/api/console/proxy/tests/query_string.test.ts b/src/plugins/console/server/routes/api/console/proxy/tests/query_string.test.ts
index 9aefea1182cc..edb3ec6e6418 100644
--- a/src/plugins/console/server/routes/api/console/proxy/tests/query_string.test.ts
+++ b/src/plugins/console/server/routes/api/console/proxy/tests/query_string.test.ts
@@ -63,7 +63,9 @@ describe('Console Proxy Route', () => {
       describe('contains full url', () => {
         it('treats the url as a path', async () => {
           await request('GET', 'http://evil.com/test');
-          const [[args]] = opensearchClient.asCurrentUser.transport.request.mock.calls;
+          const [
+            [args],
+          ] = opensearchClient.asCurrentUserWithLongNumeralsSupport.transport.request.mock.calls;
 
           expect(args.path).toBe('/http://evil.com/test?pretty=true');
         });
@@ -71,14 +73,18 @@ describe('Console Proxy Route', () => {
       describe('starts with a slash', () => {
         it('keeps as it is', async () => {
           await request('GET', '/index/id');
-          const [[args]] = opensearchClient.asCurrentUser.transport.request.mock.calls;
+          const [
+            [args],
+          ] = opensearchClient.asCurrentUserWithLongNumeralsSupport.transport.request.mock.calls;
           expect(args.path).toBe('/index/id?pretty=true');
         });
       });
       describe(`doesn't start with a slash`, () => {
         it('adds slash to path before sending request', async () => {
           await request('GET', 'index/id');
-          const [[args]] = opensearchClient.asCurrentUser.transport.request.mock.calls;
+          const [
+            [args],
+          ] = opensearchClient.asCurrentUserWithLongNumeralsSupport.transport.request.mock.calls;
           expect(args.path).toBe('/index/id?pretty=true');
         });
       });
@@ -86,7 +92,9 @@ describe('Console Proxy Route', () => {
       describe(`contains query parameter`, () => {
         it('adds slash to path before sending request', async () => {
           await request('GET', '_cat/tasks?v');
-          const [[args]] = opensearchClient.asCurrentUser.transport.request.mock.calls;
+          const [
+            [args],
+          ] = opensearchClient.asCurrentUserWithLongNumeralsSupport.transport.request.mock.calls;
           expect(args.path).toBe('/_cat/tasks?v=&pretty=true');
         });
       });
diff --git a/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx b/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx
index c13688c73515..fc15cbec4f1d 100644
--- a/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx
@@ -68,6 +68,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
diff --git a/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
index bf2fb17e7df3..abad192ad9e8 100644
--- a/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
@@ -67,6 +67,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
diff --git a/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx
index 5298dca2b97d..0fc095b151d0 100644
--- a/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx
@@ -58,6 +58,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: {} as any,
diff --git a/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx b/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx
index e9bb6c0c3ce2..03be6520b8e5 100644
--- a/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx
@@ -67,6 +67,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
diff --git a/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx
index 42e2f99f8a5e..7845bebc8855 100644
--- a/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx
@@ -61,6 +61,7 @@ beforeEach(async () => {
     application: {} as any,
     embeddable: start,
     inspector: {} as any,
+    chrome: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
     savedObjectMetaData: {} as any,
diff --git a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx
index 8f2511f8c3f5..ec90c4d813d8 100644
--- a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx
@@ -68,6 +68,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
diff --git a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
index d433fdd10b52..1b3c486615c8 100644
--- a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
@@ -141,13 +141,75 @@ exports[`dashboard listing hideWriteControls 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -174,7 +236,6 @@ exports[`dashboard listing hideWriteControls 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
@@ -1172,13 +1233,75 @@ exports[`dashboard listing render table listing with initial filters from URL 1`
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -1205,7 +1328,6 @@ exports[`dashboard listing render table listing with initial filters from URL 1`
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
@@ -2264,13 +2386,75 @@ exports[`dashboard listing renders call to action when no dashboards exist 1`] =
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -2297,7 +2481,6 @@ exports[`dashboard listing renders call to action when no dashboards exist 1`] =
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
@@ -3356,13 +3539,75 @@ exports[`dashboard listing renders table rows 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -3389,7 +3634,6 @@ exports[`dashboard listing renders table rows 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
@@ -4448,13 +4692,75 @@ exports[`dashboard listing renders warning when listingLimit is exceeded 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -4481,7 +4787,6 @@ exports[`dashboard listing renders warning when listingLimit is exceeded 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
diff --git a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
index 14247831d6fa..101e0e520304 100644
--- a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
@@ -129,13 +129,75 @@ exports[`Dashboard top nav render in embed mode 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -162,7 +224,6 @@ exports[`Dashboard top nav render in embed mode 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -985,13 +1046,75 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -1018,7 +1141,6 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -1841,13 +1963,75 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -1874,7 +2058,6 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -2697,13 +2880,75 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -2730,7 +2975,6 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -3553,13 +3797,75 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -3586,7 +3892,6 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -4409,13 +4714,75 @@ exports[`Dashboard top nav render with all components 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -4442,7 +4809,6 @@ exports[`Dashboard top nav render with all components 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
index faed32d60d2d..0ca403e826a4 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
@@ -58,6 +58,7 @@ import { findTestSubject } from 'test_utils/helpers';
 const options: DashboardContainerOptions = {
   application: {} as any,
   embeddable: {} as any,
+  chrome: {} as any,
   notifications: {} as any,
   overlays: {} as any,
   inspector: {} as any,
@@ -179,6 +180,7 @@ test('DashboardContainer in edit mode shows edit mode actions', async () => {
   const containerOptions: DashboardContainerOptions = {
     application: applicationServiceMock.createStartContract(),
     embeddable: start,
+    chrome: {} as any,
     notifications: {} as any,
     overlays: {} as any,
     inspector: {} as any,
diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
index db647c2760a7..dad2f196f1b8 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
@@ -34,7 +34,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nProvider } from '@osd/i18n/react';
 import { RefreshInterval, TimeRange, Query, Filter } from 'src/plugins/data/public';
-import { CoreStart } from 'src/core/public';
+import { CoreStart, Logos } from 'src/core/public';
 import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
 import uuid from 'uuid';
 import {
@@ -98,6 +98,7 @@ export interface DashboardContainerOptions {
   application: CoreStart['application'];
   overlays: CoreStart['overlays'];
   notifications: CoreStart['notifications'];
+  chrome: CoreStart['chrome'];
   embeddable: EmbeddableStart;
   inspector: InspectorStartContract;
   SavedObjectFinder: React.ComponentType<any>;
@@ -119,6 +120,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     | (({ replace, pathname }: { replace: boolean; pathname?: string }) => void);
 
   private embeddablePanel: EmbeddableStart['EmbeddablePanel'];
+  private readonly logos: Logos;
 
   constructor(
     initialInput: DashboardContainerInput,
@@ -135,6 +137,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       parent
     );
     this.embeddablePanel = options.embeddable.getEmbeddablePanel(stateTransfer);
+    this.logos = options.chrome.logos;
   }
 
   protected createNewPanelState<
@@ -237,6 +240,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
         <OpenSearchDashboardsContextProvider services={this.options}>
           <DashboardViewport
             renderEmpty={this.renderEmpty}
+            logos={this.logos}
             container={this}
             PanelComponent={this.embeddablePanel}
           />
diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
index b50f561ddab8..020f76cfa827 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
@@ -47,6 +47,7 @@ interface StartServices {
   capabilities: CoreStart['application']['capabilities'];
   application: CoreStart['application'];
   overlays: CoreStart['overlays'];
+  chrome: CoreStart['chrome'];
   notifications: CoreStart['notifications'];
   embeddable: EmbeddableStart;
   inspector: InspectorStartContract;
diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx
index ce2dfec622a4..f143b18b7c48 100644
--- a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx
@@ -78,6 +78,7 @@ function prepare(props?: Partial<DashboardGridProps>) {
       getEmbeddableFactory,
     } as any,
     notifications: {} as any,
+    chrome: {} as any,
     overlays: {} as any,
     inspector: {
       isAvailable: jest.fn(),
diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
index f03ed95c9a37..7d286f6fbf49 100644
--- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
@@ -73,6 +73,7 @@ function getProps(
       getEmbeddableFactories: start.getEmbeddableFactories,
       getEmbeddableFactory: start.getEmbeddableFactory,
     } as any,
+    chrome: {} as any,
     notifications: {} as any,
     overlays: {} as any,
     inspector: {
@@ -103,6 +104,7 @@ function getProps(
   dashboardContainer = new DashboardContainer(input, options);
   const defaultTestProps: DashboardViewportProps = {
     container: dashboardContainer,
+    logos: options.chrome.logos,
     PanelComponent: () => <div />,
   };
 
diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx
index f89c1179cad5..60a3dba7384b 100644
--- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx
@@ -30,6 +30,7 @@
 
 import React from 'react';
 import { Subscription } from 'rxjs';
+import { Logos } from 'opensearch-dashboards/public';
 import { PanelState, EmbeddableStart } from '../../../../../embeddable/public';
 import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container';
 import { DashboardGrid } from '../grid';
@@ -39,6 +40,7 @@ export interface DashboardViewportProps {
   container: DashboardContainer;
   PanelComponent: EmbeddableStart['EmbeddablePanel'];
   renderEmpty?: () => React.ReactNode;
+  logos: Logos;
 }
 
 interface State {
@@ -124,6 +126,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
           <this.context.services.ExitFullScreenButton
             onExitFullScreenMode={this.onExitFullScreenMode}
             toggleChrome={!isEmbeddedExternally}
+            logos={this.props.logos}
           />
         )}
         {renderEmpty && renderEmpty()}
@@ -153,6 +156,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
           <this.context.services.ExitFullScreenButton
             onExitFullScreenMode={this.onExitFullScreenMode}
             toggleChrome={!isEmbeddedExternally}
+            logos={this.props.logos}
           />
         )}
         <DashboardGrid container={container} PanelComponent={PanelComponent} />
diff --git a/src/plugins/dashboard/public/application/utils/breadcrumbs.ts b/src/plugins/dashboard/public/application/utils/breadcrumbs.ts
index fa9cef188e57..5be797fde558 100644
--- a/src/plugins/dashboard/public/application/utils/breadcrumbs.ts
+++ b/src/plugins/dashboard/public/application/utils/breadcrumbs.ts
@@ -23,7 +23,7 @@ export const setBreadcrumbsForNewDashboard = (viewMode: ViewMode, isDirty: boole
     return [
       ...getLandingBreadcrumbs(),
       {
-        text: i18n.translate('dashboard.strings.dashboardViewTitle', {
+        text: i18n.translate('dashboard.strings.newDashboardViewTitle', {
           defaultMessage: 'New Dashboard',
         }),
       },
@@ -33,7 +33,7 @@ export const setBreadcrumbsForNewDashboard = (viewMode: ViewMode, isDirty: boole
       return [
         ...getLandingBreadcrumbs(),
         {
-          text: i18n.translate('dashboard.strings.dashboardEditTitle', {
+          text: i18n.translate('dashboard.strings.newDashboardEditTitleUnsaved', {
             defaultMessage: 'Editing New Dashboard (unsaved)',
           }),
         },
@@ -42,7 +42,7 @@ export const setBreadcrumbsForNewDashboard = (viewMode: ViewMode, isDirty: boole
       return [
         ...getLandingBreadcrumbs(),
         {
-          text: i18n.translate('dashboard.strings.dashboardEditTitle', {
+          text: i18n.translate('dashboard.strings.newDashboardEditTitle', {
             defaultMessage: 'Editing New Dashboard',
           }),
         },
@@ -60,7 +60,7 @@ export const setBreadcrumbsForExistingDashboard = (
     return [
       ...getLandingBreadcrumbs(),
       {
-        text: i18n.translate('dashboard.strings.dashboardViewTitle', {
+        text: i18n.translate('dashboard.strings.existingDashboardViewTitle', {
           defaultMessage: '{title}',
           values: { title },
         }),
@@ -71,7 +71,7 @@ export const setBreadcrumbsForExistingDashboard = (
       return [
         ...getLandingBreadcrumbs(),
         {
-          text: i18n.translate('dashboard.strings.dashboardEditTitle', {
+          text: i18n.translate('dashboard.strings.existingDashboardEditTitleUnsaved', {
             defaultMessage: 'Editing {title} (unsaved)',
             values: { title },
           }),
@@ -81,7 +81,7 @@ export const setBreadcrumbsForExistingDashboard = (
       return [
         ...getLandingBreadcrumbs(),
         {
-          text: i18n.translate('dashboard.strings.dashboardEditTitle', {
+          text: i18n.translate('dashboard.strings.existingDashboardEditTitle', {
             defaultMessage: 'Editing {title}',
             values: { title },
           }),
diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx
index f2f29d1f7a7c..956bb5a7a836 100644
--- a/src/plugins/dashboard/public/plugin.tsx
+++ b/src/plugins/dashboard/public/plugin.tsx
@@ -268,6 +268,7 @@ export class DashboardPlugin
       return {
         capabilities: coreStart.application.capabilities,
         application: coreStart.application,
+        chrome: coreStart.chrome,
         notifications: coreStart.notifications,
         overlays: coreStart.overlays,
         embeddable: deps.embeddable,
diff --git a/src/plugins/data/public/ui/typeahead/_suggestion.scss b/src/plugins/data/public/ui/typeahead/_suggestion.scss
index 2accf9a31c7a..ef14e8f2e31f 100644
--- a/src/plugins/data/public/ui/typeahead/_suggestion.scss
+++ b/src/plugins/data/public/ui/typeahead/_suggestion.scss
@@ -102,7 +102,7 @@ $osdTypeaheadTypes: (
     &.osdSuggestionItem--#{$name} {
       .osdSuggestionItem__type {
         background-color: tintOrShade($color, 90%, 50%);
-        color: makeHighContrastColor($color, tintOrShade($color, 90%, 50%));
+        color: makeGraphicContrastColor($color, tintOrShade($color, 90%, 50%));
       }
     }
   }
diff --git a/src/plugins/data_explorer/.i18nrc.json b/src/plugins/data_explorer/.i18nrc.json
new file mode 100644
index 000000000000..1ea4ccdd1e7b
--- /dev/null
+++ b/src/plugins/data_explorer/.i18nrc.json
@@ -0,0 +1,7 @@
+{
+  "prefix": "dataExplorer",
+  "paths": {
+    "dataExplorer": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}
diff --git a/src/plugins/data_explorer/README.md b/src/plugins/data_explorer/README.md
new file mode 100755
index 000000000000..8ea14c17d428
--- /dev/null
+++ b/src/plugins/data_explorer/README.md
@@ -0,0 +1,11 @@
+# dataExplorer
+
+A OpenSearch Dashboards plugin
+
+---
+
+## Development
+
+See the [OpenSearch Dashboards contributing
+guide](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/CONTRIBUTING.md) for instructions
+setting up your development environment.
diff --git a/src/plugins/data_explorer/common/index.ts b/src/plugins/data_explorer/common/index.ts
new file mode 100644
index 000000000000..60d61f38b749
--- /dev/null
+++ b/src/plugins/data_explorer/common/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const PLUGIN_ID = 'data-explorer';
+export const PLUGIN_NAME = 'Data Explorer';
diff --git a/src/plugins/data_explorer/opensearch_dashboards.json b/src/plugins/data_explorer/opensearch_dashboards.json
new file mode 100644
index 000000000000..23db353b2cc8
--- /dev/null
+++ b/src/plugins/data_explorer/opensearch_dashboards.json
@@ -0,0 +1,18 @@
+{
+  "id": "dataExplorer",
+  "version": "1.0.0",
+  "opensearchDashboardsVersion": "opensearchDashboards",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [
+    "data",
+    "navigation",
+    "embeddable",
+    "expressions"
+  ],
+  "optionalPlugins": [],
+  "requiredBundles": [
+    "opensearchDashboardsReact",
+    "opensearchDashboardsUtils"
+  ]
+}
\ No newline at end of file
diff --git a/src/plugins/data_explorer/public/application.tsx b/src/plugins/data_explorer/public/application.tsx
new file mode 100644
index 000000000000..ae57070f7451
--- /dev/null
+++ b/src/plugins/data_explorer/public/application.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider as ReduxProvider } from 'react-redux';
+import { Router, Route, Switch } from 'react-router-dom';
+import { AppMountParameters, CoreStart } from '../../../core/public';
+import { OpenSearchDashboardsContextProvider } from '../../opensearch_dashboards_react/public';
+import { DataExplorerServices } from './types';
+import { DataExplorerApp } from './components/app';
+import { Store } from './utils/state_management';
+
+export const renderApp = (
+  core: CoreStart,
+  services: DataExplorerServices,
+  params: AppMountParameters,
+  store: Store
+) => {
+  const { history, element } = params;
+  ReactDOM.render(
+    <Router history={history}>
+      <OpenSearchDashboardsContextProvider services={services}>
+        <ReduxProvider store={store}>
+          <services.i18n.Context>
+            <Switch>
+              <Route path={[`/:appId`, '/']} exact={false}>
+                <DataExplorerApp params={params} />
+              </Route>
+            </Switch>
+          </services.i18n.Context>
+        </ReduxProvider>
+      </OpenSearchDashboardsContextProvider>
+    </Router>,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};
diff --git a/src/plugins/data_explorer/public/components/__snapshots__/app_container.test.tsx.snap b/src/plugins/data_explorer/public/components/__snapshots__/app_container.test.tsx.snap
new file mode 100644
index 000000000000..29b8e5ab54e9
--- /dev/null
+++ b/src/plugins/data_explorer/public/components/__snapshots__/app_container.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataExplorerApp should render the canvas and panel when selected 1`] = `
+<div>
+  <div
+    class="euiPage euiPage--grow deLayout"
+  >
+    <div>
+      Context
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/plugins/data_explorer/public/components/app.tsx b/src/plugins/data_explorer/public/components/app.tsx
new file mode 100644
index 000000000000..ff6b5931a404
--- /dev/null
+++ b/src/plugins/data_explorer/public/components/app.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { AppMountParameters } from '../../../../core/public';
+import { useView } from '../utils/use';
+import { AppContainer } from './app_container';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { DataExplorerServices } from '../types';
+import { syncQueryStateWithUrl } from '../../../data/public';
+
+export const DataExplorerApp = ({ params }: { params: AppMountParameters }) => {
+  const { view } = useView();
+  const {
+    services: {
+      data: { query },
+      osdUrlStateStorage,
+    },
+  } = useOpenSearchDashboards<DataExplorerServices>();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // syncs `_g` portion of url with query services
+    const { stop } = syncQueryStateWithUrl(query, osdUrlStateStorage);
+
+    return () => stop();
+
+    // this effect should re-run when pathname is changed to preserve querystring part,
+    // so the global state is always preserved
+  }, [query, osdUrlStateStorage, pathname]);
+
+  return <AppContainer view={view} params={params} />;
+};
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
new file mode 100644
index 000000000000..d289e7d4be3e
--- /dev/null
+++ b/src/plugins/data_explorer/public/components/app_container.scss
@@ -0,0 +1,18 @@
+$osdHeaderOffset: $euiHeaderHeightCompensation;
+
+.deSidebar {
+  max-width: 462px;
+  min-width: 400px;
+}
+
+.deLayout {
+  height: calc(100vh - #{$osdHeaderOffset});
+
+  &__canvas {
+    height: 100%;
+  }
+}
+
+.headerIsExpanded .deLayout {
+  height: calc(100vh - #{$osdHeaderOffset * 2});
+}
diff --git a/src/plugins/data_explorer/public/components/app_container.test.tsx b/src/plugins/data_explorer/public/components/app_container.test.tsx
new file mode 100644
index 000000000000..14175369490c
--- /dev/null
+++ b/src/plugins/data_explorer/public/components/app_container.test.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { AppContainer } from './app_container';
+import { View } from '../services/view_service/view';
+import { AppMountParameters } from '../../../../core/public';
+import { render } from 'test_utils/testing_lib_helpers';
+
+describe('DataExplorerApp', () => {
+  const createView = () => {
+    return new View({
+      id: 'test-view',
+      title: 'Test View',
+      defaultPath: '/test-path',
+      appExtentions: {} as any,
+      Canvas: (() => <div>canvas</div>) as any,
+      Panel: (() => <div>panel</div>) as any,
+      Context: (() => <div>Context</div>) as any,
+    });
+  };
+
+  const params: AppMountParameters = {
+    element: document.createElement('div'),
+    history: {} as any,
+    onAppLeave: jest.fn(),
+    setHeaderActionMenu: jest.fn(),
+    appBasePath: '',
+  };
+
+  it('should render NoView when a non existent view is selected', () => {
+    const { container } = render(<AppContainer params={params} />);
+
+    expect(container).toContainHTML('View not found');
+  });
+
+  it('should render the canvas and panel when selected', () => {
+    const view = createView();
+    const { container } = render(<AppContainer view={view} params={params} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx
new file mode 100644
index 000000000000..8f37e9c1230f
--- /dev/null
+++ b/src/plugins/data_explorer/public/components/app_container.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPage, EuiPageBody } from '@elastic/eui';
+import { Suspense } from 'react';
+import { AppMountParameters } from '../../../../core/public';
+import { Sidebar } from './sidebar';
+import { NoView } from './no_view';
+import { View } from '../services/view_service/view';
+import './app_container.scss';
+
+export const AppContainer = ({ view, params }: { view?: View; params: AppMountParameters }) => {
+  // TODO: Make this more robust.
+  if (!view) {
+    return <NoView />;
+  }
+
+  const { Canvas, Panel, Context } = view;
+
+  // Render the application DOM.
+  return (
+    <EuiPage className="deLayout" paddingSize="none">
+      {/* TODO: improve fallback state */}
+      <Suspense fallback={<div>Loading...</div>}>
+        <Context {...params}>
+          <Sidebar>
+            <Panel {...params} />
+          </Sidebar>
+          <EuiPageBody className="deLayout__canvas">
+            <Canvas {...params} />
+          </EuiPageBody>
+        </Context>
+      </Suspense>
+    </EuiPage>
+  );
+};
diff --git a/src/plugins/data_explorer/public/components/no_view.tsx b/src/plugins/data_explorer/public/components/no_view.tsx
new file mode 100644
index 000000000000..a341e9d0564e
--- /dev/null
+++ b/src/plugins/data_explorer/public/components/no_view.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPageTemplate, EuiEmptyPrompt } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+
+export const NoView = () => {
+  return (
+    <EuiPageTemplate
+      template="centeredContent"
+      className="dePageTemplate"
+      pageContentProps={{
+        role: 'alertdialog',
+        color: 'plain',
+        hasBorder: false,
+      }}
+    >
+      <EuiEmptyPrompt
+        iconType="alert"
+        iconColor="danger"
+        title={
+          <h2>
+            <FormattedMessage id="dataExplorer.noView.title" defaultMessage="View not found" />
+          </h2>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="dataExplorer.noView.body"
+              defaultMessage="The view you are trying to access does not exist. Please check the URL and try again."
+            />
+          </p>
+        }
+      />
+    </EuiPageTemplate>
+  );
+};
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
new file mode 100644
index 000000000000..921e3894983b
--- /dev/null
+++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, FC, useEffect, useState } from 'react';
+import { i18n } from '@osd/i18n';
+import {
+  EuiComboBox,
+  EuiSelect,
+  EuiComboBoxOptionOption,
+  EuiSpacer,
+  EuiSplitPanel,
+  EuiPageSideBar,
+} from '@elastic/eui';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { useView } from '../../utils/use';
+import { DataExplorerServices } from '../../types';
+import { useTypedDispatch, useTypedSelector, setIndexPattern } from '../../utils/state_management';
+import { setView } from '../../utils/state_management/metadata_slice';
+
+export const Sidebar: FC = ({ children }) => {
+  const { indexPattern: indexPatternId } = useTypedSelector((state) => state.metadata);
+  const dispatch = useTypedDispatch();
+  const [options, setOptions] = useState<Array<EuiComboBoxOptionOption<string>>>([]);
+  const [selectedOption, setSelectedOption] = useState<EuiComboBoxOptionOption<string>>();
+  const { view, viewRegistry } = useView();
+  const views = viewRegistry.all();
+  const viewOptions = useMemo(
+    () =>
+      views.map(({ id, title }) => ({
+        value: id,
+        text: title,
+      })),
+    [views]
+  );
+
+  const {
+    services: {
+      data: { indexPatterns },
+      notifications: { toasts },
+    },
+  } = useOpenSearchDashboards<DataExplorerServices>();
+
+  useEffect(() => {
+    let isMounted = true;
+    const fetchIndexPatterns = async () => {
+      await indexPatterns.ensureDefaultIndexPattern();
+      const cache = await indexPatterns.getCache();
+      const currentOptions = (cache || []).map((indexPattern) => ({
+        label: indexPattern.attributes.title,
+        value: indexPattern.id,
+      }));
+      if (isMounted) {
+        setOptions(currentOptions);
+      }
+    };
+    fetchIndexPatterns();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [indexPatterns]);
+
+  // Set option to the current index pattern
+  useEffect(() => {
+    if (indexPatternId) {
+      const option = options.find((o) => o.value === indexPatternId);
+      setSelectedOption(option);
+    }
+  }, [indexPatternId, options]);
+
+  return (
+    <EuiPageSideBar className="deSidebar" sticky>
+      <EuiSplitPanel.Outer className="eui-yScroll" hasBorder={true} borderRadius="none">
+        <EuiSplitPanel.Inner paddingSize="s" color="subdued" grow={false}>
+          <EuiComboBox
+            placeholder="Select a datasource"
+            singleSelection={{ asPlainText: true }}
+            options={options}
+            selectedOptions={selectedOption ? [selectedOption] : []}
+            fullWidth
+            onChange={(selected) => {
+              // TODO: There are many issues with this approach, but it's a start
+              // 1. Combo box can delete a selected index pattern. This should not be possible
+              // 2. Combo box is severely truncated. This should be fixed in the EUI component
+              // 3. The onchange can fire with a option that is not valid. discuss where to handle this.
+              // 4. value is optional. If the combobox needs to act as a slecet, this should be required.
+              const { value } = selected[0] || {};
+
+              if (!value) {
+                toasts.addWarning({
+                  id: 'index-pattern-not-found',
+                  title: i18n.translate('dataExplorer.indexPatternError', {
+                    defaultMessage: 'Index pattern not found',
+                  }),
+                });
+                return;
+              }
+
+              dispatch(setIndexPattern(value));
+            }}
+          />
+          {/* Hidden for the 2.10 release of Data Explorer. Uncomment when Data explorer is released */}
+          {/* <EuiSpacer size="s" />
+          <EuiSelect
+            options={viewOptions}
+            value={view?.id}
+            onChange={(e) => {
+              dispatch(setView(e.target.value));
+            }}
+            fullWidth
+          /> */}
+        </EuiSplitPanel.Inner>
+        <EuiSplitPanel.Inner paddingSize="none" color="subdued" className="eui-yScroll">
+          {children}
+        </EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+    </EuiPageSideBar>
+  );
+};
diff --git a/src/plugins/data_explorer/public/index.scss b/src/plugins/data_explorer/public/index.scss
new file mode 100644
index 000000000000..8389e31b426a
--- /dev/null
+++ b/src/plugins/data_explorer/public/index.scss
@@ -0,0 +1,9 @@
+$osdHeaderOffset: $euiHeaderHeightCompensation;
+
+.dePageTemplate {
+  height: calc(100vh - #{$osdHeaderOffset});
+}
+
+.headerIsExpanded .dePageTemplate {
+  height: calc(100vh - #{$osdHeaderOffset * 2});
+}
diff --git a/src/plugins/data_explorer/public/index.ts b/src/plugins/data_explorer/public/index.ts
new file mode 100644
index 000000000000..635a0ec285db
--- /dev/null
+++ b/src/plugins/data_explorer/public/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './index.scss';
+
+import { DataExplorerPlugin } from './plugin';
+
+// This exports static code and TypeScript types,
+// as well as, OpenSearch Dashboards Platform `plugin()` initializer.
+export function plugin() {
+  return new DataExplorerPlugin();
+}
+export { DataExplorerPluginSetup, DataExplorerPluginStart, DataExplorerServices } from './types';
+export { ViewProps, ViewDefinition, DefaultViewState } from './services/view_service';
+export { RootState, useTypedSelector, useTypedDispatch } from './utils/state_management';
diff --git a/src/plugins/data_explorer/public/plugin.ts b/src/plugins/data_explorer/public/plugin.ts
new file mode 100644
index 000000000000..3b953567fbe8
--- /dev/null
+++ b/src/plugins/data_explorer/public/plugin.ts
@@ -0,0 +1,140 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { BehaviorSubject } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import {
+  AppMountParameters,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  AppNavLinkStatus,
+  ScopedHistory,
+  AppUpdater,
+} from '../../../core/public';
+import {
+  DataExplorerPluginSetup,
+  DataExplorerPluginSetupDependencies,
+  DataExplorerPluginStart,
+  DataExplorerPluginStartDependencies,
+  DataExplorerServices,
+} from './types';
+import { PLUGIN_ID, PLUGIN_NAME } from '../common';
+import { ViewService } from './services/view_service';
+import {
+  createOsdUrlStateStorage,
+  createOsdUrlTracker,
+  withNotifyOnErrors,
+} from '../../opensearch_dashboards_utils/public';
+import { getPreloadedStore } from './utils/state_management';
+import { opensearchFilters } from '../../data/public';
+
+export class DataExplorerPlugin
+  implements
+    Plugin<
+      DataExplorerPluginSetup,
+      DataExplorerPluginStart,
+      DataExplorerPluginSetupDependencies,
+      DataExplorerPluginStartDependencies
+    > {
+  private viewService = new ViewService();
+  private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
+  private stopUrlTracking?: () => void;
+  private currentHistory?: ScopedHistory;
+
+  public setup(
+    core: CoreSetup<DataExplorerPluginStartDependencies, DataExplorerPluginStart>,
+    { data }: DataExplorerPluginSetupDependencies
+  ): DataExplorerPluginSetup {
+    const viewService = this.viewService;
+
+    const { appMounted, appUnMounted, stop: stopUrlTracker } = createOsdUrlTracker({
+      baseUrl: core.http.basePath.prepend(`/app/${PLUGIN_ID}`),
+      defaultSubUrl: '#/',
+      storageKey: `lastUrl:${core.http.basePath.get()}:${PLUGIN_ID}`,
+      navLinkUpdater$: this.appStateUpdater,
+      toastNotifications: core.notifications.toasts,
+      stateParams: [
+        {
+          osdUrlKey: '_g',
+          stateUpdate$: data.query.state$.pipe(
+            filter(
+              ({ changes }) => !!(changes.globalFilters || changes.time || changes.refreshInterval)
+            ),
+            map(({ state }) => ({
+              ...state,
+              filters: state.filters?.filter(opensearchFilters.isFilterPinned),
+            }))
+          ),
+        },
+      ],
+      getHistory: () => {
+        return this.currentHistory!;
+      },
+    });
+    this.stopUrlTracking = () => {
+      stopUrlTracker();
+    };
+
+    // Register an application into the side navigation menu
+    core.application.register({
+      id: PLUGIN_ID,
+      title: PLUGIN_NAME,
+      navLinkStatus: AppNavLinkStatus.hidden,
+      mount: async (params: AppMountParameters) => {
+        // Load application bundle
+        const { renderApp } = await import('./application');
+
+        const [coreStart, pluginsStart] = await core.getStartServices();
+        this.currentHistory = params.history;
+
+        // make sure the index pattern list is up to date
+        pluginsStart.data.indexPatterns.clearCache();
+
+        const services: DataExplorerServices = {
+          ...coreStart,
+          scopedHistory: this.currentHistory,
+          data: pluginsStart.data,
+          embeddable: pluginsStart.embeddable,
+          expressions: pluginsStart.expressions,
+          osdUrlStateStorage: createOsdUrlStateStorage({
+            history: this.currentHistory,
+            useHash: coreStart.uiSettings.get('state:storeInSessionStorage'),
+            ...withNotifyOnErrors(coreStart.notifications.toasts),
+          }),
+          viewRegistry: viewService.start(),
+        };
+
+        // Get start services as specified in opensearch_dashboards.json
+        // Render the application
+        const { store, unsubscribe: unsubscribeStore } = await getPreloadedStore(services);
+        services.store = store;
+
+        const unmount = renderApp(coreStart, services, params, store);
+        appMounted();
+
+        return () => {
+          unsubscribeStore();
+          appUnMounted();
+          unmount();
+        };
+      },
+    });
+
+    return {
+      ...this.viewService.setup(),
+    };
+  }
+
+  public start(core: CoreStart): DataExplorerPluginStart {
+    return {};
+  }
+
+  public stop() {
+    if (this.stopUrlTracking) {
+      this.stopUrlTracking();
+    }
+  }
+}
diff --git a/src/plugins/data_explorer/public/services/view_service/index.ts b/src/plugins/data_explorer/public/services/view_service/index.ts
new file mode 100644
index 000000000000..06bfe5c341f7
--- /dev/null
+++ b/src/plugins/data_explorer/public/services/view_service/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './view_service';
+export * from './types';
diff --git a/src/plugins/data_explorer/public/services/view_service/types.ts b/src/plugins/data_explorer/public/services/view_service/types.ts
new file mode 100644
index 000000000000..5ecba7920b63
--- /dev/null
+++ b/src/plugins/data_explorer/public/services/view_service/types.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Slice } from '@reduxjs/toolkit';
+import { LazyExoticComponent } from 'react';
+import { AppMountParameters } from '../../../../../core/public';
+import { RootState } from '../../utils/state_management';
+
+interface ViewListItem {
+  id: string;
+  label: string;
+}
+
+export interface DefaultViewState<T = unknown> {
+  state: T;
+  root?: Partial<RootState>;
+}
+
+export type ViewProps = AppMountParameters;
+
+export interface ViewDefinition<T = any> {
+  readonly id: string;
+  readonly title: string;
+  readonly ui?: {
+    defaults: DefaultViewState | (() => DefaultViewState) | (() => Promise<DefaultViewState>);
+    slice: Slice<T>;
+  };
+  readonly Canvas: LazyExoticComponent<(props: ViewProps) => React.ReactElement>;
+  readonly Panel: LazyExoticComponent<(props: ViewProps) => React.ReactElement>;
+  readonly Context: LazyExoticComponent<
+    (props: React.PropsWithChildren<ViewProps>) => React.ReactElement
+  >;
+  readonly defaultPath: string;
+  readonly appExtentions: {
+    savedObject: {
+      docTypes: [string];
+      toListItem: (obj: { id: string; title: string }) => ViewListItem;
+    };
+  };
+  readonly shouldShow?: (state: any) => boolean;
+}
diff --git a/src/plugins/data_explorer/public/services/view_service/view.ts b/src/plugins/data_explorer/public/services/view_service/view.ts
new file mode 100644
index 000000000000..ebdab31fddc5
--- /dev/null
+++ b/src/plugins/data_explorer/public/services/view_service/view.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ViewDefinition } from './types';
+
+type IView = ViewDefinition;
+
+export class View implements IView {
+  public readonly id: string;
+  public readonly title: string;
+  public readonly ui: IView['ui'];
+  public readonly defaultPath: string;
+  public readonly appExtentions: IView['appExtentions'];
+  readonly shouldShow?: (state: any) => boolean;
+  readonly Canvas: IView['Canvas'];
+  readonly Panel: IView['Panel'];
+  readonly Context: IView['Context'];
+
+  constructor(options: ViewDefinition) {
+    this.id = options.id;
+    this.title = options.title;
+    this.ui = options.ui;
+    this.defaultPath = options.defaultPath;
+    this.appExtentions = options.appExtentions;
+    this.shouldShow = options.shouldShow;
+    this.Canvas = options.Canvas;
+    this.Panel = options.Panel;
+    this.Context = options.Context;
+  }
+}
diff --git a/src/plugins/data_explorer/public/services/view_service/view_service.test.ts b/src/plugins/data_explorer/public/services/view_service/view_service.test.ts
new file mode 100644
index 000000000000..7bbf486a9991
--- /dev/null
+++ b/src/plugins/data_explorer/public/services/view_service/view_service.test.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ViewDefinition } from './types';
+import { ViewService } from './view_service';
+
+const DEFAULT_VIEW: ViewDefinition = {
+  id: 'my-view',
+  title: 'My view',
+  defaultPath: '/my-view',
+  appExtentions: {} as any, // Not required for this test
+  ui: {} as any, // Not required for this test
+};
+
+describe('TypeService', () => {
+  const createViewDefinition = (props?: Partial<ViewDefinition>): ViewDefinition => {
+    return {
+      ...DEFAULT_VIEW,
+      ...props,
+    };
+  };
+
+  let service: ViewService;
+
+  beforeEach(() => {
+    service = new ViewService();
+  });
+
+  describe('#setup', () => {
+    test('should throw an error if two visualizations of the same id are registered', () => {
+      const { registerView } = service.setup();
+
+      registerView(createViewDefinition({ id: 'view-1' }));
+
+      expect(() => {
+        registerView(createViewDefinition({ id: 'view-1' }));
+      }).toThrowErrorMatchingInlineSnapshot(`"A view with the id view-1 already exists!"`);
+    });
+  });
+
+  describe('#start', () => {
+    test('should return registered view if it exists', () => {
+      const { registerView } = service.setup();
+      registerView(createViewDefinition({ id: 'view-1' }));
+
+      const { get } = service.start();
+      expect(get('view-1')).toEqual(expect.objectContaining({ id: 'view-1' }));
+      expect(get('view-something')).toBeUndefined();
+    });
+
+    test('should return all registered views', () => {
+      const { registerView } = service.setup();
+      registerView(createViewDefinition({ id: 'view-1' }));
+      registerView(createViewDefinition({ id: 'view-2' }));
+
+      const { all } = service.start();
+      const allRegisteredViews = all();
+      expect(allRegisteredViews.map(({ id }) => id)).toEqual(['view-1', 'view-2']);
+    });
+  });
+});
diff --git a/src/plugins/data_explorer/public/services/view_service/view_service.ts b/src/plugins/data_explorer/public/services/view_service/view_service.ts
new file mode 100644
index 000000000000..0ee131df0665
--- /dev/null
+++ b/src/plugins/data_explorer/public/services/view_service/view_service.ts
@@ -0,0 +1,88 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { CoreService } from '../../../../../core/types';
+import { ViewDefinition } from './types';
+import { View } from './view';
+
+/**
+ * Visualization Types Service
+ *
+ * @internal
+ */
+export class ViewService implements CoreService<ViewServiceSetup, ViewServiceStart> {
+  private views: Record<string, View> = {};
+
+  private registerView(view: View) {
+    if (view.id in this.views) {
+      throw new Error(`A view with the id ${view.id} already exists!`);
+    }
+    this.views[view.id] = view;
+  }
+
+  public setup() {
+    return {
+      /**
+       * registers a visualization type
+       * @param config - visualization type definition
+       */
+      registerView: <T = any>(config: ViewDefinition<T>): void => {
+        const view = new View(config);
+        this.registerView(view);
+      },
+    };
+  }
+
+  public start() {
+    return {
+      /**
+       * returns specific View or undefined if not found
+       * @param {string} id - id of view to return
+       */
+      get: (id: string): View | undefined => {
+        return this.views[id];
+      },
+      /**
+       * returns all registered Views
+       */
+      all: (): View[] => {
+        return Object.values(this.views);
+      },
+    };
+  }
+
+  public stop() {
+    // nothing to do here yet
+  }
+}
+
+/** @internal */
+export type ViewServiceSetup = ReturnType<ViewService['setup']>;
+export type ViewServiceStart = ReturnType<ViewService['start']>;
diff --git a/src/plugins/data_explorer/public/types.ts b/src/plugins/data_explorer/public/types.ts
new file mode 100644
index 000000000000..5f677fb46cfd
--- /dev/null
+++ b/src/plugins/data_explorer/public/types.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CoreStart, ScopedHistory } from 'opensearch-dashboards/public';
+import { EmbeddableStart } from '../../embeddable/public';
+import { ExpressionsStart } from '../../expressions/public';
+import { ViewServiceStart, ViewServiceSetup } from './services/view_service';
+import { IOsdUrlStateStorage } from '../../opensearch_dashboards_utils/public';
+import { DataPublicPluginSetup, DataPublicPluginStart } from '../../data/public';
+import { Store } from './utils/state_management';
+
+export type DataExplorerPluginSetup = ViewServiceSetup;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface DataExplorerPluginStart {}
+
+export interface DataExplorerPluginSetupDependencies {
+  data: DataPublicPluginSetup;
+}
+
+export interface DataExplorerPluginStartDependencies {
+  expressions: ExpressionsStart;
+  embeddable: EmbeddableStart;
+  data: DataPublicPluginStart;
+}
+
+export interface DataExplorerServices extends CoreStart {
+  store?: Store;
+  viewRegistry: ViewServiceStart;
+  expressions: ExpressionsStart;
+  embeddable: EmbeddableStart;
+  data: DataPublicPluginStart;
+  scopedHistory: ScopedHistory;
+  osdUrlStateStorage: IOsdUrlStateStorage;
+}
diff --git a/src/plugins/data_explorer/public/utils/mocks.ts b/src/plugins/data_explorer/public/utils/mocks.ts
new file mode 100644
index 000000000000..9604a0ba8dc6
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/mocks.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ScopedHistory } from '../../../../core/public';
+import { coreMock, scopedHistoryMock } from '../../../../core/public/mocks';
+import { dataPluginMock } from '../../../data/public/mocks';
+import { embeddablePluginMock } from '../../../embeddable/public/mocks';
+import { expressionsPluginMock } from '../../../expressions/public/mocks';
+import { createOsdUrlStateStorage } from '../../../opensearch_dashboards_utils/public';
+import { DataExplorerServices } from '../types';
+
+export const createDataExplorerServicesMock = () => {
+  const coreStartMock = coreMock.createStart();
+  const dataMock = dataPluginMock.createStartContract();
+  const embeddableMock = embeddablePluginMock.createStartContract();
+  const expressionMock = expressionsPluginMock.createStartContract();
+  const osdUrlStateStorageMock = createOsdUrlStateStorage({ useHash: false });
+
+  const dataExplorerServicesMock: DataExplorerServices = {
+    ...coreStartMock,
+    expressions: expressionMock,
+    data: dataMock,
+    osdUrlStateStorage: osdUrlStateStorageMock,
+    embeddable: embeddableMock,
+    scopedHistory: (scopedHistoryMock.create() as unknown) as ScopedHistory,
+    viewRegistry: {
+      get: jest.fn(),
+      all: jest.fn(() => []),
+    },
+  };
+
+  return (dataExplorerServicesMock as unknown) as jest.Mocked<DataExplorerServices>;
+};
diff --git a/src/plugins/data_explorer/public/utils/state_management/hooks.ts b/src/plugins/data_explorer/public/utils/state_management/hooks.ts
new file mode 100644
index 000000000000..d4194da3702f
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/state_management/hooks.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+// Use throughout the app instead of plain `useDispatch` and `useSelector`
+export const useTypedDispatch = () => useDispatch<AppDispatch>();
+export const useTypedSelector: <TState = RootState, TSelected = unknown>(
+  selector: (state: TState) => TSelected,
+  equalityFn?: (left: TSelected, right: TSelected) => boolean
+) => TSelected = useSelector;
diff --git a/src/plugins/data_explorer/public/utils/state_management/index.ts b/src/plugins/data_explorer/public/utils/state_management/index.ts
new file mode 100644
index 000000000000..edb5c2a17184
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/state_management/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './store';
+export * from './hooks';
diff --git a/src/plugins/data_explorer/public/utils/state_management/metadata_slice.ts b/src/plugins/data_explorer/public/utils/state_management/metadata_slice.ts
new file mode 100644
index 000000000000..e9fe84713120
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/state_management/metadata_slice.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { DataExplorerServices } from '../../types';
+
+export interface MetadataState {
+  indexPattern?: string;
+  originatingApp?: string;
+  view?: string;
+}
+
+const initialState: MetadataState = {};
+
+export const getPreloadedState = async ({
+  embeddable,
+  scopedHistory,
+  data,
+}: DataExplorerServices): Promise<MetadataState> => {
+  const { originatingApp } =
+    embeddable
+      .getStateTransfer(scopedHistory)
+      .getIncomingEditorState({ keysToRemoveAfterFetch: ['id', 'input'] }) || {};
+  const defaultIndexPattern = await data.indexPatterns.getDefault();
+  const preloadedState: MetadataState = {
+    ...initialState,
+    originatingApp,
+    indexPattern: defaultIndexPattern?.id,
+  };
+
+  return preloadedState;
+};
+
+export const slice = createSlice({
+  name: 'metadata',
+  initialState,
+  reducers: {
+    setIndexPattern: (state, action: PayloadAction<string>) => {
+      state.indexPattern = action.payload;
+    },
+    setOriginatingApp: (state, action: PayloadAction<string | undefined>) => {
+      state.originatingApp = action.payload;
+    },
+    setView: (state, action: PayloadAction<string>) => {
+      state.view = action.payload;
+    },
+    setState: (_state, action: PayloadAction<MetadataState>) => {
+      return action.payload;
+    },
+  },
+});
+
+export const { reducer } = slice;
+export const { setIndexPattern, setOriginatingApp, setView, setState } = slice.actions;
diff --git a/src/plugins/data_explorer/public/utils/state_management/preload.ts b/src/plugins/data_explorer/public/utils/state_management/preload.ts
new file mode 100644
index 000000000000..fe5c23bd366c
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/state_management/preload.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PreloadedState } from '@reduxjs/toolkit';
+import { getPreloadedState as getPreloadedMetadataState } from './metadata_slice';
+import { RootState } from './store';
+import { DataExplorerServices } from '../../types';
+
+export const getPreloadedState = async (
+  services: DataExplorerServices
+): Promise<PreloadedState<RootState>> => {
+  let rootState: RootState = {
+    metadata: await getPreloadedMetadataState(services),
+  };
+
+  // initialize the default state for each view
+  const views = services.viewRegistry.all();
+  const promises = views.map(async (view) => {
+    if (!view.ui) {
+      return;
+    }
+
+    const { defaults } = view.ui;
+
+    try {
+      // defaults can be a function or an object
+      const preloadedState = typeof defaults === 'function' ? await defaults() : defaults;
+      rootState[view.id] = preloadedState.state;
+
+      // if the view wants to override the root state, we do that here
+      if (preloadedState.root) {
+        rootState = {
+          ...rootState,
+          ...preloadedState.root,
+        };
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(`Error initializing view ${view.id}: ${e}`);
+    }
+  });
+  await Promise.all(promises);
+
+  return rootState;
+};
diff --git a/src/plugins/data_explorer/public/utils/state_management/redux_persistence.test.tsx b/src/plugins/data_explorer/public/utils/state_management/redux_persistence.test.tsx
new file mode 100644
index 000000000000..62159558a0c4
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/state_management/redux_persistence.test.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DataExplorerServices } from '../../types';
+import { createDataExplorerServicesMock } from '../mocks';
+import { loadReduxState, persistReduxState } from './redux_persistence';
+
+describe('test redux state persistence', () => {
+  let mockServices: jest.Mocked<DataExplorerServices>;
+  let reduxStateParams: any;
+
+  beforeEach(() => {
+    mockServices = createDataExplorerServicesMock();
+    reduxStateParams = {
+      discover: 'visualization',
+      metadata: 'metadata',
+    };
+  });
+
+  test('test load default redux state when url is empty', async () => {
+    const returnStates = await loadReduxState(mockServices);
+    expect(returnStates).toMatchInlineSnapshot(`
+      Object {
+        "metadata": Object {
+          "indexPattern": "id",
+          "originatingApp": undefined,
+        },
+      }
+    `);
+  });
+
+  test('test load redux state', async () => {
+    mockServices.osdUrlStateStorage.set('_a', reduxStateParams, { replace: true });
+    const returnStates = await loadReduxState(mockServices);
+    expect(returnStates).toStrictEqual(reduxStateParams);
+  });
+
+  test('test persist redux state', () => {
+    persistReduxState(reduxStateParams, mockServices);
+    const urlStates = mockServices.osdUrlStateStorage.get('_a');
+    expect(urlStates).toStrictEqual(reduxStateParams);
+  });
+});
diff --git a/src/plugins/data_explorer/public/utils/state_management/redux_persistence.ts b/src/plugins/data_explorer/public/utils/state_management/redux_persistence.ts
new file mode 100644
index 000000000000..81517f3e9f4f
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/state_management/redux_persistence.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DataExplorerServices } from '../../types';
+import { getPreloadedState } from './preload';
+import { RootState } from './store';
+
+export const loadReduxState = async (services: DataExplorerServices) => {
+  try {
+    const serializedState = services.osdUrlStateStorage.get<RootState>('_a');
+    if (serializedState !== null) return serializedState;
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error(err);
+  }
+
+  return await getPreloadedState(services);
+};
+
+export const persistReduxState = (root: RootState, services: DataExplorerServices) => {
+  try {
+    services.osdUrlStateStorage.set<RootState>('_a', root, {
+      replace: true,
+    });
+  } catch (err) {
+    return;
+  }
+};
diff --git a/src/plugins/data_explorer/public/utils/state_management/store.ts b/src/plugins/data_explorer/public/utils/state_management/store.ts
new file mode 100644
index 000000000000..cd967d25fc20
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/state_management/store.ts
@@ -0,0 +1,89 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { combineReducers, configureStore, PreloadedState, Reducer, Slice } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { reducer as metadataReducer } from './metadata_slice';
+import { loadReduxState, persistReduxState } from './redux_persistence';
+import { DataExplorerServices } from '../../types';
+
+const commonReducers = {
+  metadata: metadataReducer,
+};
+
+let dynamicReducers: {
+  metadata: typeof metadataReducer;
+  [key: string]: Reducer;
+} = {
+  ...commonReducers,
+};
+
+const rootReducer = combineReducers(dynamicReducers);
+
+export const configurePreloadedStore = (preloadedState: PreloadedState<RootState>) => {
+  // After registering the slices the root reducer needs to be updated
+  const updatedRootReducer = combineReducers(dynamicReducers);
+
+  return configureStore({
+    reducer: updatedRootReducer,
+    preloadedState,
+  });
+};
+
+export const getPreloadedStore = async (services: DataExplorerServices) => {
+  // For each view preload the data and register the slice
+  const views = services.viewRegistry.all();
+  views.forEach((view) => {
+    if (!view.ui) return;
+
+    const { slice } = view.ui;
+    registerSlice(slice);
+  });
+
+  const preloadedState = await loadReduxState(services);
+  const store = configurePreloadedStore(preloadedState);
+
+  let previousState = store.getState();
+
+  // Listen to changes
+  const handleChange = () => {
+    const state = store.getState();
+    persistReduxState(state, services);
+
+    if (isEqual(state, previousState)) return;
+
+    // Add Side effects here to apply after changes to the store are made. None for now.
+
+    previousState = state;
+  };
+
+  // the store subscriber will automatically detect changes and call handleChange function
+  const unsubscribe = store.subscribe(handleChange);
+
+  const onUnsubscribe = () => {
+    dynamicReducers = {
+      ...commonReducers,
+    };
+
+    unsubscribe();
+  };
+
+  return { store, unsubscribe: onUnsubscribe };
+};
+
+export const registerSlice = (slice: Slice) => {
+  if (dynamicReducers[slice.name]) {
+    throw new Error(`Slice ${slice.name} already registered`);
+  }
+  dynamicReducers[slice.name] = slice.reducer;
+};
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof rootReducer>;
+export type RenderState = Omit<RootState, 'metadata'>; // Remaining state after auxillary states are removed
+export type Store = ReturnType<typeof configurePreloadedStore>;
+export type AppDispatch = Store['dispatch'];
+
+export { MetadataState, setIndexPattern, setOriginatingApp } from './metadata_slice';
diff --git a/src/plugins/data_explorer/public/utils/use/index.ts b/src/plugins/data_explorer/public/utils/use/index.ts
new file mode 100644
index 000000000000..baab8736b66c
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/use/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './use_view';
diff --git a/src/plugins/data_explorer/public/utils/use/use_view.ts b/src/plugins/data_explorer/public/utils/use/use_view.ts
new file mode 100644
index 000000000000..10f67c08907d
--- /dev/null
+++ b/src/plugins/data_explorer/public/utils/use/use_view.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { DataExplorerServices } from '../../types';
+import { useTypedDispatch, useTypedSelector } from '../state_management';
+import { setView } from '../state_management/metadata_slice';
+
+export const useView = () => {
+  const viewId = useTypedSelector((state) => state.metadata.view);
+  const {
+    services: { viewRegistry },
+  } = useOpenSearchDashboards<DataExplorerServices>();
+  const dispatch = useTypedDispatch();
+  const { appId } = useParams<{ appId: string }>();
+
+  const view = useMemo(() => {
+    if (!viewId) return undefined;
+    return viewRegistry.get(viewId);
+  }, [viewId, viewRegistry]);
+
+  useEffect(() => {
+    const currentView = viewRegistry.get(appId);
+
+    if (!currentView) return;
+
+    dispatch(setView(currentView?.id));
+  }, [appId, dispatch, viewRegistry]);
+
+  return { view, viewRegistry };
+};
diff --git a/src/plugins/data_explorer/server/index.ts b/src/plugins/data_explorer/server/index.ts
new file mode 100644
index 000000000000..84f443c971fe
--- /dev/null
+++ b/src/plugins/data_explorer/server/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PluginInitializerContext } from '../../../core/server';
+import { DataExplorerPlugin } from './plugin';
+
+// This exports static code and TypeScript types,
+// as well as, OpenSearch Dashboards Platform `plugin()` initializer.
+
+export function plugin(initializerContext: PluginInitializerContext) {
+  return new DataExplorerPlugin(initializerContext);
+}
+
+export { DataExplorerPluginSetup, DataExplorerPluginStart } from './types';
diff --git a/src/plugins/data_explorer/server/plugin.ts b/src/plugins/data_explorer/server/plugin.ts
new file mode 100644
index 000000000000..ebc501e2a66d
--- /dev/null
+++ b/src/plugins/data_explorer/server/plugin.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  PluginInitializerContext,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  Logger,
+} from '../../../core/server';
+
+import { DataExplorerPluginSetup, DataExplorerPluginStart } from './types';
+import { defineRoutes } from './routes';
+
+export class DataExplorerPlugin
+  implements Plugin<DataExplorerPluginSetup, DataExplorerPluginStart> {
+  private readonly logger: Logger;
+
+  constructor(initializerContext: PluginInitializerContext) {
+    this.logger = initializerContext.logger.get();
+  }
+
+  public setup(core: CoreSetup) {
+    this.logger.debug('dataExplorer: Setup');
+    const router = core.http.createRouter();
+
+    // Register server side APIs
+    defineRoutes(router);
+
+    return {};
+  }
+
+  public start(core: CoreStart) {
+    this.logger.debug('dataExplorer: Started');
+    return {};
+  }
+
+  public stop() {}
+}
diff --git a/src/plugins/data_explorer/server/routes/index.ts b/src/plugins/data_explorer/server/routes/index.ts
new file mode 100644
index 000000000000..a577e27d9fd7
--- /dev/null
+++ b/src/plugins/data_explorer/server/routes/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { IRouter } from '../../../../core/server';
+
+export function defineRoutes(router: IRouter) {
+  router.get(
+    {
+      path: '/api/data_explorer/example',
+      validate: false,
+    },
+    async (context, request, response) => {
+      return response.ok({
+        body: {
+          time: new Date().toISOString(),
+        },
+      });
+    }
+  );
+}
diff --git a/src/plugins/data_explorer/server/types.ts b/src/plugins/data_explorer/server/types.ts
new file mode 100644
index 000000000000..cbe17c922611
--- /dev/null
+++ b/src/plugins/data_explorer/server/types.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface DataExplorerPluginSetup {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface DataExplorerPluginStart {}
diff --git a/src/plugins/dev_tools/public/plugin.ts b/src/plugins/dev_tools/public/plugin.ts
index c23431799ead..bb0b6ee1d981 100644
--- a/src/plugins/dev_tools/public/plugin.ts
+++ b/src/plugins/dev_tools/public/plugin.ts
@@ -82,7 +82,7 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
       id: 'dev_tools',
       title: this.title,
       updater$: this.appStateUpdater,
-      icon: '/plugins/home/public/assets/logos/opensearch_mark_default.svg',
+      icon: '/ui/logos/opensearch_mark.svg',
       /* the order of dev tools, it shows as last item of management section */
       order: 9070,
       category: DEFAULT_APP_CATEGORIES.management,
diff --git a/src/plugins/discover/common/index.ts b/src/plugins/discover/common/index.ts
index 371442385bbf..0cac73333e25 100644
--- a/src/plugins/discover/common/index.ts
+++ b/src/plugins/discover/common/index.ts
@@ -1,33 +1,10 @@
 /*
+ * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Any modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-/*
- * 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 PLUGIN_ID = 'discover';
+export const NEW_DISCOVER_APP = 'discover:v2';
 export const DEFAULT_COLUMNS_SETTING = 'defaultColumns';
 export const SAMPLE_SIZE_SETTING = 'discover:sampleSize';
 export const AGGS_TERMS_SIZE_SETTING = 'discover:aggs:terms:size';
diff --git a/src/plugins/discover/opensearch_dashboards.json b/src/plugins/discover/opensearch_dashboards.json
index 23e00e7dcdcc..bcbfc2096731 100644
--- a/src/plugins/discover/opensearch_dashboards.json
+++ b/src/plugins/discover/opensearch_dashboards.json
@@ -6,6 +6,7 @@
   "requiredPlugins": [
     "charts",
     "data",
+    "dataExplorer",
     "embeddable",
     "inspector",
     "opensearchDashboardsLegacy",
@@ -16,8 +17,8 @@
   ],
   "optionalPlugins": ["home", "share"],
   "requiredBundles": [
-    "opensearchDashboardsUtils",
     "home",
+    "opensearchDashboardsUtils",
     "savedObjects",
     "opensearchDashboardsReact"
   ]
diff --git a/src/plugins/discover/public/__mock__/index_pattern_mock.ts b/src/plugins/discover/public/__mock__/index_pattern_mock.ts
new file mode 100644
index 000000000000..a8f3bcc2c9dd
--- /dev/null
+++ b/src/plugins/discover/public/__mock__/index_pattern_mock.ts
@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { indexPatterns } from '../../../data/public';
+import { IndexPattern } from '../opensearch_dashboards_services';
+import { IIndexPatternFieldList } from '../../../data/common';
+
+// Initial data of index pattern fields
+const fieldsData = [
+  {
+    name: '_id',
+    type: 'string',
+    scripted: false,
+    aggregatable: true,
+    filterable: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: '_index',
+    type: 'string',
+    scripted: false,
+    filterable: true,
+    aggregatable: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: '_source',
+    type: '_source',
+    scripted: false,
+    aggregatable: false,
+    filterable: false,
+    searchable: false,
+    sortable: false,
+  },
+];
+
+// Create a mock object for index pattern fields with methods: getAll, getByName and getByType
+export const indexPatternFieldMock = {
+  getAll: () => fieldsData,
+  getByName: (name) => fieldsData.find((field) => field.name === name),
+  getByType: (type) => fieldsData.filter((field) => field.type === type),
+} as IIndexPatternFieldList;
+
+// Create a mock for the initial index pattern
+export const indexPatternInitialMock = ({
+  id: '123',
+  title: 'test_index',
+  fields: indexPatternFieldMock,
+  timeFieldName: 'order_date',
+  formatHit: jest.fn((hit) => (hit.fields ? hit.fields : hit._source)),
+  flattenHit: undefined,
+  formatField: undefined,
+  metaFields: ['_id', '_index', '_source'],
+  getFieldByName: jest.fn(() => ({})),
+} as unknown) as IndexPattern;
+
+// Add a flattenHit method to the initial index pattern mock using flattenHitWrapper
+const flatternHitMock = indexPatterns.flattenHitWrapper(
+  indexPatternInitialMock,
+  indexPatternInitialMock.metaFields
+);
+indexPatternInitialMock.flattenHit = flatternHitMock;
+
+// Add a formatField method to the initial index pattern mock
+const formatFieldMock = (hit, field) => {
+  return field === '_source' ? hit._source : indexPatternInitialMock.flattenHit(hit)[field];
+};
+indexPatternInitialMock.formatField = formatFieldMock;
+
+// Export the fully set up index pattern mock
+export const indexPatternMock = indexPatternInitialMock;
+
+// Export a function that allows customization of index pattern mocks, by adding extra fields to the fieldsData
+export const getMockedIndexPatternWithCustomizedFields = (fields) => {
+  const customizedFieldsData = [...fieldsData, ...fields];
+  const customizedFieldsMock = {
+    getAll: () => customizedFieldsData,
+    getByName: (name) => customizedFieldsData.find((field) => field.name === name),
+    getByType: (type) => customizedFieldsData.filter((field) => field.type === type),
+  } as IIndexPatternFieldList;
+
+  return {
+    ...indexPatternMock,
+    fields: customizedFieldsMock,
+  };
+};
+
+// Export a function that allows customization of index pattern mocks with both extra fields and time field
+export const getMockedIndexPatternWithTimeField = (fields, timeFiledName: string) => {
+  const indexPatternWithTimeFieldMock = getMockedIndexPatternWithCustomizedFields(fields);
+
+  return {
+    ...indexPatternWithTimeFieldMock,
+    timeFieldName: timeFiledName,
+  };
+};
diff --git a/src/plugins/discover/public/application/angular/directives/_histogram.scss b/src/plugins/discover/public/application/components/chart/_histogram.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/_histogram.scss
rename to src/plugins/discover/public/application/components/chart/_histogram.scss
diff --git a/src/plugins/discover/public/application/components/chart/chart.tsx b/src/plugins/discover/public/application/components/chart/chart.tsx
new file mode 100644
index 000000000000..f21ce3e4ef19
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/chart.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './_histogram.scss';
+
+import React, { useCallback } from 'react';
+import moment from 'moment';
+import dateMath from '@elastic/datemath';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { IUiSettingsClient } from 'opensearch-dashboards/public';
+import { DataPublicPluginStart, search } from '../../../../../data/public';
+import { HitsCounter } from './hits_counter';
+import { TimechartHeader, TimechartHeaderBucketInterval } from './timechart_header';
+import { DiscoverHistogram } from './histogram/histogram';
+import { DiscoverServices } from '../../../build_services';
+import { Chart } from './utils';
+import { useDiscoverContext } from '../../view_components/context';
+import { setInterval, useDispatch, useSelector } from '../../utils/state_management';
+
+interface DiscoverChartProps {
+  bucketInterval?: TimechartHeaderBucketInterval;
+  chartData?: Chart;
+  config: IUiSettingsClient;
+  data: DataPublicPluginStart;
+  hits: number;
+  resetQuery: () => void;
+  showResetButton?: boolean;
+  isTimeBased?: boolean;
+  services: DiscoverServices;
+}
+
+export const DiscoverChart = ({
+  bucketInterval,
+  chartData,
+  config,
+  data,
+  hits,
+  resetQuery,
+  isTimeBased,
+  services,
+  showResetButton = false,
+}: DiscoverChartProps) => {
+  const { refetch$ } = useDiscoverContext();
+  const { from, to } = data.query.timefilter.timefilter.getTime();
+  const timeRange = {
+    from: dateMath.parse(from)?.format('YYYY-MM-DDTHH:mm:ss.SSSZ') || '',
+    to: dateMath.parse(to, { roundUp: true })?.format('YYYY-MM-DDTHH:mm:ss.SSSZ') || '',
+  };
+  const { interval } = useSelector((state) => state.discover);
+  const dispatch = useDispatch();
+  const onChangeInterval = (newInterval: string) => {
+    dispatch(setInterval(newInterval));
+    refetch$.next();
+  };
+  const timefilterUpdateHandler = useCallback(
+    (ranges: { from: number; to: number }) => {
+      data.query.timefilter.timefilter.setTime({
+        from: moment(ranges.from).toISOString(),
+        to: moment(ranges.to).toISOString(),
+        mode: 'absolute',
+      });
+    },
+    [data]
+  );
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlexItem grow={false} className="dscChart__hitsCounter">
+        <HitsCounter
+          hits={hits > 0 ? hits : 0}
+          showResetButton={showResetButton}
+          onResetQuery={resetQuery}
+        />
+      </EuiFlexItem>
+      {isTimeBased && (
+        <EuiFlexItem className="dscChart__TimechartHeader">
+          <TimechartHeader
+            bucketInterval={bucketInterval}
+            dateFormat={config.get('dateFormat')}
+            timeRange={timeRange}
+            options={search.aggs.intervalOptions}
+            onChangeInterval={onChangeInterval}
+            stateInterval={interval || ''}
+          />
+        </EuiFlexItem>
+      )}
+      {isTimeBased && chartData && (
+        <EuiFlexItem grow={false}>
+          <section
+            aria-label={i18n.translate('discover.histogramOfFoundDocumentsAriaLabel', {
+              defaultMessage: 'Histogram of found documents',
+            })}
+            className="dscTimechart"
+          >
+            <div className="dscHistogram" data-test-subj="discoverChart">
+              <DiscoverHistogram
+                chartData={chartData}
+                timefilterUpdateHandler={timefilterUpdateHandler}
+                services={services}
+              />
+            </div>
+          </section>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx b/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx
new file mode 100644
index 000000000000..51d3f1f1b706
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx
@@ -0,0 +1,360 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
+import moment from 'moment-timezone';
+import { unitOfTime } from 'moment';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { euiThemeVars } from '@osd/ui-shared-deps/theme';
+
+import {
+  AnnotationDomainType,
+  Axis,
+  Chart,
+  HistogramBarSeries,
+  LineAnnotation,
+  Position,
+  ScaleType,
+  Settings,
+  RectAnnotation,
+  TooltipValue,
+  TooltipType,
+  ElementClickListener,
+  XYChartElementEvent,
+  BrushEndListener,
+  Theme,
+} from '@elastic/charts';
+
+import { i18n } from '@osd/i18n';
+import { IUiSettingsClient } from 'opensearch-dashboards/public';
+import { EuiChartThemeType } from '@elastic/eui/dist/eui_charts_theme';
+import { Subscription, combineLatest } from 'rxjs';
+import { Chart as IChart } from '../utils/point_series';
+import { DiscoverServices } from '../../../../build_services';
+
+export interface DiscoverHistogramProps {
+  chartData: IChart;
+  timefilterUpdateHandler: (ranges: { from: number; to: number }) => void;
+  services: DiscoverServices;
+}
+
+interface DiscoverHistogramState {
+  chartsTheme: EuiChartThemeType['theme'];
+  chartsBaseTheme: Theme;
+}
+
+function findIntervalFromDuration(
+  dateValue: number,
+  opensearchValue: number,
+  opensearchUnit: unitOfTime.Base,
+  timeZone: string
+) {
+  const date = moment.tz(dateValue, timeZone);
+  const startOfDate = moment.tz(date, timeZone).startOf(opensearchUnit);
+  const endOfDate = moment
+    .tz(date, timeZone)
+    .startOf(opensearchUnit)
+    .add(opensearchValue, opensearchUnit);
+  return endOfDate.valueOf() - startOfDate.valueOf();
+}
+
+function getIntervalInMs(
+  value: number,
+  opensearchValue: number,
+  opensearchUnit: unitOfTime.Base,
+  timeZone: string
+): number {
+  switch (opensearchUnit) {
+    case 's':
+      return 1000 * opensearchValue;
+    case 'ms':
+      return 1 * opensearchValue;
+    default:
+      return findIntervalFromDuration(value, opensearchValue, opensearchUnit, timeZone);
+  }
+}
+
+function getTimezone(uiSettings: IUiSettingsClient) {
+  if (uiSettings.isDefault('dateFormat:tz')) {
+    const detectedTimezone = moment.tz.guess();
+    if (detectedTimezone) return detectedTimezone;
+    else return moment().format('Z');
+  } else {
+    return uiSettings.get('dateFormat:tz', 'Browser');
+  }
+}
+
+export function findMinInterval(
+  xValues: number[],
+  opensearchValue: number,
+  opensearchUnit: string,
+  timeZone: string
+): number {
+  return xValues.reduce((minInterval, currentXvalue, index) => {
+    let currentDiff = minInterval;
+    if (index > 0) {
+      currentDiff = Math.abs(xValues[index - 1] - currentXvalue);
+    }
+    const singleUnitInterval = getIntervalInMs(
+      currentXvalue,
+      opensearchValue,
+      opensearchUnit as unitOfTime.Base,
+      timeZone
+    );
+    return Math.min(minInterval, singleUnitInterval, currentDiff);
+  }, Number.MAX_SAFE_INTEGER);
+}
+
+export class DiscoverHistogram extends Component<DiscoverHistogramProps, DiscoverHistogramState> {
+  public static propTypes = {
+    chartData: PropTypes.object,
+    timefilterUpdateHandler: PropTypes.func,
+  };
+
+  private subscription?: Subscription;
+
+  componentDidMount() {
+    this.subscription = combineLatest(
+      this.props.services.theme.chartsTheme$,
+      this.props.services.theme.chartsBaseTheme$
+    ).subscribe(([chartsTheme, chartsBaseTheme]) =>
+      this.setState({ chartsTheme, chartsBaseTheme })
+    );
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  public onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [from, to] = x;
+    this.props.timefilterUpdateHandler({ from, to });
+  };
+
+  public onElementClick = (xInterval: number): ElementClickListener => ([elementData]) => {
+    const startRange = (elementData as XYChartElementEvent)[0].x;
+
+    const range = {
+      from: startRange,
+      to: startRange + xInterval,
+    };
+
+    this.props.timefilterUpdateHandler(range);
+  };
+
+  public formatXValue = (val: string) => {
+    const xAxisFormat = this.props.chartData.xAxisFormat.params!.pattern;
+
+    return moment(val).format(xAxisFormat);
+  };
+
+  public renderBarTooltip = (xInterval: number, domainStart: number, domainEnd: number) => (
+    headerData: TooltipValue
+  ): JSX.Element | string => {
+    const headerDataValue = headerData.value;
+    const formattedValue = this.formatXValue(headerDataValue);
+
+    const partialDataText = i18n.translate('discover.histogram.partialData.bucketTooltipText', {
+      defaultMessage:
+        'The selected time range does not include this entire bucket, it may contain partial data.',
+    });
+
+    if (headerDataValue < domainStart || headerDataValue + xInterval > domainEnd) {
+      return (
+        <React.Fragment>
+          <EuiFlexGroup
+            alignItems="center"
+            className="dscHistogram__header--partial"
+            responsive={false}
+            gutterSize="xs"
+          >
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="iInCircle" />
+            </EuiFlexItem>
+            <EuiFlexItem>{partialDataText}</EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="xs" />
+          <p>{formattedValue}</p>
+        </React.Fragment>
+      );
+    }
+
+    return formattedValue;
+  };
+
+  public render() {
+    const { chartData, services } = this.props;
+    const { uiSettings } = services;
+    const timeZone = getTimezone(uiSettings);
+    const chartsTheme = services.theme.chartsDefaultTheme;
+    const chartsBaseTheme = services.theme.chartsDefaultBaseTheme;
+
+    if (!chartData) {
+      return null;
+    }
+
+    const data = chartData.values;
+
+    /**
+     * Deprecation: [interval] on [date_histogram] is deprecated, use [fixed_interval] or [calendar_interval].
+     * see https://github.com/elastic/kibana/issues/27410
+     * TODO: Once the Discover query has been update, we should change the below to use the new field
+     */
+    const { intervalOpenSearchValue, intervalOpenSearchUnit, interval } = chartData.ordered;
+    const xInterval = interval.asMilliseconds();
+
+    const xValues = chartData.xAxisOrderedValues;
+    const lastXValue = xValues[xValues.length - 1];
+
+    const domain = chartData.ordered;
+    const domainStart = domain.min.valueOf();
+    const domainEnd = domain.max.valueOf();
+
+    const domainMin = data[0]?.x > domainStart ? domainStart : data[0]?.x;
+    const domainMax = domainEnd - xInterval > lastXValue ? domainEnd - xInterval : lastXValue;
+
+    const xDomain = {
+      min: domainMin,
+      max: domainMax,
+      minInterval: findMinInterval(
+        xValues,
+        intervalOpenSearchValue,
+        intervalOpenSearchUnit,
+        timeZone
+      ),
+    };
+
+    // Domain end of 'now' will be milliseconds behind current time, so we extend time by 1 minute and check if
+    // the annotation is within this range; if so, the line annotation uses the domainEnd as its value
+    const now = moment();
+    const isAnnotationAtEdge = moment(domainEnd).add(60000).isAfter(now) && now.isAfter(domainEnd);
+    const lineAnnotationValue = isAnnotationAtEdge ? domainEnd : now;
+
+    const lineAnnotationData = [
+      {
+        dataValue: lineAnnotationValue,
+      },
+    ];
+    const isDarkMode = uiSettings.get('theme:darkMode');
+
+    const lineAnnotationStyle = {
+      line: {
+        strokeWidth: 2,
+        stroke: euiThemeVars.euiColorDanger,
+        opacity: 0.7,
+      },
+    };
+
+    const rectAnnotations = [];
+    if (domainStart !== domainMin) {
+      rectAnnotations.push({
+        coordinates: {
+          x1: domainStart,
+        },
+      });
+    }
+    if (domainEnd !== domainMax) {
+      rectAnnotations.push({
+        coordinates: {
+          x0: domainEnd,
+        },
+      });
+    }
+
+    const rectAnnotationStyle = {
+      stroke: isDarkMode ? euiThemeVars.euiColorLightShade : euiThemeVars.euiColorDarkShade,
+      strokeWidth: 0,
+      opacity: isDarkMode ? 0.6 : 0.2,
+      fill: isDarkMode ? euiThemeVars.euiColorLightShade : euiThemeVars.euiColorDarkShade,
+    };
+
+    const tooltipProps = {
+      headerFormatter: this.renderBarTooltip(xInterval, domainStart, domainEnd),
+      type: TooltipType.VerticalCursor,
+    };
+
+    return (
+      <Chart size="100%">
+        <Settings
+          xDomain={xDomain}
+          onBrushEnd={this.onBrushEnd}
+          onElementClick={this.onElementClick(xInterval)}
+          tooltip={tooltipProps}
+          theme={chartsTheme}
+          baseTheme={chartsBaseTheme}
+        />
+        <Axis
+          id="discover-histogram-left-axis"
+          position={Position.Left}
+          ticks={5}
+          title={chartData.yAxisLabel}
+        />
+        <Axis
+          id="discover-histogram-bottom-axis"
+          position={Position.Bottom}
+          title={chartData.xAxisLabel}
+          tickFormat={this.formatXValue}
+          ticks={10}
+        />
+        <LineAnnotation
+          id="line-annotation"
+          domainType={AnnotationDomainType.XDomain}
+          dataValues={lineAnnotationData}
+          hideTooltips={true}
+          style={lineAnnotationStyle}
+        />
+        <RectAnnotation
+          dataValues={rectAnnotations}
+          id="rect-annotation"
+          zIndex={2}
+          style={rectAnnotationStyle}
+          hideTooltips={true}
+        />
+        <HistogramBarSeries
+          id="discover-histogram"
+          minBarHeight={2}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          data={data}
+          timeZone={timeZone}
+          name={chartData.yAxisLabel}
+        />
+      </Chart>
+    );
+  }
+}
diff --git a/src/plugins/discover/public/application/components/chart/histogram/type.ts b/src/plugins/discover/public/application/components/chart/histogram/type.ts
new file mode 100644
index 000000000000..64c5a1124731
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/histogram/type.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface Chart {
+  values: Array<{
+    x: number;
+    y: number;
+  }>;
+  xAxisOrderedValues: number[];
+  xAxisFormat: Dimension['format'];
+  xAxisLabel: Column['name'];
+  yAxisLabel?: Column['name'];
+  ordered: Ordered;
+}
diff --git a/src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx b/src/plugins/discover/public/application/components/chart/hits_counter/hits_counter.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx
rename to src/plugins/discover/public/application/components/chart/hits_counter/hits_counter.test.tsx
diff --git a/src/plugins/discover/public/application/components/chart/hits_counter/hits_counter.tsx b/src/plugins/discover/public/application/components/chart/hits_counter/hits_counter.tsx
new file mode 100644
index 000000000000..fede3e04ecd4
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/hits_counter/hits_counter.tsx
@@ -0,0 +1,95 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { formatNumWithCommas } from '../../../helpers';
+
+export interface HitsCounterProps {
+  /**
+   * the number of query hits
+   */
+  hits: number;
+  /**
+   * displays the reset button
+   */
+  showResetButton: boolean;
+  /**
+   * resets the query
+   */
+  onResetQuery: () => void;
+}
+
+export function HitsCounter({ hits, showResetButton, onResetQuery }: HitsCounterProps) {
+  return (
+    <I18nProvider>
+      <EuiFlexGroup
+        gutterSize="s"
+        className="dscResultCount"
+        responsive={false}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            <strong data-test-subj="discoverQueryHits">{formatNumWithCommas(hits)}</strong>{' '}
+            <FormattedMessage
+              id="discover.hitsPluralTitle"
+              defaultMessage="{hits, plural, one {hit} other {hits}}"
+              values={{
+                hits,
+              }}
+            />
+          </EuiText>
+        </EuiFlexItem>
+        {showResetButton && (
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              iconType="refresh"
+              data-test-subj="resetSavedSearch"
+              onClick={onResetQuery}
+              size="s"
+              aria-label={i18n.translate('discover.reloadSavedSearchButton', {
+                defaultMessage: 'Reset search',
+              })}
+            >
+              <FormattedMessage
+                id="discover.reloadSavedSearchButton"
+                defaultMessage="Reset search"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </I18nProvider>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/hits_counter/index.ts b/src/plugins/discover/public/application/components/chart/hits_counter/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/components/hits_counter/index.ts
rename to src/plugins/discover/public/application/components/chart/hits_counter/index.ts
diff --git a/src/plugins/discover/public/application/components/chart/timechart_header/index.ts b/src/plugins/discover/public/application/components/chart/timechart_header/index.ts
new file mode 100644
index 000000000000..34763a05f8e0
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/timechart_header/index.ts
@@ -0,0 +1,31 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 * from './timechart_header';
diff --git a/src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx b/src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx
rename to src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.test.tsx
diff --git a/src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.tsx b/src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.tsx
new file mode 100644
index 000000000000..a79876ccb455
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/timechart_header/timechart_header.tsx
@@ -0,0 +1,189 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React, { useState, useEffect, useCallback } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+  EuiText,
+  EuiSelect,
+  EuiIconTip,
+} from '@elastic/eui';
+import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import moment from 'moment';
+
+export interface TimechartHeaderBucketInterval {
+  scaled?: boolean;
+  description?: string;
+  scale?: number;
+}
+
+export interface TimechartHeaderProps {
+  /**
+   * Format of date to be displayed
+   */
+  dateFormat?: string;
+  /**
+   * Interval for the buckets of the recent request
+   */
+  bucketInterval?: {
+    scaled?: boolean;
+    description?: string;
+    scale?: number;
+  };
+  /**
+   * Range of dates to be displayed
+   */
+  timeRange?: {
+    from: string;
+    to: string;
+  };
+  /**
+   * Interval Options
+   */
+  options: Array<{ display: string; val: string }>;
+  /**
+   * changes the interval
+   */
+  onChangeInterval: (interval: string) => void;
+  /**
+   * selected interval
+   */
+  stateInterval: string;
+}
+
+export function TimechartHeader({
+  bucketInterval,
+  dateFormat,
+  timeRange,
+  options,
+  onChangeInterval,
+  stateInterval,
+}: TimechartHeaderProps) {
+  const [interval, setInterval] = useState(stateInterval);
+  const toMoment = useCallback(
+    (datetime: string) => {
+      if (!datetime) {
+        return '';
+      }
+      if (!dateFormat) {
+        return datetime;
+      }
+      return moment(datetime).format(dateFormat);
+    },
+    [dateFormat]
+  );
+
+  useEffect(() => {
+    setInterval(stateInterval);
+  }, [stateInterval]);
+
+  const handleIntervalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setInterval(e.target.value);
+    onChangeInterval(e.target.value);
+  };
+
+  if (!timeRange || !bucketInterval) {
+    return null;
+  }
+
+  return (
+    <I18nProvider>
+      <EuiFlexGroup gutterSize="s" responsive justifyContent="center" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiToolTip
+            content={i18n.translate('discover.howToChangeTheTimeTooltip', {
+              defaultMessage: 'To change the time, use the global time filter above',
+            })}
+            delay="long"
+          >
+            <EuiText data-test-subj="discoverIntervalDateRange" size="s">
+              {`${toMoment(timeRange.from)} - ${toMoment(timeRange.to)} ${
+                interval !== 'auto'
+                  ? i18n.translate('discover.timechartHeader.timeIntervalSelect.per', {
+                      defaultMessage: 'per',
+                    })
+                  : ''
+              }`}
+            </EuiText>
+          </EuiToolTip>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiSelect
+            aria-label={i18n.translate('discover.timechartHeader.timeIntervalSelect.ariaLabel', {
+              defaultMessage: 'Time interval',
+            })}
+            compressed
+            id="dscResultsIntervalSelector"
+            data-test-subj="discoverIntervalSelect"
+            options={options
+              .filter(({ val }) => val !== 'custom')
+              .map(({ display, val }) => {
+                return {
+                  text: display,
+                  value: val,
+                  label: display,
+                };
+              })}
+            value={interval}
+            onChange={handleIntervalChange}
+            append={
+              bucketInterval.scaled ? (
+                <EuiIconTip
+                  id="discoverIntervalIconTip"
+                  content={i18n.translate('discover.bucketIntervalTooltip', {
+                    defaultMessage:
+                      'This interval creates {bucketsDescription} to show in the selected time range, so it has been scaled to {bucketIntervalDescription}.',
+                    values: {
+                      bucketsDescription:
+                        bucketInterval!.scale && bucketInterval!.scale > 1
+                          ? i18n.translate('discover.bucketIntervalTooltip.tooLargeBucketsText', {
+                              defaultMessage: 'buckets that are too large',
+                            })
+                          : i18n.translate('discover.bucketIntervalTooltip.tooManyBucketsText', {
+                              defaultMessage: 'too many buckets',
+                            }),
+                      bucketIntervalDescription: bucketInterval.description,
+                    },
+                  })}
+                  color="warning"
+                  size="s"
+                  type="alert"
+                />
+              ) : undefined
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </I18nProvider>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/chart/utils/create_histogram_configs.ts b/src/plugins/discover/public/application/components/chart/utils/create_histogram_configs.ts
new file mode 100644
index 000000000000..8e659e73f9d7
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/utils/create_histogram_configs.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DataPublicPluginStart, IndexPattern } from '../../../../../../data/public';
+
+export function createHistogramConfigs(
+  indexPattern: IndexPattern,
+  histogramInterval: string,
+  data: DataPublicPluginStart
+) {
+  const visStateAggs = [
+    {
+      type: 'count',
+      schema: 'metric',
+    },
+    {
+      type: 'date_histogram',
+      schema: 'segment',
+      params: {
+        field: indexPattern.timeFieldName!,
+        interval: histogramInterval,
+        timeRange: data.query.timefilter.timefilter.getTime(),
+      },
+    },
+  ];
+  return data.search.aggs.createAggConfigs(indexPattern, visStateAggs);
+}
diff --git a/src/plugins/discover/public/application/components/chart/utils/get_dimension.test.ts b/src/plugins/discover/public/application/components/chart/utils/get_dimension.test.ts
new file mode 100644
index 000000000000..a4f1c889a9ba
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/utils/get_dimension.test.ts
@@ -0,0 +1,74 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getDimensions } from './get_dimensions';
+import moment from 'moment';
+import dateMath from '@elastic/datemath';
+import { search } from '../../../../../../data/public';
+import { dataPluginMock } from '../../../../../../data/public/mocks';
+import {
+  calculateBounds,
+  IBucketDateHistogramAggConfig,
+  IAggConfigs,
+} from '../../../../../../data/common';
+
+describe('getDimensions', () => {
+  it('should return dimensions when buckets and bounds are defined', () => {
+    const dataMock = dataPluginMock.createStartContract();
+    dataMock.query.timefilter.timefilter.getTime = () => {
+      return { from: '2021-01-01T00:00:00.000Z', to: '2021-01-31T00:00:00.000Z' };
+    };
+    dataMock.query.timefilter.timefilter.calculateBounds = (timeRange) => {
+      return calculateBounds(timeRange);
+    };
+
+    const metric = {
+      toSerializedFieldFormat: jest.fn(() => 'metric-format'),
+      makeLabel: jest.fn(() => 'metric-label'),
+    };
+    const agg = {
+      params: { timeRange: null },
+      buckets: {
+        getInterval: jest.fn(() => ({ opensearchUnit: 'day', opensearchValue: 1 })),
+        getScaledDateFormat: jest.fn(() => 'scaled-date-format'),
+        getBounds: jest.fn(() => 'bounds'),
+      },
+      makeLabel: jest.fn(() => 'agg-label'),
+      toSerializedFieldFormat: jest.fn(() => 'agg-format'),
+    };
+    const aggs: IAggConfigs = {
+      aggs: [metric, agg],
+    };
+
+    // Mocking external dependencies
+    dateMath.parse = jest.fn((date, options) => moment(date));
+    search.aggs.isDateHistogramBucketAggConfig = jest.fn(
+      (bucketAgg: any): bucketAgg is IBucketDateHistogramAggConfig => true
+    );
+
+    const result = getDimensions(aggs, dataMock);
+
+    expect(result).toEqual({
+      x: {
+        accessor: 0,
+        label: 'agg-label',
+        format: 'agg-format',
+        params: {
+          date: true,
+          interval: moment.duration(1, 'day'),
+          intervalOpenSearchValue: 1,
+          intervalOpenSearchUnit: 'day',
+          format: 'scaled-date-format',
+          bounds: 'bounds',
+        },
+      },
+      y: {
+        accessor: 1,
+        format: 'metric-format',
+        label: 'metric-label',
+      },
+    });
+  });
+});
diff --git a/src/plugins/discover/public/application/components/chart/utils/get_dimensions.ts b/src/plugins/discover/public/application/components/chart/utils/get_dimensions.ts
new file mode 100644
index 000000000000..a1292e8aefa6
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/utils/get_dimensions.ts
@@ -0,0 +1,73 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 moment from 'moment';
+import dateMath from '@elastic/datemath';
+import { IAggConfigs } from '../../../../../../data/common';
+import { search } from '../../../../../../data/public';
+
+export function getDimensions(aggs: IAggConfigs, data: any) {
+  const [metric, agg] = aggs.aggs;
+  const { from, to } = data.query.timefilter.timefilter.getTime();
+  agg.params.timeRange = {
+    from: dateMath.parse(from),
+    to: dateMath.parse(to, { roundUp: true }),
+  };
+  const bounds = agg.params.timeRange
+    ? data.query.timefilter.timefilter.calculateBounds(agg.params.timeRange)
+    : null;
+  const buckets = search.aggs.isDateHistogramBucketAggConfig(agg) ? agg.buckets : undefined;
+
+  if (!buckets || !bounds) {
+    return;
+  }
+
+  const { opensearchUnit, opensearchValue } = buckets.getInterval();
+  return {
+    x: {
+      accessor: 0,
+      label: agg.makeLabel(),
+      format: agg.toSerializedFieldFormat(),
+      params: {
+        date: true,
+        interval: moment.duration(opensearchValue, opensearchUnit),
+        intervalOpenSearchValue: opensearchValue,
+        intervalOpenSearchUnit: opensearchUnit,
+        format: buckets.getScaledDateFormat(),
+        bounds: buckets.getBounds(),
+      },
+    },
+    y: {
+      accessor: 1,
+      format: metric.toSerializedFieldFormat(),
+      label: metric.makeLabel(),
+    },
+  };
+}
diff --git a/src/plugins/discover/public/application/components/chart/utils/index.ts b/src/plugins/discover/public/application/components/chart/utils/index.ts
new file mode 100644
index 000000000000..36aa4015782e
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/utils/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './create_histogram_configs';
+export * from './point_series';
+export * from './get_dimensions';
diff --git a/src/plugins/discover/public/application/components/chart/utils/point_series.test.ts b/src/plugins/discover/public/application/components/chart/utils/point_series.test.ts
new file mode 100644
index 000000000000..b7a8ab2bfd43
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/utils/point_series.test.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { buildPointSeriesData, Dimensions, Table } from './point_series';
+import moment from 'moment';
+
+describe('buildPointSeriesData', () => {
+  it('should build the chart data from the table and dimensions', () => {
+    const table: Table = {
+      columns: [
+        { id: 'x', name: 'X Axis' },
+        { id: 'y', name: 'Y Axis' },
+      ],
+      rows: [
+        { x: 10, y: 100 },
+        { x: 20, y: 200 },
+        { x: 10, y: 'NaN' }, // This row should be ignored
+      ],
+    };
+
+    const dimensions: Dimensions = {
+      x: {
+        accessor: 0,
+        format: { id: 'number', params: { pattern: 'number' } },
+        params: {
+          date: true,
+          interval: moment.duration(1, 'hour'),
+          intervalOpenSearchValue: 1,
+          intervalOpenSearchUnit: 'h',
+          format: 'number',
+          bounds: {
+            min: moment('2023-01-01T00:00:00Z'),
+            max: moment('2023-01-02T00:00:00Z'),
+          },
+        },
+      },
+      y: {
+        accessor: 1,
+        format: { id: 'number', params: { pattern: 'number' } },
+      },
+    };
+
+    const result = buildPointSeriesData(table, dimensions);
+
+    expect(result.xAxisOrderedValues).toEqual([10, 20]);
+    expect(result.xAxisFormat).toEqual(dimensions.x.format);
+    expect(result.xAxisLabel).toEqual('X Axis');
+    expect(result.ordered.date).toBe(true);
+    expect(result.ordered.interval.asHours()).toBe(1);
+    expect(result.ordered.intervalOpenSearchUnit).toBe('h');
+    expect(result.ordered.intervalOpenSearchValue).toBe(1);
+    expect(result.ordered.min.format()).toBe('2023-01-01T00:00:00+00:00');
+    expect(result.ordered.max.format()).toBe('2023-01-02T00:00:00+00:00');
+    expect(result.yAxisLabel).toEqual('Y Axis');
+    expect(result.values).toEqual([
+      { x: 10, y: 100 },
+      { x: 20, y: 200 },
+    ]);
+  });
+});
diff --git a/src/plugins/discover/public/application/components/chart/utils/point_series.ts b/src/plugins/discover/public/application/components/chart/utils/point_series.ts
new file mode 100644
index 000000000000..4c3e3e9ada53
--- /dev/null
+++ b/src/plugins/discover/public/application/components/chart/utils/point_series.ts
@@ -0,0 +1,122 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { uniq } from 'lodash';
+import { Duration, Moment } from 'moment';
+import { Unit } from '@elastic/datemath';
+
+import { SerializedFieldFormat } from '../../../../../../expressions/common/types';
+
+export interface Column {
+  id: string;
+  name: string;
+}
+
+export interface Row {
+  [key: string]: number | 'NaN';
+}
+
+export interface Table {
+  columns: Column[];
+  rows: Row[];
+}
+
+interface HistogramParams {
+  date: true;
+  interval: Duration;
+  intervalOpenSearchValue: number;
+  intervalOpenSearchUnit: Unit;
+  format: string;
+  bounds: {
+    min: Moment;
+    max: Moment;
+  };
+}
+export interface Dimension {
+  accessor: 0 | 1;
+  format: SerializedFieldFormat<{ pattern: string }>;
+}
+
+export interface Dimensions {
+  x: Dimension & { params: HistogramParams };
+  y: Dimension;
+}
+
+interface Ordered {
+  date: true;
+  interval: Duration;
+  intervalOpenSearchUnit: string;
+  intervalOpenSearchValue: number;
+  min: Moment;
+  max: Moment;
+}
+export interface Chart {
+  values: Array<{
+    x: number;
+    y: number;
+  }>;
+  xAxisOrderedValues: number[];
+  xAxisFormat: Dimension['format'];
+  xAxisLabel: Column['name'];
+  yAxisLabel?: Column['name'];
+  ordered: Ordered;
+}
+
+export const buildPointSeriesData = (table: Table, dimensions: Dimensions) => {
+  const { x, y } = dimensions;
+  const xAccessor = table.columns[x.accessor].id;
+  const yAccessor = table.columns[y.accessor].id;
+  const chart = {} as Chart;
+
+  chart.xAxisOrderedValues = uniq(table.rows.map((r) => r[xAccessor] as number));
+  chart.xAxisFormat = x.format;
+  chart.xAxisLabel = table.columns[x.accessor].name;
+
+  const { intervalOpenSearchUnit, intervalOpenSearchValue, interval, bounds } = x.params;
+  chart.ordered = {
+    date: true,
+    interval,
+    intervalOpenSearchUnit,
+    intervalOpenSearchValue,
+    min: bounds.min,
+    max: bounds.max,
+  };
+
+  chart.yAxisLabel = table.columns[y.accessor].name;
+
+  chart.values = table.rows
+    .filter((row) => row && row[yAccessor] !== 'NaN')
+    .map((row) => ({
+      x: row[xAccessor] as number,
+      y: row[yAccessor] as number,
+    }));
+
+  return chart;
+};
diff --git a/src/plugins/discover/public/application/components/data_grid/constants.ts b/src/plugins/discover/public/application/components/data_grid/constants.ts
new file mode 100644
index 000000000000..be96468a3a09
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/constants.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const toolbarVisibility = {
+  showColumnSelector: {
+    allowHide: false,
+    allowReorder: true,
+  },
+  showStyleSelector: false,
+  showFullScreenSelector: false,
+};
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
new file mode 100644
index 000000000000..596e0b97ae07
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
@@ -0,0 +1,189 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { fetchTableDataCell } from './data_grid_table_cell_value';
+import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
+import { DocViewInspectButton } from './data_grid_table_docview_inspect_button';
+import { DataGridFlyout } from './data_grid_table_flyout';
+import { DiscoverGridContextProvider } from './data_grid_table_context';
+import { toolbarVisibility } from './constants';
+import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+import { DiscoverServices } from '../../../build_services';
+import { usePagination } from '../utils/use_pagination';
+import { SortOrder } from '../../../saved_searches/types';
+import { buildColumns } from '../../utils/columns';
+
+export interface DataGridTableProps {
+  columns: string[];
+  indexPattern: IndexPattern;
+  onAddColumn: (column: string) => void;
+  onFilter: DocViewFilterFn;
+  onRemoveColumn: (column: string) => void;
+  onSort: (sort: SortOrder[]) => void;
+  rows: OpenSearchSearchHit[];
+  onSetColumns: (columns: string[]) => void;
+  sort: SortOrder[];
+  displayTimeColumn: boolean;
+  services: DiscoverServices;
+  isToolbarVisible?: boolean;
+  isContextView?: boolean;
+}
+
+export const DataGridTable = ({
+  columns,
+  indexPattern,
+  onAddColumn,
+  onFilter,
+  onRemoveColumn,
+  onSetColumns,
+  onSort,
+  sort,
+  rows,
+  displayTimeColumn,
+  isToolbarVisible = true,
+  isContextView = false,
+}: DataGridTableProps) => {
+  const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
+  const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
+  const pagination = usePagination(rowCount);
+
+  let adjustedColumns = buildColumns(columns);
+  // handle case where the user removes selected filed and leaves only time column
+  if (
+    adjustedColumns.length === 1 &&
+    indexPattern &&
+    adjustedColumns[0] === indexPattern.timeFieldName
+  ) {
+    adjustedColumns = [...adjustedColumns, '_source'];
+  }
+
+  const includeSourceInColumns = adjustedColumns.includes('_source');
+  const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]);
+  const rowHeightsOptions = useMemo(
+    () => ({
+      defaultHeight: {
+        lineCount: adjustedColumns.includes('_source') ? 3 : 1,
+      },
+    }),
+    [adjustedColumns]
+  );
+
+  const onColumnSort = useCallback(
+    (cols: EuiDataGridSorting['columns']) => {
+      onSort(cols.map(({ id, direction }) => [id, direction]));
+    },
+    [onSort]
+  );
+
+  const renderCellValue = useMemo(() => fetchTableDataCell(indexPattern, rows), [
+    indexPattern,
+    rows,
+  ]);
+
+  const dataGridTableColumns = useMemo(
+    () =>
+      buildDataGridColumns(
+        adjustedColumns,
+        indexPattern,
+        displayTimeColumn,
+        includeSourceInColumns,
+        isContextView
+      ),
+    [adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView]
+  );
+
+  const dataGridTableColumnsVisibility = useMemo(
+    () => ({
+      visibleColumns: computeVisibleColumns(
+        adjustedColumns,
+        indexPattern,
+        displayTimeColumn
+      ) as string[],
+      setVisibleColumns: (cols: string[]) => {
+        onSetColumns(cols);
+      },
+    }),
+    [adjustedColumns, indexPattern, displayTimeColumn, onSetColumns]
+  );
+
+  const sorting: EuiDataGridSorting = useMemo(
+    () => ({ columns: sortingColumns, onSort: onColumnSort }),
+    [sortingColumns, onColumnSort]
+  );
+
+  const leadingControlColumns = useMemo(() => {
+    return [
+      {
+        id: 'inspectCollapseColumn',
+        headerCellRender: () => null,
+        rowCellRender: DocViewInspectButton,
+        width: 40,
+      },
+    ];
+  }, []);
+
+  const table = useMemo(
+    () => (
+      <EuiDataGrid
+        aria-labelledby="aria-labelledby"
+        columns={dataGridTableColumns}
+        columnVisibility={dataGridTableColumnsVisibility}
+        leadingControlColumns={leadingControlColumns}
+        data-test-subj="docTable"
+        pagination={pagination}
+        renderCellValue={renderCellValue}
+        rowCount={rowCount}
+        sorting={sorting}
+        toolbarVisibility={isToolbarVisible ? toolbarVisibility : false}
+        rowHeightsOptions={rowHeightsOptions}
+      />
+    ),
+    [
+      dataGridTableColumns,
+      dataGridTableColumnsVisibility,
+      leadingControlColumns,
+      pagination,
+      renderCellValue,
+      rowCount,
+      sorting,
+      isToolbarVisible,
+      rowHeightsOptions,
+    ]
+  );
+
+  return (
+    <DiscoverGridContextProvider
+      value={{
+        inspectedHit,
+        onFilter,
+        setInspectedHit,
+        rows: rows || [],
+        indexPattern,
+      }}
+    >
+      <>
+        <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
+          <EuiPanel paddingSize="s" style={{ height: '100%' }}>
+            {table}
+          </EuiPanel>
+        </EuiPanel>
+        {inspectedHit && (
+          <DataGridFlyout
+            indexPattern={indexPattern}
+            hit={inspectedHit}
+            columns={adjustedColumns}
+            onRemoveColumn={onRemoveColumn}
+            onAddColumn={onAddColumn}
+            onFilter={onFilter}
+            onClose={() => setInspectedHit(undefined)}
+          />
+        )}
+      </>
+    </DiscoverGridContextProvider>
+  );
+};
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_actions.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_actions.tsx
new file mode 100644
index 000000000000..3d81ba1afb33
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_actions.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiDataGridColumnCellActionProps } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { IndexPatternField } from '../../../../../data/common';
+import { useDataGridContext } from './data_grid_table_context';
+
+export function getCellActions(field: IndexPatternField) {
+  const cellActions = field.filterable
+    ? [
+        ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
+          const { indexPattern, rows, onFilter } = useDataGridContext();
+
+          const filterForValueText = i18n.translate('discover.filterForValue', {
+            defaultMessage: 'Filter for value',
+          });
+          const filterForValueLabel = i18n.translate('discover.filterForValueLabel', {
+            defaultMessage: 'Filter for value: {value}',
+            values: { value: columnId },
+          });
+
+          return (
+            <Component
+              onClick={() => {
+                const row = rows[rowIndex];
+                const flattened = indexPattern.flattenHit(row);
+
+                if (flattened) {
+                  onFilter(columnId, flattened[columnId], '+');
+                }
+              }}
+              iconType="plusInCircle"
+              aria-label={filterForValueLabel}
+              data-test-subj="filterForValue"
+            >
+              {filterForValueText}
+            </Component>
+          );
+        },
+        ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
+          const { indexPattern, rows, onFilter } = useDataGridContext();
+
+          const filterOutValueText = i18n.translate('discover.filterOutValue', {
+            defaultMessage: 'Filter out value',
+          });
+          const filterOutValueLabel = i18n.translate('discover.filterOutValueLabel', {
+            defaultMessage: 'Filter out value: {value}',
+            values: { value: columnId },
+          });
+
+          return (
+            <Component
+              onClick={() => {
+                const row = rows[rowIndex];
+                const flattened = indexPattern.flattenHit(row);
+
+                if (flattened) {
+                  onFilter(columnId, flattened[columnId], '-');
+                }
+              }}
+              iconType="minusInCircle"
+              aria-label={filterOutValueLabel}
+              data-test-subj="filterOutValue"
+            >
+              {filterOutValueText}
+            </Component>
+          );
+        },
+      ]
+    : undefined;
+  return cellActions;
+}
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss
new file mode 100644
index 000000000000..6015c8f6a11b
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss
@@ -0,0 +1,3 @@
+.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title.osdDescriptionListFieldTitle {
+  background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+}
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx
new file mode 100644
index 000000000000..a4b640a34a30
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.test.tsx
@@ -0,0 +1,189 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import {
+  indexPatternMock,
+  getMockedIndexPatternWithCustomizedFields,
+} from '../../../__mock__/index_pattern_mock';
+import { fetchTableDataCell } from './data_grid_table_cell_value';
+
+const fieldsData = [
+  {
+    name: 'name',
+    scripted: false,
+    filterable: true,
+    aggregatable: false,
+    searchable: true,
+    sortable: false,
+  },
+  {
+    name: 'currency',
+    type: 'string',
+    scripted: false,
+    filterable: true,
+    aggregatable: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: 'order_date',
+    type: 'date',
+    scripted: false,
+    filterable: true,
+    aggregatable: true,
+    searchable: true,
+    sortable: true,
+  },
+];
+
+const dataRowsMock = [
+  {
+    _id: '1',
+    _index: 'test_index',
+    _score: 0,
+    _source: {
+      name: 'Eddie',
+      currency: 'EUR',
+      order_date: '2023-08-07T09:28:48+00:00',
+    },
+    fields: {
+      order_date: ['2023-08-07T09:28:48.000Z'],
+    },
+    _version: 1,
+    _type: '_doc',
+  },
+];
+
+const customizedIndexPatternMock = getMockedIndexPatternWithCustomizedFields(
+  fieldsData
+) as IndexPattern;
+
+describe('Testing fetchTableDataCell function', () => {
+  it('should display empty span if no data', () => {
+    const DataGridTableCellValue = fetchTableDataCell(indexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={100}
+        columnId="order_date"
+        isDetails={false}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+            <span>
+              -
+            </span>
+          `);
+  });
+
+  it('should display empty span if field is not defined in index pattern', () => {
+    const DataGridTableCellValue = fetchTableDataCell(indexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={0}
+        columnId="first_name"
+        isDetails={false}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+        <span>
+          -
+        </span>
+      `);
+  });
+
+  it('should display JSON string representation of the data if columnId is _source and isDetails is false', () => {
+    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={0}
+        columnId="_source"
+        isDetails={true}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+      <span>
+        {
+        "name": "Eddie",
+        "currency": "EUR",
+        "order_date": "2023-08-07T09:28:48+00:00"
+      }
+      </span>
+    `);
+  });
+
+  it('should display EuiDescriptionList if columnId is _source and isDetails is false', () => {
+    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={0}
+        columnId="_source"
+        isDetails={false}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+      <EuiDescriptionList
+        compressed={true}
+        type="inline"
+      >
+        <EuiDescriptionListTitle
+          className="osdDescriptionListFieldTitle"
+        >
+          order_date
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "2023-08-07T09:28:48.000Z",
+            }
+          }
+        />
+      </EuiDescriptionList>
+    `);
+  });
+
+  it('should correctly display data if columnId is in index pattern and is not _source', () => {
+    const DataGridTableCellValue = fetchTableDataCell(customizedIndexPatternMock, dataRowsMock);
+    const comp = shallow(
+      <DataGridTableCellValue
+        rowIndex={0}
+        columnId="currency"
+        isDetails={false}
+        setCellProps={jest.fn()}
+        isExpandable={false}
+        isExpanded={false}
+      />
+    );
+
+    expect(comp).toMatchInlineSnapshot(`
+      <span
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "EUR",
+          }
+        }
+      />
+    `);
+  });
+});
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx
new file mode 100644
index 000000000000..4089c90ede15
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import './data_grid_table_cell_value.scss';
+
+import React, { Fragment } from 'react';
+import dompurify from 'dompurify';
+
+import {
+  EuiDataGridCellValueElementProps,
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+} from '@elastic/eui';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+
+function fetchSourceTypeDataCell(
+  idxPattern: IndexPattern,
+  row: Record<string, unknown>,
+  columnId: string,
+  isDetails: boolean
+) {
+  if (isDetails) {
+    return <span>{JSON.stringify(row[columnId], null, 2)}</span>;
+  }
+  const formattedRow = idxPattern.formatHit(row);
+
+  return (
+    <EuiDescriptionList type="inline" compressed>
+      {Object.keys(formattedRow).map((key) => (
+        <Fragment key={key}>
+          <EuiDescriptionListTitle className="osdDescriptionListFieldTitle">
+            {key}
+          </EuiDescriptionListTitle>
+          <EuiDescriptionListDescription
+            dangerouslySetInnerHTML={{ __html: dompurify.sanitize(formattedRow[key]) }}
+          />
+        </Fragment>
+      ))}
+    </EuiDescriptionList>
+  );
+}
+
+export const fetchTableDataCell = (
+  idxPattern: IndexPattern,
+  dataRows: OpenSearchSearchHit[] | undefined
+) => ({ rowIndex, columnId, isDetails }: EuiDataGridCellValueElementProps) => {
+  const singleRow = dataRows ? (dataRows[rowIndex] as Record<string, unknown>) : undefined;
+  const flattenedRows = dataRows ? dataRows.map((hit) => idxPattern.flattenHit(hit)) : [];
+  const flattenedRow = flattenedRows
+    ? (flattenedRows[rowIndex] as Record<string, unknown>)
+    : undefined;
+  const fieldInfo = idxPattern.fields.getByName(columnId);
+
+  if (typeof singleRow === 'undefined' || typeof flattenedRow === 'undefined') {
+    return <span>-</span>;
+  }
+
+  if (!fieldInfo?.type && flattenedRow && typeof flattenedRow[columnId] === 'object') {
+    if (isDetails) {
+      return <span>{JSON.stringify(flattenedRow[columnId], null, 2)}</span>;
+    }
+
+    return <span>{JSON.stringify(flattenedRow[columnId])}</span>;
+  }
+
+  if (fieldInfo?.type === '_source') {
+    return fetchSourceTypeDataCell(idxPattern, singleRow, columnId, isDetails);
+  }
+
+  const formattedValue = idxPattern.formatField(singleRow, columnId);
+  if (typeof formattedValue === 'undefined') {
+    return <span>-</span>;
+  } else {
+    const sanitizedCellValue = dompurify.sanitize(idxPattern.formatField(singleRow, columnId));
+    return (
+      // eslint-disable-next-line react/no-danger
+      <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
+    );
+  }
+};
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.test.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.test.tsx
new file mode 100644
index 000000000000..3123b0a1a210
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.test.tsx
@@ -0,0 +1,267 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import {
+  getMockedIndexPatternWithCustomizedFields,
+  getMockedIndexPatternWithTimeField,
+} from '../../../__mock__/index_pattern_mock';
+import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
+
+const fieldsData = [
+  {
+    name: 'name',
+    scripted: false,
+    filterable: true,
+    aggregatable: false,
+    searchable: true,
+    sortable: false,
+  },
+  {
+    name: 'currency',
+    type: 'string',
+    scripted: false,
+    filterable: true,
+    aggregatable: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: 'order_date',
+    type: 'date',
+    scripted: false,
+    filterable: true,
+    aggregatable: true,
+    searchable: true,
+    sortable: true,
+  },
+];
+
+const customizedIndexPatternMock = getMockedIndexPatternWithCustomizedFields(
+  fieldsData
+) as IndexPattern;
+const customizedIndexPatternMockWithTimeField = getMockedIndexPatternWithTimeField(
+  fieldsData,
+  'order_date'
+) as IndexPattern;
+
+describe('Testing buildDataGridColumns function ', () => {
+  it('should return correct columns without time column when displayTimeColumn is false', () => {
+    const columns = buildDataGridColumns(['name', 'currency'], customizedIndexPatternMock, false);
+    expect(columns).toHaveLength(2);
+    expect(columns[0].id).toEqual('name');
+    expect(columns[1].id).toEqual('currency');
+    expect(columns).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "actions": Object {
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": undefined,
+          "id": "name",
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+        Object {
+          "actions": Object {
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": undefined,
+          "id": "currency",
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+      ]
+    `);
+  });
+
+  it('should add time and source columns correctly when displayTimeColumn is true', () => {
+    const columns = buildDataGridColumns(
+      ['name', 'currency', '_source'],
+      customizedIndexPatternMockWithTimeField,
+      true
+    );
+    expect(columns).toHaveLength(4);
+    expect(columns[0].id).toEqual('order_date');
+    expect(columns[0].display).toEqual('Time (order_date)');
+    expect(columns[3].id).toEqual('_source');
+    expect(columns[3].display).toEqual('Source');
+    expect(columns).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "actions": Object {
+            "showHide": false,
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": "Time (order_date)",
+          "id": "order_date",
+          "initialWidth": 200,
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+        Object {
+          "actions": Object {
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": undefined,
+          "id": "name",
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+        Object {
+          "actions": Object {
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": undefined,
+          "id": "currency",
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+        Object {
+          "actions": Object {
+            "showHide": false,
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": "Source",
+          "id": "_source",
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+      ]
+    `);
+  });
+
+  it('should set display for time column correctly when time field is already included', () => {
+    const columns = buildDataGridColumns(
+      ['name', 'currency', 'order_date'],
+      customizedIndexPatternMockWithTimeField,
+      true
+    );
+    expect(columns).toHaveLength(3);
+    expect(columns[2].id).toEqual('order_date');
+    expect(columns[2].display).toEqual('Time (order_date)');
+    expect(columns).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "actions": Object {
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": undefined,
+          "id": "name",
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+        Object {
+          "actions": Object {
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": undefined,
+          "id": "currency",
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+        Object {
+          "actions": Object {
+            "showHide": false,
+            "showMoveLeft": true,
+            "showMoveRight": true,
+          },
+          "cellActions": undefined,
+          "display": "Time (order_date)",
+          "id": "order_date",
+          "initialWidth": 200,
+          "isSortable": undefined,
+          "schema": undefined,
+        },
+      ]
+    `);
+  });
+});
+
+describe('Testing computeVisibleColumns function ', () => {
+  it('should include time column when displayTimeColumn is true and time field is missing', () => {
+    const visibleColumns = computeVisibleColumns(
+      ['name', 'currency'],
+      customizedIndexPatternMock,
+      true
+    );
+    expect(visibleColumns).toMatchInlineSnapshot(`
+      Array [
+        "order_date",
+        "name",
+        "currency",
+      ]
+    `);
+  });
+
+  it('should not add duplicate time column when displayTimeColumn is true and time field is included', () => {
+    const visibleColumns = computeVisibleColumns(
+      ['name', 'currency', 'order_date'],
+      customizedIndexPatternMock,
+      true
+    );
+    expect(visibleColumns).toMatchInlineSnapshot(`
+      Array [
+        "name",
+        "currency",
+        "order_date",
+      ]
+    `);
+  });
+
+  it('should not add time column when displayTimeColumn is false', () => {
+    const visibleColumns = computeVisibleColumns(
+      ['name', 'currency'],
+      customizedIndexPatternMock,
+      false
+    );
+    expect(visibleColumns).toMatchInlineSnapshot(`
+      Array [
+        "name",
+        "currency",
+      ]
+    `);
+  });
+});
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx
new file mode 100644
index 000000000000..ba80e719491f
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiDataGridColumn } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { getCellActions } from './data_grid_table_cell_actions';
+
+export function buildDataGridColumns(
+  columnNames: string[],
+  idxPattern: IndexPattern,
+  displayTimeColumn: boolean,
+  includeSourceInColumns: boolean,
+  isContextView: boolean
+) {
+  const timeFieldName = idxPattern.timeFieldName;
+  let columnsToUse = columnNames;
+
+  if (displayTimeColumn && timeFieldName && !columnNames.includes(timeFieldName)) {
+    columnsToUse = [timeFieldName, ...columnNames];
+  }
+
+  return columnsToUse.map((colName) =>
+    generateDataGridTableColumn(colName, idxPattern, includeSourceInColumns, isContextView)
+  );
+}
+
+export function generateDataGridTableColumn(
+  colName: string,
+  idxPattern: IndexPattern,
+  includeSourceInColumns: boolean,
+  isContextView: boolean
+) {
+  const timeLabel = i18n.translate('discover.timeLabel', {
+    defaultMessage: 'Time',
+  });
+  const idxPatternField = idxPattern.getFieldByName(colName);
+  const shouldHide = colName === '_source' || colName === idxPattern.timeFieldName;
+  const dataGridCol: EuiDataGridColumn = {
+    id: colName,
+    schema: idxPatternField?.type,
+    isSortable: idxPatternField?.sortable,
+    display: idxPatternField?.displayName,
+    actions: isContextView
+      ? false
+      : {
+          showHide: shouldHide
+            ? false
+            : {
+                label: i18n.translate('discover.removeColumn.label', {
+                  defaultMessage: 'Remove column',
+                }),
+                iconType: 'cross',
+              },
+          showMoveLeft: !includeSourceInColumns,
+          showMoveRight: !includeSourceInColumns,
+        },
+    cellActions: idxPatternField ? getCellActions(idxPatternField) : [],
+  };
+
+  if (dataGridCol.id === idxPattern.timeFieldName) {
+    dataGridCol.display = `${timeLabel} (${idxPattern.timeFieldName})`;
+    dataGridCol.initialWidth = 200;
+  }
+  if (dataGridCol.id === '_source') {
+    dataGridCol.display = i18n.translate('discover.sourceLabel', {
+      defaultMessage: 'Source',
+    });
+  }
+  return dataGridCol;
+}
+
+export function computeVisibleColumns(
+  columnNames: string[],
+  idxPattern: IndexPattern,
+  displayTimeColumn: boolean
+) {
+  const timeFieldName = idxPattern.timeFieldName;
+  let visibleColumnNames = columnNames;
+
+  if (displayTimeColumn && !columnNames.includes(timeFieldName)) {
+    visibleColumnNames = [timeFieldName, ...columnNames];
+  }
+
+  return visibleColumnNames;
+}
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_context.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_context.tsx
new file mode 100644
index 000000000000..886b6fa60f8d
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_context.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+
+export interface DataGridContextProps {
+  inspectedHit?: OpenSearchSearchHit;
+  onFilter: DocViewFilterFn;
+  setInspectedHit: (hit?: OpenSearchSearchHit) => void;
+  rows: OpenSearchSearchHit[];
+  indexPattern: IndexPattern;
+}
+
+export const DataGridContext = React.createContext<DataGridContextProps>(
+  {} as DataGridContextProps
+);
+
+export const DiscoverGridContextProvider = DataGridContext.Provider;
+export const useDataGridContext = () => React.useContext(DataGridContext);
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_inspect_button.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_inspect_button.tsx
new file mode 100644
index 000000000000..88341aad1b08
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_docview_inspect_button.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiToolTip, EuiButtonIcon, EuiDataGridCellValueElementProps } from '@elastic/eui';
+import { useDataGridContext } from './data_grid_table_context';
+
+export const DocViewInspectButton = ({ rowIndex }: EuiDataGridCellValueElementProps) => {
+  const { inspectedHit, setInspectedHit, rows } = useDataGridContext();
+  const currentInspected = rows[rowIndex];
+  const isCurrentInspected = currentInspected === inspectedHit;
+  const inspectHintMsg = i18n.translate('discover.docViews.table.inspectAriaLabel', {
+    defaultMessage: 'Inspect document details',
+  });
+
+  return (
+    <EuiToolTip content={inspectHintMsg}>
+      <EuiButtonIcon
+        onClick={() => setInspectedHit(isCurrentInspected ? undefined : currentInspected)}
+        iconType={isCurrentInspected ? 'minimize' : 'inspect'}
+        aria-label={inspectHintMsg}
+        data-test-subj={`docTableExpandToggleColumn-${rowIndex}`}
+      />
+    </EuiToolTip>
+  );
+};
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
new file mode 100644
index 000000000000..8cfeaf9795af
--- /dev/null
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+} from '@elastic/eui';
+import { DocViewer } from '../doc_viewer/doc_viewer';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { DocViewerLinks } from '../doc_viewer_links/doc_viewer_links';
+
+interface Props {
+  columns: string[];
+  hit: any;
+  indexPattern: IndexPattern;
+  onAddColumn: (column: string) => void;
+  onClose: () => void;
+  onFilter: DocViewFilterFn;
+  onRemoveColumn: (column: string) => void;
+}
+
+export function DataGridFlyout({
+  hit,
+  columns,
+  indexPattern,
+  onAddColumn,
+  onClose,
+  onFilter,
+  onRemoveColumn,
+}: Props) {
+  // TODO: replace EuiLink with doc_view_links registry
+  // TODO: Also move the flyout higher in the react tree to prevent redrawing the table component and slowing down page performance
+  return (
+    <EuiFlyout onClose={onClose} size="m" data-test-subj="documentDetailFlyOut">
+      <EuiFlyoutHeader>
+        <EuiTitle>
+          <h2>Document Details</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem>
+            <DocViewerLinks hit={hit} indexPattern={indexPattern} columns={columns} />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <DocViewer
+              hit={hit}
+              columns={columns}
+              indexPattern={indexPattern}
+              onRemoveColumn={(columnName: string) => {
+                onRemoveColumn(columnName);
+                onClose();
+              }}
+              onAddColumn={(columnName: string) => {
+                onAddColumn(columnName);
+                onClose();
+              }}
+              filter={(mapping, value, mode) => {
+                onFilter(mapping, value, mode);
+                onClose();
+              }}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx
index ccab0be41ed2..f1cdc495f742 100644
--- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx
+++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx
@@ -33,7 +33,7 @@ import { mount, shallow } from 'enzyme';
 import { DocViewer } from './doc_viewer';
 import { findTestSubject } from 'test_utils/helpers';
 import { getDocViewsRegistry } from '../../../opensearch_dashboards_services';
-import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+import { DocViewRenderProps } from '../../../doc_views/doc_views_types';
 
 jest.mock('../../../opensearch_dashboards_services', () => {
   let registry: any[] = [];
diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.test.tsx b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.test.tsx
index 83d857b24fc5..93bd94375def 100644
--- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.test.tsx
+++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.test.tsx
@@ -31,7 +31,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { DocViewRenderTab } from './doc_viewer_render_tab';
-import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+import { DocViewRenderProps } from '../../../doc_views/doc_views_types';
 
 test('Mounting and unmounting DocViewerRenderTab', () => {
   const unmountFn = jest.fn();
diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.tsx b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.tsx
index edc7f40c5e43..043d0f7a60eb 100644
--- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.tsx
+++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.tsx
@@ -29,7 +29,7 @@
  */
 
 import React, { useRef, useEffect } from 'react';
-import { DocViewRenderFn, DocViewRenderProps } from '../../doc_views/doc_views_types';
+import { DocViewRenderFn, DocViewRenderProps } from '../../../doc_views/doc_views_types';
 
 interface Props {
   render: DocViewRenderFn;
@@ -37,7 +37,6 @@ interface Props {
 }
 /**
  * Responsible for rendering a tab provided by a render function.
- * So any other framework can be used (E.g. legacy Angular 3rd party plugin code)
  * The provided `render` function is called with a reference to the
  * component's `HTMLDivElement` as 1st arg and `renderProps` as 2nd arg
  */
diff --git a/src/plugins/discover/public/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap b/src/plugins/discover/public/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap
index 95fb0c377180..5da67e79a7c7 100644
--- a/src/plugins/discover/public/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap
+++ b/src/plugins/discover/public/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap
@@ -2,33 +2,49 @@
 
 exports[`Dont Render <DocViewerLink/> if generateCb.hide 1`] = `
 <EuiFlexGroup
-  gutterSize="xs"
+  gutterSize="m"
+  justifyContent="flexEnd"
 />
 `;
 
 exports[`Render <DocViewerLink/> with 2 different links 1`] = `
 <EuiFlexGroup
-  gutterSize="xs"
+  gutterSize="m"
+  justifyContent="flexEnd"
 >
   <EuiFlexItem
+    grow={false}
     key="0"
   >
-    <EuiListGroupItem
+    <EuiLink
       data-test-subj="docTableRowAction"
       href="aaa"
-      label="generateCb link"
-      order={10}
-    />
+      style={
+        Object {
+          "fontWeight": "normal",
+        }
+      }
+      target="_blank"
+    >
+      generateCb link
+    </EuiLink>
   </EuiFlexItem>
   <EuiFlexItem
+    grow={false}
     key="1"
   >
-    <EuiListGroupItem
+    <EuiLink
       data-test-subj="docTableRowAction"
       href="bbb"
-      label="href link"
-      order={20}
-    />
+      style={
+        Object {
+          "fontWeight": "normal",
+        }
+      }
+      target="_blank"
+    >
+      href link
+    </EuiLink>
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
diff --git a/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.test.tsx b/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.test.tsx
index 8aba555b3a37..22982b4aa513 100644
--- a/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.test.tsx
+++ b/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.test.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { DocViewerLinks } from './doc_viewer_links';
 import { getDocViewsLinksRegistry } from '../../../opensearch_dashboards_services';
-import { DocViewLinkRenderProps } from '../../doc_views_links/doc_views_links_types';
+import { DocViewLinkRenderProps } from '../doc_views/doc_views_links/doc_views_links_types';
 
 jest.mock('../../../opensearch_dashboards_services', () => {
   let registry: any[] = [];
diff --git a/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.tsx b/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.tsx
index 9efb0693fde6..5e79c8b88e33 100644
--- a/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.tsx
+++ b/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiListGroupItem, EuiListGroupItemProps } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiListGroupItemProps, EuiLink } from '@elastic/eui';
 import { getDocViewsLinksRegistry } from '../../../opensearch_dashboards_services';
 import { DocViewLinkRenderProps } from '../../doc_views_links/doc_views_links_types';
 
@@ -24,10 +24,17 @@ export function DocViewerLinks(renderProps: DocViewLinkRenderProps) {
     });
 
   return (
-    <EuiFlexGroup gutterSize="xs">
+    <EuiFlexGroup gutterSize="m" justifyContent="flexEnd">
       {listItems.map((item, index) => (
-        <EuiFlexItem key={index}>
-          <EuiListGroupItem {...item} />
+        <EuiFlexItem key={index} grow={false}>
+          <EuiLink
+            href={item.href}
+            target="_blank"
+            style={{ fontWeight: 'normal' }}
+            data-test-subj={item['data-test-subj']}
+          >
+            {item.label}
+          </EuiLink>
         </EuiFlexItem>
       ))}
     </EuiFlexGroup>
diff --git a/src/plugins/discover/public/application/components/doc_views/context/NOTES.md b/src/plugins/discover/public/application/components/doc_views/context/NOTES.md
new file mode 100644
index 000000000000..c62ce8a450c8
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/NOTES.md
@@ -0,0 +1,55 @@
+# Discover Context App Implementation Notes
+
+## Principles
+**Single Source of Truth**: A good user experience depends on the UI displaying consistent information across the whole page. To achieve this, there should always be a single source of truth for the application's state. In the updated application, this is managed via the useContextState and useQueryActions hooks, which manage the application state and actions respectively.
+
+**Unidirectional Data Flow**: While a single state promotes rendering consistency, it does little to make the state changes easier to reason about. To avoid having state mutations scattered all over the code, this app implements a unidirectional data flow architecture. That means that the state is treated as immutable throughout the application except for actions, which may modify it to cause re-render and updates.
+
+**Unit-Testability**: Creating unit tests for large parts of the UI code is made easy by expressing as much of the logic as possible as side-effect-free functions. The only place where side-effects are allowed are actions.
+
+**Loose Coupling**: An attempt was made to couple the parts that make up this app as loosely as possible. This means using pure functions whenever possible and isolating the components diligently. It does not access the OpenSearch Dashboards AppState directly but communicates only via its properties.
+
+## Concepts
+To adhere to the principles mentioned above, this app borrows some concepts from the redux architecture that forms a circular unidirectional data flow.
+
+**State**: The `contextAppState` and `contextQueryState` are the single sources of truth and may only be modified by actions.
+
+**Action**: Actions are functions that are called in response to user or system actions and may modify the state they are bound to via their closure. For example, the `setContextAppState` and `fetchSurroundingRows` functions in the `useContextState` and `useQueryActions` hooks, respectively.
+
+## Implementation
+The updated application leverages React hooks to manage state and actions. The useContextState hook manages the application state and provides functions to update the state, while the useQueryActions hook manages the fetching of documents and provides functions to fetch the anchor document, surrounding documents, and all documents.
+
+The `useContextState` hook uses the useState and useEffect hooks to manage the application state and side effects. The `contextAppState` is the application state, and the `setContextAppState` function is used to update the state. The useEffect hook is used to reset the `contextQueryState` and to fetch the surrounding documents based on the `contextAppState`.
+
+The `useQueryActions` hook uses the useState, useMemo, and useCallback hooks to manage the query state and actions. The `contextQueryState` is the query state, and various functions are provided to update the state and fetch documents. The useMemo hook is used to derive the rows from the contextQueryState, and the useCallback hook is used to create memoized versions of the functions that update the state and fetch documents.
+
+The `useQueryActions` hook provides several functions for fetching documents:
+
+**fetchAnchorRow**: Fetches the anchor document.
+
+**fetchSurroundingRows**: Fetches the surrounding documents (predecessors or successors) of the anchor document.
+
+**fetchContextRows**: Fetches both the predecessors and successors of the anchor document.
+
+**fetchAllRows**: Fetches the anchor document and then fetches the surrounding documents.
+**resetContextQueryState**: Resets the contextQueryState to its initial state.
+
+These functions update the `contextQueryState` to reflect the loading status and the fetched documents.
+
+
+## Directory Structure
+
+**components/action_bar**: Defines the `ActionBar` component.
+
+**api/anchor.ts**: Exports `fetchAnchor()` function that creates and executes the query for the anchor document. It also exports `updateSearchSource()` function which updates the search source with specified parameters.
+
+**api/context.ts**: Exports `fetchSurroundingDocs()` function that fetches the surrounding documents (either successors or predecessors) of a specified anchor document. It also exports `createSearchSource()` function that creates a search source with specified index pattern and filters.
+
+**api/utils**: Exports various functions used to create and transform
+queries.
+
+**utils/context_state**: Exports functions for fetching surrounding documents, creating a search source, and managing application and global states. Additionally, several helper functions are exported for comparing filters and states, retrieving filters from a state, and creating the initial app state. The module also defines constants for the global and app state URL keys.
+
+**utils/use_query_actions**: Defines a React hook to manage and fetch data related to OpenSearch documents. The hook maintains a local state, contextQueryState, to track the status of fetching operations and the fetched documents. It provides several functions: `fetchAnchorRow()` to fetch the anchor document, `fetchSurroundingRows()` to fetch surrounding documents, `fetchContextRows()` to fetch both predecessors and successors, and `fetchAllRows()` to fetch the anchor and all surrounding documents. Additionally, it provides a `resetContextQueryState()` function to reset the local state to its initial value. Each fetch operation updates the contextQueryState and, in case of an error, displays a toast notification with a failure message.
+
+**utils/use_context_query**: Defines a React hook that manages the application state and synchronization with the URL and OpenSearch Dashboards services. The `startSync` and `stopSync` functions are used to start and stop the synchronization of the application state with the URL. The `setContextAppState` function is used to update the application state and immediately reflect the changes in the URL. The hook returns the current `contextAppState` and the `setContextAppState` function, which can be used by the components that consume this hook.
diff --git a/src/plugins/discover/public/application/angular/context/_index.scss b/src/plugins/discover/public/application/components/doc_views/context/_index.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/_index.scss
rename to src/plugins/discover/public/application/components/doc_views/context/_index.scss
diff --git a/src/plugins/discover/public/application/components/doc_views/context/api/_stubs.ts b/src/plugins/discover/public/application/components/doc_views/context/api/_stubs.ts
new file mode 100644
index 000000000000..e8d4ab9d95b5
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/api/_stubs.ts
@@ -0,0 +1,132 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 sinon, { SinonSpy } from 'sinon';
+import moment from 'moment';
+import { OpenSearchHitRecordList } from './context';
+
+type Hit = {
+  [key in string]: number;
+} & {
+  sort: [number, number];
+};
+
+interface SearchSourceStub {
+  _stubHits: any[];
+  _stubTimeField?: string;
+  _createStubHit: (timestamp: any, tiebreaker?: number) => Record<string, any>;
+  setParent: SinonSpy;
+  setField: SinonSpy;
+  getField: SinonSpy;
+  fetch: SinonSpy;
+}
+
+export function createIndexPatternsStub() {
+  return {
+    get: sinon.spy((indexPatternId) =>
+      Promise.resolve({
+        id: indexPatternId,
+        isTimeNanosBased: () => false,
+        popularizeField: () => {},
+      })
+    ),
+  };
+}
+
+/**
+ * A stubbed search source with a `fetch` method that returns all of `_stubHits`.
+ */
+export function createSearchSourceStub(hits: OpenSearchHitRecordList, timeField?: string) {
+  const searchSourceStub: Partial<SearchSourceStub> = {
+    _stubHits: hits,
+    _stubTimeField: timeField,
+    _createStubHit: (timestamp: number, tiebreaker = 0) => ({
+      [searchSourceStub._stubTimeField]: timestamp,
+      sort: [timestamp, tiebreaker],
+    }),
+  };
+
+  searchSourceStub.setParent = sinon.spy(() => searchSourceStub);
+  searchSourceStub.setField = sinon.spy(() => searchSourceStub);
+
+  searchSourceStub.getField = sinon.spy((key: string) => {
+    const previousSetCall = searchSourceStub.setField?.withArgs(key).lastCall;
+    return previousSetCall ? previousSetCall.args[1] : null;
+  });
+
+  searchSourceStub.fetch = sinon.spy(() =>
+    Promise.resolve({
+      hits: {
+        hits: searchSourceStub._stubHits,
+        total: searchSourceStub._stubHits.length,
+      },
+    })
+  );
+
+  return searchSourceStub as SearchSourceStub;
+}
+
+/**
+ * A stubbed search source with a `fetch` method that returns a filtered set of `_stubHits`.
+ */
+export function createContextSearchSourceStub(
+  hits: OpenSearchHitRecordList,
+  timeField: string = '@timestamp'
+) {
+  const searchSourceStub = createSearchSourceStub(hits, timeField);
+
+  searchSourceStub.fetch = sinon.spy(() => {
+    const timeFieldStr = searchSourceStub._stubTimeField as string;
+    const lastQuery = searchSourceStub.setField.withArgs('query').lastCall.args[1];
+    const timeRange = lastQuery.query.bool.must.constant_score.filter.range[timeFieldStr];
+    const lastSort = searchSourceStub.setField.withArgs('sort').lastCall.args[1];
+    const sortDirection = lastSort[0][timeFieldStr];
+    const sortFunction =
+      sortDirection === 'asc'
+        ? (first: Hit, second: Hit) => first[timeFieldStr] - second[timeFieldStr]
+        : (first: Hit, second: Hit) => second[timeFieldStr] - first[timeFieldStr];
+    const filteredHits = searchSourceStub._stubHits
+      .filter(
+        (hit: Hit) =>
+          moment(hit[timeFieldStr]).isSameOrAfter(timeRange.gte) &&
+          moment(hit[timeFieldStr]).isSameOrBefore(timeRange.lte)
+      )
+      .sort(sortFunction);
+
+    return Promise.resolve({
+      hits: {
+        hits: filteredHits,
+        total: filteredHits.length,
+      },
+    });
+  });
+
+  return searchSourceStub;
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/context/api/anchor.ts b/src/plugins/discover/public/application/components/doc_views/context/api/anchor.ts
new file mode 100644
index 000000000000..55bd3a265795
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/api/anchor.ts
@@ -0,0 +1,91 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+
+import {
+  ISearchSource,
+  OpenSearchQuerySortValue,
+  IndexPattern,
+} from '../../../../../../../data/public';
+import { OpenSearchHitRecord } from './context';
+
+export async function fetchAnchor(
+  anchorId: string,
+  indexPattern: IndexPattern,
+  searchSource: ISearchSource,
+  sort: OpenSearchQuerySortValue[]
+): Promise<OpenSearchHitRecord> {
+  updateSearchSource(searchSource, anchorId, sort, indexPattern);
+
+  const response = await searchSource.fetch();
+  const doc = response.hits?.hits?.[0];
+
+  if (!doc) {
+    throw new Error(
+      i18n.translate('discover.context.failedToLoadAnchorDocumentErrorDescription', {
+        defaultMessage: 'Failed to load anchor document.',
+      })
+    );
+  }
+
+  return {
+    ...doc,
+    isAnchor: true,
+  } as OpenSearchHitRecord;
+}
+
+export function updateSearchSource(
+  searchSource: ISearchSource,
+  anchorId: string,
+  sort: OpenSearchQuerySortValue[],
+  indexPattern: IndexPattern
+) {
+  searchSource
+    .setParent(undefined)
+    .setField('index', indexPattern)
+    .setField('version', true)
+    .setField('size', 1)
+    .setField('query', {
+      query: {
+        constant_score: {
+          filter: {
+            ids: {
+              values: [anchorId],
+            },
+          },
+        },
+      },
+      language: 'lucene',
+    })
+    .setField('sort', sort);
+
+  return searchSource;
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/context/api/context.ts b/src/plugins/discover/public/application/components/doc_views/context/api/context.ts
new file mode 100644
index 000000000000..bab1ff282e5f
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/api/context.ts
@@ -0,0 +1,133 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { Filter, IndexPatternsContract, IndexPattern } from 'src/plugins/data/public';
+import { reverseSortDir, SortDirection } from './utils/sorting';
+import { extractNanos, convertIsoToMillis } from './utils/date_conversion';
+import { fetchHitsInInterval } from './utils/fetch_hits_in_interval';
+import { generateIntervals } from './utils/generate_intervals';
+import { getOpenSearchQuerySearchAfter } from './utils/get_opensearch_query_search_after';
+import { getOpenSearchQuerySort } from './utils/get_opensearch_query_sort';
+import { getServices } from '../../../../../opensearch_dashboards_services';
+
+export enum SurrDocType {
+  SUCCESSORS = 'successors',
+  PREDECESSORS = 'predecessors',
+}
+export interface OpenSearchHitRecord {
+  fields: Record<string, any>;
+  sort: number[];
+  _source: Record<string, any>;
+  _id: string;
+  isAnchor?: boolean;
+}
+export type OpenSearchHitRecordList = OpenSearchHitRecord[];
+
+const DAY_MILLIS = 24 * 60 * 60 * 1000;
+
+// look from 1 day up to 10000 days into the past and future
+const LOOKUP_OFFSETS = [0, 1, 7, 30, 365, 10000].map((days) => days * DAY_MILLIS);
+
+/**
+ * Fetch successor or predecessor documents of a given anchor document
+ *
+ * @param {SurrDocType} type - `successors` or `predecessors`
+ * @param {string} indexPatternId
+ * @param {OpenSearchHitRecord} anchor - anchor record
+ * @param {string} timeField - name of the timefield, that's sorted on
+ * @param {string} tieBreakerField - name of the tie breaker, the 2nd sort field
+ * @param {SortDirection} sortDir - direction of sorting
+ * @param {number} size - number of records to retrieve
+ * @param {Filter[]} filters - to apply in the query
+ * @returns {Promise<object[]>}
+ */
+
+export async function fetchSurroundingDocs(
+  type: SurrDocType,
+  indexPattern: IndexPattern,
+  anchor: OpenSearchHitRecord,
+  tieBreakerField: string,
+  sortDir: SortDirection,
+  size: number,
+  filters: Filter[]
+) {
+  if (typeof anchor !== 'object' || anchor === null || !size) {
+    return [];
+  }
+  const timeField = indexPattern.timeFieldName!;
+  const searchSource = await createSearchSource(indexPattern, filters);
+  const sortDirToApply = type === 'successors' ? sortDir : reverseSortDir(sortDir);
+
+  const nanos = indexPattern.isTimeNanosBased() ? extractNanos(anchor._source[timeField]) : '';
+  const timeValueMillis =
+    nanos !== '' ? convertIsoToMillis(anchor._source[timeField]) : anchor.sort[0];
+
+  const intervals = generateIntervals(LOOKUP_OFFSETS, timeValueMillis, type, sortDir);
+  let documents: OpenSearchHitRecordList = [];
+
+  for (const interval of intervals) {
+    const remainingSize = size - documents.length;
+
+    if (remainingSize <= 0) {
+      break;
+    }
+
+    const searchAfter = getOpenSearchQuerySearchAfter(type, documents, timeField, anchor, nanos);
+
+    const sort = getOpenSearchQuerySort(timeField, tieBreakerField, sortDirToApply);
+
+    const hits = await fetchHitsInInterval(
+      searchSource,
+      timeField,
+      sort,
+      sortDirToApply,
+      interval,
+      searchAfter,
+      remainingSize,
+      nanos,
+      anchor._id
+    );
+
+    documents =
+      type === 'successors' ? [...documents, ...hits] : [...hits.slice().reverse(), ...documents];
+  }
+
+  return documents;
+}
+
+export async function createSearchSource(indexPattern: IndexPattern, filters: Filter[]) {
+  const { data } = getServices();
+
+  const searchSource = await data.search.searchSource.create();
+  return searchSource
+    .setParent(undefined)
+    .setField('index', indexPattern)
+    .setField('filter', filters);
+}
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/date_conversion.test.ts b/src/plugins/discover/public/application/components/doc_views/context/api/utils/date_conversion.test.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/utils/date_conversion.test.ts
rename to src/plugins/discover/public/application/components/doc_views/context/api/utils/date_conversion.test.ts
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/date_conversion.ts b/src/plugins/discover/public/application/components/doc_views/context/api/utils/date_conversion.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/utils/date_conversion.ts
rename to src/plugins/discover/public/application/components/doc_views/context/api/utils/date_conversion.ts
diff --git a/src/plugins/discover/public/application/components/doc_views/context/api/utils/fetch_hits_in_interval.ts b/src/plugins/discover/public/application/components/doc_views/context/api/utils/fetch_hits_in_interval.ts
new file mode 100644
index 000000000000..4e2a5719f0b8
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/api/utils/fetch_hits_in_interval.ts
@@ -0,0 +1,107 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 {
+  ISearchSource,
+  OpenSearchQuerySortValue,
+  SortDirection,
+} from '../../../../../../../../data/public';
+import { convertTimeValueToIso } from './date_conversion';
+import { OpenSearchHitRecordList, OpenSearchHitRecord } from '../context';
+import { IntervalValue } from './generate_intervals';
+import { OpenSearchQuerySearchAfter } from './get_opensearch_query_search_after';
+
+interface RangeQuery {
+  format: string;
+  lte?: string | null;
+  gte?: string | null;
+}
+
+/**
+ * Fetch the hits between a given `interval` up to a maximum of `maxCount` documents.
+ * The documents are sorted by `sort`
+ *
+ * The `searchSource` is assumed to have the appropriate index pattern
+ * and filters set.
+ */
+export async function fetchHitsInInterval(
+  searchSource: ISearchSource,
+  timeField: string,
+  sort: [OpenSearchQuerySortValue, OpenSearchQuerySortValue],
+  sortDir: SortDirection,
+  interval: IntervalValue[],
+  searchAfter: OpenSearchQuerySearchAfter,
+  maxCount: number,
+  nanosValue: string,
+  anchorId: string
+): Promise<OpenSearchHitRecordList> {
+  const range: RangeQuery = {
+    format: 'strict_date_optional_time',
+  };
+  const [start, stop] = interval;
+
+  if (start) {
+    range[sortDir === SortDirection.asc ? 'gte' : 'lte'] = convertTimeValueToIso(start, nanosValue);
+  }
+
+  if (stop) {
+    range[sortDir === SortDirection.asc ? 'lte' : 'gte'] = convertTimeValueToIso(stop, nanosValue);
+  }
+  const response = await searchSource
+    .setField('size', maxCount)
+    .setField('query', {
+      query: {
+        bool: {
+          must: {
+            constant_score: {
+              filter: {
+                range: {
+                  [timeField]: range,
+                },
+              },
+            },
+          },
+          must_not: {
+            ids: {
+              values: [anchorId],
+            },
+          },
+        },
+      },
+      language: 'lucene',
+    })
+    .setField('searchAfter', searchAfter)
+    .setField('sort', sort)
+    .setField('version', true)
+    .fetch();
+
+  // TODO: There's a difference in the definition of SearchResponse and OpenSearchHitRecord
+  return ((response.hits?.hits as unknown) as OpenSearchHitRecord[]) || [];
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/context/api/utils/generate_intervals.ts b/src/plugins/discover/public/application/components/doc_views/context/api/utils/generate_intervals.ts
new file mode 100644
index 000000000000..7ae2f796ad9e
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/api/utils/generate_intervals.ts
@@ -0,0 +1,66 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { SortDirection } from '../../../../../../../../data/public';
+
+export type IntervalValue = number | null;
+
+/**
+ * Generate a sequence of pairs from the iterable that looks like
+ * `[[x_0, x_1], [x_1, x_2], [x_2, x_3], ..., [x_(n-1), x_n]]`.
+ */
+export function* asPairs(iterable: Iterable<IntervalValue>): IterableIterator<IntervalValue[]> {
+  let currentPair: IntervalValue[] = [];
+  for (const value of iterable) {
+    currentPair = [...currentPair, value].slice(-2);
+    if (currentPair.length === 2) {
+      yield currentPair;
+    }
+  }
+}
+
+/**
+ * Returns a iterable containing intervals `[start,end]` for OpenSearch date range queries
+ * depending on type (`successors` or `predecessors`) and sort (`asc`, `desc`) these are ascending or descending intervals.
+ */
+export function generateIntervals(
+  offsets: number[],
+  startTime: number,
+  type: string,
+  sort: SortDirection
+): IterableIterator<IntervalValue[]> {
+  const offsetSign =
+    (sort === SortDirection.asc && type === 'successors') ||
+    (sort === SortDirection.desc && type === 'predecessors')
+      ? 1
+      : -1;
+  // ending with `null` opens the last interval
+  return asPairs([...offsets.map((offset) => startTime + offset * offsetSign), null]);
+}
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/get_opensearch_query_search_after.ts b/src/plugins/discover/public/application/components/doc_views/context/api/utils/get_opensearch_query_search_after.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/utils/get_opensearch_query_search_after.ts
rename to src/plugins/discover/public/application/components/doc_views/context/api/utils/get_opensearch_query_search_after.ts
diff --git a/src/plugins/discover/public/application/components/doc_views/context/api/utils/get_opensearch_query_sort.ts b/src/plugins/discover/public/application/components/doc_views/context/api/utils/get_opensearch_query_sort.ts
new file mode 100644
index 000000000000..dc87806b1d80
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/api/utils/get_opensearch_query_sort.ts
@@ -0,0 +1,49 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 {
+  OpenSearchQuerySortValue,
+  SortDirection,
+} from '../../../../../../opensearch_dashboards_services';
+
+/**
+ * Returns `OpenSearchQuerySort` which is used to sort records in the OpenSearch query
+ * https://opensearch.org/docs/latest/opensearch/ux/#sort-results
+ * @param timeField
+ * @param tieBreakerField
+ * @param sortDir
+ */
+export function getOpenSearchQuerySort(
+  timeField: string,
+  tieBreakerField: string,
+  sortDir: SortDirection
+): [OpenSearchQuerySortValue, OpenSearchQuerySortValue] {
+  return [{ [timeField]: sortDir }, { [tieBreakerField]: sortDir }];
+}
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/sorting.test.ts b/src/plugins/discover/public/application/components/doc_views/context/api/utils/sorting.test.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/utils/sorting.test.ts
rename to src/plugins/discover/public/application/components/doc_views/context/api/utils/sorting.test.ts
diff --git a/src/plugins/discover/public/application/components/doc_views/context/api/utils/sorting.ts b/src/plugins/discover/public/application/components/doc_views/context/api/utils/sorting.ts
new file mode 100644
index 000000000000..7d89e17e3fb6
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/api/utils/sorting.ts
@@ -0,0 +1,63 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { IndexPattern } from '../../../../../../opensearch_dashboards_services';
+
+export enum SortDirection {
+  asc = 'asc',
+  desc = 'desc',
+}
+
+/**
+ * The list of field names that are allowed for sorting, but not included in
+ * index pattern fields.
+ */
+const META_FIELD_NAMES: string[] = ['_seq_no', '_doc', '_uid'];
+
+/**
+ * Returns a field from the intersection of the set of sortable fields in the
+ * given index pattern and a given set of candidate field names.
+ */
+export function getFirstSortableField(indexPattern: IndexPattern, fieldNames: string[]) {
+  const sortableFields = fieldNames.filter(
+    (fieldName) =>
+      META_FIELD_NAMES.includes(fieldName) ||
+      // @ts-ignore
+      (indexPattern.fields.getByName(fieldName) || { sortable: false }).sortable
+  );
+  return sortableFields[0];
+}
+
+/**
+ * Return the reversed sort direction.
+ */
+export function reverseSortDir(sortDirection: SortDirection) {
+  return sortDirection === SortDirection.asc ? SortDirection.desc : SortDirection.asc;
+}
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/_action_bar.scss b/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/_action_bar.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/components/action_bar/_action_bar.scss
rename to src/plugins/discover/public/application/components/doc_views/context/components/action_bar/_action_bar.scss
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/_index.scss b/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/_index.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/components/action_bar/_index.scss
rename to src/plugins/discover/public/application/components/doc_views/context/components/action_bar/_index.scss
diff --git a/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/action_bar.test.tsx b/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/action_bar.test.tsx
new file mode 100644
index 000000000000..5529628abeda
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/action_bar.test.tsx
@@ -0,0 +1,104 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ActionBar, ActionBarProps } from './action_bar';
+import { findTestSubject } from 'test_utils/helpers';
+import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from './action_bar';
+
+describe('Test Discover Context ActionBar for successor | predecessor records', () => {
+  ['successors', 'predecessors'].forEach((type) => {
+    const onChangeCount = jest.fn();
+    const props = {
+      defaultStepSize: 5,
+      docCount: 20,
+      docCountAvailable: 0,
+      isDisabled: false,
+      isLoading: false,
+      onChangeCount,
+      type,
+    } as ActionBarProps;
+    const wrapper = mountWithIntl(<ActionBar {...props} />);
+
+    const input = findTestSubject(wrapper, `${type}CountPicker`);
+    const btn = findTestSubject(wrapper, `${type}LoadMoreButton`);
+
+    test(`${type}: Load button click`, () => {
+      btn.simulate('click');
+      expect(onChangeCount).toHaveBeenCalledWith(type, 25);
+    });
+
+    test(`${type}: Load button click doesnt submit when MAX_CONTEXT_SIZE was reached`, () => {
+      onChangeCount.mockClear();
+      input.simulate('change', { target: { valueAsNumber: MAX_CONTEXT_SIZE } });
+      btn.simulate('click');
+      expect(onChangeCount).toHaveBeenCalledTimes(0);
+    });
+
+    test(`${type}: Count input change submits on blur`, () => {
+      input.simulate('change', { target: { valueAsNumber: 123 } });
+      input.simulate('blur');
+      expect(onChangeCount).toHaveBeenCalledWith(type, 123);
+    });
+
+    test(`${type}: Count input change submits on return`, () => {
+      input.simulate('change', { target: { valueAsNumber: 124 } });
+      input.simulate('submit');
+      expect(onChangeCount).toHaveBeenCalledWith(type, 124);
+    });
+
+    test(`${type}: Count input doesnt submits values higher than MAX_CONTEXT_SIZE `, () => {
+      onChangeCount.mockClear();
+      input.simulate('change', { target: { valueAsNumber: MAX_CONTEXT_SIZE + 1 } });
+      input.simulate('submit');
+      expect(onChangeCount).toHaveBeenCalledTimes(0);
+    });
+
+    test(`${type}: Count input doesnt submits values lower than MIN_CONTEXT_SIZE `, () => {
+      onChangeCount.mockClear();
+      input.simulate('change', { target: { valueAsNumber: MIN_CONTEXT_SIZE - 1 } });
+      input.simulate('submit');
+      expect(onChangeCount).toHaveBeenCalledTimes(0);
+    });
+
+    test(`${type}: Warning about limitation of additional records`, () => {
+      if (type === 'predecessors') {
+        expect(findTestSubject(wrapper, 'predecessorsWarningMsg').text()).toBe(
+          'No documents newer than the anchor could be found.'
+        );
+      } else {
+        expect(findTestSubject(wrapper, 'successorsWarningMsg').text()).toBe(
+          'No documents older than the anchor could be found.'
+        );
+      }
+    });
+  });
+});
diff --git a/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/action_bar.tsx b/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/action_bar.tsx
new file mode 100644
index 000000000000..470533b1c618
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/action_bar.tsx
@@ -0,0 +1,190 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React, { useState, useEffect } from 'react';
+import { i18n } from '@osd/i18n';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import {
+  EuiButtonEmpty,
+  EuiFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSpacer,
+} from '@elastic/eui';
+import { ActionBarWarning } from './action_bar_warning';
+import { SurrDocType } from '../../api/context';
+
+export const MAX_CONTEXT_SIZE = 10000; // OpenSearch's default maximum size limit
+export const MIN_CONTEXT_SIZE = 0;
+
+export interface ActionBarProps {
+  /**
+   *  the number of documents fetched initially and added when the load button is clicked
+   */
+  defaultStepSize: number;
+  /**
+   * the number of docs to be displayed
+   */
+  docCount: number;
+  /**
+   *  the number of documents that are  available
+   *  display warning when it's lower than docCount
+   */
+  docCountAvailable: number;
+  /**
+   * is true while the anchor record is fetched
+   */
+  isDisabled: boolean;
+  /**
+   * is true when list entries are fetched
+   */
+  isLoading: boolean;
+  /**
+   * is triggered when the input containing count is changed
+   * @param count
+   */
+  onChangeCount: (type: SurrDocType, count: number) => void;
+  /**
+   * can be `predecessors` or `successors`, usage in context:
+   * predecessors action bar + records (these are newer records)
+   * anchor record
+   * successors records + action bar (these are older records)
+   */
+  type: SurrDocType;
+}
+
+export function ActionBar({
+  defaultStepSize,
+  docCount,
+  docCountAvailable,
+  isDisabled,
+  isLoading,
+  onChangeCount,
+  type,
+}: ActionBarProps) {
+  const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
+  const isSuccessor = type === 'successors';
+  const [newDocCount, setNewDocCount] = useState(docCount);
+  const isValid = (value: number) => value >= MIN_CONTEXT_SIZE && value <= MAX_CONTEXT_SIZE;
+  const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
+    ev.preventDefault();
+    if (newDocCount !== docCount && isValid(newDocCount)) {
+      onChangeCount(type, newDocCount);
+    }
+  };
+
+  useEffect(() => {
+    if (newDocCount !== docCount && newDocCount === 0) {
+      setNewDocCount(docCount);
+    }
+  }, [docCount, newDocCount]);
+
+  return (
+    <I18nProvider>
+      <form onSubmit={onSubmit}>
+        {isSuccessor && <EuiSpacer size="s" />}
+        {isSuccessor && showWarning && (
+          <ActionBarWarning docCount={docCountAvailable} type={type} />
+        )}
+        {isSuccessor && showWarning && <EuiSpacer size="s" />}
+        <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              data-test-subj={`${type}LoadMoreButton`}
+              iconType={isSuccessor ? 'arrowDown' : 'arrowUp'}
+              isDisabled={isDisabled}
+              isLoading={isLoading}
+              onClick={() => {
+                const value = newDocCount + defaultStepSize;
+                if (isValid(value)) {
+                  setNewDocCount(value);
+                  onChangeCount(type, value);
+                }
+              }}
+              flush="right"
+            >
+              <FormattedMessage id="discover.context.loadButtonLabel" defaultMessage="Load" />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFormRow>
+              <EuiFieldNumber
+                aria-label={
+                  isSuccessor
+                    ? i18n.translate('discover.context.olderDocumentsAriaLabel', {
+                        defaultMessage: 'Number of older documents',
+                      })
+                    : i18n.translate('discover.context.newerDocumentsAriaLabel', {
+                        defaultMessage: 'Number of newer documents',
+                      })
+                }
+                className="cxtSizePicker"
+                data-test-subj={`${type}CountPicker`}
+                disabled={isDisabled}
+                min={MIN_CONTEXT_SIZE}
+                max={MAX_CONTEXT_SIZE}
+                onChange={(ev) => {
+                  setNewDocCount(ev.target.valueAsNumber);
+                }}
+                onBlur={() => {
+                  if (newDocCount !== docCount && isValid(newDocCount)) {
+                    onChangeCount(type, newDocCount);
+                  }
+                }}
+                type="number"
+                value={newDocCount >= 0 ? newDocCount : ''}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow display={'center'}>
+              {isSuccessor ? (
+                <FormattedMessage
+                  id="discover.context.olderDocumentsDescription"
+                  defaultMessage="older documents"
+                />
+              ) : (
+                <FormattedMessage
+                  id="discover.context.newerDocumentsDescription"
+                  defaultMessage="newer documents"
+                />
+              )}
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        {!isSuccessor && showWarning && (
+          <ActionBarWarning docCount={docCountAvailable} type={type} />
+        )}
+        {!isSuccessor && <EuiSpacer size="s" />}
+      </form>
+    </I18nProvider>
+  );
+}
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar_warning.tsx b/src/plugins/discover/public/application/components/doc_views/context/components/action_bar/action_bar_warning.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/components/action_bar/action_bar_warning.tsx
rename to src/plugins/discover/public/application/components/doc_views/context/components/action_bar/action_bar_warning.tsx
diff --git a/src/plugins/discover/public/application/components/doc_views/context/utils/context_query_state.ts b/src/plugins/discover/public/application/components/doc_views/context/utils/context_query_state.ts
new file mode 100644
index 000000000000..1960d078634e
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/utils/context_query_state.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { OpenSearchHitRecord, OpenSearchHitRecordList } from '../api/context';
+
+export interface ContextQueryState {
+  anchor: OpenSearchHitRecord;
+  anchorStatus: ContextQueryStatus;
+  predecessors: OpenSearchHitRecordList;
+  predecessorsStatus: ContextQueryStatus;
+  successors: OpenSearchHitRecordList;
+  successorsStatus: ContextQueryStatus;
+}
+
+export interface ContextQueryStatus {
+  value: LOADING_STATUS;
+  reason?: FAILURE_REASONS;
+}
+
+export enum LOADING_STATUS {
+  LOADING = 'loading',
+  LOADED = 'loaded',
+  FAILED = 'failed',
+  UNINITIALIZED = 'uninitialized',
+}
+
+export enum FAILURE_REASONS {
+  UNKNOWN = 'unknown',
+  INVALID_TIEBREAKER = 'invalid_tiebreaker',
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/context/utils/context_state.test.ts b/src/plugins/discover/public/application/components/doc_views/context/utils/context_state.test.ts
new file mode 100644
index 000000000000..0f2930fc3f93
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/utils/context_state.test.ts
@@ -0,0 +1,204 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { getState } from './context_state';
+import { createBrowserHistory, History } from 'history';
+import { FilterManager, Filter } from '../../../../../../../data/public';
+import { coreMock } from '../../../../../../../../core/public/mocks';
+const setupMock = coreMock.createSetup();
+
+describe('Test Discover Context State', () => {
+  let history: History;
+  let state: any;
+  const getCurrentUrl = () => history.createHref(history.location);
+  beforeEach(async () => {
+    history = createBrowserHistory();
+    history.push('/');
+    state = await getState({
+      defaultStepSize: '4',
+      timeFieldName: 'time',
+      history,
+    });
+    state.startSync();
+  });
+  afterEach(() => {
+    state.stopSync();
+  });
+  test('getState function default return', () => {
+    expect(state.appState.getState()).toMatchInlineSnapshot(`
+      Object {
+        "columns": Array [
+          "_source",
+        ],
+        "filters": Array [],
+        "predecessorCount": 4,
+        "sort": Array [
+          "time",
+          "desc",
+        ],
+        "successorCount": 4,
+      }
+    `);
+    expect(state.globalState.getState()).toMatchInlineSnapshot(`null`);
+    expect(state.startSync).toBeDefined();
+    expect(state.stopSync).toBeDefined();
+    expect(state.getFilters()).toStrictEqual([]);
+  });
+  test('getState -> setAppState syncing to url', async () => {
+    state.setAppState({ predecessorCount: 10 });
+    state.flushToUrl();
+    expect(getCurrentUrl()).toMatchInlineSnapshot(
+      `"/#?_a=(columns:!(_source),filters:!(),predecessorCount:10,sort:!(time,desc),successorCount:4)"`
+    );
+  });
+  test('getState -> url to appState syncing', async () => {
+    history.push(
+      '/#?_a=(columns:!(_source),predecessorCount:1,sort:!(time,desc),successorCount:1)'
+    );
+    expect(state.appState.getState()).toMatchInlineSnapshot(`
+      Object {
+        "columns": Array [
+          "_source",
+        ],
+        "predecessorCount": 1,
+        "sort": Array [
+          "time",
+          "desc",
+        ],
+        "successorCount": 1,
+      }
+    `);
+  });
+  test('getState -> url to appState syncing with return to a url without state', async () => {
+    history.push(
+      '/#?_a=(columns:!(_source),predecessorCount:1,sort:!(time,desc),successorCount:1)'
+    );
+    expect(state.appState.getState()).toMatchInlineSnapshot(`
+      Object {
+        "columns": Array [
+          "_source",
+        ],
+        "predecessorCount": 1,
+        "sort": Array [
+          "time",
+          "desc",
+        ],
+        "successorCount": 1,
+      }
+    `);
+    history.push('/');
+    expect(state.appState.getState()).toMatchInlineSnapshot(`
+      Object {
+        "columns": Array [
+          "_source",
+        ],
+        "predecessorCount": 1,
+        "sort": Array [
+          "time",
+          "desc",
+        ],
+        "successorCount": 1,
+      }
+    `);
+  });
+
+  test('getState -> filters', async () => {
+    const filterManager = new FilterManager(setupMock.uiSettings);
+    const filterGlobal = {
+      query: { match: { extension: { query: 'jpg', type: 'phrase' } } },
+      meta: { index: 'logstash-*', negate: false, disabled: false, alias: null },
+    } as Filter;
+    filterManager.setGlobalFilters([filterGlobal]);
+    const filterApp = {
+      query: { match: { extension: { query: 'png', type: 'phrase' } } },
+      meta: { index: 'logstash-*', negate: true, disabled: false, alias: null },
+    } as Filter;
+    filterManager.setAppFilters([filterApp]);
+    state.setFilters(filterManager);
+    expect(state.getFilters()).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "$state": Object {
+            "store": "globalState",
+          },
+          "meta": Object {
+            "alias": null,
+            "disabled": false,
+            "index": "logstash-*",
+            "key": "extension",
+            "negate": false,
+            "params": Object {
+              "query": "jpg",
+            },
+            "type": "phrase",
+            "value": [Function],
+          },
+          "query": Object {
+            "match": Object {
+              "extension": Object {
+                "query": "jpg",
+                "type": "phrase",
+              },
+            },
+          },
+        },
+        Object {
+          "$state": Object {
+            "store": "appState",
+          },
+          "meta": Object {
+            "alias": null,
+            "disabled": false,
+            "index": "logstash-*",
+            "key": "extension",
+            "negate": true,
+            "params": Object {
+              "query": "png",
+            },
+            "type": "phrase",
+            "value": [Function],
+          },
+          "query": Object {
+            "match": Object {
+              "extension": Object {
+                "query": "png",
+                "type": "phrase",
+              },
+            },
+          },
+        },
+      ]
+    `);
+    state.flushToUrl();
+    expect(getCurrentUrl()).toMatchInlineSnapshot(
+      `"/#?_g=(filters:!(('$state':(store:globalState),meta:(alias:!n,disabled:!f,index:'logstash-*',key:extension,negate:!f,params:(query:jpg),type:phrase),query:(match:(extension:(query:jpg,type:phrase))))))&_a=(columns:!(_source),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'logstash-*',key:extension,negate:!t,params:(query:png),type:phrase),query:(match:(extension:(query:png,type:phrase))))),predecessorCount:4,sort:!(time,desc),successorCount:4)"`
+    );
+  });
+});
diff --git a/src/plugins/discover/public/application/components/doc_views/context/utils/context_state.ts b/src/plugins/discover/public/application/components/doc_views/context/utils/context_state.ts
new file mode 100644
index 000000000000..f8173129e641
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/utils/context_state.ts
@@ -0,0 +1,307 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 _ from 'lodash';
+import { History } from 'history';
+import { NotificationsStart } from 'opensearch-dashboards/public';
+import {
+  createStateContainer,
+  createOsdUrlStateStorage,
+  syncStates,
+  BaseStateContainer,
+  withNotifyOnErrors,
+} from '../../../../../../../opensearch_dashboards_utils/public';
+import { opensearchFilters, FilterManager, Filter, Query } from '../../../../../../../data/public';
+
+export interface AppState {
+  /**
+   * Columns displayed in the table, cannot be changed by UI, just in discover's main app
+   */
+  columns: string[];
+  /**
+   * Array of filters
+   */
+  filters: Filter[];
+  /**
+   * Number of records to be fetched before anchor records (newer records)
+   */
+  predecessorCount: number;
+  /**
+   * Sorting of the records to be fetched, assumed to be a legacy parameter
+   */
+  sort: string[];
+  /**
+   * Number of records to be fetched after the anchor records (older records)
+   */
+  successorCount: number;
+  query?: Query;
+}
+
+interface GlobalState {
+  /**
+   * Array of filters
+   */
+  filters: Filter[];
+}
+
+interface GetStateParams {
+  /**
+   * Number of records to be fetched when 'Load' link/button is clicked
+   */
+  defaultStepSize: string;
+  /**
+   * The timefield used for sorting
+   */
+  timeFieldName: string;
+  /**
+   * Determins the use of long vs. short/hashed urls
+   */
+  storeInSessionStorage?: boolean;
+  /**
+   * History instance to use
+   */
+  history: History;
+
+  /**
+   * Core's notifications.toasts service
+   * In case it is passed in,
+   * osdUrlStateStorage will use it notifying about inner errors
+   */
+  toasts?: NotificationsStart['toasts'];
+}
+
+interface GetStateReturn {
+  /**
+   * Global state, the _g part of the URL
+   */
+  globalState: BaseStateContainer<GlobalState>;
+  /**
+   * App state, the _a part of the URL
+   */
+  appState: BaseStateContainer<AppState>;
+  /**
+   * Start sync between state and URL
+   */
+  startSync: () => void;
+  /**
+   * Stop sync between state and URL
+   */
+  stopSync: () => void;
+  /**
+   * Set app state to with a partial new app state
+   */
+  setAppState: (newState: Partial<AppState>) => void;
+  /**
+   * Get all filters, global and app state
+   */
+  getFilters: () => Filter[];
+  /**
+   * Set global state and app state filters by the given FilterManager instance
+   * @param filterManager
+   */
+  setFilters: (filterManager: FilterManager) => void;
+  /**
+   * sync state to URL, used for testing
+   */
+  flushToUrl: (replace?: boolean) => void;
+}
+const GLOBAL_STATE_URL_KEY = '_g';
+const APP_STATE_URL_KEY = '_a';
+
+/**
+ * Builds and returns appState and globalState containers
+ * provides helper functions to start/stop syncing with URL
+ */
+export function getState({
+  defaultStepSize,
+  timeFieldName,
+  storeInSessionStorage = false,
+  history,
+  toasts,
+}: GetStateParams): GetStateReturn {
+  const stateStorage = createOsdUrlStateStorage({
+    useHash: storeInSessionStorage,
+    history,
+    ...(toasts && withNotifyOnErrors(toasts)),
+  });
+
+  const globalStateInitial = stateStorage.get(GLOBAL_STATE_URL_KEY) as GlobalState;
+  const globalStateContainer = createStateContainer<GlobalState>(globalStateInitial);
+
+  const appStateFromUrl = stateStorage.get(APP_STATE_URL_KEY) as AppState;
+  const appStateInitial = createInitialAppState(defaultStepSize, timeFieldName, appStateFromUrl);
+  const appStateContainer = createStateContainer<AppState>(appStateInitial);
+
+  const { start, stop } = syncStates([
+    {
+      storageKey: GLOBAL_STATE_URL_KEY,
+      stateContainer: {
+        ...globalStateContainer,
+        ...{
+          set: (value: GlobalState | null) => {
+            if (value) {
+              globalStateContainer.set(value);
+            }
+          },
+        },
+      },
+      stateStorage,
+    },
+    {
+      storageKey: APP_STATE_URL_KEY,
+      stateContainer: {
+        ...appStateContainer,
+        ...{
+          set: (value: AppState | null) => {
+            if (value) {
+              appStateContainer.set(value);
+            }
+          },
+        },
+      },
+      stateStorage,
+    },
+  ]);
+
+  return {
+    globalState: globalStateContainer,
+    appState: appStateContainer,
+    startSync: start,
+    stopSync: stop,
+    setAppState: (newState: Partial<AppState>) => {
+      const oldState = appStateContainer.getState();
+      const mergedState = { ...oldState, ...newState };
+
+      if (!isEqualState(oldState, mergedState)) {
+        appStateContainer.set(mergedState);
+      }
+    },
+    getFilters: () => [
+      ...getFilters(globalStateContainer.getState()),
+      ...getFilters(appStateContainer.getState()),
+    ],
+    setFilters: (filterManager: FilterManager) => {
+      // global state filters
+      const globalFilters = filterManager.getGlobalFilters();
+      const globalFilterChanged = !isEqualFilters(
+        globalFilters,
+        getFilters(globalStateContainer.getState())
+      );
+      if (globalFilterChanged) {
+        globalStateContainer.set({ filters: globalFilters });
+      }
+      // app state filters
+      const appFilters = filterManager.getAppFilters();
+      const appFilterChanged = !isEqualFilters(
+        appFilters,
+        getFilters(appStateContainer.getState())
+      );
+      if (appFilterChanged) {
+        appStateContainer.set({ ...appStateContainer.getState(), ...{ filters: appFilters } });
+      }
+    },
+    // helper function just needed for testing
+    flushToUrl: (replace?: boolean) => stateStorage.flush({ replace }),
+  };
+}
+
+/**
+ * Helper function to compare 2 different filter states
+ */
+export function isEqualFilters(filtersA: Filter[], filtersB: Filter[]) {
+  if (!filtersA && !filtersB) {
+    return true;
+  } else if (!filtersA || !filtersB) {
+    return false;
+  }
+  return opensearchFilters.compareFilters(
+    filtersA,
+    filtersB,
+    opensearchFilters.COMPARE_ALL_OPTIONS
+  );
+}
+
+/**
+ * Helper function to compare 2 different states, is needed since comparing filters
+ * works differently, doesn't work with _.isEqual
+ */
+function isEqualState(stateA: AppState | GlobalState, stateB: AppState | GlobalState) {
+  if (!stateA && !stateB) {
+    return true;
+  } else if (!stateA || !stateB) {
+    return false;
+  }
+  const { filters: stateAFilters = [], ...stateAPartial } = stateA;
+  const { filters: stateBFilters = [], ...stateBPartial } = stateB;
+  return (
+    _.isEqual(stateAPartial, stateBPartial) &&
+    opensearchFilters.compareFilters(
+      stateAFilters,
+      stateBFilters,
+      opensearchFilters.COMPARE_ALL_OPTIONS
+    )
+  );
+}
+
+/**
+ * Helper function to return array of filter object of a given state
+ */
+function getFilters(state: AppState | GlobalState): Filter[] {
+  if (!state || !Array.isArray(state.filters)) {
+    return [];
+  }
+  return state.filters;
+}
+
+/**
+ * Helper function to return the initial app state, which is a merged object of url state and
+ * default state. The default size is the default number of successor/predecessor records to fetch
+ */
+function createInitialAppState(
+  defaultSize: string,
+  timeFieldName: string,
+  urlState: AppState
+): AppState {
+  const defaultState = {
+    columns: ['_source'],
+    filters: [],
+    predecessorCount: parseInt(defaultSize, 10),
+    sort: [timeFieldName, 'desc'],
+    successorCount: parseInt(defaultSize, 10),
+  };
+  if (typeof urlState !== 'object') {
+    return defaultState;
+  }
+
+  return {
+    ...defaultState,
+    ...urlState,
+  };
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/context/utils/use_context_state.ts b/src/plugins/discover/public/application/components/doc_views/context/utils/use_context_state.ts
new file mode 100644
index 000000000000..02a41f044a1f
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/utils/use_context_state.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import { cloneDeep } from 'lodash';
+import { CONTEXT_DEFAULT_SIZE_SETTING } from '../../../../../../common';
+import { DiscoverServices } from '../../../../../build_services';
+import { AppState, getState } from './context_state';
+import { IndexPattern } from '../../../../../opensearch_dashboards_services';
+
+export interface Props {
+  services: DiscoverServices;
+  indexPattern: IndexPattern;
+}
+
+export const useContextState = ({ services, indexPattern }: Props) => {
+  const { uiSettings, history, core, filterManager } = services;
+
+  const {
+    appState: appStateContainer,
+    setAppState: setAppStateContainer,
+    startSync,
+    stopSync,
+    getFilters,
+    setFilters,
+    flushToUrl,
+  } = useMemo(() => {
+    return getState({
+      defaultStepSize: uiSettings.get(CONTEXT_DEFAULT_SIZE_SETTING),
+      timeFieldName: indexPattern.timeFieldName,
+      storeInSessionStorage: uiSettings.get('state:storeInSessionStorage'),
+      history: history(),
+      toasts: core.notifications.toasts,
+    });
+  }, [uiSettings, history, core.notifications.toasts, indexPattern.timeFieldName]);
+
+  const [contextAppState, setContextState] = useState<AppState>(appStateContainer.getState());
+
+  useEffect(() => {
+    filterManager.setFilters(cloneDeep(getFilters()));
+
+    startSync();
+
+    const unsubscribeFromAppStateChanges = appStateContainer.subscribe((newState) => {
+      setContextState((currentState) => ({ ...currentState, ...newState }));
+    });
+
+    const filterObservable = filterManager.getUpdates$().subscribe(() => {
+      setFilters(filterManager);
+    });
+
+    return () => {
+      stopSync();
+      unsubscribeFromAppStateChanges();
+      filterObservable.unsubscribe();
+    };
+  }, [filterManager, getFilters, setFilters, startSync, stopSync, appStateContainer]);
+
+  const setContextAppState = (newValues: Partial<AppState>) => {
+    for (const [key, value] of Object.entries(newValues)) {
+      setAppStateContainer({ [key]: value });
+      flushToUrl(true);
+    }
+  };
+
+  return { contextAppState, setContextAppState };
+};
diff --git a/src/plugins/discover/public/application/components/doc_views/context/utils/use_query_actions.ts b/src/plugins/discover/public/application/components/doc_views/context/utils/use_query_actions.ts
new file mode 100644
index 000000000000..8d4276aaaf2f
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context/utils/use_query_actions.ts
@@ -0,0 +1,188 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+import { useMemo, useCallback, useState } from 'react';
+
+import { Filter } from '../../../../../../../data/public';
+import { fetchAnchor } from '../api/anchor';
+import { OpenSearchHitRecord, fetchSurroundingDocs } from '../api/context';
+import { DiscoverServices } from '../../../../../build_services';
+import { useOpenSearchDashboards } from '../../../../../../../opensearch_dashboards_react/public';
+import { CONTEXT_TIE_BREAKER_FIELDS_SETTING } from '../../../../../../common';
+import { getFirstSortableField, SortDirection } from '../api/utils/sorting';
+import { SurrDocType } from '../api/context';
+import { IndexPattern } from '../../../../../opensearch_dashboards_services';
+import { ContextQueryState, FAILURE_REASONS, LOADING_STATUS } from './context_query_state';
+
+const initialState: ContextQueryState = {
+  anchor: {} as OpenSearchHitRecord,
+  predecessors: [],
+  successors: [],
+  anchorStatus: { value: LOADING_STATUS.UNINITIALIZED },
+  predecessorsStatus: { value: LOADING_STATUS.UNINITIALIZED },
+  successorsStatus: { value: LOADING_STATUS.UNINITIALIZED },
+};
+
+export function useQueryActions(anchorId: string, indexPattern: IndexPattern) {
+  const { services } = useOpenSearchDashboards<DiscoverServices>();
+  const { data, uiSettings, toastNotifications } = services;
+  const searchSource = useMemo(() => {
+    return data.search.searchSource.createEmpty();
+  }, [data.search.searchSource]);
+  const tieBreakerField = useMemo(
+    () => getFirstSortableField(indexPattern, uiSettings.get(CONTEXT_TIE_BREAKER_FIELDS_SETTING)),
+    [uiSettings, indexPattern]
+  );
+  const [contextQueryState, setContextQueryState] = useState<ContextQueryState>(initialState);
+
+  const fetchAnchorRow = useCallback(async () => {
+    if (!tieBreakerField) {
+      setContextQueryState((prevState) => ({
+        ...prevState,
+        anchorStatus: {
+          value: LOADING_STATUS.FAILED,
+          reason: FAILURE_REASONS.INVALID_TIEBREAKER,
+        },
+      }));
+      return;
+    }
+
+    try {
+      setContextQueryState((prevState) => ({
+        ...prevState,
+        anchorStatus: { value: LOADING_STATUS.LOADING },
+      }));
+      const sort = [
+        { [indexPattern.timeFieldName!]: SortDirection.desc },
+        { [tieBreakerField]: SortDirection.desc },
+      ];
+      const fetchAnchorResult = await fetchAnchor(anchorId, indexPattern, searchSource, sort);
+      setContextQueryState((prevState) => ({
+        ...prevState,
+        anchor: fetchAnchorResult,
+        anchorStatus: { value: LOADING_STATUS.LOADED },
+      }));
+      return fetchAnchorResult;
+    } catch (error) {
+      setContextQueryState((prevState) => ({
+        ...prevState,
+        anchorStatus: { value: LOADING_STATUS.FAILED, reason: FAILURE_REASONS.UNKNOWN },
+      }));
+      toastNotifications.addDanger({
+        title: i18n.translate('discover.context.unableToLoadAnchorDocumentDescription', {
+          defaultMessage: 'Unable to fetch anchor document',
+        }),
+        text: 'fail',
+      });
+    }
+  }, [anchorId, indexPattern, searchSource, tieBreakerField, toastNotifications]);
+
+  const fetchSurroundingRows = useCallback(
+    async (type: SurrDocType, count: number, filters: Filter[], anchor?: OpenSearchHitRecord) => {
+      try {
+        if (type === SurrDocType.PREDECESSORS) {
+          setContextQueryState((prevState) => ({
+            ...prevState,
+            predecessorsStatus: { value: LOADING_STATUS.LOADING },
+          }));
+        } else {
+          setContextQueryState((prevState) => ({
+            ...prevState,
+            successorsStatus: { value: LOADING_STATUS.LOADING },
+          }));
+        }
+        const fetchedAchor = anchor || contextQueryState.anchor;
+
+        const rows = await fetchSurroundingDocs(
+          type,
+          indexPattern,
+          fetchedAchor as OpenSearchHitRecord,
+          tieBreakerField,
+          SortDirection.desc,
+          count,
+          filters
+        );
+        if (type === SurrDocType.PREDECESSORS) {
+          setContextQueryState((prevState) => ({
+            ...prevState,
+            predecessors: rows,
+            predecessorsStatus: { value: LOADING_STATUS.LOADED },
+          }));
+        } else {
+          setContextQueryState((prevState) => ({
+            ...prevState,
+            successors: rows,
+            successorsStatus: { value: LOADING_STATUS.LOADED },
+          }));
+        }
+      } catch (error) {
+        if (type === SurrDocType.PREDECESSORS) {
+          setContextQueryState((prevState) => ({
+            ...prevState,
+            predecessorsStatus: { value: LOADING_STATUS.FAILED, reason: FAILURE_REASONS.UNKNOWN },
+          }));
+        } else {
+          setContextQueryState((prevState) => ({
+            ...prevState,
+            successorsStatus: { value: LOADING_STATUS.FAILED, reason: FAILURE_REASONS.UNKNOWN },
+          }));
+        }
+        toastNotifications.addDanger({
+          title: i18n.translate('discover.context.unableToLoadSurroundingDocumentDescription', {
+            defaultMessage: 'Unable to fetch surrounding documents',
+          }),
+          text: 'fail',
+        });
+      }
+    },
+    [contextQueryState.anchor, indexPattern, tieBreakerField, toastNotifications]
+  );
+
+  const fetchContextRows = useCallback(
+    async (
+      predecessorCount: number,
+      successorCount: number,
+      filters: Filter[],
+      anchor?: OpenSearchHitRecord
+    ) =>
+      Promise.all([
+        fetchSurroundingRows(SurrDocType.PREDECESSORS, predecessorCount, filters, anchor),
+        fetchSurroundingRows(SurrDocType.SUCCESSORS, successorCount, filters, anchor),
+      ]),
+    [fetchSurroundingRows]
+  );
+
+  const fetchAllRows = useCallback(
+    async (predecessorCount: number, successorCount: number, filters: Filter[]) => {
+      try {
+        await fetchAnchorRow().then(
+          (anchor) => anchor && fetchContextRows(predecessorCount, successorCount, filters, anchor)
+        );
+      } catch (error) {
+        toastNotifications.addDanger({
+          title: i18n.translate('discover.context.unableToLoadDocumentDescription', {
+            defaultMessage: 'Unable to fetch all documents',
+          }),
+          text: 'fail',
+        });
+      }
+    },
+    [fetchAnchorRow, fetchContextRows, toastNotifications]
+  );
+
+  const resetContextQueryState = useCallback(() => {
+    setContextQueryState(initialState);
+  }, []);
+
+  return {
+    contextQueryState,
+    fetchAnchorRow,
+    fetchAllRows,
+    fetchContextRows,
+    fetchSurroundingRows,
+    resetContextQueryState,
+  };
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/context_app.tsx b/src/plugins/discover/public/application/components/doc_views/context_app.tsx
new file mode 100644
index 000000000000..b6fe75473b58
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/context_app.tsx
@@ -0,0 +1,125 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, Fragment } from 'react';
+import { useCallback } from 'react';
+import { SurrDocType } from './context/api/context';
+import { ActionBar } from './context/components/action_bar/action_bar';
+import { CONTEXT_STEP_SETTING, DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
+import { DiscoverViewServices } from '../../../build_services';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { LOADING_STATUS } from './context/utils/context_query_state';
+import { SortDirection } from '../../../../../data/public';
+import { DataGridTable } from '../data_grid/data_grid_table';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { AppState } from './context/utils/context_state';
+
+export interface Props {
+  onAddFilter: DocViewFilterFn;
+  rows: any[];
+  indexPattern: IndexPattern;
+  setAppState: (state: Partial<AppState>) => void;
+  onAddColumn?: (col: string) => void;
+  onRemoveColumn?: (col: string) => void;
+  onSetColumns?: (cols: string[]) => void;
+  onSetSort?: (s: Array<[string, string]>) => void;
+  contextQueryState: any;
+  appState: AppState;
+}
+
+export function ContextApp({
+  onAddFilter,
+  rows,
+  indexPattern,
+  setAppState,
+  contextQueryState,
+  appState,
+}: Props) {
+  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+  const { uiSettings } = services;
+  const defaultStepSize = useMemo(() => parseInt(uiSettings.get(CONTEXT_STEP_SETTING), 10), [
+    uiSettings,
+  ]);
+  const { columns, predecessorCount, successorCount } = appState;
+  const {
+    anchorStatus,
+    predecessorsStatus,
+    successorsStatus,
+    predecessors,
+    successors,
+  } = contextQueryState;
+  const isAnchorLoading =
+    anchorStatus.value === LOADING_STATUS.LOADING ||
+    anchorStatus.value === LOADING_STATUS.UNINITIALIZED;
+  const isPredecessorLoading =
+    predecessorsStatus.value === LOADING_STATUS.LOADING ||
+    predecessorsStatus.value === LOADING_STATUS.UNINITIALIZED;
+  const isSuccessorLoading =
+    successorsStatus.value === LOADING_STATUS.LOADING ||
+    successorsStatus.value === LOADING_STATUS.UNINITIALIZED;
+
+  const onChangeCount = useCallback(
+    (type: SurrDocType, count: number) => {
+      const countType = type === SurrDocType.SUCCESSORS ? 'successorCount' : 'predecessorCount';
+      if (countType === 'successorCount') {
+        setAppState({ successorCount: count });
+      } else {
+        setAppState({ predecessorCount: count });
+      }
+    },
+    [setAppState]
+  );
+
+  const sort = useMemo(() => {
+    return [[indexPattern.timeFieldName!, SortDirection.desc]];
+  }, [indexPattern]);
+
+  const displayTimeColumn = useMemo(
+    () => !uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased(),
+    [indexPattern, uiSettings]
+  );
+
+  return (
+    <Fragment>
+      <ActionBar
+        defaultStepSize={defaultStepSize}
+        docCount={predecessorCount}
+        docCountAvailable={predecessors.length}
+        isDisabled={isAnchorLoading}
+        isLoading={isPredecessorLoading}
+        onChangeCount={onChangeCount}
+        type={SurrDocType.PREDECESSORS}
+      />
+      <div className="dscDocsGrid">
+        <DataGridTable
+          aria-label={'ContextTable'}
+          columns={columns}
+          indexPattern={indexPattern}
+          onAddColumn={() => {}}
+          onFilter={onAddFilter}
+          onRemoveColumn={() => {}}
+          onSetColumns={() => {}}
+          onSort={() => {}}
+          sort={sort}
+          rows={rows}
+          displayTimeColumn={displayTimeColumn}
+          services={services}
+          isToolbarVisible={false}
+          isContextView={true}
+        />
+      </div>
+      <ActionBar
+        defaultStepSize={defaultStepSize}
+        docCount={successorCount}
+        docCountAvailable={successors.length}
+        isDisabled={isAnchorLoading}
+        isLoading={isSuccessorLoading}
+        onChangeCount={onChangeCount}
+        type={SurrDocType.SUCCESSORS}
+      />
+    </Fragment>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/doc_views_router.tsx b/src/plugins/discover/public/application/components/doc_views/doc_views_router.tsx
new file mode 100644
index 000000000000..83838805609d
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/doc_views_router.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Switch, Router, Route, Redirect } from 'react-router-dom';
+import { History } from 'history';
+import { getServices } from '../../../opensearch_dashboards_services';
+import { OpenSearchDashboardsContextProvider } from '../../../../../opensearch_dashboards_react/public';
+import { SingleDocApp } from './single_doc_app';
+import { SurroundingDocsApp } from './surrounding_docs_app';
+
+export const docViewsRouter = (history: History) => {
+  const services = getServices();
+  if (services === undefined) return <div>{'loading...'}</div>;
+
+  return (
+    <OpenSearchDashboardsContextProvider services={services}>
+      <Router history={history}>
+        <Switch>
+          <Route path="/context/:indexPatternId/:id" component={SurroundingDocsApp} />
+          <Route
+            path="/doc/:indexPattern/:index/:type"
+            render={(props) => (
+              <Redirect
+                to={`/doc/${props.match.params.indexPattern}/${props.match.params.index}`}
+              />
+            )}
+          />
+          <Route path="/doc/:indexPatternId/:index" component={SingleDocApp} />
+        </Switch>
+      </Router>
+    </OpenSearchDashboardsContextProvider>
+  );
+};
diff --git a/src/plugins/discover/public/application/components/doc_views/generate_doc_views_url.ts b/src/plugins/discover/public/application/components/doc_views/generate_doc_views_url.ts
new file mode 100644
index 000000000000..9da5536c90a4
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/generate_doc_views_url.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Generate an updated URL by removing the "data-explorer" segment
+ * from the current location and appending the provided URL.
+ *
+ * @param {string} url - The URL to append to the current location.
+ * @returns {string} The updated URL.
+ */
+export function generateDocViewsUrl(url: string) {
+  // split the current location into segments
+  const urlSegments = window.location.href.split('/');
+  // find the index of the "data-explorer" segment
+  const indexOfDataExplorerInUrl = urlSegments.indexOf('data-explorer');
+  // if "data-explorer" is found, remove it from the array
+  if (indexOfDataExplorerInUrl !== -1) {
+    urlSegments.splice(indexOfDataExplorerInUrl, 1);
+  }
+  // create a new URL object from the current location
+  const newUrl = urlSegments.join('/');
+  const updatedUrlSegments = newUrl.split('#');
+  // append the provided URL to the current location
+  updatedUrlSegments[1] = url;
+  // join the segments to form the doc views URL
+  const docViewsUrl = updatedUrlSegments.join('');
+  return docViewsUrl;
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/index.tsx b/src/plugins/discover/public/application/components/doc_views/index.tsx
new file mode 100644
index 000000000000..57a7faa6147e
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/index.tsx
@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { toMountPoint } from '../../../../../opensearch_dashboards_react/public';
+import { docViewsRouter } from './doc_views_router';
+import { getServices } from '../../../opensearch_dashboards_services';
+
+export const renderDocView = (element: HTMLElement) => {
+  const { history } = getServices();
+  const unmount = toMountPoint(docViewsRouter(history()))(element);
+  return unmount;
+};
diff --git a/src/plugins/discover/public/application/components/doc_views/single_doc_app.tsx b/src/plugins/discover/public/application/components/doc_views/single_doc_app.tsx
new file mode 100644
index 000000000000..4fca5e130738
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/single_doc_app.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverServices } from '../../../build_services';
+import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { Doc } from '../doc/doc';
+
+export interface SingleDocUrlParams {
+  index: string;
+  indexPatternId: string;
+}
+
+function useQueryString() {
+  return new URLSearchParams(useLocation().search);
+}
+
+export function SingleDocApp() {
+  const {
+    services: { chrome, timefilter, indexPatterns },
+  } = useOpenSearchDashboards<DiscoverServices>();
+
+  const { index, indexPatternId } = useParams<SingleDocUrlParams>();
+  const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(undefined);
+  const [error, setError] = useState<Error | null>(null);
+
+  // get query string
+  const query = useQueryString();
+  // get doc id from query string
+  const docId = query.get('id') || '';
+
+  useEffect(() => {
+    async function getIndexPatternById() {
+      try {
+        const ip = await indexPatterns.get(indexPatternId);
+        setIndexPattern(ip);
+      } catch (e) {
+        setError(e);
+      }
+    }
+    getIndexPatternById();
+  }, [indexPatternId, indexPatterns]);
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      ...getRootBreadcrumbs(),
+      {
+        text: i18n.translate('discover.single.breadcrumb', {
+          defaultMessage: '{index}#{docId}',
+          values: {
+            index,
+            docId,
+          },
+        }),
+      },
+    ]);
+  }, [chrome, index, docId]);
+
+  useEffect(() => {
+    timefilter.disableAutoRefreshSelector();
+    timefilter.disableTimeRangeSelector();
+  });
+
+  if (error) {
+    return <div>Error fetching index pattern: {error.message}</div>;
+  }
+
+  if (!indexPattern) {
+    return <div>Index pattern loading</div>;
+  }
+
+  return (
+    <div className="single doc view">
+      <Doc
+        id={docId}
+        index={index}
+        indexPatternId={indexPatternId}
+        indexPatternService={indexPatterns}
+      />
+    </div>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/surrounding_docs_app.tsx b/src/plugins/discover/public/application/components/doc_views/surrounding_docs_app.tsx
new file mode 100644
index 000000000000..99b3cac1f5fa
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/surrounding_docs_app.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverServices } from '../../../build_services';
+import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
+import { SurroundingDocsView } from './surrounding_docs_view';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { PLUGIN_ID } from '../../../../common';
+
+export interface SurroundingDocsUrlParams {
+  id: string;
+  indexPatternId: string;
+}
+
+export function SurroundingDocsApp() {
+  const {
+    services: {
+      chrome,
+      indexPatterns,
+      core: {
+        application: { getUrlForApp },
+      },
+    },
+  } = useOpenSearchDashboards<DiscoverServices>();
+  const baseUrl = getUrlForApp(PLUGIN_ID);
+  const { id, indexPatternId } = useParams<SurroundingDocsUrlParams>();
+  const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(undefined);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function getIndexPatternById() {
+      try {
+        const ip = await indexPatterns.get(indexPatternId);
+        setIndexPattern(ip);
+      } catch (e) {
+        setError(e);
+      }
+    }
+    getIndexPatternById();
+  }, [indexPatternId, indexPatterns]);
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      ...getRootBreadcrumbs(baseUrl),
+      {
+        text: i18n.translate('discover.context.breadcrumb', {
+          defaultMessage: `Context of #{docId}`,
+          values: {
+            docId: id,
+          },
+        }),
+      },
+    ]);
+  }, [id, chrome, baseUrl]);
+
+  if (error) {
+    return <div>Error fetching index pattern: {error.message}</div>;
+  }
+
+  if (!indexPattern) {
+    return <div>Index pattern loading</div>;
+  }
+  return <SurroundingDocsView id={id} indexPattern={indexPattern} />;
+}
diff --git a/src/plugins/discover/public/application/components/doc_views/surrounding_docs_view.tsx b/src/plugins/discover/public/application/components/doc_views/surrounding_docs_view.tsx
new file mode 100644
index 000000000000..f32dabf67c99
--- /dev/null
+++ b/src/plugins/discover/public/application/components/doc_views/surrounding_docs_view.tsx
@@ -0,0 +1,137 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useEffect, useRef, useCallback, useMemo } from 'react';
+import { EuiPageContent, EuiPage } from '@elastic/eui';
+import { cloneDeep } from 'lodash';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverServices } from '../../../build_services';
+import { IndexPatternField, opensearchFilters } from '../../../../../data/public';
+import { AppState, isEqualFilters } from './context/utils/context_state';
+import { useContextState } from './context/utils/use_context_state';
+import { useQueryActions } from './context/utils/use_query_actions';
+import { ContextApp } from './context_app';
+import { LOADING_STATUS } from './context/utils/context_query_state';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { SurrDocType } from './context/api/context';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+
+export interface SurroundingDocsViewParams {
+  id: string;
+  indexPattern: IndexPattern;
+}
+
+export const SurroundingDocsView = ({ id, indexPattern }: SurroundingDocsViewParams) => {
+  const { services } = useOpenSearchDashboards<DiscoverServices>();
+  const {
+    navigation: {
+      ui: { TopNavMenu },
+    },
+    data: {
+      query: { filterManager },
+    },
+  } = services;
+
+  const { contextAppState, setContextAppState } = useContextState({ services, indexPattern });
+  const currentAppState = useRef<AppState>();
+
+  const {
+    contextQueryState,
+    fetchContextRows,
+    fetchAllRows,
+    fetchSurroundingRows,
+    resetContextQueryState,
+  } = useQueryActions(id, indexPattern);
+
+  // derive loading state
+  const isLoading = [
+    contextQueryState.anchorStatus.value,
+    contextQueryState.predecessorsStatus.value,
+    contextQueryState.successorsStatus.value,
+  ].some((status) => status === LOADING_STATUS.LOADING || status === LOADING_STATUS.UNINITIALIZED);
+
+  // derive rows
+  const rows = useMemo(
+    () => [
+      ...(contextQueryState.predecessors || []),
+      ...(contextQueryState.anchor ? [contextQueryState.anchor] : []),
+      ...(contextQueryState.successors || []),
+    ],
+    [contextQueryState.predecessors, contextQueryState.anchor, contextQueryState.successors]
+  );
+
+  // data fetch logic
+  useEffect(() => {
+    if (currentAppState.current) {
+      currentAppState.current = undefined;
+      resetContextQueryState();
+    }
+  }, [id, resetContextQueryState]);
+
+  useEffect(() => {
+    const { predecessorCount, successorCount, filters } = contextAppState;
+    if (!currentAppState.current) {
+      fetchAllRows(predecessorCount, successorCount, filters);
+    } else if (currentAppState.current.predecessorCount !== predecessorCount) {
+      fetchSurroundingRows(SurrDocType.PREDECESSORS, predecessorCount, filters);
+    } else if (currentAppState.current.successorCount !== successorCount) {
+      fetchSurroundingRows(SurrDocType.SUCCESSORS, successorCount, filters);
+    } else if (!isEqualFilters(currentAppState.current.filters, filters)) {
+      fetchContextRows(contextAppState.predecessorCount, successorCount, filters);
+    }
+
+    currentAppState.current = cloneDeep(contextAppState);
+  }, [contextAppState, id, fetchContextRows, fetchAllRows, fetchSurroundingRows]);
+
+  // add filter logic
+  const onAddFilter = useCallback(
+    (field: IndexPatternField, values: string, operation: '+' | '-') => {
+      const newFilters = opensearchFilters.generateFilters(
+        filterManager,
+        field,
+        values,
+        operation,
+        indexPattern.id
+      );
+      return filterManager.addFilters(newFilters);
+    },
+    [filterManager, indexPattern]
+  );
+
+  // memoize context app
+  const contextAppMemoized = useMemo(
+    () => (
+      <ContextApp
+        onAddFilter={onAddFilter as DocViewFilterFn}
+        rows={rows}
+        indexPattern={indexPattern}
+        setAppState={setContextAppState}
+        contextQueryState={contextQueryState}
+        appState={contextAppState}
+      />
+    ),
+    [onAddFilter, rows, indexPattern, setContextAppState, contextQueryState, contextAppState]
+  );
+
+  return (
+    !isLoading && (
+      <Fragment>
+        <TopNavMenu
+          appName={'discover.context.surroundingDocs.topNavMenu'}
+          showSearchBar={true}
+          showQueryBar={false}
+          showDatePicker={false}
+          indexPatterns={[indexPattern]}
+          useDefaultBehaviors={true}
+        />
+        <EuiPage className="discover.context.appPage">
+          <EuiPageContent paddingSize="s" className="dscDocsContent">
+            {contextAppMemoized}
+          </EuiPageContent>
+        </EuiPage>
+      </Fragment>
+    )
+  );
+};
diff --git a/src/plugins/discover/public/application/components/help_menu/help_menu_util.ts b/src/plugins/discover/public/application/components/help_menu/help_menu_util.ts
new file mode 100644
index 000000000000..47bf0dbdcf90
--- /dev/null
+++ b/src/plugins/discover/public/application/components/help_menu/help_menu_util.ts
@@ -0,0 +1,49 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+import { ChromeStart } from 'opensearch-dashboards/public';
+import { getServices } from '../../../opensearch_dashboards_services';
+
+const { docLinks } = getServices();
+
+export function addHelpMenuToAppChrome(chrome: ChromeStart) {
+  chrome.setHelpExtension({
+    appName: i18n.translate('discover.helpMenu.appName', {
+      defaultMessage: 'Discover',
+    }),
+    links: [
+      {
+        linkType: 'documentation',
+        href: `${docLinks.links.opensearchDashboards.introduction}`,
+      },
+    ],
+  });
+}
diff --git a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.scss b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.scss
new file mode 100644
index 000000000000..051ab642c1cf
--- /dev/null
+++ b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.scss
@@ -0,0 +1,4 @@
+.discoverNoResults {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
index 697c7a136d60..dc12ba4581fc 100644
--- a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
+++ b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
@@ -28,20 +28,24 @@
  * under the License.
  */
 
+import './loading_spinner.scss';
 import React from 'react';
-import { EuiLoadingSpinner, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiPanel, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 
 export function LoadingSpinner() {
   return (
-    <>
-      <EuiTitle size="s" data-test-subj="loadingSpinnerText">
-        <h2>
-          <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
-        </h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <EuiLoadingSpinner size="l" data-test-subj="loadingSpinner" />
-    </>
+    <EuiPanel hasBorder={false} hasShadow={false} color="transparent" className="discoverNoResults">
+      <EuiEmptyPrompt
+        icon={<EuiLoadingSpinner data-test-subj="loadingSpinner" size="xl" />}
+        title={
+          <EuiTitle size="s" data-test-subj="loadingSpinnerText">
+            <h2>
+              <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
+            </h2>
+          </EuiTitle>
+        }
+      />
+    </EuiPanel>
   );
 }
diff --git a/src/plugins/discover/public/application/components/no_results/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx
new file mode 100644
index 000000000000..ad7bab0e81e9
--- /dev/null
+++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx
@@ -0,0 +1,212 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React, { Fragment } from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+
+import {
+  EuiCallOut,
+  EuiCode,
+  EuiDescriptionList,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { getServices } from '../../../opensearch_dashboards_services';
+
+interface Props {
+  timeFieldName?: string;
+  queryLanguage?: string;
+}
+
+export const DiscoverNoResults = ({ timeFieldName, queryLanguage }: Props) => {
+  let timeFieldMessage;
+
+  if (timeFieldName) {
+    timeFieldMessage = (
+      <Fragment>
+        <EuiSpacer size="xl" />
+
+        <EuiText>
+          <h2 data-test-subj="discoverNoResultsTimefilter">
+            <FormattedMessage
+              id="discover.noResults.expandYourTimeRangeTitle"
+              defaultMessage="Expand your time range"
+            />
+          </h2>
+
+          <p>
+            <FormattedMessage
+              id="discover.noResults.queryMayNotMatchTitle"
+              defaultMessage="One or more of the indices you&rsquo;re looking at contains a date field. Your query may
+                  not match anything in the current time range, or there may not be any data at all in
+                  the currently selected time range. You can try changing the time range to one which contains data."
+            />
+          </p>
+        </EuiText>
+      </Fragment>
+    );
+  }
+
+  let luceneQueryMessage;
+
+  if (queryLanguage === 'lucene') {
+    const searchExamples = [
+      {
+        description: <EuiCode>200</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.anyField200StatusCodeExampleTitle"
+                defaultMessage="Find requests that contain the number 200, in any field"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+      {
+        description: <EuiCode>status:200</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.statusField200StatusCodeExampleTitle"
+                defaultMessage="Find 200 in the status field"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+      {
+        description: <EuiCode>status:[400 TO 499]</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.400to499StatusCodeExampleTitle"
+                defaultMessage="Find all status codes between 400-499"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+      {
+        description: <EuiCode>status:[400 TO 499] AND extension:PHP</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.400to499StatusCodeWithPhpExtensionExampleTitle"
+                defaultMessage="Find status codes 400-499 with the extension php"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+      {
+        description: <EuiCode>status:[400 TO 499] AND (extension:php OR extension:html)</EuiCode>,
+        title: (
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="discover.noResults.searchExamples.400to499StatusCodeWithPhpOrHtmlExtensionExampleTitle"
+                defaultMessage="Find status codes 400-499 with the extension php or html"
+              />
+            </strong>
+          </EuiText>
+        ),
+      },
+    ];
+
+    luceneQueryMessage = (
+      <Fragment>
+        <EuiSpacer size="xl" />
+
+        <EuiText>
+          <h3>
+            <FormattedMessage
+              id="discover.noResults.searchExamples.refineYourQueryTitle"
+              defaultMessage="Refine your query"
+            />
+          </h3>
+
+          <p>
+            <FormattedMessage
+              id="discover.noResults.searchExamples.howTosearchForWebServerLogsDescription"
+              defaultMessage="The search bar at the top uses OpenSearch&rsquo;s support for Lucene {queryStringSyntaxLink}.
+                Here are some examples of how you can search for web server logs that have been parsed into a few fields."
+              values={{
+                queryStringSyntaxLink: (
+                  <EuiLink
+                    target="_blank"
+                    href={getServices().docLinks.links.opensearch.queryDSL.base}
+                  >
+                    <FormattedMessage
+                      id="discover.noResults.searchExamples.queryStringSyntaxLinkText"
+                      defaultMessage="Query String syntax"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+
+        <EuiSpacer size="m" />
+
+        <EuiDescriptionList type="column" listItems={searchExamples} />
+
+        <EuiSpacer size="xl" />
+      </Fragment>
+    );
+  }
+
+  return (
+    <I18nProvider>
+      <EuiPanel hasBorder={false} hasShadow={false} color="transparent">
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+              defaultMessage="No results match your search criteria"
+            />
+          }
+          color="warning"
+          iconType="help"
+          data-test-subj="discoverNoResults"
+        />
+        {timeFieldMessage}
+        {luceneQueryMessage}
+      </EuiPanel>
+    </I18nProvider>
+  );
+};
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx
index 1b384a4b5550..29d78448f087 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx
@@ -30,10 +30,8 @@
 
 import React from 'react';
 // @ts-ignore
-import { findTestSubject } from '@elastic/eui/lib/test';
-// @ts-ignore
 import stubbedLogstashFields from 'fixtures/logstash_fields';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { render, screen, fireEvent } from 'test_utils/testing_lib_helpers';
 import { DiscoverField } from './discover_field';
 import { coreMock } from '../../../../../../core/public/mocks';
 import { IndexPatternField } from '../../../../../data/public';
@@ -63,7 +61,7 @@ jest.mock('../../../opensearch_dashboards_services', () => ({
   }),
 }));
 
-function getComponent({
+function getProps({
   selected = false,
   showDetails = false,
   useShortDots = false,
@@ -110,24 +108,33 @@ function getComponent({
     selected,
     useShortDots,
   };
-  const comp = mountWithIntl(<DiscoverField {...props} />);
-  return { comp, props };
+
+  return props;
 }
 
 describe('discover sidebar field', function () {
-  it('should allow selecting fields', function () {
-    const { comp, props } = getComponent({});
-    findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
+  it('should allow selecting fields', async function () {
+    const props = getProps({});
+    render(<DiscoverField {...props} />);
+
+    await fireEvent.click(screen.getByTestId('fieldToggle-bytes'));
+
     expect(props.onAddField).toHaveBeenCalledWith('bytes');
   });
-  it('should allow deselecting fields', function () {
-    const { comp, props } = getComponent({ selected: true });
-    findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
+  it('should allow deselecting fields', async function () {
+    const props = getProps({ selected: true });
+    render(<DiscoverField {...props} />);
+
+    await fireEvent.click(screen.getByTestId('fieldToggle-bytes'));
+
     expect(props.onRemoveField).toHaveBeenCalledWith('bytes');
   });
-  it('should trigger getDetails', function () {
-    const { comp, props } = getComponent({ selected: true });
-    findTestSubject(comp, 'field-bytes-showDetails').simulate('click');
+  it('should trigger getDetails', async function () {
+    const props = getProps({ selected: true });
+    render(<DiscoverField {...props} />);
+
+    await fireEvent.click(screen.getByTestId('field-bytes-showDetails'));
+
     expect(props.getDetails).toHaveBeenCalledWith(props.field);
   });
   it('should not allow clicking on _source', function () {
@@ -142,11 +149,12 @@ describe('discover sidebar field', function () {
       },
       '_source'
     );
-    const { comp, props } = getComponent({
+    const props = getProps({
       selected: true,
       field,
     });
-    findTestSubject(comp, 'field-_source-showDetails').simulate('click');
-    expect(props.getDetails).not.toHaveBeenCalled();
+    render(<DiscoverField {...props} />);
+
+    expect(screen.queryByTestId('field-_source-showDetails')).toBeNull();
   });
 });
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
index e807267435eb..73dc40a262e0 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -29,7 +29,15 @@
  */
 
 import React, { useState } from 'react';
-import { EuiPopover, EuiPopoverTitle, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import {
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiButtonIcon,
+  EuiToolTip,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { DiscoverFieldDetails } from './discover_field_details';
 import { FieldIcon, FieldButton } from '../../../../../opensearch_dashboards_react/public';
@@ -79,17 +87,17 @@ export interface DiscoverFieldProps {
   useShortDots?: boolean;
 }
 
-export function DiscoverField({
-  columns,
+export const DiscoverField = ({
   field,
-  indexPattern,
+  selected,
   onAddField,
   onRemoveField,
+  columns,
+  indexPattern,
   onAddFilter,
   getDetails,
-  selected,
   useShortDots,
-}: DiscoverFieldProps) {
+}: DiscoverFieldProps) => {
   const addLabelAria = i18n.translate('discover.fieldChooser.discoverField.addButtonAriaLabel', {
     defaultMessage: 'Add {field} to table',
     values: { field: field.name },
@@ -101,6 +109,11 @@ export function DiscoverField({
       values: { field: field.name },
     }
   );
+  const infoLabelAria = i18n.translate('discover.fieldChooser.discoverField.infoButtonAriaLabel', {
+    defaultMessage: 'View {field} summary',
+    values: { field: field.name },
+  });
+  const isSourceField = field.name === '_source';
 
   const [infoIsOpen, setOpen] = useState(false);
 
@@ -112,10 +125,6 @@ export function DiscoverField({
     }
   };
 
-  function togglePopover() {
-    setOpen(!infoIsOpen);
-  }
-
   function wrapOnDot(str?: string) {
     // u200B is a non-width white-space character, which allows
     // the browser to efficiently word-wrap right after the dot
@@ -123,22 +132,18 @@ export function DiscoverField({
     return str ? str.replace(/\./g, '.\u200B') : '';
   }
 
-  const dscFieldIcon = (
-    <FieldIcon type={field.type} label={getFieldTypeName(field.type)} scripted={field.scripted} />
-  );
-
   const fieldName = (
     <span
       data-test-subj={`field-${field.name}`}
       title={field.name}
-      className="dscSidebarField__name"
+      className="dscSidebarField__name eui-textBreakWord"
     >
       {useShortDots ? wrapOnDot(shortenDottedString(field.name)) : wrapOnDot(field.displayName)}
     </span>
   );
 
   let actionButton;
-  if (field.name !== '_source' && !selected) {
+  if (!isSourceField && !selected) {
     actionButton = (
       <EuiToolTip
         delay="long"
@@ -148,7 +153,6 @@ export function DiscoverField({
       >
         <EuiButtonIcon
           iconType="plusInCircleFilled"
-          className="dscSidebarItem__action"
           onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
             if (ev.type === 'click') {
               ev.currentTarget.focus();
@@ -162,7 +166,7 @@ export function DiscoverField({
         />
       </EuiToolTip>
     );
-  } else if (field.name !== '_source' && selected) {
+  } else if (!isSourceField && selected) {
     actionButton = (
       <EuiToolTip
         delay="long"
@@ -173,7 +177,6 @@ export function DiscoverField({
         <EuiButtonIcon
           color="danger"
           iconType="cross"
-          className="dscSidebarItem__action"
           onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
             if (ev.type === 'click') {
               ev.currentTarget.focus();
@@ -189,57 +192,56 @@ export function DiscoverField({
     );
   }
 
-  if (field.type === '_source') {
-    return (
-      <FieldButton
-        size="s"
-        className="dscSidebarItem"
-        dataTestSubj={`field-${field.name}-showDetails`}
-        fieldIcon={dscFieldIcon}
-        fieldAction={actionButton}
-        fieldName={fieldName}
-      />
-    );
-  }
-
   return (
-    <EuiPopover
-      ownFocus
-      display="block"
-      button={
-        <FieldButton
-          size="s"
-          className="dscSidebarItem"
-          isActive={infoIsOpen}
-          onClick={() => {
-            togglePopover();
-          }}
-          dataTestSubj={`field-${field.name}-showDetails`}
-          fieldIcon={dscFieldIcon}
-          fieldAction={actionButton}
-          fieldName={fieldName}
-        />
-      }
-      isOpen={infoIsOpen}
-      closePopover={() => setOpen(false)}
-      anchorPosition="rightUp"
-      panelClassName="dscSidebarItem__fieldPopoverPanel"
-    >
-      <EuiPopoverTitle>
-        {' '}
-        {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
-          defaultMessage: 'Top 5 values',
-        })}
-      </EuiPopoverTitle>
-      {infoIsOpen && (
-        <DiscoverFieldDetails
-          columns={columns}
-          details={getDetails(field)}
-          field={field}
-          indexPattern={indexPattern}
-          onAddFilter={onAddFilter}
+    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <FieldIcon
+          type={field.type}
+          label={getFieldTypeName(field.type)}
+          scripted={field.scripted}
         />
+      </EuiFlexItem>
+      <EuiFlexItem grow>
+        <EuiText size="xs">{fieldName}</EuiText>
+      </EuiFlexItem>
+      {!isSourceField && (
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            ownFocus
+            display="block"
+            isOpen={infoIsOpen}
+            closePopover={() => setOpen(false)}
+            anchorPosition="rightUp"
+            button={
+              <EuiButtonIcon
+                iconType="inspect"
+                size="xs"
+                onClick={() => setOpen((state) => !state)}
+                aria-label={infoLabelAria}
+                data-test-subj={`field-${field.name}-showDetails`}
+              />
+            }
+            panelClassName="dscSidebarItem__fieldPopoverPanel"
+          >
+            <EuiPopoverTitle>
+              {' '}
+              {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
+                defaultMessage: 'Top 5 values',
+              })}
+            </EuiPopoverTitle>
+            {infoIsOpen && (
+              <DiscoverFieldDetails
+                columns={columns}
+                details={getDetails(field)}
+                field={field}
+                indexPattern={indexPattern}
+                onAddFilter={onAddFilter}
+              />
+            )}
+          </EuiPopover>
+        </EuiFlexItem>
       )}
-    </EuiPopover>
+      {!isSourceField && <EuiFlexItem grow={false}>{actionButton}</EuiFlexItem>}
+    </EuiFlexGroup>
   );
-}
+};
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx
index 906c173ed07d..ce22761e75fa 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx
@@ -40,7 +40,6 @@ import {
 } from './lib/visualize_trigger_utils';
 import { Bucket, FieldDetails } from './types';
 import { IndexPatternField, IndexPattern } from '../../../../../data/public';
-import './discover_field_details.scss';
 
 interface DiscoverFieldDetailsProps {
   columns: string[];
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
index f78505e11f1e..bcf72ae57326 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
@@ -32,7 +32,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { findTestSubject } from 'test_utils/helpers';
-import { DiscoverFieldSearch, Props } from './discover_field_search';
+import { DiscoverFieldSearch, NUM_FILTERS, Props } from './discover_field_search';
 import { EuiButtonGroupProps, EuiPopover } from '@elastic/eui';
 import { ReactWrapper } from 'enzyme';
 
@@ -63,7 +63,7 @@ describe('DiscoverFieldSearch', () => {
     const onChange = jest.fn();
     const component = mountComponent({ ...defaultProps, ...{ onChange } });
     let btn = findTestSubject(component, 'toggleFieldFilterButton');
-    expect(btn.hasClass('euiFacetButton--isSelected')).toBeFalsy();
+    expect(btn.hasClass('euiFilterButton-hasActiveFilters')).toBeFalsy();
     btn.simulate('click');
     const aggregatableButtonGroup = findButtonGroup(component, 'aggregatable');
     act(() => {
@@ -72,7 +72,7 @@ describe('DiscoverFieldSearch', () => {
     });
     component.update();
     btn = findTestSubject(component, 'toggleFieldFilterButton');
-    expect(btn.hasClass('euiFacetButton--isSelected')).toBe(true);
+    expect(btn.hasClass('euiFilterButton-hasActiveFilters')).toBe(true);
     expect(onChange).toBeCalledWith('aggregatable', true);
   });
 
@@ -82,8 +82,8 @@ describe('DiscoverFieldSearch', () => {
     btn.simulate('click');
     btn = findTestSubject(component, 'toggleFieldFilterButton');
     const badge = btn.find('.euiNotificationBadge');
-    // no active filters
-    expect(badge.text()).toEqual('0');
+    // available filters
+    expect(badge.text()).toEqual(NUM_FILTERS.toString());
     // change value of aggregatable select
     const aggregatableButtonGroup = findButtonGroup(component, 'aggregatable');
     act(() => {
@@ -114,10 +114,10 @@ describe('DiscoverFieldSearch', () => {
     const btn = findTestSubject(component, 'toggleFieldFilterButton');
     btn.simulate('click');
     const badge = btn.find('.euiNotificationBadge');
-    expect(badge.text()).toEqual('0');
+    expect(badge.text()).toEqual(NUM_FILTERS.toString());
     const missingSwitch = findTestSubject(component, 'missingSwitch');
     missingSwitch.simulate('change', { target: { value: false } });
-    expect(badge.text()).toEqual('0');
+    expect(badge.text()).toEqual(NUM_FILTERS.toString());
   });
 
   test('change in filters triggers onChange', () => {
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
index 4a1390cb1955..8d90e0ae1099 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
@@ -31,11 +31,9 @@
 import React, { OptionHTMLAttributes, ReactNode, useState } from 'react';
 import { i18n } from '@osd/i18n';
 import {
-  EuiFacetButton,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
   EuiPopover,
   EuiPopoverFooter,
   EuiPopoverTitle,
@@ -46,9 +44,14 @@ import {
   EuiFormRow,
   EuiButtonGroup,
   EuiOutsideClickDetector,
+  EuiPanel,
+  EuiFilterButton,
+  EuiFilterGroup,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 
+export const NUM_FILTERS = 3;
+
 export interface State {
   searchable: string;
   aggregatable: string;
@@ -106,12 +109,6 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
     missing: true,
   });
 
-  if (typeof value !== 'string') {
-    // at initial rendering value is undefined (angular related), this catches the warning
-    // should be removed once all is react
-    return null;
-  }
-
   const filterBtnAriaLabel = isPopoverOpen
     ? i18n.translate('discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
         defaultMessage: 'Hide field filter settings',
@@ -173,23 +170,6 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
     handleValueChange('missing', missingValue);
   };
 
-  const buttonContent = (
-    <EuiFacetButton
-      aria-label={filterBtnAriaLabel}
-      data-test-subj="toggleFieldFilterButton"
-      className="dscFieldSearch__toggleButton"
-      icon={<EuiIcon type="filter" />}
-      isSelected={activeFiltersCount > 0}
-      quantity={activeFiltersCount}
-      onClick={handleFacetButtonClicked}
-    >
-      <FormattedMessage
-        id="discover.fieldChooser.fieldFilterFacetButtonLabel"
-        defaultMessage="Filter by type"
-      />
-    </EuiFacetButton>
-  );
-
   const select = (
     id: string,
     selectOptions: Array<{ text: ReactNode } & OptionHTMLAttributes<HTMLOptionElement>>,
@@ -236,7 +216,7 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
         legend={legend}
         options={toggleButtons(id)}
         idSelected={`${id}-${values[id]}`}
-        onChange={(optionId) => handleValueChange(id, optionId.replace(`${id}-`, ''))}
+        onChange={(optionId: string) => handleValueChange(id, optionId.replace(`${id}-`, ''))}
         buttonSize="compressed"
         isFullWidth
         data-test-subj={`${id}ButtonGroup`}
@@ -245,7 +225,7 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
   };
 
   const selectionPanel = (
-    <div className="dscFieldSearch__formWrapper">
+    <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s">
       <EuiForm data-test-subj="filterSelectionPanel">
         <EuiFormRow fullWidth label={aggregatableLabel} display="columnCompressed">
           {buttonGroup('aggregatable', aggregatableLabel)}
@@ -257,26 +237,25 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
           {select('type', typeOptions, values.type)}
         </EuiFormRow>
       </EuiForm>
-    </div>
+    </EuiPanel>
   );
 
   return (
-    <React.Fragment>
-      <EuiFlexGroup responsive={false} gutterSize={'s'}>
-        <EuiFlexItem>
+    <EuiFlexGroup responsive={false} gutterSize="xs">
+      <EuiFlexItem>
+        <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
           <EuiFieldSearch
             aria-label={searchPlaceholder}
             data-test-subj="fieldFilterSearchInput"
-            compressed
             fullWidth
             onChange={(event) => onChange('name', event.currentTarget.value)}
             placeholder={searchPlaceholder}
             value={value}
           />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <div className="dscFieldSearch__filterWrapper">
-        <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
+        </EuiOutsideClickDetector>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFilterGroup>
           <EuiPopover
             id="dataPanelTypeFilter"
             panelClassName="euiFilterGroup__popoverPanel"
@@ -287,7 +266,24 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
             closePopover={() => {
               setPopoverOpen(false);
             }}
-            button={buttonContent}
+            button={
+              <EuiFilterButton
+                iconType="filter"
+                iconSide="left"
+                hasActiveFilters={activeFiltersCount > 0}
+                aria-label={filterBtnAriaLabel}
+                data-test-subj="toggleFieldFilterButton"
+                numFilters={NUM_FILTERS}
+                onClick={handleFacetButtonClicked}
+                numActiveFilters={activeFiltersCount}
+                isSelected={isPopoverOpen}
+              >
+                <FormattedMessage
+                  id="discover.fieldChooser.fieldFilterFacetButtonLabel"
+                  defaultMessage="Filter by type"
+                />
+              </EuiFilterButton>
+            }
           >
             <EuiPopoverTitle>
               {i18n.translate('discover.fieldChooser.filter.filterByTypeLabel', {
@@ -306,8 +302,8 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
               />
             </EuiPopoverFooter>
           </EuiPopover>
-        </EuiOutsideClickDetector>
-      </div>
-    </React.Fragment>
+        </EuiFilterGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
index 9c80e0afa600..63e8720f2c59 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -1,99 +1,3 @@
-.dscSidebar__container {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  background-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-}
-
-.dscIndexPattern__container {
-  display: flex;
-  align-items: center;
-  height: $euiSize * 3;
-  margin-top: -$euiSizeS;
-}
-
-.dscIndexPattern__triggerButton {
-  @include euiTitle("xs");
-
-  line-height: $euiSizeXXL;
-}
-
-.dscFieldList {
-  list-style: none;
-  margin-bottom: 0;
-}
-
-.dscFieldListHeader {
-  padding: $euiSizeS $euiSizeS 0 $euiSizeS;
-  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
-}
-
-.dscFieldList--popular {
-  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
-}
-
-.dscFieldChooser {
-  padding-left: $euiSize;
-}
-
-.dscFieldChooser__toggle {
-  color: $euiColorMediumShade;
-  margin-left: $euiSizeS !important;
-}
-
-.dscSidebarItem {
-  &:hover,
-  &:focus-within,
-  &[class*="-isActive"] {
-    .dscSidebarItem__action {
-      opacity: 1;
-    }
-  }
-}
-
-/**
- * 1. Only visually hide the action, so that it's still accessible to screen readers.
- * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
- */
-.dscSidebarItem__action {
-  opacity: 0; /* 1 */
-  transition: none;
-
-  &:focus {
-    opacity: 1; /* 2 */
-  }
-
-  font-size: $euiFontSizeXS;
-  padding: 2px 6px !important;
-  height: 22px !important;
-  min-width: auto !important;
-
-  .euiButton__content {
-    padding: 0 4px;
-  }
-}
-
-.dscFieldSearch {
-  padding: $euiSizeS;
-}
-
-.dscFieldSearch__toggleButton {
-  width: calc(100% - #{$euiSizeS});
-  color: $euiColorPrimary;
-  padding-left: $euiSizeXS;
-  margin-left: $euiSizeXS;
-}
-
-.dscFieldSearch__filterWrapper {
-  flex-grow: 0;
-}
-
-.dscFieldSearch__formWrapper {
-  padding: $euiSizeM;
-}
-
-.dscFieldDetails {
-  color: $euiTextColor;
-  margin-bottom: $euiSizeS;
+.dscSideBarFieldListHeader {
+  padding-left: $euiSizeS;
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx
index fa692ca22b5b..6fee8dde6b60 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx
@@ -29,19 +29,15 @@
  */
 
 import _ from 'lodash';
-import { ReactWrapper } from 'enzyme';
-import { findTestSubject } from 'test_utils/helpers';
 // @ts-ignore
 import realHits from 'fixtures/real_hits.js';
 // @ts-ignore
 import stubbedLogstashFields from 'fixtures/logstash_fields';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { render, screen, within, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { DiscoverSidebar, DiscoverSidebarProps } from './discover_sidebar';
 import { coreMock } from '../../../../../../core/public/mocks';
-import { IndexPatternAttributes } from '../../../../../data/common';
 import { getStubIndexPattern } from '../../../../../data/public/test_utils';
-import { SavedObject } from '../../../../../../core/types';
 
 jest.mock('../../../opensearch_dashboards_services', () => ({
   getServices: () => ({
@@ -74,7 +70,7 @@ jest.mock('./lib/get_index_pattern_field_list', () => ({
   getIndexPatternFieldList: jest.fn((indexPattern) => indexPattern.fields),
 }));
 
-function getCompProps() {
+function getCompProps(): DiscoverSidebarProps {
   const indexPattern = getStubIndexPattern(
     'logstash-*',
     (cfg: any) => cfg,
@@ -88,12 +84,6 @@ function getCompProps() {
     Record<string, unknown>
   >;
 
-  const indexPatternList = [
-    { id: '0', attributes: { title: 'b' } } as SavedObject<IndexPatternAttributes>,
-    { id: '1', attributes: { title: 'a' } } as SavedObject<IndexPatternAttributes>,
-    { id: '2', attributes: { title: 'c' } } as SavedObject<IndexPatternAttributes>,
-  ];
-
   const fieldCounts: Record<string, number> = {};
 
   for (const hit of hits) {
@@ -105,44 +95,48 @@ function getCompProps() {
     columns: ['extension'],
     fieldCounts,
     hits,
-    indexPatternList,
     onAddFilter: jest.fn(),
     onAddField: jest.fn(),
     onRemoveField: jest.fn(),
     selectedIndexPattern: indexPattern,
-    setIndexPattern: jest.fn(),
-    state: {},
+    onReorderFields: jest.fn(),
   };
 }
 
 describe('discover sidebar', function () {
-  let props: DiscoverSidebarProps;
-  let comp: ReactWrapper<DiscoverSidebarProps>;
+  it('should have Selected Fields and Available Fields with Popular Fields sections', async function () {
+    render(<DiscoverSidebar {...getCompProps()} />);
 
-  beforeAll(() => {
-    props = getCompProps();
-    comp = mountWithIntl(<DiscoverSidebar {...props} />);
-  });
+    const popular = screen.getByTestId('fieldList-popular');
+    const selected = screen.getByTestId('fieldList-selected');
+    const unpopular = screen.getByTestId('fieldList-unpopular');
 
-  it('should have Selected Fields and Available Fields with Popular Fields sections', function () {
-    const popular = findTestSubject(comp, 'fieldList-popular');
-    const selected = findTestSubject(comp, 'fieldList-selected');
-    const unpopular = findTestSubject(comp, 'fieldList-unpopular');
-    expect(popular.children().length).toBe(1);
-    expect(unpopular.children().length).toBe(7);
-    expect(selected.children().length).toBe(1);
+    expect(within(popular).getAllByTestId('fieldList-field').length).toBe(1);
+    expect(within(unpopular).getAllByTestId('fieldList-field').length).toBe(7);
+    expect(within(selected).getAllByTestId('fieldList-field').length).toBe(1);
   });
-  it('should allow selecting fields', function () {
-    findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
+  it('should allow selecting fields', async function () {
+    const props = getCompProps();
+    render(<DiscoverSidebar {...props} />);
+
+    await fireEvent.click(screen.getByTestId('fieldToggle-bytes'));
+
     expect(props.onAddField).toHaveBeenCalledWith('bytes');
   });
-  it('should allow deselecting fields', function () {
-    findTestSubject(comp, 'fieldToggle-extension').simulate('click');
+  it('should allow deselecting fields', async function () {
+    const props = getCompProps();
+    render(<DiscoverSidebar {...props} />);
+
+    await fireEvent.click(screen.getByTestId('fieldToggle-extension'));
+
     expect(props.onRemoveField).toHaveBeenCalledWith('extension');
   });
-  it('should allow adding filters', function () {
-    findTestSubject(comp, 'field-extension-showDetails').simulate('click');
-    findTestSubject(comp, 'plus-extension-gif').simulate('click');
+  it('should allow adding filters', async function () {
+    const props = getCompProps();
+    render(<DiscoverSidebar {...props} />);
+
+    await fireEvent.click(screen.getByTestId('field-extension-showDetails'));
+    await fireEvent.click(screen.getByTestId('plus-extension-gif'));
     expect(props.onAddFilter).toHaveBeenCalled();
   });
 });
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
index 865aff590286..f5e091e6ab82 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
@@ -31,14 +31,18 @@
 import './discover_sidebar.scss';
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { i18n } from '@osd/i18n';
-import { EuiButtonIcon, EuiTitle, EuiSpacer } from '@elastic/eui';
-import { sortBy } from 'lodash';
+import {
+  EuiTitle,
+  EuiDragDropContext,
+  DropResult,
+  EuiDroppable,
+  EuiDraggable,
+  EuiPanel,
+  EuiSplitPanel,
+} from '@elastic/eui';
 import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { DiscoverField } from './discover_field';
-import { DiscoverIndexPattern } from './discover_index_pattern';
 import { DiscoverFieldSearch } from './discover_field_search';
-import { IndexPatternAttributes } from '../../../../../data/common';
-import { SavedObject } from '../../../../../../core/types';
 import { FIELDS_LIMIT_SETTING } from '../../../../common';
 import { groupFields } from './lib/group_fields';
 import { IndexPatternField, IndexPattern, UI_SETTINGS } from '../../../../../data/public';
@@ -61,13 +65,13 @@ export interface DiscoverSidebarProps {
    */
   hits: Array<Record<string, unknown>>;
   /**
-   * List of available index patterns
+   * Callback function when selecting a field
    */
-  indexPatternList: Array<SavedObject<IndexPatternAttributes>>;
+  onAddField: (fieldName: string, index?: number) => void;
   /**
-   * Callback function when selecting a field
+   * Callback function when rearranging fields
    */
-  onAddField: (fieldName: string) => void;
+  onReorderFields: (sourceIdx: number, destinationIdx: number) => void;
   /**
    * Callback function when adding a filter from sidebar
    */
@@ -81,24 +85,18 @@ export interface DiscoverSidebarProps {
    * Currently selected index pattern
    */
   selectedIndexPattern?: IndexPattern;
-  /**
-   * Callback function to select another index pattern
-   */
-  setIndexPattern: (id: string) => void;
 }
 
 export function DiscoverSidebar({
   columns,
   fieldCounts,
   hits,
-  indexPatternList,
   onAddField,
   onAddFilter,
   onRemoveField,
+  onReorderFields,
   selectedIndexPattern,
-  setIndexPattern,
 }: DiscoverSidebarProps) {
-  const [showFields, setShowFields] = useState(false);
   const [fields, setFields] = useState<IndexPatternField[] | null>(null);
   const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter());
   const services = useMemo(() => getServices(), []);
@@ -148,73 +146,109 @@ export function DiscoverSidebar({
     return result;
   }, [fields]);
 
+  const onDragEnd = useCallback(
+    ({ source, destination }: DropResult) => {
+      if (!source || !destination || !fields) return;
+
+      // Rearranging fields within the selected fields list
+      if (
+        source.droppableId === 'SELECTED_FIELDS' &&
+        destination.droppableId === 'SELECTED_FIELDS'
+      ) {
+        onReorderFields(source.index, destination.index);
+        return;
+      }
+      // Dropping fields into the selected fields list
+      if (
+        source.droppableId !== 'SELECTED_FIELDS' &&
+        destination.droppableId === 'SELECTED_FIELDS'
+      ) {
+        const fieldListMap = {
+          POPULAR_FIELDS: popularFields,
+          UNPOPULAR_FIELDS: unpopularFields,
+        };
+        const fieldList = fieldListMap[source.droppableId as keyof typeof fieldListMap];
+        const field = fieldList[source.index];
+        onAddField(field.name, destination.index);
+        return;
+      }
+    },
+    [fields, onAddField, onReorderFields, popularFields, unpopularFields]
+  );
+
   if (!selectedIndexPattern || !fields) {
     return null;
   }
 
   return (
     <I18nProvider>
-      <section
-        className="sidebar-list"
-        aria-label={i18n.translate('discover.fieldChooser.filter.indexAndFieldsSectionAriaLabel', {
-          defaultMessage: 'Index and fields',
-        })}
-      >
-        <DiscoverIndexPattern
-          selectedIndexPattern={selectedIndexPattern}
-          setIndexPattern={setIndexPattern}
-          indexPatternList={sortBy(indexPatternList, (o) => o.attributes.title)}
-        />
-        <div className="dscSidebar__item">
-          <form>
+      <EuiDragDropContext onDragEnd={onDragEnd}>
+        <EuiSplitPanel.Outer
+          className="sidebar-list eui-yScroll"
+          aria-label={i18n.translate(
+            'discover.fieldChooser.filter.indexAndFieldsSectionAriaLabel',
+            {
+              defaultMessage: 'Index and fields',
+            }
+          )}
+          borderRadius="none"
+          color="transparent"
+        >
+          <EuiSplitPanel.Inner grow={false} paddingSize="s">
             <DiscoverFieldSearch
               onChange={onChangeFieldSearch}
               value={fieldFilterState.name}
               types={fieldTypes}
             />
-          </form>
-        </div>
-        <div className="sidebar-list">
-          {fields.length > 0 && (
-            <>
-              <EuiTitle size="xxxs" id="selected_fields">
-                <h3>
-                  <FormattedMessage
-                    id="discover.fieldChooser.filter.selectedFieldsTitle"
-                    defaultMessage="Selected fields"
-                  />
-                </h3>
-              </EuiTitle>
-              <EuiSpacer size="xs" />
-              <ul
-                className="dscSidebarList dscFieldList--selected"
-                aria-labelledby="selected_fields"
-                data-test-subj={`fieldList-selected`}
-              >
-                {selectedFields.map((field: IndexPatternField) => {
-                  return (
-                    <li
-                      key={`field${field.name}`}
-                      data-attr-field={field.name}
-                      className="dscSidebar__item"
-                    >
-                      <DiscoverField
-                        columns={columns}
-                        field={field}
-                        indexPattern={selectedIndexPattern}
-                        onAddField={onAddField}
-                        onRemoveField={onRemoveField}
-                        onAddFilter={onAddFilter}
-                        getDetails={getDetailsByField}
-                        selected={true}
-                        useShortDots={useShortDots}
-                      />
-                    </li>
-                  );
-                })}
-              </ul>
-              <div className="euiFlexGroup euiFlexGroup--gutterMedium">
-                <EuiTitle size="xxxs" id="available_fields" className="euiFlexItem">
+          </EuiSplitPanel.Inner>
+          <EuiSplitPanel.Inner className="eui-yScroll" paddingSize="none">
+            {fields.length > 0 && (
+              <>
+                <EuiTitle size="xxxs" id="selected_fields" className="dscSideBarFieldListHeader">
+                  <h3>
+                    <FormattedMessage
+                      id="discover.fieldChooser.filter.selectedFieldsTitle"
+                      defaultMessage="Selected fields"
+                    />
+                  </h3>
+                </EuiTitle>
+                <EuiDroppable
+                  droppableId="SELECTED_FIELDS"
+                  spacing="m"
+                  data-test-subj={`fieldList-selected`}
+                >
+                  {selectedFields.map((field: IndexPatternField, index) => {
+                    return (
+                      <EuiDraggable
+                        spacing="m"
+                        key={`field${field.name}`}
+                        draggableId={field.name}
+                        index={index}
+                      >
+                        <EuiPanel
+                          data-attr-field={field.name}
+                          paddingSize="s"
+                          className="dscSidebar__item"
+                          data-test-subj={`fieldList-field`}
+                        >
+                          {/* The panel cannot exist in the DiscoverField component if the on focus highlight during keyboard navigation is needed */}
+                          <DiscoverField
+                            field={field}
+                            selected
+                            onAddField={onAddField}
+                            onRemoveField={onRemoveField}
+                            columns={columns}
+                            indexPattern={selectedIndexPattern}
+                            getDetails={getDetailsByField}
+                            useShortDots={useShortDots}
+                            onAddFilter={onAddFilter}
+                          />
+                        </EuiPanel>
+                      </EuiDraggable>
+                    );
+                  })}
+                </EuiDroppable>
+                <EuiTitle size="xxxs" id="available_fields" className="dscSideBarFieldListHeader">
                   <h3>
                     <FormattedMessage
                       id="discover.fieldChooser.filter.availableFieldsTitle"
@@ -222,105 +256,101 @@ export function DiscoverSidebar({
                     />
                   </h3>
                 </EuiTitle>
-                <div className="euiFlexItem euiFlexItem--flexGrowZero">
-                  <EuiButtonIcon
-                    className={'visible-xs visible-sm dscFieldChooser__toggle'}
-                    iconType={showFields ? 'arrowDown' : 'arrowRight'}
-                    onClick={() => setShowFields(!showFields)}
-                    aria-label={
-                      showFields
-                        ? i18n.translate(
-                            'discover.fieldChooser.filter.indexAndFieldsSectionHideAriaLabel',
-                            {
-                              defaultMessage: 'Hide fields',
-                            }
-                          )
-                        : i18n.translate(
-                            'discover.fieldChooser.filter.indexAndFieldsSectionShowAriaLabel',
-                            {
-                              defaultMessage: 'Show fields',
-                            }
-                          )
-                    }
-                  />
-                </div>
-              </div>
-            </>
-          )}
-          {popularFields.length > 0 && (
-            <div>
-              <EuiTitle
-                size="xxxs"
-                className={`dscFieldListHeader ${!showFields ? 'hidden-sm hidden-xs' : ''}`}
-              >
-                <h4 style={{ fontWeight: 'normal' }} id="available_fields_popular">
-                  <FormattedMessage
-                    id="discover.fieldChooser.filter.popularTitle"
-                    defaultMessage="Popular"
-                  />
-                </h4>
-              </EuiTitle>
-              <ul
-                className={`dscFieldList dscFieldList--popular ${
-                  !showFields ? 'hidden-sm hidden-xs' : ''
-                }`}
-                aria-labelledby="available_fields available_fields_popular"
-                data-test-subj={`fieldList-popular`}
-              >
-                {popularFields.map((field: IndexPatternField) => {
-                  return (
-                    <li
-                      key={`field${field.name}`}
-                      data-attr-field={field.name}
-                      className="dscSidebar__item"
-                    >
-                      <DiscoverField
-                        columns={columns}
-                        field={field}
-                        indexPattern={selectedIndexPattern}
-                        onAddField={onAddField}
-                        onRemoveField={onRemoveField}
-                        onAddFilter={onAddFilter}
-                        getDetails={getDetailsByField}
-                        useShortDots={useShortDots}
-                      />
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-          )}
 
-          <ul
-            className={`dscFieldList dscFieldList--unpopular ${
-              !showFields ? 'hidden-sm hidden-xs' : ''
-            }`}
-            aria-labelledby="available_fields"
-            data-test-subj={`fieldList-unpopular`}
-          >
-            {unpopularFields.map((field: IndexPatternField) => {
-              return (
-                <li
-                  key={`field${field.name}`}
-                  data-attr-field={field.name}
-                  className="dscSidebar__item"
+                {popularFields.length > 0 && (
+                  <EuiPanel
+                    hasBorder={false}
+                    paddingSize="none"
+                    hasShadow={false}
+                    className={`dscFieldList dscFieldList--popular`}
+                    aria-labelledby="available_fields available_fields_popular"
+                    data-test-subj={`fieldList-popular`}
+                    color="primary"
+                  >
+                    <EuiTitle size="xxxs" className="dscSideBarFieldListHeader">
+                      <h4 style={{ fontWeight: 'normal' }} id="available_fields_popular">
+                        <FormattedMessage
+                          id="discover.fieldChooser.filter.popularTitle"
+                          defaultMessage="Popular"
+                        />
+                      </h4>
+                    </EuiTitle>
+                    <EuiDroppable droppableId="POPULAR_FIELDS" spacing="m" cloneDraggables={true}>
+                      {popularFields.map((field: IndexPatternField, index) => {
+                        return (
+                          <EuiDraggable
+                            spacing="m"
+                            key={`field${field.name}`}
+                            draggableId={field.name}
+                            index={index}
+                          >
+                            <EuiPanel
+                              data-attr-field={field.name}
+                              paddingSize="s"
+                              className="dscSidebar__item"
+                              data-test-subj={`fieldList-field`}
+                            >
+                              {/* The panel cannot exist in the DiscoverField component if the on focus highlight during keyboard navigation is needed */}
+                              <DiscoverField
+                                columns={columns}
+                                field={field}
+                                indexPattern={selectedIndexPattern}
+                                onAddField={onAddField}
+                                onRemoveField={onRemoveField}
+                                onAddFilter={onAddFilter}
+                                getDetails={getDetailsByField}
+                                useShortDots={useShortDots}
+                              />
+                            </EuiPanel>
+                          </EuiDraggable>
+                        );
+                      })}
+                    </EuiDroppable>
+                  </EuiPanel>
+                )}
+                <EuiDroppable
+                  droppableId="UNPOPULAR_FIELDS"
+                  spacing="m"
+                  cloneDraggables={true}
+                  className="dscFieldList dscFieldList--unpopular"
+                  aria-labelledby="available_fields"
+                  data-test-subj="fieldList-unpopular"
                 >
-                  <DiscoverField
-                    columns={columns}
-                    field={field}
-                    indexPattern={selectedIndexPattern}
-                    onAddField={onAddField}
-                    onRemoveField={onRemoveField}
-                    onAddFilter={onAddFilter}
-                    getDetails={getDetailsByField}
-                    useShortDots={useShortDots}
-                  />
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      </section>
+                  {unpopularFields.map((field: IndexPatternField, index) => {
+                    return (
+                      <EuiDraggable
+                        spacing="m"
+                        key={`field${field.name}`}
+                        draggableId={field.name}
+                        index={index}
+                      >
+                        <EuiPanel
+                          data-attr-field={field.name}
+                          paddingSize="s"
+                          className="dscSidebar__item"
+                          data-test-subj={`fieldList-field`}
+                        >
+                          {/* The panel cannot exist in the DiscoverField component if the on focus highlight during keyboard navigation is needed */}
+                          <DiscoverField
+                            columns={columns}
+                            field={field}
+                            indexPattern={selectedIndexPattern}
+                            onAddField={onAddField}
+                            onRemoveField={onRemoveField}
+                            onAddFilter={onAddFilter}
+                            getDetails={getDetailsByField}
+                            useShortDots={useShortDots}
+                          />
+                        </EuiPanel>
+                      </EuiDraggable>
+                    );
+                  })}
+                </EuiDroppable>
+              </>
+            )}
+          </EuiSplitPanel.Inner>
+        </EuiSplitPanel.Outer>
+      </EuiDragDropContext>
     </I18nProvider>
   );
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts b/src/plugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts
index b3a8ff5cd8d9..93b80ae99653 100644
--- a/src/plugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts
+++ b/src/plugins/discover/public/application/components/sidebar/lib/get_index_pattern_field_list.ts
@@ -36,18 +36,5 @@ export function getIndexPatternFieldList(
   fieldCounts?: Record<string, number>
 ) {
   if (!indexPattern || !fieldCounts) return [];
-
-  const fieldNamesInDocs = Object.keys(fieldCounts);
-  const fieldNamesInIndexPattern = indexPattern.fields.getAll().map((fld) => fld.name);
-  const unknownTypes: IndexPatternField[] = [];
-
-  difference(fieldNamesInDocs, fieldNamesInIndexPattern).forEach((unknownFieldName) => {
-    unknownTypes.push({
-      displayName: String(unknownFieldName),
-      name: String(unknownFieldName),
-      type: 'unknown',
-    } as IndexPatternField);
-  });
-
-  return [...indexPattern.fields.getAll(), ...unknownTypes];
+  return [...indexPattern.fields.getAll()];
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/lib/group_fields.tsx b/src/plugins/discover/public/application/components/sidebar/lib/group_fields.tsx
index fad1db402467..dff60827ccd2 100644
--- a/src/plugins/discover/public/application/components/sidebar/lib/group_fields.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/lib/group_fields.tsx
@@ -83,5 +83,12 @@ export function groupFields(
     }
   }
 
+  // sort the selected fields by the column order
+  result.selected.sort((a, b) => {
+    const aIndex = columns.indexOf(a.name);
+    const bIndex = columns.indexOf(b.name);
+    return aIndex - bIndex;
+  });
+
   return result;
 }
diff --git a/src/plugins/discover/public/application/components/table/table.scss b/src/plugins/discover/public/application/components/table/table.scss
new file mode 100644
index 000000000000..30ba5fea2a4e
--- /dev/null
+++ b/src/plugins/discover/public/application/components/table/table.scss
@@ -0,0 +1,3 @@
+.truncate-by-height {
+  overflow: hidden;
+}
diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx
index 90167a515985..3ef8e026702e 100644
--- a/src/plugins/discover/public/application/components/table/table.tsx
+++ b/src/plugins/discover/public/application/components/table/table.tsx
@@ -31,8 +31,9 @@
 import React, { useState } from 'react';
 import { escapeRegExp } from 'lodash';
 import { DocViewTableRow } from './table_row';
-import { arrayContainsObjects, trimAngularSpan } from './table_helper';
+import { arrayContainsObjects } from './table_helper';
 import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+import './table.scss';
 
 const COLLAPSE_LINE_LENGTH = 350;
 
@@ -61,7 +62,7 @@ export function DocViewTable({
           .sort()
           .map((field) => {
             const valueRaw = flattened[field];
-            const value = trimAngularSpan(String(formatted[field]));
+            const value = String(formatted[field]);
 
             const isCollapsible = value.length > COLLAPSE_LINE_LENGTH;
             const isCollapsed = isCollapsible && !fieldRowOpen[field];
diff --git a/src/plugins/discover/public/application/components/table/table_helper.tsx b/src/plugins/discover/public/application/components/table/table_helper.tsx
index 2e63b43b8310..12f50d5e79fb 100644
--- a/src/plugins/discover/public/application/components/table/table_helper.tsx
+++ b/src/plugins/discover/public/application/components/table/table_helper.tsx
@@ -34,10 +34,3 @@
 export function arrayContainsObjects(value: unknown[]): boolean {
   return Array.isArray(value) && value.some((v) => typeof v === 'object' && v !== null);
 }
-
-/**
- * Removes markup added by OpenSearch Dashboards fields html formatter
- */
-export function trimAngularSpan(text: string): string {
-  return text.replace(/^<span ng-non-bindable>/, '').replace(/<\/span>$/, '');
-}
diff --git a/src/plugins/discover/public/application/components/top_nav/__snapshots__/open_search_panel.test.js.snap b/src/plugins/discover/public/application/components/top_nav/__snapshots__/open_search_panel.test.tsx.snap
similarity index 100%
rename from src/plugins/discover/public/application/components/top_nav/__snapshots__/open_search_panel.test.js.snap
rename to src/plugins/discover/public/application/components/top_nav/__snapshots__/open_search_panel.test.tsx.snap
diff --git a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx
new file mode 100644
index 000000000000..8c19d38eb20d
--- /dev/null
+++ b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx
@@ -0,0 +1,337 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+import React from 'react';
+import { DiscoverViewServices } from '../../../build_services';
+import { showOpenSearchPanel } from './show_open_search_panel';
+import { SavedSearch } from '../../../saved_searches';
+import { NEW_DISCOVER_APP } from '../../../../common';
+import { Adapters } from '../../../../../inspector/public';
+import { TopNavMenuData } from '../../../../../navigation/public';
+import { ISearchSource, unhashUrl } from '../../../opensearch_dashboards_services';
+import {
+  OnSaveProps,
+  SavedObjectSaveModal,
+  showSaveModal,
+} from '../../../../../saved_objects/public';
+import { DiscoverState, setSavedSearchId } from '../../utils/state_management';
+import { DOC_HIDE_TIME_COLUMN_SETTING, SORT_DEFAULT_ORDER_SETTING } from '../../../../common';
+import { getSortForSearchSource } from '../../view_components/utils/get_sort_for_search_source';
+
+export const getTopNavLinks = (
+  services: DiscoverViewServices,
+  inspectorAdapters: Adapters,
+  savedSearch: SavedSearch
+) => {
+  const {
+    history,
+    inspector,
+    core,
+    uiSettings,
+    capabilities,
+    share,
+    toastNotifications,
+    chrome,
+    store,
+  } = services;
+
+  const newSearch = {
+    id: 'new',
+    label: i18n.translate('discover.localMenu.localMenu.newSearchTitle', {
+      defaultMessage: 'New',
+    }),
+    description: i18n.translate('discover.localMenu.newSearchDescription', {
+      defaultMessage: 'New Search',
+    }),
+    run() {
+      setTimeout(() => {
+        history().push('/');
+        // TODO: figure out why a history push doesn't update the app state. The page reload is a hack around it
+        window.location.reload();
+      }, 0);
+    },
+    testId: 'discoverNewButton',
+  };
+
+  const saveSearch: TopNavMenuData = {
+    id: 'save',
+    label: i18n.translate('discover.localMenu.saveTitle', {
+      defaultMessage: 'Save',
+    }),
+    description: i18n.translate('discover.localMenu.saveSearchDescription', {
+      defaultMessage: 'Save Search',
+    }),
+    testId: 'discoverSaveButton',
+    run: async () => {
+      const onSave = async ({
+        newTitle,
+        newCopyOnSave,
+        isTitleDuplicateConfirmed,
+        onTitleDuplicate,
+      }: OnSaveProps) => {
+        const currentTitle = savedSearch.title;
+        savedSearch.title = newTitle;
+        savedSearch.copyOnSave = newCopyOnSave;
+        const saveOptions = {
+          confirmOverwrite: false,
+          isTitleDuplicateConfirmed,
+          onTitleDuplicate,
+        };
+
+        const state: DiscoverState = store!.getState().discover; // store is defined before the view is loaded
+
+        savedSearch.columns = state.columns;
+        savedSearch.sort = state.sort;
+
+        try {
+          const id = await savedSearch.save(saveOptions);
+
+          // If the title is a duplicate, the id will be an empty string. Checking for this condition here
+          if (id) {
+            toastNotifications.addSuccess({
+              title: i18n.translate('discover.notifications.savedSearchTitle', {
+                defaultMessage: `Search '{savedSearchTitle}' was saved`,
+                values: {
+                  savedSearchTitle: savedSearch.title,
+                },
+              }),
+              'data-test-subj': 'saveSearchSuccess',
+            });
+
+            if (id !== state.savedSearch) {
+              history().push(`/view/${encodeURIComponent(id)}`);
+            } else {
+              chrome.docTitle.change(savedSearch.lastSavedTitle);
+              chrome.setBreadcrumbs([
+                {
+                  text: i18n.translate('discover.discoverBreadcrumbTitle', {
+                    defaultMessage: 'Discover',
+                  }),
+                  href: '#/',
+                },
+                { text: savedSearch.title },
+              ]);
+            }
+
+            // set App state to clean
+            store!.dispatch({ type: setSavedSearchId.type, payload: id });
+
+            return { id };
+          }
+        } catch (error) {
+          toastNotifications.addDanger({
+            title: i18n.translate('discover.notifications.notSavedSearchTitle', {
+              defaultMessage: `Search '{savedSearchTitle}' was not saved.`,
+              values: {
+                savedSearchTitle: savedSearch.title,
+              },
+            }),
+            text: (error as Error).message,
+          });
+
+          // Reset the original title
+          savedSearch.title = currentTitle;
+
+          return { error };
+        }
+      };
+
+      const saveModal = (
+        <SavedObjectSaveModal
+          onSave={onSave}
+          onClose={() => {}}
+          title={savedSearch.title}
+          showCopyOnSave={!!savedSearch.id}
+          objectType="search"
+          description={i18n.translate('discover.localMenu.saveSaveSearchDescription', {
+            defaultMessage:
+              'Save your Discover search so you can use it in visualizations and dashboards',
+          })}
+          showDescription={false}
+        />
+      );
+      showSaveModal(saveModal, core.i18n.Context);
+    },
+  };
+
+  const openSearch = {
+    id: 'open',
+    label: i18n.translate('discover.localMenu.openTitle', {
+      defaultMessage: 'Open',
+    }),
+    description: i18n.translate('discover.localMenu.openSavedSearchDescription', {
+      defaultMessage: 'Open Saved Search',
+    }),
+    testId: 'discoverOpenButton',
+    run: () => {
+      showOpenSearchPanel({
+        makeUrl: (searchId) => `#/view/${encodeURIComponent(searchId)}`,
+        I18nContext: core.i18n.Context,
+        services,
+      });
+    },
+  };
+
+  const shareSearch: TopNavMenuData = {
+    id: 'share',
+    label: i18n.translate('discover.localMenu.shareTitle', {
+      defaultMessage: 'Share',
+    }),
+    description: i18n.translate('discover.localMenu.shareSearchDescription', {
+      defaultMessage: 'Share Search',
+    }),
+    testId: 'shareTopNavButton',
+    run: async (anchorElement) => {
+      const state: DiscoverState = store!.getState().discover; // store is defined before the view is loaded
+      const sharingData = await getSharingData({
+        searchSource: savedSearch.searchSource,
+        state,
+        services,
+      });
+      share?.toggleShareContextMenu({
+        anchorElement,
+        allowEmbed: false,
+        allowShortUrl: capabilities.discover.createShortUrl as boolean,
+        shareableUrl: unhashUrl(window.location.href),
+        objectId: savedSearch.id,
+        objectType: 'search',
+        sharingData: {
+          ...sharingData,
+          title: savedSearch.title,
+        },
+        isDirty: !savedSearch.id || state.isDirty,
+      });
+    },
+  };
+
+  const inspectSearch = {
+    id: 'inspect',
+    label: i18n.translate('discover.localMenu.inspectTitle', {
+      defaultMessage: 'Inspect',
+    }),
+    description: i18n.translate('discover.localMenu.openInspectorForSearchDescription', {
+      defaultMessage: 'Open Inspector for search',
+    }),
+    testId: 'openInspectorButton',
+    run() {
+      inspector.open(inspectorAdapters, {
+        title: savedSearch?.title,
+      });
+    },
+  };
+
+  const legacyDiscover: TopNavMenuData = {
+    id: 'discover-new',
+    label: i18n.translate('discover.localMenu.newDiscoverTitle', {
+      defaultMessage: 'New Discover',
+    }),
+    description: i18n.translate('discover.localMenu.newDiscoverDescription', {
+      defaultMessage: 'New Discover Experience',
+    }),
+    testId: 'discoverNewButton',
+    run: async () => {
+      await uiSettings.set(NEW_DISCOVER_APP, false);
+      window.location.reload();
+    },
+    type: 'toggle' as const,
+    emphasize: true,
+  };
+
+  return [
+    legacyDiscover,
+    newSearch,
+    ...(capabilities.discover.save ? [saveSearch] : []),
+    openSearch,
+    ...(share ? [shareSearch] : []), // Show share option only if share plugin is available
+    inspectSearch,
+  ];
+};
+
+// TODO: This does not seem to affect the share menu. need to look into it in future
+// const getFieldCounts = async () => {
+//   // the field counts aren't set until we have the data back,
+//   // so we wait for the fetch to be done before proceeding
+//   if ($scope.fetchStatus === fetchStatuses.COMPLETE) {
+//     return $scope.fieldCounts;
+//   }
+
+//   return await new Promise((resolve) => {
+//     const unwatch = $scope.$watch('fetchStatus', (newValue) => {
+//       if (newValue === fetchStatuses.COMPLETE) {
+//         unwatch();
+//         resolve($scope.fieldCounts);
+//       }
+//     });
+//   });
+// };
+
+const getSharingDataFields = async (
+  selectedFields: string[],
+  hideTimeColumn: boolean,
+  timeFieldName?: string
+) => {
+  if (selectedFields.length === 1 && selectedFields[0] === '_source') {
+    // const fieldCounts = await getFieldCounts();
+    return {
+      searchFields: undefined,
+      // selectFields: keys(fieldCounts).sort(),
+    };
+  }
+
+  const fields =
+    timeFieldName && !hideTimeColumn ? [timeFieldName, ...selectedFields] : selectedFields;
+  return {
+    searchFields: fields,
+    selectFields: fields,
+  };
+};
+
+const getSharingData = async ({
+  searchSource,
+  state,
+  services,
+}: {
+  searchSource: ISearchSource;
+  state: DiscoverState;
+  services: DiscoverViewServices;
+}) => {
+  const searchSourceInstance = searchSource.createCopy();
+  const indexPattern = await searchSourceInstance.getField('index');
+
+  const { searchFields, selectFields } = await getSharingDataFields(
+    state.columns,
+    services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING),
+    indexPattern?.timeFieldName
+  );
+
+  searchSourceInstance.setField('fields', searchFields);
+  searchSourceInstance.setField(
+    'sort',
+    getSortForSearchSource(
+      state.sort,
+      indexPattern,
+      services.uiSettings.get(SORT_DEFAULT_ORDER_SETTING)
+    )
+  );
+  searchSourceInstance.setField('highlight', null);
+  searchSourceInstance.setField('highlightAll', undefined);
+  searchSourceInstance.setField('aggs', null);
+  searchSourceInstance.setField('size', undefined);
+
+  const body = await searchSource.getSearchRequestBody();
+  return {
+    searchRequest: {
+      index: indexPattern?.title,
+      body,
+    },
+    // fields: selectFields,
+    metaFields: indexPattern?.metaFields,
+    conflictedTypesFields: indexPattern?.fields
+      .filter((f) => f.type === 'conflict')
+      .map((f) => f.name),
+    indexPatternId: indexPattern?.id,
+  };
+};
diff --git a/src/plugins/discover/public/application/components/top_nav/open_search_panel.test.tsx b/src/plugins/discover/public/application/components/top_nav/open_search_panel.test.tsx
new file mode 100644
index 000000000000..9dab50d341f8
--- /dev/null
+++ b/src/plugins/discover/public/application/components/top_nav/open_search_panel.test.tsx
@@ -0,0 +1,53 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { shallow } from 'enzyme';
+
+jest.mock('../../../../../saved_objects/public', () => ({
+  SavedObjectFinderUi: () => <div />,
+}));
+
+jest.mock('../../../../../opensearch_dashboards_react/public', () => ({
+  useOpenSearchDashboards: jest.fn().mockReturnValue({
+    services: {
+      core: { uiSettings: {}, savedObjects: {} },
+      addBasePath: (path: string) => path,
+    },
+  }),
+  withOpenSearchDashboards: jest.fn(),
+}));
+
+import { OpenSearchPanel } from './open_search_panel';
+
+test('render', () => {
+  const component = shallow(<OpenSearchPanel onClose={() => {}} makeUrl={(id) => id} />);
+  expect(component).toMatchSnapshot();
+});
diff --git a/src/plugins/discover/public/application/components/top_nav/open_search_panel.tsx b/src/plugins/discover/public/application/components/top_nav/open_search_panel.tsx
new file mode 100644
index 000000000000..2dd5bb9bbe90
--- /dev/null
+++ b/src/plugins/discover/public/application/components/top_nav/open_search_panel.tsx
@@ -0,0 +1,127 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import rison from 'rison-node';
+import { i18n } from '@osd/i18n';
+import { FormattedMessage } from '@osd/i18n/react';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutFooter,
+  EuiFlyoutBody,
+  EuiTitle,
+} from '@elastic/eui';
+import { SavedObjectFinderUi } from '../../../../../saved_objects/public';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverViewServices } from '../../../build_services';
+import { SAVED_OBJECT_TYPE } from '../../../saved_searches/_saved_search';
+
+interface Props {
+  onClose: () => void;
+  makeUrl: (id: string) => string;
+}
+
+export function OpenSearchPanel({ onClose, makeUrl }: Props) {
+  const {
+    services: {
+      core: { uiSettings, savedObjects },
+      addBasePath,
+    },
+  } = useOpenSearchDashboards<DiscoverViewServices>();
+
+  return (
+    <EuiFlyout ownFocus onClose={onClose} data-test-subj="loadSearchForm">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>
+            <FormattedMessage
+              id="discover.topNav.openSearchPanel.openSearchTitle"
+              defaultMessage="Open search"
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <SavedObjectFinderUi
+          noItemsMessage={
+            <FormattedMessage
+              id="discover.topNav.openSearchPanel.noSearchesFoundDescription"
+              defaultMessage="No matching searches found."
+            />
+          }
+          savedObjectMetaData={[
+            {
+              type: SAVED_OBJECT_TYPE,
+              getIconForSavedObject: () => 'search',
+              name: i18n.translate('discover.savedSearch.savedObjectName', {
+                defaultMessage: 'Saved search',
+              }),
+            },
+          ]}
+          onChoose={(id) => {
+            setTimeout(() => {
+              window.location.assign(makeUrl(id));
+              // TODO: figure out why a history push doesn't update the app state. The page reload is a hack around it
+              window.location.reload();
+              onClose();
+            }, 0);
+          }}
+          uiSettings={uiSettings}
+          savedObjects={savedObjects}
+        />
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+            <EuiButton
+              fill
+              onClick={onClose}
+              href={addBasePath(
+                `/app/management/opensearch-dashboards/objects?_a=${rison.encode({
+                  tab: SAVED_OBJECT_TYPE,
+                })}`
+              )}
+            >
+              <FormattedMessage
+                id="discover.topNav.openSearchPanel.manageSearchesButtonLabel"
+                defaultMessage="Manage searches"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/top_nav/show_open_search_panel.tsx b/src/plugins/discover/public/application/components/top_nav/show_open_search_panel.tsx
new file mode 100644
index 000000000000..5bc95b1b9cf2
--- /dev/null
+++ b/src/plugins/discover/public/application/components/top_nav/show_open_search_panel.tsx
@@ -0,0 +1,70 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import ReactDOM from 'react-dom';
+import { OpenSearchPanel } from './open_search_panel';
+import { I18nStart } from '../../../../../../core/public';
+import { OpenSearchDashboardsContextProvider } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverViewServices } from '../../../build_services';
+
+let isOpen = false;
+
+export function showOpenSearchPanel({
+  makeUrl,
+  I18nContext,
+  services,
+}: {
+  makeUrl: (id: string) => string;
+  I18nContext: I18nStart['Context'];
+  services: DiscoverViewServices;
+}) {
+  if (isOpen) {
+    return;
+  }
+
+  isOpen = true;
+  const container = document.createElement('div');
+  const onClose = () => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+    isOpen = false;
+  };
+
+  document.body.appendChild(container);
+  const element = (
+    <OpenSearchDashboardsContextProvider services={services}>
+      <I18nContext>
+        <OpenSearchPanel onClose={onClose} makeUrl={makeUrl} />
+      </I18nContext>
+    </OpenSearchDashboardsContextProvider>
+  );
+  ReactDOM.render(element, container);
+}
diff --git a/src/plugins/discover/public/application/angular/directives/uninitialized.tsx b/src/plugins/discover/public/application/components/uninitialized/uninitialized.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/uninitialized.tsx
rename to src/plugins/discover/public/application/components/uninitialized/uninitialized.tsx
diff --git a/src/plugins/discover/public/application/components/utils/use_pagination.test.ts b/src/plugins/discover/public/application/components/utils/use_pagination.test.ts
new file mode 100644
index 000000000000..6eda1f7b4ca8
--- /dev/null
+++ b/src/plugins/discover/public/application/components/utils/use_pagination.test.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderHook, act } from '@testing-library/react-hooks';
+import { usePagination } from './use_pagination';
+
+describe('usePagination', () => {
+  it('should initialize correctly with visParams and nRow', () => {
+    const nRow = 30;
+    const { result } = renderHook(() => usePagination(nRow));
+
+    expect(result.current).toEqual({
+      pageIndex: 0,
+      pageSize: 100,
+      onChangeItemsPerPage: expect.any(Function),
+      onChangePage: expect.any(Function),
+      pageSizeOptions: [25, 50, 100],
+    });
+  });
+
+  it('should update pageSize correctly when calling onChangeItemsPerPage', () => {
+    const nRow = 30;
+    const { result } = renderHook(() => usePagination(nRow));
+
+    act(() => {
+      result.current?.onChangeItemsPerPage(20);
+    });
+
+    expect(result.current).toEqual({
+      pageIndex: 0,
+      pageSize: 20,
+      onChangeItemsPerPage: expect.any(Function),
+      onChangePage: expect.any(Function),
+      pageSizeOptions: [25, 50, 100],
+    });
+  });
+
+  it('should update pageIndex correctly when calling onChangePage', () => {
+    const nRow = 30;
+    const { result } = renderHook(() => usePagination(nRow));
+
+    act(() => {
+      result.current?.onChangePage(1);
+    });
+
+    expect(result.current).toEqual({
+      pageIndex: 0,
+      pageSize: 100,
+      onChangeItemsPerPage: expect.any(Function),
+      onChangePage: expect.any(Function),
+      pageSizeOptions: [25, 50, 100],
+    });
+  });
+
+  it('should correct pageIndex if it exceeds maximum page index after nRow or perPage change', () => {
+    const nRow = 300;
+    const { result } = renderHook(() => usePagination(nRow));
+
+    act(() => {
+      result.current?.onChangePage(4);
+    });
+
+    expect(result.current).toEqual({
+      pageIndex: 0,
+      pageSize: 100,
+      onChangeItemsPerPage: expect.any(Function),
+      onChangePage: expect.any(Function),
+      pageSizeOptions: [25, 50, 100],
+    });
+  });
+});
diff --git a/src/plugins/discover/public/application/components/utils/use_pagination.ts b/src/plugins/discover/public/application/components/utils/use_pagination.ts
new file mode 100644
index 000000000000..98363e57ed95
--- /dev/null
+++ b/src/plugins/discover/public/application/components/utils/use_pagination.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useMemo, useCallback } from 'react';
+
+export const usePagination = (rowCount: number) => {
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 100 });
+  const pageCount = useMemo(() => Math.ceil(rowCount / pagination.pageSize), [
+    rowCount,
+    pagination,
+  ]);
+
+  const onChangeItemsPerPage = useCallback(
+    (pageSize: number) => setPagination((p) => ({ ...p, pageSize })),
+    []
+  );
+
+  const onChangePage = useCallback(
+    (pageIndex: number) => setPagination((p) => ({ ...p, pageIndex })),
+    []
+  );
+
+  return useMemo(
+    () =>
+      pagination.pageSize
+        ? {
+            ...pagination,
+            onChangeItemsPerPage,
+            onChangePage,
+            pageIndex: pagination.pageIndex > pageCount - 1 ? 0 : pagination.pageIndex,
+            pageSize: pagination.pageSize,
+            pageSizeOptions: [25, 50, 100], // TODO: make this configurable
+          }
+        : undefined,
+    [pagination, onChangeItemsPerPage, onChangePage, pageCount]
+  );
+};
diff --git a/src/plugins/discover/public/application/doc_views/doc_views_registry.ts b/src/plugins/discover/public/application/doc_views/doc_views_registry.ts
index 56f167b5f2cc..904d3813cd69 100644
--- a/src/plugins/discover/public/application/doc_views/doc_views_registry.ts
+++ b/src/plugins/discover/public/application/doc_views/doc_views_registry.ts
@@ -28,32 +28,16 @@
  * under the License.
  */
 
-import { auto } from 'angular';
-import { convertDirectiveToRenderFn } from './doc_views_helpers';
 import { DocView, DocViewInput, OpenSearchSearchHit, DocViewInputFn } from './doc_views_types';
 
 export class DocViewsRegistry {
   private docViews: DocView[] = [];
-  private angularInjectorGetter: (() => Promise<auto.IInjectorService>) | null = null;
-
-  setAngularInjectorGetter = (injectorGetter: () => Promise<auto.IInjectorService>) => {
-    this.angularInjectorGetter = injectorGetter;
-  };
 
   /**
    * Extends and adds the given doc view to the registry array
    */
   addDocView(docViewRaw: DocViewInput | DocViewInputFn) {
     const docView = typeof docViewRaw === 'function' ? docViewRaw() : docViewRaw;
-    if (docView.directive) {
-      // convert angular directive to render function for backwards compatibility
-      docView.render = convertDirectiveToRenderFn(docView.directive, () => {
-        if (!this.angularInjectorGetter) {
-          throw new Error('Angular was not initialized');
-        }
-        return this.angularInjectorGetter();
-      });
-    }
     if (typeof docView.shouldShow !== 'function') {
       docView.shouldShow = () => true;
     }
diff --git a/src/plugins/discover/public/application/doc_views/doc_views_types.ts b/src/plugins/discover/public/application/doc_views/doc_views_types.ts
index 961fc98516f6..db9757d385b0 100644
--- a/src/plugins/discover/public/application/doc_views/doc_views_types.ts
+++ b/src/plugins/discover/public/application/doc_views/doc_views_types.ts
@@ -29,17 +29,9 @@
  */
 
 import { ComponentType } from 'react';
-import { IScope } from 'angular';
 import { SearchResponse } from 'elasticsearch';
 import { IndexPattern } from '../../../../data/public';
 
-export interface AngularDirective {
-  controller: (...injectedServices: any[]) => void;
-  template: string;
-}
-
-export type AngularScope = IScope;
-
 export type OpenSearchSearchHit<T = unknown> = SearchResponse<T>['hits']['hits'][number];
 
 export interface FieldMapping {
@@ -72,7 +64,6 @@ export type DocViewRenderFn = (
 
 export interface DocViewInput {
   component?: DocViewerComponent;
-  directive?: AngularDirective;
   order: number;
   render?: DocViewRenderFn;
   shouldShow?: (hit: OpenSearchSearchHit) => boolean;
diff --git a/src/plugins/discover/public/application/helpers/breadcrumbs.ts b/src/plugins/discover/public/application/helpers/breadcrumbs.ts
index e30f50206aef..5463c05c1662 100644
--- a/src/plugins/discover/public/application/helpers/breadcrumbs.ts
+++ b/src/plugins/discover/public/application/helpers/breadcrumbs.ts
@@ -30,22 +30,13 @@
 
 import { i18n } from '@osd/i18n';
 
-export function getRootBreadcrumbs() {
+export function getRootBreadcrumbs(baseUrl: string) {
   return [
     {
       text: i18n.translate('discover.rootBreadcrumb', {
         defaultMessage: 'Discover',
       }),
-      href: '#/',
-    },
-  ];
-}
-
-export function getSavedSearchBreadcrumbs($route: any) {
-  return [
-    ...getRootBreadcrumbs(),
-    {
-      text: $route.current.locals.savedObjects.savedSearch.id,
+      href: baseUrl,
     },
   ];
 }
diff --git a/src/plugins/discover/public/application/utils/columns.test.ts b/src/plugins/discover/public/application/utils/columns.test.ts
new file mode 100644
index 000000000000..43c4b0555553
--- /dev/null
+++ b/src/plugins/discover/public/application/utils/columns.test.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { buildColumns } from './columns';
+
+describe('buildColumns', () => {
+  it('returns ["_source"] if columns is empty', () => {
+    expect(buildColumns([])).toEqual(['_source']);
+  });
+
+  it('returns columns if there is only one column', () => {
+    expect(buildColumns(['foo'])).toEqual(['foo']);
+  });
+
+  it('removes "_source" if there are more than one columns', () => {
+    expect(buildColumns(['foo', '_source', 'bar'])).toEqual(['foo', 'bar']);
+  });
+
+  it('returns columns if there are more than one columns but no "_source"', () => {
+    expect(buildColumns(['foo', 'bar'])).toEqual(['foo', 'bar']);
+  });
+});
diff --git a/src/plugins/discover/public/application/utils/columns.ts b/src/plugins/discover/public/application/utils/columns.ts
new file mode 100644
index 000000000000..062ca24e3ba4
--- /dev/null
+++ b/src/plugins/discover/public/application/utils/columns.ts
@@ -0,0 +1,43 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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.
+ */
+
+/**
+ * Helper function to provide a fallback to a single _source column if the given array of columns
+ * is empty, and removes _source if there are more than 1 columns given
+ * @param columns
+ */
+export function buildColumns(columns: string[]) {
+  if (columns.length > 1 && columns.indexOf('_source') !== -1) {
+    return columns.filter((col) => col !== '_source');
+  } else if (columns.length !== 0) {
+    return columns;
+  }
+  return ['_source'];
+}
diff --git a/src/plugins/discover/public/application/utils/state_management/common.test.ts b/src/plugins/discover/public/application/utils/state_management/common.test.ts
new file mode 100644
index 000000000000..64a2dba99dd4
--- /dev/null
+++ b/src/plugins/discover/public/application/utils/state_management/common.test.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { addColumn, removeColumn, reorderColumn } from './common';
+
+describe('commonUtils', () => {
+  it('should handle addColumn', () => {
+    expect(addColumn(['column1'], { column: 'column2' })).toEqual(['column1', 'column2']);
+    expect(addColumn(['column1'], { column: 'column2', index: 0 })).toEqual(['column2', 'column1']);
+  });
+
+  it('should handle removeColumn', () => {
+    expect(removeColumn(['column1', 'column2'], 'column1')).toEqual(['column2']);
+  });
+
+  it('should handle reorderColumn', () => {
+    expect(reorderColumn(['column1', 'column2', 'column3'], 0, 2)).toEqual([
+      'column2',
+      'column3',
+      'column1',
+    ]);
+  });
+});
diff --git a/src/plugins/discover/public/application/utils/state_management/common.ts b/src/plugins/discover/public/application/utils/state_management/common.ts
new file mode 100644
index 000000000000..800753fb4a36
--- /dev/null
+++ b/src/plugins/discover/public/application/utils/state_management/common.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const addColumn = (columns: string[], action: { column: string; index?: number }) => {
+  const { column, index } = action;
+  const newColumns = [...(columns || [])];
+  if (index !== undefined) newColumns.splice(index, 0, column);
+  else newColumns.push(column);
+  return newColumns;
+};
+
+export const removeColumn = (columns: string[], actionColumn: string) => {
+  return (columns || []).filter((column) => column !== actionColumn);
+};
+
+export const reorderColumn = (columns: string[], source: number, destination: number) => {
+  const newColumns = [...(columns || [])];
+  const [removed] = newColumns.splice(source, 1);
+  newColumns.splice(destination, 0, removed);
+  return newColumns;
+};
diff --git a/src/plugins/discover/public/application/utils/state_management/discover_slice.test.tsx b/src/plugins/discover/public/application/utils/state_management/discover_slice.test.tsx
new file mode 100644
index 000000000000..cbfc9c3769b0
--- /dev/null
+++ b/src/plugins/discover/public/application/utils/state_management/discover_slice.test.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { discoverSlice, DiscoverState } from './discover_slice';
+
+describe('discoverSlice', () => {
+  let initialState: DiscoverState;
+
+  beforeEach(() => {
+    initialState = {
+      columns: [],
+      sort: [],
+    };
+  });
+
+  it('should handle setState', () => {
+    const newState = {
+      columns: ['column1', 'column2'],
+      sort: [['field1', 'asc']],
+    };
+    const action = { type: 'discover/setState', payload: newState };
+    const result = discoverSlice.reducer(initialState, action);
+    expect(result).toEqual(newState);
+  });
+
+  it('should handle addColumn', () => {
+    const action1 = { type: 'discover/addColumn', payload: { column: 'column1' } };
+    const result1 = discoverSlice.reducer(initialState, action1);
+    expect(result1.columns).toEqual(['column1']);
+  });
+
+  it('should handle removeColumn', () => {
+    initialState = {
+      columns: ['column1', 'column2'],
+      sort: [['column1', 'asc']],
+    };
+    const action = { type: 'discover/removeColumn', payload: 'column1' };
+    const result = discoverSlice.reducer(initialState, action);
+    expect(result.columns).toEqual(['column2']);
+    expect(result.sort).toEqual([]);
+  });
+
+  it('should handle reorderColumn', () => {
+    initialState = {
+      columns: ['column1', 'column2', 'column3'],
+      sort: [],
+    };
+    const action = {
+      type: 'discover/reorderColumn',
+      payload: { source: 0, destination: 2 },
+    };
+    const result = discoverSlice.reducer(initialState, action);
+    expect(result.columns).toEqual(['column2', 'column3', 'column1']);
+  });
+
+  it('should handle setColumns', () => {
+    const action = {
+      type: 'discover/setColumns',
+      payload: { columns: ['column1', 'column2'] },
+    };
+    const result = discoverSlice.reducer(initialState, action);
+    expect(result.columns).toEqual(['column1', 'column2']);
+  });
+
+  it('should handle setSort', () => {
+    const action = { type: 'discover/setSort', payload: [['field1', 'asc']] };
+    const result = discoverSlice.reducer(initialState, action);
+    expect(result.sort).toEqual([['field1', 'asc']]);
+  });
+
+  it('should handle updateState', () => {
+    initialState = {
+      columns: ['column1', 'column2'],
+      sort: [['field1', 'asc']],
+    };
+    const action = {
+      type: 'discover/updateState',
+      payload: { sort: [['field2', 'desc']] },
+    };
+    const result = discoverSlice.reducer(initialState, action);
+    expect(result.sort).toEqual([['field2', 'desc']]);
+  });
+});
diff --git a/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx b/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx
new file mode 100644
index 000000000000..f7910efde91c
--- /dev/null
+++ b/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx
@@ -0,0 +1,172 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { matchPath } from 'react-router-dom';
+import { Filter, Query } from '../../../../../data/public';
+import { DiscoverServices } from '../../../build_services';
+import { RootState, DefaultViewState } from '../../../../../data_explorer/public';
+import { buildColumns } from '../columns';
+import * as utils from './common';
+import { SortOrder } from '../../../saved_searches/types';
+
+export interface DiscoverState {
+  /**
+   * Columns displayed in the table
+   */
+  columns: string[];
+  /**
+   * Array of applied filters
+   */
+  filters?: Filter[];
+  /**
+   * Used interval of the histogram
+   */
+  interval?: string;
+  /**
+   * Lucence or DQL query
+   */
+  query?: Query;
+  /**
+   * Array of the used sorting [[field,direction],...]
+   */
+  sort: SortOrder[];
+  /**
+   * id of the used saved search
+   */
+  savedSearch?: string;
+  /**
+   * dirty flag to indicate if the saved search has been modified
+   * since the last save
+   */
+  isDirty: boolean;
+}
+
+export interface DiscoverRootState extends RootState {
+  discover: DiscoverState;
+}
+
+const initialState: DiscoverState = {
+  columns: ['_source'],
+  sort: [],
+  isDirty: false,
+};
+
+export const getPreloadedState = async ({
+  getSavedSearchById,
+}: DiscoverServices): Promise<DefaultViewState<DiscoverState>> => {
+  const preloadedState: DefaultViewState<DiscoverState> = {
+    state: {
+      ...initialState,
+    },
+  };
+
+  const hashPath = window.location.hash.split('?')[0]; // hack to remove query params since matchPath considers them part of the id
+  const savedSearchId = matchPath<{ id?: string }>(hashPath, {
+    path: '#/view/:id',
+  })?.params.id;
+
+  if (savedSearchId) {
+    const savedSearchInstance = await getSavedSearchById(savedSearchId);
+
+    if (savedSearchInstance) {
+      preloadedState.state.columns = savedSearchInstance.columns;
+      preloadedState.state.sort = savedSearchInstance.sort;
+      preloadedState.state.savedSearch = savedSearchInstance.id;
+      const indexPatternId = savedSearchInstance.searchSource.getField('index')?.id;
+      preloadedState.root = {
+        metadata: {
+          indexPattern: indexPatternId,
+        },
+      };
+
+      savedSearchInstance.destroy(); // this instance is no longer needed, will create another one later
+    }
+  }
+
+  return preloadedState;
+};
+
+export const discoverSlice = createSlice({
+  name: 'discover',
+  initialState,
+  reducers: {
+    setState(state, action: PayloadAction<DiscoverState>) {
+      return action.payload;
+    },
+    addColumn(state, action: PayloadAction<{ column: string; index?: number }>) {
+      const columns = utils.addColumn(state.columns || [], action.payload);
+      return { ...state, columns: buildColumns(columns) };
+    },
+    removeColumn(state, action: PayloadAction<string>) {
+      const columns = utils.removeColumn(state.columns, action.payload);
+      const sort =
+        state.sort && state.sort.length ? state.sort.filter((s) => s[0] !== action.payload) : [];
+      return {
+        ...state,
+        columns: buildColumns(columns),
+        sort,
+        isDirty: true,
+      };
+    },
+    reorderColumn(state, action: PayloadAction<{ source: number; destination: number }>) {
+      const columns = utils.reorderColumn(
+        state.columns,
+        action.payload.source,
+        action.payload.destination
+      );
+      return {
+        ...state,
+        columns,
+        isDirty: true,
+      };
+    },
+    setColumns(state, action: PayloadAction<{ columns: string[] }>) {
+      return {
+        ...state,
+        columns: action.payload.columns,
+      };
+    },
+    setSort(state, action: PayloadAction<SortOrder[]>) {
+      return {
+        ...state,
+        sort: action.payload,
+      };
+    },
+    setInterval(state, action: PayloadAction<string>) {
+      return {
+        ...state,
+        interval: action.payload,
+      };
+    },
+    updateState(state, action: PayloadAction<Partial<DiscoverState>>) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
+    setSavedSearchId(state, action: PayloadAction<string>) {
+      return {
+        ...state,
+        savedSearch: action.payload,
+        isDirty: false,
+      };
+    },
+  },
+});
+
+// Exposing the state functions as generics
+export const {
+  addColumn,
+  removeColumn,
+  reorderColumn,
+  setColumns,
+  setSort,
+  setInterval,
+  setState,
+  updateState,
+  setSavedSearchId,
+} = discoverSlice.actions;
+export const { reducer } = discoverSlice;
diff --git a/src/plugins/discover/public/application/utils/state_management/index.ts b/src/plugins/discover/public/application/utils/state_management/index.ts
new file mode 100644
index 000000000000..d72cc772e6c4
--- /dev/null
+++ b/src/plugins/discover/public/application/utils/state_management/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { TypedUseSelectorHook } from 'react-redux';
+import { RootState, useTypedDispatch, useTypedSelector } from '../../../../../data_explorer/public';
+import { DiscoverState } from './discover_slice';
+
+export * from './discover_slice';
+
+export interface DiscoverRootState extends RootState {
+  discover: DiscoverState;
+}
+
+export const useSelector: TypedUseSelectorHook<DiscoverRootState> = useTypedSelector;
+export const useDispatch = useTypedDispatch;
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.scss b/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.scss
new file mode 100644
index 000000000000..d0d0951c67b9
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.scss
@@ -0,0 +1,25 @@
+.dscResultCount {
+  padding-top: $euiSizeXS;
+}
+
+.dscTimechart {
+  display: block;
+  position: relative;
+
+  // SASSTODO: the visualizing component should have an option or a modifier
+  .series > rect {
+    fill-opacity: 0.5;
+    stroke-width: 1;
+  }
+}
+
+.dscHistogram {
+  display: flex;
+  height: 200px;
+  padding: $euiSizeS;
+}
+
+.dscHistogram__header--partial {
+  font-weight: $euiFontWeightRegular;
+  min-width: $euiSize * 12;
+}
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx
new file mode 100644
index 000000000000..ec57e086f8d4
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './discover_chart_container.scss';
+import React, { useMemo } from 'react';
+import { DiscoverViewServices } from '../../../build_services';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { useDiscoverContext } from '../context';
+import { SearchData } from '../utils/use_search';
+import { DiscoverChart } from '../../components/chart/chart';
+
+export const DiscoverChartContainer = ({ hits, bucketInterval, chartData }: SearchData) => {
+  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+  const { uiSettings, data } = services;
+  const { indexPattern, savedSearch } = useDiscoverContext();
+
+  const isTimeBased = useMemo(() => (indexPattern ? indexPattern.isTimeBased() : false), [
+    indexPattern,
+  ]);
+
+  if (!hits) return null;
+
+  return (
+    <DiscoverChart
+      bucketInterval={bucketInterval}
+      chartData={chartData}
+      config={uiSettings}
+      data={data}
+      hits={hits}
+      resetQuery={() => {
+        window.location.href = `#/view/${savedSearch?.id}`;
+        window.location.reload();
+      }}
+      services={services}
+      showResetButton={!!savedSearch && !!savedSearch.id}
+      isTimeBased={isTimeBased}
+    />
+  );
+};
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
new file mode 100644
index 000000000000..e292303d9f8d
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -0,0 +1,112 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { History } from 'history';
+import { DiscoverViewServices } from '../../../build_services';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DataGridTable } from '../../components/data_grid/data_grid_table';
+import { useDiscoverContext } from '../context';
+import {
+  addColumn,
+  removeColumn,
+  setColumns,
+  setSort,
+  useDispatch,
+  useSelector,
+} from '../../utils/state_management';
+import { ResultStatus, SearchData } from '../utils/use_search';
+import { IndexPatternField, opensearchFilters } from '../../../../../data/public';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { SortOrder } from '../../../saved_searches/types';
+import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
+
+interface Props {
+  history: History;
+}
+
+export const DiscoverTable = ({ history }: Props) => {
+  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+  const {
+    uiSettings,
+    data: {
+      query: { filterManager },
+    },
+  } = services;
+  const { data$, refetch$, indexPattern } = useDiscoverContext();
+  const [fetchState, setFetchState] = useState<SearchData>({
+    status: data$.getValue().status,
+    rows: [],
+  });
+
+  const { columns, sort } = useSelector((state) => state.discover);
+  const dispatch = useDispatch();
+  const onAddColumn = (col: string) => dispatch(addColumn({ column: col }));
+  const onRemoveColumn = (col: string) => dispatch(removeColumn(col));
+  const onSetColumns = (cols: string[]) => dispatch(setColumns({ columns: cols }));
+  const onSetSort = (s: SortOrder[]) => {
+    dispatch(setSort(s));
+    refetch$.next();
+  };
+  const onAddFilter = useCallback(
+    (field: string | IndexPatternField, values: string, operation: '+' | '-') => {
+      if (!indexPattern) return;
+
+      const newFilters = opensearchFilters.generateFilters(
+        filterManager,
+        field,
+        values,
+        operation,
+        indexPattern.id ?? ''
+      );
+      return filterManager.addFilters(newFilters);
+    },
+    [filterManager, indexPattern]
+  );
+  const displayTimeColumn = useMemo(
+    () => !!(!uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased()),
+    [indexPattern, uiSettings]
+  );
+
+  const { rows } = fetchState || {};
+
+  useEffect(() => {
+    const subscription = data$.subscribe((next) => {
+      if (next.status === ResultStatus.LOADING) return;
+      if (next.status !== fetchState.status || (next.rows && next.rows !== fetchState.rows)) {
+        setFetchState({ ...fetchState, ...next });
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [data$, fetchState]);
+
+  if (indexPattern === undefined) {
+    // TODO: handle better
+    return null;
+  }
+
+  if (!rows || rows.length === 0) {
+    // TODO: handle better
+    return <div>{'loading...'}</div>;
+  }
+
+  return (
+    <DataGridTable
+      columns={columns}
+      indexPattern={indexPattern}
+      onAddColumn={onAddColumn}
+      onFilter={onAddFilter as DocViewFilterFn}
+      onRemoveColumn={onRemoveColumn}
+      onSetColumns={onSetColumns}
+      onSort={onSetSort}
+      sort={sort}
+      rows={rows}
+      displayTimeColumn={displayTimeColumn}
+      services={services}
+    />
+  );
+};
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
new file mode 100644
index 000000000000..b5adc9596321
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -0,0 +1,141 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState, useRef } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiCallOut, EuiLink } from '@elastic/eui';
+import { TopNav } from './top_nav';
+import { ViewProps } from '../../../../../data_explorer/public';
+import { DiscoverTable } from './discover_table';
+import { DiscoverChartContainer } from './discover_chart_container';
+import { useDiscoverContext } from '../context';
+import { ResultStatus, SearchData } from '../utils/use_search';
+import { DiscoverNoResults } from '../../components/no_results/no_results';
+import { DiscoverUninitialized } from '../../components/uninitialized/uninitialized';
+import { LoadingSpinner } from '../../components/loading_spinner/loading_spinner';
+import { setColumns, useDispatch, useSelector } from '../../utils/state_management';
+import { DiscoverViewServices } from '../../../build_services';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { filterColumns } from '../utils/filter_columns';
+import { DEFAULT_COLUMNS_SETTING } from '../../../../common';
+
+const KEY_SHOW_NOTICE = 'discover:deprecation-notice:show';
+
+// eslint-disable-next-line import/no-default-export
+export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
+  const { data$, refetch$, indexPattern } = useDiscoverContext();
+  const {
+    services: { uiSettings },
+  } = useOpenSearchDashboards<DiscoverViewServices>();
+  const { columns } = useSelector((state) => state.discover);
+  const filteredColumns = filterColumns(
+    columns,
+    indexPattern,
+    uiSettings.get(DEFAULT_COLUMNS_SETTING)
+  );
+  const dispatch = useDispatch();
+  const prevIndexPattern = useRef(indexPattern);
+
+  const [fetchState, setFetchState] = useState<SearchData>({
+    status: data$.getValue().status,
+    hits: 0,
+    bucketInterval: {},
+  });
+
+  const [isCallOutVisible, setIsCallOutVisible] = useState(
+    localStorage.getItem(KEY_SHOW_NOTICE) !== 'false'
+  );
+  const closeCallOut = () => {
+    localStorage.setItem(KEY_SHOW_NOTICE, 'false');
+    setIsCallOutVisible(false);
+  };
+
+  let callOut;
+
+  if (isCallOutVisible) {
+    callOut = (
+      <EuiFlexItem grow={false}>
+        <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
+          <EuiCallOut
+            title="You're viewing Discover 2.0. The old Discover app will be retired in OpenSearch version 2.11. To switch back to the old version, turn off the New Discover toggle."
+            iconType="alert"
+            dismissible
+            onDismiss={closeCallOut}
+          >
+            <p>
+              To provide feedback,{' '}
+              <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues">
+                open an issue
+              </EuiLink>
+              .
+            </p>
+          </EuiCallOut>
+        </EuiPanel>
+      </EuiFlexItem>
+    );
+  }
+
+  const { status } = fetchState;
+
+  useEffect(() => {
+    const subscription = data$.subscribe((next) => {
+      if (
+        next.status !== fetchState.status ||
+        (next.hits && next.hits !== fetchState.hits) ||
+        (next.bucketInterval && next.bucketInterval !== fetchState.bucketInterval) ||
+        (next.chartData && next.chartData !== fetchState.chartData)
+      ) {
+        setFetchState({ ...fetchState, ...next });
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [data$, fetchState]);
+
+  useEffect(() => {
+    if (indexPattern !== prevIndexPattern.current) {
+      dispatch(setColumns({ columns: filteredColumns }));
+      prevIndexPattern.current = indexPattern;
+    }
+  }, [dispatch, filteredColumns, indexPattern]);
+
+  const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined;
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlexItem grow={false}>
+        <TopNav
+          opts={{
+            setHeaderActionMenu,
+          }}
+        />
+      </EuiFlexItem>
+      {status === ResultStatus.NO_RESULTS && (
+        <EuiFlexItem>
+          <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
+        </EuiFlexItem>
+      )}
+      {status === ResultStatus.UNINITIALIZED && (
+        <DiscoverUninitialized onRefresh={() => refetch$.next()} />
+      )}
+      {status === ResultStatus.LOADING && <LoadingSpinner />}
+      {status === ResultStatus.READY && (
+        <>
+          {callOut}
+          <EuiFlexItem grow={false}>
+            <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
+              <EuiPanel>
+                <DiscoverChartContainer {...fetchState} />
+              </EuiPanel>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <DiscoverTable history={history} />
+          </EuiFlexItem>
+        </>
+      )}
+    </EuiFlexGroup>
+  );
+}
diff --git a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
new file mode 100644
index 000000000000..7a777142d2f0
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
@@ -0,0 +1,101 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { AppMountParameters } from '../../../../../../core/public';
+import { NEW_DISCOVER_APP, PLUGIN_ID } from '../../../../common';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverViewServices } from '../../../build_services';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { getTopNavLinks } from '../../components/top_nav/get_top_nav_links';
+import { useDiscoverContext } from '../context';
+import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
+
+export interface TopNavProps {
+  opts: {
+    setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  };
+}
+
+export const TopNav = ({ opts }: TopNavProps) => {
+  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+  const { inspectorAdapters, savedSearch, indexPattern } = useDiscoverContext();
+  const [indexPatterns, setIndexPatterns] = useState<IndexPattern[] | undefined>(undefined);
+
+  const {
+    uiSettings,
+    navigation: {
+      ui: { TopNavMenu },
+    },
+    core: {
+      application: { navigateToApp, getUrlForApp },
+    },
+    data,
+    chrome,
+  } = services;
+
+  const topNavLinks = savedSearch ? getTopNavLinks(services, inspectorAdapters, savedSearch) : [];
+
+  useEffect(() => {
+    if (uiSettings.get(NEW_DISCOVER_APP) === false) {
+      const path = window.location.hash;
+      navigateToApp('discoverLegacy', {
+        replace: true,
+        path,
+      });
+    }
+
+    return () => {};
+  }, [navigateToApp, uiSettings]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const getDefaultIndexPattern = async () => {
+      await data.indexPatterns.ensureDefaultIndexPattern();
+      const defaultIndexPattern = await data.indexPatterns.getDefault();
+
+      if (!isMounted) return;
+
+      setIndexPatterns(defaultIndexPattern ? [defaultIndexPattern] : undefined);
+    };
+
+    getDefaultIndexPattern();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [data.indexPatterns]);
+
+  useEffect(() => {
+    const pageTitleSuffix = savedSearch?.id && savedSearch.title ? `: ${savedSearch.title}` : '';
+    chrome.docTitle.change(`Discover${pageTitleSuffix}`);
+
+    if (savedSearch?.id) {
+      chrome.setBreadcrumbs([
+        ...getRootBreadcrumbs(getUrlForApp(PLUGIN_ID)),
+        { text: savedSearch.title },
+      ]);
+    } else {
+      chrome.setBreadcrumbs([...getRootBreadcrumbs(getUrlForApp(PLUGIN_ID))]);
+    }
+  }, [chrome, getUrlForApp, savedSearch?.id, savedSearch?.title]);
+
+  const showDatePicker = useMemo(() => (indexPattern ? indexPattern.isTimeBased() : false), [
+    indexPattern,
+  ]);
+
+  return (
+    <TopNavMenu
+      appName={PLUGIN_ID}
+      config={topNavLinks}
+      showSearchBar
+      showDatePicker={showDatePicker}
+      showSaveQuery
+      useDefaultBehaviors
+      setMenuMountPoint={opts.setHeaderActionMenu}
+      indexPatterns={indexPattern ? [indexPattern] : indexPatterns}
+    />
+  );
+};
diff --git a/src/plugins/discover/public/application/view_components/context/index.tsx b/src/plugins/discover/public/application/view_components/context/index.tsx
new file mode 100644
index 000000000000..29daca731714
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/context/index.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { DataExplorerServices, ViewProps } from '../../../../../data_explorer/public';
+import {
+  OpenSearchDashboardsContextProvider,
+  useOpenSearchDashboards,
+} from '../../../../../opensearch_dashboards_react/public';
+import { getServices } from '../../../opensearch_dashboards_services';
+import { useSearch, SearchContextValue } from '../utils/use_search';
+import { connectStorageToQueryState, opensearchFilters } from '../../../../../data/public';
+
+const SearchContext = React.createContext<SearchContextValue>({} as SearchContextValue);
+
+// eslint-disable-next-line import/no-default-export
+export default function DiscoverContext({ children }: React.PropsWithChildren<ViewProps>) {
+  const services = getServices();
+  const searchParams = useSearch(services);
+
+  const {
+    services: { osdUrlStateStorage },
+  } = useOpenSearchDashboards<DataExplorerServices>();
+
+  // Connect the query service to the url state
+  useEffect(() => {
+    connectStorageToQueryState(services.data.query, osdUrlStateStorage, {
+      filters: opensearchFilters.FilterStateStore.APP_STATE,
+      query: true,
+    });
+  }, [osdUrlStateStorage, services.data.query, services.uiSettings]);
+
+  return (
+    <OpenSearchDashboardsContextProvider services={services}>
+      <SearchContext.Provider value={searchParams}>{children}</SearchContext.Provider>
+    </OpenSearchDashboardsContextProvider>
+  );
+}
+
+export const useDiscoverContext = () => React.useContext(SearchContext);
diff --git a/src/plugins/discover/public/application/view_components/index.ts b/src/plugins/discover/public/application/view_components/index.ts
new file mode 100644
index 000000000000..45fd68cf1285
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './canvas';
+export * from './panel';
diff --git a/src/plugins/discover/public/application/view_components/panel/index.tsx b/src/plugins/discover/public/application/view_components/panel/index.tsx
new file mode 100644
index 000000000000..203b24b8819f
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/panel/index.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { ViewProps } from '../../../../../data_explorer/public';
+import {
+  addColumn,
+  removeColumn,
+  reorderColumn,
+  useDispatch,
+  useSelector,
+} from '../../utils/state_management';
+import { DiscoverSidebar } from '../../components/sidebar';
+import { useDiscoverContext } from '../context';
+import { ResultStatus, SearchData } from '../utils/use_search';
+import { IndexPatternField, opensearchFilters } from '../../../../../data/public';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { DiscoverViewServices } from '../../../build_services';
+
+// eslint-disable-next-line import/no-default-export
+export default function DiscoverPanel(props: ViewProps) {
+  const { services } = useOpenSearchDashboards<DiscoverViewServices>();
+  const {
+    data: {
+      query: { filterManager },
+    },
+  } = services;
+  const { data$, indexPattern } = useDiscoverContext();
+  const [fetchState, setFetchState] = useState<SearchData>(data$.getValue());
+
+  const { columns } = useSelector((state) => ({
+    columns: state.discover.columns,
+  }));
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const subscription = data$.subscribe((next) => {
+      if (next.status === ResultStatus.LOADING) return;
+      setFetchState(next);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [data$, fetchState]);
+
+  const onAddFilter = useCallback(
+    (field: string | IndexPatternField, values: string, operation: '+' | '-') => {
+      if (!indexPattern) return;
+
+      const newFilters = opensearchFilters.generateFilters(
+        filterManager,
+        field,
+        values,
+        operation,
+        indexPattern.id ?? ''
+      );
+      return filterManager.addFilters(newFilters);
+    },
+    [filterManager, indexPattern]
+  );
+
+  return (
+    <DiscoverSidebar
+      columns={columns || []}
+      fieldCounts={fetchState.fieldCounts || {}}
+      hits={fetchState.rows || []}
+      onAddField={(fieldName, index) => {
+        dispatch(
+          addColumn({
+            column: fieldName,
+            index,
+          })
+        );
+      }}
+      onRemoveField={(fieldName) => {
+        dispatch(removeColumn(fieldName));
+      }}
+      onReorderFields={(source, destination) => {
+        dispatch(
+          reorderColumn({
+            source,
+            destination,
+          })
+        );
+      }}
+      selectedIndexPattern={indexPattern}
+      onAddFilter={onAddFilter}
+    />
+  );
+}
diff --git a/src/plugins/discover/public/application/view_components/utils/filter_columns.test.ts b/src/plugins/discover/public/application/view_components/utils/filter_columns.test.ts
new file mode 100644
index 000000000000..5ab22f5fa363
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/filter_columns.test.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { filterColumns } from './filter_columns';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+
+describe('filterColumns', () => {
+  const indexPatternMock = {
+    fields: {
+      getAll: () => [{ name: 'a' }, { name: 'c' }, { name: 'd' }],
+    },
+  } as IndexPattern;
+  const defaultColumns = ['_defaultColumn'];
+
+  it('should return columns that exist in the index pattern fields', () => {
+    const columns = ['a', 'b'];
+    const result = filterColumns(columns, indexPatternMock, defaultColumns);
+    expect(result).toEqual(['a']);
+  });
+
+  it('should return defaultColumns if no columns exist in the index pattern fields', () => {
+    const columns = ['b', 'e'];
+    const result = filterColumns(columns, indexPatternMock, defaultColumns);
+    expect(result).toEqual(defaultColumns);
+  });
+
+  it('should return defaultColumns if no columns and indexPattern is null', () => {
+    const columns = ['b', 'e'];
+    const result = filterColumns(columns, null, defaultColumns);
+    expect(result).toEqual(defaultColumns);
+  });
+});
diff --git a/src/plugins/discover/public/application/view_components/utils/filter_columns.ts b/src/plugins/discover/public/application/view_components/utils/filter_columns.ts
new file mode 100644
index 000000000000..1b2c7554910a
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/filter_columns.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+
+/**
+ * Helper function to filter columns based on the fields of the index pattern.
+ * This function is used when we switch between index patterns. We want to keep the columns that are
+ * still available in the new index pattern and remove the ones that are not.
+ * If the resulting array is empty, it provides a fallback to the default column.
+ * @param columns Array of column names
+ * @param indexPattern Index pattern object
+ * @param defaultColumns Array of default columns
+ */
+export function filterColumns(
+  columns: string[],
+  indexPattern: IndexPattern | undefined,
+  defaultColumns: string[]
+) {
+  const fieldsName = indexPattern?.fields.getAll().map((fld) => fld.name) || [];
+  const filteredColumns = columns.filter((column) => fieldsName.includes(column));
+  return filteredColumns.length > 0 ? filteredColumns : defaultColumns;
+}
diff --git a/src/plugins/discover/public/application/view_components/utils/get_default_sort.ts b/src/plugins/discover/public/application/view_components/utils/get_default_sort.ts
new file mode 100644
index 000000000000..584e47047c57
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/get_default_sort.ts
@@ -0,0 +1,50 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { IndexPattern } from '../../../opensearch_dashboards_services';
+// @ts-ignore
+import { isSortable } from './get_sort';
+
+export type SortOrder = [string, string];
+
+/**
+ * use in case the user didn't manually sort.
+ * the default sort is returned depending of the index pattern
+ */
+export function getDefaultSort(
+  indexPattern: IndexPattern,
+  defaultSortOrder: string = 'desc'
+): SortOrder[] {
+  if (indexPattern.timeFieldName && isSortable(indexPattern.timeFieldName, indexPattern)) {
+    return [[indexPattern.timeFieldName, defaultSortOrder]];
+  } else {
+    return [['_score', defaultSortOrder]];
+  }
+}
diff --git a/src/plugins/discover/public/application/view_components/utils/get_sort.test.ts b/src/plugins/discover/public/application/view_components/utils/get_sort.test.ts
new file mode 100644
index 000000000000..f1b4861e4c94
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/get_sort.test.ts
@@ -0,0 +1,107 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { getSort, getSortArray } from './get_sort';
+// @ts-ignore
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+
+describe('docTable', function () {
+  let indexPattern: IndexPattern;
+
+  beforeEach(() => {
+    indexPattern = FixturesStubbedLogstashIndexPatternProvider() as IndexPattern;
+  });
+
+  describe('getSort function', function () {
+    test('should be a function', function () {
+      expect(typeof getSort === 'function').toBeTruthy();
+    });
+
+    test('should return an array of objects', function () {
+      expect(getSort([['bytes', 'desc']], indexPattern)).toEqual([{ bytes: 'desc' }]);
+
+      delete indexPattern.timeFieldName;
+      expect(getSort([['bytes', 'desc']], indexPattern)).toEqual([{ bytes: 'desc' }]);
+    });
+
+    test('should passthrough arrays of objects', () => {
+      expect(getSort([{ bytes: 'desc' }], indexPattern)).toEqual([{ bytes: 'desc' }]);
+    });
+
+    test('should return an empty array when passed an unsortable field', function () {
+      expect(getSort([['non-sortable', 'asc']], indexPattern)).toEqual([]);
+      expect(getSort([['lol_nope', 'asc']], indexPattern)).toEqual([]);
+
+      delete indexPattern.timeFieldName;
+      expect(getSort([['non-sortable', 'asc']], indexPattern)).toEqual([]);
+    });
+
+    test('should return an empty array ', function () {
+      expect(getSort([], indexPattern)).toEqual([]);
+      expect(getSort([['foo', 'bar']], indexPattern)).toEqual([]);
+      expect(getSort([{ foo: 'bar' }], indexPattern)).toEqual([]);
+    });
+
+    test('should convert a legacy sort to an array of objects', function () {
+      expect(getSort(['foo', 'desc'], indexPattern)).toEqual([{ foo: 'desc' }]);
+      expect(getSort(['foo', 'asc'], indexPattern)).toEqual([{ foo: 'asc' }]);
+    });
+  });
+
+  describe('getSortArray function', function () {
+    test('should have an array method', function () {
+      expect(getSortArray).toBeInstanceOf(Function);
+    });
+
+    test('should return an array of arrays for sortable fields', function () {
+      expect(getSortArray([['bytes', 'desc']], indexPattern)).toEqual([['bytes', 'desc']]);
+    });
+
+    test('should return an array of arrays from an array of elasticsearch sort objects', function () {
+      expect(getSortArray([{ bytes: 'desc' }], indexPattern)).toEqual([['bytes', 'desc']]);
+    });
+
+    test('should sort by an empty array when an unsortable field is given', function () {
+      expect(getSortArray([{ 'non-sortable': 'asc' }], indexPattern)).toEqual([]);
+      expect(getSortArray([{ lol_nope: 'asc' }], indexPattern)).toEqual([]);
+
+      delete indexPattern.timeFieldName;
+      expect(getSortArray([{ 'non-sortable': 'asc' }], indexPattern)).toEqual([]);
+    });
+
+    test('should return an empty array when passed an empty sort array', () => {
+      expect(getSortArray([], indexPattern)).toEqual([]);
+
+      delete indexPattern.timeFieldName;
+      expect(getSortArray([], indexPattern)).toEqual([]);
+    });
+  });
+});
diff --git a/src/plugins/discover/public/application/view_components/utils/get_sort.ts b/src/plugins/discover/public/application/view_components/utils/get_sort.ts
new file mode 100644
index 000000000000..32de9e352f88
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/get_sort.ts
@@ -0,0 +1,92 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 _ from 'lodash';
+import { IndexPattern } from '../../../opensearch_dashboards_services';
+
+export type SortPairObj = Record<string, string>;
+export type SortPairArr = [string, string];
+export type SortPair = SortPairArr | SortPairObj;
+export type SortInput = SortPair | SortPair[];
+
+export function isSortable(fieldName: string, indexPattern: IndexPattern) {
+  const field = indexPattern.getFieldByName(fieldName);
+  return field && field.sortable;
+}
+
+function createSortObject(
+  sortPair: SortInput,
+  indexPattern: IndexPattern
+): SortPairObj | undefined {
+  if (
+    Array.isArray(sortPair) &&
+    sortPair.length === 2 &&
+    isSortable(String(sortPair[0]), indexPattern)
+  ) {
+    const [field, direction] = sortPair as SortPairArr;
+    return { [field]: direction };
+  } else if (_.isPlainObject(sortPair) && isSortable(Object.keys(sortPair)[0], indexPattern)) {
+    return sortPair as SortPairObj;
+  }
+}
+
+export function isLegacySort(sort: SortPair[] | SortPair): sort is SortPair {
+  return (
+    sort.length === 2 && typeof sort[0] === 'string' && (sort[1] === 'desc' || sort[1] === 'asc')
+  );
+}
+
+/**
+ * Take a sorting array and make it into an object
+ * @param {array} sort two dimensional array [[fieldToSort, directionToSort]]
+ *  or an array of objects [{fieldToSort: directionToSort}]
+ * @param {object} indexPattern used for determining default sort
+ * @returns Array<{object}> an array of sort objects
+ */
+export function getSort(sort: SortPair[] | SortPair, indexPattern: IndexPattern): SortPairObj[] {
+  if (Array.isArray(sort)) {
+    if (isLegacySort(sort)) {
+      // To stay compatible with legacy sort, which just supported a single sort field
+      return [{ [sort[0]]: sort[1] }];
+    }
+    return sort
+      .map((sortPair: SortPair) => createSortObject(sortPair, indexPattern))
+      .filter((sortPairObj) => typeof sortPairObj === 'object') as SortPairObj[];
+  }
+  return [];
+}
+
+/**
+ * compared to getSort it doesn't return an array of objects, it returns an array of arrays
+ * [[fieldToSort: directionToSort]]
+ */
+export function getSortArray(sort: SortPair[], indexPattern: IndexPattern) {
+  return getSort(sort, indexPattern).map((sortPair) => Object.entries(sortPair).pop());
+}
diff --git a/src/plugins/discover/public/application/view_components/utils/get_sort_for_search_source.ts b/src/plugins/discover/public/application/view_components/utils/get_sort_for_search_source.ts
new file mode 100644
index 000000000000..b19128a432e0
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/get_sort_for_search_source.ts
@@ -0,0 +1,66 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { OpenSearchQuerySortValue, IndexPattern } from '../../../opensearch_dashboards_services';
+import { getSort } from './get_sort';
+import { getDefaultSort } from './get_default_sort';
+
+export type SortOrder = [string, string];
+
+/**
+ * Prepares sort for search source, that's sending the request to OpenSearch
+ * - Adds default sort if necessary
+ * - Handles the special case when there's sorting by date_nanos typed fields
+ *   the addon of the numeric_type guarantees the right sort order
+ *   when there are indices with date and indices with date_nanos field
+ */
+export function getSortForSearchSource(
+  sort?: SortOrder[],
+  indexPattern?: IndexPattern,
+  defaultDirection: string = 'desc'
+): OpenSearchQuerySortValue[] {
+  if (!sort || !indexPattern) {
+    return [];
+  } else if (Array.isArray(sort) && sort.length === 0) {
+    sort = getDefaultSort(indexPattern, defaultDirection);
+  }
+  const { timeFieldName } = indexPattern;
+  return getSort(sort, indexPattern).map((sortPair: Record<string, string>) => {
+    if (indexPattern.isTimeNanosBased() && timeFieldName && sortPair[timeFieldName]) {
+      return {
+        [timeFieldName]: {
+          order: sortPair[timeFieldName],
+          numeric_type: 'date_nanos',
+        },
+      } as OpenSearchQuerySortValue;
+    }
+    return sortPair as OpenSearchQuerySortValue;
+  });
+}
diff --git a/src/plugins/discover/public/application/view_components/utils/index_pattern_helper.ts b/src/plugins/discover/public/application/view_components/utils/index_pattern_helper.ts
new file mode 100644
index 000000000000..2db2b6111868
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/index_pattern_helper.ts
@@ -0,0 +1,114 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+import { SearchSource, IndexPattern } from 'src/plugins/data/public';
+import { SavedObject, ToastsStart } from 'opensearch-dashboards/public';
+import { redirectWhenMissing, getUrlTracker } from '../../../opensearch_dashboards_services';
+import { getIndexPatternId } from '../../helpers/get_index_pattern_id';
+
+export type IndexPatternSavedObject = SavedObject & { title: string };
+export interface IndexPatternData {
+  loaded: IndexPattern;
+  stateVal: string;
+  stateValFound: boolean;
+}
+
+export const fetchIndexPattern = async (data, config) => {
+  await data.indexPatterns.ensureDefaultIndexPattern();
+  const indexPatternList = await data.indexPatterns.getCache();
+  const id = getIndexPatternId('', indexPatternList, config.get('defaultIndex'));
+  const indexPatternData = await data.indexPatterns.get(id);
+  const ip: IndexPatternData = {
+    loaded: indexPatternData,
+    stateVal: '', // TODO: get stateVal from appStateContainer
+    stateValFound: false, // TODO: get stateValFound from appStateContainer
+  };
+  return ip;
+};
+
+export const fetchSavedSearch = async (
+  core,
+  basePath,
+  history,
+  savedSearchId,
+  services,
+  toastNotifications
+) => {
+  try {
+    const savedSearch = await services.getSavedSearchById(savedSearchId);
+    return savedSearch;
+  } catch (error) {
+    // TODO: handle redirect with Data Explorer
+    redirectWhenMissing({
+      history,
+      navigateToApp: core.application.navigateToApp,
+      basePath,
+      mapping: {
+        search: '/',
+        'index-pattern': {
+          app: 'management',
+          path: `opensearch-dashboards/objects/savedSearches/${savedSearchId}`,
+        },
+      },
+      toastNotifications,
+      onBeforeRedirect() {
+        getUrlTracker().setTrackedUrl('/');
+      },
+    });
+  }
+};
+
+export function resolveIndexPattern(
+  ip: IndexPatternData,
+  searchSource: SearchSource,
+  toastNotifications: ToastsStart
+) {
+  const { loaded: loadedIndexPattern, stateVal, stateValFound } = ip;
+
+  const ownIndexPattern = searchSource.getOwnField('index');
+
+  if (ownIndexPattern && !stateVal) {
+    return ownIndexPattern;
+  }
+
+  if (stateVal && !stateValFound) {
+    const warningTitle = i18n.translate('discover.valueIsNotConfiguredIndexPatternIDWarningTitle', {
+      defaultMessage: '{id} is not a configured index pattern ID',
+      values: {
+        id: `"${stateVal}"`,
+      },
+    });
+
+    if (ownIndexPattern) {
+      toastNotifications.addWarning({
+        title: warningTitle,
+        text: i18n.translate('discover.showingSavedIndexPatternWarningDescription', {
+          defaultMessage:
+            'Showing the saved index pattern: "{ownIndexPatternTitle}" ({ownIndexPatternId})',
+          values: {
+            ownIndexPatternTitle: ownIndexPattern.title,
+            ownIndexPatternId: ownIndexPattern.id,
+          },
+        }),
+      });
+      return ownIndexPattern;
+    }
+
+    toastNotifications.addWarning({
+      title: warningTitle,
+      text: i18n.translate('discover.showingDefaultIndexPatternWarningDescription', {
+        defaultMessage:
+          'Showing the default index pattern: "{loadedIndexPatternTitle}" ({loadedIndexPatternId})',
+        values: {
+          loadedIndexPatternTitle: loadedIndexPattern.title,
+          loadedIndexPatternId: loadedIndexPattern.id,
+        },
+      }),
+    });
+  }
+
+  return loadedIndexPattern;
+}
diff --git a/src/plugins/discover/public/application/view_components/utils/update_search_source.ts b/src/plugins/discover/public/application/view_components/utils/update_search_source.ts
new file mode 100644
index 000000000000..1404773eb9d4
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/update_search_source.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  IndexPattern,
+  ISearchSource,
+  indexPatterns as indexPatternUtils,
+  AggConfigs,
+} from '../../../../../data/public';
+import { DiscoverServices } from '../../../build_services';
+import { SortOrder } from '../../../saved_searches/types';
+import { getSortForSearchSource } from './get_sort_for_search_source';
+import { SORT_DEFAULT_ORDER_SETTING, SAMPLE_SIZE_SETTING } from '../../../../common';
+
+interface Props {
+  indexPattern: IndexPattern;
+  services: DiscoverServices;
+  sort: SortOrder[] | undefined;
+  searchSource?: ISearchSource;
+  histogramConfigs?: AggConfigs;
+}
+
+export const updateSearchSource = async ({
+  indexPattern,
+  services,
+  searchSource,
+  sort,
+  histogramConfigs,
+}: Props) => {
+  const { uiSettings, data } = services;
+  const sortForSearchSource = getSortForSearchSource(
+    sort,
+    indexPattern,
+    uiSettings.get(SORT_DEFAULT_ORDER_SETTING)
+  );
+  const size = uiSettings.get(SAMPLE_SIZE_SETTING);
+  const filters = data.query.filterManager.getFilters();
+
+  const searchSourceInstance = searchSource || (await data.search.searchSource.create());
+
+  // searchSource which applies time range
+  const timeRangeSearchSource = await data.search.searchSource.create();
+  const { isDefault } = indexPatternUtils;
+  if (isDefault(indexPattern)) {
+    const timefilter = data.query.timefilter.timefilter;
+
+    timeRangeSearchSource.setField('filter', () => {
+      return timefilter.createFilter(indexPattern);
+    });
+  }
+
+  searchSourceInstance.setParent(timeRangeSearchSource);
+
+  searchSourceInstance.setFields({
+    index: indexPattern,
+    sort: sortForSearchSource,
+    size,
+    query: data.query.queryString.getQuery() || null,
+    highlightAll: true,
+    version: true,
+    filter: filters,
+  });
+
+  if (histogramConfigs) {
+    const dslAggs = histogramConfigs.toDsl();
+    searchSourceInstance.setField('aggs', dslAggs);
+  }
+
+  return searchSourceInstance;
+};
diff --git a/src/plugins/discover/public/application/view_components/utils/use_index_pattern.ts b/src/plugins/discover/public/application/view_components/utils/use_index_pattern.ts
new file mode 100644
index 000000000000..872639107987
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/use_index_pattern.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useState } from 'react';
+import { i18n } from '@osd/i18n';
+import { IndexPattern } from '../../../../../data/public';
+import { useSelector } from '../../utils/state_management';
+import { DiscoverServices } from '../../../build_services';
+
+export const useIndexPattern = (services: DiscoverServices) => {
+  const indexPatternId = useSelector((state) => state.metadata.indexPattern);
+  const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(undefined);
+  const { data, toastNotifications } = services;
+
+  useEffect(() => {
+    let isMounted = true;
+    if (!indexPatternId) return;
+    const indexPatternMissingWarning = i18n.translate(
+      'discover.valueIsNotConfiguredIndexPatternIDWarningTitle',
+      {
+        defaultMessage: '{id} is not a configured index pattern ID',
+        values: {
+          id: `"${indexPatternId}"`,
+        },
+      }
+    );
+
+    data.indexPatterns
+      .get(indexPatternId)
+      .then((result) => {
+        if (isMounted) {
+          setIndexPattern(result);
+        }
+      })
+      .catch(() => {
+        if (isMounted) {
+          toastNotifications.addDanger({
+            title: indexPatternMissingWarning,
+          });
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [indexPatternId, data.indexPatterns, toastNotifications]);
+
+  return indexPattern;
+};
diff --git a/src/plugins/discover/public/application/view_components/utils/use_search.ts b/src/plugins/discover/public/application/view_components/utils/use_search.ts
new file mode 100644
index 000000000000..2560fc6d3567
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/utils/use_search.ts
@@ -0,0 +1,290 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { BehaviorSubject, Subject, merge } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { i18n } from '@osd/i18n';
+import { useEffect } from 'react';
+import { cloneDeep } from 'lodash';
+import { RequestAdapter } from '../../../../../inspector/public';
+import { DiscoverServices } from '../../../build_services';
+import { search } from '../../../../../data/public';
+import { validateTimeRange } from '../../helpers/validate_time_range';
+import { updateSearchSource } from './update_search_source';
+import { useIndexPattern } from './use_index_pattern';
+import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+import { TimechartHeaderBucketInterval } from '../../components/chart/timechart_header';
+import { tabifyAggResponse } from '../../../opensearch_dashboards_services';
+import {
+  getDimensions,
+  buildPointSeriesData,
+  createHistogramConfigs,
+  Chart,
+} from '../../components/chart/utils';
+import { SavedSearch } from '../../../saved_searches';
+import { useSelector } from '../../utils/state_management';
+import {
+  getRequestInspectorStats,
+  getResponseInspectorStats,
+} from '../../../opensearch_dashboards_services';
+import { SEARCH_ON_PAGE_LOAD_SETTING } from '../../../../common';
+
+export enum ResultStatus {
+  UNINITIALIZED = 'uninitialized',
+  LOADING = 'loading', // initial data load
+  READY = 'ready', // results came back
+  NO_RESULTS = 'none', // no results came back
+}
+
+export interface SearchData {
+  status: ResultStatus;
+  fetchCounter?: number;
+  fieldCounts?: Record<string, number>;
+  hits?: number;
+  rows?: OpenSearchSearchHit[];
+  bucketInterval?: TimechartHeaderBucketInterval | {};
+  chartData?: Chart;
+}
+
+export type SearchRefetch = 'refetch' | undefined;
+
+export type DataSubject = BehaviorSubject<SearchData>;
+export type RefetchSubject = Subject<SearchRefetch>;
+
+/**
+ * A hook that provides functionality for fetching and managing discover search data.
+ * @returns { data: DataSubject, refetch$: RefetchSubject, indexPattern: IndexPattern, savedSearch?: SavedSearch, inspectorAdapters } - data is a BehaviorSubject that emits the current search data, refetch$ is a Subject that can be used to trigger a refetch, savedSearch is the saved search object if it exists
+ * @example
+ * const { data$, refetch$ } = useSearch();
+ * useEffect(() => {
+ *  const subscription = data$.subscribe((d) => {
+ *   // do something with the data
+ * });
+ * return () => subscription.unsubscribe();
+ * }, [data$]);
+ */
+export const useSearch = (services: DiscoverServices) => {
+  const [savedSearch, setSavedSearch] = useState<SavedSearch | undefined>(undefined);
+  const { savedSearch: savedSearchId, sort, interval } = useSelector((state) => state.discover);
+  const indexPattern = useIndexPattern(services);
+  const { data, filterManager, getSavedSearchById, core, toastNotifications } = services;
+  const timefilter = data.query.timefilter.timefilter;
+  const fetchStateRef = useRef<{
+    abortController: AbortController | undefined;
+    fieldCounts: Record<string, number>;
+    rows?: OpenSearchSearchHit[];
+  }>({
+    abortController: undefined,
+    fieldCounts: {},
+  });
+  const inspectorAdapters = {
+    requests: new RequestAdapter(),
+  };
+
+  const shouldSearchOnPageLoad = useCallback(() => {
+    // A saved search is created on every page load, so we check the ID to see if we're loading a
+    // previously saved search or if it is just transient
+    return (
+      services.uiSettings.get(SEARCH_ON_PAGE_LOAD_SETTING) ||
+      savedSearch?.id !== undefined ||
+      timefilter.getRefreshInterval().pause === false
+    );
+  }, [savedSearch, services.uiSettings, timefilter]);
+
+  const data$ = useMemo(
+    () =>
+      new BehaviorSubject<SearchData>({
+        status: shouldSearchOnPageLoad() ? ResultStatus.LOADING : ResultStatus.UNINITIALIZED,
+      }),
+    [shouldSearchOnPageLoad]
+  );
+  const refetch$ = useMemo(() => new Subject<SearchRefetch>(), []);
+
+  const fetch = useCallback(async () => {
+    if (!indexPattern) {
+      data$.next({
+        status: shouldSearchOnPageLoad() ? ResultStatus.LOADING : ResultStatus.UNINITIALIZED,
+      });
+      return;
+    }
+
+    if (!validateTimeRange(timefilter.getTime(), toastNotifications)) {
+      return data$.next({
+        status: ResultStatus.NO_RESULTS,
+        rows: [],
+      });
+    }
+
+    // Abort any in-progress requests before fetching again
+    if (fetchStateRef.current.abortController) fetchStateRef.current.abortController.abort();
+    fetchStateRef.current.abortController = new AbortController();
+    const histogramConfigs = indexPattern.timeFieldName
+      ? createHistogramConfigs(indexPattern, interval || 'auto', data)
+      : undefined;
+    const searchSource = await updateSearchSource({
+      indexPattern,
+      services,
+      sort,
+      searchSource: savedSearch?.searchSource,
+      histogramConfigs,
+    });
+
+    try {
+      // Only show loading indicator if we are fetching when the rows are empty
+      if (fetchStateRef.current.rows?.length === 0) {
+        data$.next({ status: ResultStatus.LOADING });
+      }
+
+      // Initialize inspect adapter for search source
+      inspectorAdapters.requests.reset();
+      const title = i18n.translate('discover.inspectorRequestDataTitle', {
+        defaultMessage: 'data',
+      });
+      const description = i18n.translate('discover.inspectorRequestDescription', {
+        defaultMessage: 'This request queries OpenSearch to fetch the data for the search.',
+      });
+      const inspectorRequest = inspectorAdapters.requests.start(title, { description });
+      inspectorRequest.stats(getRequestInspectorStats(searchSource));
+      searchSource.getSearchRequestBody().then((body) => {
+        inspectorRequest.json(body);
+      });
+
+      // Execute the search
+      const fetchResp = await searchSource.fetch({
+        abortSignal: fetchStateRef.current.abortController.signal,
+      });
+
+      inspectorRequest
+        .stats(getResponseInspectorStats(fetchResp, searchSource))
+        .ok({ json: fetchResp });
+      const hits = fetchResp.hits.total as number;
+      const rows = fetchResp.hits.hits;
+      let bucketInterval = {};
+      let chartData;
+      for (const row of rows) {
+        const fields = Object.keys(indexPattern.flattenHit(row));
+        for (const fieldName of fields) {
+          fetchStateRef.current.fieldCounts[fieldName] =
+            (fetchStateRef.current.fieldCounts[fieldName] || 0) + 1;
+        }
+      }
+
+      if (histogramConfigs) {
+        const bucketAggConfig = histogramConfigs.aggs[1];
+        const tabifiedData = tabifyAggResponse(histogramConfigs, fetchResp);
+        const dimensions = getDimensions(histogramConfigs, data);
+        if (dimensions) {
+          if (bucketAggConfig && search.aggs.isDateHistogramBucketAggConfig(bucketAggConfig)) {
+            bucketInterval = bucketAggConfig.buckets?.getInterval();
+          }
+          // @ts-ignore tabifiedData is compatible but due to the way it is typed typescript complains
+          chartData = buildPointSeriesData(tabifiedData, dimensions);
+        }
+      }
+
+      fetchStateRef.current.fieldCounts = fetchStateRef.current.fieldCounts!;
+      fetchStateRef.current.rows = rows;
+      data$.next({
+        status: rows.length > 0 ? ResultStatus.READY : ResultStatus.NO_RESULTS,
+        fieldCounts: fetchStateRef.current.fieldCounts,
+        hits,
+        rows,
+        bucketInterval,
+        chartData,
+      });
+    } catch (error) {
+      // If the request was aborted then no need to surface this error in the UI
+      if (error instanceof Error && error.name === 'AbortError') return;
+
+      data$.next({
+        status: ResultStatus.NO_RESULTS,
+        rows: [],
+      });
+
+      data.search.showError(error as Error);
+    }
+  }, [
+    indexPattern,
+    interval,
+    timefilter,
+    toastNotifications,
+    data,
+    services,
+    savedSearch?.searchSource,
+    data$,
+    sort,
+    shouldSearchOnPageLoad,
+    inspectorAdapters.requests,
+  ]);
+
+  useEffect(() => {
+    const fetch$ = merge(
+      refetch$,
+      filterManager.getFetches$(),
+      timefilter.getFetch$(),
+      timefilter.getTimeUpdate$(),
+      timefilter.getAutoRefreshFetch$(),
+      data.query.queryString.getUpdates$()
+    ).pipe(debounceTime(100));
+
+    const subscription = fetch$.subscribe(() => {
+      (async () => {
+        try {
+          await fetch();
+        } catch (error) {
+          core.fatalErrors.add(error as Error);
+        }
+      })();
+    });
+
+    // kick off initial fetch
+    refetch$.next();
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [data$, data.query.queryString, filterManager, refetch$, timefilter, fetch, core.fatalErrors]);
+
+  // Get savedSearch if it exists
+  useEffect(() => {
+    (async () => {
+      const savedSearchInstance = await getSavedSearchById(savedSearchId || '');
+      setSavedSearch(savedSearchInstance);
+
+      // sync initial app filters from savedObject to filterManager
+      const filters = cloneDeep(savedSearchInstance.searchSource.getOwnField('filter'));
+      const query =
+        savedSearchInstance.searchSource.getField('query') ||
+        data.query.queryString.getDefaultQuery();
+      const actualFilters = [];
+
+      if (filters !== undefined) {
+        const result = typeof filters === 'function' ? filters() : filters;
+        if (result !== undefined) {
+          actualFilters.push(...(Array.isArray(result) ? result : [result]));
+        }
+      }
+
+      filterManager.setAppFilters(actualFilters);
+      data.query.queryString.setQuery(query);
+    })();
+
+    return () => {};
+    // This effect will only run when getSavedSearchById is called, which is
+    // only called when the component is first mounted.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getSavedSearchById, savedSearchId]);
+
+  return {
+    data$,
+    refetch$,
+    indexPattern,
+    savedSearch,
+    inspectorAdapters,
+  };
+};
+
+export type SearchContextValue = ReturnType<typeof useSearch>;
diff --git a/src/plugins/discover/public/build_services.ts b/src/plugins/discover/public/build_services.ts
index 3fdafcff0c40..ebe4e80a70c5 100644
--- a/src/plugins/discover/public/build_services.ts
+++ b/src/plugins/discover/public/build_services.ts
@@ -57,6 +57,7 @@ import { getHistory } from './opensearch_dashboards_services';
 import { OpenSearchDashboardsLegacyStart } from '../../opensearch_dashboards_legacy/public';
 import { UrlForwardingStart } from '../../url_forwarding/public';
 import { NavigationPublicPluginStart } from '../../navigation/public';
+import { DataExplorerServices } from '../../data_explorer/public';
 
 export interface DiscoverServices {
   addBasePath: (path: string) => string;
@@ -79,17 +80,15 @@ export interface DiscoverServices {
   toastNotifications: ToastsStart;
   getSavedSearchById: (id: string) => Promise<SavedSearch>;
   getSavedSearchUrlById: (id: string) => Promise<string>;
-  getEmbeddableInjector: any;
   uiSettings: IUiSettingsClient;
   visualizations: VisualizationsStart;
 }
 
-export async function buildServices(
+export function buildServices(
   core: CoreStart,
   plugins: DiscoverStartPlugins,
-  context: PluginInitializerContext,
-  getEmbeddableInjector: any
-): Promise<DiscoverServices> {
+  context: PluginInitializerContext
+): DiscoverServices {
   const services: SavedObjectOpenSearchDashboardsServices = {
     savedObjectsClient: core.savedObjects.client,
     indexPatterns: plugins.data.indexPatterns,
@@ -108,7 +107,6 @@ export async function buildServices(
     docLinks: core.docLinks,
     theme: plugins.charts.theme,
     filterManager: plugins.data.query.filterManager,
-    getEmbeddableInjector,
     getSavedSearchById: async (id: string) => savedObjectService.get(id),
     getSavedSearchUrlById: async (id: string) => savedObjectService.urlFor(id),
     history: getHistory,
@@ -127,3 +125,6 @@ export async function buildServices(
     visualizations: plugins.visualizations,
   };
 }
+
+// Any component inside the panel and canvas views has access to both these services.
+export type DiscoverViewServices = DiscoverServices & DataExplorerServices;
diff --git a/src/plugins/discover/public/index.ts b/src/plugins/discover/public/index.ts
index 6c9ab46b656e..3bc009914940 100644
--- a/src/plugins/discover/public/index.ts
+++ b/src/plugins/discover/public/index.ts
@@ -37,5 +37,7 @@ export function plugin(initializerContext: PluginInitializerContext) {
 }
 
 export { SavedSearch, SavedSearchLoader, createSavedSearchesLoader } from './saved_searches';
-export { ISearchEmbeddable, SEARCH_EMBEDDABLE_TYPE, SearchInput } from './application/embeddable';
+// TODO: Fix embeddable after removing Angular
+// export { ISearchEmbeddable, SEARCH_EMBEDDABLE_TYPE, SearchInput } from './application/embeddable';
 export { DISCOVER_APP_URL_GENERATOR, DiscoverUrlGeneratorState } from './url_generator';
+export { NEW_DISCOVER_APP } from '../common';
diff --git a/src/plugins/discover/public/migrate_state.ts b/src/plugins/discover/public/migrate_state.ts
new file mode 100644
index 000000000000..2a3cd77d26bc
--- /dev/null
+++ b/src/plugins/discover/public/migrate_state.ts
@@ -0,0 +1,143 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { matchPath } from 'react-router-dom';
+import { getStateFromOsdUrl, setStateToOsdUrl } from '../../opensearch_dashboards_utils/public';
+import { Filter, Query } from '../../data/public';
+
+interface CommonParams {
+  appState?: string;
+}
+
+interface DiscoverParams extends CommonParams {
+  id?: string;
+}
+
+interface ContextParams extends CommonParams {
+  indexPattern: string;
+  id: string;
+}
+
+interface DocParams extends CommonParams {
+  indexPattern: string;
+  index: string;
+}
+
+export interface LegacyDiscoverState {
+  /**
+   * Columns displayed in the table
+   */
+  columns?: string[];
+  /**
+   * Array of applied filters
+   */
+  filters?: Filter[];
+  /**
+   * id of the used index pattern
+   */
+  index?: string;
+  /**
+   * Used interval of the histogram
+   */
+  interval?: string;
+  /**
+   * Lucence or DQL query
+   */
+  query?: Query;
+  /**
+   * Array of the used sorting [[field,direction],...]
+   */
+  sort?: string[][];
+  /**
+   * id of the used saved query
+   */
+  savedQuery?: string;
+}
+
+// TODO: Write unit tests once all routes have been migrated.
+/**
+ * Migrates legacy URLs to the current URL format.
+ * @param oldPath The legacy hash that contains the state.
+ * @param newPath The new base path.
+ */
+export function migrateUrlState(oldPath: string, newPath = '/'): string {
+  let path = newPath;
+  const pathPatterns = [
+    {
+      pattern: '#/context/:indexPattern/:id\\?:appState?',
+      extraState: { docView: 'context' },
+      path: `context`,
+    },
+    {
+      pattern: '#/doc/:indexPattern/:index\\?:appState?',
+      extraState: { docView: 'doc' },
+      path: `doc`,
+    },
+    {
+      pattern: '#/view/:id',
+      extraState: {},
+      path: `savedSearch`,
+    },
+    { pattern: '#/', extraState: {}, path: `discover` },
+  ];
+
+  // Get the first matching path pattern.
+  const matchingPathPattern = pathPatterns.find((pathPattern) =>
+    matchPath(oldPath, { path: pathPattern.pattern, strict: false })
+  );
+
+  if (!matchingPathPattern) {
+    return path;
+  }
+
+  // Migrate the path.
+  switch (matchingPathPattern.path) {
+    // doc and context views will use the same legacy path and state
+    // so we can use the saved legacy path in new discover
+    case `doc`:
+    case `context`:
+      path = oldPath;
+    case `discover`:
+    case `savedSearch`:
+      const params = matchPath<DiscoverParams>(oldPath, {
+        path: matchingPathPattern.pattern,
+      })!.params;
+
+      // if there is a saved search id, use the saved search path
+      if (params.id) {
+        path = `${path}#/view/${params.id}`;
+      }
+
+      const appState = getStateFromOsdUrl<LegacyDiscoverState>('_a', oldPath);
+
+      if (!appState) return path;
+
+      const { columns, filters, index, interval, query, sort, savedQuery } = appState;
+
+      const _q = {
+        query,
+        filters,
+      };
+
+      const _a = {
+        discover: {
+          columns,
+          interval,
+          sort,
+          savedQuery,
+        },
+        metadata: {
+          indexPattern: index,
+        },
+      };
+
+      path = setStateToOsdUrl('_a', _a, { useHash: false }, path);
+      path = setStateToOsdUrl('_q', _q, { useHash: false }, path);
+
+      break;
+  }
+
+  return path;
+}
diff --git a/src/plugins/discover/public/opensearch_dashboards_services.ts b/src/plugins/discover/public/opensearch_dashboards_services.ts
index 8531564e0cc7..7149454a34ce 100644
--- a/src/plugins/discover/public/opensearch_dashboards_services.ts
+++ b/src/plugins/discover/public/opensearch_dashboards_services.ts
@@ -38,24 +38,9 @@ import { search } from '../../data/public';
 import { DocViewsRegistry } from './application/doc_views/doc_views_registry';
 import { DocViewsLinksRegistry } from './application/doc_views_links/doc_views_links_registry';
 
-let angularModule: any = null;
 let services: DiscoverServices | null = null;
 let uiActions: UiActionsStart;
 
-/**
- * set bootstrapped inner angular module
- */
-export function setAngularModule(module: any) {
-  angularModule = module;
-}
-
-/**
- * get boostrapped inner angular module
- */
-export function getAngularModule() {
-  return angularModule;
-}
-
 export function getServices(): DiscoverServices {
   if (!services) {
     throw new Error('Discover services are not yet available');
@@ -74,11 +59,6 @@ export const [getHeaderActionMenuMounter, setHeaderActionMenuMounter] = createGe
   AppMountParameters['setHeaderActionMenu']
 >('headerActionMenuMounter');
 
-export const [getUrlTracker, setUrlTracker] = createGetterSetter<{
-  setTrackedUrl: (url: string) => void;
-  restorePreviousUrl: () => void;
-}>('urlTracker');
-
 export const [getDocViewsRegistry, setDocViewsRegistry] = createGetterSetter<DocViewsRegistry>(
   'DocViewsRegistry'
 );
@@ -86,6 +66,7 @@ export const [getDocViewsRegistry, setDocViewsRegistry] = createGetterSetter<Doc
 export const [getDocViewsLinksRegistry, setDocViewsLinksRegistry] = createGetterSetter<
   DocViewsLinksRegistry
 >('DocViewsLinksRegistry');
+
 /**
  * Makes sure discover and context are using one instance of history.
  */
diff --git a/src/plugins/discover/public/plugin.ts b/src/plugins/discover/public/plugin.ts
index 62f6e6908ba1..f1532b6f776b 100644
--- a/src/plugins/discover/public/plugin.ts
+++ b/src/plugins/discover/public/plugin.ts
@@ -1,37 +1,10 @@
 /*
+ * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Any modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-/*
- * 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 { i18n } from '@osd/i18n';
-import angular, { auto } from 'angular';
 import { BehaviorSubject } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
 
 import {
   AppMountParameters,
@@ -56,12 +29,14 @@ import { HomePublicPluginSetup } from 'src/plugins/home/public';
 import { Start as InspectorPublicPluginStart } from 'src/plugins/inspector/public';
 import { stringify } from 'query-string';
 import rison from 'rison-node';
+import { lazy } from 'react';
 import { DataPublicPluginStart, DataPublicPluginSetup, opensearchFilters } from '../../data/public';
 import { SavedObjectLoader } from '../../saved_objects/public';
-import { createOsdUrlTracker, url } from '../../opensearch_dashboards_utils/public';
+import { url } from '../../opensearch_dashboards_utils/public';
 import { DEFAULT_APP_CATEGORIES } from '../../../core/public';
 import { UrlGeneratorState } from '../../share/public';
 import { DocViewInput, DocViewInputFn } from './application/doc_views/doc_views_types';
+import { generateDocViewsUrl } from './application/components/doc_views/generate_doc_views_url';
 import { DocViewLink } from './application/doc_views_links/doc_views_links_types';
 import { DocViewsRegistry } from './application/doc_views/doc_views_registry';
 import { DocViewsLinksRegistry } from './application/doc_views_links/doc_views_links_registry';
@@ -70,25 +45,30 @@ import { JsonCodeBlock } from './application/components/json_code_block/json_cod
 import {
   setDocViewsRegistry,
   setDocViewsLinksRegistry,
-  setUrlTracker,
-  setAngularModule,
   setServices,
   setHeaderActionMenuMounter,
   setUiActions,
   setScopedHistory,
-  getScopedHistory,
   syncHistoryLocations,
   getServices,
 } from './opensearch_dashboards_services';
 import { createSavedSearchesLoader } from './saved_searches';
-import { registerFeature } from './register_feature';
 import { buildServices } from './build_services';
 import {
   DiscoverUrlGeneratorState,
   DISCOVER_APP_URL_GENERATOR,
   DiscoverUrlGenerator,
 } from './url_generator';
-import { SearchEmbeddableFactory } from './application/embeddable';
+// import { SearchEmbeddableFactory } from './application/embeddable';
+import { NEW_DISCOVER_APP, PLUGIN_ID } from '../common';
+import { DataExplorerPluginSetup } from '../../data_explorer/public';
+import { registerFeature } from './register_feature';
+import {
+  DiscoverState,
+  discoverSlice,
+  getPreloadedState,
+} from './application/utils/state_management/discover_slice';
+import { migrateUrlState } from './migrate_state';
 
 declare module '../../share/public' {
   export interface UrlGeneratorStateMapping {
@@ -103,7 +83,6 @@ export interface DiscoverSetup {
   docViews: {
     /**
      * Add new doc view shown along with table view and json view in the details of each document in Discover.
-     * Both react and angular doc views are supported.
      * @param docViewRaw
      */
     addDocView(docViewRaw: DocViewInput | DocViewInputFn): void;
@@ -148,6 +127,7 @@ export interface DiscoverSetupPlugins {
   home?: HomePublicPluginSetup;
   visualizations: VisualizationsSetup;
   data: DataPublicPluginSetup;
+  dataExplorer: DataExplorerPluginSetup;
 }
 
 /**
@@ -166,13 +146,9 @@ export interface DiscoverStartPlugins {
   visualizations: VisualizationsStart;
 }
 
-const innerAngularName = 'app/discover';
-const embeddableAngularName = 'app/discoverEmbeddable';
-
 /**
  * Contains Discover, one of the oldest parts of OpenSearch Dashboards
- * There are 2 kinds of Angular bootstrapped for rendering, additionally to the main Angular
- * Discover provides embeddables, those contain a slimmer Angular
+ * Discover provides embeddables for Dashboards
  */
 export class DiscoverPlugin
   implements Plugin<DiscoverSetup, DiscoverStart, DiscoverSetupPlugins, DiscoverStartPlugins> {
@@ -181,18 +157,10 @@ export class DiscoverPlugin
   private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
   private docViewsRegistry: DocViewsRegistry | null = null;
   private docViewsLinksRegistry: DocViewsLinksRegistry | null = null;
-  private embeddableInjector: auto.IInjectorService | null = null;
   private stopUrlTracking: (() => void) | undefined = undefined;
   private servicesInitialized: boolean = false;
-  private innerAngularInitialized: boolean = false;
   private urlGenerator?: DiscoverStart['urlGenerator'];
-
-  /**
-   * why are those functions public? they are needed for some mocha tests
-   * can be removed once all is Jest
-   */
-  public initializeInnerAngular?: () => void;
-  public initializeServices?: () => Promise<{ core: CoreStart; plugins: DiscoverStartPlugins }>;
+  private initializeServices?: () => { core: CoreStart; plugins: DiscoverStartPlugins };
 
   setup(core: CoreSetup<DiscoverStartPlugins, DiscoverStart>, plugins: DiscoverSetupPlugins) {
     const baseUrl = core.http.basePath.prepend('/app/discover');
@@ -248,10 +216,12 @@ export class DiscoverPlugin
           { encode: false, sort: false }
         );
 
+        const contextUrl = `#/context/${encodeURIComponent(
+          renderProps.indexPattern.id
+        )}/${encodeURIComponent(renderProps.hit._id)}?${hash}`;
+
         return {
-          url: `#/context/${encodeURIComponent(renderProps.indexPattern.id)}/${encodeURIComponent(
-            renderProps.hit._id
-          )}?${hash}`,
+          url: generateDocViewsUrl(contextUrl),
           hide: !renderProps.indexPattern.isTimeBased(),
         };
       },
@@ -262,53 +232,19 @@ export class DiscoverPlugin
       label: i18n.translate('discover.docTable.tableRow.viewSingleDocumentLinkText', {
         defaultMessage: 'View single document',
       }),
-      generateCb: (renderProps) => ({
-        url: `#/doc/${renderProps.indexPattern.id}/${
+      generateCb: (renderProps) => {
+        const docUrl = `#/doc/${renderProps.indexPattern.id}/${
           renderProps.hit._index
-        }?id=${encodeURIComponent(renderProps.hit._id)}`,
-      }),
+        }?id=${encodeURIComponent(renderProps.hit._id)}`;
+        return {
+          url: generateDocViewsUrl(docUrl),
+        };
+      },
       order: 2,
     });
 
-    const {
-      appMounted,
-      appUnMounted,
-      stop: stopUrlTracker,
-      setActiveUrl: setTrackedUrl,
-      restorePreviousUrl,
-    } = createOsdUrlTracker({
-      // we pass getter here instead of plain `history`,
-      // so history is lazily created (when app is mounted)
-      // this prevents redundant `#` when not in discover app
-      getHistory: getScopedHistory,
-      baseUrl,
-      defaultSubUrl: '#/',
-      storageKey: `lastUrl:${core.http.basePath.get()}:discover`,
-      navLinkUpdater$: this.appStateUpdater,
-      toastNotifications: core.notifications.toasts,
-      stateParams: [
-        {
-          osdUrlKey: '_g',
-          stateUpdate$: plugins.data.query.state$.pipe(
-            filter(
-              ({ changes }) => !!(changes.globalFilters || changes.time || changes.refreshInterval)
-            ),
-            map(({ state }) => ({
-              ...state,
-              filters: state.filters?.filter(opensearchFilters.isFilterPinned),
-            }))
-          ),
-        },
-      ],
-    });
-    setUrlTracker({ setTrackedUrl, restorePreviousUrl });
-    this.stopUrlTracking = () => {
-      stopUrlTracker();
-    };
-
-    this.docViewsRegistry.setAngularInjectorGetter(this.getEmbeddableInjector);
     core.application.register({
-      id: 'discover',
+      id: PLUGIN_ID,
       title: 'Discover',
       updater$: this.appStateUpdater.asObservable(),
       order: 1000,
@@ -319,58 +255,100 @@ export class DiscoverPlugin
         if (!this.initializeServices) {
           throw Error('Discover plugin method initializeServices is undefined');
         }
-        if (!this.initializeInnerAngular) {
-          throw Error('Discover plugin method initializeInnerAngular is undefined');
-        }
         setScopedHistory(params.history);
         setHeaderActionMenuMounter(params.setHeaderActionMenu);
         syncHistoryLocations();
-        appMounted();
         const {
-          plugins: { data: dataStart },
+          core: {
+            application: { navigateToApp },
+          },
         } = await this.initializeServices();
-        await this.initializeInnerAngular();
-
-        // make sure the index pattern list is up to date
-        await dataStart.indexPatterns.clearCache();
-        const { renderApp } = await import('./application/application');
-        params.element.classList.add('dscAppWrapper');
-        const unmount = await renderApp(innerAngularName, params.element);
-        return () => {
-          params.element.classList.remove('dscAppWrapper');
-          unmount();
-          appUnMounted();
-        };
+
+        // This is for instances where the user navigates to the app from the application nav menu
+        const path = window.location.hash;
+        const v2Enabled = await core.uiSettings.get<boolean>(NEW_DISCOVER_APP);
+
+        if (!v2Enabled) {
+          navigateToApp('discoverLegacy', {
+            replace: true,
+            path,
+          });
+        } else {
+          const newPath = migrateUrlState(path);
+          if (newPath.startsWith('#/context') || newPath.startsWith('#/doc')) {
+            const { renderDocView } = await import('./application/components/doc_views');
+            const unmount = renderDocView(params.element);
+            return () => {
+              unmount();
+            };
+          } else {
+            navigateToApp('data-explorer', {
+              replace: true,
+              path: `/${PLUGIN_ID}${newPath}`,
+            });
+          }
+        }
+
+        return () => {};
       },
     });
 
-    plugins.urlForwarding.forwardApp('doc', 'discover', (path) => {
-      return `#${path}`;
-    });
-    plugins.urlForwarding.forwardApp('context', 'discover', (path) => {
-      const urlParts = path.split('/');
-      // take care of urls containing legacy url, those split in the following way
-      // ["", "context", indexPatternId, _type, id + params]
-      if (urlParts[4]) {
-        // remove _type part
-        const newPath = [...urlParts.slice(0, 3), ...urlParts.slice(4)].join('/');
-        return `#${newPath}`;
-      }
-      return `#${path}`;
-    });
-    plugins.urlForwarding.forwardApp('discover', 'discover', (path) => {
-      const [, id, tail] = /discover\/([^\?]+)(.*)/.exec(path) || [];
-      if (!id) {
-        return `#${path.replace('/discover', '') || '/'}`;
-      }
-      return `#/view/${id}${tail || ''}`;
-    });
+    // TODO: These routes need to be handled for Discover 2.0 to support legacy saved URLS's
+    // plugins.urlForwarding.forwardApp('doc', 'discover', (path) => {
+    //   return `#${path}`;
+    // });
+    // plugins.urlForwarding.forwardApp('context', 'discover', (path) => {
+    //   const urlParts = path.split('/');
+    //   // take care of urls containing legacy url, those split in the following way
+    //   // ["", "context", indexPatternId, _type, id + params]
+    //   if (urlParts[4]) {
+    //     // remove _type part
+    //     const newPath = [...urlParts.slice(0, 3), ...urlParts.slice(4)].join('/');
+    //     return `#${newPath}`;
+    //   }
+    //   return `#${path}`;
+    // });
+    // plugins.urlForwarding.forwardApp('discover', 'discover', (path) => {
+    //   const [, id, tail] = /discover\/([^\?]+)(.*)/.exec(path) || [];
+    //   if (!id) {
+    //     return `#${path.replace('/discover', '') || '/'}`;
+    //   }
+    //   return `#/view/${id}${tail || ''}`;
+    // });
 
     if (plugins.home) {
       registerFeature(plugins.home);
     }
 
-    this.registerEmbeddable(core, plugins);
+    plugins.dataExplorer.registerView<DiscoverState>({
+      id: PLUGIN_ID,
+      title: 'Discover',
+      defaultPath: '#/',
+      appExtentions: {
+        savedObject: {
+          docTypes: ['search'],
+          toListItem: (obj) => ({
+            id: obj.id,
+            label: obj.title,
+          }),
+        },
+      },
+      ui: {
+        defaults: async () => {
+          this.initializeServices?.();
+          const services = getServices();
+          return await getPreloadedState(services);
+        },
+        slice: discoverSlice,
+      },
+      shouldShow: () => true,
+      // ViewComponent
+      Canvas: lazy(() => import('./application/view_components/canvas')),
+      Panel: lazy(() => import('./application/view_components/panel')),
+      Context: lazy(() => import('./application/view_components/context')),
+    });
+
+    // this.registerEmbeddable(core, plugins);
 
     return {
       docViews: {
@@ -383,44 +361,21 @@ export class DiscoverPlugin
   }
 
   start(core: CoreStart, plugins: DiscoverStartPlugins) {
-    // we need to register the application service at setup, but to render it
-    // there are some start dependencies necessary, for this reason
-    // initializeInnerAngular + initializeServices are assigned at start and used
-    // when the application/embeddable is mounted
-    this.initializeInnerAngular = async () => {
-      if (this.innerAngularInitialized) {
-        return;
-      }
-      // this is used by application mount and tests
-      const { getInnerAngularModule } = await import('./get_inner_angular');
-      const module = getInnerAngularModule(
-        innerAngularName,
-        core,
-        plugins,
-        this.initializerContext
-      );
-      setAngularModule(module);
-      this.innerAngularInitialized = true;
-    };
-
     setUiActions(plugins.uiActions);
 
-    this.initializeServices = async () => {
+    this.initializeServices = () => {
       if (this.servicesInitialized) {
         return { core, plugins };
       }
-      const services = await buildServices(
-        core,
-        plugins,
-        this.initializerContext,
-        this.getEmbeddableInjector
-      );
+      const services = buildServices(core, plugins, this.initializerContext);
       setServices(services);
       this.servicesInitialized = true;
 
       return { core, plugins };
     };
 
+    this.initializeServices();
+
     return {
       urlGenerator: this.urlGenerator,
       savedSearchLoader: createSavedSearchesLoader({
@@ -439,14 +394,11 @@ export class DiscoverPlugin
     }
   }
 
+  // TODO: Use this registration when legacy discover is removed
   /**
    * register embeddable with a slimmer embeddable version of inner angular
    */
   private registerEmbeddable(core: CoreSetup<DiscoverStartPlugins>, plugins: DiscoverSetupPlugins) {
-    if (!this.getEmbeddableInjector) {
-      throw Error('Discover plugin method getEmbeddableInjector is undefined');
-    }
-
     const getStartServices = async () => {
       const [coreStart, deps] = await core.getStartServices();
       return {
@@ -455,23 +407,8 @@ export class DiscoverPlugin
       };
     };
 
-    const factory = new SearchEmbeddableFactory(getStartServices, this.getEmbeddableInjector);
-    plugins.embeddable.registerEmbeddableFactory(factory.type, factory);
+    // TODO: Refactor to remove angular
+    // const factory = new SearchEmbeddableFactory(getStartServices, this.getEmbeddableInjector);
+    // plugins.embeddable.registerEmbeddableFactory(factory.type, factory);
   }
-
-  private getEmbeddableInjector = async () => {
-    if (!this.embeddableInjector) {
-      if (!this.initializeServices) {
-        throw Error('Discover plugin getEmbeddableInjector:  initializeServices is undefined');
-      }
-      const { core, plugins } = await this.initializeServices();
-      getServices().opensearchDashboardsLegacy.loadFontAwesome();
-      const { getInnerAngularModuleEmbeddable } = await import('./get_inner_angular');
-      getInnerAngularModuleEmbeddable(embeddableAngularName, core, plugins);
-      const mountpoint = document.createElement('div');
-      this.embeddableInjector = angular.bootstrap(mountpoint, [embeddableAngularName]);
-    }
-
-    return this.embeddableInjector;
-  };
 }
diff --git a/src/plugins/discover/public/saved_searches/_saved_search.ts b/src/plugins/discover/public/saved_searches/_saved_search.ts
index 55cd59104ecb..9b43e3a89203 100644
--- a/src/plugins/discover/public/saved_searches/_saved_search.ts
+++ b/src/plugins/discover/public/saved_searches/_saved_search.ts
@@ -34,6 +34,8 @@ import {
   SavedObjectOpenSearchDashboardsServices,
 } from '../../../saved_objects/public';
 
+export const SAVED_OBJECT_TYPE = 'search';
+
 export function createSavedSearchClass(services: SavedObjectOpenSearchDashboardsServices) {
   const SavedObjectClass = createSavedObjectClass(services);
 
diff --git a/src/plugins/discover/public/saved_searches/types.ts b/src/plugins/discover/public/saved_searches/types.ts
index e02fd65e6899..112d7d998c97 100644
--- a/src/plugins/discover/public/saved_searches/types.ts
+++ b/src/plugins/discover/public/saved_searches/types.ts
@@ -28,18 +28,16 @@
  * under the License.
  */
 
+import { SavedObject } from '../../../saved_objects/public';
 import { ISearchSource } from '../../../data/public';
 
-export type SortOrder = [string, string];
-export interface SavedSearch {
-  readonly id: string;
-  title: string;
-  searchSource: ISearchSource;
+export type SortOrder = [string, 'asc' | 'desc'];
+export interface SavedSearch
+  extends Pick<SavedObject, 'id' | 'title' | 'copyOnSave' | 'destroy' | 'lastSavedTitle' | 'save'> {
+  searchSource: ISearchSource; // This is optional in SavedObject, but required for SavedSearch
   description?: string;
   columns: string[];
   sort: SortOrder[];
-  destroy: () => void;
-  lastSavedTitle?: string;
 }
 export interface SavedSearchLoader {
   get: (id: string) => Promise<SavedSearch>;
diff --git a/src/plugins/discover/server/ui_settings.ts b/src/plugins/discover/server/ui_settings.ts
index 70eab306e7fb..2b35384c2e5c 100644
--- a/src/plugins/discover/server/ui_settings.ts
+++ b/src/plugins/discover/server/ui_settings.ts
@@ -33,6 +33,7 @@ import { schema } from '@osd/config-schema';
 
 import { UiSettingsParams } from 'opensearch-dashboards/server';
 import {
+  NEW_DISCOVER_APP,
   DEFAULT_COLUMNS_SETTING,
   SAMPLE_SIZE_SETTING,
   AGGS_TERMS_SIZE_SETTING,
@@ -47,6 +48,17 @@ import {
 } from '../common';
 
 export const uiSettings: Record<string, UiSettingsParams> = {
+  [NEW_DISCOVER_APP]: {
+    name: i18n.translate('discover.advancedSettings.legacyToggleTitle', {
+      defaultMessage: 'Enable new discover app',
+    }),
+    value: true,
+    description: i18n.translate('discover.advancedSettings.legacyToggleText', {
+      defaultMessage: 'Disabling the new discover app will redirect to the legacy app.',
+    }),
+    category: ['discover'],
+    schema: schema.boolean(),
+  },
   [DEFAULT_COLUMNS_SETTING]: {
     name: i18n.translate('discover.advancedSettings.defaultColumnsTitle', {
       defaultMessage: 'Default columns',
diff --git a/src/plugins/discover_legacy/README.md b/src/plugins/discover_legacy/README.md
new file mode 100644
index 000000000000..a914d651eef3
--- /dev/null
+++ b/src/plugins/discover_legacy/README.md
@@ -0,0 +1 @@
+Contains the Discover application and the saved search embeddable.
\ No newline at end of file
diff --git a/src/plugins/discover_legacy/common/index.ts b/src/plugins/discover_legacy/common/index.ts
new file mode 100644
index 000000000000..371442385bbf
--- /dev/null
+++ b/src/plugins/discover_legacy/common/index.ts
@@ -0,0 +1,41 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 DEFAULT_COLUMNS_SETTING = 'defaultColumns';
+export const SAMPLE_SIZE_SETTING = 'discover:sampleSize';
+export const AGGS_TERMS_SIZE_SETTING = 'discover:aggs:terms:size';
+export const SORT_DEFAULT_ORDER_SETTING = 'discover:sort:defaultOrder';
+export const SEARCH_ON_PAGE_LOAD_SETTING = 'discover:searchOnPageLoad';
+export const DOC_HIDE_TIME_COLUMN_SETTING = 'doc_table:hideTimeColumn';
+export const FIELDS_LIMIT_SETTING = 'fields:popularLimit';
+export const CONTEXT_DEFAULT_SIZE_SETTING = 'context:defaultSize';
+export const CONTEXT_STEP_SETTING = 'context:step';
+export const CONTEXT_TIE_BREAKER_FIELDS_SETTING = 'context:tieBreakerFields';
+export const MODIFY_COLUMNS_ON_SWITCH = 'discover:modifyColumnsOnSwitch';
diff --git a/src/plugins/discover_legacy/opensearch_dashboards.json b/src/plugins/discover_legacy/opensearch_dashboards.json
new file mode 100644
index 000000000000..6a4259a41d75
--- /dev/null
+++ b/src/plugins/discover_legacy/opensearch_dashboards.json
@@ -0,0 +1,27 @@
+{
+  "id": "discoverLegacy",
+  "version": "opensearchDashboards",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": [
+    "charts",
+    "data",
+    "embeddable",
+    "inspector",
+    "opensearchDashboardsLegacy",
+    "urlForwarding",
+    "navigation",
+    "uiActions",
+    "visualizations"
+  ],
+  "optionalPlugins": [
+    "home",
+    "share"
+  ],
+  "requiredBundles": [
+    "opensearchDashboardsUtils",
+    "savedObjects",
+    "opensearchDashboardsReact",
+    "discover"
+  ]
+}
\ No newline at end of file
diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover_legacy/public/application/_discover.scss
similarity index 100%
rename from src/plugins/discover/public/application/_discover.scss
rename to src/plugins/discover_legacy/public/application/_discover.scss
diff --git a/src/plugins/discover/public/application/angular/_index.scss b/src/plugins/discover_legacy/public/application/angular/_index.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/_index.scss
rename to src/plugins/discover_legacy/public/application/angular/_index.scss
diff --git a/src/plugins/discover/public/application/angular/context.html b/src/plugins/discover_legacy/public/application/angular/context.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/context.html
rename to src/plugins/discover_legacy/public/application/angular/context.html
diff --git a/src/plugins/discover/public/application/angular/context.js b/src/plugins/discover_legacy/public/application/angular/context.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context.js
rename to src/plugins/discover_legacy/public/application/angular/context.js
diff --git a/src/plugins/discover/public/application/angular/context/NOTES.md b/src/plugins/discover_legacy/public/application/angular/context/NOTES.md
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/NOTES.md
rename to src/plugins/discover_legacy/public/application/angular/context/NOTES.md
diff --git a/src/plugins/discover_legacy/public/application/angular/context/_index.scss b/src/plugins/discover_legacy/public/application/angular/context/_index.scss
new file mode 100644
index 000000000000..4ac09e25eb9c
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/context/_index.scss
@@ -0,0 +1,8 @@
+// Prefix all styles with "cxt" to avoid conflicts.
+// Examples
+//   cxtChart
+//   cxtChart__legend
+//   cxtChart__legend--small
+//   cxtChart__legend-isLoading
+
+@import "components/action_bar/index";
diff --git a/src/plugins/discover/public/application/angular/context/api/_stubs.js b/src/plugins/discover_legacy/public/application/angular/context/api/_stubs.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/_stubs.js
rename to src/plugins/discover_legacy/public/application/angular/context/api/_stubs.js
diff --git a/src/plugins/discover/public/application/angular/context/api/anchor.js b/src/plugins/discover_legacy/public/application/angular/context/api/anchor.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/anchor.js
rename to src/plugins/discover_legacy/public/application/angular/context/api/anchor.js
diff --git a/src/plugins/discover/public/application/angular/context/api/anchor.test.js b/src/plugins/discover_legacy/public/application/angular/context/api/anchor.test.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/anchor.test.js
rename to src/plugins/discover_legacy/public/application/angular/context/api/anchor.test.js
diff --git a/src/plugins/discover/public/application/angular/context/api/context.predecessors.test.js b/src/plugins/discover_legacy/public/application/angular/context/api/context.predecessors.test.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/context.predecessors.test.js
rename to src/plugins/discover_legacy/public/application/angular/context/api/context.predecessors.test.js
diff --git a/src/plugins/discover/public/application/angular/context/api/context.successors.test.js b/src/plugins/discover_legacy/public/application/angular/context/api/context.successors.test.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/context.successors.test.js
rename to src/plugins/discover_legacy/public/application/angular/context/api/context.successors.test.js
diff --git a/src/plugins/discover/public/application/angular/context/api/context.ts b/src/plugins/discover_legacy/public/application/angular/context/api/context.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/context.ts
rename to src/plugins/discover_legacy/public/application/angular/context/api/context.ts
diff --git a/src/plugins/discover_legacy/public/application/angular/context/api/utils/date_conversion.test.ts b/src/plugins/discover_legacy/public/application/angular/context/api/utils/date_conversion.test.ts
new file mode 100644
index 000000000000..fe1a18bf938f
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/context/api/utils/date_conversion.test.ts
@@ -0,0 +1,43 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { extractNanos } from './date_conversion';
+
+describe('function extractNanos', function () {
+  test('extract nanos of 2014-01-01', function () {
+    expect(extractNanos('2014-01-01')).toBe('000000000');
+  });
+  test('extract nanos of 2014-01-01T12:12:12.234Z', function () {
+    expect(extractNanos('2014-01-01T12:12:12.234Z')).toBe('234000000');
+  });
+  test('extract nanos of 2014-01-01T12:12:12.234123321Z', function () {
+    expect(extractNanos('2014-01-01T12:12:12.234123321Z')).toBe('234123321');
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/angular/context/api/utils/date_conversion.ts b/src/plugins/discover_legacy/public/application/angular/context/api/utils/date_conversion.ts
new file mode 100644
index 000000000000..8f4bfb30375d
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/context/api/utils/date_conversion.ts
@@ -0,0 +1,76 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 moment from 'moment';
+/**
+ * extract nanoseconds if available in ISO timestamp
+ * returns the nanos as string like this:
+ * 9ns -> 000000009
+ * 10000ns -> 0000010000
+ * returns 000000000 for invalid timestamps or timestamps with just date
+ **/
+export function extractNanos(timeFieldValue: string = ''): string {
+  const fieldParts = timeFieldValue.split('.');
+  const fractionSeconds = fieldParts.length === 2 ? fieldParts[1].replace('Z', '') : '';
+  return fractionSeconds.length !== 9 ? fractionSeconds.padEnd(9, '0') : fractionSeconds;
+}
+
+/**
+ * convert an iso formatted string to number of milliseconds since
+ * 1970-01-01T00:00:00.000Z
+ * @param {string} isoValue
+ * @returns {number}
+ */
+export function convertIsoToMillis(isoValue: string): number {
+  const date = new Date(isoValue);
+  return date.getTime();
+}
+/**
+ * the given time value in milliseconds is converted to a ISO formatted string
+ * if nanosValue is provided, the given value replaces the fractional seconds part
+ * of the formated string since moment.js doesn't support formatting timestamps
+ * with a higher precision then microseconds
+ * The browser rounds date nanos values:
+ * 2019-09-18T06:50:12.999999999 -> browser rounds to 1568789413000000000
+ * 2019-09-18T06:50:59.999999999 -> browser rounds to 1568789460000000000
+ * 2017-12-31T23:59:59.999999999 -> browser rounds 1514761199999999999 to 1514761200000000000
+ */
+export function convertTimeValueToIso(timeValueMillis: number, nanosValue: string): string | null {
+  if (!timeValueMillis) {
+    return null;
+  }
+  const isoString = moment(timeValueMillis).toISOString();
+  if (!isoString) {
+    return null;
+  } else if (nanosValue !== '') {
+    return `${isoString.substring(0, isoString.length - 4)}${nanosValue}Z`;
+  }
+  return isoString;
+}
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/fetch_hits_in_interval.ts b/src/plugins/discover_legacy/public/application/angular/context/api/utils/fetch_hits_in_interval.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/utils/fetch_hits_in_interval.ts
rename to src/plugins/discover_legacy/public/application/angular/context/api/utils/fetch_hits_in_interval.ts
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/generate_intervals.ts b/src/plugins/discover_legacy/public/application/angular/context/api/utils/generate_intervals.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/utils/generate_intervals.ts
rename to src/plugins/discover_legacy/public/application/angular/context/api/utils/generate_intervals.ts
diff --git a/src/plugins/discover_legacy/public/application/angular/context/api/utils/get_opensearch_query_search_after.ts b/src/plugins/discover_legacy/public/application/angular/context/api/utils/get_opensearch_query_search_after.ts
new file mode 100644
index 000000000000..eb6a5af565ba
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/context/api/utils/get_opensearch_query_search_after.ts
@@ -0,0 +1,58 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { SurrDocType, OpenSearchHitRecordList, OpenSearchHitRecord } from '../context';
+
+export type OpenSearchQuerySearchAfter = [string | number, string | number];
+
+/**
+ * Get the searchAfter query value for opensearch
+ * When there are already documents available, which means successors or predecessors
+ * were already fetched, the new searchAfter for the next fetch has to be the sort value
+ * of the first (prececessor), or last (successor) of the list
+ */
+export function getOpenSearchQuerySearchAfter(
+  type: SurrDocType,
+  documents: OpenSearchHitRecordList,
+  timeFieldName: string,
+  anchor: OpenSearchHitRecord,
+  nanoSeconds: string
+): OpenSearchQuerySearchAfter {
+  if (documents.length) {
+    // already surrounding docs -> first or last record  is used
+    const afterTimeRecIdx = type === 'successors' && documents.length ? documents.length - 1 : 0;
+    const afterTimeDoc = documents[afterTimeRecIdx];
+    const afterTimeValue = nanoSeconds ? afterTimeDoc._source[timeFieldName] : afterTimeDoc.sort[0];
+    return [afterTimeValue, afterTimeDoc.sort[1]];
+  }
+  // if data_nanos adapt timestamp value for sorting, since numeric value was rounded by browser
+  // OpenSearch search_after also works when number is provided as string
+  return [nanoSeconds ? anchor._source[timeFieldName] : anchor.sort[0], anchor.sort[1]];
+}
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/get_opensearch_query_sort.ts b/src/plugins/discover_legacy/public/application/angular/context/api/utils/get_opensearch_query_sort.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/utils/get_opensearch_query_sort.ts
rename to src/plugins/discover_legacy/public/application/angular/context/api/utils/get_opensearch_query_sort.ts
diff --git a/src/plugins/discover_legacy/public/application/angular/context/api/utils/sorting.test.ts b/src/plugins/discover_legacy/public/application/angular/context/api/utils/sorting.test.ts
new file mode 100644
index 000000000000..6944591d40cd
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/context/api/utils/sorting.test.ts
@@ -0,0 +1,38 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { reverseSortDir, SortDirection } from './sorting';
+
+describe('function reverseSortDir', function () {
+  test('reverse a given sort direction', function () {
+    expect(reverseSortDir(SortDirection.asc)).toBe(SortDirection.desc);
+    expect(reverseSortDir(SortDirection.desc)).toBe(SortDirection.asc);
+  });
+});
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/sorting.ts b/src/plugins/discover_legacy/public/application/angular/context/api/utils/sorting.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/api/utils/sorting.ts
rename to src/plugins/discover_legacy/public/application/angular/context/api/utils/sorting.ts
diff --git a/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/_action_bar.scss b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/_action_bar.scss
new file mode 100644
index 000000000000..da0911c3a452
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/_action_bar.scss
@@ -0,0 +1,10 @@
+.cxtSizePicker {
+  text-align: center;
+  width: $euiSize * 5;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none; // Hide increment and decrement buttons for type="number" input.
+    margin: 0;
+  }
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/_index.scss b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/_index.scss
new file mode 100644
index 000000000000..40a446220577
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/_index.scss
@@ -0,0 +1 @@
+@import "action_bar";
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx
rename to src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar.test.tsx
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.tsx b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.tsx
rename to src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar.tsx
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar_directive.ts b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar_directive.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/components/action_bar/action_bar_directive.ts
rename to src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar_directive.ts
diff --git a/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar_warning.tsx b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar_warning.tsx
new file mode 100644
index 000000000000..cfdc3cc0c8cc
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/action_bar_warning.tsx
@@ -0,0 +1,84 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
+import { EuiCallOut } from '@elastic/eui';
+import { SurrDocType } from '../../api/context';
+
+export function ActionBarWarning({ docCount, type }: { docCount: number; type: SurrDocType }) {
+  if (type === 'predecessors') {
+    return (
+      <EuiCallOut
+        color="warning"
+        data-test-subj="predecessorsWarningMsg"
+        iconType="bolt"
+        title={
+          docCount === 0 ? (
+            <FormattedMessage
+              id="discover.context.newerDocumentsWarningZero"
+              defaultMessage="No documents newer than the anchor could be found."
+            />
+          ) : (
+            <FormattedMessage
+              id="discover.context.newerDocumentsWarning"
+              defaultMessage="Only {docCount} documents newer than the anchor could be found."
+              values={{ docCount }}
+            />
+          )
+        }
+        size="s"
+      />
+    );
+  }
+
+  return (
+    <EuiCallOut
+      color="warning"
+      data-test-subj="successorsWarningMsg"
+      iconType="bolt"
+      title={
+        docCount === 0 ? (
+          <FormattedMessage
+            id="discover.context.olderDocumentsWarningZero"
+            defaultMessage="No documents older than the anchor could be found."
+          />
+        ) : (
+          <FormattedMessage
+            id="discover.context.olderDocumentsWarning"
+            defaultMessage="Only {docCount} documents older than the anchor could be found."
+            values={{ docCount }}
+          />
+        )
+      }
+      size="s"
+    />
+  );
+}
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/index.ts b/src/plugins/discover_legacy/public/application/angular/context/components/action_bar/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/components/action_bar/index.ts
rename to src/plugins/discover_legacy/public/application/angular/context/components/action_bar/index.ts
diff --git a/src/plugins/discover/public/application/angular/context/helpers/call_after_bindings_workaround.js b/src/plugins/discover_legacy/public/application/angular/context/helpers/call_after_bindings_workaround.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/helpers/call_after_bindings_workaround.js
rename to src/plugins/discover_legacy/public/application/angular/context/helpers/call_after_bindings_workaround.js
diff --git a/src/plugins/discover/public/application/angular/context/query/actions.js b/src/plugins/discover_legacy/public/application/angular/context/query/actions.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query/actions.js
rename to src/plugins/discover_legacy/public/application/angular/context/query/actions.js
diff --git a/src/plugins/discover/public/application/angular/context/query/constants.js b/src/plugins/discover_legacy/public/application/angular/context/query/constants.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query/constants.js
rename to src/plugins/discover_legacy/public/application/angular/context/query/constants.js
diff --git a/src/plugins/discover/public/application/angular/context/query/index.js b/src/plugins/discover_legacy/public/application/angular/context/query/index.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query/index.js
rename to src/plugins/discover_legacy/public/application/angular/context/query/index.js
diff --git a/src/plugins/discover/public/application/angular/context/query/state.js b/src/plugins/discover_legacy/public/application/angular/context/query/state.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query/state.js
rename to src/plugins/discover_legacy/public/application/angular/context/query/state.js
diff --git a/src/plugins/discover/public/application/angular/context/query_parameters/actions.js b/src/plugins/discover_legacy/public/application/angular/context/query_parameters/actions.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query_parameters/actions.js
rename to src/plugins/discover_legacy/public/application/angular/context/query_parameters/actions.js
diff --git a/src/plugins/discover/public/application/angular/context/query_parameters/actions.test.ts b/src/plugins/discover_legacy/public/application/angular/context/query_parameters/actions.test.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query_parameters/actions.test.ts
rename to src/plugins/discover_legacy/public/application/angular/context/query_parameters/actions.test.ts
diff --git a/src/plugins/discover/public/application/angular/context/query_parameters/constants.ts b/src/plugins/discover_legacy/public/application/angular/context/query_parameters/constants.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query_parameters/constants.ts
rename to src/plugins/discover_legacy/public/application/angular/context/query_parameters/constants.ts
diff --git a/src/plugins/discover/public/application/angular/context/query_parameters/index.js b/src/plugins/discover_legacy/public/application/angular/context/query_parameters/index.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query_parameters/index.js
rename to src/plugins/discover_legacy/public/application/angular/context/query_parameters/index.js
diff --git a/src/plugins/discover/public/application/angular/context/query_parameters/state.ts b/src/plugins/discover_legacy/public/application/angular/context/query_parameters/state.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context/query_parameters/state.ts
rename to src/plugins/discover_legacy/public/application/angular/context/query_parameters/state.ts
diff --git a/src/plugins/discover/public/application/angular/context_app.html b/src/plugins/discover_legacy/public/application/angular/context_app.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/context_app.html
rename to src/plugins/discover_legacy/public/application/angular/context_app.html
diff --git a/src/plugins/discover/public/application/angular/context_app.js b/src/plugins/discover_legacy/public/application/angular/context_app.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/context_app.js
rename to src/plugins/discover_legacy/public/application/angular/context_app.js
diff --git a/src/plugins/discover/public/application/angular/context_state.test.ts b/src/plugins/discover_legacy/public/application/angular/context_state.test.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context_state.test.ts
rename to src/plugins/discover_legacy/public/application/angular/context_state.test.ts
diff --git a/src/plugins/discover/public/application/angular/context_state.ts b/src/plugins/discover_legacy/public/application/angular/context_state.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/context_state.ts
rename to src/plugins/discover_legacy/public/application/angular/context_state.ts
diff --git a/src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.js.snap b/src/plugins/discover_legacy/public/application/angular/directives/__snapshots__/no_results.test.js.snap
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/__snapshots__/no_results.test.js.snap
rename to src/plugins/discover_legacy/public/application/angular/directives/__snapshots__/no_results.test.js.snap
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/_histogram.scss b/src/plugins/discover_legacy/public/application/angular/directives/_histogram.scss
new file mode 100644
index 000000000000..1e625fa064e2
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/_histogram.scss
@@ -0,0 +1,11 @@
+.dscHistogram__header--partial {
+  font-weight: $euiFontWeightRegular;
+  min-width: $euiSize * 12;
+}
+
+// Temporary override to inlined styles provided by ElasticCharts theming
+// Will be unnecessary when we migrate the histogram to a different rendering library:
+// https: //github.com/opensearch-project/OpenSearch-Dashboards/issues/4643
+.dscHistogram .echChartBackground {
+  background-color: inherit !important;
+}
diff --git a/src/plugins/discover/public/application/angular/directives/_index.scss b/src/plugins/discover_legacy/public/application/angular/directives/_index.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/_index.scss
rename to src/plugins/discover_legacy/public/application/angular/directives/_index.scss
diff --git a/src/plugins/discover/public/application/angular/directives/_no_results.scss b/src/plugins/discover_legacy/public/application/angular/directives/_no_results.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/_no_results.scss
rename to src/plugins/discover_legacy/public/application/angular/directives/_no_results.scss
diff --git a/src/plugins/discover/public/application/angular/directives/debounce/debounce.js b/src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/debounce/debounce.js
rename to src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.js
diff --git a/src/plugins/discover/public/application/angular/directives/debounce/debounce.test.ts b/src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.test.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/debounce/debounce.test.ts
rename to src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.test.ts
diff --git a/src/plugins/discover/public/application/angular/directives/debounce/index.js b/src/plugins/discover_legacy/public/application/angular/directives/debounce/index.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/debounce/index.js
rename to src/plugins/discover_legacy/public/application/angular/directives/debounce/index.js
diff --git a/src/plugins/discover/public/application/angular/directives/fixed_scroll.js b/src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/fixed_scroll.js
rename to src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.js
diff --git a/src/plugins/discover/public/application/angular/directives/fixed_scroll.test.js b/src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.test.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/fixed_scroll.test.js
rename to src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.test.js
diff --git a/src/plugins/discover/public/application/angular/directives/histogram.tsx b/src/plugins/discover_legacy/public/application/angular/directives/histogram.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/histogram.tsx
rename to src/plugins/discover_legacy/public/application/angular/directives/histogram.tsx
diff --git a/src/plugins/discover/public/application/angular/directives/index.js b/src/plugins/discover_legacy/public/application/angular/directives/index.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/index.js
rename to src/plugins/discover_legacy/public/application/angular/directives/index.js
diff --git a/src/plugins/discover/public/application/angular/directives/no_results.js b/src/plugins/discover_legacy/public/application/angular/directives/no_results.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/no_results.js
rename to src/plugins/discover_legacy/public/application/angular/directives/no_results.js
diff --git a/src/plugins/discover/public/application/angular/directives/no_results.test.js b/src/plugins/discover_legacy/public/application/angular/directives/no_results.test.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/no_results.test.js
rename to src/plugins/discover_legacy/public/application/angular/directives/no_results.test.js
diff --git a/src/plugins/discover/public/application/angular/directives/render_complete.ts b/src/plugins/discover_legacy/public/application/angular/directives/render_complete.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/directives/render_complete.ts
rename to src/plugins/discover_legacy/public/application/angular/directives/render_complete.ts
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/uninitialized.tsx b/src/plugins/discover_legacy/public/application/angular/directives/uninitialized.tsx
new file mode 100644
index 000000000000..9cc47b034d1e
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/uninitialized.tsx
@@ -0,0 +1,78 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+
+import { EuiButton, EuiEmptyPrompt, EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
+
+interface Props {
+  onRefresh: () => void;
+}
+
+export const DiscoverUninitialized = ({ onRefresh }: Props) => {
+  return (
+    <I18nProvider>
+      <EuiPage>
+        <EuiPageBody component="main">
+          <EuiPageContent horizontalPosition="center">
+            <EuiEmptyPrompt
+              iconType="discoverApp"
+              title={
+                <h2>
+                  <FormattedMessage
+                    id="discover.uninitializedTitle"
+                    defaultMessage="Start searching"
+                  />
+                </h2>
+              }
+              body={
+                <p>
+                  <FormattedMessage
+                    id="discover.uninitializedText"
+                    defaultMessage="Write a query, add some filters, or simply hit Refresh to retrieve results for the current query."
+                  />
+                </p>
+              }
+              actions={
+                <EuiButton color="primary" fill onClick={onRefresh}>
+                  <FormattedMessage
+                    id="discover.uninitializedRefreshButtonText"
+                    defaultMessage="Refresh data"
+                  />
+                </EuiButton>
+              }
+            />
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    </I18nProvider>
+  );
+};
diff --git a/src/plugins/discover/public/application/angular/discover.js b/src/plugins/discover_legacy/public/application/angular/discover.js
similarity index 98%
rename from src/plugins/discover/public/application/angular/discover.js
rename to src/plugins/discover_legacy/public/application/angular/discover.js
index de244e3c44b6..f8a96928784c 100644
--- a/src/plugins/discover/public/application/angular/discover.js
+++ b/src/plugins/discover_legacy/public/application/angular/discover.js
@@ -93,6 +93,7 @@ import {
   DOC_HIDE_TIME_COLUMN_SETTING,
   MODIFY_COLUMNS_ON_SWITCH,
 } from '../../../common';
+import { NEW_DISCOVER_APP } from '../../../../discover/public';
 
 const fetchStatuses = {
   UNINITIALIZED: 'uninitialized',
@@ -480,7 +481,24 @@ function discoverController($element, $route, $scope, $timeout, $window, Promise
       },
     };
 
+    const newDiscover = {
+      id: 'discover-new',
+      label: i18n.translate('discover.localMenu.newDiscoverTitle', {
+        defaultMessage: 'New Discover',
+      }),
+      description: i18n.translate('discover.localMenu.newDiscoverDescription', {
+        defaultMessage: 'New Discover Experience',
+      }),
+      testId: 'discoverNewButton',
+      run: async function () {
+        await getServices().uiSettings.set(NEW_DISCOVER_APP, true);
+        window.location.reload();
+      },
+      type: 'toggle',
+    };
+
     return [
+      newDiscover,
       newSearch,
       ...(uiCapabilities.discover.save ? [saveSearch] : []),
       openSearch,
diff --git a/src/plugins/discover/public/application/angular/discover_legacy.html b/src/plugins/discover_legacy/public/application/angular/discover_legacy.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/discover_legacy.html
rename to src/plugins/discover_legacy/public/application/angular/discover_legacy.html
diff --git a/src/plugins/discover/public/application/angular/discover_state.test.ts b/src/plugins/discover_legacy/public/application/angular/discover_state.test.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/discover_state.test.ts
rename to src/plugins/discover_legacy/public/application/angular/discover_state.test.ts
diff --git a/src/plugins/discover/public/application/angular/discover_state.ts b/src/plugins/discover_legacy/public/application/angular/discover_state.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/discover_state.ts
rename to src/plugins/discover_legacy/public/application/angular/discover_state.ts
diff --git a/src/plugins/discover/public/application/angular/doc.html b/src/plugins/discover_legacy/public/application/angular/doc.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc.html
rename to src/plugins/discover_legacy/public/application/angular/doc.html
diff --git a/src/plugins/discover/public/application/angular/doc.ts b/src/plugins/discover_legacy/public/application/angular/doc.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc.ts
rename to src/plugins/discover_legacy/public/application/angular/doc.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/_doc_table.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/_doc_table.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/_doc_table.scss
rename to src/plugins/discover_legacy/public/application/angular/doc_table/_doc_table.scss
diff --git a/src/plugins/discover/public/application/angular/doc_table/actions/columns.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/actions/columns.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/actions/columns.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/actions/columns.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/_index.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/_index.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/_index.scss
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/_index.scss
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/_table_header.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/_table_header.scss
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/_table_header.scss
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_buttons.test.tsx.snap b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_buttons.test.tsx.snap
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_buttons.test.tsx.snap
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_buttons.test.tsx.snap
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/pager/index.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/pager/index.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/index.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.test.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_text.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.test.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_text.test.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_text.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_text.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_text.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/row_headers.test.js b/src/plugins/discover_legacy/public/application/angular/doc_table/components/row_headers.test.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/row_headers.test.js
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/row_headers.test.js
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_header.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_header.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_header/helpers.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/helpers.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_header/helpers.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/helpers.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.test.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.test.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.test.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header_column.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header_column.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header_column.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header_column.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_cell.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_cell.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row/_cell.scss
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_cell.scss
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_details.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_details.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row/_details.scss
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_details.scss
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_index.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_index.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row/_index.scss
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_index.scss
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/_open.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_open.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row/_open.scss
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_open.scss
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/cell.html b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/cell.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row/cell.html
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/cell.html
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/details.html b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/details.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row/details.html
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/details.html
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/open.html b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/open.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row/open.html
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/open.html
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row/truncate_by_height.html b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/truncate_by_height.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/components/table_row/truncate_by_height.html
rename to src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/truncate_by_height.html
diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/create_doc_table_react.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_table/create_doc_table_react.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_table/doc_table.html b/src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.html
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/doc_table.html
rename to src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.html
diff --git a/src/plugins/discover/public/application/angular/doc_table/doc_table.test.js b/src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.test.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/doc_table.test.js
rename to src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.test.js
diff --git a/src/plugins/discover/public/application/angular/doc_table/doc_table.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/doc_table.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/doc_table_strings.js b/src/plugins/discover_legacy/public/application/angular/doc_table/doc_table_strings.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/doc_table_strings.js
rename to src/plugins/discover_legacy/public/application/angular/doc_table/doc_table_strings.js
diff --git a/src/plugins/discover/public/application/angular/doc_table/index.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/index.scss
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/index.scss
rename to src/plugins/discover_legacy/public/application/angular/doc_table/index.scss
diff --git a/src/plugins/discover/public/application/angular/doc_table/index.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/index.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/index.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/infinite_scroll.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/infinite_scroll.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/lib/get_default_sort.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/lib/get_default_sort.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/lib/get_default_sort.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/get_sort.test.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/lib/get_sort.test.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/lib/get_sort.test.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/lib/get_sort.test.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/get_sort.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/lib/get_sort.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/lib/get_sort.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/lib/get_sort.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/lib/get_sort_for_search_source.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/lib/get_sort_for_search_source.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/lib/get_sort_for_search_source.ts
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/pager/index.js b/src/plugins/discover_legacy/public/application/angular/doc_table/lib/pager/index.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/lib/pager/index.js
rename to src/plugins/discover_legacy/public/application/angular/doc_table/lib/pager/index.js
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/pager/pager.js b/src/plugins/discover_legacy/public/application/angular/doc_table/lib/pager/pager.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/lib/pager/pager.js
rename to src/plugins/discover_legacy/public/application/angular/doc_table/lib/pager/pager.js
diff --git a/src/plugins/discover/public/application/angular/doc_table/lib/pager/pager_factory.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/lib/pager/pager_factory.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_table/lib/pager/pager_factory.ts
rename to src/plugins/discover_legacy/public/application/angular/doc_table/lib/pager/pager_factory.ts
diff --git a/src/plugins/discover/public/application/angular/doc_viewer.tsx b/src/plugins/discover_legacy/public/application/angular/doc_viewer.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_viewer.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_viewer.tsx
diff --git a/src/plugins/discover/public/application/angular/doc_viewer_links.tsx b/src/plugins/discover_legacy/public/application/angular/doc_viewer_links.tsx
similarity index 100%
rename from src/plugins/discover/public/application/angular/doc_viewer_links.tsx
rename to src/plugins/discover_legacy/public/application/angular/doc_viewer_links.tsx
diff --git a/src/plugins/discover/public/application/angular/helpers/index.ts b/src/plugins/discover_legacy/public/application/angular/helpers/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/helpers/index.ts
rename to src/plugins/discover_legacy/public/application/angular/helpers/index.ts
diff --git a/src/plugins/discover/public/application/angular/helpers/point_series.ts b/src/plugins/discover_legacy/public/application/angular/helpers/point_series.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/helpers/point_series.ts
rename to src/plugins/discover_legacy/public/application/angular/helpers/point_series.ts
diff --git a/src/plugins/discover/public/application/angular/index.ts b/src/plugins/discover_legacy/public/application/angular/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/index.ts
rename to src/plugins/discover_legacy/public/application/angular/index.ts
diff --git a/src/plugins/discover/public/application/angular/redirect.ts b/src/plugins/discover_legacy/public/application/angular/redirect.ts
similarity index 100%
rename from src/plugins/discover/public/application/angular/redirect.ts
rename to src/plugins/discover_legacy/public/application/angular/redirect.ts
diff --git a/src/plugins/discover/public/application/angular/response_handler.js b/src/plugins/discover_legacy/public/application/angular/response_handler.js
similarity index 100%
rename from src/plugins/discover/public/application/angular/response_handler.js
rename to src/plugins/discover_legacy/public/application/angular/response_handler.js
diff --git a/src/plugins/discover/public/application/application.ts b/src/plugins/discover_legacy/public/application/application.ts
similarity index 100%
rename from src/plugins/discover/public/application/application.ts
rename to src/plugins/discover_legacy/public/application/application.ts
diff --git a/src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx b/src/plugins/discover_legacy/public/application/components/context_error_message/context_error_message.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx
rename to src/plugins/discover_legacy/public/application/components/context_error_message/context_error_message.test.tsx
diff --git a/src/plugins/discover/public/application/components/context_error_message/context_error_message.tsx b/src/plugins/discover_legacy/public/application/components/context_error_message/context_error_message.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/context_error_message/context_error_message.tsx
rename to src/plugins/discover_legacy/public/application/components/context_error_message/context_error_message.tsx
diff --git a/src/plugins/discover/public/application/components/context_error_message/context_error_message_directive.ts b/src/plugins/discover_legacy/public/application/components/context_error_message/context_error_message_directive.ts
similarity index 100%
rename from src/plugins/discover/public/application/components/context_error_message/context_error_message_directive.ts
rename to src/plugins/discover_legacy/public/application/components/context_error_message/context_error_message_directive.ts
diff --git a/src/plugins/discover/public/application/components/context_error_message/index.ts b/src/plugins/discover_legacy/public/application/components/context_error_message/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/components/context_error_message/index.ts
rename to src/plugins/discover_legacy/public/application/components/context_error_message/index.ts
diff --git a/src/plugins/discover/public/application/components/create_discover_legacy_directive.ts b/src/plugins/discover_legacy/public/application/components/create_discover_legacy_directive.ts
similarity index 100%
rename from src/plugins/discover/public/application/components/create_discover_legacy_directive.ts
rename to src/plugins/discover_legacy/public/application/components/create_discover_legacy_directive.ts
diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover_legacy/public/application/components/discover_legacy.tsx
similarity index 88%
rename from src/plugins/discover/public/application/components/discover_legacy.tsx
rename to src/plugins/discover_legacy/public/application/components/discover_legacy.tsx
index 3e6e96fc6124..d4a3d235a188 100644
--- a/src/plugins/discover/public/application/components/discover_legacy.tsx
+++ b/src/plugins/discover_legacy/public/application/components/discover_legacy.tsx
@@ -30,7 +30,7 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
-import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonEmpty, EuiButtonIcon, EuiCallOut, EuiLink } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { IUiSettingsClient, MountPoint } from 'opensearch-dashboards/public';
@@ -101,6 +101,8 @@ export interface DiscoverLegacyProps {
   vis?: Vis;
 }
 
+const KEY_SHOW_NOTICE = 'discover:deprecation-notice:show';
+
 export function DiscoverLegacy({
   addColumn,
   fetch,
@@ -132,6 +134,9 @@ export function DiscoverLegacy({
   vis,
 }: DiscoverLegacyProps) {
   const [isSidebarClosed, setIsSidebarClosed] = useState(false);
+  const [isCallOutVisible, setIsCallOutVisible] = useState(
+    localStorage.getItem(KEY_SHOW_NOTICE) !== 'false'
+  );
   const { TopNavMenu } = getServices().navigation.ui;
   const { savedSearch, indexPatternList } = opts;
   const bucketAggConfig = vis?.data?.aggs?.aggs[1];
@@ -141,6 +146,34 @@ export function DiscoverLegacy({
       : undefined;
   const [fixedScrollEl, setFixedScrollEl] = useState<HTMLElement | undefined>();
 
+  const closeCallOut = () => {
+    localStorage.setItem(KEY_SHOW_NOTICE, 'false');
+    setIsCallOutVisible(false);
+  };
+
+  let callOut;
+
+  if (isCallOutVisible) {
+    callOut = (
+      <div>
+        <EuiCallOut
+          title="This Discover app version will be retired in OpenSearch version 2.11. To switch to the new Discover 2.0 version, turn on the New Discover toggle."
+          iconType="alert"
+          dismissible
+          onDismiss={closeCallOut}
+        >
+          <p>
+            To provide feedback,{' '}
+            <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues">
+              open an issue
+            </EuiLink>
+            .
+          </p>
+        </EuiCallOut>
+      </div>
+    );
+  }
+
   useEffect(() => (fixedScrollEl ? opts.fixedScroll(fixedScrollEl) : undefined), [
     fixedScrollEl,
     opts,
@@ -166,21 +199,23 @@ export function DiscoverLegacy({
     <I18nProvider>
       <div className="dscAppContainer" data-fetch-counter={fetchCounter}>
         <h1 className="euiScreenReaderOnly">{savedSearch.title}</h1>
-        <TopNavMenu
-          appName="discover"
-          config={topNavMenu}
-          indexPatterns={[indexPattern]}
-          onQuerySubmit={updateQuery}
-          onSavedQueryIdChange={updateSavedQueryId}
-          query={state.query}
-          setMenuMountPoint={opts.setHeaderActionMenu}
-          savedQueryId={state.savedQuery}
-          screenTitle={savedSearch.title}
-          showDatePicker={indexPattern.isTimeBased()}
-          showSaveQuery={showSaveQuery}
-          showSearchBar={true}
-          useDefaultBehaviors={true}
-        />
+        <div>
+          <TopNavMenu
+            appName="discoverLegacy"
+            config={topNavMenu}
+            indexPatterns={[indexPattern]}
+            onQuerySubmit={updateQuery}
+            onSavedQueryIdChange={updateSavedQueryId}
+            query={state.query}
+            setMenuMountPoint={opts.setHeaderActionMenu}
+            savedQueryId={state.savedQuery}
+            screenTitle={savedSearch.title}
+            showDatePicker={indexPattern.isTimeBased()}
+            showSaveQuery={showSaveQuery}
+            showSearchBar={true}
+            useDefaultBehaviors={true}
+          />
+        </div>
         <main className="container-fluid">
           <div className="row">
             <div
@@ -216,6 +251,7 @@ export function DiscoverLegacy({
               />
             </div>
             <div className={`dscWrapper ${mainSectionClassName}`}>
+              {callOut}
               {resultState === 'none' && (
                 <DiscoverNoResults
                   timeFieldName={opts.timefield}
diff --git a/src/plugins/discover_legacy/public/application/components/doc/doc.test.tsx b/src/plugins/discover_legacy/public/application/components/doc/doc.test.tsx
new file mode 100644
index 000000000000..4a3fb740492a
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc/doc.test.tsx
@@ -0,0 +1,150 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { throwError, of } from 'rxjs';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ReactWrapper } from 'enzyme';
+import { findTestSubject } from 'test_utils/helpers';
+import { Doc, DocProps } from './doc';
+
+const mockSearchApi = jest.fn();
+
+jest.mock('../../../opensearch_dashboards_services', () => {
+  let registry: any[] = [];
+
+  return {
+    getServices: () => ({
+      metadata: {
+        branch: 'test',
+      },
+      data: {
+        search: {
+          search: mockSearchApi,
+        },
+      },
+    }),
+    getDocViewsRegistry: () => ({
+      addDocView(view: any) {
+        registry.push(view);
+      },
+      getDocViewsSorted() {
+        return registry;
+      },
+      resetRegistry: () => {
+        registry = [];
+      },
+    }),
+    getDocViewsLinksRegistry: () => ({
+      addDocViewLink(view: any) {
+        registry.push(view);
+      },
+      getDocViewsLinksSorted() {
+        return registry;
+      },
+      resetRegistry: () => {
+        registry = [];
+      },
+    }),
+  };
+});
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+const waitForPromises = async () =>
+  act(async () => {
+    await new Promise((resolve) => setTimeout(resolve));
+  });
+
+/**
+ * this works but logs ugly error messages until we're using React 16.9
+ * should be adapted when we upgrade
+ */
+async function mountDoc(update = false, indexPatternGetter: any = null) {
+  const indexPattern = {
+    getComputedFields: () => [],
+  };
+  const indexPatternService = {
+    get: indexPatternGetter ? indexPatternGetter : jest.fn(() => Promise.resolve(indexPattern)),
+  } as any;
+
+  const props = {
+    id: '1',
+    index: 'index1',
+    indexPatternId: 'xyz',
+    indexPatternService,
+  } as DocProps;
+  let comp!: ReactWrapper;
+  await act(async () => {
+    comp = mountWithIntl(<Doc {...props} />);
+    if (update) comp.update();
+  });
+  if (update) {
+    await waitForPromises();
+    comp.update();
+  }
+  return comp;
+}
+
+describe('Test of <Doc /> of Discover', () => {
+  test('renders loading msg', async () => {
+    const comp = await mountDoc();
+    expect(findTestSubject(comp, 'doc-msg-loading').length).toBe(1);
+  });
+
+  test('renders IndexPattern notFound msg', async () => {
+    const indexPatternGetter = jest.fn(() => Promise.reject({ savedObjectId: '007' }));
+    const comp = await mountDoc(true, indexPatternGetter);
+    expect(findTestSubject(comp, 'doc-msg-notFoundIndexPattern').length).toBe(1);
+  });
+
+  test('renders notFound msg', async () => {
+    mockSearchApi.mockImplementation(() => throwError({ status: 404 }));
+    const comp = await mountDoc(true);
+    expect(findTestSubject(comp, 'doc-msg-notFound').length).toBe(1);
+  });
+
+  test('renders error msg', async () => {
+    mockSearchApi.mockImplementation(() => throwError({ error: 'something else' }));
+    const comp = await mountDoc(true);
+    expect(findTestSubject(comp, 'doc-msg-error').length).toBe(1);
+  });
+
+  test('renders opensearch hit ', async () => {
+    mockSearchApi.mockImplementation(() =>
+      of({ rawResponse: { hits: { total: 1, hits: [{ _id: 1, _source: { test: 1 } }] } } })
+    );
+    const comp = await mountDoc(true);
+    expect(findTestSubject(comp, 'doc-hit').length).toBe(1);
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/doc/doc.tsx b/src/plugins/discover_legacy/public/application/components/doc/doc.tsx
new file mode 100644
index 000000000000..204a16d64757
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc/doc.tsx
@@ -0,0 +1,140 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import { EuiCallOut, EuiLink, EuiLoadingSpinner, EuiPageContent } from '@elastic/eui';
+import { IndexPatternsContract } from 'src/plugins/data/public';
+import { OpenSearchRequestState, useOpenSearchDocSearch } from './use_opensearch_doc_search';
+import { DocViewer } from '../doc_viewer/doc_viewer';
+
+export interface DocProps {
+  /**
+   * Id of the doc in OpenSearch
+   */
+  id: string;
+  /**
+   * Index in OpenSearch to query
+   */
+  index: string;
+  /**
+   * IndexPattern ID used to get IndexPattern entity
+   * that's used for adding additional fields (stored_fields, script_fields, docvalue_fields)
+   */
+  indexPatternId: string;
+  /**
+   * IndexPatternService to get a given index pattern by ID
+   */
+  indexPatternService: IndexPatternsContract;
+}
+
+export function Doc(props: DocProps) {
+  const [reqState, hit, indexPattern] = useOpenSearchDocSearch(props);
+  return (
+    <I18nProvider>
+      <EuiPageContent>
+        {reqState === OpenSearchRequestState.NotFoundIndexPattern && (
+          <EuiCallOut
+            color="danger"
+            data-test-subj={`doc-msg-notFoundIndexPattern`}
+            iconType="alert"
+            title={
+              <FormattedMessage
+                id="discover.doc.failedToLocateIndexPattern"
+                defaultMessage="No index pattern matches ID {indexPatternId}"
+                values={{ indexPatternId: props.indexPatternId }}
+              />
+            }
+          />
+        )}
+        {reqState === OpenSearchRequestState.NotFound && (
+          <EuiCallOut
+            color="danger"
+            data-test-subj={`doc-msg-notFound`}
+            iconType="alert"
+            title={
+              <FormattedMessage
+                id="discover.doc.failedToLocateDocumentDescription"
+                defaultMessage="Cannot find document"
+              />
+            }
+          >
+            <FormattedMessage
+              id="discover.doc.couldNotFindDocumentsDescription"
+              defaultMessage="No documents match that ID."
+            />
+          </EuiCallOut>
+        )}
+
+        {reqState === OpenSearchRequestState.Error && (
+          <EuiCallOut
+            color="danger"
+            data-test-subj={`doc-msg-error`}
+            iconType="alert"
+            title={
+              <FormattedMessage
+                id="discover.doc.failedToExecuteQueryDescription"
+                defaultMessage="Cannot run search"
+              />
+            }
+          >
+            <FormattedMessage
+              id="discover.doc.somethingWentWrongDescription"
+              defaultMessage="{indexName} is missing."
+              values={{ indexName: props.index }}
+            />{' '}
+            <EuiLink
+              href={`https://opensearch.org/docs/latest/opensearch/rest-api/index-apis/exists/`}
+              target="_blank"
+            >
+              <FormattedMessage
+                id="discover.doc.somethingWentWrongDescriptionAddon"
+                defaultMessage="Please ensure the index exists."
+              />
+            </EuiLink>
+          </EuiCallOut>
+        )}
+
+        {reqState === OpenSearchRequestState.Loading && (
+          <EuiCallOut data-test-subj={`doc-msg-loading`}>
+            <EuiLoadingSpinner size="m" />{' '}
+            <FormattedMessage id="discover.doc.loadingDescription" defaultMessage="Loading…" />
+          </EuiCallOut>
+        )}
+
+        {reqState === OpenSearchRequestState.Found && hit !== null && indexPattern && (
+          <div data-test-subj="doc-hit">
+            <DocViewer hit={hit} indexPattern={indexPattern} />
+          </div>
+        )}
+      </EuiPageContent>
+    </I18nProvider>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc/use_opensearch_doc_search.test.tsx b/src/plugins/discover_legacy/public/application/components/doc/use_opensearch_doc_search.test.tsx
new file mode 100644
index 000000000000..cb716a4f17cb
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc/use_opensearch_doc_search.test.tsx
@@ -0,0 +1,98 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { renderHook, act } from '@testing-library/react-hooks';
+import {
+  buildSearchBody,
+  useOpenSearchDocSearch,
+  OpenSearchRequestState,
+} from './use_opensearch_doc_search';
+import { DocProps } from './doc';
+import { Observable } from 'rxjs';
+
+const mockSearchResult = new Observable();
+
+jest.mock('../../../opensearch_dashboards_services', () => ({
+  getServices: () => ({
+    data: {
+      search: {
+        search: jest.fn(() => {
+          return mockSearchResult;
+        }),
+      },
+    },
+  }),
+}));
+
+describe('Test of <Doc /> helper / hook', () => {
+  test('buildSearchBody', () => {
+    const indexPattern = {
+      getComputedFields: () => ({ storedFields: [], scriptFields: [], docvalueFields: [] }),
+    } as any;
+    const actual = buildSearchBody('1', indexPattern);
+    expect(actual).toMatchInlineSnapshot(`
+      Object {
+        "_source": true,
+        "docvalue_fields": Array [],
+        "query": Object {
+          "ids": Object {
+            "values": Array [
+              "1",
+            ],
+          },
+        },
+        "script_fields": Array [],
+        "stored_fields": Array [],
+      }
+    `);
+  });
+
+  test('useOpenSearchDocSearch', async () => {
+    const indexPattern = {
+      getComputedFields: () => [],
+    };
+    const indexPatternService = {
+      get: jest.fn(() => Promise.resolve(indexPattern)),
+    } as any;
+    const props = {
+      id: '1',
+      index: 'index1',
+      indexPatternId: 'xyz',
+      indexPatternService,
+    } as DocProps;
+    let hook;
+    await act(async () => {
+      hook = renderHook((p: DocProps) => useOpenSearchDocSearch(p), { initialProps: props });
+    });
+    // @ts-ignore
+    expect(hook.result.current).toEqual([OpenSearchRequestState.Loading, null, indexPattern]);
+    expect(indexPatternService.get).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/doc/use_opensearch_doc_search.ts b/src/plugins/discover_legacy/public/application/components/doc/use_opensearch_doc_search.ts
new file mode 100644
index 000000000000..b5ca9fec1c2f
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc/use_opensearch_doc_search.ts
@@ -0,0 +1,114 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { useEffect, useState } from 'react';
+import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';
+import { DocProps } from './doc';
+import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+
+export enum OpenSearchRequestState {
+  Loading,
+  NotFound,
+  Found,
+  Error,
+  NotFoundIndexPattern,
+}
+
+/**
+ * helper function to build a query body for OpenSearch
+ * https://opensearch.org/docs/latest/opensearch/query-dsl/index/
+ */
+export function buildSearchBody(id: string, indexPattern: IndexPattern): Record<string, any> {
+  const computedFields = indexPattern.getComputedFields();
+
+  return {
+    query: {
+      ids: {
+        values: [id],
+      },
+    },
+    stored_fields: computedFields.storedFields,
+    _source: true,
+    script_fields: computedFields.scriptFields,
+    docvalue_fields: computedFields.docvalueFields,
+  };
+}
+
+/**
+ * Custom react hook for querying a single doc in OpenSearch
+ */
+export function useOpenSearchDocSearch({
+  id,
+  index,
+  indexPatternId,
+  indexPatternService,
+}: DocProps): [OpenSearchRequestState, OpenSearchSearchHit | null, IndexPattern | null] {
+  const [indexPattern, setIndexPattern] = useState<IndexPattern | null>(null);
+  const [status, setStatus] = useState(OpenSearchRequestState.Loading);
+  const [hit, setHit] = useState<OpenSearchSearchHit | null>(null);
+
+  useEffect(() => {
+    async function requestData() {
+      try {
+        const indexPatternEntity = await indexPatternService.get(indexPatternId);
+        setIndexPattern(indexPatternEntity);
+
+        const { rawResponse } = await getServices()
+          .data.search.search({
+            dataSourceId: indexPatternEntity.dataSourceRef?.id,
+            params: {
+              index,
+              body: buildSearchBody(id, indexPatternEntity),
+            },
+          })
+          .toPromise();
+
+        const hits = rawResponse.hits;
+
+        if (hits?.hits?.[0]) {
+          setStatus(OpenSearchRequestState.Found);
+          setHit(hits.hits[0]);
+        } else {
+          setStatus(OpenSearchRequestState.NotFound);
+        }
+      } catch (err) {
+        if (err.savedObjectId) {
+          setStatus(OpenSearchRequestState.NotFoundIndexPattern);
+        } else if (err.status === 404) {
+          setStatus(OpenSearchRequestState.NotFound);
+        } else {
+          setStatus(OpenSearchRequestState.Error);
+        }
+      }
+    }
+    requestData();
+  }, [id, index, indexPatternId, indexPatternService]);
+  return [status, hit, indexPattern];
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer.test.tsx.snap b/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer.test.tsx.snap
new file mode 100644
index 000000000000..cc1647fe264e
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer.test.tsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render <DocViewer/> with 3 different tabs 1`] = `
+<div
+  className="osdDocViewer"
+>
+  <EuiTabbedContent
+    autoFocus="initial"
+    tabs={
+      Array [
+        Object {
+          "content": <DocViewerTab
+            id={0}
+            render={[MockFunction]}
+            renderProps={
+              Object {
+                "hit": Object {},
+              }
+            }
+            title="Render function"
+          />,
+          "id": "osd_doc_viewer_tab_0",
+          "name": "Render function",
+        },
+        Object {
+          "content": <DocViewerTab
+            component={[Function]}
+            id={1}
+            renderProps={
+              Object {
+                "hit": Object {},
+              }
+            }
+            title="React component"
+          />,
+          "id": "osd_doc_viewer_tab_1",
+          "name": "React component",
+        },
+        Object {
+          "content": <DocViewerTab
+            id={2}
+            renderProps={
+              Object {
+                "hit": Object {},
+              }
+            }
+            title="Invalid doc view"
+          />,
+          "id": "osd_doc_viewer_tab_2",
+          "name": "Invalid doc view",
+        },
+      ]
+    }
+  />
+</div>
+`;
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer_render_tab.test.tsx.snap b/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer_render_tab.test.tsx.snap
new file mode 100644
index 000000000000..31509659ce41
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer_render_tab.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Mounting and unmounting DocViewerRenderTab 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <div />,
+      Object {
+        "hit": Object {},
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": [MockFunction],
+    },
+  ],
+}
+`;
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss
new file mode 100644
index 000000000000..91b66fc84297
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss
@@ -0,0 +1,72 @@
+.osdDocViewerTable {
+  margin-top: $euiSizeS;
+}
+
+.osdDocViewer {
+  pre,
+  .osdDocViewer__value {
+    display: inline-block;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    color: $euiColorFullShade;
+    vertical-align: top;
+    padding-top: 2px;
+  }
+
+  .osdDocViewer__field {
+    padding-top: 8px;
+  }
+
+  .dscFieldName {
+    color: $euiColorDarkShade;
+  }
+
+  td,
+  pre {
+    font-family: $euiCodeFontFamily;
+  }
+
+  tr:first-child td {
+    border-top-color: transparent;
+  }
+
+  tr:hover {
+    .osdDocViewer__actionButton {
+      opacity: 1;
+    }
+  }
+}
+
+.osdDocViewer__buttons,
+.osdDocViewer__field {
+  white-space: nowrap;
+}
+
+.osdDocViewer__buttons {
+  width: 60px;
+
+  // Show all icons if one is focused,
+  // IE doesn't support, but the fallback is just the focused button becomes visible
+  &:focus-within {
+    .osdDocViewer__actionButton {
+      opacity: 1;
+    }
+  }
+}
+
+.osdDocViewer__field {
+  width: 160px;
+}
+
+.osdDocViewer__actionButton {
+  opacity: 0;
+
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.osdDocViewer__warning {
+  margin-right: $euiSizeS;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.test.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.test.tsx
new file mode 100644
index 000000000000..ccab0be41ed2
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.test.tsx
@@ -0,0 +1,94 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mount, shallow } from 'enzyme';
+import { DocViewer } from './doc_viewer';
+import { findTestSubject } from 'test_utils/helpers';
+import { getDocViewsRegistry } from '../../../opensearch_dashboards_services';
+import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+
+jest.mock('../../../opensearch_dashboards_services', () => {
+  let registry: any[] = [];
+  return {
+    getDocViewsRegistry: () => ({
+      addDocView(view: any) {
+        registry.push(view);
+      },
+      getDocViewsSorted() {
+        return registry;
+      },
+      resetRegistry: () => {
+        registry = [];
+      },
+    }),
+  };
+});
+
+beforeEach(() => {
+  (getDocViewsRegistry() as any).resetRegistry();
+  jest.clearAllMocks();
+});
+
+test('Render <DocViewer/> with 3 different tabs', () => {
+  const registry = getDocViewsRegistry();
+  registry.addDocView({ order: 10, title: 'Render function', render: jest.fn() });
+  registry.addDocView({ order: 20, title: 'React component', component: () => <div>test</div> });
+  registry.addDocView({ order: 30, title: 'Invalid doc view' });
+
+  const renderProps = { hit: {} } as DocViewRenderProps;
+
+  const wrapper = shallow(<DocViewer {...renderProps} />);
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('Render <DocViewer/> with 1 tab displaying error message', () => {
+  function SomeComponent() {
+    // this is just a placeholder
+    return null;
+  }
+
+  const registry = getDocViewsRegistry();
+  registry.addDocView({
+    order: 10,
+    title: 'React component',
+    component: SomeComponent,
+  });
+
+  const renderProps = { hit: {} } as DocViewRenderProps;
+  const errorMsg = 'Catch me if you can!';
+
+  const wrapper = mount(<DocViewer {...renderProps} />);
+  const error = new Error(errorMsg);
+  wrapper.find(SomeComponent).simulateError(error);
+  const errorMsgComponent = findTestSubject(wrapper, 'docViewerError');
+  expect(errorMsgComponent.text()).toMatch(new RegExp(`${errorMsg}`));
+});
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.tsx
new file mode 100644
index 000000000000..d165c9bd05b8
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.tsx
@@ -0,0 +1,75 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 './doc_viewer.scss';
+import React from 'react';
+import { EuiTabbedContent } from '@elastic/eui';
+import { getDocViewsRegistry } from '../../../opensearch_dashboards_services';
+import { DocViewerTab } from './doc_viewer_tab';
+import { DocView, DocViewRenderProps } from '../../doc_views/doc_views_types';
+
+/**
+ * Rendering tabs with different views of 1 OpenSearch hit in Discover.
+ * The tabs are provided by the `docs_views` registry.
+ * A view can contain a React `component`, or any JS framework by using
+ * a `render` function.
+ */
+export function DocViewer(renderProps: DocViewRenderProps) {
+  const docViewsRegistry = getDocViewsRegistry();
+  const tabs = docViewsRegistry
+    .getDocViewsSorted(renderProps.hit)
+    .map(({ title, render, component }: DocView, idx: number) => {
+      return {
+        id: `osd_doc_viewer_tab_${idx}`,
+        name: title,
+        content: (
+          <DocViewerTab
+            id={idx}
+            title={title}
+            component={component}
+            renderProps={renderProps}
+            render={render}
+          />
+        ),
+      };
+    });
+
+  if (!tabs.length) {
+    // There there's a minimum of 2 tabs active in Discover.
+    // This condition takes care of unit tests with 0 tabs.
+    return null;
+  }
+
+  return (
+    <div className="osdDocViewer">
+      <EuiTabbedContent tabs={tabs} />
+    </div>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_error.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_error.tsx
new file mode 100644
index 000000000000..1cb14d191a57
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_error.tsx
@@ -0,0 +1,48 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiCallOut, EuiCodeBlock } from '@elastic/eui';
+import { formatMsg, formatStack } from '../../../../../opensearch_dashboards_legacy/public';
+
+interface Props {
+  error: Error | string;
+}
+
+export function DocViewerError({ error }: Props) {
+  const errMsg = formatMsg(error);
+  const errStack = typeof error === 'object' ? formatStack(error) : '';
+
+  return (
+    <EuiCallOut title={errMsg} color="danger" iconType="cross" data-test-subj="docViewerError">
+      {errStack && <EuiCodeBlock>{errStack}</EuiCodeBlock>}
+    </EuiCallOut>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_tab.test.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_tab.test.tsx
new file mode 100644
index 000000000000..83d857b24fc5
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_tab.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mount } from 'enzyme';
+import { DocViewRenderTab } from './doc_viewer_render_tab';
+import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+
+test('Mounting and unmounting DocViewerRenderTab', () => {
+  const unmountFn = jest.fn();
+  const renderFn = jest.fn(() => unmountFn);
+  const renderProps = {
+    hit: {},
+  };
+
+  const wrapper = mount(
+    <DocViewRenderTab render={renderFn} renderProps={renderProps as DocViewRenderProps} />
+  );
+
+  expect(renderFn).toMatchSnapshot();
+
+  wrapper.unmount();
+
+  expect(unmountFn).toBeCalled();
+});
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_tab.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_tab.tsx
new file mode 100644
index 000000000000..edc7f40c5e43
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_tab.tsx
@@ -0,0 +1,52 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React, { useRef, useEffect } from 'react';
+import { DocViewRenderFn, DocViewRenderProps } from '../../doc_views/doc_views_types';
+
+interface Props {
+  render: DocViewRenderFn;
+  renderProps: DocViewRenderProps;
+}
+/**
+ * Responsible for rendering a tab provided by a render function.
+ * So any other framework can be used (E.g. legacy Angular 3rd party plugin code)
+ * The provided `render` function is called with a reference to the
+ * component's `HTMLDivElement` as 1st arg and `renderProps` as 2nd arg
+ */
+export function DocViewRenderTab({ render, renderProps }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (ref && ref.current) {
+      return render(ref.current, renderProps);
+    }
+  }, [render, renderProps]);
+  return <div ref={ref} />;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_tab.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_tab.tsx
new file mode 100644
index 000000000000..6e7a5f1ac434
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_tab.tsx
@@ -0,0 +1,101 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { DocViewRenderTab } from './doc_viewer_render_tab';
+import { DocViewerError } from './doc_viewer_render_error';
+import { DocViewRenderFn, DocViewRenderProps } from '../../doc_views/doc_views_types';
+
+interface Props {
+  component?: React.ComponentType<DocViewRenderProps>;
+  id: number;
+  render?: DocViewRenderFn;
+  renderProps: DocViewRenderProps;
+  title: string;
+}
+
+interface State {
+  error: Error | string;
+  hasError: boolean;
+}
+/**
+ * Renders the tab content of a doc view.
+ * Displays an error message when it encounters exceptions, thanks to
+ * Error Boundaries.
+ */
+export class DocViewerTab extends React.Component<Props, State> {
+  state = {
+    hasError: false,
+    error: '',
+  };
+
+  static getDerivedStateFromError(error: unknown) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error };
+  }
+
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    return (
+      nextProps.renderProps.hit._id !== this.props.renderProps.hit._id ||
+      nextProps.id !== this.props.id ||
+      nextState.hasError
+    );
+  }
+
+  render() {
+    const { component, render, renderProps, title } = this.props;
+    const { hasError, error } = this.state;
+
+    if (hasError && error) {
+      return <DocViewerError error={error} />;
+    } else if (!render && !component) {
+      return (
+        <DocViewerError
+          error={`Invalid plugin ${title}, there is neither a (react) component nor a render function provided`}
+        />
+      );
+    }
+
+    if (render) {
+      // doc view is provided by a render function, e.g. for legacy Angular code
+      return <DocViewRenderTab render={render} renderProps={renderProps} />;
+    }
+
+    // doc view is provided by a react component
+
+    const Component = component as any;
+    return (
+      <I18nProvider>
+        <Component {...renderProps} />
+      </I18nProvider>
+    );
+  }
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap b/src/plugins/discover_legacy/public/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap
new file mode 100644
index 000000000000..95fb0c377180
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dont Render <DocViewerLink/> if generateCb.hide 1`] = `
+<EuiFlexGroup
+  gutterSize="xs"
+/>
+`;
+
+exports[`Render <DocViewerLink/> with 2 different links 1`] = `
+<EuiFlexGroup
+  gutterSize="xs"
+>
+  <EuiFlexItem
+    key="0"
+  >
+    <EuiListGroupItem
+      data-test-subj="docTableRowAction"
+      href="aaa"
+      label="generateCb link"
+      order={10}
+    />
+  </EuiFlexItem>
+  <EuiFlexItem
+    key="1"
+  >
+    <EuiListGroupItem
+      data-test-subj="docTableRowAction"
+      href="bbb"
+      label="href link"
+      order={20}
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+`;
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer_links/doc_viewer_links.test.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer_links/doc_viewer_links.test.tsx
new file mode 100644
index 000000000000..8aba555b3a37
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer_links/doc_viewer_links.test.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DocViewerLinks } from './doc_viewer_links';
+import { getDocViewsLinksRegistry } from '../../../opensearch_dashboards_services';
+import { DocViewLinkRenderProps } from '../../doc_views_links/doc_views_links_types';
+
+jest.mock('../../../opensearch_dashboards_services', () => {
+  let registry: any[] = [];
+  return {
+    getDocViewsLinksRegistry: () => ({
+      addDocViewLink(view: any) {
+        registry.push(view);
+      },
+      getDocViewsLinksSorted() {
+        return registry;
+      },
+      resetRegistry: () => {
+        registry = [];
+      },
+    }),
+  };
+});
+
+beforeEach(() => {
+  (getDocViewsLinksRegistry() as any).resetRegistry();
+  jest.clearAllMocks();
+});
+
+test('Render <DocViewerLink/> with 2 different links', () => {
+  const registry = getDocViewsLinksRegistry();
+  registry.addDocViewLink({
+    order: 10,
+    label: 'generateCb link',
+    generateCb: () => ({
+      url: 'aaa',
+    }),
+  });
+  registry.addDocViewLink({ order: 20, label: 'href link', href: 'bbb' });
+
+  const renderProps = { hit: {} } as DocViewLinkRenderProps;
+
+  const wrapper = shallow(<DocViewerLinks {...renderProps} />);
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('Dont Render <DocViewerLink/> if generateCb.hide', () => {
+  const registry = getDocViewsLinksRegistry();
+  registry.addDocViewLink({
+    order: 10,
+    label: 'generateCb link',
+    generateCb: () => ({
+      url: 'aaa',
+      hide: true,
+    }),
+  });
+
+  const renderProps = { hit: {} } as DocViewLinkRenderProps;
+
+  const wrapper = shallow(<DocViewerLinks {...renderProps} />);
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer_links/doc_viewer_links.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer_links/doc_viewer_links.tsx
new file mode 100644
index 000000000000..9efb0693fde6
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer_links/doc_viewer_links.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiListGroupItem, EuiListGroupItemProps } from '@elastic/eui';
+import { getDocViewsLinksRegistry } from '../../../opensearch_dashboards_services';
+import { DocViewLinkRenderProps } from '../../doc_views_links/doc_views_links_types';
+
+export function DocViewerLinks(renderProps: DocViewLinkRenderProps) {
+  const listItems = getDocViewsLinksRegistry()
+    .getDocViewsLinksSorted()
+    .filter((item) => !(item.generateCb && item.generateCb(renderProps)?.hide))
+    .map((item) => {
+      const { generateCb, href, ...props } = item;
+      const listItem: EuiListGroupItemProps = {
+        'data-test-subj': 'docTableRowAction',
+        ...props,
+        href: generateCb ? generateCb(renderProps).url : href,
+      };
+
+      return listItem;
+    });
+
+  return (
+    <EuiFlexGroup gutterSize="xs">
+      {listItems.map((item, index) => (
+        <EuiFlexItem key={index}>
+          <EuiListGroupItem {...item} />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap b/src/plugins/discover_legacy/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap
new file mode 100644
index 000000000000..cfd81a66acae
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FieldName renders a geo field, useShortDots is set to true 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+>
+  <div
+    class="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <span
+      class="euiToken euiToken--euiColorVis5 euiToken--square euiToken--light euiToken--small osdFieldIcon"
+    >
+      <span
+        aria-label="Geo point field"
+        data-euiicon-type="tokenGeo"
+        title="Geo point field"
+      />
+    </span>
+  </div>
+  <div
+    class="euiFlexItem eui-textTruncate"
+  >
+    <span
+      class="euiToolTipAnchor eui-textTruncate"
+    >
+      <span>
+        t.t.test
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`FieldName renders a number field by providing a field record, useShortDots is set to false 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+>
+  <div
+    class="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <span
+      class="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small osdFieldIcon"
+    >
+      <span
+        aria-label="Number field"
+        data-euiicon-type="tokenNumber"
+        title="Number field"
+      />
+    </span>
+  </div>
+  <div
+    class="euiFlexItem eui-textTruncate"
+  >
+    <span
+      class="euiToolTipAnchor eui-textTruncate"
+    >
+      <span>
+        test.test.test
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`FieldName renders a string field by providing fieldType and fieldName 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+>
+  <div
+    class="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <span
+      class="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
+    >
+      <span
+        aria-label="String field"
+        data-euiicon-type="tokenString"
+        title="String field"
+      />
+    </span>
+  </div>
+  <div
+    class="euiFlexItem eui-textTruncate"
+  >
+    <span
+      class="euiToolTipAnchor eui-textTruncate"
+    >
+      <span>
+        test
+      </span>
+    </span>
+  </div>
+</div>
+`;
diff --git a/src/plugins/discover_legacy/public/application/components/field_name/field_name.test.tsx b/src/plugins/discover_legacy/public/application/components/field_name/field_name.test.tsx
new file mode 100644
index 000000000000..54dc902837d0
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/field_name/field_name.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { render } from 'enzyme';
+import { FieldName } from './field_name';
+
+// Note that it currently provides just 2 basic tests, there should be more, but
+// the components involved will soon change
+test('FieldName renders a string field by providing fieldType and fieldName', () => {
+  const component = render(<FieldName fieldType="string" fieldName="test" />);
+  expect(component).toMatchSnapshot();
+});
+
+test('FieldName renders a number field by providing a field record, useShortDots is set to false', () => {
+  const component = render(<FieldName fieldName={'test.test.test'} fieldType={'number'} />);
+  expect(component).toMatchSnapshot();
+});
+
+test('FieldName renders a geo field, useShortDots is set to true', () => {
+  const component = render(
+    <FieldName fieldName={'test.test.test'} fieldType={'geo_point'} useShortDots={true} />
+  );
+  expect(component).toMatchSnapshot();
+});
diff --git a/src/plugins/discover_legacy/public/application/components/field_name/field_name.tsx b/src/plugins/discover_legacy/public/application/components/field_name/field_name.tsx
new file mode 100644
index 000000000000..bbd9ab79d0fb
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/field_name/field_name.tsx
@@ -0,0 +1,75 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+
+import { FieldIcon, FieldIconProps } from '../../../../../opensearch_dashboards_react/public';
+import { shortenDottedString } from '../../helpers';
+import { getFieldTypeName } from './field_type_name';
+
+// properties fieldType and fieldName are provided in osd_doc_view
+// this should be changed when both components are deangularized
+interface Props {
+  fieldName: string;
+  fieldType: string;
+  useShortDots?: boolean;
+  fieldIconProps?: Omit<FieldIconProps, 'type'>;
+  scripted?: boolean;
+}
+
+export function FieldName({
+  fieldName,
+  fieldType,
+  useShortDots,
+  fieldIconProps,
+  scripted = false,
+}: Props) {
+  const typeName = getFieldTypeName(fieldType);
+  const displayName = useShortDots ? shortenDottedString(fieldName) : fieldName;
+
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <FieldIcon type={fieldType} label={typeName} scripted={scripted} {...fieldIconProps} />
+      </EuiFlexItem>
+      <EuiFlexItem className="eui-textTruncate">
+        <EuiToolTip
+          position="top"
+          content={displayName}
+          delay="long"
+          anchorClassName="eui-textTruncate"
+        >
+          <span>{displayName}</span>
+        </EuiToolTip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/field_name/field_type_name.ts b/src/plugins/discover_legacy/public/application/components/field_name/field_type_name.ts
new file mode 100644
index 000000000000..38b18792d3e4
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/field_name/field_type_name.ts
@@ -0,0 +1,85 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+
+export function getFieldTypeName(type: string) {
+  switch (type) {
+    case 'boolean':
+      return i18n.translate('discover.fieldNameIcons.booleanAriaLabel', {
+        defaultMessage: 'Boolean field',
+      });
+    case 'conflict':
+      return i18n.translate('discover.fieldNameIcons.conflictFieldAriaLabel', {
+        defaultMessage: 'Conflicting field',
+      });
+    case 'date':
+      return i18n.translate('discover.fieldNameIcons.dateFieldAriaLabel', {
+        defaultMessage: 'Date field',
+      });
+    case 'geo_point':
+      return i18n.translate('discover.fieldNameIcons.geoPointFieldAriaLabel', {
+        defaultMessage: 'Geo point field',
+      });
+    case 'geo_shape':
+      return i18n.translate('discover.fieldNameIcons.geoShapeFieldAriaLabel', {
+        defaultMessage: 'Geo shape field',
+      });
+    case 'ip':
+      return i18n.translate('discover.fieldNameIcons.ipAddressFieldAriaLabel', {
+        defaultMessage: 'IP address field',
+      });
+    case 'murmur3':
+      return i18n.translate('discover.fieldNameIcons.murmur3FieldAriaLabel', {
+        defaultMessage: 'Murmur3 field',
+      });
+    case 'number':
+      return i18n.translate('discover.fieldNameIcons.numberFieldAriaLabel', {
+        defaultMessage: 'Number field',
+      });
+    case 'source':
+      // Note that this type is currently not provided, type for _source is undefined
+      return i18n.translate('discover.fieldNameIcons.sourceFieldAriaLabel', {
+        defaultMessage: 'Source field',
+      });
+    case 'string':
+      return i18n.translate('discover.fieldNameIcons.stringFieldAriaLabel', {
+        defaultMessage: 'String field',
+      });
+    case 'nested':
+      return i18n.translate('discover.fieldNameIcons.nestedFieldAriaLabel', {
+        defaultMessage: 'Nested field',
+      });
+    default:
+      return i18n.translate('discover.fieldNameIcons.unknownFieldAriaLabel', {
+        defaultMessage: 'Unknown field',
+      });
+  }
+}
diff --git a/src/plugins/discover/public/application/components/help_menu/help_menu_util.js b/src/plugins/discover_legacy/public/application/components/help_menu/help_menu_util.js
similarity index 100%
rename from src/plugins/discover/public/application/components/help_menu/help_menu_util.js
rename to src/plugins/discover_legacy/public/application/components/help_menu/help_menu_util.js
diff --git a/src/plugins/discover_legacy/public/application/components/hits_counter/hits_counter.test.tsx b/src/plugins/discover_legacy/public/application/components/hits_counter/hits_counter.test.tsx
new file mode 100644
index 000000000000..998ababbc47f
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/hits_counter/hits_counter.test.tsx
@@ -0,0 +1,80 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ReactWrapper } from 'enzyme';
+import { HitsCounter, HitsCounterProps } from './hits_counter';
+import { findTestSubject } from 'test_utils/helpers';
+
+describe('hits counter', function () {
+  let props: HitsCounterProps;
+  let component: ReactWrapper<HitsCounterProps>;
+
+  beforeAll(() => {
+    props = {
+      onResetQuery: jest.fn(),
+      showResetButton: true,
+      hits: 2,
+    };
+  });
+
+  it('HitsCounter renders a button by providing the showResetButton property', () => {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    expect(findTestSubject(component, 'resetSavedSearch').length).toBe(1);
+  });
+
+  it('HitsCounter not renders a button when the showResetButton property is false', () => {
+    component = mountWithIntl(
+      <HitsCounter hits={2} showResetButton={false} onResetQuery={jest.fn()} />
+    );
+    expect(findTestSubject(component, 'resetSavedSearch').length).toBe(0);
+  });
+
+  it('expect to render the number of hits', function () {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    const hits = findTestSubject(component, 'discoverQueryHits');
+    expect(hits.text()).toBe('2');
+  });
+
+  it('expect to render 1,899 hits if 1899 hits given', function () {
+    component = mountWithIntl(
+      <HitsCounter hits={1899} showResetButton={false} onResetQuery={jest.fn()} />
+    );
+    const hits = findTestSubject(component, 'discoverQueryHits');
+    expect(hits.text()).toBe('1,899');
+  });
+
+  it('should reset query', function () {
+    component = mountWithIntl(<HitsCounter {...props} />);
+    findTestSubject(component, 'resetSavedSearch').simulate('click');
+    expect(props.onResetQuery).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx b/src/plugins/discover_legacy/public/application/components/hits_counter/hits_counter.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/hits_counter/hits_counter.tsx
rename to src/plugins/discover_legacy/public/application/components/hits_counter/hits_counter.tsx
diff --git a/src/plugins/discover_legacy/public/application/components/hits_counter/index.ts b/src/plugins/discover_legacy/public/application/components/hits_counter/index.ts
new file mode 100644
index 000000000000..213cf96e0cc8
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/hits_counter/index.ts
@@ -0,0 +1,31 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { HitsCounter } from './hits_counter';
diff --git a/src/plugins/discover_legacy/public/application/components/json_code_block/__snapshots__/json_code_block.test.tsx.snap b/src/plugins/discover_legacy/public/application/components/json_code_block/__snapshots__/json_code_block.test.tsx.snap
new file mode 100644
index 000000000000..3897e22c50f1
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/json_code_block/__snapshots__/json_code_block.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`returns the \`JsonCodeEditor\` component 1`] = `
+<EuiCodeBlock
+  aria-label="Read only JSON view of an opensearch document"
+  isCopyable={true}
+  language="json"
+  paddingSize="s"
+>
+  {
+  "_index": "test",
+  "_type": "doc",
+  "_id": "foo",
+  "_score": 1,
+  "_source": {
+    "test": 123
+  }
+}
+</EuiCodeBlock>
+`;
diff --git a/src/plugins/discover_legacy/public/application/components/json_code_block/json_code_block.test.tsx b/src/plugins/discover_legacy/public/application/components/json_code_block/json_code_block.test.tsx
new file mode 100644
index 000000000000..2cb700b4d2ac
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/json_code_block/json_code_block.test.tsx
@@ -0,0 +1,46 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { shallow } from 'enzyme';
+import { JsonCodeBlock } from './json_code_block';
+import { IndexPattern } from '../../../../../data/public';
+
+it('returns the `JsonCodeEditor` component', () => {
+  const props = {
+    hit: { _index: 'test', _type: 'doc', _id: 'foo', _score: 1, _source: { test: 123 } },
+    columns: [],
+    indexPattern: {} as IndexPattern,
+    filter: jest.fn(),
+    onAddColumn: jest.fn(),
+    onRemoveColumn: jest.fn(),
+  };
+  expect(shallow(<JsonCodeBlock {...props} />)).toMatchSnapshot();
+});
diff --git a/src/plugins/discover_legacy/public/application/components/json_code_block/json_code_block.tsx b/src/plugins/discover_legacy/public/application/components/json_code_block/json_code_block.tsx
new file mode 100644
index 000000000000..f33cae438cb2
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/json_code_block/json_code_block.tsx
@@ -0,0 +1,45 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiCodeBlock } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+
+export function JsonCodeBlock({ hit }: DocViewRenderProps) {
+  const label = i18n.translate('discover.docViews.json.codeEditorAriaLabel', {
+    defaultMessage: 'Read only JSON view of an opensearch document',
+  });
+  return (
+    <EuiCodeBlock aria-label={label} language="json" isCopyable paddingSize="s">
+      {JSON.stringify(hit, null, 2)}
+    </EuiCodeBlock>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/loading_spinner/loading_spinner.test.tsx b/src/plugins/discover_legacy/public/application/components/loading_spinner/loading_spinner.test.tsx
new file mode 100644
index 000000000000..fbc98e2550e0
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/loading_spinner/loading_spinner.test.tsx
@@ -0,0 +1,45 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ReactWrapper } from 'enzyme';
+import { LoadingSpinner } from './loading_spinner';
+import { findTestSubject } from 'test_utils/helpers';
+
+describe('loading spinner', function () {
+  let component: ReactWrapper;
+
+  it('LoadingSpinner renders a Searching text and a spinner', () => {
+    component = mountWithIntl(<LoadingSpinner />);
+    expect(findTestSubject(component, 'loadingSpinnerText').text()).toBe('Searching');
+    expect(findTestSubject(component, 'loadingSpinner').length).toBe(1);
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/loading_spinner/loading_spinner.tsx b/src/plugins/discover_legacy/public/application/components/loading_spinner/loading_spinner.tsx
new file mode 100644
index 000000000000..697c7a136d60
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/loading_spinner/loading_spinner.tsx
@@ -0,0 +1,47 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiLoadingSpinner, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+
+export function LoadingSpinner() {
+  return (
+    <>
+      <EuiTitle size="s" data-test-subj="loadingSpinnerText">
+        <h2>
+          <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiLoadingSpinner size="l" data-test-subj="loadingSpinner" />
+    </>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/sidebar/__snapshots__/discover_index_pattern.test.tsx.snap b/src/plugins/discover_legacy/public/application/components/sidebar/__snapshots__/discover_index_pattern.test.tsx.snap
similarity index 100%
rename from src/plugins/discover/public/application/components/sidebar/__snapshots__/discover_index_pattern.test.tsx.snap
rename to src/plugins/discover_legacy/public/application/components/sidebar/__snapshots__/discover_index_pattern.test.tsx.snap
diff --git a/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/change_indexpattern.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx
rename to src/plugins/discover_legacy/public/application/components/sidebar/change_indexpattern.tsx
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.scss b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.scss
new file mode 100644
index 000000000000..8e1dd41f66ab
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.scss
@@ -0,0 +1,4 @@
+.dscSidebarItem__fieldPopoverPanel {
+  min-width: 260px;
+  max-width: 300px;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.test.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.test.tsx
new file mode 100644
index 000000000000..1b384a4b5550
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.test.tsx
@@ -0,0 +1,152 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+// @ts-ignore
+import stubbedLogstashFields from 'fixtures/logstash_fields';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { DiscoverField } from './discover_field';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { IndexPatternField } from '../../../../../data/public';
+import { getStubIndexPattern } from '../../../../../data/public/test_utils';
+
+jest.mock('../../../opensearch_dashboards_services', () => ({
+  getServices: () => ({
+    history: () => ({
+      location: {
+        search: '',
+      },
+    }),
+    capabilities: {
+      visualize: {
+        show: true,
+      },
+    },
+    uiSettings: {
+      get: (key: string) => {
+        if (key === 'fields:popularLimit') {
+          return 5;
+        } else if (key === 'shortDots:enable') {
+          return false;
+        }
+      },
+    },
+  }),
+}));
+
+function getComponent({
+  selected = false,
+  showDetails = false,
+  useShortDots = false,
+  field,
+}: {
+  selected?: boolean;
+  showDetails?: boolean;
+  useShortDots?: boolean;
+  field?: IndexPatternField;
+}) {
+  const indexPattern = getStubIndexPattern(
+    'logstash-*',
+    (cfg: any) => cfg,
+    'time',
+    stubbedLogstashFields(),
+    coreMock.createSetup()
+  );
+
+  const finalField =
+    field ??
+    new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
+
+  const props = {
+    indexPattern,
+    columns: [],
+    field: finalField,
+    getDetails: jest.fn(() => ({ buckets: [], error: '', exists: 1, total: 1 })),
+    onAddFilter: jest.fn(),
+    onAddField: jest.fn(),
+    onRemoveField: jest.fn(),
+    showDetails,
+    selected,
+    useShortDots,
+  };
+  const comp = mountWithIntl(<DiscoverField {...props} />);
+  return { comp, props };
+}
+
+describe('discover sidebar field', function () {
+  it('should allow selecting fields', function () {
+    const { comp, props } = getComponent({});
+    findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
+    expect(props.onAddField).toHaveBeenCalledWith('bytes');
+  });
+  it('should allow deselecting fields', function () {
+    const { comp, props } = getComponent({ selected: true });
+    findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
+    expect(props.onRemoveField).toHaveBeenCalledWith('bytes');
+  });
+  it('should trigger getDetails', function () {
+    const { comp, props } = getComponent({ selected: true });
+    findTestSubject(comp, 'field-bytes-showDetails').simulate('click');
+    expect(props.getDetails).toHaveBeenCalledWith(props.field);
+  });
+  it('should not allow clicking on _source', function () {
+    const field = new IndexPatternField(
+      {
+        name: '_source',
+        type: '_source',
+        esTypes: ['_source'],
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      '_source'
+    );
+    const { comp, props } = getComponent({
+      selected: true,
+      field,
+    });
+    findTestSubject(comp, 'field-_source-showDetails').simulate('click');
+    expect(props.getDetails).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.tsx
new file mode 100644
index 000000000000..e807267435eb
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field.tsx
@@ -0,0 +1,245 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React, { useState } from 'react';
+import { EuiPopover, EuiPopoverTitle, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { DiscoverFieldDetails } from './discover_field_details';
+import { FieldIcon, FieldButton } from '../../../../../opensearch_dashboards_react/public';
+import { FieldDetails } from './types';
+import { IndexPatternField, IndexPattern } from '../../../../../data/public';
+import { shortenDottedString } from '../../helpers';
+import { getFieldTypeName } from './lib/get_field_type_name';
+import './discover_field.scss';
+
+export interface DiscoverFieldProps {
+  /**
+   * the selected columns displayed in the doc table in discover
+   */
+  columns: string[];
+  /**
+   * The displayed field
+   */
+  field: IndexPatternField;
+  /**
+   * The currently selected index pattern
+   */
+  indexPattern: IndexPattern;
+  /**
+   * Callback to add/select the field
+   */
+  onAddField: (fieldName: string) => void;
+  /**
+   * Callback to add a filter to filter bar
+   */
+  onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+  /**
+   * Callback to remove/deselect a the field
+   * @param fieldName
+   */
+  onRemoveField: (fieldName: string) => void;
+  /**
+   * Retrieve details data for the field
+   */
+  getDetails: (field: IndexPatternField) => FieldDetails;
+  /**
+   * Determines whether the field is selected
+   */
+  selected?: boolean;
+  /**
+   * Determines whether the field name is shortened test.sub1.sub2 = t.s.sub2
+   */
+  useShortDots?: boolean;
+}
+
+export function DiscoverField({
+  columns,
+  field,
+  indexPattern,
+  onAddField,
+  onRemoveField,
+  onAddFilter,
+  getDetails,
+  selected,
+  useShortDots,
+}: DiscoverFieldProps) {
+  const addLabelAria = i18n.translate('discover.fieldChooser.discoverField.addButtonAriaLabel', {
+    defaultMessage: 'Add {field} to table',
+    values: { field: field.name },
+  });
+  const removeLabelAria = i18n.translate(
+    'discover.fieldChooser.discoverField.removeButtonAriaLabel',
+    {
+      defaultMessage: 'Remove {field} from table',
+      values: { field: field.name },
+    }
+  );
+
+  const [infoIsOpen, setOpen] = useState(false);
+
+  const toggleDisplay = (f: IndexPatternField) => {
+    if (selected) {
+      onRemoveField(f.name);
+    } else {
+      onAddField(f.name);
+    }
+  };
+
+  function togglePopover() {
+    setOpen(!infoIsOpen);
+  }
+
+  function wrapOnDot(str?: string) {
+    // u200B is a non-width white-space character, which allows
+    // the browser to efficiently word-wrap right after the dot
+    // without us having to draw a lot of extra DOM elements, etc
+    return str ? str.replace(/\./g, '.\u200B') : '';
+  }
+
+  const dscFieldIcon = (
+    <FieldIcon type={field.type} label={getFieldTypeName(field.type)} scripted={field.scripted} />
+  );
+
+  const fieldName = (
+    <span
+      data-test-subj={`field-${field.name}`}
+      title={field.name}
+      className="dscSidebarField__name"
+    >
+      {useShortDots ? wrapOnDot(shortenDottedString(field.name)) : wrapOnDot(field.displayName)}
+    </span>
+  );
+
+  let actionButton;
+  if (field.name !== '_source' && !selected) {
+    actionButton = (
+      <EuiToolTip
+        delay="long"
+        content={i18n.translate('discover.fieldChooser.discoverField.addFieldTooltip', {
+          defaultMessage: 'Add field as column',
+        })}
+      >
+        <EuiButtonIcon
+          iconType="plusInCircleFilled"
+          className="dscSidebarItem__action"
+          onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
+            if (ev.type === 'click') {
+              ev.currentTarget.focus();
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+            toggleDisplay(field);
+          }}
+          data-test-subj={`fieldToggle-${field.name}`}
+          aria-label={addLabelAria}
+        />
+      </EuiToolTip>
+    );
+  } else if (field.name !== '_source' && selected) {
+    actionButton = (
+      <EuiToolTip
+        delay="long"
+        content={i18n.translate('discover.fieldChooser.discoverField.removeFieldTooltip', {
+          defaultMessage: 'Remove field from table',
+        })}
+      >
+        <EuiButtonIcon
+          color="danger"
+          iconType="cross"
+          className="dscSidebarItem__action"
+          onClick={(ev: React.MouseEvent<HTMLButtonElement>) => {
+            if (ev.type === 'click') {
+              ev.currentTarget.focus();
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+            toggleDisplay(field);
+          }}
+          data-test-subj={`fieldToggle-${field.name}`}
+          aria-label={removeLabelAria}
+        />
+      </EuiToolTip>
+    );
+  }
+
+  if (field.type === '_source') {
+    return (
+      <FieldButton
+        size="s"
+        className="dscSidebarItem"
+        dataTestSubj={`field-${field.name}-showDetails`}
+        fieldIcon={dscFieldIcon}
+        fieldAction={actionButton}
+        fieldName={fieldName}
+      />
+    );
+  }
+
+  return (
+    <EuiPopover
+      ownFocus
+      display="block"
+      button={
+        <FieldButton
+          size="s"
+          className="dscSidebarItem"
+          isActive={infoIsOpen}
+          onClick={() => {
+            togglePopover();
+          }}
+          dataTestSubj={`field-${field.name}-showDetails`}
+          fieldIcon={dscFieldIcon}
+          fieldAction={actionButton}
+          fieldName={fieldName}
+        />
+      }
+      isOpen={infoIsOpen}
+      closePopover={() => setOpen(false)}
+      anchorPosition="rightUp"
+      panelClassName="dscSidebarItem__fieldPopoverPanel"
+    >
+      <EuiPopoverTitle>
+        {' '}
+        {i18n.translate('discover.fieldChooser.discoverField.fieldTopValuesLabel', {
+          defaultMessage: 'Top 5 values',
+        })}
+      </EuiPopoverTitle>
+      {infoIsOpen && (
+        <DiscoverFieldDetails
+          columns={columns}
+          details={getDetails(field)}
+          field={field}
+          indexPattern={indexPattern}
+          onAddFilter={onAddFilter}
+        />
+      )}
+    </EuiPopover>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_bucket.scss b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_bucket.scss
new file mode 100644
index 000000000000..90b645f70084
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_bucket.scss
@@ -0,0 +1,4 @@
+.dscFieldDetails__barContainer {
+  // Constrains value to the flex item, and allows for truncation when necessary
+  min-width: 0;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_bucket.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_bucket.tsx
new file mode 100644
index 000000000000..6a4dbe295e50
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_bucket.tsx
@@ -0,0 +1,133 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiText, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { StringFieldProgressBar } from './string_progress_bar';
+import { Bucket } from './types';
+import { IndexPatternField } from '../../../../../data/public';
+import './discover_field_bucket.scss';
+
+interface Props {
+  bucket: Bucket;
+  field: IndexPatternField;
+  onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+}
+
+export function DiscoverFieldBucket({ field, bucket, onAddFilter }: Props) {
+  const emptyTxt = i18n.translate('discover.fieldChooser.detailViews.emptyStringText', {
+    defaultMessage: 'Empty string',
+  });
+  const addLabel = i18n.translate('discover.fieldChooser.detailViews.filterValueButtonAriaLabel', {
+    defaultMessage: 'Filter for {field}: "{value}"',
+    values: { value: bucket.value, field: field.name },
+  });
+  const removeLabel = i18n.translate(
+    'discover.fieldChooser.detailViews.filterOutValueButtonAriaLabel',
+    {
+      defaultMessage: 'Filter out {field}: "{value}"',
+      values: { value: bucket.value, field: field.name },
+    }
+  );
+
+  return (
+    <>
+      <EuiFlexGroup justifyContent="spaceBetween" responsive={false} gutterSize="s">
+        <EuiFlexItem className="dscFieldDetails__barContainer" grow={1}>
+          <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" responsive={false}>
+            <EuiFlexItem grow={1} className="eui-textTruncate">
+              <EuiText
+                title={
+                  bucket.display === ''
+                    ? emptyTxt
+                    : `${bucket.display}: ${bucket.count} (${bucket.percent.toFixed(1)}%)`
+                }
+                size="xs"
+                className="eui-textTruncate"
+              >
+                {bucket.display === '' ? emptyTxt : bucket.display}
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} className="eui-textTruncate">
+              <EuiText color="secondary" size="xs" className="eui-textTruncate">
+                {bucket.percent.toFixed(1)}%
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <StringFieldProgressBar
+            value={bucket.value}
+            percent={bucket.percent}
+            count={bucket.count}
+          />
+        </EuiFlexItem>
+        {field.filterable && (
+          <EuiFlexItem grow={false}>
+            <div>
+              <EuiButtonIcon
+                iconSize="s"
+                iconType="plusInCircle"
+                onClick={() => onAddFilter(field, bucket.value, '+')}
+                aria-label={addLabel}
+                data-test-subj={`plus-${field.name}-${bucket.value}`}
+                style={{
+                  minHeight: 'auto',
+                  minWidth: 'auto',
+                  paddingRight: 2,
+                  paddingLeft: 2,
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                }}
+                className={'euiButtonIcon--auto'}
+              />
+              <EuiButtonIcon
+                iconSize="s"
+                iconType="minusInCircle"
+                onClick={() => onAddFilter(field, bucket.value, '-')}
+                aria-label={removeLabel}
+                data-test-subj={`minus-${field.name}-${bucket.value}`}
+                style={{
+                  minHeight: 'auto',
+                  minWidth: 'auto',
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                  paddingRight: 2,
+                  paddingLeft: 2,
+                }}
+                className={'euiButtonIcon--auto'}
+              />
+            </div>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+    </>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_details.scss b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_details.scss
similarity index 100%
rename from src/plugins/discover/public/application/components/sidebar/discover_field_details.scss
rename to src/plugins/discover_legacy/public/application/components/sidebar/discover_field_details.scss
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_details.test.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_details.test.tsx
new file mode 100644
index 000000000000..63d5c7ace303
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_details.test.tsx
@@ -0,0 +1,312 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+import { act } from '@testing-library/react';
+// @ts-ignore
+import stubbedLogstashFields from 'fixtures/logstash_fields';
+import { mountWithIntl, nextTick } from 'test_utils/enzyme_helpers';
+import { DiscoverFieldDetails } from './discover_field_details';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { IndexPatternField } from '../../../../../data/public';
+import { getStubIndexPattern } from '../../../../../data/public/test_utils';
+
+const mockGetHref = jest.fn();
+const mockGetTriggerCompatibleActions = jest.fn();
+
+jest.mock('../../../opensearch_dashboards_services', () => ({
+  getUiActions: () => ({
+    getTriggerCompatibleActions: mockGetTriggerCompatibleActions,
+  }),
+}));
+
+const indexPattern = getStubIndexPattern(
+  'logstash-*',
+  (cfg: any) => cfg,
+  'time',
+  stubbedLogstashFields(),
+  coreMock.createSetup()
+);
+
+describe('discover sidebar field details', function () {
+  const defaultProps = {
+    columns: [],
+    details: { buckets: [], error: '', exists: 1, total: 1 },
+    indexPattern,
+    onAddFilter: jest.fn(),
+  };
+
+  beforeEach(() => {
+    mockGetHref.mockReturnValue('/foo/bar');
+    mockGetTriggerCompatibleActions.mockReturnValue([
+      {
+        getHref: mockGetHref,
+      },
+    ]);
+  });
+
+  function mountComponent(field: IndexPatternField, props?: Record<string, any>) {
+    const compProps = { ...defaultProps, ...props, field };
+    return mountWithIntl(<DiscoverFieldDetails {...compProps} />);
+  }
+
+  it('should render buckets if they exist', async function () {
+    const visualizableField = new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
+    const buckets = [1, 2, 3].map((n) => ({
+      display: `display-${n}`,
+      value: `value-${n}`,
+      percent: 25,
+      count: 100,
+    }));
+    const comp = mountComponent(visualizableField, {
+      details: { ...defaultProps.details, buckets },
+    });
+    expect(findTestSubject(comp, 'fieldVisualizeError').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualizeBucketContainer').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualizeBucketContainer').children().length).toBe(
+      buckets.length
+    );
+    // Visualize link should not be rendered until async hook update
+    expect(findTestSubject(comp, 'fieldVisualizeLink').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualize-bytes').length).toBe(0);
+
+    // Complete async hook
+    await act(async () => {
+      await nextTick();
+      comp.update();
+    });
+    expect(findTestSubject(comp, 'fieldVisualizeError').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualizeBucketContainer').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualizeBucketContainer').children().length).toBe(
+      buckets.length
+    );
+    expect(findTestSubject(comp, 'fieldVisualizeLink').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualize-bytes').length).toBe(1);
+  });
+
+  it('should only render buckets if they exist', async function () {
+    const visualizableField = new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
+    const comp = mountComponent(visualizableField);
+    expect(findTestSubject(comp, 'fieldVisualizeContainer').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualizeError').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualizeBucketContainer').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualizeLink').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualize-bytes').length).toBe(0);
+
+    await act(async () => {
+      await nextTick();
+      comp.update();
+    });
+
+    expect(findTestSubject(comp, 'fieldVisualizeContainer').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualizeError').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualizeBucketContainer').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualizeLink').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualize-bytes').length).toBe(1);
+  });
+
+  it('should render a details error', async function () {
+    const visualizableField = new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
+    const errText = 'Some error';
+    const comp = mountComponent(visualizableField, {
+      details: { ...defaultProps.details, error: errText },
+    });
+    expect(findTestSubject(comp, 'fieldVisualizeContainer').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualizeBucketContainer').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualizeError').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualizeError').text()).toBe(errText);
+
+    await act(async () => {
+      await nextTick();
+      comp.update();
+    });
+    expect(findTestSubject(comp, 'fieldVisualizeLink').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualize-bytes').length).toBe(1);
+  });
+
+  it('should handle promise rejection from isFieldVisualizable', async function () {
+    mockGetTriggerCompatibleActions.mockRejectedValue(new Error('Async error'));
+    const visualizableField = new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
+    const comp = mountComponent(visualizableField);
+
+    await act(async () => {
+      await nextTick();
+      comp.update();
+    });
+    expect(findTestSubject(comp, 'fieldVisualizeLink').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualize-bytes').length).toBe(0);
+  });
+
+  it('should handle promise rejection from getVisualizeHref', async function () {
+    mockGetHref.mockRejectedValue(new Error('Async error'));
+    const visualizableField = new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
+    const comp = mountComponent(visualizableField);
+
+    await act(async () => {
+      await nextTick();
+      comp.update();
+    });
+    expect(findTestSubject(comp, 'fieldVisualizeLink').length).toBe(0);
+    expect(findTestSubject(comp, 'fieldVisualize-bytes').length).toBe(0);
+  });
+
+  it('should enable the visualize link for a number field', async function () {
+    const visualizableField = new IndexPatternField(
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'bytes'
+    );
+    const comp = mountComponent(visualizableField);
+
+    await act(async () => {
+      await nextTick();
+      comp.update();
+    });
+    expect(findTestSubject(comp, 'fieldVisualizeLink').length).toBe(1);
+    expect(findTestSubject(comp, 'fieldVisualize-bytes').length).toBe(1);
+  });
+
+  it('should disable the visualize link for an _id field', async function () {
+    expect.assertions(1);
+    const conflictField = new IndexPatternField(
+      {
+        name: '_id',
+        type: 'string',
+        esTypes: ['_id'],
+        count: 0,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'test'
+    );
+    const comp = mountComponent(conflictField);
+
+    await act(async () => {
+      await nextTick();
+      comp.update();
+    });
+    expect(findTestSubject(comp, 'fieldVisualize-_id').length).toBe(0);
+  });
+
+  it('should disable the visualize link for an unknown field', async function () {
+    const unknownField = new IndexPatternField(
+      {
+        name: 'test',
+        type: 'unknown',
+        esTypes: ['double'],
+        count: 0,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      'test'
+    );
+    const comp = mountComponent(unknownField);
+
+    await act(async () => {
+      await nextTick();
+      comp.update();
+    });
+    expect(findTestSubject(comp, 'fieldVisualize-test').length).toBe(0);
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_details.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_details.tsx
new file mode 100644
index 000000000000..906c173ed07d
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_details.tsx
@@ -0,0 +1,153 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React, { useState, useEffect } from 'react';
+import { EuiLink, EuiIconTip, EuiText, EuiPopoverFooter, EuiButton, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+import { DiscoverFieldBucket } from './discover_field_bucket';
+import { getWarnings } from './lib/get_warnings';
+import {
+  triggerVisualizeActions,
+  isFieldVisualizable,
+  getVisualizeHref,
+} from './lib/visualize_trigger_utils';
+import { Bucket, FieldDetails } from './types';
+import { IndexPatternField, IndexPattern } from '../../../../../data/public';
+import './discover_field_details.scss';
+
+interface DiscoverFieldDetailsProps {
+  columns: string[];
+  details: FieldDetails;
+  field: IndexPatternField;
+  indexPattern: IndexPattern;
+  onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+}
+
+export function DiscoverFieldDetails({
+  columns,
+  details,
+  field,
+  indexPattern,
+  onAddFilter,
+}: DiscoverFieldDetailsProps) {
+  const warnings = getWarnings(field);
+  const [showVisualizeLink, setShowVisualizeLink] = useState<boolean>(false);
+  const [visualizeLink, setVisualizeLink] = useState<string>('');
+
+  useEffect(() => {
+    const checkIfVisualizable = async () => {
+      const visualizable = await isFieldVisualizable(field, indexPattern.id, columns).catch(
+        () => false
+      );
+
+      setShowVisualizeLink(visualizable);
+      if (visualizable) {
+        const href = await getVisualizeHref(field, indexPattern.id, columns).catch(() => '');
+        setVisualizeLink(href || '');
+      }
+    };
+    checkIfVisualizable();
+  }, [field, indexPattern.id, columns]);
+
+  const handleVisualizeLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    // regular link click. let the uiActions code handle the navigation and show popup if needed
+    event.preventDefault();
+    triggerVisualizeActions(field, indexPattern.id, columns);
+  };
+
+  return (
+    <>
+      <div className="dscFieldDetails" data-test-subj={`fieldVisualizeContainer`}>
+        {details.error && (
+          <EuiText size="xs" data-test-subj={`fieldVisualizeError`}>
+            {details.error}
+          </EuiText>
+        )}
+
+        {!details.error && details.buckets.length > 0 && (
+          <div style={{ marginTop: '4px' }} data-test-subj={`fieldVisualizeBucketContainer`}>
+            {details.buckets.map((bucket: Bucket, idx: number) => (
+              <DiscoverFieldBucket
+                key={`bucket${idx}`}
+                bucket={bucket}
+                field={field}
+                onAddFilter={onAddFilter}
+              />
+            ))}
+          </div>
+        )}
+
+        {showVisualizeLink && visualizeLink && (
+          <div data-test-subj={`fieldVisualizeLink`}>
+            <EuiSpacer size="xs" />
+            {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+            <EuiButton
+              onClick={(e) => handleVisualizeLinkClick(e)}
+              href={visualizeLink}
+              size="s"
+              className="dscFieldDetails__visualizeBtn"
+              data-test-subj={`fieldVisualize-${field.name}`}
+            >
+              <FormattedMessage
+                id="discover.fieldChooser.detailViews.visualizeLinkText"
+                defaultMessage="Visualize"
+              />
+            </EuiButton>
+            {warnings.length > 0 && (
+              <EuiIconTip type="alert" color="warning" content={warnings.join(' ')} />
+            )}
+          </div>
+        )}
+      </div>
+      {!details.error && (
+        <EuiPopoverFooter>
+          <EuiText size="xs" textAlign="center">
+            {!indexPattern.metaFields.includes(field.name) && !field.scripted ? (
+              <EuiLink onClick={() => onAddFilter('_exists_', field.name, '+')}>
+                <FormattedMessage
+                  id="discover.fieldChooser.detailViews.existsText"
+                  defaultMessage="Exists in"
+                />{' '}
+                {details.exists}
+              </EuiLink>
+            ) : (
+              <span>{details.exists}</span>
+            )}{' '}
+            / {details.total}{' '}
+            <FormattedMessage
+              id="discover.fieldChooser.detailViews.recordsText"
+              defaultMessage="records"
+            />
+          </EuiText>
+        </EuiPopoverFooter>
+      )}
+    </>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_search.test.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_search.test.tsx
new file mode 100644
index 000000000000..f78505e11f1e
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_search.test.tsx
@@ -0,0 +1,160 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { findTestSubject } from 'test_utils/helpers';
+import { DiscoverFieldSearch, Props } from './discover_field_search';
+import { EuiButtonGroupProps, EuiPopover } from '@elastic/eui';
+import { ReactWrapper } from 'enzyme';
+
+describe('DiscoverFieldSearch', () => {
+  const defaultProps = {
+    onChange: jest.fn(),
+    value: 'test',
+    types: ['any', 'string', '_source'],
+  };
+
+  function mountComponent(props?: Props) {
+    const compProps = props || defaultProps;
+    return mountWithIntl(<DiscoverFieldSearch {...compProps} />);
+  }
+
+  function findButtonGroup(component: ReactWrapper, id: string) {
+    return component.find(`[data-test-subj="${id}ButtonGroup"]`).first();
+  }
+
+  test('enter value', () => {
+    const component = mountComponent();
+    const input = findTestSubject(component, 'fieldFilterSearchInput');
+    input.simulate('change', { target: { value: 'new filter' } });
+    expect(defaultProps.onChange).toBeCalledTimes(1);
+  });
+
+  test('change in active filters should change facet selection and call onChange', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    let btn = findTestSubject(component, 'toggleFieldFilterButton');
+    expect(btn.hasClass('euiFacetButton--isSelected')).toBeFalsy();
+    btn.simulate('click');
+    const aggregatableButtonGroup = findButtonGroup(component, 'aggregatable');
+    act(() => {
+      // @ts-ignore
+      (aggregatableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    component.update();
+    btn = findTestSubject(component, 'toggleFieldFilterButton');
+    expect(btn.hasClass('euiFacetButton--isSelected')).toBe(true);
+    expect(onChange).toBeCalledWith('aggregatable', true);
+  });
+
+  test('change in active filters should change filters count', () => {
+    const component = mountComponent();
+    let btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    btn = findTestSubject(component, 'toggleFieldFilterButton');
+    const badge = btn.find('.euiNotificationBadge');
+    // no active filters
+    expect(badge.text()).toEqual('0');
+    // change value of aggregatable select
+    const aggregatableButtonGroup = findButtonGroup(component, 'aggregatable');
+    act(() => {
+      // @ts-ignore
+      (aggregatableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('1');
+    // change value of searchable select
+    const searchableButtonGroup = findButtonGroup(component, 'searchable');
+    act(() => {
+      // @ts-ignore
+      (searchableButtonGroup.props() as EuiButtonGroupProps).onChange('searchable-true', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('2');
+    // change value of searchable select
+    act(() => {
+      // @ts-ignore
+      (searchableButtonGroup.props() as EuiButtonGroupProps).onChange('searchable-any', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('1');
+  });
+
+  test('change in missing fields switch should not change filter count', () => {
+    const component = mountComponent();
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const badge = btn.find('.euiNotificationBadge');
+    expect(badge.text()).toEqual('0');
+    const missingSwitch = findTestSubject(component, 'missingSwitch');
+    missingSwitch.simulate('change', { target: { value: false } });
+    expect(badge.text()).toEqual('0');
+  });
+
+  test('change in filters triggers onChange', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const aggregtableButtonGroup = findButtonGroup(component, 'aggregatable');
+    const missingSwitch = findTestSubject(component, 'missingSwitch');
+    act(() => {
+      // @ts-ignore
+      (aggregtableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    missingSwitch.simulate('click');
+    expect(onChange).toBeCalledTimes(2);
+  });
+
+  test('change in type filters triggers onChange with appropriate value', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const typeSelector = findTestSubject(component, 'typeSelect');
+    typeSelector.simulate('change', { target: { value: 'string' } });
+    expect(onChange).toBeCalledWith('type', 'string');
+    typeSelector.simulate('change', { target: { value: 'any' } });
+    expect(onChange).toBeCalledWith('type', 'any');
+  });
+
+  test('click on filter button should open and close popover', () => {
+    const component = mountComponent();
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    let popover = component.find(EuiPopover);
+    expect(popover.prop('isOpen')).toBe(true);
+    btn.simulate('click');
+    popover = component.find(EuiPopover);
+    expect(popover.prop('isOpen')).toBe(false);
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_search.tsx
new file mode 100644
index 000000000000..4a1390cb1955
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_field_search.tsx
@@ -0,0 +1,313 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React, { OptionHTMLAttributes, ReactNode, useState } from 'react';
+import { i18n } from '@osd/i18n';
+import {
+  EuiFacetButton,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiPopoverTitle,
+  EuiSelect,
+  EuiSwitch,
+  EuiSwitchEvent,
+  EuiForm,
+  EuiFormRow,
+  EuiButtonGroup,
+  EuiOutsideClickDetector,
+} from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+
+export interface State {
+  searchable: string;
+  aggregatable: string;
+  type: string;
+  missing: boolean;
+  [index: string]: string | boolean;
+}
+
+export interface Props {
+  /**
+   * triggered on input of user into search field
+   */
+  onChange: (field: string, value: string | boolean | undefined) => void;
+
+  /**
+   * the input value of the user
+   */
+  value?: string;
+
+  /**
+   * types for the type filter
+   */
+  types: string[];
+}
+
+/**
+ * Component is Discover's side bar to  search of available fields
+ * Additionally there's a button displayed that allows the user to show/hide more filter fields
+ */
+export function DiscoverFieldSearch({ onChange, value, types }: Props) {
+  const searchPlaceholder = i18n.translate('discover.fieldChooser.searchPlaceHolder', {
+    defaultMessage: 'Search field names',
+  });
+  const aggregatableLabel = i18n.translate('discover.fieldChooser.filter.aggregatableLabel', {
+    defaultMessage: 'Aggregatable',
+  });
+  const searchableLabel = i18n.translate('discover.fieldChooser.filter.searchableLabel', {
+    defaultMessage: 'Searchable',
+  });
+  const typeLabel = i18n.translate('discover.fieldChooser.filter.typeLabel', {
+    defaultMessage: 'Type',
+  });
+  const typeOptions = types
+    ? types.map((type) => {
+        return { value: type, text: type };
+      })
+    : [{ value: 'any', text: 'any' }];
+
+  const [activeFiltersCount, setActiveFiltersCount] = useState(0);
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+  const [values, setValues] = useState<State>({
+    searchable: 'any',
+    aggregatable: 'any',
+    type: 'any',
+    missing: true,
+  });
+
+  if (typeof value !== 'string') {
+    // at initial rendering value is undefined (angular related), this catches the warning
+    // should be removed once all is react
+    return null;
+  }
+
+  const filterBtnAriaLabel = isPopoverOpen
+    ? i18n.translate('discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
+        defaultMessage: 'Hide field filter settings',
+      })
+    : i18n.translate('discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel', {
+        defaultMessage: 'Show field filter settings',
+      });
+
+  const handleFacetButtonClicked = () => {
+    setPopoverOpen(!isPopoverOpen);
+  };
+
+  const applyFilterValue = (id: string, filterValue: string | boolean) => {
+    switch (filterValue) {
+      case 'any':
+        if (id !== 'type') {
+          onChange(id, undefined);
+        } else {
+          onChange(id, filterValue);
+        }
+        break;
+      case 'true':
+        onChange(id, true);
+        break;
+      case 'false':
+        onChange(id, false);
+        break;
+      default:
+        onChange(id, filterValue);
+    }
+  };
+
+  const isFilterActive = (name: string, filterValue: string | boolean) => {
+    return name !== 'missing' && filterValue !== 'any';
+  };
+
+  const handleValueChange = (name: string, filterValue: string | boolean) => {
+    const previousValue = values[name];
+    updateFilterCount(name, previousValue, filterValue);
+    const updatedValues = { ...values };
+    updatedValues[name] = filterValue;
+    setValues(updatedValues);
+    applyFilterValue(name, filterValue);
+  };
+
+  const updateFilterCount = (
+    name: string,
+    previousValue: string | boolean,
+    currentValue: string | boolean
+  ) => {
+    const previouslyFilterActive = isFilterActive(name, previousValue);
+    const filterActive = isFilterActive(name, currentValue);
+    const diff = Number(filterActive) - Number(previouslyFilterActive);
+    setActiveFiltersCount(activeFiltersCount + diff);
+  };
+
+  const handleMissingChange = (e: EuiSwitchEvent) => {
+    const missingValue = e.target.checked;
+    handleValueChange('missing', missingValue);
+  };
+
+  const buttonContent = (
+    <EuiFacetButton
+      aria-label={filterBtnAriaLabel}
+      data-test-subj="toggleFieldFilterButton"
+      className="dscFieldSearch__toggleButton"
+      icon={<EuiIcon type="filter" />}
+      isSelected={activeFiltersCount > 0}
+      quantity={activeFiltersCount}
+      onClick={handleFacetButtonClicked}
+    >
+      <FormattedMessage
+        id="discover.fieldChooser.fieldFilterFacetButtonLabel"
+        defaultMessage="Filter by type"
+      />
+    </EuiFacetButton>
+  );
+
+  const select = (
+    id: string,
+    selectOptions: Array<{ text: ReactNode } & OptionHTMLAttributes<HTMLOptionElement>>,
+    selectValue: string
+  ) => {
+    return (
+      <EuiSelect
+        id={`${id}-select`}
+        options={selectOptions}
+        value={selectValue}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+          handleValueChange(id, e.target.value)
+        }
+        aria-label={i18n.translate('discover.fieldChooser.filter.fieldSelectorLabel', {
+          defaultMessage: 'Selection of {id} filter options',
+          values: { id },
+        })}
+        data-test-subj={`${id}Select`}
+        compressed
+      />
+    );
+  };
+
+  const toggleButtons = (id: string) => {
+    return [
+      {
+        id: `${id}-any`,
+        label: 'any',
+      },
+      {
+        id: `${id}-true`,
+        label: 'yes',
+      },
+      {
+        id: `${id}-false`,
+        label: 'no',
+      },
+    ];
+  };
+
+  const buttonGroup = (id: string, legend: string) => {
+    return (
+      <EuiButtonGroup
+        legend={legend}
+        options={toggleButtons(id)}
+        idSelected={`${id}-${values[id]}`}
+        onChange={(optionId) => handleValueChange(id, optionId.replace(`${id}-`, ''))}
+        buttonSize="compressed"
+        isFullWidth
+        data-test-subj={`${id}ButtonGroup`}
+      />
+    );
+  };
+
+  const selectionPanel = (
+    <div className="dscFieldSearch__formWrapper">
+      <EuiForm data-test-subj="filterSelectionPanel">
+        <EuiFormRow fullWidth label={aggregatableLabel} display="columnCompressed">
+          {buttonGroup('aggregatable', aggregatableLabel)}
+        </EuiFormRow>
+        <EuiFormRow fullWidth label={searchableLabel} display="columnCompressed">
+          {buttonGroup('searchable', searchableLabel)}
+        </EuiFormRow>
+        <EuiFormRow fullWidth label={typeLabel} display="columnCompressed">
+          {select('type', typeOptions, values.type)}
+        </EuiFormRow>
+      </EuiForm>
+    </div>
+  );
+
+  return (
+    <React.Fragment>
+      <EuiFlexGroup responsive={false} gutterSize={'s'}>
+        <EuiFlexItem>
+          <EuiFieldSearch
+            aria-label={searchPlaceholder}
+            data-test-subj="fieldFilterSearchInput"
+            compressed
+            fullWidth
+            onChange={(event) => onChange('name', event.currentTarget.value)}
+            placeholder={searchPlaceholder}
+            value={value}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <div className="dscFieldSearch__filterWrapper">
+        <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
+          <EuiPopover
+            id="dataPanelTypeFilter"
+            panelClassName="euiFilterGroup__popoverPanel"
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+            display="block"
+            isOpen={isPopoverOpen}
+            closePopover={() => {
+              setPopoverOpen(false);
+            }}
+            button={buttonContent}
+          >
+            <EuiPopoverTitle>
+              {i18n.translate('discover.fieldChooser.filter.filterByTypeLabel', {
+                defaultMessage: 'Filter by type',
+              })}
+            </EuiPopoverTitle>
+            {selectionPanel}
+            <EuiPopoverFooter>
+              <EuiSwitch
+                label={i18n.translate('discover.fieldChooser.filter.hideMissingFieldsLabel', {
+                  defaultMessage: 'Hide missing fields',
+                })}
+                checked={values.missing}
+                onChange={handleMissingChange}
+                data-test-subj="missingSwitch"
+              />
+            </EuiPopoverFooter>
+          </EuiPopover>
+        </EuiOutsideClickDetector>
+      </div>
+    </React.Fragment>
+  );
+}
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_index_pattern.test.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/sidebar/discover_index_pattern.test.tsx
rename to src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern.test.tsx
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_index_pattern.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/sidebar/discover_index_pattern.tsx
rename to src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern.tsx
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_index_pattern_title.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern_title.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/sidebar/discover_index_pattern_title.tsx
rename to src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern_title.tsx
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.scss
new file mode 100644
index 000000000000..9c80e0afa600
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.scss
@@ -0,0 +1,99 @@
+.dscSidebar__container {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  background-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.dscIndexPattern__container {
+  display: flex;
+  align-items: center;
+  height: $euiSize * 3;
+  margin-top: -$euiSizeS;
+}
+
+.dscIndexPattern__triggerButton {
+  @include euiTitle("xs");
+
+  line-height: $euiSizeXXL;
+}
+
+.dscFieldList {
+  list-style: none;
+  margin-bottom: 0;
+}
+
+.dscFieldListHeader {
+  padding: $euiSizeS $euiSizeS 0 $euiSizeS;
+  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
+}
+
+.dscFieldList--popular {
+  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
+}
+
+.dscFieldChooser {
+  padding-left: $euiSize;
+}
+
+.dscFieldChooser__toggle {
+  color: $euiColorMediumShade;
+  margin-left: $euiSizeS !important;
+}
+
+.dscSidebarItem {
+  &:hover,
+  &:focus-within,
+  &[class*="-isActive"] {
+    .dscSidebarItem__action {
+      opacity: 1;
+    }
+  }
+}
+
+/**
+ * 1. Only visually hide the action, so that it's still accessible to screen readers.
+ * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
+ */
+.dscSidebarItem__action {
+  opacity: 0; /* 1 */
+  transition: none;
+
+  &:focus {
+    opacity: 1; /* 2 */
+  }
+
+  font-size: $euiFontSizeXS;
+  padding: 2px 6px !important;
+  height: 22px !important;
+  min-width: auto !important;
+
+  .euiButton__content {
+    padding: 0 4px;
+  }
+}
+
+.dscFieldSearch {
+  padding: $euiSizeS;
+}
+
+.dscFieldSearch__toggleButton {
+  width: calc(100% - #{$euiSizeS});
+  color: $euiColorPrimary;
+  padding-left: $euiSizeXS;
+  margin-left: $euiSizeXS;
+}
+
+.dscFieldSearch__filterWrapper {
+  flex-grow: 0;
+}
+
+.dscFieldSearch__formWrapper {
+  padding: $euiSizeM;
+}
+
+.dscFieldDetails {
+  color: $euiTextColor;
+  margin-bottom: $euiSizeS;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.test.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.test.tsx
new file mode 100644
index 000000000000..fa692ca22b5b
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.test.tsx
@@ -0,0 +1,148 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 _ from 'lodash';
+import { ReactWrapper } from 'enzyme';
+import { findTestSubject } from 'test_utils/helpers';
+// @ts-ignore
+import realHits from 'fixtures/real_hits.js';
+// @ts-ignore
+import stubbedLogstashFields from 'fixtures/logstash_fields';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { DiscoverSidebar, DiscoverSidebarProps } from './discover_sidebar';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { IndexPatternAttributes } from '../../../../../data/common';
+import { getStubIndexPattern } from '../../../../../data/public/test_utils';
+import { SavedObject } from '../../../../../../core/types';
+
+jest.mock('../../../opensearch_dashboards_services', () => ({
+  getServices: () => ({
+    history: () => ({
+      location: {
+        search: '',
+      },
+    }),
+    capabilities: {
+      visualize: {
+        show: true,
+      },
+      discover: {
+        save: false,
+      },
+    },
+    uiSettings: {
+      get: (key: string) => {
+        if (key === 'fields:popularLimit') {
+          return 5;
+        } else if (key === 'shortDots:enable') {
+          return false;
+        }
+      },
+    },
+  }),
+}));
+
+jest.mock('./lib/get_index_pattern_field_list', () => ({
+  getIndexPatternFieldList: jest.fn((indexPattern) => indexPattern.fields),
+}));
+
+function getCompProps() {
+  const indexPattern = getStubIndexPattern(
+    'logstash-*',
+    (cfg: any) => cfg,
+    'time',
+    stubbedLogstashFields(),
+    coreMock.createSetup()
+  );
+
+  // @ts-expect-error _.each() is passing additional args to flattenHit
+  const hits = _.each(_.cloneDeep(realHits), indexPattern.flattenHit) as Array<
+    Record<string, unknown>
+  >;
+
+  const indexPatternList = [
+    { id: '0', attributes: { title: 'b' } } as SavedObject<IndexPatternAttributes>,
+    { id: '1', attributes: { title: 'a' } } as SavedObject<IndexPatternAttributes>,
+    { id: '2', attributes: { title: 'c' } } as SavedObject<IndexPatternAttributes>,
+  ];
+
+  const fieldCounts: Record<string, number> = {};
+
+  for (const hit of hits) {
+    for (const key of Object.keys(indexPattern.flattenHit(hit))) {
+      fieldCounts[key] = (fieldCounts[key] || 0) + 1;
+    }
+  }
+  return {
+    columns: ['extension'],
+    fieldCounts,
+    hits,
+    indexPatternList,
+    onAddFilter: jest.fn(),
+    onAddField: jest.fn(),
+    onRemoveField: jest.fn(),
+    selectedIndexPattern: indexPattern,
+    setIndexPattern: jest.fn(),
+    state: {},
+  };
+}
+
+describe('discover sidebar', function () {
+  let props: DiscoverSidebarProps;
+  let comp: ReactWrapper<DiscoverSidebarProps>;
+
+  beforeAll(() => {
+    props = getCompProps();
+    comp = mountWithIntl(<DiscoverSidebar {...props} />);
+  });
+
+  it('should have Selected Fields and Available Fields with Popular Fields sections', function () {
+    const popular = findTestSubject(comp, 'fieldList-popular');
+    const selected = findTestSubject(comp, 'fieldList-selected');
+    const unpopular = findTestSubject(comp, 'fieldList-unpopular');
+    expect(popular.children().length).toBe(1);
+    expect(unpopular.children().length).toBe(7);
+    expect(selected.children().length).toBe(1);
+  });
+  it('should allow selecting fields', function () {
+    findTestSubject(comp, 'fieldToggle-bytes').simulate('click');
+    expect(props.onAddField).toHaveBeenCalledWith('bytes');
+  });
+  it('should allow deselecting fields', function () {
+    findTestSubject(comp, 'fieldToggle-extension').simulate('click');
+    expect(props.onRemoveField).toHaveBeenCalledWith('extension');
+  });
+  it('should allow adding filters', function () {
+    findTestSubject(comp, 'field-extension-showDetails').simulate('click');
+    findTestSubject(comp, 'plus-extension-gif').simulate('click');
+    expect(props.onAddFilter).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.tsx
new file mode 100644
index 000000000000..865aff590286
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_sidebar.tsx
@@ -0,0 +1,326 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 './discover_sidebar.scss';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiButtonIcon, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { sortBy } from 'lodash';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import { DiscoverField } from './discover_field';
+import { DiscoverIndexPattern } from './discover_index_pattern';
+import { DiscoverFieldSearch } from './discover_field_search';
+import { IndexPatternAttributes } from '../../../../../data/common';
+import { SavedObject } from '../../../../../../core/types';
+import { FIELDS_LIMIT_SETTING } from '../../../../common';
+import { groupFields } from './lib/group_fields';
+import { IndexPatternField, IndexPattern, UI_SETTINGS } from '../../../../../data/public';
+import { getDetails } from './lib/get_details';
+import { getDefaultFieldFilter, setFieldFilterProp } from './lib/field_filter';
+import { getIndexPatternFieldList } from './lib/get_index_pattern_field_list';
+import { getServices } from '../../../opensearch_dashboards_services';
+
+export interface DiscoverSidebarProps {
+  /**
+   * the selected columns displayed in the doc table in discover
+   */
+  columns: string[];
+  /**
+   * a statistics of the distribution of fields in the given hits
+   */
+  fieldCounts: Record<string, number>;
+  /**
+   * hits fetched from OpenSearch, displayed in the doc table
+   */
+  hits: Array<Record<string, unknown>>;
+  /**
+   * List of available index patterns
+   */
+  indexPatternList: Array<SavedObject<IndexPatternAttributes>>;
+  /**
+   * Callback function when selecting a field
+   */
+  onAddField: (fieldName: string) => void;
+  /**
+   * Callback function when adding a filter from sidebar
+   */
+  onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+  /**
+   * Callback function when removing a field
+   * @param fieldName
+   */
+  onRemoveField: (fieldName: string) => void;
+  /**
+   * Currently selected index pattern
+   */
+  selectedIndexPattern?: IndexPattern;
+  /**
+   * Callback function to select another index pattern
+   */
+  setIndexPattern: (id: string) => void;
+}
+
+export function DiscoverSidebar({
+  columns,
+  fieldCounts,
+  hits,
+  indexPatternList,
+  onAddField,
+  onAddFilter,
+  onRemoveField,
+  selectedIndexPattern,
+  setIndexPattern,
+}: DiscoverSidebarProps) {
+  const [showFields, setShowFields] = useState(false);
+  const [fields, setFields] = useState<IndexPatternField[] | null>(null);
+  const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter());
+  const services = useMemo(() => getServices(), []);
+
+  useEffect(() => {
+    const newFields = getIndexPatternFieldList(selectedIndexPattern, fieldCounts);
+    setFields(newFields);
+  }, [selectedIndexPattern, fieldCounts, hits, services]);
+
+  const onChangeFieldSearch = useCallback(
+    (field: string, value: string | boolean | undefined) => {
+      const newState = setFieldFilterProp(fieldFilterState, field, value);
+      setFieldFilterState(newState);
+    },
+    [fieldFilterState]
+  );
+
+  const getDetailsByField = useCallback(
+    (ipField: IndexPatternField) => getDetails(ipField, hits, selectedIndexPattern),
+    [hits, selectedIndexPattern]
+  );
+
+  const popularLimit = services.uiSettings.get(FIELDS_LIMIT_SETTING);
+  const useShortDots = services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE);
+
+  const {
+    selected: selectedFields,
+    popular: popularFields,
+    unpopular: unpopularFields,
+  } = useMemo(() => groupFields(fields, columns, popularLimit, fieldCounts, fieldFilterState), [
+    fields,
+    columns,
+    popularLimit,
+    fieldCounts,
+    fieldFilterState,
+  ]);
+
+  const fieldTypes = useMemo(() => {
+    const result = ['any'];
+    if (Array.isArray(fields)) {
+      for (const field of fields) {
+        if (result.indexOf(field.type) === -1) {
+          result.push(field.type);
+        }
+      }
+    }
+    return result;
+  }, [fields]);
+
+  if (!selectedIndexPattern || !fields) {
+    return null;
+  }
+
+  return (
+    <I18nProvider>
+      <section
+        className="sidebar-list"
+        aria-label={i18n.translate('discover.fieldChooser.filter.indexAndFieldsSectionAriaLabel', {
+          defaultMessage: 'Index and fields',
+        })}
+      >
+        <DiscoverIndexPattern
+          selectedIndexPattern={selectedIndexPattern}
+          setIndexPattern={setIndexPattern}
+          indexPatternList={sortBy(indexPatternList, (o) => o.attributes.title)}
+        />
+        <div className="dscSidebar__item">
+          <form>
+            <DiscoverFieldSearch
+              onChange={onChangeFieldSearch}
+              value={fieldFilterState.name}
+              types={fieldTypes}
+            />
+          </form>
+        </div>
+        <div className="sidebar-list">
+          {fields.length > 0 && (
+            <>
+              <EuiTitle size="xxxs" id="selected_fields">
+                <h3>
+                  <FormattedMessage
+                    id="discover.fieldChooser.filter.selectedFieldsTitle"
+                    defaultMessage="Selected fields"
+                  />
+                </h3>
+              </EuiTitle>
+              <EuiSpacer size="xs" />
+              <ul
+                className="dscSidebarList dscFieldList--selected"
+                aria-labelledby="selected_fields"
+                data-test-subj={`fieldList-selected`}
+              >
+                {selectedFields.map((field: IndexPatternField) => {
+                  return (
+                    <li
+                      key={`field${field.name}`}
+                      data-attr-field={field.name}
+                      className="dscSidebar__item"
+                    >
+                      <DiscoverField
+                        columns={columns}
+                        field={field}
+                        indexPattern={selectedIndexPattern}
+                        onAddField={onAddField}
+                        onRemoveField={onRemoveField}
+                        onAddFilter={onAddFilter}
+                        getDetails={getDetailsByField}
+                        selected={true}
+                        useShortDots={useShortDots}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+              <div className="euiFlexGroup euiFlexGroup--gutterMedium">
+                <EuiTitle size="xxxs" id="available_fields" className="euiFlexItem">
+                  <h3>
+                    <FormattedMessage
+                      id="discover.fieldChooser.filter.availableFieldsTitle"
+                      defaultMessage="Available fields"
+                    />
+                  </h3>
+                </EuiTitle>
+                <div className="euiFlexItem euiFlexItem--flexGrowZero">
+                  <EuiButtonIcon
+                    className={'visible-xs visible-sm dscFieldChooser__toggle'}
+                    iconType={showFields ? 'arrowDown' : 'arrowRight'}
+                    onClick={() => setShowFields(!showFields)}
+                    aria-label={
+                      showFields
+                        ? i18n.translate(
+                            'discover.fieldChooser.filter.indexAndFieldsSectionHideAriaLabel',
+                            {
+                              defaultMessage: 'Hide fields',
+                            }
+                          )
+                        : i18n.translate(
+                            'discover.fieldChooser.filter.indexAndFieldsSectionShowAriaLabel',
+                            {
+                              defaultMessage: 'Show fields',
+                            }
+                          )
+                    }
+                  />
+                </div>
+              </div>
+            </>
+          )}
+          {popularFields.length > 0 && (
+            <div>
+              <EuiTitle
+                size="xxxs"
+                className={`dscFieldListHeader ${!showFields ? 'hidden-sm hidden-xs' : ''}`}
+              >
+                <h4 style={{ fontWeight: 'normal' }} id="available_fields_popular">
+                  <FormattedMessage
+                    id="discover.fieldChooser.filter.popularTitle"
+                    defaultMessage="Popular"
+                  />
+                </h4>
+              </EuiTitle>
+              <ul
+                className={`dscFieldList dscFieldList--popular ${
+                  !showFields ? 'hidden-sm hidden-xs' : ''
+                }`}
+                aria-labelledby="available_fields available_fields_popular"
+                data-test-subj={`fieldList-popular`}
+              >
+                {popularFields.map((field: IndexPatternField) => {
+                  return (
+                    <li
+                      key={`field${field.name}`}
+                      data-attr-field={field.name}
+                      className="dscSidebar__item"
+                    >
+                      <DiscoverField
+                        columns={columns}
+                        field={field}
+                        indexPattern={selectedIndexPattern}
+                        onAddField={onAddField}
+                        onRemoveField={onRemoveField}
+                        onAddFilter={onAddFilter}
+                        getDetails={getDetailsByField}
+                        useShortDots={useShortDots}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
+
+          <ul
+            className={`dscFieldList dscFieldList--unpopular ${
+              !showFields ? 'hidden-sm hidden-xs' : ''
+            }`}
+            aria-labelledby="available_fields"
+            data-test-subj={`fieldList-unpopular`}
+          >
+            {unpopularFields.map((field: IndexPatternField) => {
+              return (
+                <li
+                  key={`field${field.name}`}
+                  data-attr-field={field.name}
+                  className="dscSidebar__item"
+                >
+                  <DiscoverField
+                    columns={columns}
+                    field={field}
+                    indexPattern={selectedIndexPattern}
+                    onAddField={onAddField}
+                    onRemoveField={onRemoveField}
+                    onAddFilter={onAddFilter}
+                    getDetails={getDetailsByField}
+                    useShortDots={useShortDots}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </section>
+    </I18nProvider>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/index.ts b/src/plugins/discover_legacy/public/application/components/sidebar/index.ts
new file mode 100644
index 000000000000..2799d47da83f
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/index.ts
@@ -0,0 +1,31 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { DiscoverSidebar } from './discover_sidebar';
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_calculator.test.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_calculator.test.ts
new file mode 100644
index 000000000000..d580f7ae228a
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_calculator.test.ts
@@ -0,0 +1,268 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 _ from 'lodash';
+// @ts-ignore
+import realHits from 'fixtures/real_hits.js';
+// @ts-ignore
+import stubbedLogstashFields from 'fixtures/logstash_fields';
+import { coreMock } from '../../../../../../../core/public/mocks';
+import { IndexPattern, IndexPatternField } from '../../../../../../data/public';
+import { getStubIndexPattern } from '../../../../../../data/public/test_utils';
+import {
+  groupValues,
+  getFieldValues,
+  getFieldValueCounts,
+  FieldValueCountsParams,
+} from './field_calculator';
+import { Bucket } from '../types';
+
+let indexPattern: IndexPattern;
+
+describe('field_calculator', function () {
+  beforeEach(function () {
+    indexPattern = getStubIndexPattern(
+      'logstash-*',
+      (cfg: any) => cfg,
+      'time',
+      stubbedLogstashFields(),
+      coreMock.createSetup()
+    );
+  });
+
+  describe('groupValues', function () {
+    let groups: Record<string, any>;
+    let grouped: boolean;
+    let values: any[];
+    beforeEach(function () {
+      values = [
+        ['foo', 'bar'],
+        'foo',
+        'foo',
+        undefined,
+        ['foo', 'bar'],
+        'bar',
+        'baz',
+        null,
+        null,
+        null,
+        'foo',
+        undefined,
+      ];
+      groups = groupValues(values, grouped);
+    });
+
+    it('should return an object values', function () {
+      expect(groups).toBeInstanceOf(Object);
+    });
+
+    it('should throw an error if any value is a plain object', function () {
+      expect(function () {
+        groupValues([{}, true, false], grouped);
+      }).toThrowError();
+    });
+
+    it('should handle values with dots in them', function () {
+      values = ['0', '0.........', '0.......,.....'];
+      groups = groupValues(values, grouped);
+      expect(groups[values[0]].count).toBe(1);
+      expect(groups[values[1]].count).toBe(1);
+      expect(groups[values[2]].count).toBe(1);
+    });
+
+    it('should have a key for value in the array when not grouping array terms', function () {
+      expect(_.keys(groups).length).toBe(3);
+      expect(groups.foo).toBeInstanceOf(Object);
+      expect(groups.bar).toBeInstanceOf(Object);
+      expect(groups.baz).toBeInstanceOf(Object);
+    });
+
+    it('should count array terms independently', function () {
+      expect(groups['foo,bar']).toBeUndefined();
+      expect(groups.foo.count).toBe(5);
+      expect(groups.bar.count).toBe(3);
+      expect(groups.baz.count).toBe(1);
+    });
+
+    describe('grouped array terms', function () {
+      beforeEach(function () {
+        grouped = true;
+        groups = groupValues(values, grouped);
+      });
+
+      it('should group array terms when grouped is true', function () {
+        expect(_.keys(groups).length).toBe(4);
+        expect(groups['foo,bar']).toBeInstanceOf(Object);
+      });
+
+      it('should contain the original array as the value', function () {
+        expect(groups['foo,bar'].value).toEqual(['foo', 'bar']);
+      });
+
+      it('should count the pairs separately from the values they contain', function () {
+        expect(groups['foo,bar'].count).toBe(2);
+        expect(groups.foo.count).toBe(3);
+        expect(groups.bar.count).toBe(1);
+      });
+    });
+  });
+
+  describe('getFieldValues', function () {
+    let hits: any;
+
+    beforeEach(function () {
+      hits = _.each(_.cloneDeep(realHits), (hit) => indexPattern.flattenHit(hit));
+    });
+
+    it('should return an array of values for _source fields', function () {
+      const extensions = getFieldValues({
+        hits,
+        field: indexPattern.fields.getByName('extension') as IndexPatternField,
+        indexPattern,
+      });
+      expect(extensions).toBeInstanceOf(Array);
+      expect(
+        _.filter(extensions, function (v) {
+          return v === 'html';
+        }).length
+      ).toBe(8);
+      expect(_.uniq(_.clone(extensions)).sort()).toEqual(['gif', 'html', 'php', 'png']);
+    });
+
+    it('should return an array of values for core meta fields', function () {
+      const types = getFieldValues({
+        hits,
+        field: indexPattern.fields.getByName('_type') as IndexPatternField,
+        indexPattern,
+      });
+      expect(types).toBeInstanceOf(Array);
+      expect(
+        _.filter(types, function (v) {
+          return v === 'apache';
+        }).length
+      ).toBe(18);
+      expect(_.uniq(_.clone(types)).sort()).toEqual(['apache', 'nginx']);
+    });
+  });
+
+  describe('getFieldValueCounts', function () {
+    let params: FieldValueCountsParams;
+    beforeEach(function () {
+      params = {
+        hits: _.cloneDeep(realHits),
+        field: indexPattern.fields.getByName('extension') as IndexPatternField,
+        count: 3,
+        indexPattern,
+      };
+    });
+
+    it('counts the top 5 values by default', function () {
+      params.hits = params.hits.map((hit: Record<string, any>, i) => ({
+        ...hit,
+        _source: {
+          extension: `${hit._source.extension}-${i}`,
+        },
+      }));
+      params.count = undefined;
+      const extensions = getFieldValueCounts(params);
+      expect(extensions).toBeInstanceOf(Object);
+      expect(extensions.buckets).toBeInstanceOf(Array);
+      const buckets = extensions.buckets as Bucket[];
+      expect(buckets.length).toBe(5);
+      expect(extensions.error).toBeUndefined();
+    });
+
+    it('counts only distinct values if less than default', function () {
+      params.count = undefined;
+      const extensions = getFieldValueCounts(params);
+      expect(extensions).toBeInstanceOf(Object);
+      expect(extensions.buckets).toBeInstanceOf(Array);
+      const buckets = extensions.buckets as Bucket[];
+      expect(buckets.length).toBe(4);
+      expect(extensions.error).toBeUndefined();
+    });
+
+    it('counts only distinct values if less than specified count', function () {
+      params.count = 10;
+      const extensions = getFieldValueCounts(params);
+      expect(extensions).toBeInstanceOf(Object);
+      expect(extensions.buckets).toBeInstanceOf(Array);
+      const buckets = extensions.buckets as Bucket[];
+      expect(buckets.length).toBe(4);
+      expect(extensions.error).toBeUndefined();
+    });
+
+    it('counts the top 3 values', function () {
+      const extensions = getFieldValueCounts(params);
+      expect(extensions).toBeInstanceOf(Object);
+      expect(extensions.buckets).toBeInstanceOf(Array);
+      const buckets = extensions.buckets as Bucket[];
+      expect(buckets.length).toBe(3);
+      expect(_.map(buckets, 'value')).toEqual(['html', 'gif', 'php']);
+      expect(extensions.error).toBeUndefined();
+    });
+
+    it('fails to analyze geo and attachment types', function () {
+      params.field = indexPattern.fields.getByName('point') as IndexPatternField;
+      expect(getFieldValueCounts(params).error).not.toBeUndefined();
+
+      params.field = indexPattern.fields.getByName('area') as IndexPatternField;
+      expect(getFieldValueCounts(params).error).not.toBeUndefined();
+
+      params.field = indexPattern.fields.getByName('request_body') as IndexPatternField;
+      expect(getFieldValueCounts(params).error).not.toBeUndefined();
+    });
+
+    it('fails to analyze fields that are in the mapping, but not the hits', function () {
+      params.field = indexPattern.fields.getByName('ip') as IndexPatternField;
+      expect(getFieldValueCounts(params).error).not.toBeUndefined();
+    });
+
+    it('counts the total hits', function () {
+      expect(getFieldValueCounts(params).total).toBe(params.hits.length);
+    });
+
+    it('counts the hits the field exists in', function () {
+      params.field = indexPattern.fields.getByName('phpmemory') as IndexPatternField;
+      expect(getFieldValueCounts(params).exists).toBe(5);
+    });
+
+    it('catches and returns errors', function () {
+      params.hits = params.hits.map((hit: Record<string, any>) => ({
+        ...hit,
+        _source: {
+          extension: { foo: hit._source.extension },
+        },
+      }));
+      params.grouped = true;
+      expect(typeof getFieldValueCounts(params).error).toBe('string');
+    });
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_calculator.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_calculator.ts
new file mode 100644
index 000000000000..54f8832fa1fc
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_calculator.ts
@@ -0,0 +1,148 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+import { IndexPattern, IndexPatternField } from 'src/plugins/data/public';
+import { FieldValueCounts } from '../types';
+
+const NO_ANALYSIS_TYPES = ['geo_point', 'geo_shape', 'attachment'];
+
+interface FieldValuesParams {
+  hits: Array<Record<string, unknown>>;
+  field: IndexPatternField;
+  indexPattern: IndexPattern;
+}
+
+interface FieldValueCountsParams extends FieldValuesParams {
+  count?: number;
+  grouped?: boolean;
+}
+
+const getFieldValues = ({ hits, field, indexPattern }: FieldValuesParams) => {
+  const name = field.name;
+  const flattenHit = indexPattern.flattenHit;
+  return hits.map((hit) => flattenHit(hit)[name]);
+};
+
+const getFieldValueCounts = (params: FieldValueCountsParams): FieldValueCounts => {
+  const { hits, field, indexPattern, count = 5, grouped = false } = params;
+  const { type: fieldType } = field;
+
+  if (NO_ANALYSIS_TYPES.includes(fieldType)) {
+    return {
+      error: i18n.translate(
+        'discover.fieldChooser.fieldCalculator.analysisIsNotAvailableForGeoFieldsErrorMessage',
+        {
+          defaultMessage: 'Analysis is not available for {fieldType} fields.',
+          values: {
+            fieldType,
+          },
+        }
+      ),
+    };
+  }
+
+  const allValues = getFieldValues({ hits, field, indexPattern });
+  const missing = allValues.filter((v) => v === undefined || v === null).length;
+
+  try {
+    const groups = groupValues(allValues, grouped);
+    const counts = Object.keys(groups)
+      .sort((a, b) => groups[b].count - groups[a].count)
+      .slice(0, count)
+      .map((key) => ({
+        value: groups[key].value,
+        count: groups[key].count,
+        percent: (groups[key].count / (hits.length - missing)) * 100,
+        display: indexPattern.getFormatterForField(field).convert(groups[key].value),
+      }));
+
+    if (hits.length === missing) {
+      return {
+        error: i18n.translate(
+          'discover.fieldChooser.fieldCalculator.fieldIsNotPresentInDocumentsErrorMessage',
+          {
+            defaultMessage:
+              'This field is present in your OpenSearch mapping but not in the {hitsLength} documents shown in the doc table. You may still be able to visualize or search on it.',
+            values: {
+              hitsLength: hits.length,
+            },
+          }
+        ),
+      };
+    }
+
+    return {
+      total: hits.length,
+      exists: hits.length - missing,
+      missing,
+      buckets: counts,
+    };
+  } catch (e) {
+    return {
+      error: e instanceof Error ? e.message : String(e),
+    };
+  }
+};
+
+const groupValues = (
+  allValues: any[],
+  grouped?: boolean
+): Record<string, { value: any; count: number }> => {
+  const values = grouped ? allValues : allValues.flat();
+
+  return values
+    .filter((v) => {
+      if (v instanceof Object && !Array.isArray(v)) {
+        throw new Error(
+          i18n.translate(
+            'discover.fieldChooser.fieldCalculator.analysisIsNotAvailableForObjectFieldsErrorMessage',
+            {
+              defaultMessage: 'Analysis is not available for object fields.',
+            }
+          )
+        );
+      }
+      return v !== undefined && v !== null;
+    })
+    .reduce((groups, value) => {
+      if (groups.hasOwnProperty(value)) {
+        groups[value].count++;
+      } else {
+        groups[value] = {
+          value,
+          count: 1,
+        };
+      }
+      return groups;
+    }, {});
+};
+
+export { FieldValueCountsParams, groupValues, getFieldValues, getFieldValueCounts };
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_filter.test.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_filter.test.ts
new file mode 100644
index 000000000000..a21d93cb5bc4
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_filter.test.ts
@@ -0,0 +1,107 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { getDefaultFieldFilter, setFieldFilterProp, isFieldFiltered } from './field_filter';
+import { IndexPatternField } from '../../../../../../data/public';
+
+describe('field_filter', function () {
+  it('getDefaultFieldFilter should return default filter state', function () {
+    expect(getDefaultFieldFilter()).toMatchInlineSnapshot(`
+      Object {
+        "aggregatable": null,
+        "missing": true,
+        "name": "",
+        "searchable": null,
+        "type": "any",
+      }
+    `);
+  });
+  it('setFieldFilterProp should return allow filter changes', function () {
+    const state = getDefaultFieldFilter();
+    const targetState = {
+      aggregatable: true,
+      missing: true,
+      name: 'test',
+      searchable: true,
+      type: 'string',
+    };
+    const actualState = Object.entries(targetState).reduce((acc, kv) => {
+      return setFieldFilterProp(acc, kv[0], kv[1]);
+    }, state);
+    expect(actualState).toMatchInlineSnapshot(`
+      Object {
+        "aggregatable": true,
+        "missing": true,
+        "name": "test",
+        "searchable": true,
+        "type": "string",
+      }
+    `);
+  });
+  it('filters a given list', () => {
+    const defaultState = getDefaultFieldFilter();
+    const fieldList = [
+      {
+        name: 'bytes',
+        type: 'number',
+        esTypes: ['long'],
+        count: 10,
+        scripted: false,
+        searchable: false,
+        aggregatable: false,
+      },
+      {
+        name: 'extension',
+        type: 'string',
+        esTypes: ['text'],
+        count: 10,
+        scripted: true,
+        searchable: true,
+        aggregatable: true,
+      },
+    ] as IndexPatternField[];
+
+    [
+      { filter: {}, result: ['bytes', 'extension'] },
+      { filter: { name: 'by' }, result: ['bytes'] },
+      { filter: { aggregatable: true }, result: ['extension'] },
+      { filter: { aggregatable: true, searchable: false }, result: [] },
+      { filter: { type: 'string' }, result: ['extension'] },
+    ].forEach((test) => {
+      const filtered = fieldList
+        .filter((field) =>
+          isFieldFiltered(field, { ...defaultState, ...test.filter }, { bytes: 1, extension: 1 })
+        )
+        .map((field) => field.name);
+
+      expect(filtered).toEqual(test.result);
+    });
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_filter.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_filter.ts
new file mode 100644
index 000000000000..d72af29b43e0
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/field_filter.ts
@@ -0,0 +1,89 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { IndexPatternField } from '../../../../../../data/public';
+
+export interface FieldFilterState {
+  missing: boolean;
+  type: string;
+  name: string;
+  aggregatable: null | boolean;
+  searchable: null | boolean;
+}
+
+export function getDefaultFieldFilter(): FieldFilterState {
+  return {
+    missing: true,
+    type: 'any',
+    name: '',
+    aggregatable: null,
+    searchable: null,
+  };
+}
+
+export function setFieldFilterProp(
+  state: FieldFilterState,
+  name: string,
+  value: string | boolean | null | undefined
+): FieldFilterState {
+  const newState = { ...state };
+  if (name === 'missing') {
+    newState.missing = Boolean(value);
+  } else if (name === 'aggregatable') {
+    newState.aggregatable = typeof value !== 'boolean' ? null : value;
+  } else if (name === 'searchable') {
+    newState.searchable = typeof value !== 'boolean' ? null : value;
+  } else if (name === 'name') {
+    newState.name = String(value);
+  } else if (name === 'type') {
+    newState.type = String(value);
+  }
+  return newState;
+}
+
+export function isFieldFiltered(
+  field: IndexPatternField,
+  filterState: FieldFilterState,
+  fieldCounts: Record<string, number>
+): boolean {
+  const matchFilter = filterState.type === 'any' || field.type === filterState.type;
+  const isAggregatable =
+    filterState.aggregatable === null || field.aggregatable === filterState.aggregatable;
+  const isSearchable =
+    filterState.searchable === null || field.searchable === filterState.searchable;
+  const scriptedOrMissing =
+    !filterState.missing ||
+    field.type === '_source' ||
+    field.scripted ||
+    fieldCounts[field.name] > 0;
+  const matchName = !filterState.name || field.name.indexOf(filterState.name) !== -1;
+
+  return matchFilter && isAggregatable && isSearchable && scriptedOrMissing && matchName;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_details.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_details.ts
new file mode 100644
index 000000000000..823cbde9ba72
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_details.ts
@@ -0,0 +1,71 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import { i18n } from '@osd/i18n';
+import { getFieldValueCounts } from './field_calculator';
+import { IndexPattern, IndexPatternField } from '../../../../../../data/public';
+
+export function getDetails(
+  field: IndexPatternField,
+  hits: Array<Record<string, unknown>>,
+  indexPattern?: IndexPattern
+) {
+  const defaultDetails = {
+    error: '',
+    exists: 0,
+    total: 0,
+    buckets: [],
+  };
+  if (!indexPattern) {
+    return {
+      ...defaultDetails,
+      error: i18n.translate('discover.fieldChooser.noIndexPatternSelectedErrorMessage', {
+        defaultMessage: 'Index pattern not specified.',
+      }),
+    };
+  }
+  const details = {
+    ...defaultDetails,
+    ...getFieldValueCounts({
+      hits,
+      field,
+      indexPattern,
+      count: 5,
+      grouped: false,
+    }),
+  };
+  if (details.buckets) {
+    for (const bucket of details.buckets) {
+      bucket.display = indexPattern.getFormatterForField(field).convert(bucket.value);
+    }
+  }
+  return details;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_field_type_name.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_field_type_name.ts
new file mode 100644
index 000000000000..38b18792d3e4
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_field_type_name.ts
@@ -0,0 +1,85 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+
+export function getFieldTypeName(type: string) {
+  switch (type) {
+    case 'boolean':
+      return i18n.translate('discover.fieldNameIcons.booleanAriaLabel', {
+        defaultMessage: 'Boolean field',
+      });
+    case 'conflict':
+      return i18n.translate('discover.fieldNameIcons.conflictFieldAriaLabel', {
+        defaultMessage: 'Conflicting field',
+      });
+    case 'date':
+      return i18n.translate('discover.fieldNameIcons.dateFieldAriaLabel', {
+        defaultMessage: 'Date field',
+      });
+    case 'geo_point':
+      return i18n.translate('discover.fieldNameIcons.geoPointFieldAriaLabel', {
+        defaultMessage: 'Geo point field',
+      });
+    case 'geo_shape':
+      return i18n.translate('discover.fieldNameIcons.geoShapeFieldAriaLabel', {
+        defaultMessage: 'Geo shape field',
+      });
+    case 'ip':
+      return i18n.translate('discover.fieldNameIcons.ipAddressFieldAriaLabel', {
+        defaultMessage: 'IP address field',
+      });
+    case 'murmur3':
+      return i18n.translate('discover.fieldNameIcons.murmur3FieldAriaLabel', {
+        defaultMessage: 'Murmur3 field',
+      });
+    case 'number':
+      return i18n.translate('discover.fieldNameIcons.numberFieldAriaLabel', {
+        defaultMessage: 'Number field',
+      });
+    case 'source':
+      // Note that this type is currently not provided, type for _source is undefined
+      return i18n.translate('discover.fieldNameIcons.sourceFieldAriaLabel', {
+        defaultMessage: 'Source field',
+      });
+    case 'string':
+      return i18n.translate('discover.fieldNameIcons.stringFieldAriaLabel', {
+        defaultMessage: 'String field',
+      });
+    case 'nested':
+      return i18n.translate('discover.fieldNameIcons.nestedFieldAriaLabel', {
+        defaultMessage: 'Nested field',
+      });
+    default:
+      return i18n.translate('discover.fieldNameIcons.unknownFieldAriaLabel', {
+        defaultMessage: 'Unknown field',
+      });
+  }
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_index_pattern_field_list.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_index_pattern_field_list.ts
new file mode 100644
index 000000000000..b3a8ff5cd8d9
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_index_pattern_field_list.ts
@@ -0,0 +1,53 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { difference } from 'lodash';
+import { IndexPattern, IndexPatternField } from 'src/plugins/data/public';
+
+export function getIndexPatternFieldList(
+  indexPattern?: IndexPattern,
+  fieldCounts?: Record<string, number>
+) {
+  if (!indexPattern || !fieldCounts) return [];
+
+  const fieldNamesInDocs = Object.keys(fieldCounts);
+  const fieldNamesInIndexPattern = indexPattern.fields.getAll().map((fld) => fld.name);
+  const unknownTypes: IndexPatternField[] = [];
+
+  difference(fieldNamesInDocs, fieldNamesInIndexPattern).forEach((unknownFieldName) => {
+    unknownTypes.push({
+      displayName: String(unknownFieldName),
+      name: String(unknownFieldName),
+      type: 'unknown',
+    } as IndexPatternField);
+  });
+
+  return [...indexPattern.fields.getAll(), ...unknownTypes];
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_warnings.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_warnings.ts
new file mode 100644
index 000000000000..770a0ce664e4
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/get_warnings.ts
@@ -0,0 +1,55 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+import { IndexPatternField } from '../../../../../../data/public';
+
+export function getWarnings(field: IndexPatternField) {
+  let warnings = [];
+
+  if (field.scripted) {
+    warnings.push(
+      i18n.translate(
+        'discover.fieldChooser.discoverField.scriptedFieldsTakeLongExecuteDescription',
+        {
+          defaultMessage: 'Scripted fields can take a long time to execute.',
+        }
+      )
+    );
+  }
+
+  if (warnings.length > 1) {
+    warnings = warnings.map(function (warning, i) {
+      return (i > 0 ? '\n' : '') + (i + 1) + ' - ' + warning;
+    });
+  }
+
+  return warnings;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/group_fields.test.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/group_fields.test.ts
new file mode 100644
index 000000000000..7301ce3a4c96
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/group_fields.test.ts
@@ -0,0 +1,125 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { groupFields } from './group_fields';
+import { getDefaultFieldFilter } from './field_filter';
+
+describe('group_fields', function () {
+  it('should group fields in selected, popular, unpopular group', function () {
+    const fields = [
+      {
+        name: 'category',
+        type: 'string',
+        esTypes: ['text'],
+        count: 1,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      {
+        name: 'currency',
+        type: 'string',
+        esTypes: ['keyword'],
+        count: 0,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+      {
+        name: 'customer_birth_date',
+        type: 'date',
+        esTypes: ['date'],
+        count: 0,
+        scripted: false,
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+      },
+    ];
+
+    const fieldCounts = {
+      category: 1,
+      currency: 1,
+      customer_birth_date: 1,
+    };
+
+    const fieldFilterState = getDefaultFieldFilter();
+
+    const actual = groupFields(fields as any, ['currency'], 5, fieldCounts, fieldFilterState);
+    expect(actual).toMatchInlineSnapshot(`
+      Object {
+        "popular": Array [
+          Object {
+            "aggregatable": true,
+            "count": 1,
+            "esTypes": Array [
+              "text",
+            ],
+            "name": "category",
+            "readFromDocValues": true,
+            "scripted": false,
+            "searchable": true,
+            "type": "string",
+          },
+        ],
+        "selected": Array [
+          Object {
+            "aggregatable": true,
+            "count": 0,
+            "esTypes": Array [
+              "keyword",
+            ],
+            "name": "currency",
+            "readFromDocValues": true,
+            "scripted": false,
+            "searchable": true,
+            "type": "string",
+          },
+        ],
+        "unpopular": Array [
+          Object {
+            "aggregatable": true,
+            "count": 0,
+            "esTypes": Array [
+              "date",
+            ],
+            "name": "customer_birth_date",
+            "readFromDocValues": true,
+            "scripted": false,
+            "searchable": true,
+            "type": "date",
+          },
+        ],
+      }
+    `);
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/group_fields.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/lib/group_fields.tsx
new file mode 100644
index 000000000000..fad1db402467
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/group_fields.tsx
@@ -0,0 +1,87 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { IndexPatternField } from 'src/plugins/data/public';
+import { FieldFilterState, isFieldFiltered } from './field_filter';
+
+interface GroupedFields {
+  selected: IndexPatternField[];
+  popular: IndexPatternField[];
+  unpopular: IndexPatternField[];
+}
+
+/**
+ * group the fields into selected, popular and unpopular, filter by fieldFilterState
+ */
+export function groupFields(
+  fields: IndexPatternField[] | null,
+  columns: string[],
+  popularLimit: number,
+  fieldCounts: Record<string, number>,
+  fieldFilterState: FieldFilterState
+): GroupedFields {
+  const result: GroupedFields = {
+    selected: [],
+    popular: [],
+    unpopular: [],
+  };
+  if (!Array.isArray(fields) || !Array.isArray(columns) || typeof fieldCounts !== 'object') {
+    return result;
+  }
+
+  const popular = fields
+    .filter((field) => !columns.includes(field.name) && field.count)
+    .sort((a: IndexPatternField, b: IndexPatternField) => (b.count || 0) - (a.count || 0))
+    .map((field) => field.name)
+    .slice(0, popularLimit);
+
+  const compareFn = (a: IndexPatternField, b: IndexPatternField) => {
+    if (!a.displayName) {
+      return 0;
+    }
+    return a.displayName.localeCompare(b.displayName || '');
+  };
+  const fieldsSorted = fields.sort(compareFn);
+
+  for (const field of fieldsSorted) {
+    if (!isFieldFiltered(field, fieldFilterState, fieldCounts)) {
+      continue;
+    }
+    if (columns.includes(field.name)) {
+      result.selected.push(field);
+    } else if (popular.includes(field.name) && field.type !== '_source') {
+      result.popular.push(field);
+    } else if (field.type !== '_source') {
+      result.unpopular.push(field);
+    }
+  }
+
+  return result;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/lib/visualize_trigger_utils.ts b/src/plugins/discover_legacy/public/application/components/sidebar/lib/visualize_trigger_utils.ts
new file mode 100644
index 000000000000..36a6bcf2e329
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/lib/visualize_trigger_utils.ts
@@ -0,0 +1,122 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 {
+  VISUALIZE_FIELD_TRIGGER,
+  VISUALIZE_GEO_FIELD_TRIGGER,
+  visualizeFieldTrigger,
+  visualizeGeoFieldTrigger,
+} from '../../../../../../ui_actions/public';
+import { getUiActions } from '../../../../opensearch_dashboards_services';
+import { IndexPatternField, OSD_FIELD_TYPES } from '../../../../../../data/public';
+
+function getTriggerConstant(type: string) {
+  return type === OSD_FIELD_TYPES.GEO_POINT || type === OSD_FIELD_TYPES.GEO_SHAPE
+    ? VISUALIZE_GEO_FIELD_TRIGGER
+    : VISUALIZE_FIELD_TRIGGER;
+}
+
+function getTrigger(type: string) {
+  return type === OSD_FIELD_TYPES.GEO_POINT || type === OSD_FIELD_TYPES.GEO_SHAPE
+    ? visualizeGeoFieldTrigger
+    : visualizeFieldTrigger;
+}
+
+async function getCompatibleActions(
+  fieldName: string,
+  indexPatternId: string,
+  contextualFields: string[],
+  trigger: typeof VISUALIZE_FIELD_TRIGGER | typeof VISUALIZE_GEO_FIELD_TRIGGER
+) {
+  const compatibleActions = await getUiActions().getTriggerCompatibleActions(trigger, {
+    indexPatternId,
+    fieldName,
+    contextualFields,
+  });
+  return compatibleActions;
+}
+
+export async function getVisualizeHref(
+  field: IndexPatternField,
+  indexPatternId: string | undefined,
+  contextualFields: string[]
+) {
+  if (!indexPatternId) return undefined;
+  const triggerOptions = {
+    indexPatternId,
+    fieldName: field.name,
+    contextualFields,
+    trigger: getTrigger(field.type),
+  };
+  const compatibleActions = await getCompatibleActions(
+    field.name,
+    indexPatternId,
+    contextualFields,
+    getTriggerConstant(field.type)
+  );
+  // enable the link only if only one action is registered
+  return compatibleActions.length === 1
+    ? compatibleActions[0].getHref?.(triggerOptions)
+    : undefined;
+}
+
+export function triggerVisualizeActions(
+  field: IndexPatternField,
+  indexPatternId: string | undefined,
+  contextualFields: string[]
+) {
+  if (!indexPatternId) return;
+  const trigger = getTriggerConstant(field.type);
+  const triggerOptions = {
+    indexPatternId,
+    fieldName: field.name,
+    contextualFields,
+  };
+  getUiActions().getTrigger(trigger).exec(triggerOptions);
+}
+
+export async function isFieldVisualizable(
+  field: IndexPatternField,
+  indexPatternId: string | undefined,
+  contextualFields: string[]
+) {
+  if (field.name === '_id' || !indexPatternId) {
+    // for first condition you'd get a 'Fielddata access on the _id field is disallowed' error on OpenSearch side.
+    return false;
+  }
+  const trigger = getTriggerConstant(field.type);
+  const compatibleActions = await getCompatibleActions(
+    field.name,
+    indexPatternId,
+    contextualFields,
+    trigger
+  );
+  return compatibleActions.length > 0 && field.visualizable;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/string_progress_bar.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/string_progress_bar.tsx
new file mode 100644
index 000000000000..dba087d0f9ed
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/string_progress_bar.tsx
@@ -0,0 +1,46 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiProgress } from '@elastic/eui';
+
+interface Props {
+  percent: number;
+  count: number;
+  value: string;
+}
+
+export function StringFieldProgressBar({ value, percent, count }: Props) {
+  const ariaLabel = `${value}: ${count} (${percent}%)`;
+
+  return (
+    <EuiProgress value={percent} max={100} color="secondary" aria-label={ariaLabel} size="s" />
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/types.ts b/src/plugins/discover_legacy/public/application/components/sidebar/types.ts
new file mode 100644
index 000000000000..a43120b28e96
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/types.ts
@@ -0,0 +1,52 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 interface IndexPatternRef {
+  id: string;
+  title: string;
+}
+
+export interface FieldDetails {
+  error: string;
+  exists: number;
+  total: number;
+  buckets: Bucket[];
+}
+
+export interface FieldValueCounts extends Partial<FieldDetails> {
+  missing?: number;
+}
+
+export interface Bucket {
+  display: string;
+  value: string;
+  percent: number;
+  count: number;
+}
diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/index.ts b/src/plugins/discover_legacy/public/application/components/skip_bottom_button/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/components/skip_bottom_button/index.ts
rename to src/plugins/discover_legacy/public/application/components/skip_bottom_button/index.ts
diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx b/src/plugins/discover_legacy/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx
rename to src/plugins/discover_legacy/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx
diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx b/src/plugins/discover_legacy/public/application/components/skip_bottom_button/skip_bottom_button.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx
rename to src/plugins/discover_legacy/public/application/components/skip_bottom_button/skip_bottom_button.tsx
diff --git a/src/plugins/discover_legacy/public/application/components/table/table.test.tsx b/src/plugins/discover_legacy/public/application/components/table/table.test.tsx
new file mode 100644
index 000000000000..220ac57feae2
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table.test.tsx
@@ -0,0 +1,279 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mount } from 'enzyme';
+import { findTestSubject } from 'test_utils/helpers';
+import { DocViewTable } from './table';
+import { indexPatterns, IndexPattern } from '../../../../../data/public';
+
+const indexPattern = ({
+  fields: {
+    getAll: () => [
+      {
+        name: '_index',
+        type: 'string',
+        scripted: false,
+        filterable: true,
+      },
+      {
+        name: 'message',
+        type: 'string',
+        scripted: false,
+        filterable: false,
+      },
+      {
+        name: 'extension',
+        type: 'string',
+        scripted: false,
+        filterable: true,
+      },
+      {
+        name: 'bytes',
+        type: 'number',
+        scripted: false,
+        filterable: true,
+      },
+      {
+        name: 'scripted',
+        type: 'number',
+        scripted: true,
+        filterable: false,
+      },
+    ],
+  },
+  metaFields: ['_index', '_score'],
+  flattenHit: undefined,
+  formatHit: jest.fn((hit) => hit._source),
+} as unknown) as IndexPattern;
+
+indexPattern.fields.getByName = (name: string) => {
+  return indexPattern.fields.getAll().find((field) => field.name === name);
+};
+
+indexPattern.flattenHit = indexPatterns.flattenHitWrapper(indexPattern, indexPattern.metaFields);
+
+describe('DocViewTable at Discover', () => {
+  // At Discover's main view, all buttons are rendered
+  // check for existence of action buttons and warnings
+
+  const hit = {
+    _index: 'logstash-2014.09.09',
+    _type: 'doc',
+    _id: 'id123',
+    _score: 1,
+    _source: {
+      message:
+        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. \
+        Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus \
+        et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, \
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. \
+        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, \
+        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. \
+        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. \
+        Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut',
+      extension: 'html',
+      not_mapped: 'yes',
+      bytes: 100,
+      objectArray: [{ foo: true }],
+      relatedContent: {
+        test: 1,
+      },
+      scripted: 123,
+      _underscore: 123,
+    },
+  };
+
+  const props = {
+    hit,
+    columns: ['extension'],
+    indexPattern,
+    filter: jest.fn(),
+    onAddColumn: jest.fn(),
+    onRemoveColumn: jest.fn(),
+  };
+  const component = mount(<DocViewTable {...props} />);
+  [
+    {
+      _property: '_index',
+      addInclusiveFilterButton: true,
+      collapseBtn: false,
+      noMappingWarning: false,
+      toggleColumnButton: true,
+      underscoreWarning: false,
+    },
+    {
+      _property: 'message',
+      addInclusiveFilterButton: false,
+      collapseBtn: true,
+      noMappingWarning: false,
+      toggleColumnButton: true,
+      underscoreWarning: false,
+    },
+    {
+      _property: '_underscore',
+      addInclusiveFilterButton: false,
+      collapseBtn: false,
+      noMappingWarning: false,
+      toggleColumnButton: true,
+      underScoreWarning: true,
+    },
+    {
+      _property: 'scripted',
+      addInclusiveFilterButton: false,
+      collapseBtn: false,
+      noMappingWarning: false,
+      toggleColumnButton: true,
+      underScoreWarning: false,
+    },
+    {
+      _property: 'not_mapped',
+      addInclusiveFilterButton: false,
+      collapseBtn: false,
+      noMappingWarning: true,
+      toggleColumnButton: true,
+      underScoreWarning: false,
+    },
+  ].forEach((check) => {
+    const rowComponent = findTestSubject(component, `tableDocViewRow-${check._property}`);
+
+    it(`renders row for ${check._property}`, () => {
+      expect(rowComponent.length).toBe(1);
+    });
+
+    ([
+      'addInclusiveFilterButton',
+      'collapseBtn',
+      'toggleColumnButton',
+      'underscoreWarning',
+    ] as const).forEach((element) => {
+      const elementExist = check[element];
+
+      if (typeof elementExist === 'boolean') {
+        const btn = findTestSubject(rowComponent, element);
+
+        it(`renders ${element} for '${check._property}' correctly`, () => {
+          const disabled = btn.length ? btn.props().disabled : true;
+          const clickAble = btn.length && !disabled ? true : false;
+          expect(clickAble).toBe(elementExist);
+        });
+      }
+    });
+
+    (['noMappingWarning'] as const).forEach((element) => {
+      const elementExist = check[element];
+
+      if (typeof elementExist === 'boolean') {
+        const el = findTestSubject(rowComponent, element);
+
+        it(`renders ${element} for '${check._property}' correctly`, () => {
+          expect(el.length).toBe(elementExist ? 1 : 0);
+        });
+      }
+    });
+  });
+});
+
+describe('DocViewTable at Discover Doc', () => {
+  const hit = {
+    _index: 'logstash-2014.09.09',
+    _score: 1,
+    _type: 'doc',
+    _id: 'id123',
+    _source: {
+      extension: 'html',
+      not_mapped: 'yes',
+    },
+  };
+  // here no action buttons are rendered
+  const props = {
+    hit,
+    indexPattern,
+  };
+  const component = mount(<DocViewTable {...props} />);
+  const foundLength = findTestSubject(component, 'addInclusiveFilterButton').length;
+
+  it(`renders no action buttons`, () => {
+    expect(foundLength).toBe(0);
+  });
+});
+
+describe('DocViewTable at Discover Context', () => {
+  // here no toggleColumnButtons  are rendered
+  const hit = {
+    _index: 'logstash-2014.09.09',
+    _type: 'doc',
+    _id: 'id123',
+    _score: 1,
+    _source: {
+      message:
+        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. \
+        Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus \
+        et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, \
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. \
+        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, \
+        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. \
+        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. \
+        Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut',
+    },
+  };
+  const props = {
+    hit,
+    columns: ['extension'],
+    indexPattern,
+    filter: jest.fn(),
+  };
+
+  const component = mount(<DocViewTable {...props} />);
+
+  it(`renders no toggleColumnButton`, () => {
+    const foundLength = findTestSubject(component, 'toggleColumnButtons').length;
+    expect(foundLength).toBe(0);
+  });
+
+  it(`renders addInclusiveFilterButton`, () => {
+    const row = findTestSubject(component, `tableDocViewRow-_index`);
+    const btn = findTestSubject(row, 'addInclusiveFilterButton');
+    expect(btn.length).toBe(1);
+    btn.simulate('click');
+    expect(props.filter).toBeCalled();
+  });
+
+  it(`renders functional collapse button`, () => {
+    const btn = findTestSubject(component, `collapseBtn`);
+    const html = component.html();
+
+    expect(component.html()).toContain('truncate-by-height');
+
+    expect(btn.length).toBe(1);
+    btn.simulate('click');
+    expect(component.html() !== html).toBeTruthy();
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/table/table.tsx b/src/plugins/discover_legacy/public/application/components/table/table.tsx
new file mode 100644
index 000000000000..90167a515985
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table.tsx
@@ -0,0 +1,149 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React, { useState } from 'react';
+import { escapeRegExp } from 'lodash';
+import { DocViewTableRow } from './table_row';
+import { arrayContainsObjects, trimAngularSpan } from './table_helper';
+import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+
+const COLLAPSE_LINE_LENGTH = 350;
+
+export function DocViewTable({
+  hit,
+  indexPattern,
+  filter,
+  columns,
+  onAddColumn,
+  onRemoveColumn,
+}: DocViewRenderProps) {
+  const mapping = indexPattern.fields.getByName;
+  const flattened = indexPattern.flattenHit(hit);
+  const formatted = indexPattern.formatHit(hit, 'html');
+  const [fieldRowOpen, setFieldRowOpen] = useState({} as Record<string, boolean>);
+
+  function toggleValueCollapse(field: string) {
+    fieldRowOpen[field] = fieldRowOpen[field] !== true;
+    setFieldRowOpen({ ...fieldRowOpen });
+  }
+
+  return (
+    <table className="table table-condensed osdDocViewerTable">
+      <tbody>
+        {Object.keys(flattened)
+          .sort()
+          .map((field) => {
+            const valueRaw = flattened[field];
+            const value = trimAngularSpan(String(formatted[field]));
+
+            const isCollapsible = value.length > COLLAPSE_LINE_LENGTH;
+            const isCollapsed = isCollapsible && !fieldRowOpen[field];
+            const toggleColumn =
+              onRemoveColumn && onAddColumn && Array.isArray(columns)
+                ? () => {
+                    if (columns.includes(field)) {
+                      onRemoveColumn(field);
+                    } else {
+                      onAddColumn(field);
+                    }
+                  }
+                : undefined;
+            const isArrayOfObjects =
+              Array.isArray(flattened[field]) && arrayContainsObjects(flattened[field]);
+            const displayUnderscoreWarning = !mapping(field) && field.indexOf('_') === 0;
+            const displayNoMappingWarning =
+              !mapping(field) && !displayUnderscoreWarning && !isArrayOfObjects;
+
+            // Discover doesn't flatten arrays of objects, so for documents with an `object` or `nested` field that
+            // contains an array, Discover will only detect the top level root field. We want to detect when those
+            // root fields are `nested` so that we can display the proper icon and label. However, those root
+            // `nested` fields are not a part of the index pattern. Their children are though, and contain nested path
+            // info. So to detect nested fields we look through the index pattern for nested children
+            // whose path begins with the current field. There are edge cases where
+            // this could incorrectly identify a plain `object` field as `nested`. Say we had the following document
+            // where `foo` is a plain object field and `bar` is a nested field.
+            // {
+            //   "foo": [
+            //   {
+            //     "bar": [
+            //       {
+            //         "baz": "qux"
+            //       }
+            //     ]
+            //   },
+            //   {
+            //     "bar": [
+            //       {
+            //         "baz": "qux"
+            //       }
+            //     ]
+            //   }
+            // ]
+            // }
+            //
+            // The following code will search for `foo`, find it at the beginning of the path to the nested child field
+            // `foo.bar.baz` and incorrectly mark `foo` as nested. Any time we're searching for the name of a plain object
+            // field that happens to match a segment of a nested path, we'll get a false positive.
+            // We're aware of this issue and we'll have to live with
+            // it in the short term. The long term fix will be to add info about the `nested` and `object` root fields
+            // to the index pattern, but that has its own complications which you can read more about in the following
+            // issue: https://github.com/elastic/kibana/issues/54957
+            const isNestedField =
+              !indexPattern.fields.getByName(field) &&
+              !!indexPattern.fields.getAll().find((patternField) => {
+                // We only want to match a full path segment
+                const nestedRootRegex = new RegExp(escapeRegExp(field) + '(\\.|$)');
+                return nestedRootRegex.test(patternField.subType?.nested?.path ?? '');
+              });
+            const fieldType = isNestedField ? 'nested' : indexPattern.fields.getByName(field)?.type;
+
+            return (
+              <DocViewTableRow
+                key={field}
+                field={field}
+                fieldMapping={mapping(field)}
+                fieldType={String(fieldType)}
+                displayUnderscoreWarning={displayUnderscoreWarning}
+                displayNoMappingWarning={displayNoMappingWarning}
+                isCollapsed={isCollapsed}
+                isCollapsible={isCollapsible}
+                isColumnActive={Array.isArray(columns) && columns.includes(field)}
+                onFilter={filter}
+                onToggleCollapse={() => toggleValueCollapse(field)}
+                onToggleColumn={toggleColumn}
+                value={value}
+                valueRaw={valueRaw}
+              />
+            );
+          })}
+      </tbody>
+    </table>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_helper.test.ts b/src/plugins/discover_legacy/public/application/components/table/table_helper.test.ts
new file mode 100644
index 000000000000..20c1092ef86d
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_helper.test.ts
@@ -0,0 +1,58 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { arrayContainsObjects } from './table_helper';
+
+describe('arrayContainsObjects', () => {
+  it(`returns false for an array of primitives`, () => {
+    const actual = arrayContainsObjects(['test', 'test']);
+    expect(actual).toBeFalsy();
+  });
+
+  it(`returns true for an array of objects`, () => {
+    const actual = arrayContainsObjects([{}, {}]);
+    expect(actual).toBeTruthy();
+  });
+
+  it(`returns true for an array of objects and primitves`, () => {
+    const actual = arrayContainsObjects([{}, 'sdf']);
+    expect(actual).toBeTruthy();
+  });
+
+  it(`returns false for an array of null values`, () => {
+    const actual = arrayContainsObjects([null, null]);
+    expect(actual).toBeFalsy();
+  });
+
+  it(`returns false if no array is given`, () => {
+    const actual = arrayContainsObjects([null, null]);
+    expect(actual).toBeFalsy();
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_helper.tsx b/src/plugins/discover_legacy/public/application/components/table/table_helper.tsx
new file mode 100644
index 000000000000..2e63b43b8310
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_helper.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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.
+ */
+
+/**
+ * Returns true if the given array contains at least 1 object
+ */
+export function arrayContainsObjects(value: unknown[]): boolean {
+  return Array.isArray(value) && value.some((v) => typeof v === 'object' && v !== null);
+}
+
+/**
+ * Removes markup added by OpenSearch Dashboards fields html formatter
+ */
+export function trimAngularSpan(text: string): string {
+  return text.replace(/^<span ng-non-bindable>/, '').replace(/<\/span>$/, '');
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row.tsx
new file mode 100644
index 000000000000..95ba38106e3e
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row.tsx
@@ -0,0 +1,129 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import { FieldMapping, DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { DocViewTableRowBtnFilterAdd } from './table_row_btn_filter_add';
+import { DocViewTableRowBtnFilterRemove } from './table_row_btn_filter_remove';
+import { DocViewTableRowBtnToggleColumn } from './table_row_btn_toggle_column';
+import { DocViewTableRowBtnCollapse } from './table_row_btn_collapse';
+import { DocViewTableRowBtnFilterExists } from './table_row_btn_filter_exists';
+import { DocViewTableRowIconNoMapping } from './table_row_icon_no_mapping';
+import { DocViewTableRowIconUnderscore } from './table_row_icon_underscore';
+import { FieldName } from '../field_name/field_name';
+
+export interface Props {
+  field: string;
+  fieldMapping?: FieldMapping;
+  fieldType: string;
+  displayNoMappingWarning: boolean;
+  displayUnderscoreWarning: boolean;
+  isCollapsible: boolean;
+  isColumnActive: boolean;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  onFilter?: DocViewFilterFn;
+  onToggleColumn?: () => void;
+  value: string | ReactNode;
+  valueRaw: unknown;
+}
+
+export function DocViewTableRow({
+  field,
+  fieldMapping,
+  fieldType,
+  displayNoMappingWarning,
+  displayUnderscoreWarning,
+  isCollapsible,
+  isCollapsed,
+  isColumnActive,
+  onFilter,
+  onToggleCollapse,
+  onToggleColumn,
+  value,
+  valueRaw,
+}: Props) {
+  const valueClassName = classNames({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    osdDocViewer__value: true,
+    'truncate-by-height': isCollapsible && isCollapsed,
+  });
+
+  return (
+    <tr key={field} data-test-subj={`tableDocViewRow-${field}`}>
+      {typeof onFilter === 'function' && (
+        <td className="osdDocViewer__buttons">
+          <DocViewTableRowBtnFilterAdd
+            disabled={!fieldMapping || !fieldMapping.filterable}
+            onClick={() => onFilter(fieldMapping, valueRaw, '+')}
+          />
+          <DocViewTableRowBtnFilterRemove
+            disabled={!fieldMapping || !fieldMapping.filterable}
+            onClick={() => onFilter(fieldMapping, valueRaw, '-')}
+          />
+          {typeof onToggleColumn === 'function' && (
+            <DocViewTableRowBtnToggleColumn active={isColumnActive} onClick={onToggleColumn} />
+          )}
+          <DocViewTableRowBtnFilterExists
+            disabled={!fieldMapping || !fieldMapping.filterable}
+            onClick={() => onFilter('_exists_', field, '+')}
+            scripted={fieldMapping && fieldMapping.scripted}
+          />
+        </td>
+      )}
+      <td className="osdDocViewer__field">
+        <FieldName
+          fieldName={field}
+          fieldType={fieldType}
+          fieldIconProps={{ fill: 'none', color: 'gray' }}
+          scripted={Boolean(fieldMapping?.scripted)}
+        />
+      </td>
+      <td>
+        {isCollapsible && (
+          <DocViewTableRowBtnCollapse onClick={onToggleCollapse} isCollapsed={isCollapsed} />
+        )}
+        {displayUnderscoreWarning && <DocViewTableRowIconUnderscore />}
+        {displayNoMappingWarning && <DocViewTableRowIconNoMapping />}
+        <div
+          className={valueClassName}
+          data-test-subj={`tableDocViewRow-${field}-value`}
+          /*
+           * Justification for dangerouslySetInnerHTML:
+           * We just use values encoded by our field formatters
+           */
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: value as string }}
+        />
+      </td>
+    </tr>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row_btn_collapse.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_collapse.tsx
new file mode 100644
index 000000000000..de25c73e9c95
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_collapse.tsx
@@ -0,0 +1,56 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+
+export interface Props {
+  onClick: () => void;
+  isCollapsed: boolean;
+}
+
+export function DocViewTableRowBtnCollapse({ onClick, isCollapsed }: Props) {
+  const label = i18n.translate('discover.docViews.table.toggleFieldDetails', {
+    defaultMessage: 'Toggle field details',
+  });
+  return (
+    <EuiToolTip content={label}>
+      <EuiButtonIcon
+        aria-expanded={!isCollapsed}
+        aria-label={label}
+        data-test-subj="collapseBtn"
+        onClick={() => onClick()}
+        iconType={isCollapsed ? 'arrowRight' : 'arrowDown'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_add.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_add.tsx
new file mode 100644
index 000000000000..1707861faf28
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_add.tsx
@@ -0,0 +1,69 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export interface Props {
+  onClick: () => void;
+  disabled: boolean;
+}
+
+export function DocViewTableRowBtnFilterAdd({ onClick, disabled = false }: Props) {
+  const tooltipContent = disabled ? (
+    <FormattedMessage
+      id="discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip"
+      defaultMessage="Unindexed fields can not be searched"
+    />
+  ) : (
+    <FormattedMessage
+      id="discover.docViews.table.filterForValueButtonTooltip"
+      defaultMessage="Filter for value"
+    />
+  );
+
+  return (
+    <EuiToolTip content={tooltipContent}>
+      <EuiButtonIcon
+        aria-label={i18n.translate('discover.docViews.table.filterForValueButtonAriaLabel', {
+          defaultMessage: 'Filter for value',
+        })}
+        className="osdDocViewer__actionButton"
+        data-test-subj="addInclusiveFilterButton"
+        disabled={disabled}
+        onClick={onClick}
+        iconType={'magnifyWithPlus'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_exists.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_exists.tsx
new file mode 100644
index 000000000000..d4f401282e14
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_exists.tsx
@@ -0,0 +1,81 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export interface Props {
+  onClick: () => void;
+  disabled?: boolean;
+  scripted?: boolean;
+}
+
+export function DocViewTableRowBtnFilterExists({
+  onClick,
+  disabled = false,
+  scripted = false,
+}: Props) {
+  const tooltipContent = disabled ? (
+    scripted ? (
+      <FormattedMessage
+        id="discover.docViews.table.unableToFilterForPresenceOfScriptedFieldsTooltip"
+        defaultMessage="Unable to filter for presence of scripted fields"
+      />
+    ) : (
+      <FormattedMessage
+        id="discover.docViews.table.unableToFilterForPresenceOfMetaFieldsTooltip"
+        defaultMessage="Unable to filter for presence of meta fields"
+      />
+    )
+  ) : (
+    <FormattedMessage
+      id="discover.docViews.table.filterForFieldPresentButtonTooltip"
+      defaultMessage="Filter for field present"
+    />
+  );
+
+  return (
+    <EuiToolTip content={tooltipContent}>
+      <EuiButtonIcon
+        aria-label={i18n.translate('discover.docViews.table.filterForFieldPresentButtonAriaLabel', {
+          defaultMessage: 'Filter for field present',
+        })}
+        onClick={onClick}
+        className="osdDocViewer__actionButton"
+        data-test-subj="addExistsFilterButton"
+        disabled={disabled}
+        iconType={'indexOpen'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_remove.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_remove.tsx
new file mode 100644
index 000000000000..3b58fbfdc282
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_filter_remove.tsx
@@ -0,0 +1,69 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export interface Props {
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export function DocViewTableRowBtnFilterRemove({ onClick, disabled = false }: Props) {
+  const tooltipContent = disabled ? (
+    <FormattedMessage
+      id="discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip"
+      defaultMessage="Unindexed fields can not be searched"
+    />
+  ) : (
+    <FormattedMessage
+      id="discover.docViews.table.filterOutValueButtonTooltip"
+      defaultMessage="Filter out value"
+    />
+  );
+
+  return (
+    <EuiToolTip content={tooltipContent}>
+      <EuiButtonIcon
+        aria-label={i18n.translate('discover.docViews.table.filterOutValueButtonAriaLabel', {
+          defaultMessage: 'Filter out value',
+        })}
+        className="osdDocViewer__actionButton"
+        data-test-subj="removeInclusiveFilterButton"
+        disabled={disabled}
+        onClick={onClick}
+        iconType={'magnifyWithMinus'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row_btn_toggle_column.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_toggle_column.tsx
new file mode 100644
index 000000000000..74f0972fa0ee
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_toggle_column.tsx
@@ -0,0 +1,79 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export interface Props {
+  active: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export function DocViewTableRowBtnToggleColumn({ onClick, active, disabled = false }: Props) {
+  if (disabled) {
+    return (
+      <EuiButtonIcon
+        aria-label={i18n.translate('discover.docViews.table.toggleColumnInTableButtonAriaLabel', {
+          defaultMessage: 'Toggle column in table',
+        })}
+        className="osdDocViewer__actionButton"
+        data-test-subj="toggleColumnButton"
+        disabled
+        iconType={'tableOfContents'}
+        iconSize={'s'}
+      />
+    );
+  }
+  return (
+    <EuiToolTip
+      content={
+        <FormattedMessage
+          id="discover.docViews.table.toggleColumnInTableButtonTooltip"
+          defaultMessage="Toggle column in table"
+        />
+      }
+    >
+      <EuiButtonIcon
+        aria-label={i18n.translate('discover.docViews.table.toggleColumnInTableButtonAriaLabel', {
+          defaultMessage: 'Toggle column in table',
+        })}
+        aria-pressed={active}
+        onClick={onClick}
+        className="osdDocViewer__actionButton"
+        data-test-subj="toggleColumnButton"
+        iconType={'tableOfContents'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row_icon_no_mapping.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row_icon_no_mapping.tsx
new file mode 100644
index 000000000000..edc4bea91bd8
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row_icon_no_mapping.tsx
@@ -0,0 +1,59 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiIconTip } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export function DocViewTableRowIconNoMapping() {
+  const ariaLabel = i18n.translate('discover.docViews.table.noCachedMappingForThisFieldAriaLabel', {
+    defaultMessage: 'Warning',
+  });
+  const tooltipContent = i18n.translate(
+    'discover.docViews.table.noCachedMappingForThisFieldTooltip',
+    {
+      defaultMessage:
+        'No cached mapping for this field. Refresh field list from the Management > Index Patterns page',
+    }
+  );
+  return (
+    <EuiIconTip
+      aria-label={ariaLabel}
+      color="warning"
+      content={tooltipContent}
+      iconProps={{
+        className: 'osdDocViewer__warning',
+        'data-test-subj': 'noMappingWarning',
+      }}
+      size="s"
+      type="alert"
+    />
+  );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row_icon_underscore.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row_icon_underscore.tsx
new file mode 100644
index 000000000000..f1d09e2c8d44
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row_icon_underscore.tsx
@@ -0,0 +1,63 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiIconTip } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export function DocViewTableRowIconUnderscore() {
+  const ariaLabel = i18n.translate(
+    'discover.docViews.table.fieldNamesBeginningWithUnderscoreUnsupportedAriaLabel',
+    {
+      defaultMessage: 'Warning',
+    }
+  );
+  const tooltipContent = i18n.translate(
+    'discover.docViews.table.fieldNamesBeginningWithUnderscoreUnsupportedTooltip',
+    {
+      defaultMessage: 'Field names beginning with {underscoreSign} are not supported',
+      values: { underscoreSign: '_' },
+    }
+  );
+
+  return (
+    <EuiIconTip
+      aria-label={ariaLabel}
+      content={tooltipContent}
+      color="warning"
+      iconProps={{
+        className: 'osdDocViewer__warning',
+        'data-test-subj': 'underscoreWarning',
+      }}
+      size="s"
+      type="alert"
+    />
+  );
+}
diff --git a/src/plugins/discover/public/application/components/timechart_header/index.ts b/src/plugins/discover_legacy/public/application/components/timechart_header/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/components/timechart_header/index.ts
rename to src/plugins/discover_legacy/public/application/components/timechart_header/index.ts
diff --git a/src/plugins/discover_legacy/public/application/components/timechart_header/timechart_header.test.tsx b/src/plugins/discover_legacy/public/application/components/timechart_header/timechart_header.test.tsx
new file mode 100644
index 000000000000..9011c38a6acb
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/timechart_header/timechart_header.test.tsx
@@ -0,0 +1,110 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ReactWrapper } from 'enzyme';
+import { TimechartHeader, TimechartHeaderProps } from './timechart_header';
+import { EuiIconTip } from '@elastic/eui';
+import { findTestSubject } from 'test_utils/helpers';
+
+describe('timechart header', function () {
+  let props: TimechartHeaderProps;
+  let component: ReactWrapper<TimechartHeaderProps>;
+
+  beforeAll(() => {
+    props = {
+      timeRange: {
+        from: 'May 14, 2020 @ 11:05:13.590',
+        to: 'May 14, 2020 @ 11:20:13.590',
+      },
+      stateInterval: 's',
+      options: [
+        {
+          display: 'Auto',
+          val: 'auto',
+        },
+        {
+          display: 'Millisecond',
+          val: 'ms',
+        },
+        {
+          display: 'Second',
+          val: 's',
+        },
+      ],
+      onChangeInterval: jest.fn(),
+      bucketInterval: {
+        scaled: undefined,
+        description: 'second',
+        scale: undefined,
+      },
+    };
+  });
+
+  it('TimechartHeader not renders an info text when the showScaledInfo property is not provided', () => {
+    component = mountWithIntl(<TimechartHeader {...props} />);
+    expect(component.find(EuiIconTip).length).toBe(0);
+  });
+
+  it('TimechartHeader renders an info when bucketInterval.scale is set to true', () => {
+    props.bucketInterval!.scaled = true;
+    component = mountWithIntl(<TimechartHeader {...props} />);
+    expect(component.find(EuiIconTip).length).toBe(1);
+  });
+
+  it('expect to render the date range', function () {
+    component = mountWithIntl(<TimechartHeader {...props} />);
+    const datetimeRangeText = findTestSubject(component, 'discoverIntervalDateRange');
+    expect(datetimeRangeText.text()).toBe(
+      'May 14, 2020 @ 11:05:13.590 - May 14, 2020 @ 11:20:13.590 per'
+    );
+  });
+
+  it('expects to render a dropdown with the interval options', () => {
+    component = mountWithIntl(<TimechartHeader {...props} />);
+    const dropdown = findTestSubject(component, 'discoverIntervalSelect');
+    expect(dropdown.length).toBe(1);
+    // @ts-ignore
+    const values = dropdown.find('option').map((option) => option.prop('value'));
+    expect(values).toEqual(['auto', 'ms', 's']);
+    // @ts-ignore
+    const labels = dropdown.find('option').map((option) => option.text());
+    expect(labels).toEqual(['Auto', 'Millisecond', 'Second']);
+  });
+
+  it('should change the interval', function () {
+    component = mountWithIntl(<TimechartHeader {...props} />);
+    findTestSubject(component, 'discoverIntervalSelect').simulate('change', {
+      target: { value: 'ms' },
+    });
+    expect(props.onChangeInterval).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/discover/public/application/components/timechart_header/timechart_header.tsx b/src/plugins/discover_legacy/public/application/components/timechart_header/timechart_header.tsx
similarity index 100%
rename from src/plugins/discover/public/application/components/timechart_header/timechart_header.tsx
rename to src/plugins/discover_legacy/public/application/components/timechart_header/timechart_header.tsx
diff --git a/src/plugins/discover_legacy/public/application/components/top_nav/__snapshots__/open_search_panel.test.js.snap b/src/plugins/discover_legacy/public/application/components/top_nav/__snapshots__/open_search_panel.test.js.snap
new file mode 100644
index 000000000000..342dea206c30
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/top_nav/__snapshots__/open_search_panel.test.js.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render 1`] = `
+<EuiFlyout
+  data-test-subj="loadSearchForm"
+  onClose={[Function]}
+  ownFocus={true}
+>
+  <EuiFlyoutHeader
+    hasBorder={true}
+  >
+    <EuiTitle
+      size="m"
+    >
+      <h2>
+        <FormattedMessage
+          defaultMessage="Open search"
+          id="discover.topNav.openSearchPanel.openSearchTitle"
+          values={Object {}}
+        />
+      </h2>
+    </EuiTitle>
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <SavedObjectFinderUi
+      noItemsMessage={
+        <FormattedMessage
+          defaultMessage="No matching searches found."
+          id="discover.topNav.openSearchPanel.noSearchesFoundDescription"
+          values={Object {}}
+        />
+      }
+      onChoose={[Function]}
+      savedObjectMetaData={
+        Array [
+          Object {
+            "getIconForSavedObject": [Function],
+            "name": "Saved search",
+            "type": "search",
+          },
+        ]
+      }
+      savedObjects={Object {}}
+      uiSettings={Object {}}
+    />
+  </EuiFlyoutBody>
+  <EuiFlyoutFooter>
+    <EuiFlexGroup
+      justifyContent="flexEnd"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButton
+          fill={true}
+          href="/app/management/opensearch-dashboards/objects?_a=(tab:search)"
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Manage searches"
+            id="discover.topNav.openSearchPanel.manageSearchesButtonLabel"
+            values={Object {}}
+          />
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlyoutFooter>
+</EuiFlyout>
+`;
diff --git a/src/plugins/discover/public/application/components/top_nav/open_search_panel.js b/src/plugins/discover_legacy/public/application/components/top_nav/open_search_panel.js
similarity index 100%
rename from src/plugins/discover/public/application/components/top_nav/open_search_panel.js
rename to src/plugins/discover_legacy/public/application/components/top_nav/open_search_panel.js
diff --git a/src/plugins/discover/public/application/components/top_nav/open_search_panel.test.js b/src/plugins/discover_legacy/public/application/components/top_nav/open_search_panel.test.js
similarity index 100%
rename from src/plugins/discover/public/application/components/top_nav/open_search_panel.test.js
rename to src/plugins/discover_legacy/public/application/components/top_nav/open_search_panel.test.js
diff --git a/src/plugins/discover/public/application/components/top_nav/show_open_search_panel.js b/src/plugins/discover_legacy/public/application/components/top_nav/show_open_search_panel.js
similarity index 100%
rename from src/plugins/discover/public/application/components/top_nav/show_open_search_panel.js
rename to src/plugins/discover_legacy/public/application/components/top_nav/show_open_search_panel.js
diff --git a/src/plugins/discover/public/application/doc_views/doc_views_helpers.tsx b/src/plugins/discover_legacy/public/application/doc_views/doc_views_helpers.tsx
similarity index 100%
rename from src/plugins/discover/public/application/doc_views/doc_views_helpers.tsx
rename to src/plugins/discover_legacy/public/application/doc_views/doc_views_helpers.tsx
diff --git a/src/plugins/discover_legacy/public/application/doc_views/doc_views_registry.ts b/src/plugins/discover_legacy/public/application/doc_views/doc_views_registry.ts
new file mode 100644
index 000000000000..56f167b5f2cc
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/doc_views/doc_views_registry.ts
@@ -0,0 +1,70 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { auto } from 'angular';
+import { convertDirectiveToRenderFn } from './doc_views_helpers';
+import { DocView, DocViewInput, OpenSearchSearchHit, DocViewInputFn } from './doc_views_types';
+
+export class DocViewsRegistry {
+  private docViews: DocView[] = [];
+  private angularInjectorGetter: (() => Promise<auto.IInjectorService>) | null = null;
+
+  setAngularInjectorGetter = (injectorGetter: () => Promise<auto.IInjectorService>) => {
+    this.angularInjectorGetter = injectorGetter;
+  };
+
+  /**
+   * Extends and adds the given doc view to the registry array
+   */
+  addDocView(docViewRaw: DocViewInput | DocViewInputFn) {
+    const docView = typeof docViewRaw === 'function' ? docViewRaw() : docViewRaw;
+    if (docView.directive) {
+      // convert angular directive to render function for backwards compatibility
+      docView.render = convertDirectiveToRenderFn(docView.directive, () => {
+        if (!this.angularInjectorGetter) {
+          throw new Error('Angular was not initialized');
+        }
+        return this.angularInjectorGetter();
+      });
+    }
+    if (typeof docView.shouldShow !== 'function') {
+      docView.shouldShow = () => true;
+    }
+    this.docViews.push(docView as DocView);
+  }
+  /**
+   * Returns a sorted array of doc_views for rendering tabs
+   */
+  getDocViewsSorted(hit: OpenSearchSearchHit) {
+    return this.docViews
+      .filter((docView) => docView.shouldShow(hit))
+      .sort((a, b) => (Number(a.order) > Number(b.order) ? 1 : -1));
+  }
+}
diff --git a/src/plugins/discover_legacy/public/application/doc_views/doc_views_types.ts b/src/plugins/discover_legacy/public/application/doc_views/doc_views_types.ts
new file mode 100644
index 000000000000..961fc98516f6
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/doc_views/doc_views_types.ts
@@ -0,0 +1,86 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { ComponentType } from 'react';
+import { IScope } from 'angular';
+import { SearchResponse } from 'elasticsearch';
+import { IndexPattern } from '../../../../data/public';
+
+export interface AngularDirective {
+  controller: (...injectedServices: any[]) => void;
+  template: string;
+}
+
+export type AngularScope = IScope;
+
+export type OpenSearchSearchHit<T = unknown> = SearchResponse<T>['hits']['hits'][number];
+
+export interface FieldMapping {
+  filterable?: boolean;
+  scripted?: boolean;
+  rowCount?: number;
+  type: string;
+  name: string;
+}
+
+export type DocViewFilterFn = (
+  mapping: FieldMapping | string | undefined,
+  value: unknown,
+  mode: '+' | '-'
+) => void;
+
+export interface DocViewRenderProps {
+  columns?: string[];
+  filter?: DocViewFilterFn;
+  hit: OpenSearchSearchHit;
+  indexPattern: IndexPattern;
+  onAddColumn?: (columnName: string) => void;
+  onRemoveColumn?: (columnName: string) => void;
+}
+export type DocViewerComponent = ComponentType<DocViewRenderProps>;
+export type DocViewRenderFn = (
+  domeNode: HTMLDivElement,
+  renderProps: DocViewRenderProps
+) => () => void;
+
+export interface DocViewInput {
+  component?: DocViewerComponent;
+  directive?: AngularDirective;
+  order: number;
+  render?: DocViewRenderFn;
+  shouldShow?: (hit: OpenSearchSearchHit) => boolean;
+  title: string;
+}
+
+export interface DocView extends DocViewInput {
+  shouldShow: (hit: OpenSearchSearchHit) => boolean;
+}
+
+export type DocViewInputFn = () => DocViewInput;
diff --git a/src/plugins/discover_legacy/public/application/doc_views_links/doc_views_links_registry.ts b/src/plugins/discover_legacy/public/application/doc_views_links/doc_views_links_registry.ts
new file mode 100644
index 000000000000..16653f5d5377
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/doc_views_links/doc_views_links_registry.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DocViewLink } from './doc_views_links_types';
+
+export class DocViewsLinksRegistry {
+  private docViewsLinks: DocViewLink[] = [];
+
+  addDocViewLink(docViewLink: DocViewLink) {
+    this.docViewsLinks.push(docViewLink);
+  }
+
+  getDocViewsLinksSorted() {
+    return this.docViewsLinks.sort((a, b) => (Number(a.order) > Number(b.order) ? 1 : -1));
+  }
+}
diff --git a/src/plugins/discover_legacy/public/application/doc_views_links/doc_views_links_types.ts b/src/plugins/discover_legacy/public/application/doc_views_links/doc_views_links_types.ts
new file mode 100644
index 000000000000..bbc5caadafcd
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/doc_views_links/doc_views_links_types.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiListGroupItemProps } from '@elastic/eui';
+import { OpenSearchSearchHit } from '../doc_views/doc_views_types';
+import { IndexPattern } from '../../../../data/public';
+
+export interface DocViewLink extends EuiListGroupItemProps {
+  href?: string;
+  order: number;
+  generateCb?(
+    renderProps: any
+  ): {
+    url: string;
+    hide?: boolean;
+  };
+}
+
+export interface DocViewLinkRenderProps {
+  columns?: string[];
+  hit: OpenSearchSearchHit;
+  indexPattern: IndexPattern;
+}
diff --git a/src/plugins/discover/public/application/embeddable/constants.ts b/src/plugins/discover_legacy/public/application/embeddable/constants.ts
similarity index 100%
rename from src/plugins/discover/public/application/embeddable/constants.ts
rename to src/plugins/discover_legacy/public/application/embeddable/constants.ts
diff --git a/src/plugins/discover/public/application/embeddable/index.ts b/src/plugins/discover_legacy/public/application/embeddable/index.ts
similarity index 100%
rename from src/plugins/discover/public/application/embeddable/index.ts
rename to src/plugins/discover_legacy/public/application/embeddable/index.ts
diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable.scss b/src/plugins/discover_legacy/public/application/embeddable/search_embeddable.scss
similarity index 100%
rename from src/plugins/discover/public/application/embeddable/search_embeddable.scss
rename to src/plugins/discover_legacy/public/application/embeddable/search_embeddable.scss
diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable.ts b/src/plugins/discover_legacy/public/application/embeddable/search_embeddable.ts
similarity index 100%
rename from src/plugins/discover/public/application/embeddable/search_embeddable.ts
rename to src/plugins/discover_legacy/public/application/embeddable/search_embeddable.ts
diff --git a/src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts b/src/plugins/discover_legacy/public/application/embeddable/search_embeddable_factory.ts
similarity index 100%
rename from src/plugins/discover/public/application/embeddable/search_embeddable_factory.ts
rename to src/plugins/discover_legacy/public/application/embeddable/search_embeddable_factory.ts
diff --git a/src/plugins/discover/public/application/embeddable/search_template.html b/src/plugins/discover_legacy/public/application/embeddable/search_template.html
similarity index 100%
rename from src/plugins/discover/public/application/embeddable/search_template.html
rename to src/plugins/discover_legacy/public/application/embeddable/search_template.html
diff --git a/src/plugins/discover/public/application/embeddable/types.ts b/src/plugins/discover_legacy/public/application/embeddable/types.ts
similarity index 100%
rename from src/plugins/discover/public/application/embeddable/types.ts
rename to src/plugins/discover_legacy/public/application/embeddable/types.ts
diff --git a/src/plugins/discover_legacy/public/application/helpers/breadcrumbs.ts b/src/plugins/discover_legacy/public/application/helpers/breadcrumbs.ts
new file mode 100644
index 000000000000..e30f50206aef
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/breadcrumbs.ts
@@ -0,0 +1,51 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+
+export function getRootBreadcrumbs() {
+  return [
+    {
+      text: i18n.translate('discover.rootBreadcrumb', {
+        defaultMessage: 'Discover',
+      }),
+      href: '#/',
+    },
+  ];
+}
+
+export function getSavedSearchBreadcrumbs($route: any) {
+  return [
+    ...getRootBreadcrumbs(),
+    {
+      text: $route.current.locals.savedObjects.savedSearch.id,
+    },
+  ];
+}
diff --git a/src/plugins/discover_legacy/public/application/helpers/format_number_with_commas.ts b/src/plugins/discover_legacy/public/application/helpers/format_number_with_commas.ts
new file mode 100644
index 000000000000..b1b3c96e0958
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/format_number_with_commas.ts
@@ -0,0 +1,38 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 COMMA_SEPARATOR_RE = /(\d)(?=(\d{3})+(?!\d))/g;
+
+/**
+ * Converts a number to a string and adds commas
+ * as thousands separators
+ */
+export const formatNumWithCommas = (input: number) =>
+  String(input).replace(COMMA_SEPARATOR_RE, '$1,');
diff --git a/src/plugins/discover_legacy/public/application/helpers/get_index_pattern_id.ts b/src/plugins/discover_legacy/public/application/helpers/get_index_pattern_id.ts
new file mode 100644
index 000000000000..dfb02c0b0740
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/get_index_pattern_id.ts
@@ -0,0 +1,71 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { IIndexPattern } from '../../../../data/common/index_patterns';
+
+export function findIndexPatternById(
+  indexPatterns: IIndexPattern[],
+  id: string
+): IIndexPattern | undefined {
+  if (!Array.isArray(indexPatterns) || !id) {
+    return;
+  }
+  return indexPatterns.find((o) => o.id === id);
+}
+
+/**
+ * Checks if the given defaultIndex exists and returns
+ * the first available index pattern id if not
+ */
+export function getFallbackIndexPatternId(
+  indexPatterns: IIndexPattern[],
+  defaultIndex: string = ''
+): string {
+  if (defaultIndex && findIndexPatternById(indexPatterns, defaultIndex)) {
+    return defaultIndex;
+  }
+  return !indexPatterns || !indexPatterns.length || !indexPatterns[0].id ? '' : indexPatterns[0].id;
+}
+
+/**
+ * A given index pattern id is checked for existence and a fallback is provided if it doesn't exist
+ * The provided defaultIndex is usually configured in Advanced Settings, if it's also invalid
+ * the first entry of the given list of Indexpatterns is used
+ */
+export function getIndexPatternId(
+  id: string = '',
+  indexPatterns: IIndexPattern[],
+  defaultIndex: string = ''
+): string {
+  if (!id || !findIndexPatternById(indexPatterns, id)) {
+    return getFallbackIndexPatternId(indexPatterns, defaultIndex);
+  }
+  return id;
+}
diff --git a/src/plugins/discover/public/application/helpers/get_switch_index_pattern_app_state.test.ts b/src/plugins/discover_legacy/public/application/helpers/get_switch_index_pattern_app_state.test.ts
similarity index 100%
rename from src/plugins/discover/public/application/helpers/get_switch_index_pattern_app_state.test.ts
rename to src/plugins/discover_legacy/public/application/helpers/get_switch_index_pattern_app_state.test.ts
diff --git a/src/plugins/discover/public/application/helpers/get_switch_index_pattern_app_state.ts b/src/plugins/discover_legacy/public/application/helpers/get_switch_index_pattern_app_state.ts
similarity index 100%
rename from src/plugins/discover/public/application/helpers/get_switch_index_pattern_app_state.ts
rename to src/plugins/discover_legacy/public/application/helpers/get_switch_index_pattern_app_state.ts
diff --git a/src/plugins/discover_legacy/public/application/helpers/index.ts b/src/plugins/discover_legacy/public/application/helpers/index.ts
new file mode 100644
index 000000000000..d765fdf60cee
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/index.ts
@@ -0,0 +1,32 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { shortenDottedString } from './shorten_dotted_string';
+export { formatNumWithCommas } from './format_number_with_commas';
diff --git a/src/plugins/discover_legacy/public/application/helpers/migrate_legacy_query.ts b/src/plugins/discover_legacy/public/application/helpers/migrate_legacy_query.ts
new file mode 100644
index 000000000000..90458c135b98
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/migrate_legacy_query.ts
@@ -0,0 +1,48 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { has } from 'lodash';
+import { Query } from 'src/plugins/data/public';
+
+/**
+ * Creates a standardized query object from old queries that were either strings or pure OpenSearch query DSL
+ *
+ * @param query - a legacy query, what used to be stored in SearchSource's query property
+ * @return Object
+ */
+
+export function migrateLegacyQuery(query: Query | { [key: string]: any } | string): Query {
+  // Lucene was the only option before, so language-less queries are all lucene
+  if (!has(query, 'language')) {
+    return { query, language: 'lucene' };
+  }
+
+  return query as Query;
+}
diff --git a/src/plugins/discover_legacy/public/application/helpers/popularize_field.test.ts b/src/plugins/discover_legacy/public/application/helpers/popularize_field.test.ts
new file mode 100644
index 000000000000..cdd49c0f77f1
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/popularize_field.test.ts
@@ -0,0 +1,93 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { IndexPattern, IndexPatternsService } from '../../../../data/public';
+import { popularizeField } from './popularize_field';
+
+describe('Popularize field', () => {
+  test('returns undefined if index pattern lacks id', async () => {
+    const indexPattern = ({} as unknown) as IndexPattern;
+    const fieldName = '@timestamp';
+    const indexPatternsService = ({} as unknown) as IndexPatternsService;
+    const result = await popularizeField(indexPattern, fieldName, indexPatternsService);
+    expect(result).toBeUndefined();
+  });
+
+  test('returns undefined if field not found', async () => {
+    const indexPattern = ({
+      fields: {
+        getByName: () => {},
+      },
+    } as unknown) as IndexPattern;
+    const fieldName = '@timestamp';
+    const indexPatternsService = ({} as unknown) as IndexPatternsService;
+    const result = await popularizeField(indexPattern, fieldName, indexPatternsService);
+    expect(result).toBeUndefined();
+  });
+
+  test('returns undefined if successful', async () => {
+    const field = {
+      count: 0,
+    };
+    const indexPattern = ({
+      id: 'id',
+      fields: {
+        getByName: () => field,
+      },
+    } as unknown) as IndexPattern;
+    const fieldName = '@timestamp';
+    const indexPatternsService = ({
+      updateSavedObject: async () => {},
+    } as unknown) as IndexPatternsService;
+    const result = await popularizeField(indexPattern, fieldName, indexPatternsService);
+    expect(result).toBeUndefined();
+    expect(field.count).toEqual(1);
+  });
+
+  test('hides errors', async () => {
+    const field = {
+      count: 0,
+    };
+    const indexPattern = ({
+      id: 'id',
+      fields: {
+        getByName: () => field,
+      },
+    } as unknown) as IndexPattern;
+    const fieldName = '@timestamp';
+    const indexPatternsService = ({
+      updateSavedObject: async () => {
+        throw new Error('unknown error');
+      },
+    } as unknown) as IndexPatternsService;
+    const result = await popularizeField(indexPattern, fieldName, indexPatternsService);
+    expect(result).toBeUndefined();
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/helpers/popularize_field.ts b/src/plugins/discover_legacy/public/application/helpers/popularize_field.ts
new file mode 100644
index 000000000000..e7c4b900fa19
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/popularize_field.ts
@@ -0,0 +1,52 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { IndexPattern, IndexPatternsService } from '../../../../data/public';
+
+async function popularizeField(
+  indexPattern: IndexPattern,
+  fieldName: string,
+  indexPatternsService: IndexPatternsService
+) {
+  if (!indexPattern.id) return;
+  const field = indexPattern.fields.getByName(fieldName);
+  if (!field) {
+    return;
+  }
+
+  field.count++;
+  // Catch 409 errors caused by user adding columns in a higher frequency that the changes can be persisted to OpenSearch
+  try {
+    await indexPatternsService.updateSavedObject(indexPattern, 0, true);
+    // eslint-disable-next-line no-empty
+  } catch {}
+}
+
+export { popularizeField };
diff --git a/src/plugins/discover_legacy/public/application/helpers/shorten_dotted_string.ts b/src/plugins/discover_legacy/public/application/helpers/shorten_dotted_string.ts
new file mode 100644
index 000000000000..39450f8c82c0
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/shorten_dotted_string.ts
@@ -0,0 +1,37 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 DOT_PREFIX_RE = /(.).+?\./g;
+
+/**
+ * Convert a dot.notated.string into a short
+ * version (d.n.string)
+ */
+export const shortenDottedString = (input: string) => input.replace(DOT_PREFIX_RE, '$1.');
diff --git a/src/plugins/discover_legacy/public/application/helpers/validate_time_range.test.ts b/src/plugins/discover_legacy/public/application/helpers/validate_time_range.test.ts
new file mode 100644
index 000000000000..902f3d8a4b62
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/validate_time_range.test.ts
@@ -0,0 +1,58 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { validateTimeRange } from './validate_time_range';
+import { notificationServiceMock } from '../../../../../core/public/mocks';
+
+describe('Discover validateTimeRange', () => {
+  test('validates given time ranges correctly', async () => {
+    const { toasts } = notificationServiceMock.createStartContract();
+    [
+      { from: '', to: '', result: false },
+      { from: 'now', to: 'now+1h', result: true },
+      { from: 'now', to: 'lala+1h', result: false },
+      { from: '', to: 'now', result: false },
+      { from: 'now', to: '', result: false },
+      { from: ' 2020-06-02T13:36:13.689Z', to: 'now', result: true },
+      { from: ' 2020-06-02T13:36:13.689Z', to: '2020-06-02T13:36:13.690Z', result: true },
+    ].map((test) => {
+      expect(validateTimeRange({ from: test.from, to: test.to }, toasts)).toEqual(test.result);
+    });
+  });
+
+  test('displays a toast when invalid data is entered', async () => {
+    const { toasts } = notificationServiceMock.createStartContract();
+    expect(validateTimeRange({ from: 'now', to: 'null' }, toasts)).toEqual(false);
+    expect(toasts.addDanger).toHaveBeenCalledWith({
+      title: 'Invalid time range',
+      text: "The provided time range is invalid. (from: 'now', to: 'null')",
+    });
+  });
+});
diff --git a/src/plugins/discover_legacy/public/application/helpers/validate_time_range.ts b/src/plugins/discover_legacy/public/application/helpers/validate_time_range.ts
new file mode 100644
index 000000000000..d23a84aabb14
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/helpers/validate_time_range.ts
@@ -0,0 +1,61 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 dateMath from '@elastic/datemath';
+import { i18n } from '@osd/i18n';
+import { ToastsStart } from 'opensearch-dashboards/public';
+
+/**
+ * Validates a given time filter range, provided by URL or UI
+ * Unless valid, it returns false and displays a notification
+ */
+export function validateTimeRange(
+  { from, to }: { from: string; to: string },
+  toastNotifications: ToastsStart
+): boolean {
+  const fromMoment = dateMath.parse(from);
+  const toMoment = dateMath.parse(to);
+  if (!fromMoment || !toMoment || !fromMoment.isValid() || !toMoment.isValid()) {
+    toastNotifications.addDanger({
+      title: i18n.translate('discover.notifications.invalidTimeRangeTitle', {
+        defaultMessage: `Invalid time range`,
+      }),
+      text: i18n.translate('discover.notifications.invalidTimeRangeText', {
+        defaultMessage: `The provided time range is invalid. (from: '{from}', to: '{to}')`,
+        values: {
+          from,
+          to,
+        },
+      }),
+    });
+    return false;
+  }
+  return true;
+}
diff --git a/src/plugins/discover/public/application/index.scss b/src/plugins/discover_legacy/public/application/index.scss
similarity index 100%
rename from src/plugins/discover/public/application/index.scss
rename to src/plugins/discover_legacy/public/application/index.scss
diff --git a/src/plugins/discover_legacy/public/build_services.ts b/src/plugins/discover_legacy/public/build_services.ts
new file mode 100644
index 000000000000..3fdafcff0c40
--- /dev/null
+++ b/src/plugins/discover_legacy/public/build_services.ts
@@ -0,0 +1,129 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { History } from 'history';
+
+import {
+  Capabilities,
+  ChromeStart,
+  CoreStart,
+  DocLinksStart,
+  ToastsStart,
+  IUiSettingsClient,
+  PluginInitializerContext,
+} from 'opensearch-dashboards/public';
+import {
+  FilterManager,
+  TimefilterContract,
+  IndexPatternsContract,
+  DataPublicPluginStart,
+} from 'src/plugins/data/public';
+import { Start as InspectorPublicPluginStart } from 'src/plugins/inspector/public';
+import { SharePluginStart } from 'src/plugins/share/public';
+import { ChartsPluginStart } from 'src/plugins/charts/public';
+import { VisualizationsStart } from 'src/plugins/visualizations/public';
+import { SavedObjectOpenSearchDashboardsServices } from 'src/plugins/saved_objects/public';
+
+import { DiscoverStartPlugins } from './plugin';
+import { createSavedSearchesLoader, SavedSearch } from './saved_searches';
+import { getHistory } from './opensearch_dashboards_services';
+import { OpenSearchDashboardsLegacyStart } from '../../opensearch_dashboards_legacy/public';
+import { UrlForwardingStart } from '../../url_forwarding/public';
+import { NavigationPublicPluginStart } from '../../navigation/public';
+
+export interface DiscoverServices {
+  addBasePath: (path: string) => string;
+  capabilities: Capabilities;
+  chrome: ChromeStart;
+  core: CoreStart;
+  data: DataPublicPluginStart;
+  docLinks: DocLinksStart;
+  history: () => History;
+  theme: ChartsPluginStart['theme'];
+  filterManager: FilterManager;
+  indexPatterns: IndexPatternsContract;
+  inspector: InspectorPublicPluginStart;
+  metadata: { branch: string };
+  navigation: NavigationPublicPluginStart;
+  share?: SharePluginStart;
+  opensearchDashboardsLegacy: OpenSearchDashboardsLegacyStart;
+  urlForwarding: UrlForwardingStart;
+  timefilter: TimefilterContract;
+  toastNotifications: ToastsStart;
+  getSavedSearchById: (id: string) => Promise<SavedSearch>;
+  getSavedSearchUrlById: (id: string) => Promise<string>;
+  getEmbeddableInjector: any;
+  uiSettings: IUiSettingsClient;
+  visualizations: VisualizationsStart;
+}
+
+export async function buildServices(
+  core: CoreStart,
+  plugins: DiscoverStartPlugins,
+  context: PluginInitializerContext,
+  getEmbeddableInjector: any
+): Promise<DiscoverServices> {
+  const services: SavedObjectOpenSearchDashboardsServices = {
+    savedObjectsClient: core.savedObjects.client,
+    indexPatterns: plugins.data.indexPatterns,
+    search: plugins.data.search,
+    chrome: core.chrome,
+    overlays: core.overlays,
+  };
+  const savedObjectService = createSavedSearchesLoader(services);
+
+  return {
+    addBasePath: core.http.basePath.prepend,
+    capabilities: core.application.capabilities,
+    chrome: core.chrome,
+    core,
+    data: plugins.data,
+    docLinks: core.docLinks,
+    theme: plugins.charts.theme,
+    filterManager: plugins.data.query.filterManager,
+    getEmbeddableInjector,
+    getSavedSearchById: async (id: string) => savedObjectService.get(id),
+    getSavedSearchUrlById: async (id: string) => savedObjectService.urlFor(id),
+    history: getHistory,
+    indexPatterns: plugins.data.indexPatterns,
+    inspector: plugins.inspector,
+    metadata: {
+      branch: context.env.packageInfo.branch,
+    },
+    navigation: plugins.navigation,
+    share: plugins.share,
+    opensearchDashboardsLegacy: plugins.opensearchDashboardsLegacy,
+    urlForwarding: plugins.urlForwarding,
+    timefilter: plugins.data.query.timefilter.timefilter,
+    toastNotifications: core.notifications.toasts,
+    uiSettings: core.uiSettings,
+    visualizations: plugins.visualizations,
+  };
+}
diff --git a/src/plugins/discover/public/get_inner_angular.ts b/src/plugins/discover_legacy/public/get_inner_angular.ts
similarity index 100%
rename from src/plugins/discover/public/get_inner_angular.ts
rename to src/plugins/discover_legacy/public/get_inner_angular.ts
diff --git a/src/plugins/discover_legacy/public/index.ts b/src/plugins/discover_legacy/public/index.ts
new file mode 100644
index 000000000000..6c9ab46b656e
--- /dev/null
+++ b/src/plugins/discover_legacy/public/index.ts
@@ -0,0 +1,41 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { PluginInitializerContext } from 'opensearch-dashboards/public';
+import { DiscoverPlugin } from './plugin';
+
+export { DiscoverSetup, DiscoverStart } from './plugin';
+export function plugin(initializerContext: PluginInitializerContext) {
+  return new DiscoverPlugin(initializerContext);
+}
+
+export { SavedSearch, SavedSearchLoader, createSavedSearchesLoader } from './saved_searches';
+export { ISearchEmbeddable, SEARCH_EMBEDDABLE_TYPE, SearchInput } from './application/embeddable';
+export { DISCOVER_APP_URL_GENERATOR, DiscoverUrlGeneratorState } from './url_generator';
diff --git a/src/plugins/discover_legacy/public/mocks.ts b/src/plugins/discover_legacy/public/mocks.ts
new file mode 100644
index 000000000000..4724ced290ff
--- /dev/null
+++ b/src/plugins/discover_legacy/public/mocks.ts
@@ -0,0 +1,61 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { DiscoverSetup, DiscoverStart } from '.';
+
+export type Setup = jest.Mocked<DiscoverSetup>;
+export type Start = jest.Mocked<DiscoverStart>;
+
+const createSetupContract = (): Setup => {
+  const setupContract: Setup = {
+    docViews: {
+      addDocView: jest.fn(),
+    },
+    docViewsLinks: {
+      addDocViewLink: jest.fn(),
+    },
+  };
+  return setupContract;
+};
+
+const createStartContract = (): Start => {
+  const startContract: Start = {
+    savedSearchLoader: {} as any,
+    urlGenerator: {
+      createUrl: jest.fn(),
+    } as any,
+  };
+  return startContract;
+};
+
+export const discoverPluginMock = {
+  createSetupContract,
+  createStartContract,
+};
diff --git a/src/plugins/discover_legacy/public/opensearch_dashboards_services.ts b/src/plugins/discover_legacy/public/opensearch_dashboards_services.ts
new file mode 100644
index 000000000000..8531564e0cc7
--- /dev/null
+++ b/src/plugins/discover_legacy/public/opensearch_dashboards_services.ts
@@ -0,0 +1,129 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 _ from 'lodash';
+import { createHashHistory } from 'history';
+import { ScopedHistory, AppMountParameters } from 'opensearch-dashboards/public';
+import { UiActionsStart } from 'src/plugins/ui_actions/public';
+import { DiscoverServices } from './build_services';
+import { createGetterSetter } from '../../opensearch_dashboards_utils/public';
+import { search } from '../../data/public';
+import { DocViewsRegistry } from './application/doc_views/doc_views_registry';
+import { DocViewsLinksRegistry } from './application/doc_views_links/doc_views_links_registry';
+
+let angularModule: any = null;
+let services: DiscoverServices | null = null;
+let uiActions: UiActionsStart;
+
+/**
+ * set bootstrapped inner angular module
+ */
+export function setAngularModule(module: any) {
+  angularModule = module;
+}
+
+/**
+ * get boostrapped inner angular module
+ */
+export function getAngularModule() {
+  return angularModule;
+}
+
+export function getServices(): DiscoverServices {
+  if (!services) {
+    throw new Error('Discover services are not yet available');
+  }
+  return services;
+}
+
+export function setServices(newServices: any) {
+  services = newServices;
+}
+
+export const setUiActions = (pluginUiActions: UiActionsStart) => (uiActions = pluginUiActions);
+export const getUiActions = () => uiActions;
+
+export const [getHeaderActionMenuMounter, setHeaderActionMenuMounter] = createGetterSetter<
+  AppMountParameters['setHeaderActionMenu']
+>('headerActionMenuMounter');
+
+export const [getUrlTracker, setUrlTracker] = createGetterSetter<{
+  setTrackedUrl: (url: string) => void;
+  restorePreviousUrl: () => void;
+}>('urlTracker');
+
+export const [getDocViewsRegistry, setDocViewsRegistry] = createGetterSetter<DocViewsRegistry>(
+  'DocViewsRegistry'
+);
+
+export const [getDocViewsLinksRegistry, setDocViewsLinksRegistry] = createGetterSetter<
+  DocViewsLinksRegistry
+>('DocViewsLinksRegistry');
+/**
+ * Makes sure discover and context are using one instance of history.
+ */
+export const getHistory = _.once(() => createHashHistory());
+
+/**
+ * Discover currently uses two `history` instances: one from OpenSearch Dashboards Platform and
+ * another from `history` package. Below function is used every time Discover
+ * app is loaded to synchronize both instances.
+ *
+ * This helper is temporary until https://github.com/elastic/kibana/issues/65161 is resolved.
+ */
+export const syncHistoryLocations = () => {
+  const h = getHistory();
+  Object.assign(h.location, createHashHistory().location);
+  return h;
+};
+
+export const [getScopedHistory, setScopedHistory] = createGetterSetter<ScopedHistory>(
+  'scopedHistory'
+);
+
+export const { getRequestInspectorStats, getResponseInspectorStats, tabifyAggResponse } = search;
+export { unhashUrl, redirectWhenMissing } from '../../opensearch_dashboards_utils/public';
+export {
+  formatMsg,
+  formatStack,
+  subscribeWithScope,
+} from '../../opensearch_dashboards_legacy/public';
+
+// EXPORT types
+export {
+  IndexPatternsContract,
+  IIndexPattern,
+  IndexPattern,
+  indexPatterns,
+  IFieldType,
+  ISearchSource,
+  OpenSearchQuerySortValue,
+  SortDirection,
+} from '../../data/public';
diff --git a/src/plugins/discover_legacy/public/plugin.ts b/src/plugins/discover_legacy/public/plugin.ts
new file mode 100644
index 000000000000..7e855b707891
--- /dev/null
+++ b/src/plugins/discover_legacy/public/plugin.ts
@@ -0,0 +1,487 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+import angular, { auto } from 'angular';
+import { BehaviorSubject } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+
+import {
+  AppMountParameters,
+  AppUpdater,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  PluginInitializerContext,
+} from 'opensearch-dashboards/public';
+import { UiActionsStart, UiActionsSetup } from 'src/plugins/ui_actions/public';
+import { EmbeddableStart, EmbeddableSetup } from 'src/plugins/embeddable/public';
+import { ChartsPluginStart } from 'src/plugins/charts/public';
+import { NavigationPublicPluginStart as NavigationStart } from 'src/plugins/navigation/public';
+import { SharePluginStart, SharePluginSetup, UrlGeneratorContract } from 'src/plugins/share/public';
+import { VisualizationsStart, VisualizationsSetup } from 'src/plugins/visualizations/public';
+import {
+  OpenSearchDashboardsLegacySetup,
+  OpenSearchDashboardsLegacyStart,
+} from 'src/plugins/opensearch_dashboards_legacy/public';
+import { UrlForwardingSetup, UrlForwardingStart } from 'src/plugins/url_forwarding/public';
+import { HomePublicPluginSetup } from 'src/plugins/home/public';
+import { Start as InspectorPublicPluginStart } from 'src/plugins/inspector/public';
+import { stringify } from 'query-string';
+import rison from 'rison-node';
+import { NEW_DISCOVER_APP } from '../../discover/public';
+import { DataPublicPluginStart, DataPublicPluginSetup, opensearchFilters } from '../../data/public';
+import { SavedObjectLoader } from '../../saved_objects/public';
+import { createOsdUrlTracker, url } from '../../opensearch_dashboards_utils/public';
+import { UrlGeneratorState } from '../../share/public';
+import { DocViewInput, DocViewInputFn } from './application/doc_views/doc_views_types';
+import { DocViewLink } from './application/doc_views_links/doc_views_links_types';
+import { DocViewsRegistry } from './application/doc_views/doc_views_registry';
+import { DocViewsLinksRegistry } from './application/doc_views_links/doc_views_links_registry';
+import { DocViewTable } from './application/components/table/table';
+import { JsonCodeBlock } from './application/components/json_code_block/json_code_block';
+import {
+  setDocViewsRegistry,
+  setDocViewsLinksRegistry,
+  setUrlTracker,
+  setAngularModule,
+  setServices,
+  setHeaderActionMenuMounter,
+  setUiActions,
+  setScopedHistory,
+  getScopedHistory,
+  syncHistoryLocations,
+  getServices,
+} from './opensearch_dashboards_services';
+import { createSavedSearchesLoader } from './saved_searches';
+import { buildServices } from './build_services';
+import {
+  DiscoverUrlGeneratorState,
+  DISCOVER_APP_URL_GENERATOR,
+  DiscoverUrlGenerator,
+} from './url_generator';
+import { SearchEmbeddableFactory } from './application/embeddable';
+import { AppNavLinkStatus } from '../../../core/public';
+import { ViewRedirectParams } from '../../data_explorer/public';
+
+declare module '../../share/public' {
+  export interface UrlGeneratorStateMapping {
+    [DISCOVER_APP_URL_GENERATOR]: UrlGeneratorState<DiscoverUrlGeneratorState>;
+  }
+}
+
+/**
+ * @public
+ */
+export interface DiscoverSetup {
+  docViews: {
+    /**
+     * Add new doc view shown along with table view and json view in the details of each document in Discover.
+     * Both react and angular doc views are supported.
+     * @param docViewRaw
+     */
+    addDocView(docViewRaw: DocViewInput | DocViewInputFn): void;
+  };
+
+  docViewsLinks: {
+    addDocViewLink(docViewLinkRaw: DocViewLink): void;
+  };
+}
+
+export interface DiscoverStart {
+  savedSearchLoader: SavedObjectLoader;
+
+  /**
+   * `share` plugin URL generator for Discover app. Use it to generate links into
+   * Discover application, example:
+   *
+   * ```ts
+   * const url = await plugins.discover.urlGenerator.createUrl({
+   *   savedSearchId: '571aaf70-4c88-11e8-b3d7-01146121b73d',
+   *   indexPatternId: 'c367b774-a4c2-11ea-bb37-0242ac130002',
+   *   timeRange: {
+   *     to: 'now',
+   *     from: 'now-15m',
+   *     mode: 'relative',
+   *   },
+   * });
+   * ```
+   */
+  readonly urlGenerator: undefined | UrlGeneratorContract<'DISCOVER_APP_URL_GENERATOR'>;
+}
+
+/**
+ * @internal
+ */
+export interface DiscoverSetupPlugins {
+  share?: SharePluginSetup;
+  uiActions: UiActionsSetup;
+  embeddable: EmbeddableSetup;
+  opensearchDashboardsLegacy: OpenSearchDashboardsLegacySetup;
+  urlForwarding: UrlForwardingSetup;
+  home?: HomePublicPluginSetup;
+  visualizations: VisualizationsSetup;
+  data: DataPublicPluginSetup;
+}
+
+/**
+ * @internal
+ */
+export interface DiscoverStartPlugins {
+  uiActions: UiActionsStart;
+  embeddable: EmbeddableStart;
+  navigation: NavigationStart;
+  charts: ChartsPluginStart;
+  data: DataPublicPluginStart;
+  share?: SharePluginStart;
+  opensearchDashboardsLegacy: OpenSearchDashboardsLegacyStart;
+  urlForwarding: UrlForwardingStart;
+  inspector: InspectorPublicPluginStart;
+  visualizations: VisualizationsStart;
+}
+
+const innerAngularName = 'app/discover';
+const embeddableAngularName = 'app/discoverEmbeddable';
+
+/**
+ * Contains Discover, one of the oldest parts of OpenSearch Dashboards
+ * There are 2 kinds of Angular bootstrapped for rendering, additionally to the main Angular
+ * Discover provides embeddables, those contain a slimmer Angular
+ */
+export class DiscoverPlugin
+  implements Plugin<DiscoverSetup, DiscoverStart, DiscoverSetupPlugins, DiscoverStartPlugins> {
+  constructor(private readonly initializerContext: PluginInitializerContext) {}
+
+  private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
+  private docViewsRegistry: DocViewsRegistry | null = null;
+  private docViewsLinksRegistry: DocViewsLinksRegistry | null = null;
+  private embeddableInjector: auto.IInjectorService | null = null;
+  private stopUrlTracking: (() => void) | undefined = undefined;
+  private servicesInitialized: boolean = false;
+  private innerAngularInitialized: boolean = false;
+  private urlGenerator?: DiscoverStart['urlGenerator'];
+
+  /**
+   * why are those functions public? they are needed for some mocha tests
+   * can be removed once all is Jest
+   */
+  public initializeInnerAngular?: () => void;
+  public initializeServices?: () => Promise<{ core: CoreStart; plugins: DiscoverStartPlugins }>;
+
+  setup(core: CoreSetup<DiscoverStartPlugins, DiscoverStart>, plugins: DiscoverSetupPlugins) {
+    const baseUrl = core.http.basePath.prepend('/app/discover');
+
+    if (plugins.share) {
+      this.urlGenerator = plugins.share.urlGenerators.registerUrlGenerator(
+        new DiscoverUrlGenerator({
+          appBasePath: baseUrl,
+          useHash: core.uiSettings.get('state:storeInSessionStorage'),
+        })
+      );
+    }
+
+    this.docViewsRegistry = new DocViewsRegistry();
+    setDocViewsRegistry(this.docViewsRegistry);
+    this.docViewsRegistry.addDocView({
+      title: i18n.translate('discover.docViews.table.tableTitle', {
+        defaultMessage: 'Table',
+      }),
+      order: 10,
+      component: DocViewTable,
+    });
+
+    this.docViewsRegistry.addDocView({
+      title: i18n.translate('discover.docViews.json.jsonTitle', {
+        defaultMessage: 'JSON',
+      }),
+      order: 20,
+      component: JsonCodeBlock,
+    });
+
+    this.docViewsLinksRegistry = new DocViewsLinksRegistry();
+    setDocViewsLinksRegistry(this.docViewsLinksRegistry);
+
+    this.docViewsLinksRegistry.addDocViewLink({
+      label: i18n.translate('discover.docTable.tableRow.viewSurroundingDocumentsLinkText', {
+        defaultMessage: 'View surrounding documents',
+      }),
+      generateCb: (renderProps: any) => {
+        const globalFilters: any = getServices().filterManager.getGlobalFilters();
+        const appFilters: any = getServices().filterManager.getAppFilters();
+
+        const hash = stringify(
+          url.encodeQuery({
+            _g: rison.encode({
+              filters: globalFilters || [],
+            }),
+            _a: rison.encode({
+              columns: renderProps.columns,
+              filters: (appFilters || []).map(opensearchFilters.disableFilter),
+            }),
+          }),
+          { encode: false, sort: false }
+        );
+
+        return {
+          url: `#/context/${encodeURIComponent(renderProps.indexPattern.id)}/${encodeURIComponent(
+            renderProps.hit._id
+          )}?${hash}`,
+          hide: !renderProps.indexPattern.isTimeBased(),
+        };
+      },
+      order: 1,
+    });
+
+    this.docViewsLinksRegistry.addDocViewLink({
+      label: i18n.translate('discover.docTable.tableRow.viewSingleDocumentLinkText', {
+        defaultMessage: 'View single document',
+      }),
+      generateCb: (renderProps) => ({
+        url: `#/doc/${renderProps.indexPattern.id}/${
+          renderProps.hit._index
+        }?id=${encodeURIComponent(renderProps.hit._id)}`,
+      }),
+      order: 2,
+    });
+
+    const {
+      appMounted,
+      appUnMounted,
+      stop: stopUrlTracker,
+      setActiveUrl: setTrackedUrl,
+      restorePreviousUrl,
+    } = createOsdUrlTracker({
+      // we pass getter here instead of plain `history`,
+      // so history is lazily created (when app is mounted)
+      // this prevents redundant `#` when not in discover app
+      getHistory: getScopedHistory,
+      baseUrl,
+      defaultSubUrl: '#/',
+      storageKey: `lastUrl:${core.http.basePath.get()}:discover_legacy`,
+      navLinkUpdater$: this.appStateUpdater,
+      toastNotifications: core.notifications.toasts,
+      stateParams: [
+        {
+          osdUrlKey: '_g',
+          stateUpdate$: plugins.data.query.state$.pipe(
+            filter(
+              ({ changes }) => !!(changes.globalFilters || changes.time || changes.refreshInterval)
+            ),
+            map(({ state }) => ({
+              ...state,
+              filters: state.filters?.filter(opensearchFilters.isFilterPinned),
+            }))
+          ),
+        },
+      ],
+    });
+    setUrlTracker({ setTrackedUrl, restorePreviousUrl });
+    this.stopUrlTracking = () => {
+      stopUrlTracker();
+    };
+
+    this.docViewsRegistry.setAngularInjectorGetter(this.getEmbeddableInjector);
+    core.application.register({
+      id: 'discoverLegacy',
+      title: 'Discover Legacy',
+      defaultPath: '#/',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      mount: async (params: AppMountParameters) => {
+        if (!this.initializeServices) {
+          throw Error('Discover plugin method initializeServices is undefined');
+        }
+        if (!this.initializeInnerAngular) {
+          throw Error('Discover plugin method initializeInnerAngular is undefined');
+        }
+
+        // If a user explicitly tries to access the legacy app URL
+        const {
+          core: {
+            application: { navigateToApp },
+          },
+        } = await this.initializeServices();
+        const path = window.location.hash;
+
+        const v2Enabled = core.uiSettings.get<boolean>(NEW_DISCOVER_APP);
+        if (v2Enabled) {
+          navigateToApp('discover', {
+            replace: true,
+            path,
+          });
+        }
+        setScopedHistory(params.history);
+        setHeaderActionMenuMounter(params.setHeaderActionMenu);
+        syncHistoryLocations();
+        appMounted();
+        const {
+          plugins: { data: dataStart },
+        } = await this.initializeServices();
+        await this.initializeInnerAngular();
+
+        // make sure the index pattern list is up to date
+        await dataStart.indexPatterns.clearCache();
+        const { renderApp } = await import('./application/application');
+        params.element.classList.add('dscAppWrapper');
+        const unmount = await renderApp(innerAngularName, params.element);
+        return () => {
+          params.element.classList.remove('dscAppWrapper');
+          unmount();
+          appUnMounted();
+        };
+      },
+    });
+
+    plugins.urlForwarding.forwardApp('doc', 'discoverLegacy', (path) => {
+      return `#${path}`;
+    });
+    plugins.urlForwarding.forwardApp('context', 'discoverLegacy', (path) => {
+      const urlParts = path.split('/');
+      // take care of urls containing legacy url, those split in the following way
+      // ["", "context", indexPatternId, _type, id + params]
+      if (urlParts[4]) {
+        // remove _type part
+        const newPath = [...urlParts.slice(0, 3), ...urlParts.slice(4)].join('/');
+        return `#${newPath}`;
+      }
+      return `#${path}`;
+    });
+    plugins.urlForwarding.forwardApp('discover', 'discoverLegacy', (path) => {
+      const [, id, tail] = /discover\/([^\?]+)(.*)/.exec(path) || [];
+      if (!id) {
+        return `#${path.replace('/discover', '') || '/'}`;
+      }
+      return `#/view/${id}${tail || ''}`;
+    });
+
+    this.registerEmbeddable(core, plugins);
+
+    return {
+      docViews: {
+        addDocView: this.docViewsRegistry.addDocView.bind(this.docViewsRegistry),
+      },
+      docViewsLinks: {
+        addDocViewLink: this.docViewsLinksRegistry.addDocViewLink.bind(this.docViewsLinksRegistry),
+      },
+    };
+  }
+
+  start(core: CoreStart, plugins: DiscoverStartPlugins) {
+    // we need to register the application service at setup, but to render it
+    // there are some start dependencies necessary, for this reason
+    // initializeInnerAngular + initializeServices are assigned at start and used
+    // when the application/embeddable is mounted
+    this.initializeInnerAngular = async () => {
+      if (this.innerAngularInitialized) {
+        return;
+      }
+      // this is used by application mount and tests
+      const { getInnerAngularModule } = await import('./get_inner_angular');
+      const module = getInnerAngularModule(
+        innerAngularName,
+        core,
+        plugins,
+        this.initializerContext
+      );
+      setAngularModule(module);
+      this.innerAngularInitialized = true;
+    };
+
+    setUiActions(plugins.uiActions);
+
+    this.initializeServices = async () => {
+      if (this.servicesInitialized) {
+        return { core, plugins };
+      }
+      const services = await buildServices(
+        core,
+        plugins,
+        this.initializerContext,
+        this.getEmbeddableInjector
+      );
+      setServices(services);
+      this.servicesInitialized = true;
+
+      return { core, plugins };
+    };
+
+    return {
+      urlGenerator: this.urlGenerator,
+      savedSearchLoader: createSavedSearchesLoader({
+        savedObjectsClient: core.savedObjects.client,
+        indexPatterns: plugins.data.indexPatterns,
+        search: plugins.data.search,
+        chrome: core.chrome,
+        overlays: core.overlays,
+      }),
+    };
+  }
+
+  stop() {
+    if (this.stopUrlTracking) {
+      this.stopUrlTracking();
+    }
+  }
+
+  /**
+   * register embeddable with a slimmer embeddable version of inner angular
+   */
+  private registerEmbeddable(core: CoreSetup<DiscoverStartPlugins>, plugins: DiscoverSetupPlugins) {
+    if (!this.getEmbeddableInjector) {
+      throw Error('Discover plugin method getEmbeddableInjector is undefined');
+    }
+
+    const getStartServices = async () => {
+      const [coreStart, deps] = await core.getStartServices();
+      return {
+        executeTriggerActions: deps.uiActions.executeTriggerActions,
+        isEditable: () => coreStart.application.capabilities.discover.save as boolean,
+      };
+    };
+
+    const factory = new SearchEmbeddableFactory(getStartServices, this.getEmbeddableInjector);
+    plugins.embeddable.registerEmbeddableFactory(factory.type, factory);
+  }
+
+  private getEmbeddableInjector = async () => {
+    if (!this.embeddableInjector) {
+      if (!this.initializeServices) {
+        throw Error('Discover plugin getEmbeddableInjector:  initializeServices is undefined');
+      }
+      const { core, plugins } = await this.initializeServices();
+      getServices().opensearchDashboardsLegacy.loadFontAwesome();
+      const { getInnerAngularModuleEmbeddable } = await import('./get_inner_angular');
+      getInnerAngularModuleEmbeddable(embeddableAngularName, core, plugins);
+      const mountpoint = document.createElement('div');
+      this.embeddableInjector = angular.bootstrap(mountpoint, [embeddableAngularName]);
+    }
+
+    return this.embeddableInjector;
+  };
+}
diff --git a/src/plugins/discover_legacy/public/saved_searches/_saved_search.ts b/src/plugins/discover_legacy/public/saved_searches/_saved_search.ts
new file mode 100644
index 000000000000..55cd59104ecb
--- /dev/null
+++ b/src/plugins/discover_legacy/public/saved_searches/_saved_search.ts
@@ -0,0 +1,86 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 {
+  createSavedObjectClass,
+  SavedObject,
+  SavedObjectOpenSearchDashboardsServices,
+} from '../../../saved_objects/public';
+
+export function createSavedSearchClass(services: SavedObjectOpenSearchDashboardsServices) {
+  const SavedObjectClass = createSavedObjectClass(services);
+
+  class SavedSearch extends SavedObjectClass {
+    public static type: string = 'search';
+    public static mapping = {
+      title: 'text',
+      description: 'text',
+      hits: 'integer',
+      columns: 'keyword',
+      sort: 'keyword',
+      version: 'integer',
+    };
+    // Order these fields to the top, the rest are alphabetical
+    public static fieldOrder = ['title', 'description'];
+    public static searchSource = true;
+
+    public id: string;
+    public showInRecentlyAccessed: boolean;
+
+    constructor(id: string) {
+      super({
+        id,
+        type: 'search',
+        mapping: {
+          title: 'text',
+          description: 'text',
+          hits: 'integer',
+          columns: 'keyword',
+          sort: 'keyword',
+          version: 'integer',
+        },
+        searchSource: true,
+        defaults: {
+          title: '',
+          description: '',
+          columns: [],
+          hits: 0,
+          sort: [],
+          version: 1,
+        },
+      });
+      this.showInRecentlyAccessed = true;
+      this.id = id;
+      this.getFullPath = () => `/app/discover#/view/${String(id)}`;
+    }
+  }
+
+  return SavedSearch as new (id: string) => SavedObject;
+}
diff --git a/src/plugins/discover_legacy/public/saved_searches/index.ts b/src/plugins/discover_legacy/public/saved_searches/index.ts
new file mode 100644
index 000000000000..f576a9a9377a
--- /dev/null
+++ b/src/plugins/discover_legacy/public/saved_searches/index.ts
@@ -0,0 +1,32 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { createSavedSearchesLoader } from './saved_searches';
+export { SavedSearch, SavedSearchLoader } from './types';
diff --git a/src/plugins/discover_legacy/public/saved_searches/saved_searches.ts b/src/plugins/discover_legacy/public/saved_searches/saved_searches.ts
new file mode 100644
index 000000000000..dd3243568159
--- /dev/null
+++ b/src/plugins/discover_legacy/public/saved_searches/saved_searches.ts
@@ -0,0 +1,50 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 {
+  SavedObjectLoader,
+  SavedObjectOpenSearchDashboardsServices,
+} from '../../../saved_objects/public';
+import { createSavedSearchClass } from './_saved_search';
+
+export function createSavedSearchesLoader(services: SavedObjectOpenSearchDashboardsServices) {
+  const SavedSearchClass = createSavedSearchClass(services);
+  const savedSearchLoader = new SavedObjectLoader(SavedSearchClass, services.savedObjectsClient);
+  // Customize loader properties since adding an 's' on type doesn't work for type 'search' .
+  savedSearchLoader.loaderProperties = {
+    name: 'searches',
+    noun: 'Saved Search',
+    nouns: 'saved searches',
+  };
+
+  savedSearchLoader.urlFor = (id: string) => (id ? `#/view/${encodeURIComponent(id)}` : '#/');
+
+  return savedSearchLoader;
+}
diff --git a/src/plugins/discover_legacy/public/saved_searches/types.ts b/src/plugins/discover_legacy/public/saved_searches/types.ts
new file mode 100644
index 000000000000..e02fd65e6899
--- /dev/null
+++ b/src/plugins/discover_legacy/public/saved_searches/types.ts
@@ -0,0 +1,47 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { ISearchSource } from '../../../data/public';
+
+export type SortOrder = [string, string];
+export interface SavedSearch {
+  readonly id: string;
+  title: string;
+  searchSource: ISearchSource;
+  description?: string;
+  columns: string[];
+  sort: SortOrder[];
+  destroy: () => void;
+  lastSavedTitle?: string;
+}
+export interface SavedSearchLoader {
+  get: (id: string) => Promise<SavedSearch>;
+  urlFor: (id: string) => string;
+}
diff --git a/src/plugins/discover_legacy/public/url_generator.test.ts b/src/plugins/discover_legacy/public/url_generator.test.ts
new file mode 100644
index 000000000000..c352dd5133a4
--- /dev/null
+++ b/src/plugins/discover_legacy/public/url_generator.test.ts
@@ -0,0 +1,269 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { DiscoverUrlGenerator } from './url_generator';
+import { hashedItemStore, getStatesFromOsdUrl } from '../../opensearch_dashboards_utils/public';
+import { mockStorage } from '../../opensearch_dashboards_utils/public/storage/hashed_item_store/mock';
+import { FilterStateStore } from '../../data/common';
+
+const appBasePath: string = 'xyz/app/discover';
+const indexPatternId: string = 'c367b774-a4c2-11ea-bb37-0242ac130002';
+const savedSearchId: string = '571aaf70-4c88-11e8-b3d7-01146121b73d';
+
+interface SetupParams {
+  useHash?: boolean;
+}
+
+const setup = async ({ useHash = false }: SetupParams = {}) => {
+  const generator = new DiscoverUrlGenerator({
+    appBasePath,
+    useHash,
+  });
+
+  return {
+    generator,
+  };
+};
+
+beforeEach(() => {
+  // @ts-ignore
+  hashedItemStore.storage = mockStorage;
+});
+
+describe('Discover url generator', () => {
+  test('can create a link to Discover with no state and no saved search', async () => {
+    const { generator } = await setup();
+    const url = await generator.createUrl({});
+    const { _a, _g } = getStatesFromOsdUrl(url, ['_a', '_g']);
+
+    expect(url.startsWith(appBasePath)).toBe(true);
+    expect(_a).toEqual({});
+    expect(_g).toEqual({});
+  });
+
+  test('can create a link to a saved search in Discover', async () => {
+    const { generator } = await setup();
+    const url = await generator.createUrl({ savedSearchId });
+    const { _a, _g } = getStatesFromOsdUrl(url, ['_a', '_g']);
+
+    expect(url.startsWith(`${appBasePath}#/${savedSearchId}`)).toBe(true);
+    expect(_a).toEqual({});
+    expect(_g).toEqual({});
+  });
+
+  test('can specify specific index pattern', async () => {
+    const { generator } = await setup();
+    const url = await generator.createUrl({
+      indexPatternId,
+    });
+    const { _a, _g } = getStatesFromOsdUrl(url, ['_a', '_g']);
+
+    expect(_a).toEqual({
+      index: indexPatternId,
+    });
+    expect(_g).toEqual({});
+  });
+
+  test('can specify specific time range', async () => {
+    const { generator } = await setup();
+    const url = await generator.createUrl({
+      timeRange: { to: 'now', from: 'now-15m', mode: 'relative' },
+    });
+    const { _a, _g } = getStatesFromOsdUrl(url, ['_a', '_g']);
+
+    expect(_a).toEqual({});
+    expect(_g).toEqual({
+      time: {
+        from: 'now-15m',
+        mode: 'relative',
+        to: 'now',
+      },
+    });
+  });
+
+  test('can specify query', async () => {
+    const { generator } = await setup();
+    const url = await generator.createUrl({
+      query: {
+        language: 'kuery',
+        query: 'foo',
+      },
+    });
+    const { _a, _g } = getStatesFromOsdUrl(url, ['_a', '_g']);
+
+    expect(_a).toEqual({
+      query: {
+        language: 'kuery',
+        query: 'foo',
+      },
+    });
+    expect(_g).toEqual({});
+  });
+
+  test('can specify local and global filters', async () => {
+    const { generator } = await setup();
+    const url = await generator.createUrl({
+      filters: [
+        {
+          meta: {
+            alias: 'foo',
+            disabled: false,
+            negate: false,
+          },
+          $state: {
+            store: FilterStateStore.APP_STATE,
+          },
+        },
+        {
+          meta: {
+            alias: 'bar',
+            disabled: false,
+            negate: false,
+          },
+          $state: {
+            store: FilterStateStore.GLOBAL_STATE,
+          },
+        },
+      ],
+    });
+    const { _a, _g } = getStatesFromOsdUrl(url, ['_a', '_g']);
+
+    expect(_a).toEqual({
+      filters: [
+        {
+          $state: {
+            store: 'appState',
+          },
+          meta: {
+            alias: 'foo',
+            disabled: false,
+            negate: false,
+          },
+        },
+      ],
+    });
+    expect(_g).toEqual({
+      filters: [
+        {
+          $state: {
+            store: 'globalState',
+          },
+          meta: {
+            alias: 'bar',
+            disabled: false,
+            negate: false,
+          },
+        },
+      ],
+    });
+  });
+
+  test('can set refresh interval', async () => {
+    const { generator } = await setup();
+    const url = await generator.createUrl({
+      refreshInterval: {
+        pause: false,
+        value: 666,
+      },
+    });
+    const { _a, _g } = getStatesFromOsdUrl(url, ['_a', '_g']);
+
+    expect(_a).toEqual({});
+    expect(_g).toEqual({
+      refreshInterval: {
+        pause: false,
+        value: 666,
+      },
+    });
+  });
+
+  test('can set time range', async () => {
+    const { generator } = await setup();
+    const url = await generator.createUrl({
+      timeRange: {
+        from: 'now-3h',
+        to: 'now',
+      },
+    });
+    const { _a, _g } = getStatesFromOsdUrl(url, ['_a', '_g']);
+
+    expect(_a).toEqual({});
+    expect(_g).toEqual({
+      time: {
+        from: 'now-3h',
+        to: 'now',
+      },
+    });
+  });
+
+  describe('useHash property', () => {
+    describe('when default useHash is set to false', () => {
+      test('when using default, sets index pattern ID in the generated URL', async () => {
+        const { generator } = await setup();
+        const url = await generator.createUrl({
+          indexPatternId,
+        });
+
+        expect(url.indexOf(indexPatternId) > -1).toBe(true);
+      });
+
+      test('when enabling useHash, does not set index pattern ID in the generated URL', async () => {
+        const { generator } = await setup();
+        const url = await generator.createUrl({
+          useHash: true,
+          indexPatternId,
+        });
+
+        expect(url.indexOf(indexPatternId) > -1).toBe(false);
+      });
+    });
+
+    describe('when default useHash is set to true', () => {
+      test('when using default, does not set index pattern ID in the generated URL', async () => {
+        const { generator } = await setup({ useHash: true });
+        const url = await generator.createUrl({
+          indexPatternId,
+        });
+
+        expect(url.indexOf(indexPatternId) > -1).toBe(false);
+      });
+
+      test('when disabling useHash, sets index pattern ID in the generated URL', async () => {
+        const { generator } = await setup();
+        const url = await generator.createUrl({
+          useHash: false,
+          indexPatternId,
+        });
+
+        expect(url.indexOf(indexPatternId) > -1).toBe(true);
+      });
+    });
+  });
+});
diff --git a/src/plugins/discover_legacy/public/url_generator.ts b/src/plugins/discover_legacy/public/url_generator.ts
new file mode 100644
index 000000000000..25e8517c8c9d
--- /dev/null
+++ b/src/plugins/discover_legacy/public/url_generator.ts
@@ -0,0 +1,127 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 {
+  TimeRange,
+  Filter,
+  Query,
+  opensearchFilters,
+  QueryState,
+  RefreshInterval,
+} from '../../data/public';
+import { setStateToOsdUrl } from '../../opensearch_dashboards_utils/public';
+import { UrlGeneratorsDefinition } from '../../share/public';
+
+export const DISCOVER_APP_URL_GENERATOR = 'DISCOVER_APP_URL_GENERATOR';
+
+export interface DiscoverUrlGeneratorState {
+  /**
+   * Optionally set saved search ID.
+   */
+  savedSearchId?: string;
+
+  /**
+   * Optionally set index pattern ID.
+   */
+  indexPatternId?: string;
+
+  /**
+   * Optionally set the time range in the time picker.
+   */
+  timeRange?: TimeRange;
+
+  /**
+   * Optionally set the refresh interval.
+   */
+  refreshInterval?: RefreshInterval;
+
+  /**
+   * Optionally apply filers.
+   */
+  filters?: Filter[];
+
+  /**
+   * Optionally set a query. NOTE: if given and used in conjunction with `dashboardId`, and the
+   * saved dashboard has a query saved with it, this will _replace_ that query.
+   */
+  query?: Query;
+
+  /**
+   * If not given, will use the uiSettings configuration for `storeInSessionStorage`. useHash determines
+   * whether to hash the data in the url to avoid url length issues.
+   */
+  useHash?: boolean;
+}
+
+interface Params {
+  appBasePath: string;
+  useHash: boolean;
+}
+
+export class DiscoverUrlGenerator
+  implements UrlGeneratorsDefinition<typeof DISCOVER_APP_URL_GENERATOR> {
+  constructor(private readonly params: Params) {}
+
+  public readonly id = DISCOVER_APP_URL_GENERATOR;
+
+  public readonly createUrl = async ({
+    filters,
+    indexPatternId,
+    query,
+    refreshInterval,
+    savedSearchId,
+    timeRange,
+    useHash = this.params.useHash,
+  }: DiscoverUrlGeneratorState): Promise<string> => {
+    const savedSearchPath = savedSearchId ? encodeURIComponent(savedSearchId) : '';
+    const appState: {
+      query?: Query;
+      filters?: Filter[];
+      index?: string;
+    } = {};
+    const queryState: QueryState = {};
+
+    if (query) appState.query = query;
+    if (filters && filters.length)
+      appState.filters = filters?.filter((f) => !opensearchFilters.isFilterPinned(f));
+    if (indexPatternId) appState.index = indexPatternId;
+
+    if (timeRange) queryState.time = timeRange;
+    if (filters && filters.length)
+      queryState.filters = filters?.filter((f) => opensearchFilters.isFilterPinned(f));
+    if (refreshInterval) queryState.refreshInterval = refreshInterval;
+
+    let url = `${this.params.appBasePath}#/${savedSearchPath}`;
+    url = setStateToOsdUrl<QueryState>('_g', queryState, { useHash }, url);
+    url = setStateToOsdUrl('_a', appState, { useHash }, url);
+
+    return url;
+  };
+}
diff --git a/src/plugins/home/config.ts b/src/plugins/home/config.ts
index e3372ce77767..399c92174c6a 100644
--- a/src/plugins/home/config.ts
+++ b/src/plugins/home/config.ts
@@ -32,6 +32,7 @@ import { schema, TypeOf } from '@osd/config-schema';
 
 export const configSchema = schema.object({
   disableWelcomeScreen: schema.boolean({ defaultValue: false }),
+  disableNewThemeModal: schema.boolean({ defaultValue: false }),
 });
 
 export type ConfigSchema = TypeOf<typeof configSchema>;
diff --git a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
index 61855f17954e..31df3b66efb5 100644
--- a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
@@ -650,6 +650,61 @@ exports[`home isNewOpenSearchDashboardsInstance should set isNewOpenSearchDashbo
 </main>
 `;
 
+exports[`home new theme modal should show the new theme modal if not previously dismissed 1`] = `
+<main
+  aria-labelledby="osdOverviewPageHeader__title"
+  className="homWrapper"
+  data-test-subj="homeApp"
+>
+  <mockConstructor
+    addBasePath={[Function]}
+    branding={Object {}}
+    overlap={0}
+    showDevToolsLink={true}
+    showManagementLink={true}
+    title={
+      <FormattedMessage
+        defaultMessage="Home"
+        id="home.header.title"
+        values={Object {}}
+      />
+    }
+  />
+  <div
+    className="homContent"
+  >
+    <EuiFlexGroup
+      className="homData homData--expanded"
+    >
+      <EuiFlexItem>
+        <AddData
+          addBasePath={[Function]}
+          features={Array []}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <ManageData
+          addBasePath={[Function]}
+          features={Array []}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiHorizontalRule
+      aria-hidden="true"
+      margin="xl"
+    />
+    <NewThemeModal
+      addBasePath={[Function]}
+      onClose={[Function]}
+    />
+    <mockConstructor
+      addBasePath={[Function]}
+      path="/app/home"
+    />
+  </div>
+</main>
+`;
+
 exports[`home should render home component 1`] = `
 <main
   aria-labelledby="osdOverviewPageHeader__title"
@@ -744,6 +799,10 @@ exports[`home welcome should show the normal home page if loading fails 1`] = `
       aria-hidden="true"
       margin="xl"
     />
+    <NewThemeModal
+      addBasePath={[Function]}
+      onClose={[Function]}
+    />
     <mockConstructor
       addBasePath={[Function]}
       path="/app/home"
@@ -854,6 +913,10 @@ exports[`home welcome stores skip welcome setting if skipped 1`] = `
       aria-hidden="true"
       margin="xl"
     />
+    <NewThemeModal
+      addBasePath={[Function]}
+      onClose={[Function]}
+    />
     <mockConstructor
       addBasePath={[Function]}
       path="/app/home"
diff --git a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
index 2b0de11d7f18..004d90cd5354 100644
--- a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Welcome page  should render a Welcome screen  with no telemetry disclaimer 1`] = `
+exports[`Welcome page renders the Welcome screen with no telemetry disclaimer 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -14,26 +14,23 @@ exports[`Welcome page  should render a Welcome screen  with no telemetry disclai
         <EuiSpacer
           size="xl"
         />
-        <div
-          className="homWelcome__customLogoContainer"
+        <span
+          className="homWelcome__logo"
         >
-          <img
-            alt="OpenSearch Dashboards logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/"
-            data-test-subj="welcomeCustomLogo"
-            src="/"
+          <EuiIcon
+            size="original"
+            type="/ui/logos/opensearch_center_mark_on_light.svg"
           />
-        </div>
+        </span>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to OpenSearch Dashboards"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to OpenSearch Dashboards"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
@@ -66,7 +63,7 @@ exports[`Welcome page  should render a Welcome screen  with no telemetry disclai
 </EuiPortal>
 `;
 
-exports[`Welcome page  should render a Welcome screen  with the telemetry disclaimer when optIn is false 1`] = `
+exports[`Welcome page renders the Welcome screen with the telemetry disclaimer when optIn is false 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -80,26 +77,23 @@ exports[`Welcome page  should render a Welcome screen  with the telemetry discla
         <EuiSpacer
           size="xl"
         />
-        <div
-          className="homWelcome__customLogoContainer"
+        <span
+          className="homWelcome__logo"
         >
-          <img
-            alt="OpenSearch Dashboards logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/"
-            data-test-subj="welcomeCustomLogo"
-            src="/"
+          <EuiIcon
+            size="original"
+            type="/ui/logos/opensearch_center_mark_on_light.svg"
           />
-        </div>
+        </span>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to OpenSearch Dashboards"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to OpenSearch Dashboards"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
@@ -168,7 +162,7 @@ exports[`Welcome page  should render a Welcome screen  with the telemetry discla
 </EuiPortal>
 `;
 
-exports[`Welcome page  should render a Welcome screen  with the telemetry disclaimer when optIn is true 1`] = `
+exports[`Welcome page renders the Welcome screen with the telemetry disclaimer when optIn is true 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -182,26 +176,23 @@ exports[`Welcome page  should render a Welcome screen  with the telemetry discla
         <EuiSpacer
           size="xl"
         />
-        <div
-          className="homWelcome__customLogoContainer"
+        <span
+          className="homWelcome__logo"
         >
-          <img
-            alt="OpenSearch Dashboards logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/"
-            data-test-subj="welcomeCustomLogo"
-            src="/"
+          <EuiIcon
+            size="original"
+            type="/ui/logos/opensearch_center_mark_on_light.svg"
           />
-        </div>
+        </span>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to OpenSearch Dashboards"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to OpenSearch Dashboards"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
@@ -270,139 +261,7 @@ exports[`Welcome page  should render a Welcome screen  with the telemetry discla
 </EuiPortal>
 `;
 
-exports[`Welcome page  should render welcome logo in dark mode  using mark dark mode URL 1`] = `
-<EuiPortal>
-  <div
-    className="homWelcome"
-  >
-    <header
-      className="homWelcome__header"
-    >
-      <div
-        className="homWelcome__content eui-textCenter"
-      >
-        <EuiSpacer
-          size="xl"
-        />
-        <div
-          className="homWelcome__customLogoContainer"
-        >
-          <img
-            alt="undefined logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/darkModeMark"
-            data-test-subj="welcomeCustomLogo"
-            src="/darkModeMark"
-          />
-        </div>
-        <EuiTitle
-          className="homWelcome__title"
-          data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to undefined"
-          size="l"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to undefined"
-              id="home.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiSpacer
-          size="m"
-        />
-      </div>
-    </header>
-    <div
-      className="homWelcome__content homWelcome-body"
-    >
-      <EuiFlexGroup
-        gutterSize="l"
-      >
-        <EuiFlexItem>
-          <SampleDataCard
-            onConfirm={[Function]}
-            onDecline={[Function]}
-            urlBasePath="/"
-          />
-          <EuiSpacer
-            size="s"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  </div>
-</EuiPortal>
-`;
-
-exports[`Welcome page  should render welcome logo in dark mode  using mark default mode URL 1`] = `
-<EuiPortal>
-  <div
-    className="homWelcome"
-  >
-    <header
-      className="homWelcome__header"
-    >
-      <div
-        className="homWelcome__content eui-textCenter"
-      >
-        <EuiSpacer
-          size="xl"
-        />
-        <div
-          className="homWelcome__customLogoContainer"
-        >
-          <img
-            alt="undefined logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/defaultModeMark"
-            data-test-subj="welcomeCustomLogo"
-            src="/defaultModeMark"
-          />
-        </div>
-        <EuiTitle
-          className="homWelcome__title"
-          data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to undefined"
-          size="l"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to undefined"
-              id="home.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiSpacer
-          size="m"
-        />
-      </div>
-    </header>
-    <div
-      className="homWelcome__content homWelcome-body"
-    >
-      <EuiFlexGroup
-        gutterSize="l"
-      >
-        <EuiFlexItem>
-          <SampleDataCard
-            onConfirm={[Function]}
-            onDecline={[Function]}
-            urlBasePath="/"
-          />
-          <EuiSpacer
-            size="s"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  </div>
-</EuiPortal>
-`;
-
-exports[`Welcome page  should render welcome logo in dark mode  using the original opensearch logo 1`] = `
+exports[`Welcome page renders the welcome logo with OpenSearch center mark when not branded 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -421,18 +280,18 @@ exports[`Welcome page  should render welcome logo in dark mode  using the origin
         >
           <EuiIcon
             size="original"
-            type="test-file-stub"
+            type="/ui/logos/opensearch_center_mark_on_light.svg"
           />
         </span>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to undefined"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to undefined"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
@@ -465,7 +324,7 @@ exports[`Welcome page  should render welcome logo in dark mode  using the origin
 </EuiPortal>
 `;
 
-exports[`Welcome page  should render welcome logo in default mode  using mark default mode URL 1`] = `
+exports[`Welcome page renders the welcome logo with custom branded logo when branded 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -483,85 +342,22 @@ exports[`Welcome page  should render welcome logo in default mode  using mark de
           className="homWelcome__customLogoContainer"
         >
           <img
-            alt="custom title logo"
+            alt="Page Title logo"
             className="homWelcome__customLogo"
-            data-test-image-url="/defaultModeMark"
+            data-test-image-url="/custom/branded/mark.svg"
             data-test-subj="welcomeCustomLogo"
-            src="/defaultModeMark"
+            src="/custom/branded/mark.svg"
           />
         </div>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to custom title"
-          size="l"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to custom title"
-              id="home.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiSpacer
-          size="m"
-        />
-      </div>
-    </header>
-    <div
-      className="homWelcome__content homWelcome-body"
-    >
-      <EuiFlexGroup
-        gutterSize="l"
-      >
-        <EuiFlexItem>
-          <SampleDataCard
-            onConfirm={[Function]}
-            onDecline={[Function]}
-            urlBasePath="/"
-          />
-          <EuiSpacer
-            size="s"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  </div>
-</EuiPortal>
-`;
-
-exports[`Welcome page  should render welcome logo in default mode  using the original OpenSearch Dashboards logo 1`] = `
-<EuiPortal>
-  <div
-    className="homWelcome"
-  >
-    <header
-      className="homWelcome__header"
-    >
-      <div
-        className="homWelcome__content eui-textCenter"
-      >
-        <EuiSpacer
-          size="xl"
-        />
-        <span
-          className="homWelcome__logo"
-        >
-          <EuiIcon
-            size="original"
-            type="test-file-stub"
-          />
-        </span>
-        <EuiTitle
-          className="homWelcome__title"
-          data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to OpenSearch Dashboards"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to OpenSearch Dashboards"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
index 2852ed4cda19..853871f672a0 100644
--- a/src/plugins/home/public/application/components/home.js
+++ b/src/plugins/home/public/application/components/home.js
@@ -42,10 +42,12 @@ import { FeatureCatalogueCategory } from '../../services';
 import { getServices } from '../opensearch_dashboards_services';
 import { AddData } from './add_data';
 import { ManageData } from './manage_data';
+import { NewThemeModal } from './new_theme_modal';
 import { SolutionsSection } from './solutions_section';
 import { Welcome } from './welcome';
 
 const KEY_ENABLE_WELCOME = 'home:welcome:show';
+const KEY_ENABLE_NEW_THEME_MODAL = 'home:newThemeModal:show';
 
 export class Home extends Component {
   constructor(props) {
@@ -56,6 +58,12 @@ export class Home extends Component {
       props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false'
     );
 
+    const isNewThemeModalEnabled = !(
+      getServices().uiSettings.get('theme:version') === 'v7' ||
+      getServices().homeConfig.disableNewThemeModal ||
+      props.localStorage.getItem(KEY_ENABLE_NEW_THEME_MODAL) === 'false'
+    );
+
     const body = document.querySelector('body');
     body.classList.add('isHomPage');
 
@@ -67,6 +75,7 @@ export class Home extends Component {
       isLoading: isWelcomeEnabled,
       isNewOpenSearchDashboardsInstance: false,
       isWelcomeEnabled,
+      isNewThemeModalEnabled,
     };
   }
 
@@ -122,6 +131,15 @@ export class Home extends Component {
     this._isMounted && this.setState({ isWelcomeEnabled: false });
   };
 
+  dismissNewThemeModal = () => {
+    this.props.localStorage.setItem(KEY_ENABLE_NEW_THEME_MODAL, 'false');
+    this._isMounted && this.setState({ isNewThemeModalEnabled: false });
+  };
+
+  onCloseNewThemeModal = () => {
+    this.dismissNewThemeModal();
+  };
+
   findDirectoryById = (id) => this.props.directories.find((directory) => directory.id === id);
 
   getFeaturesByCategory = (category) =>
@@ -131,6 +149,7 @@ export class Home extends Component {
 
   renderNormal() {
     const { addBasePath, solutions, directories } = this.props;
+    const { isNewThemeModalEnabled } = this.state;
 
     const devTools = this.findDirectoryById('console');
     const addDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.DATA);
@@ -163,6 +182,7 @@ export class Home extends Component {
               solutions={solutions}
               directories={directories}
               branding={getServices().injectedMetadata.getBranding()}
+              logos={getServices().chrome.logos}
             />
           ) : null}
 
@@ -184,6 +204,10 @@ export class Home extends Component {
 
           <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
+          {isNewThemeModalEnabled && (
+            <NewThemeModal addBasePath={addBasePath} onClose={this.onCloseNewThemeModal} />
+          )}
+
           <OverviewPageFooter addBasePath={addBasePath} path={HOME_APP_BASE_PATH} />
         </div>
       </main>
@@ -202,6 +226,7 @@ export class Home extends Component {
         urlBasePath={this.props.urlBasePath}
         telemetry={this.props.telemetry}
         branding={getServices().injectedMetadata.getBranding()}
+        logos={getServices().chrome.logos}
       />
     );
   }
diff --git a/src/plugins/home/public/application/components/home.test.js b/src/plugins/home/public/application/components/home.test.js
index 444c5f388bb2..0c0953dbd63f 100644
--- a/src/plugins/home/public/application/components/home.test.js
+++ b/src/plugins/home/public/application/components/home.test.js
@@ -32,20 +32,27 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { Home } from './home';
+import { NewThemeModal } from './new_theme_modal';
 
 import { FeatureCatalogueCategory } from '../../services';
 
+const mockHomeConfig = jest.fn();
+const mockUiSettings = jest.fn();
+
 jest.mock('../opensearch_dashboards_services', () => ({
   getServices: () => ({
     getBasePath: () => 'path',
     tutorialVariables: () => ({}),
-    homeConfig: { disableWelcomeScreen: false },
+    homeConfig: mockHomeConfig(),
     chrome: {
       setBreadcrumbs: () => {},
     },
     injectedMetadata: {
       getBranding: () => ({}),
     },
+    uiSettings: {
+      get: () => mockUiSettings(),
+    },
   }),
 }));
 
@@ -80,7 +87,7 @@ describe('home', () => {
       },
       localStorage: {
         getItem: sinon.spy((path) => {
-          expect(path).toEqual('home:welcome:show');
+          expect(path).toMatch(/home:(welcome|newThemeModal):show/);
           return 'false';
         }),
         setItem: sinon.mock(),
@@ -93,7 +100,17 @@ describe('home', () => {
     };
   });
 
-  async function renderHome(props = {}) {
+  async function renderHome(props = {}, homeConfig, uiSettings) {
+    if (homeConfig) {
+      mockHomeConfig.mockReturnValue(homeConfig);
+    } else {
+      mockHomeConfig.mockReturnValue({ disableWelcomeScreen: false, disableNewThemeModal: false });
+    }
+    if (uiSettings) {
+      mockUiSettings.mockReturnValue(uiSettings);
+    } else {
+      mockUiSettings.mockReturnValue('v8');
+    }
     const component = shallow(<Home {...defaultProps} {...props} />);
 
     // Ensure all promises resolve
@@ -284,7 +301,7 @@ describe('home', () => {
         find: () => Promise.resolve({ total: 0 }),
       });
 
-      sinon.assert.calledOnce(defaultProps.localStorage.getItem);
+      sinon.assert.calledWith(defaultProps.localStorage.getItem, 'home:welcome:show');
 
       expect(component).toMatchSnapshot();
     });
@@ -350,4 +367,50 @@ describe('home', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  describe('new theme modal', () => {
+    test('should show the new theme modal if not previously dismissed', async () => {
+      defaultProps.localStorage.getItem = sinon.spy(() => undefined);
+
+      const component = await renderHome();
+
+      sinon.assert.calledWith(defaultProps.localStorage.getItem, 'home:newThemeModal:show');
+
+      expect(component.find(NewThemeModal).exists()).toBeTruthy();
+      expect(component).toMatchSnapshot();
+    });
+    test('should not show the new theme modal if v7 theme in use', async () => {
+      defaultProps.localStorage.getItem = sinon.spy(() => undefined);
+
+      const component = await renderHome({}, undefined, 'v7');
+
+      sinon.assert.neverCalledWith(defaultProps.localStorage.getItem, 'home:newThemeModal:show');
+
+      expect(component.find(NewThemeModal).exists()).toBeFalsy();
+    });
+    test('should not show the new theme modal if disabled in config', async () => {
+      defaultProps.localStorage.getItem = sinon.spy(() => undefined);
+
+      const component = await renderHome(
+        {},
+        {
+          disableWelcomeScreen: true,
+          disableNewThemeModal: true,
+        }
+      );
+
+      sinon.assert.neverCalledWith(defaultProps.localStorage.getItem, 'home:newThemeModal:show');
+
+      expect(component.find(NewThemeModal).exists()).toBeFalsy();
+    });
+    test('should not show the new theme modal if previously dismissed', async () => {
+      defaultProps.localStorage.getItem = sinon.spy(() => 'false');
+
+      const component = await renderHome();
+
+      sinon.assert.calledWith(defaultProps.localStorage.getItem, 'home:newThemeModal:show');
+
+      expect(component.find(NewThemeModal).exists()).toBeFalsy();
+    });
+  });
 });
diff --git a/src/plugins/home/public/application/components/new_theme_modal.tsx b/src/plugins/home/public/application/components/new_theme_modal.tsx
new file mode 100644
index 000000000000..e1520e3b67b1
--- /dev/null
+++ b/src/plugins/home/public/application/components/new_theme_modal.tsx
@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { FC } from 'react';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiImage,
+  EuiLink,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { FormattedMessage } from '@osd/i18n/react';
+import { CoreStart } from 'opensearch-dashboards/public';
+import {
+  RedirectAppLinks,
+  useOpenSearchDashboards,
+} from '../../../../../../src/plugins/opensearch_dashboards_react/public';
+
+interface Props {
+  addBasePath: (path: string) => string;
+  onClose: () => void;
+}
+
+export const NewThemeModal: FC<Props> = ({ addBasePath, onClose }) => {
+  const {
+    services: { application },
+  } = useOpenSearchDashboards<CoreStart>();
+
+  return (
+    <EuiModal onClose={onClose}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          <FormattedMessage
+            id="home.newThemeModal.title"
+            defaultMessage="Introducing new OpenSearch Dashboards look & feel"
+          />
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <RedirectAppLinks application={application}>
+          <EuiText>
+            <FormattedMessage
+              id="home.newThemeModal.previewDescription.previewDetail"
+              defaultMessage="You are now previewing the newest OpenSearch Dashboards theme with improved light and dark
+            modes. You or your administrator can change to the previous theme by visiting {advancedSettingsLink}."
+              values={{
+                advancedSettingsLink: (
+                  <EuiLink
+                    href={addBasePath('/app/management/opensearch-dashboards/settings#appearance')}
+                  >
+                    <FormattedMessage
+                      id="home.newThemeModal.previewDescription.advancedSettingsLinkText"
+                      defaultMessage="Advanced Settings"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
+        </RedirectAppLinks>
+        <EuiSpacer />
+        <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem>
+            <EuiImage
+              url={addBasePath('/plugins/home/assets/new_theme_light.png')}
+              alt={i18n.translate('home.newThemeModal.lightModeImageAltDescription', {
+                defaultMessage: 'screenshot of new theme in light mode',
+              })}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiImage
+              url={addBasePath('/plugins/home/assets/new_theme_dark.png')}
+              alt={i18n.translate('home.newThemeModal.darkModeImageAltDescription', {
+                defaultMessage: 'screenshot of new theme in dark mode',
+              })}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButton onClick={onClose} fill>
+          <FormattedMessage id="home.newThemeModal.dismissButtonLabel" defaultMessage="Dismiss" />
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};
diff --git a/src/plugins/home/public/application/components/sample_data_set_cards.js b/src/plugins/home/public/application/components/sample_data_set_cards.js
index 0234f5f4a6e0..ee128e11ec75 100644
--- a/src/plugins/home/public/application/components/sample_data_set_cards.js
+++ b/src/plugins/home/public/application/components/sample_data_set_cards.js
@@ -201,9 +201,18 @@ export class SampleDataSetCards extends React.Component {
   };
 
   lightOrDarkImage = (sampleDataSet) => {
-    return getServices().uiSettings.get('theme:darkMode') && sampleDataSet.darkPreviewImagePath
-      ? sampleDataSet.darkPreviewImagePath
-      : sampleDataSet.previewImagePath;
+    let imagePath = sampleDataSet.previewImagePath;
+
+    if (sampleDataSet.darkPreviewImagePath && getServices().uiSettings.get('theme:darkMode')) {
+      imagePath = sampleDataSet.darkPreviewImagePath;
+    }
+
+    // For `next` theme, append `_new`
+    if (sampleDataSet.hasNewThemeImages && getServices().uiSettings.get('theme:version') !== 'v7') {
+      imagePath = imagePath.replace(/.png/, '_new.png');
+    }
+
+    return imagePath;
   };
 
   render() {
diff --git a/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap b/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap
index 2fb95d11d5c8..c88537eac658 100644
--- a/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap
+++ b/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap
@@ -1,186 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SolutionTitle  in dark mode renders the home dashboard logo using mark dark mode URL 1`] = `
-<EuiFlexGroup
-  alignItems="center"
-  gutterSize="none"
->
-  <EuiFlexItem
-    className="eui-textCenter"
-  >
-    <div
-      className="homSolutionPanel__customIcon"
-    >
-      <img
-        alt="custom title logo"
-        className="homSolutionPanel__customIconContainer"
-        data-test-image-url="/darkModeUrl"
-        data-test-subj="dashboardCustomLogo"
-        src="/darkModeUrl"
-      />
-    </div>
-    <EuiTitle
-      className="homSolutionPanel__title eui-textInheritColor"
-      data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
-      size="s"
-    >
-      <h3>
-        custom title
-      </h3>
-    </EuiTitle>
-    <EuiText
-      size="s"
-    >
-      <p
-        className="homSolutionPanel__subtitle"
-      >
-        Visualize & analyze
-         
-        <EuiIcon
-          type="sortRight"
-        />
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`SolutionTitle  in dark mode renders the home dashboard logo using mark default mode URL 1`] = `
-<EuiFlexGroup
-  alignItems="center"
-  gutterSize="none"
->
-  <EuiFlexItem
-    className="eui-textCenter"
-  >
-    <div
-      className="homSolutionPanel__customIcon"
-    >
-      <img
-        alt="custom title logo"
-        className="homSolutionPanel__customIconContainer"
-        data-test-image-url="/defaultModeUrl"
-        data-test-subj="dashboardCustomLogo"
-        src="/defaultModeUrl"
-      />
-    </div>
-    <EuiTitle
-      className="homSolutionPanel__title eui-textInheritColor"
-      data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
-      size="s"
-    >
-      <h3>
-        custom title
-      </h3>
-    </EuiTitle>
-    <EuiText
-      size="s"
-    >
-      <p
-        className="homSolutionPanel__subtitle"
-      >
-        Visualize & analyze
-         
-        <EuiIcon
-          type="sortRight"
-        />
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`SolutionTitle  in dark mode renders the home dashboard logo using original in and out door logo 1`] = `
-<EuiFlexGroup
-  alignItems="center"
-  gutterSize="none"
->
-  <EuiFlexItem
-    className="eui-textCenter"
-  >
-    <EuiToken
-      className="homSolutionPanel__icon"
-      fill="light"
-      iconType="undefined/opensearch_mark_dark_mode.svg"
-      shape="circle"
-      size="l"
-    />
-    <EuiTitle
-      className="homSolutionPanel__title eui-textInheritColor"
-      data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
-      size="s"
-    >
-      <h3>
-        custom title
-      </h3>
-    </EuiTitle>
-    <EuiText
-      size="s"
-    >
-      <p
-        className="homSolutionPanel__subtitle"
-      >
-        Visualize & analyze
-         
-        <EuiIcon
-          type="sortRight"
-        />
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`SolutionTitle  in default mode renders the home dashboard logo using mark default mode URL 1`] = `
-<EuiFlexGroup
-  alignItems="center"
-  gutterSize="none"
->
-  <EuiFlexItem
-    className="eui-textCenter"
-  >
-    <div
-      className="homSolutionPanel__customIcon"
-    >
-      <img
-        alt="custom title logo"
-        className="homSolutionPanel__customIconContainer"
-        data-test-image-url="/defaultModeUrl"
-        data-test-subj="dashboardCustomLogo"
-        src="/defaultModeUrl"
-      />
-    </div>
-    <EuiTitle
-      className="homSolutionPanel__title eui-textInheritColor"
-      data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
-      size="s"
-    >
-      <h3>
-        custom title
-      </h3>
-    </EuiTitle>
-    <EuiText
-      size="s"
-    >
-      <p
-        className="homSolutionPanel__subtitle"
-      >
-        Visualize & analyze
-         
-        <EuiIcon
-          type="sortRight"
-        />
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`SolutionTitle  in default mode renders the home dashboard logo using original in and out door logo 1`] = `
+exports[`SolutionTitle  renders correctly by default 1`] = `
 <EuiFlexGroup
   alignItems="center"
   gutterSize="none"
@@ -191,18 +11,18 @@ exports[`SolutionTitle  in default mode renders the home dashboard logo using or
     <EuiToken
       className="homSolutionPanel__icon"
       fill="light"
-      iconType="undefined/opensearch_mark_default_mode.svg"
+      iconType="/ui/logos/opensearch_mark_on_light.svg"
       shape="circle"
       size="l"
     />
     <EuiTitle
       className="homSolutionPanel__title eui-textInheritColor"
       data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
+      data-test-title="Page Title"
       size="s"
     >
       <h3>
-        custom title
+        Page Title
       </h3>
     </EuiTitle>
     <EuiText
@@ -222,7 +42,7 @@ exports[`SolutionTitle  in default mode renders the home dashboard logo using or
 </EuiFlexGroup>
 `;
 
-exports[`SolutionTitle  in default mode renders the title section of the solution panel 1`] = `
+exports[`SolutionTitle  renders correctly when branded 1`] = `
 <EuiFlexGroup
   alignItems="center"
   gutterSize="none"
@@ -234,21 +54,21 @@ exports[`SolutionTitle  in default mode renders the title section of the solutio
       className="homSolutionPanel__customIcon"
     >
       <img
-        alt="custom title logo"
+        alt="Page Title logo"
         className="homSolutionPanel__customIconContainer"
-        data-test-image-url="/defaultModeUrl"
+        data-test-image-url="/custom/branded/mark.svg"
         data-test-subj="dashboardCustomLogo"
-        src="/defaultModeUrl"
+        src="/custom/branded/mark.svg"
       />
     </div>
     <EuiTitle
       className="homSolutionPanel__title eui-textInheritColor"
       data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
+      data-test-title="Page Title"
       size="s"
     >
       <h3>
-        custom title
+        Page Title
       </h3>
     </EuiTitle>
     <EuiText
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
index c5b692450b3c..3a8c82235bee 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
@@ -30,6 +30,7 @@
 
 import React, { FC } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+import { Logos } from 'opensearch-dashboards/public';
 import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 import { SolutionTitle } from './solution_title';
@@ -64,9 +65,10 @@ interface Props {
   solution: FeatureCatalogueSolution;
   apps?: FeatureCatalogueEntry[];
   branding: HomePluginBranding;
+  logos: Logos;
 }
 
-export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [], branding }) => (
+export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [], branding, logos }) => (
   <EuiFlexItem
     key={solution.id}
     data-test-subj={`homSolutionPanel homSolutionPanel_${solution.id}`}
@@ -90,6 +92,7 @@ export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [], bra
               title={solution.title}
               subtitle={solution.subtitle}
               branding={branding}
+              logos={logos}
             />
           </EuiFlexItem>
 
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.test.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.test.tsx
index 5d4a6ebf079c..9d8f7662f8fb 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_title.test.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_title.test.tsx
@@ -31,6 +31,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { SolutionTitle } from './solution_title';
+import { getLogosMock } from '../../../../../../core/common/mocks';
 
 const solutionEntry = {
   id: 'opensearchDashboards',
@@ -42,121 +43,51 @@ const solutionEntry = {
   order: 1,
 };
 
+const mockTitle = 'Page Title';
+const makeProps = () => ({
+  title: solutionEntry.title,
+  subtitle: solutionEntry.subtitle,
+  iconType: solutionEntry.icon,
+  branding: {
+    applicationTitle: mockTitle,
+  },
+  logos: getLogosMock.default,
+});
+
 describe('SolutionTitle ', () => {
-  describe('in default mode', () => {
-    test('renders the title section of the solution panel', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeUrl',
-          darkModeUrl: '/darkModeUrl',
-        },
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+  it('renders correctly by default', () => {
+    const props = {
+      ...makeProps(),
+    };
+    const component = shallow(<SolutionTitle {...props} />);
+    const elements = component.find('EuiToken');
+    expect(elements.length).toEqual(1);
 
-    test('renders the home dashboard logo using mark default mode URL', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeUrl',
-          darkModeUrl: '/darkModeUrl',
-        },
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+    const img = elements.first();
+    expect(img.prop('iconType')).toEqual(props.logos.Mark.url);
 
-    test('renders the home dashboard logo using original in and out door logo', () => {
-      const branding = {
-        darkMode: false,
-        mark: {},
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+    const titles = component.find('EuiTitle > h3');
+    expect(titles.length).toEqual(1);
+    expect(titles.first().text()).toEqual(mockTitle);
+
+    expect(component).toMatchSnapshot();
   });
 
-  describe('in dark mode', () => {
-    test('renders the home dashboard logo using mark dark mode URL', () => {
-      const branding = {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeUrl',
-          darkModeUrl: '/darkModeUrl',
-        },
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
+  it('renders correctly when branded', () => {
+    const props = {
+      ...makeProps(),
+      logos: getLogosMock.branded,
+    };
+    const component = shallow(<SolutionTitle {...props} />);
+    const elements = component.find({
+      'data-test-subj': 'dashboardCustomLogo',
     });
+    expect(elements.length).toEqual(1);
 
-    test('renders the home dashboard logo using mark default mode URL', () => {
-      const branding = {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeUrl',
-        },
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+    const img = elements.first();
+    expect(img.prop('src')).toEqual(props.logos.Mark.url);
+    expect(img.prop('alt')).toEqual(`${mockTitle} logo`);
 
-    test('renders the home dashboard logo using original in and out door logo', () => {
-      const branding = {
-        darkMode: true,
-        mark: {},
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx
index 8a0db3ac1afb..f2a7af96d715 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx
@@ -29,6 +29,7 @@
  */
 
 import React, { FC } from 'react';
+import type { Logos } from 'opensearch-dashboards/public';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -53,97 +54,36 @@ interface Props {
    */
   iconType: IconType;
   branding: HomePluginBranding;
+  logos: Logos;
 }
 
 /**
- * Use branding configurations to check which URL to use for rendering
- * home card logo in default mode. In default mode, home card logo will
- * proritize default mode mark URL. If it is invalid, default opensearch logo
- * will be rendered.
- *
- * @param {HomePluginBranding} - pass in custom branding configurations
- * @returns a valid custom URL or undefined if no valid URL is provided
- */
-const customHomeLogoDefaultMode = (branding: HomePluginBranding) => {
-  return branding.mark?.defaultUrl ?? undefined;
-};
-
-/**
- * Use branding configurations to check which URL to use for rendering
- * home logo in dark mode. In dark mode, home logo will render
- * dark mode mark URL if valid. Otherwise, it will render the default
- * mode mark URL if valid. If both dark mode mark URL and default mode mark
- * URL are invalid, the default opensearch logo will be rendered.
- *
- * @param {HomePluginBranding} - pass in custom branding configurations
- * @returns {string|undefined} a valid custom URL or undefined if no valid URL is provided
+ * The component <EuiFlexGroup> that renders the blue dashboard card on home page.
+ * `title` and `iconType` are deprecated because SolutionTitle component will only be rendered once
+ * as the home dashboard card.
  */
-const customHomeLogoDarkMode = (branding: HomePluginBranding) => {
-  return branding.mark?.darkModeUrl ?? branding.mark?.defaultUrl ?? undefined;
-};
-
-/**
- * Render custom home logo for both default mode and dark mode
- *
- * @param {HomePluginBranding} - pass in custom branding configurations
- * @returns {string|undefined} a valid custom loading logo URL, or undefined
- */
-const customHomeLogo = (branding: HomePluginBranding) => {
-  return branding.darkMode ? customHomeLogoDarkMode(branding) : customHomeLogoDefaultMode(branding);
-};
-
-/**
- * Check if we render a custom home logo or the default opensearch spinner.
- * If customWelcomeLogo() returns undefined(no valid custom URL is found), we
- * render the default opensearch logo
- *
- * @param {HomePluginBranding} - pass in custom branding configurations
- * @returns a image component with custom logo URL, or the default opensearch logo
- */
-const renderBrandingEnabledOrDisabledLogo = (branding: HomePluginBranding) => {
-  const customLogo = customHomeLogo(branding);
-  if (customLogo) {
-    return (
-      <div className="homSolutionPanel__customIcon">
-        <img
-          className="homSolutionPanel__customIconContainer"
-          data-test-subj="dashboardCustomLogo"
-          data-test-image-url={customLogo}
-          alt={branding.applicationTitle + ' logo'}
-          src={customLogo}
-        />
-      </div>
-    );
-  }
-  const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`;
-  const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`;
-
-  return (
-    <EuiToken
-      iconType={branding.darkMode ? DARKMODE_OPENSEARCH_MARK : DEFAULT_OPENSEARCH_MARK}
-      shape="circle"
-      fill="light"
-      size="l"
-      className="homSolutionPanel__icon"
-    />
-  );
-};
-
-/**
- *
- * @param {string} title
- * @param {string} subtitle
- * @param {IconType} iconType - will always be inputOutput icon type here
- * @param {HomePluginBranding} branding - custom branding configurations
- *
- * @returns - a EUI component <EuiFlexGroup> that renders the blue dashboard card on home page,
- * title and iconType are deprecated here because SolutionTitle component will only be rendered once
- * as the home dashboard card, and we are now in favor of using custom branding configurations.
- */
-export const SolutionTitle: FC<Props> = ({ title, subtitle, iconType, branding }) => (
+export const SolutionTitle: FC<Props> = ({ subtitle, branding, logos }) => (
   <EuiFlexGroup gutterSize="none" alignItems="center">
     <EuiFlexItem className="eui-textCenter">
-      {renderBrandingEnabledOrDisabledLogo(branding)}
+      {logos.Mark.type === 'custom' ? (
+        <div className="homSolutionPanel__customIcon">
+          <img
+            className="homSolutionPanel__customIconContainer"
+            data-test-subj="dashboardCustomLogo"
+            data-test-image-url={logos.Mark.url}
+            alt={branding.applicationTitle + ' logo'}
+            src={logos.Mark.url}
+          />
+        </div>
+      ) : (
+        <EuiToken
+          iconType={logos.Mark.url}
+          shape="circle"
+          fill="light"
+          size="l"
+          className="homSolutionPanel__icon"
+        />
+      )}
 
       <EuiTitle
         className="homSolutionPanel__title eui-textInheritColor"
diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
index 8c9685f04908..96452f9ae779 100644
--- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
@@ -32,6 +32,7 @@ import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiScreenReaderOnly } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import { Logos } from 'opensearch-dashboards/public';
 import { SolutionPanel } from './solution_panel';
 import { HomePluginBranding } from '../../../plugin';
 import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../';
@@ -46,9 +47,16 @@ interface Props {
   solutions: FeatureCatalogueSolution[];
   directories: FeatureCatalogueEntry[];
   branding: HomePluginBranding;
+  logos: Logos;
 }
 
-export const SolutionsSection: FC<Props> = ({ addBasePath, solutions, directories, branding }) => {
+export const SolutionsSection: FC<Props> = ({
+  addBasePath,
+  solutions,
+  directories,
+  branding,
+  logos,
+}) => {
   // Separate OpenSearch Dashboards from other solutions
   const opensearchDashboards = solutions.find(({ id }) => id === 'opensearchDashboards');
   const opensearchDashboardsApps = directories
@@ -78,6 +86,7 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions, directorie
                     solution={solution}
                     addBasePath={addBasePath}
                     branding={branding}
+                    logos={logos}
                   />
                 ))}
               </EuiFlexGroup>
@@ -89,6 +98,7 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions, directorie
               addBasePath={addBasePath}
               apps={opensearchDashboardsApps.length ? opensearchDashboardsApps : undefined}
               branding={branding}
+              logos={logos}
             />
           ) : null}
         </EuiFlexGroup>
diff --git a/src/plugins/home/public/application/components/welcome.test.tsx b/src/plugins/home/public/application/components/welcome.test.tsx
index 6a08c977e157..c03bdff6aae0 100644
--- a/src/plugins/home/public/application/components/welcome.test.tsx
+++ b/src/plugins/home/public/application/components/welcome.test.tsx
@@ -32,6 +32,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Welcome } from './welcome';
 import { telemetryPluginMock } from '../../../../telemetry/public/mocks';
+import { getLogosMock } from '../../../../../core/common/mocks';
 
 jest.mock('../opensearch_dashboards_services', () => ({
   getServices: () => ({
@@ -48,120 +49,95 @@ test('should render a Welcome screen with the telemetry disclaimer', () => {
 });
 */
 
-const branding = {
-  darkMode: false,
-  mark: {
-    defaultUrl: '/',
+const mockTitle = 'Page Title';
+const makeProps = () => ({
+  urlBasePath: '/',
+  onSkip: jest.fn(),
+  branding: {
+    applicationTitle: mockTitle,
   },
-  applicationTitle: 'OpenSearch Dashboards',
-};
+  logos: getLogosMock.default,
+});
 
-describe('Welcome page ', () => {
-  describe('should render a Welcome screen ', () => {
-    test('with the telemetry disclaimer when optIn is true', () => {
+describe('Welcome page', () => {
+  describe('renders the Welcome screen', () => {
+    it('with the telemetry disclaimer when optIn is true', () => {
       const telemetry = telemetryPluginMock.createStartContract();
       telemetry.telemetryService.getIsOptedIn = jest.fn().mockReturnValue(true);
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} branding={branding} />
-      );
 
+      const props = {
+        ...makeProps(),
+        telemetry,
+      };
+      const component = shallow(<Welcome {...props} />);
       expect(component).toMatchSnapshot();
     });
 
-    test('with the telemetry disclaimer when optIn is false', () => {
+    it('with the telemetry disclaimer when optIn is false', () => {
       const telemetry = telemetryPluginMock.createStartContract();
       telemetry.telemetryService.getIsOptedIn = jest.fn().mockReturnValue(false);
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} branding={branding} />
-      );
 
+      const props = {
+        ...makeProps(),
+        telemetry,
+      };
+      const component = shallow(<Welcome {...props} />);
       expect(component).toMatchSnapshot();
     });
 
-    test('with no telemetry disclaimer', () => {
-      const component = shallow(<Welcome urlBasePath="/" onSkip={() => {}} branding={branding} />);
-
+    it('with no telemetry disclaimer', () => {
+      const props = {
+        ...makeProps(),
+      };
+      const component = shallow(<Welcome {...props} />);
       expect(component).toMatchSnapshot();
     });
 
-    test('fires opt-in seen when mounted', () => {
+    it('and fires opt-in seen when mounted', () => {
       const telemetry = telemetryPluginMock.createStartContract();
       const mockSetOptedInNoticeSeen = jest.fn();
       telemetry.telemetryNotifications.setOptedInNoticeSeen = mockSetOptedInNoticeSeen;
-      shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} branding={branding} />
-      );
+
+      const props = {
+        ...makeProps(),
+        telemetry,
+      };
+      shallow(<Welcome {...props} />);
 
       expect(mockSetOptedInNoticeSeen).toHaveBeenCalled();
     });
   });
 
-  describe('should render welcome logo in default mode ', () => {
-    test('using mark default mode URL', () => {
-      const customBranding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeMark',
-        },
-        applicationTitle: 'custom title',
+  describe('renders the welcome logo', () => {
+    it('with OpenSearch center mark when not branded', () => {
+      const props = {
+        ...makeProps(),
       };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={customBranding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+      const component = shallow(<Welcome {...props} />);
 
-    test('using the original OpenSearch Dashboards logo', () => {
-      const defaultBranding = {
-        darkMode: false,
-        mark: {},
-        applicationTitle: 'OpenSearch Dashboards',
-      };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={defaultBranding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
-  });
-  describe('should render welcome logo in dark mode ', () => {
-    test('using mark dark mode URL', () => {
-      const customBranding = {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeMark',
-          darkModeUrl: '/darkModeMark',
-        },
-        title: 'custom title',
-      };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={customBranding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+      const elements = component.find('EuiIcon');
+      expect(elements.length).toEqual(1);
+      expect(elements.first().prop('type')).toEqual(props.logos.CenterMark.url);
 
-    test('using mark default mode URL', () => {
-      const customBranding = {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeMark',
-        },
-        title: 'custom title',
-      };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={customBranding} />
-      );
       expect(component).toMatchSnapshot();
     });
 
-    test('using the original opensearch logo', () => {
-      const customBranding = {
-        darkMode: true,
-        mark: {},
-        title: 'custom title',
+    it('with custom branded logo when branded', () => {
+      const props = {
+        ...makeProps(),
+        logos: getLogosMock.branded,
       };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={customBranding} />
-      );
+      const component = shallow(<Welcome {...props} />);
+
+      const elements = component.find({
+        'data-test-subj': 'welcomeCustomLogo',
+      });
+      expect(elements.length).toEqual(1);
+
+      const img = elements.first();
+      expect(img.prop('src')).toEqual(props.logos.CenterMark.url);
+      expect(img.prop('alt')).toEqual(`${mockTitle} logo`);
+
       expect(component).toMatchSnapshot();
     });
   });
diff --git a/src/plugins/home/public/application/components/welcome.tsx b/src/plugins/home/public/application/components/welcome.tsx
index 1a364ce732bc..108180cacd99 100644
--- a/src/plugins/home/public/application/components/welcome.tsx
+++ b/src/plugins/home/public/application/components/welcome.tsx
@@ -47,23 +47,19 @@ import {
 } from '@elastic/eui';
 import { METRIC_TYPE } from '@osd/analytics';
 import { FormattedMessage } from '@osd/i18n/react';
+import { Logos } from 'opensearch-dashboards/public';
 import { getServices } from '../opensearch_dashboards_services';
 import { TelemetryPluginStart } from '../../../../telemetry/public';
-
 import { SampleDataCard } from './sample_data';
-import OpenSearchMarkCentered from '../../assets/logos/opensearch_mark_centered.svg';
+
 interface Props {
   urlBasePath: string;
   onSkip: () => void;
   telemetry?: TelemetryPluginStart;
   branding: {
-    darkMode: boolean;
-    mark: {
-      defaultUrl?: string;
-      darkModeUrl?: string;
-    };
     applicationTitle?: string;
   };
+  logos: Logos;
 }
 
 /**
@@ -146,72 +142,32 @@ export class Welcome extends React.Component<Props> {
     }
   };
 
-  private darkMode = this.props.branding.darkMode;
-  private markDefault = this.props.branding.mark.defaultUrl;
-  private markDarkMode = this.props.branding.mark.darkModeUrl;
   private applicationTitle = this.props.branding.applicationTitle;
 
   /**
-   * Use branding configurations to check which URL to use for rendering
-   * welcome logo in default mode. In default mode, welcome logo will
-   * proritize default mode mark URL. If it is invalid, default opensearch logo
-   * will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  private customWelcomeLogoDefaultMode = () => {
-    return this.markDefault ?? undefined;
-  };
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * welcome logo in dark mode. In dark mode, welcome logo will render
-   * dark mode mark URL if valid. Otherwise, it will render the default
-   * mode mark URL if valid. If both dark mode mark URL and default mode mark
-   * URL are invalid, the default opensearch logo will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
+   * Returns Welcome logo, wrapped in a container, using the custom branded logos or,
+   * the centered opensearch mark if no branding is provided.
    */
-  private customWelcomeLogoDarkMode = () => {
-    return this.markDarkMode ?? this.markDefault ?? undefined;
-  };
+  private renderWelcomeLogo = () => {
+    const { url: centerMarkURL, type: centerMarkType } = this.props.logos.CenterMark;
 
-  /**
-   * Render custom welcome logo for both default mode and dark mode
-   *
-   * @returns a valid custom loading logo URL, or undefined
-   */
-  private customWelcomeLogo = () => {
-    if (this.darkMode) {
-      return this.customWelcomeLogoDarkMode();
-    }
-    return this.customWelcomeLogoDefaultMode();
-  };
-
-  /**
-   * Check if we render a custom welcome logo or the default opensearch spinner.
-   * If customWelcomeLogo() returns undefined(no valid custom URL is found), we
-   * render the default opensearch logo
-   *
-   * @returns a image component with custom logo URL, or the default opensearch logo
-   */
-  private renderBrandingEnabledOrDisabledLogo = () => {
-    if (this.customWelcomeLogo()) {
+    if (centerMarkType === 'custom') {
       return (
         <div className="homWelcome__customLogoContainer">
           <img
             className="homWelcome__customLogo"
             data-test-subj="welcomeCustomLogo"
-            data-test-image-url={this.customWelcomeLogo()}
+            data-test-image-url={centerMarkURL}
             alt={this.applicationTitle + ' logo'}
-            src={this.customWelcomeLogo()}
+            src={centerMarkURL}
           />
         </div>
       );
     }
+
     return (
       <span className="homWelcome__logo">
-        <EuiIcon type={OpenSearchMarkCentered} size="original" />
+        <EuiIcon type={centerMarkURL} size="original" />
       </span>
     );
   };
@@ -224,7 +180,7 @@ export class Welcome extends React.Component<Props> {
           <header className="homWelcome__header">
             <div className="homWelcome__content eui-textCenter">
               <EuiSpacer size="xl" />
-              {this.renderBrandingEnabledOrDisabledLogo()}
+              {this.renderWelcomeLogo()}
               <EuiTitle
                 size="l"
                 className="homWelcome__title"
diff --git a/src/plugins/home/public/assets/logos/opensearch_mark_centered.svg b/src/plugins/home/public/assets/logos/opensearch_mark_centered.svg
deleted file mode 100644
index 649f8e3a5c90..000000000000
--- a/src/plugins/home/public/assets/logos/opensearch_mark_centered.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg height="64" width="64" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-      fill="#005EB8"
-    />
-    <path
-      d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-      fill="#003B5C"
-    />
-    <path
-      d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-      fill="#005EB8"
-    />
-  </svg>
\ No newline at end of file
diff --git a/src/plugins/home/public/assets/logos/opensearch_mark_default.svg b/src/plugins/home/public/assets/logos/opensearch_mark_default.svg
deleted file mode 100644
index e185d0fc8c3b..000000000000
--- a/src/plugins/home/public/assets/logos/opensearch_mark_default.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z" fill="#005EB8"/>
-    <path d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z" fill="#003B5C"/>
-    <path d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z" fill="#005EB8"/>
-</svg>
diff --git a/src/plugins/home/public/assets/new_theme_dark.png b/src/plugins/home/public/assets/new_theme_dark.png
new file mode 100644
index 000000000000..7ecfb8428eca
Binary files /dev/null and b/src/plugins/home/public/assets/new_theme_dark.png differ
diff --git a/src/plugins/home/public/assets/new_theme_light.png b/src/plugins/home/public/assets/new_theme_light.png
new file mode 100644
index 000000000000..ac97006c92a8
Binary files /dev/null and b/src/plugins/home/public/assets/new_theme_light.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/ecommerce/dashboard_dark_new.png b/src/plugins/home/public/assets/sample_data_resources/ecommerce/dashboard_dark_new.png
new file mode 100644
index 000000000000..ae396ca71a1f
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/ecommerce/dashboard_dark_new.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/ecommerce/dashboard_new.png b/src/plugins/home/public/assets/sample_data_resources/ecommerce/dashboard_new.png
new file mode 100644
index 000000000000..591843896f82
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/ecommerce/dashboard_new.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/flights/dashboard_dark_new.png b/src/plugins/home/public/assets/sample_data_resources/flights/dashboard_dark_new.png
new file mode 100644
index 000000000000..359837a1adde
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/flights/dashboard_dark_new.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/flights/dashboard_new.png b/src/plugins/home/public/assets/sample_data_resources/flights/dashboard_new.png
new file mode 100644
index 000000000000..214607738c8a
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/flights/dashboard_new.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_dark_new.png b/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_dark_new.png
new file mode 100644
index 000000000000..aea46ab5ae06
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_dark_new.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_new.png b/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_new.png
new file mode 100644
index 000000000000..7d1d5ce46319
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_new.png differ
diff --git a/src/plugins/home/server/index.ts b/src/plugins/home/server/index.ts
index 47c321243b5d..8a9052419009 100644
--- a/src/plugins/home/server/index.ts
+++ b/src/plugins/home/server/index.ts
@@ -38,6 +38,7 @@ import { configSchema, ConfigSchema } from '../config';
 export const config: PluginConfigDescriptor<ConfigSchema> = {
   exposeToBrowser: {
     disableWelcomeScreen: true,
+    disableNewThemeModal: true,
   },
   schema: configSchema,
   deprecations: ({ renameFromRoot }) => [
diff --git a/src/plugins/home/server/services/sample_data/data_sets/ecommerce/index.ts b/src/plugins/home/server/services/sample_data/data_sets/ecommerce/index.ts
index f7c80c5e63a8..75e9ea50ff87 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/ecommerce/index.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/ecommerce/index.ts
@@ -53,6 +53,7 @@ export const ecommerceSpecProvider = function (): SampleDatasetSchema {
     description: ecommerceDescription,
     previewImagePath: '/plugins/home/assets/sample_data_resources/ecommerce/dashboard.png',
     darkPreviewImagePath: '/plugins/home/assets/sample_data_resources/ecommerce/dashboard_dark.png',
+    hasNewThemeImages: true,
     overviewDashboard: DASHBOARD_ID,
     getDataSourceIntegratedDashboard: appendDataSourceId(DASHBOARD_ID),
     appLinks: initialAppLinks,
diff --git a/src/plugins/home/server/services/sample_data/data_sets/flights/index.ts b/src/plugins/home/server/services/sample_data/data_sets/flights/index.ts
index d93fd4d052ee..415d98027c4f 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/flights/index.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/flights/index.ts
@@ -53,6 +53,7 @@ export const flightsSpecProvider = function (): SampleDatasetSchema {
     description: flightsDescription,
     previewImagePath: '/plugins/home/assets/sample_data_resources/flights/dashboard.png',
     darkPreviewImagePath: '/plugins/home/assets/sample_data_resources/flights/dashboard_dark.png',
+    hasNewThemeImages: true,
     overviewDashboard: DASHBOARD_ID,
     getDataSourceIntegratedDashboard: appendDataSourceId(DASHBOARD_ID),
     appLinks: initialAppLinks,
diff --git a/src/plugins/home/server/services/sample_data/data_sets/logs/index.ts b/src/plugins/home/server/services/sample_data/data_sets/logs/index.ts
index 63013b63354e..0e8eaf99d411 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/logs/index.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/logs/index.ts
@@ -53,6 +53,7 @@ export const logsSpecProvider = function (): SampleDatasetSchema {
     description: logsDescription,
     previewImagePath: '/plugins/home/assets/sample_data_resources/logs/dashboard.png',
     darkPreviewImagePath: '/plugins/home/assets/sample_data_resources/logs/dashboard_dark.png',
+    hasNewThemeImages: true,
     overviewDashboard: DASHBOARD_ID,
     getDataSourceIntegratedDashboard: appendDataSourceId(DASHBOARD_ID),
     appLinks: initialAppLinks,
diff --git a/src/plugins/home/server/services/sample_data/lib/sample_dataset_registry_types.ts b/src/plugins/home/server/services/sample_data/lib/sample_dataset_registry_types.ts
index 3489b96bf751..5f6d036d6b39 100644
--- a/src/plugins/home/server/services/sample_data/lib/sample_dataset_registry_types.ts
+++ b/src/plugins/home/server/services/sample_data/lib/sample_dataset_registry_types.ts
@@ -85,6 +85,7 @@ export interface SampleDatasetSchema<T = unknown> {
   description: string;
   previewImagePath: string;
   darkPreviewImagePath: string;
+  hasNewThemeImages?: boolean;
 
   // saved object id of main dashboard for sample data set
   overviewDashboard: string;
diff --git a/src/plugins/home/server/services/sample_data/lib/sample_dataset_schema.ts b/src/plugins/home/server/services/sample_data/lib/sample_dataset_schema.ts
index d5963b7568b3..1e2951c596b9 100644
--- a/src/plugins/home/server/services/sample_data/lib/sample_dataset_schema.ts
+++ b/src/plugins/home/server/services/sample_data/lib/sample_dataset_schema.ts
@@ -71,6 +71,7 @@ export const sampleDataSchema = {
   description: Joi.string().required(),
   previewImagePath: Joi.string().required(),
   darkPreviewImagePath: Joi.string(),
+  hasNewThemeImages: Joi.boolean(),
 
   // saved object id of main dashboard for sample data set
   overviewDashboard: Joi.string().required(),
diff --git a/src/plugins/home/server/services/sample_data/routes/list.ts b/src/plugins/home/server/services/sample_data/routes/list.ts
index 0a42b073bde8..5d4b036a9ead 100644
--- a/src/plugins/home/server/services/sample_data/routes/list.ts
+++ b/src/plugins/home/server/services/sample_data/routes/list.ts
@@ -55,6 +55,7 @@ export const createListRoute = (router: IRouter, sampleDatasets: SampleDatasetSc
           description: sampleDataset.description,
           previewImagePath: sampleDataset.previewImagePath,
           darkPreviewImagePath: sampleDataset.darkPreviewImagePath,
+          hasNewThemeImages: sampleDataset.hasNewThemeImages,
           overviewDashboard: sampleDataset.getDataSourceIntegratedDashboard(dataSourceId),
           appLinks: sampleDataset.appLinks,
           defaultIndex: sampleDataset.getDataSourceIntegratedDefaultIndex(dataSourceId),
diff --git a/src/plugins/home/server/tutorials/opensearch_logs/index.ts b/src/plugins/home/server/tutorials/opensearch_logs/index.ts
index 59589e596822..86f8caebd0ac 100644
--- a/src/plugins/home/server/tutorials/opensearch_logs/index.ts
+++ b/src/plugins/home/server/tutorials/opensearch_logs/index.ts
@@ -58,7 +58,7 @@ export function opensearchLogsSpecProvider(context: TutorialContext): TutorialSc
         learnMoreLink: '{config.docs.beats.filebeat}/filebeat-module-opensearch.html',
       },
     }),
-    euiIconType: '/plugins/home/assets/logos/opensearch_mark_default.svg',
+    euiIconType: '/ui/logos/opensearch_mark.svg',
     artifacts: {
       application: {
         label: i18n.translate('home.tutorials.opensearchLogs.artifacts.application.label', {
diff --git a/src/plugins/home/server/tutorials/opensearch_metrics/index.ts b/src/plugins/home/server/tutorials/opensearch_metrics/index.ts
index e7a2559d2df8..38694ca9d588 100644
--- a/src/plugins/home/server/tutorials/opensearch_metrics/index.ts
+++ b/src/plugins/home/server/tutorials/opensearch_metrics/index.ts
@@ -57,7 +57,7 @@ export function opensearchMetricsSpecProvider(context: TutorialContext): Tutoria
         learnMoreLink: '{config.docs.beats.metricbeat}/metricbeat-module-opensearch.html',
       },
     }),
-    euiIconType: '/plugins/home/assets/logos/opensearch_mark_default.svg',
+    euiIconType: '/ui/logos/opensearch_mark.svg',
     artifacts: {
       application: {
         label: i18n.translate('home.tutorials.opensearchMetrics.artifacts.application.label', {
diff --git a/src/plugins/management/public/plugin.ts b/src/plugins/management/public/plugin.ts
index 4cc1c4aa7f8f..81a970a0fc48 100644
--- a/src/plugins/management/public/plugin.ts
+++ b/src/plugins/management/public/plugin.ts
@@ -76,7 +76,7 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
       id: MANAGEMENT_APP_ID,
       title: this.title,
       order: 9030,
-      icon: '/plugins/home/assets/logos/opensearch_mark_default.svg',
+      icon: '/ui/logos/opensearch_mark.svg',
       category: DEFAULT_APP_CATEGORIES.management,
       updater$: this.appUpdater,
       async mount(params: AppMountParameters) {
diff --git a/src/plugins/management_overview/public/__snapshots__/application.test.tsx.snap b/src/plugins/management_overview/public/__snapshots__/application.test.tsx.snap
new file mode 100644
index 000000000000..666f1b50c696
--- /dev/null
+++ b/src/plugins/management_overview/public/__snapshots__/application.test.tsx.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Overview page rendering should render normally 1`] = `
+<div
+  class="euiPage euiPage--paddingMedium euiPage--grow euiPage--restrictWidth-custom"
+  style="max-width: 1200px;"
+>
+  <main
+    class="euiPageBody euiPageBody--borderRadiusNone"
+  >
+    <h1
+      class="euiTitle euiTitle--large"
+    >
+      <span>
+        Overview
+      </span>
+    </h1>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+    <div
+      class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds euiFlexGrid--responsive"
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <div
+          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--horizontal euiCard--isClickable"
+          data-test-subj="link-dev_tools"
+        >
+          <div
+            class="euiCard__content"
+          >
+            <h3
+              class="euiTitle euiTitle--xsmall euiCard__title"
+              id="generated-idTitle"
+            >
+              <button
+                aria-describedby=" generated-idDescription"
+                class="euiCard__titleButton"
+              >
+                Dev Tools
+              </button>
+            </h3>
+            <div
+              class="euiText euiText--small euiCard__description"
+              id="generated-idDescription"
+            >
+              <p>
+                dev tools description
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+`;
diff --git a/src/plugins/management_overview/public/application.test.tsx b/src/plugins/management_overview/public/application.test.tsx
new file mode 100644
index 000000000000..3f879f05b5da
--- /dev/null
+++ b/src/plugins/management_overview/public/application.test.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '@testing-library/react';
+import { ManagementOverviewWrapper } from './application';
+import React from 'react';
+import { ApplicationStart, PublicAppInfo } from 'opensearch-dashboards/public';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { deepFreeze } from '@osd/std';
+import { OverviewApp } from './overview_app';
+import { AppNavLinkStatus, AppStatus } from '../../../core/public';
+
+const applicationStartMock = (apps: Map<string, PublicAppInfo>): jest.Mocked<ApplicationStart> => {
+  const currentAppId$ = new Subject<string | undefined>();
+
+  return {
+    applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(apps),
+    currentAppId$: currentAppId$.asObservable(),
+    capabilities: deepFreeze({
+      catalogue: {},
+      management: {},
+      navLinks: {},
+    }),
+    navigateToApp: jest.fn(),
+    navigateToUrl: jest.fn(),
+    getUrlForApp: jest.fn(),
+    registerMountContext: jest.fn(),
+  };
+};
+
+function renderOverviewPage(apps: Map<string, PublicAppInfo>, overviewApps?: OverviewApp[]) {
+  return render(
+    <ManagementOverviewWrapper
+      application={applicationStartMock(apps)}
+      overviewApps={overviewApps}
+    />
+  );
+}
+
+describe('Overview page rendering', () => {
+  it('should render normally', () => {
+    const overviewApps: OverviewApp[] = [
+      {
+        id: 'dev_tools',
+        title: 'Dev Tools',
+        description: 'dev tools description',
+        order: 0,
+      },
+    ];
+
+    const apps: Map<string, PublicAppInfo> = new Map<string, PublicAppInfo>();
+    apps.set('dev_tools', {
+      status: AppStatus.accessible,
+      navLinkStatus: AppNavLinkStatus.default,
+      appRoute: '/app/console',
+    } as PublicAppInfo);
+    const { container, queryByText } = renderOverviewPage(apps, overviewApps);
+    expect(container.firstChild).toMatchSnapshot();
+    expect(queryByText('Dev Tools')).not.toBeNull();
+  });
+
+  it('should render normally when no overview app', () => {
+    const { queryByText } = renderOverviewPage(new Map<string, PublicAppInfo>());
+    expect(queryByText('Overview')).not.toBeNull();
+  });
+
+  it('should render normally when no application available', () => {
+    const overviewApps: OverviewApp[] = [
+      {
+        id: 'dev_tools',
+        title: 'Dev Tools',
+        description: 'dev tools description',
+        order: 0,
+      },
+    ];
+    const { queryByText } = renderOverviewPage(new Map<string, PublicAppInfo>(), overviewApps);
+    expect(queryByText('Dev Tools')).toBeNull();
+  });
+
+  it('should not display overview app when nav link status is hidden', () => {
+    const overviewApps: OverviewApp[] = [
+      {
+        id: 'dev_tools',
+        title: 'Dev Tools',
+        description: 'dev tools description',
+        order: 0,
+      },
+    ];
+
+    const apps: Map<string, PublicAppInfo> = new Map<string, PublicAppInfo>();
+    apps.set('dev_tools', {
+      status: AppStatus.accessible,
+      navLinkStatus: AppNavLinkStatus.hidden,
+      appRoute: '/app/console',
+    } as PublicAppInfo);
+    const { queryByText } = renderOverviewPage(apps, overviewApps);
+    expect(queryByText('Dev Tools')).toBeNull();
+  });
+
+  it('should not display overview app when it is invalid app', () => {
+    const overviewApps: OverviewApp[] = [
+      {
+        id: 'invalid_app_id',
+        title: 'Dev Tools',
+        description: 'dev tools description',
+        order: 0,
+      },
+    ];
+
+    const apps: Map<string, PublicAppInfo> = new Map<string, PublicAppInfo>();
+    apps.set('dev_tools', {
+      status: AppStatus.accessible,
+      navLinkStatus: AppNavLinkStatus.hidden,
+      appRoute: '/app/console',
+    } as PublicAppInfo);
+    const { queryByText } = renderOverviewPage(apps, overviewApps);
+    expect(queryByText('Dev Tools')).toBeNull();
+  });
+});
diff --git a/src/plugins/management_overview/public/application.tsx b/src/plugins/management_overview/public/application.tsx
index 26ee63e78252..805c43081fdd 100644
--- a/src/plugins/management_overview/public/application.tsx
+++ b/src/plugins/management_overview/public/application.tsx
@@ -5,28 +5,28 @@
 
 import ReactDOM from 'react-dom';
 import { I18nProvider, FormattedMessage } from '@osd/i18n/react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiPage, EuiPageBody, EuiSpacer, EuiTitle } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
-import { ApplicationStart, ChromeStart, CoreStart } from '../../../core/public';
+import { ApplicationStart, AppNavLinkStatus, CoreStart } from '../../../core/public';
 import { OverviewApp } from '.';
 import { OverviewCard } from './components/overview_card';
 
 export interface ManagementOverviewProps {
   application: ApplicationStart;
-  chrome: ChromeStart;
   overviewApps?: OverviewApp[];
 }
 
-function ManagementOverviewWrapper(props: ManagementOverviewProps) {
-  const { chrome, application, overviewApps } = props;
+export function ManagementOverviewWrapper(props: ManagementOverviewProps) {
+  const { application, overviewApps } = props;
+  const applications = useObservable(application.applications$);
 
-  const hiddenAppIds =
-    useObservable(chrome.navLinks.getNavLinks$())
-      ?.filter((link) => link.hidden)
-      .map((link) => link.id) || [];
-
-  const availableApps = overviewApps?.filter((app) => hiddenAppIds.indexOf(app.id) === -1);
+  const availableApps = useMemo(() => {
+    return overviewApps?.filter((overviewApp) => {
+      const app = applications?.get(overviewApp.id);
+      return app && app.navLinkStatus !== AppNavLinkStatus.hidden;
+    });
+  }, [applications, overviewApps]);
 
   return (
     <EuiPage restrictWidth={1200}>
@@ -61,11 +61,7 @@ export function renderApp(
 ) {
   ReactDOM.render(
     <I18nProvider>
-      <ManagementOverviewWrapper
-        chrome={chrome}
-        application={application}
-        overviewApps={overviewApps}
-      />
+      <ManagementOverviewWrapper application={application} overviewApps={overviewApps} />
     </I18nProvider>,
     element
   );
diff --git a/src/plugins/management_overview/public/plugin.ts b/src/plugins/management_overview/public/plugin.ts
index b588d50e23da..f11b58ef9b41 100644
--- a/src/plugins/management_overview/public/plugin.ts
+++ b/src/plugins/management_overview/public/plugin.ts
@@ -22,8 +22,13 @@ interface ManagementOverviewSetupDeps {
 export interface ManagementOverViewPluginSetup {
   register: (overviewApp: OverviewApp) => void;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ManagementOverViewPluginStart {}
+
 /** @public */
-export class ManagementOverViewPlugin implements Plugin<ManagementOverViewPluginSetup, void> {
+export class ManagementOverViewPlugin
+  implements Plugin<ManagementOverViewPluginSetup, ManagementOverViewPluginStart> {
   private readonly overviewApps = new Map<string, OverviewApp>();
 
   private getSortedOverviewApps(): OverviewApp[] {
@@ -57,7 +62,7 @@ export class ManagementOverViewPlugin implements Plugin<ManagementOverViewPlugin
       title: i18n.translate('management.overview.overviewTitle', {
         defaultMessage: 'Overview',
       }),
-      icon: '/plugins/home/public/assets/logos/opensearch_mark_default.svg',
+      icon: '/ui/logos/opensearch_mark.svg',
       order: 9000,
       category: DEFAULT_APP_CATEGORIES.management,
       mount: async (params: AppMountParameters) => {
@@ -82,5 +87,7 @@ export class ManagementOverViewPlugin implements Plugin<ManagementOverViewPlugin
     };
   }
 
-  public start(core: CoreStart): void {}
+  public start(core: CoreStart): ManagementOverViewPluginStart {
+    return {};
+  }
 }
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
index 3865e9852882..f541456c93b4 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
@@ -45,6 +45,8 @@ export interface TopNavMenuData {
   emphasize?: boolean;
   iconType?: EuiIconType;
   iconSide?: EuiButtonProps['iconSide'];
+  // @deprecated - experimental, do not use yet. Will be removed in a future minor version
+  type?: 'toggle' | 'button';
 }
 
 export interface RegisteredTopNavMenuData extends TopNavMenuData {
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
index 7f987d937b96..bbc6ff1a7165 100644
--- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
+++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
@@ -30,7 +30,7 @@
 
 import { upperFirst, isFunction } from 'lodash';
 import React, { MouseEvent } from 'react';
-import { EuiToolTip, EuiButton, EuiHeaderLink } from '@elastic/eui';
+import { EuiToolTip, EuiButton, EuiHeaderLink, EuiSwitch } from '@elastic/eui';
 import { TopNavMenuData } from './top_nav_menu_data';
 
 export function TopNavMenuItem(props: TopNavMenuData) {
@@ -58,21 +58,36 @@ export function TopNavMenuItem(props: TopNavMenuData) {
     className: props.className,
   };
 
-  const btn = props.emphasize ? (
-    <EuiButton size="s" {...commonButtonProps}>
-      {upperFirst(props.label || props.id!)}
-    </EuiButton>
-  ) : (
-    <EuiHeaderLink size="xs" color="primary" {...commonButtonProps}>
-      {upperFirst(props.label || props.id!)}
-    </EuiHeaderLink>
-  );
+  let component;
+  if (props.type === 'toggle') {
+    component = (
+      <EuiSwitch
+        label={upperFirst(props.label || props.id!)}
+        checked={props.emphasize || false}
+        onChange={(e) => {
+          handleClick((e as unknown) as MouseEvent<HTMLButtonElement>);
+        }}
+        data-test-subj={props.testId}
+        className={props.className}
+      />
+    );
+  } else {
+    component = props.emphasize ? (
+      <EuiButton size="s" {...commonButtonProps}>
+        {upperFirst(props.label || props.id!)}
+      </EuiButton>
+    ) : (
+      <EuiHeaderLink size="xs" color="primary" {...commonButtonProps}>
+        {upperFirst(props.label || props.id!)}
+      </EuiHeaderLink>
+    );
+  }
 
   const tooltip = getTooltip();
   if (tooltip) {
-    return <EuiToolTip content={tooltip}>{btn}</EuiToolTip>;
+    return <EuiToolTip content={tooltip}>{component}</EuiToolTip>;
   }
-  return btn;
+  return component;
 }
 
 TopNavMenuItem.defaultProps = {
diff --git a/src/plugins/opensearch_dashboards_overview/public/application.tsx b/src/plugins/opensearch_dashboards_overview/public/application.tsx
index f6d0e172e394..26bf7294263c 100644
--- a/src/plugins/opensearch_dashboards_overview/public/application.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/application.tsx
@@ -51,7 +51,6 @@ export const renderApp = (
     .filter(({ id }) => id !== 'opensearchDashboards')
     .filter(({ id }) => navLinks.find(({ category, hidden }) => !hidden && category?.id === id));
   const features = home.featureCatalogue.get();
-  const branding = core.injectedMetadata.getBranding();
 
   ReactDOM.render(
     <I18nProvider>
@@ -64,7 +63,7 @@ export const renderApp = (
           newsfeed$={newsfeed$}
           solutions={solutions}
           features={features}
-          branding={branding}
+          logos={core.chrome.logos}
         />
       </OpenSearchDashboardsContextProvider>
     </I18nProvider>,
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/app.tsx b/src/plugins/opensearch_dashboards_overview/public/components/app.tsx
index dfd3b717981f..def278cdd200 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/app.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/components/app.tsx
@@ -32,12 +32,11 @@ import React, { useEffect, useState } from 'react';
 import { Observable } from 'rxjs';
 import { I18nProvider } from '@osd/i18n/react';
 import { HashRouter as Router, Switch, Route } from 'react-router-dom';
-import { CoreStart } from 'src/core/public';
+import { CoreStart, Logos } from 'src/core/public';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { FetchResult } from 'src/plugins/newsfeed/public';
 import { FeatureCatalogueEntry, FeatureCatalogueSolution } from 'src/plugins/home/public';
 import { Overview } from './overview';
-import { OverviewPluginBranding } from '../plugin';
 
 interface OpenSearchDashboardsOverviewAppDeps {
   basename: string;
@@ -47,7 +46,7 @@ interface OpenSearchDashboardsOverviewAppDeps {
   newsfeed$?: Observable<FetchResult | null | void>;
   solutions: FeatureCatalogueSolution[];
   features: FeatureCatalogueEntry[];
-  branding: OverviewPluginBranding;
+  logos: Logos;
 }
 
 export const OpenSearchDashboardsOverviewApp = ({
@@ -55,7 +54,7 @@ export const OpenSearchDashboardsOverviewApp = ({
   newsfeed$,
   solutions,
   features,
-  branding,
+  logos,
 }: OpenSearchDashboardsOverviewAppDeps) => {
   const [newsFetchResult, setNewsFetchResult] = useState<FetchResult | null | void>(null);
 
@@ -78,7 +77,7 @@ export const OpenSearchDashboardsOverviewApp = ({
               newsFetchResult={newsFetchResult}
               solutions={solutions}
               features={features}
-              branding={branding}
+              logos={logos}
             />
           </Route>
         </Switch>
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/overview/__snapshots__/overview.test.tsx.snap b/src/plugins/opensearch_dashboards_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
index e352dd58236c..6d92c8759243 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Overview render 1`] = `
+exports[`Overview renders with solutions and features 1`] = `
 <main
   aria-labelledby="osdOverviewPageHeader__title"
   className="osdOverviewWrapper"
@@ -70,17 +70,73 @@ exports[`Overview render 1`] = `
         ],
       }
     }
-    branding={
+    hideToolbar={false}
+    logos={
       Object {
-        "darkMode": false,
-        "mark": Object {
-          "darkModeUrl": "/darkModeUrl",
-          "defaultUrl": "/defaultModeUrl",
+        "AnimatedMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "Application": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "CenterMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "Mark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
         },
+        "OpenSearch": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
+        },
+        "colorScheme": "light",
       }
     }
-    hideToolbar={false}
-    iconType="inputOutput"
+    showIcon={true}
     title={
       <FormattedMessage
         defaultMessage="OpenSearch Dashboards"
@@ -373,7 +429,7 @@ exports[`Overview render 1`] = `
 </main>
 `;
 
-exports[`Overview without features 1`] = `
+exports[`Overview renders with solutions and without features 1`] = `
 <main
   aria-labelledby="osdOverviewPageHeader__title"
   className="osdOverviewWrapper"
@@ -499,17 +555,73 @@ exports[`Overview without features 1`] = `
         ],
       }
     }
-    branding={
+    hideToolbar={false}
+    logos={
       Object {
-        "darkMode": false,
-        "mark": Object {
-          "darkModeUrl": "/darkModeUrl",
-          "defaultUrl": "/defaultModeUrl",
+        "AnimatedMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "Application": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "CenterMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "Mark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "OpenSearch": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
         },
+        "colorScheme": "light",
       }
     }
-    hideToolbar={false}
-    iconType="inputOutput"
+    showIcon={true}
     title={
       <FormattedMessage
         defaultMessage="OpenSearch Dashboards"
@@ -858,7 +970,7 @@ exports[`Overview without features 1`] = `
 </main>
 `;
 
-exports[`Overview without solutions 1`] = `
+exports[`Overview renders without solutions and with features 1`] = `
 <main
   aria-labelledby="osdOverviewPageHeader__title"
   className="osdOverviewWrapper"
@@ -928,17 +1040,73 @@ exports[`Overview without solutions 1`] = `
         ],
       }
     }
-    branding={
+    hideToolbar={false}
+    logos={
       Object {
-        "darkMode": false,
-        "mark": Object {
-          "darkModeUrl": "/darkModeUrl",
-          "defaultUrl": "/defaultModeUrl",
+        "AnimatedMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "Application": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "CenterMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "Mark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "OpenSearch": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
         },
+        "colorScheme": "light",
       }
     }
-    hideToolbar={false}
-    iconType="inputOutput"
+    showIcon={true}
     title={
       <FormattedMessage
         defaultMessage="OpenSearch Dashboards"
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx b/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx
index 1e105c56e574..fc33d4a8836a 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx
@@ -33,6 +33,7 @@ import React from 'react';
 import { Overview } from './overview';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { FeatureCatalogueCategory } from 'src/plugins/home/public';
+import { getLogosMock } from '../../../../../core/common/mocks';
 
 jest.mock('../../../../../../src/plugins/opensearch_dashboards_react/public', () => ({
   useOpenSearchDashboards: jest.fn().mockReturnValue({
@@ -163,46 +164,42 @@ const mockFeatures = [
   },
 ];
 
-const mockBranding = {
-  darkMode: false,
-  mark: {
-    defaultUrl: '/defaultModeUrl',
-    darkModeUrl: '/darkModeUrl',
-  },
-};
+const makeProps = () => ({
+  newsFetchResult: mockNewsFetchResult,
+  solutions: mockSolutions,
+  features: mockFeatures,
+  logos: getLogosMock.default,
+});
 
 describe('Overview', () => {
-  test('render', () => {
-    const component = shallowWithIntl(
-      <Overview
-        newsFetchResult={mockNewsFetchResult}
-        solutions={mockSolutions}
-        features={mockFeatures}
-        branding={mockBranding}
-      />
-    );
-    expect(component).toMatchSnapshot();
-  });
-  test('without solutions', () => {
-    const component = shallowWithIntl(
-      <Overview
-        newsFetchResult={mockNewsFetchResult}
-        solutions={[]}
-        features={mockFeatures}
-        branding={mockBranding}
-      />
-    );
-    expect(component).toMatchSnapshot();
-  });
-  test('without features', () => {
-    const component = shallowWithIntl(
-      <Overview
-        newsFetchResult={mockNewsFetchResult}
-        solutions={mockSolutions}
-        features={[]}
-        branding={mockBranding}
-      />
-    );
-    expect(component).toMatchSnapshot();
+  describe('renders', () => {
+    it('with solutions and features', () => {
+      const props = {
+        ...makeProps(),
+      };
+      const component = shallowWithIntl(<Overview {...props} />);
+      expect(component).toMatchSnapshot();
+    });
+
+    it('without solutions and with features', () => {
+      const props = {
+        ...makeProps(),
+        solutions: [],
+      };
+      const component = shallowWithIntl(<Overview {...props} />);
+      expect(component).toMatchSnapshot();
+    });
+    it('with solutions and without features', () => {
+      const props = {
+        ...makeProps(),
+        features: [],
+      };
+      const component = shallowWithIntl(<Overview {...props} />);
+      expect(component).toMatchSnapshot();
+    });
   });
+
+  // ToDo: Add tests for all the complications of Overview
+  // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4693
+  it.todo('renders each of the complications of Overview');
 });
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx b/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx
index 3df491b1b422..30df4dbe8146 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx
@@ -41,7 +41,7 @@ import {
   EuiToken,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
-import { CoreStart } from 'opensearch-dashboards/public';
+import { CoreStart, Logos } from 'opensearch-dashboards/public';
 import {
   RedirectAppLinks,
   useOpenSearchDashboards,
@@ -60,18 +60,18 @@ import { AddData } from '../add_data';
 import { GettingStarted } from '../getting_started';
 import { ManageData } from '../manage_data';
 import { NewsFeed } from '../news_feed';
-import { OverviewPluginBranding } from '../../plugin';
 
 const sortByOrder = (featureA: FeatureCatalogueEntry, featureB: FeatureCatalogueEntry) =>
   (featureA.order || Infinity) - (featureB.order || Infinity);
+
 interface Props {
   newsFetchResult: FetchResult | null | void;
   solutions: FeatureCatalogueSolution[];
   features: FeatureCatalogueEntry[];
-  branding: OverviewPluginBranding;
+  logos: Logos;
 }
 
-export const Overview: FC<Props> = ({ newsFetchResult, solutions, features, branding }) => {
+export const Overview: FC<Props> = ({ newsFetchResult, solutions, features, logos }) => {
   const [isNewOpenSearchDashboardsInstance, setNewOpenSearchDashboardsInstance] = useState(false);
   const {
     services: { http, data, uiSettings, application },
@@ -147,14 +147,14 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features, bran
       <OverviewPageHeader
         addBasePath={addBasePath}
         hideToolbar={isNewOpenSearchDashboardsInstance}
-        iconType="inputOutput"
+        showIcon={true}
         title={
           <FormattedMessage
             defaultMessage="OpenSearch Dashboards"
             id="opensearchDashboardsOverview.header.title"
           />
         }
-        branding={branding}
+        logos={logos}
       />
 
       <div className="osdOverviewContent">
diff --git a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap
index 028a23d69e76..1a88da2e58f4 100644
--- a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap
@@ -1,96 +1,178 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`is rendered 1`] = `
-<ExitFullScreenButtonUi
-  onExitFullScreenMode={[Function]}
->
+exports[`ExitFullScreenButton is rendered using the dark theme's mark by default 1`] = `
+<div>
+  <EuiScreenReaderOnly>
+    <p
+      aria-live="polite"
+    >
+      In full screen mode, press ESC to exit.
+    </p>
+  </EuiScreenReaderOnly>
   <div>
-    <EuiScreenReaderOnly>
-      <p
-        aria-live="polite"
-        className="euiScreenReaderOnly"
+    <button
+      aria-label="Exit full screen mode"
+      className="dshExitFullScreenButton"
+      data-test-subj="exitFullScreenModeLogo"
+      onClick={[MockFunction]}
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        component="span"
+        gutterSize="s"
+        responsive={false}
       >
-        In full screen mode, press ESC to exit.
-      </p>
-    </EuiScreenReaderOnly>
-    <div>
-      <button
-        aria-label="Exit full screen mode"
-        className="dshExitFullScreenButton"
-        data-test-subj="exitFullScreenModeLogo"
-        onClick={[Function]}
-      >
-        <EuiFlexGroup
-          alignItems="center"
-          component="span"
-          gutterSize="s"
-          responsive={false}
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            size="l"
+            type="/ui/logos/opensearch_mark_on_dark.svg"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          data-test-subj="exitFullScreenModeText"
+          grow={false}
         >
-          <span
-            className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-          >
-            <EuiFlexItem
-              grow={false}
+          <div>
+            <EuiText
+              className="dshExitFullScreenButton__text"
+              size="s"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <EuiIcon
-                  size="l"
-                  type="test-file-stub"
-                >
-                  <span
-                    data-euiicon-type="test-file-stub"
-                    size="l"
-                  />
-                </EuiIcon>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              data-test-subj="exitFullScreenModeText"
-              grow={false}
+              <p>
+                Exit full screen
+              </p>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            className="dshExitFullScreenButton__icon"
+            type="fullScreen"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ExitFullScreenButton is rendered using the dark theme's mark when light color-scheme is applied 1`] = `
+<div>
+  <EuiScreenReaderOnly>
+    <p
+      aria-live="polite"
+    >
+      In full screen mode, press ESC to exit.
+    </p>
+  </EuiScreenReaderOnly>
+  <div>
+    <button
+      aria-label="Exit full screen mode"
+      className="dshExitFullScreenButton"
+      data-test-subj="exitFullScreenModeLogo"
+      onClick={[MockFunction]}
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        component="span"
+        gutterSize="s"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            size="l"
+            type="/ui/logos/opensearch_mark_on_dark.svg"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          data-test-subj="exitFullScreenModeText"
+          grow={false}
+        >
+          <div>
+            <EuiText
+              className="dshExitFullScreenButton__text"
+              size="s"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-                data-test-subj="exitFullScreenModeText"
-              >
-                <div>
-                  <EuiText
-                    className="dshExitFullScreenButton__text"
-                    size="s"
-                  >
-                    <div
-                      className="euiText euiText--small dshExitFullScreenButton__text"
-                    >
-                      <p>
-                        Exit full screen
-                      </p>
-                    </div>
-                  </EuiText>
-                </div>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
+              <p>
+                Exit full screen
+              </p>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            className="dshExitFullScreenButton__icon"
+            type="fullScreen"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ExitFullScreenButton is rendered using the light theme's mark when dark color-scheme is applied 1`] = `
+<div>
+  <EuiScreenReaderOnly>
+    <p
+      aria-live="polite"
+    >
+      In full screen mode, press ESC to exit.
+    </p>
+  </EuiScreenReaderOnly>
+  <div>
+    <button
+      aria-label="Exit full screen mode"
+      className="dshExitFullScreenButton"
+      data-test-subj="exitFullScreenModeLogo"
+      onClick={[MockFunction]}
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        component="span"
+        gutterSize="s"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            size="l"
+            type="/ui/logos/opensearch_mark_on_light.svg"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          data-test-subj="exitFullScreenModeText"
+          grow={false}
+        >
+          <div>
+            <EuiText
+              className="dshExitFullScreenButton__text"
+              size="s"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <EuiIcon
-                  className="dshExitFullScreenButton__icon"
-                  type="fullScreen"
-                >
-                  <span
-                    className="dshExitFullScreenButton__icon"
-                    data-euiicon-type="fullScreen"
-                  />
-                </EuiIcon>
-              </div>
-            </EuiFlexItem>
-          </span>
-        </EuiFlexGroup>
-      </button>
-    </div>
+              <p>
+                Exit full screen
+              </p>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            className="dshExitFullScreenButton__icon"
+            type="fullScreen"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </button>
   </div>
-</ExitFullScreenButtonUi>
+</div>
 `;
diff --git a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx
index cae20349cf3e..fd5a11011bdc 100644
--- a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx
@@ -29,36 +29,80 @@
  */
 
 import React from 'react';
-import sinon from 'sinon';
 import { ExitFullScreenButton } from './exit_full_screen_button';
 import { keys } from '@elastic/eui';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
+import { getLogosMock } from '../../../../core/common/mocks';
+import { ColorScheme } from '../../../../core/common';
 
-test('is rendered', () => {
-  const component = mount(<ExitFullScreenButton onExitFullScreenMode={() => {}} />);
-
-  expect(component).toMatchSnapshot();
+const mockProps = () => ({
+  onExitFullScreenMode: jest.fn(),
+  logos: getLogosMock.default,
 });
 
-describe('onExitFullScreenMode', () => {
-  test('is called when the button is pressed', () => {
-    const onExitHandler = sinon.stub();
+describe('ExitFullScreenButton', () => {
+  it("is rendered using the dark theme's mark by default", () => {
+    const props = {
+      ...mockProps(),
+    };
+    const component = shallow(<ExitFullScreenButton {...props} />);
+    // In light color-scheme, the button has a dark background
+    const icons = component.find(`EuiIcon[type="${props.logos.Mark.dark.url}"]`);
 
-    const component = mount(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
+    expect(icons.length).toEqual(1);
 
-    component.find('button').simulate('click');
+    expect(component).toMatchSnapshot();
+  });
 
-    sinon.assert.calledOnce(onExitHandler);
+  it("is rendered using the dark theme's mark when light color-scheme is applied", () => {
+    const props = {
+      ...mockProps(),
+      logos: { ...getLogosMock.default, colorScheme: ColorScheme.LIGHT },
+    };
+    const component = shallow(<ExitFullScreenButton {...props} />);
+    // In light color-scheme, the button has a dark background
+    const icons = component.find(`EuiIcon[type="${props.logos.Mark.dark.url}"]`);
+
+    expect(icons.length).toEqual(1);
+
+    expect(component).toMatchSnapshot();
   });
 
-  test('is called when the ESC key is pressed', () => {
-    const onExitHandler = sinon.stub();
+  it("is rendered using the light theme's mark when dark color-scheme is applied", () => {
+    const props = {
+      ...mockProps(),
+      logos: { ...getLogosMock.default, colorScheme: ColorScheme.DARK },
+    };
+    const component = shallow(<ExitFullScreenButton {...props} />);
+    // In light color-scheme, the button has a dark background
+    const icons = component.find(`EuiIcon[type="${props.logos.Mark.light.url}"]`);
+
+    expect(icons.length).toEqual(1);
+
+    expect(component).toMatchSnapshot();
+  });
+});
+
+describe('onExitFullScreenMode', () => {
+  it('is called when the button is pressed', () => {
+    const props = {
+      ...mockProps(),
+    };
+    const component = shallow(<ExitFullScreenButton {...props} />);
+    component.find('button').simulate('click');
+
+    expect(props.onExitFullScreenMode).toHaveBeenCalledTimes(1);
+  });
 
-    mount(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
+  it('is called when the ESC key is pressed', () => {
+    const props = {
+      ...mockProps(),
+    };
+    shallow(<ExitFullScreenButton {...props} />);
 
     const escapeKeyEvent = new KeyboardEvent('keydown', { key: keys.ESCAPE } as any);
     document.dispatchEvent(escapeKeyEvent);
 
-    sinon.assert.calledOnce(onExitHandler);
+    expect(props.onExitFullScreenMode).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.tsx b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.tsx
index 523f8345088f..cf13d0f224c4 100644
--- a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.tsx
@@ -32,14 +32,14 @@ import { i18n } from '@osd/i18n';
 import React, { PureComponent } from 'react';
 import { EuiScreenReaderOnly, keys } from '@elastic/eui';
 import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { Logos } from 'opensearch-dashboards/public';
 
 export interface ExitFullScreenButtonProps {
   onExitFullScreenMode: () => void;
+  logos: Logos;
 }
 
 import './index.scss';
-// eslint-disable-next-line @osd/eslint/no-restricted-paths
-import OpenSearchMarkDarkMode from '../../../home/public/assets/logos/opensearch_mark_darkmode.svg';
 
 class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
   public onKeyDown = (e: KeyboardEvent) => {
@@ -57,6 +57,7 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
   }
 
   public render() {
+    const colorScheme = this.props.logos.colorScheme !== 'dark' ? 'dark' : 'light';
     return (
       <div>
         <EuiScreenReaderOnly>
@@ -83,7 +84,7 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
           >
             <EuiFlexGroup component="span" responsive={false} alignItems="center" gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiIcon type={OpenSearchMarkDarkMode} size="l" />
+                <EuiIcon type={this.props.logos.Mark[colorScheme].url} size="l" />
               </EuiFlexItem>
               <EuiFlexItem grow={false} data-test-subj="exitFullScreenModeText">
                 <div>
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_footer/overview_page_footer.tsx b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
index ffa1205a9661..523ade66a1a4 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_footer/overview_page_footer.tsx
@@ -52,7 +52,8 @@ export const OverviewPageFooter: FC<Props> = ({ addBasePath, path }) => {
     },
   } = useOpenSearchDashboards<CoreStart>();
 
-  const { show, save } = application.capabilities.advancedSettings;
+  const { show, save } = application.capabilities.advancedSettings ?? {};
+
   const isAdvancedSettingsEnabled = show && save;
 
   const defaultRoutebutton =
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
index 72a25d779ded..326a5b51718e 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OverviewPageHeader  in dark mode  render logo as custom dark mode logo 1`] = `
+exports[`OverviewPageHeader  renders with the toolbar by default 1`] = `
 <header
   className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
 >
@@ -38,7 +38,7 @@ exports[`OverviewPageHeader  in dark mode  render logo as custom dark mode logo
             className="osdOverviewPageHeader__actionItem"
             grow={false}
           >
-            <mockConstructor
+            <RedirectAppLinks
               application={
                 Object {
                   "capabilities": Object {
@@ -58,275 +58,7 @@ exports[`OverviewPageHeader  in dark mode  render logo as custom dark mode logo
               >
                 Add data
               </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
-
-exports[`OverviewPageHeader  in dark mode  render logo as custom default mode logo 1`] = `
-<header
-  className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
->
-  <div
-    className="osdOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="osdOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="osdOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="osdOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="osdOverviewPageHeader__actionButton"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
-
-exports[`OverviewPageHeader  in dark mode  render logo as original dark mode opensearch mark 1`] = `
-<header
-  className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
->
-  <div
-    className="osdOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="osdOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="osdOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="osdOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="osdOverviewPageHeader__actionButton"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
-
-exports[`OverviewPageHeader  in default mode  render logo as custom default mode logo 1`] = `
-<header
-  className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
->
-  <div
-    className="osdOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="osdOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="osdOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="osdOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="osdOverviewPageHeader__actionButton"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
-
-exports[`OverviewPageHeader  in default mode  render logo as original default mode opensearch mark 1`] = `
-<header
-  className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
->
-  <div
-    className="osdOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="osdOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="osdOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="osdOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="osdOverviewPageHeader__actionButton"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
+            </RedirectAppLinks>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.test.tsx b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
index d8290f0dbcb3..2e27ebd0cb6b 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
@@ -31,95 +31,265 @@
 import React from 'react';
 import { OverviewPageHeader } from './overview_page_header';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { useOpenSearchDashboards } from '../../context';
+import { getLogosMock } from '../../../../../core/common/mocks';
 
-jest.mock('../../app_links', () => ({
-  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
-}));
-
-jest.mock('../../context', () => ({
-  useOpenSearchDashboards: jest.fn().mockReturnValue({
-    services: {
-      application: { capabilities: { navLinks: { management: true, dev_tools: true } } },
-      notifications: { toast: { addSuccess: jest.fn() } },
-    },
-  }),
-}));
-
-afterAll(() => jest.clearAllMocks());
+jest.mock('../../context', () => ({ useOpenSearchDashboards: jest.fn() }));
 
 const mockTitle = 'Page Title';
 const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
 
+const mockProps = () => ({
+  addBasePath: addBasePathMock,
+  title: mockTitle,
+  branding: {},
+  logos: getLogosMock.default,
+});
+
 describe('OverviewPageHeader ', () => {
-  describe('in default mode ', () => {
-    test('render logo as custom default mode logo', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-          darkModeUrl: '/darkModeLogo',
-        },
-      };
-
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+  beforeAll(() => {
+    // @ts-ignore
+    useOpenSearchDashboards.mockImplementation(() => ({
+      services: {
+        application: { capabilities: { navLinks: { management: true, dev_tools: true } } },
+        notifications: { toast: { addSuccess: jest.fn() } },
+      },
+    }));
+  });
 
-    test('render logo as original default mode opensearch mark', () => {
-      const branding = {
-        darkMode: false,
-        mark: {},
-      };
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
 
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+  it('renders without overlap by default', () => {
+    const props = {
+      ...mockProps(),
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const header = component.find('header');
+    expect(header.hasClass('osdOverviewPageHeader--hasOverlap')).toBeFalsy();
+    expect(header.hasClass('osdOverviewPageHeader--noOverlap')).toBeTruthy();
   });
 
-  describe('in dark mode ', () => {
-    test('render logo as custom dark mode logo', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-          darkModeUrl: '/darkModeLogo',
-        },
-      };
-
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+  it('renders with overlap', () => {
+    const props = {
+      ...mockProps(),
+      overlap: true,
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const header = component.find('header');
+    expect(header.hasClass('osdOverviewPageHeader--hasOverlap')).toBeTruthy();
+    expect(header.hasClass('osdOverviewPageHeader--noOverlap')).toBeFalsy();
+  });
+
+  it('renders without an icon by default', () => {
+    const props = {
+      ...mockProps(),
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const icons = component.find({ 'data-test-subj': 'osdOverviewPageHeaderLogo' });
+    expect(icons.length).toBe(0);
+  });
+
+  it('renders the mark icon when asked to', () => {
+    const props = {
+      ...mockProps(),
+      showIcon: true,
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const icons = component.find({ 'data-test-subj': 'osdOverviewPageHeaderLogo' });
+    expect(icons.length).toBe(1);
+    expect(icons.first().prop('type')).toEqual(props.logos.Mark.url);
+  });
+
+  it('uses the provided title in the header', () => {
+    const props = {
+      ...mockProps(),
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const head = component.find('h1');
+    expect(head.length).toBe(1);
+    expect(head.first().text()).toEqual(mockTitle);
+  });
+
+  it('renders with the toolbar by default', () => {
+    const props = {
+      ...mockProps(),
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const items = component.find('header > div > EuiFlexGroup > EuiFlexItem');
+    expect(items.length).toBe(2);
+
+    const buttons = component.find({ className: 'osdOverviewPageHeader__actionButton' });
+    // This also validates the order of the items
+    const btnAddData = buttons.at(0);
+    expect(btnAddData.prop('iconType')).toEqual('indexOpen');
+    expect(btnAddData.prop('href')).toEqual('/app/home#/tutorial_directory');
+
+    // Would contain only the "Add Data" button
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders with the toolbar when it is explicitly asked not to be hidden', () => {
+    const props = {
+      ...mockProps(),
+      hideToolbar: false,
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const items = component.find('header > div > EuiFlexGroup > EuiFlexItem');
+    expect(items.length).toBe(2);
+
+    const buttons = component.find({ className: 'osdOverviewPageHeader__actionButton' });
+    // This also validates the order of the items
+    const btnAddData = buttons.at(0);
+    expect(btnAddData.prop('iconType')).toEqual('indexOpen');
+    expect(btnAddData.prop('href')).toEqual('/app/home#/tutorial_directory');
+  });
+
+  it('renders without the toolbar when it is explicitly asked to be hidden', () => {
+    const props = {
+      ...mockProps(),
+      hideToolbar: true,
+    };
 
-    test('render logo as custom default mode logo', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-        },
-      };
-
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const items = component.find('header > div > EuiFlexGroup > EuiFlexItem');
+    expect(items.length).toBe(1);
+
+    const buttons = component.find({ className: 'osdOverviewPageHeader__actionButton' });
+    expect(buttons.length).toBe(0);
+  });
+});
+
+describe('OverviewPageHeader toolbar items - Management', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  const setupAndGetButton = (management: boolean, showManagementLink?: boolean) => {
+    // @ts-ignore
+    useOpenSearchDashboards.mockImplementation(() => ({
+      services: {
+        application: { capabilities: { navLinks: { management, dev_tools: true } } },
+        notifications: { toast: { addSuccess: jest.fn() } },
+      },
+    }));
+
+    const props = mockProps();
+    if (showManagementLink !== undefined) {
+      // @ts-ignore
+      props.showManagementLink = showManagementLink;
+    }
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    return component.find({
+      className: 'osdOverviewPageHeader__actionButton',
+      href: '/app/management',
     });
+  };
+
+  it('renders without management when the management plugin is disabled', () => {
+    const btnManagement = setupAndGetButton(false);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders without management when the management plugin is disabled and asked not to show', () => {
+    const btnManagement = setupAndGetButton(false, false);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders without management when the management plugin is disabled even if asked to show', () => {
+    const btnManagement = setupAndGetButton(false, true);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders without management when the management plugin is enabled', () => {
+    const btnManagement = setupAndGetButton(true);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders without management when the management plugin is enabled but asked not to show', () => {
+    const btnManagement = setupAndGetButton(true, false);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders with management when the management plugin is enabled and asked to show', () => {
+    const btnManagement = setupAndGetButton(true, true);
+    expect(btnManagement.length).toEqual(1);
+  });
+});
+
+describe('OverviewPageHeader toolbar items - DevTools', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  const setupAndGetButton = (devTools: boolean, showDevToolsLink?: boolean) => {
+    // @ts-ignore
+    useOpenSearchDashboards.mockImplementation(() => ({
+      services: {
+        application: { capabilities: { navLinks: { management: true, dev_tools: devTools } } },
+        notifications: { toast: { addSuccess: jest.fn() } },
+      },
+    }));
+
+    const props = mockProps();
+    if (showDevToolsLink !== undefined) {
+      // @ts-ignore
+      props.showDevToolsLink = showDevToolsLink;
+    }
 
-    test('render logo as original dark mode opensearch mark', () => {
-      const branding = {
-        darkMode: false,
-        mark: {},
-      };
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
 
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
+    return component.find({
+      className: 'osdOverviewPageHeader__actionButton',
+      href: '/app/dev_tools#/console',
     });
+  };
+
+  it('renders without dev_tools when the dev_tools plugin is disabled', () => {
+    const btnDevTools = setupAndGetButton(false);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders without dev_tools when the dev_tools plugin is disabled and asked not to show', () => {
+    const btnDevTools = setupAndGetButton(false, false);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders without dev_tools when the dev_tools plugin is disabled even if asked to show', () => {
+    const btnDevTools = setupAndGetButton(false, true);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders without dev_tools when the dev_tools plugin is enabled', () => {
+    const btnDevTools = setupAndGetButton(true);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders without dev_tools when the dev_tools plugin is enabled but asked not to show', () => {
+    const btnDevTools = setupAndGetButton(true, false);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders with dev_tools when the dev_tools plugin is enabled and asked to show', () => {
+    const btnDevTools = setupAndGetButton(true, true);
+    expect(btnDevTools.length).toEqual(1);
   });
 });
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
index 00273fcf993b..a636f7ecdb7d 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
@@ -38,7 +38,7 @@ import {
   IconType,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { CoreStart } from 'opensearch-dashboards/public';
+import { CoreStart, Logos } from 'opensearch-dashboards/public';
 import { RedirectAppLinks } from '../../app_links';
 import { useOpenSearchDashboards } from '../../context';
 import { ReactPluginBranding } from '../..';
@@ -47,24 +47,28 @@ import './index.scss';
 
 interface Props {
   hideToolbar?: boolean;
+  /** @deprecated use showIcon */
   iconType?: IconType;
+  showIcon?: boolean;
   overlap?: boolean;
   showDevToolsLink?: boolean;
   showManagementLink?: boolean;
   title: JSX.Element | string;
   addBasePath: (path: string) => string;
-  branding: ReactPluginBranding;
+  logos: Logos;
+  /** @deprecated use logos */
+  branding?: ReactPluginBranding;
 }
 
 export const OverviewPageHeader: FC<Props> = ({
   hideToolbar,
-  iconType,
+  showIcon = false,
   overlap,
   showDevToolsLink,
   showManagementLink,
   title,
   addBasePath,
-  branding,
+  logos,
 }) => {
   const {
     services: { application },
@@ -75,58 +79,6 @@ export const OverviewPageHeader: FC<Props> = ({
     dev_tools: isDevToolsEnabled,
   } = application.capabilities.navLinks;
 
-  const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`;
-  const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`;
-
-  const darkMode = branding.darkMode;
-  const markDefault = branding.mark?.defaultUrl;
-  const markDarkMode = branding.mark?.darkModeUrl;
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * overview logo in default mode. In default mode, overview logo will
-   * proritize default mode mark URL. If it is invalid, default opensearch logo
-   * will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  const customOverviewLogoDefaultMode = () => {
-    return markDefault ?? DEFAULT_OPENSEARCH_MARK;
-  };
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * overview logo in dark mode. In dark mode, overview logo will render
-   * dark mode mark URL if valid. Otherwise, it will render the default
-   * mode mark URL if valid. If both dark mode mark URL and default mode mark
-   * URL are invalid, the default opensearch logo will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  const customOverviewLogoDarkMode = () => {
-    return markDarkMode ?? markDefault ?? DARKMODE_OPENSEARCH_MARK;
-  };
-
-  /**
-   * Render custom overview logo for both default mode and dark mode
-   *
-   * @returns a valid custom loading logo URL, or undefined
-   */
-  const customOverviewLogo = () => {
-    return darkMode ? customOverviewLogoDarkMode() : customOverviewLogoDefaultMode();
-  };
-
-  /**
-   * Check if we render a custom overview logo or the default opensearch spinner.
-   * If customOverviewLogo() returns undefined(no valid custom URL is found), we
-   * render the default opensearch logo
-   *
-   * @returns a image component with custom logo URL, or the default opensearch logo
-   */
-  const renderBrandingEnabledOrDisabledLogo = (iconTypeInput?: IconType) => {
-    return customOverviewLogo() ?? iconTypeInput ?? '';
-  };
-
   return (
     <header
       className={`osdOverviewPageHeader ${
@@ -137,13 +89,13 @@ export const OverviewPageHeader: FC<Props> = ({
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="m" responsive={false}>
-              {iconType && (
+              {showIcon && (
                 <EuiFlexItem grow={false}>
                   <EuiIcon
                     size="xxl"
-                    type={renderBrandingEnabledOrDisabledLogo(iconType)}
+                    type={logos.Mark.url}
                     data-test-subj={`osdOverviewPageHeaderLogo`}
-                    data-test-logo={renderBrandingEnabledOrDisabledLogo(iconType)}
+                    data-test-logo={logos.Mark.url}
                   />
                 </EuiFlexItem>
               )}
diff --git a/src/plugins/opensearch_ui_shared/__packages_do_not_import__/xjson/json_xjson_translation_tools/index.ts b/src/plugins/opensearch_ui_shared/__packages_do_not_import__/xjson/json_xjson_translation_tools/index.ts
index 9f42e669b280..9860be7800e4 100644
--- a/src/plugins/opensearch_ui_shared/__packages_do_not_import__/xjson/json_xjson_translation_tools/index.ts
+++ b/src/plugins/opensearch_ui_shared/__packages_do_not_import__/xjson/json_xjson_translation_tools/index.ts
@@ -28,12 +28,13 @@
  * under the License.
  */
 
+import { parse, stringify } from '@osd/std';
 import { extractJSONStringValues } from './parser';
 
 export function collapseLiteralStrings(data: string) {
   const splitData = data.split(`"""`);
   for (let idx = 1; idx < splitData.length - 1; idx += 2) {
-    splitData[idx] = JSON.stringify(splitData[idx]);
+    splitData[idx] = stringify(splitData[idx]);
   }
   return splitData.join('');
 }
@@ -79,7 +80,7 @@ export function expandLiteralStrings(data: string) {
       (candidate[candidate.length - 2] === '"' && candidate[candidate.length - 3] === '\\');
 
     if (!skip && candidate.match(/\\./)) {
-      result += `"""${JSON.parse(candidate)}"""`;
+      result += `"""${parse(candidate)}"""`;
     } else {
       result += candidate;
     }
diff --git a/src/plugins/share/server/routes/lib/short_url_assert_valid.test.ts b/src/plugins/share/server/routes/lib/short_url_assert_valid.test.ts
index 93a7fff7f2bc..7f9744119c73 100644
--- a/src/plugins/share/server/routes/lib/short_url_assert_valid.test.ts
+++ b/src/plugins/share/server/routes/lib/short_url_assert_valid.test.ts
@@ -43,11 +43,8 @@ describe('shortUrlAssertValid()', () => {
     ['hostname', 'localhost/app/opensearch-dashboards', PATH_ERROR], // according to spec, this is not a valid URL -- you cannot specify a hostname without a protocol
     ['hostname and port', 'local.host:5601/app/opensearch-dashboards', PROTOCOL_ERROR], // parser detects 'local.host' as the protocol
     ['hostname and auth', 'user:pass@localhost.net/app/opensearch-dashboards', PROTOCOL_ERROR], // parser detects 'user' as the protocol
-    ['path traversal', '/app/../../not-opensearch-dashboards', PATH_ERROR], // fails because there are >2 path parts
     ['path traversal', '/../not-opensearch-dashboards', PATH_ERROR], // fails because first path part is not 'app'
-    ['deep path', '/app/opensearch-dashboards/foo', PATH_ERROR], // fails because there are >2 path parts
-    ['deeper path', '/app/opensearch-dashboards/foo/bar', PATH_ERROR], // fails because there are >2 path parts
-    ['base path', '/base/app/opensearch-dashboards', PATH_ERROR], // fails because there are >2 path parts
+    ['base path', '/base/app/opensearch-dashboards', PATH_ERROR], // fails because first path part is not 'app'
     ['path with an extra leading slash', '//foo/app/opensearch-dashboards', HOSTNAME_ERROR], // parser detects 'foo' as the hostname
     ['path with an extra leading slash', '///app/opensearch-dashboards', HOSTNAME_ERROR], // parser detects '' as the hostname
     ['path without app', '/foo/opensearch-dashboards', PATH_ERROR], // fails because first path part is not 'app'
@@ -63,10 +60,13 @@ describe('shortUrlAssertValid()', () => {
   const valid = [
     '/app/opensearch-dashboards',
     '/app/opensearch-dashboards/', // leading and trailing slashes are trimmed
+    '/app/opensearch-dashboards/deeper',
     '/app/monitoring#angular/route',
     '/app/text#document-id',
+    '/app/text/deeper#document-id',
     '/app/some?with=query',
     '/app/some?with=query#and-a-hash',
+    '/app/some/deeper?with=query#and-a-hash',
   ];
 
   valid.forEach((url) => {
diff --git a/src/plugins/share/server/routes/lib/short_url_assert_valid.ts b/src/plugins/share/server/routes/lib/short_url_assert_valid.ts
index aec6e743c0bc..b6514a68e6f6 100644
--- a/src/plugins/share/server/routes/lib/short_url_assert_valid.ts
+++ b/src/plugins/share/server/routes/lib/short_url_assert_valid.ts
@@ -48,7 +48,7 @@ export function shortUrlAssertValid(url: string) {
   }
 
   const pathnameParts = trim(pathname === null ? undefined : pathname, '/').split('/');
-  if (pathnameParts.length !== 2 || pathnameParts[0] !== 'app' || !pathnameParts[1]) {
+  if (pathnameParts[0] !== 'app' || !pathnameParts[1]) {
     throw Boom.notAcceptable(
       `Short url target path must be in the format "/app/{{appId}}", found "${pathname}"`
     );
diff --git a/src/plugins/vis_augmenter/public/ui_actions_bootstrap.ts b/src/plugins/vis_augmenter/public/ui_actions_bootstrap.ts
index 27bd6284e71b..02160f01793d 100644
--- a/src/plugins/vis_augmenter/public/ui_actions_bootstrap.ts
+++ b/src/plugins/vis_augmenter/public/ui_actions_bootstrap.ts
@@ -71,8 +71,15 @@ export const bootstrapUiActions = (uiActions: UiActionsSetup) => {
   uiActions.registerTrigger(externalActionTrigger);
   uiActions.registerTrigger(pluginResourceDeleteTrigger);
 
-  uiActions.addTriggerAction(EXTERNAL_ACTION_TRIGGER, openEventsFlyoutAction);
-  uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, viewEventsOptionAction);
-  uiActions.addTriggerAction(SAVED_OBJECT_DELETE_TRIGGER, savedObjectDeleteAction);
   uiActions.addTriggerAction(PLUGIN_RESOURCE_DELETE_TRIGGER, pluginResourceDeleteAction);
+  uiActions.addTriggerAction(EXTERNAL_ACTION_TRIGGER, openEventsFlyoutAction);
+
+  // These triggers are registered by other plugins. If they are disabled can throw an error.
+  try {
+    uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, viewEventsOptionAction);
+    uiActions.addTriggerAction(SAVED_OBJECT_DELETE_TRIGGER, savedObjectDeleteAction);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
 };
diff --git a/src/plugins/vis_type_table/public/components/table_vis_component.tsx b/src/plugins/vis_type_table/public/components/table_vis_component.tsx
index c0e4ab61ae8b..3d7602e9a991 100644
--- a/src/plugins/vis_type_table/public/components/table_vis_component.tsx
+++ b/src/plugins/vis_type_table/public/components/table_vis_component.tsx
@@ -37,7 +37,7 @@ export const TableVisComponent = ({
   event,
   uiState: { sort, setSort, colWidth, setWidth },
 }: TableVisComponentProps) => {
-  const { rows, formattedColumns } = table;
+  const { rows, columns, formattedColumns } = table;
 
   const pagination = usePagination(visConfig, rows.length);
 
@@ -59,7 +59,15 @@ export const TableVisComponent = ({
     formattedColumns,
   ]);
 
-  const dataGridColumns = getDataGridColumns(table, event, colWidth);
+  const sortedTable = useMemo(() => {
+    return {
+      rows: sortedRows,
+      columns,
+      formattedColumns,
+    };
+  }, [sortedRows, columns, formattedColumns]);
+
+  const dataGridColumns = getDataGridColumns(sortedTable, event, colWidth);
 
   const sortedColumns = useMemo(() => {
     if (
diff --git a/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx b/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx
index 64c7ce91f4b7..e5c4440928aa 100644
--- a/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx
+++ b/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx
@@ -23,7 +23,7 @@ export const TableVisComponentGroup = memo(
     return (
       <>
         {tableGroups.map(({ table, title }) => (
-          <EuiFlexItem key={title} className="visTable__group">
+          <EuiFlexItem key={title} className="visTable__group" grow={false}>
             <TableVisComponent
               title={title}
               table={table}
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/math.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/math.js
index 0049ca25b1f0..9d8965ec1641 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/math.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/math.js
@@ -134,12 +134,12 @@ export function MathAgg(props) {
                 values={{
                   link: (
                     <EuiLink
-                      href="https://github.com/elastic/tinymath/blob/master/docs/functions.md"
+                      href="https://mathjs.org/docs/reference/functions.html"
                       target="_blank"
                     >
                       <FormattedMessage
-                        id="visTypeTimeseries.math.expressionDescription.tinyMathLinkText"
-                        defaultMessage="TinyMath"
+                        id="visTypeTimeseries.math.expressionDescription.linkText"
+                        defaultMessage="Math.js"
                       />
                     </EuiLink>
                   ),
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/evaluate.ts b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/evaluate.ts
new file mode 100644
index 000000000000..c39d07d24ce4
--- /dev/null
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/evaluate.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { create, all } from 'mathjs';
+
+const math = create(all);
+export const evaluate = math.evaluate;
+export const MATH_THROW_MSG = 'Math.js function is disabled';
+
+math.import(
+  {
+    import() {
+      throw new Error(MATH_THROW_MSG);
+    },
+    createUnit() {
+      throw new Error(MATH_THROW_MSG);
+    },
+    evaluate() {
+      throw new Error(MATH_THROW_MSG);
+    },
+    parse() {
+      throw new Error(MATH_THROW_MSG);
+    },
+    simplify() {
+      throw new Error(MATH_THROW_MSG);
+    },
+    derivative() {
+      throw new Error(MATH_THROW_MSG);
+    },
+  },
+  { override: true }
+);
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/math.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/math.js
index 54cf2b857f0e..a03f9ad673c5 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/math.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/math.js
@@ -34,7 +34,7 @@ import { getDefaultDecoration } from '../../helpers/get_default_decoration';
 import { getSiblingAggValue } from '../../helpers/get_sibling_agg_value';
 import { getSplits } from '../../helpers/get_splits';
 import { mapBucket } from '../../helpers/map_bucket';
-import { evaluate } from 'tinymath';
+import { evaluate } from './evaluate';
 
 export function mathAgg(resp, panel, series, meta) {
   return (next) => (results) => {
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/math.test.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/math.test.js
index 0aa07673d566..89b1fd92886f 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/math.test.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/math.test.js
@@ -30,6 +30,7 @@
 
 import { mathAgg } from './math';
 import { stdMetric } from './std_metric';
+import { MATH_THROW_MSG } from './evaluate';
 
 describe('math(resp, panel, series)', () => {
   let panel;
@@ -145,7 +146,7 @@ describe('math(resp, panel, series)', () => {
     );
   });
 
-  test('throws on actual tinymath expression errors', () => {
+  test('throws on actual math.js expression errors', () => {
     series.metrics[2].script = 'notExistingFn(params.a)';
     expect(() =>
       stdMetric(resp, panel, series)(mathAgg(resp, panel, series)((results) => results))([])
@@ -156,4 +157,52 @@ describe('math(resp, panel, series)', () => {
       stdMetric(resp, panel, series)(mathAgg(resp, panel, series)((results) => results))([])
     ).toThrow();
   });
+
+  test('throws on math.js disabled function: import', () => {
+    series.metrics[2].script = 'import({ pi: 3.14 }, { override: true })';
+
+    expect(() =>
+      stdMetric(resp, panel, series)(mathAgg(resp, panel, series)((results) => results))([])
+    ).toThrow(MATH_THROW_MSG);
+  });
+
+  test('throws on math.js disabled function: createUnit', () => {
+    series.metrics[2].script = 'createUnit("foo")';
+
+    expect(() =>
+      stdMetric(resp, panel, series)(mathAgg(resp, panel, series)((results) => results))([])
+    ).toThrow(MATH_THROW_MSG);
+  });
+
+  test('throws on math.js disabled function: evaluate', () => {
+    series.metrics[2].script = 'evaluate("(2+3)/4") ';
+
+    expect(() =>
+      stdMetric(resp, panel, series)(mathAgg(resp, panel, series)((results) => results))([])
+    ).toThrow(MATH_THROW_MSG);
+  });
+
+  test('throws on math.js disabled function: parse', () => {
+    series.metrics[2].script = '[h = parse("x^2 + x")]';
+
+    expect(() =>
+      stdMetric(resp, panel, series)(mathAgg(resp, panel, series)((results) => results))([])
+    ).toThrow(MATH_THROW_MSG);
+  });
+
+  test('throws on math.js disabled function: simplify', () => {
+    series.metrics[2].script = 'simplify("2 * 1 * x ^ (2 - 1)")';
+
+    expect(() =>
+      stdMetric(resp, panel, series)(mathAgg(resp, panel, series)((results) => results))([])
+    ).toThrow(MATH_THROW_MSG);
+  });
+
+  test('throws on math.js disabled function: derivative', () => {
+    series.metrics[2].script = 'derivative("x^2", "x")';
+
+    expect(() =>
+      stdMetric(resp, panel, series)(mathAgg(resp, panel, series)((results) => results))([])
+    ).toThrow(MATH_THROW_MSG);
+  });
 });
diff --git a/src/plugins/vis_type_vega/public/expressions/line_vega_spec_fn.ts b/src/plugins/vis_type_vega/public/expressions/line_vega_spec_fn.ts
index 63ea59114052..f07a4daa5e34 100644
--- a/src/plugins/vis_type_vega/public/expressions/line_vega_spec_fn.ts
+++ b/src/plugins/vis_type_vega/public/expressions/line_vega_spec_fn.ts
@@ -47,7 +47,7 @@ export const createLineVegaSpecFn = (
   name: 'line_vega_spec',
   type: 'string',
   inputTypes: ['opensearch_dashboards_datatable'],
-  help: i18n.translate('visTypeVega.function.help', {
+  help: i18n.translate('visTypeVega.function.helpSpec', {
     defaultMessage: 'Construct line vega spec',
   }),
   args: {
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
index 28c0048cdedc..605c88067211 100644
--- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
+++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
@@ -577,7 +577,8 @@ export class VisualizeEmbeddable
           const { toasts } = getNotifications();
           toasts.addError(err, {
             title: i18n.translate('visualizations.renderVisTitle', {
-              defaultMessage: `Error loading data on the ${this.vis.title} chart`,
+              defaultMessage: 'Error loading data on the {visTitle} chart',
+              values: { visTitle: this.vis.title },
             }),
             toastMessage: ' ',
             id: this.id,
diff --git a/src/test_utils/public/helpers/find_test_subject.ts b/src/test_utils/public/helpers/find_test_subject.ts
index 98687e3f0eef..ccb17b336059 100644
--- a/src/test_utils/public/helpers/find_test_subject.ts
+++ b/src/test_utils/public/helpers/find_test_subject.ts
@@ -54,8 +54,8 @@ const MATCHERS: Matcher[] = [
  * @param testSubjectSelector The data test subject selector
  * @param matcher optional matcher
  */
-export const findTestSubject = <T = string>(
-  reactWrapper: ReactWrapper,
+export const findTestSubject = <T = string, U = unknown>(
+  reactWrapper: ReactWrapper<U>,
   testSubjectSelector: T,
   matcher: Matcher = '~='
 ) => {
diff --git a/src/test_utils/public/testing_lib_helpers.tsx b/src/test_utils/public/testing_lib_helpers.tsx
new file mode 100644
index 000000000000..1e39a0cdcecc
--- /dev/null
+++ b/src/test_utils/public/testing_lib_helpers.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { ReactElement } from 'react';
+import { render as rtlRender } from '@testing-library/react';
+import { I18nProvider } from '@osd/i18n/react';
+
+// src: https://testing-library.com/docs/example-react-intl/#creating-a-custom-render-function
+function render(ui: ReactElement, { ...renderOptions } = {}) {
+  const Wrapper: React.FC = ({ children }) => {
+    return <I18nProvider>{children}</I18nProvider>;
+  };
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+// re-export everything
+export * from '@testing-library/react';
+
+// override render method
+export { render };
diff --git a/test/common/config.js b/test/common/config.js
index cff91302899d..d95b46ae3b11 100644
--- a/test/common/config.js
+++ b/test/common/config.js
@@ -58,6 +58,7 @@ export default function () {
         `--opensearch.username=${opensearchDashboardsServerTestUser.username}`,
         `--opensearch.password=${opensearchDashboardsServerTestUser.password}`,
         `--home.disableWelcomeScreen=false`,
+        `--home.disableNewThemeModal=true`,
         // Needed for async search functional tests to introduce a delay
         `--data.search.aggs.shardDelay.enabled=true`,
         //`--security.showInsecureClusterWarning=false`,
diff --git a/test/functional/apps/context/_date_nanos.js b/test/functional/apps/context/_date_nanos.js
index e612c8d3c41d..23350c81b18f 100644
--- a/test/functional/apps/context/_date_nanos.js
+++ b/test/functional/apps/context/_date_nanos.js
@@ -52,6 +52,7 @@ export default function ({ getService, getPageObjects }) {
       await opensearchDashboardsServer.uiSettings.update({
         'context:defaultSize': `${TEST_DEFAULT_CONTEXT_SIZE}`,
         'context:step': `${TEST_STEP_SIZE}`,
+        'discover:v2': false,
       });
     });
 
diff --git a/test/functional/apps/context/_date_nanos_custom_timestamp.js b/test/functional/apps/context/_date_nanos_custom_timestamp.js
index 2c6bef3a366b..52864a0d7ea3 100644
--- a/test/functional/apps/context/_date_nanos_custom_timestamp.js
+++ b/test/functional/apps/context/_date_nanos_custom_timestamp.js
@@ -52,6 +52,7 @@ export default function ({ getService, getPageObjects }) {
       await opensearchDashboardsServer.uiSettings.update({
         'context:defaultSize': `${TEST_DEFAULT_CONTEXT_SIZE}`,
         'context:step': `${TEST_STEP_SIZE}`,
+        'discover:v2': false,
       });
     });
 
diff --git a/test/functional/apps/context/_filters.js b/test/functional/apps/context/_filters.js
index a20e6a6a40ca..17219a836230 100644
--- a/test/functional/apps/context/_filters.js
+++ b/test/functional/apps/context/_filters.js
@@ -38,11 +38,17 @@ export default function ({ getService, getPageObjects }) {
   const docTable = getService('docTable');
   const filterBar = getService('filterBar');
   const retry = getService('retry');
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
+  const browser = getService('browser');
 
   const PageObjects = getPageObjects(['common', 'context']);
 
   describe('context filters', function contextSize() {
     beforeEach(async function () {
+      await opensearchDashboardsServer.uiSettings.replace({
+        'discover:v2': false,
+      });
+      await browser.refresh();
       await PageObjects.context.navigateTo(TEST_INDEX_PATTERN, TEST_ANCHOR_ID, {
         columns: TEST_COLUMN_NAMES,
       });
diff --git a/test/functional/apps/context/index.js b/test/functional/apps/context/index.js
index a5c3c94474ea..07fbfe00ac2b 100644
--- a/test/functional/apps/context/index.js
+++ b/test/functional/apps/context/index.js
@@ -41,7 +41,10 @@ export default function ({ getService, getPageObjects, loadTestFile }) {
       await browser.setWindowSize(1200, 800);
       await opensearchArchiver.loadIfNeeded('logstash_functional');
       await opensearchArchiver.load('visualize');
-      await opensearchDashboardsServer.uiSettings.replace({ defaultIndex: 'logstash-*' });
+      await opensearchDashboardsServer.uiSettings.replace({
+        defaultIndex: 'logstash-*',
+        'discover:v2': false,
+      });
       await PageObjects.common.navigateToApp('discover');
     });
 
diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.js
index 5beca47f9cae..e23a2caba0c7 100644
--- a/test/functional/apps/dashboard/dashboard_state.js
+++ b/test/functional/apps/dashboard/dashboard_state.js
@@ -43,6 +43,7 @@ export default function ({ getService, getPageObjects }) {
     'tileMap',
     'visChart',
     'timePicker',
+    'common',
   ]);
   const testSubjects = getService('testSubjects');
   const browser = getService('browser');
@@ -52,11 +53,17 @@ export default function ({ getService, getPageObjects }) {
   const retry = getService('retry');
   const dashboardPanelActions = getService('dashboardPanelActions');
   const dashboardAddPanel = getService('dashboardAddPanel');
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
 
   describe('dashboard state', function describeIndexTests() {
     before(async function () {
       await PageObjects.dashboard.initTests();
       await PageObjects.dashboard.preserveCrossAppState();
+
+      await opensearchDashboardsServer.uiSettings.replace({
+        'discover:v2': false,
+      });
+      await browser.refresh();
     });
 
     after(async function () {
@@ -88,6 +95,8 @@ export default function ({ getService, getPageObjects }) {
       expect(colorChoiceRetained).to.be(true);
     });
 
+    // the following three tests are skipped because of save search save window bug:
+    // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4698
     it('Saved search with no changes will update when the saved object changes', async () => {
       await PageObjects.dashboard.gotoDashboardLandingPage();
 
@@ -107,6 +116,9 @@ export default function ({ getService, getPageObjects }) {
       expect(inViewMode).to.be(true);
 
       await PageObjects.header.clickDiscover();
+      // Add load save search here since discover link won't take it to the save search link for
+      // the legacy discover plugin
+      await PageObjects.discover.loadSavedSearch('my search');
       await PageObjects.discover.clickFieldListItemAdd('agent');
       await PageObjects.discover.saveSearch('my search');
       await PageObjects.header.waitUntilLoadingHasFinished();
@@ -126,6 +138,9 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.saveDashboard('Has local edits');
 
       await PageObjects.header.clickDiscover();
+      // Add load save search here since discover link won't take it to the save search link for
+      // the legacy discover plugin
+      await PageObjects.discover.loadSavedSearch('my search');
       await PageObjects.discover.clickFieldListItemAdd('clientip');
       await PageObjects.discover.saveSearch('my search');
       await PageObjects.header.waitUntilLoadingHasFinished();
diff --git a/test/functional/apps/dashboard/dashboard_time_picker.js b/test/functional/apps/dashboard/dashboard_time_picker.js
index c1f4e50e6a65..5c97872cdb7e 100644
--- a/test/functional/apps/dashboard/dashboard_time_picker.js
+++ b/test/functional/apps/dashboard/dashboard_time_picker.js
@@ -83,7 +83,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.clickNewDashboard();
       log.debug('Clicked new dashboard');
       await dashboardVisualizations.createAndAddSavedSearch({
-        name: 'saved search',
+        name: 'saved search 1',
         fields: ['bytes', 'agent'],
       });
       log.debug('added saved search');
diff --git a/test/functional/apps/dashboard/panel_context_menu.ts b/test/functional/apps/dashboard/panel_context_menu.ts
index 2d00c81581e6..07af447d4e15 100644
--- a/test/functional/apps/dashboard/panel_context_menu.ts
+++ b/test/functional/apps/dashboard/panel_context_menu.ts
@@ -38,12 +38,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardPanelActions = getService('dashboardPanelActions');
   const dashboardAddPanel = getService('dashboardAddPanel');
   const dashboardVisualizations = getService('dashboardVisualizations');
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
+  const listingTable = getService('listingTable');
   const PageObjects = getPageObjects([
     'dashboard',
     'header',
     'visualize',
     'discover',
     'timePicker',
+    'common',
   ]);
   const dashboardName = 'Dashboard Panel Controls Test';
 
@@ -114,6 +117,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
         const panelCount = await PageObjects.dashboard.getPanelCount();
         expect(panelCount).to.be(0);
+        // need to find the correct save
+        await PageObjects.dashboard.saveDashboard(dashboardName);
       });
     });
 
@@ -121,11 +126,20 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const searchName = 'my search';
 
       before(async () => {
+        await opensearchDashboardsServer.uiSettings.replace({
+          'discover:v2': false,
+        });
+        await browser.refresh();
         await PageObjects.header.clickDiscover();
         await PageObjects.discover.clickNewSearchButton();
         await dashboardVisualizations.createSavedSearch({ name: searchName, fields: ['bytes'] });
         await PageObjects.header.waitUntilLoadingHasFinished();
         await PageObjects.header.clickDashboard();
+        // Have to add steps to actually click on the dashboard; since added browser.refresh() will make
+        // clickDashboard() to only land on the dashboard listing page
+        // We need to add browser.refresh() so clickDiscover() lands correctly on the legacy discover page
+        await listingTable.clickItemLink('dashboard', dashboardName);
+        await PageObjects.header.waitUntilLoadingHasFinished();
 
         const inViewMode = await PageObjects.dashboard.getIsInViewMode();
         if (inViewMode) await PageObjects.dashboard.switchToEditMode();
diff --git a/test/functional/apps/discover/_date_nanos.js b/test/functional/apps/discover/_date_nanos.js
index 721a5de07871..e96d507087fe 100644
--- a/test/functional/apps/discover/_date_nanos.js
+++ b/test/functional/apps/discover/_date_nanos.js
@@ -41,7 +41,10 @@ export default function ({ getService, getPageObjects }) {
   describe('date_nanos', function () {
     before(async function () {
       await opensearchArchiver.loadIfNeeded('date_nanos');
-      await opensearchDashboardsServer.uiSettings.replace({ defaultIndex: 'date-nanos' });
+      await opensearchDashboardsServer.uiSettings.replace({
+        defaultIndex: 'date-nanos',
+        'discover:v2': false,
+      });
       await security.testUser.setRoles([
         'opensearch_dashboards_admin',
         'opensearch_dashboards_date_nanos',
diff --git a/test/functional/apps/discover/_date_nanos_mixed.js b/test/functional/apps/discover/_date_nanos_mixed.js
index 8578572dfbc5..05b94d3d1d67 100644
--- a/test/functional/apps/discover/_date_nanos_mixed.js
+++ b/test/functional/apps/discover/_date_nanos_mixed.js
@@ -41,7 +41,10 @@ export default function ({ getService, getPageObjects }) {
   describe('date_nanos_mixed', function () {
     before(async function () {
       await opensearchArchiver.loadIfNeeded('date_nanos_mixed');
-      await opensearchDashboardsServer.uiSettings.replace({ defaultIndex: 'timestamp-*' });
+      await opensearchDashboardsServer.uiSettings.replace({
+        defaultIndex: 'timestamp-*',
+        'discover:v2': false,
+      });
       await security.testUser.setRoles([
         'opensearch_dashboards_admin',
         'opensearch_dashboards_date_nanos_mixed',
diff --git a/test/functional/apps/discover/_discover.js b/test/functional/apps/discover/_discover.js
index 66555ddd0851..d132454a090e 100644
--- a/test/functional/apps/discover/_discover.js
+++ b/test/functional/apps/discover/_discover.js
@@ -41,16 +41,17 @@ export default function ({ getService, getPageObjects }) {
   const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker']);
   const defaultSettings = {
     defaultIndex: 'logstash-*',
+    'discover:v2': false,
   };
 
   describe('discover app', function describeIndexTests() {
     before(async function () {
-      // delete .kibana index and update configDoc
-      await opensearchDashboardsServer.uiSettings.replace(defaultSettings);
-
       log.debug('load opensearch-dashboards index with default index pattern');
       await opensearchArchiver.load('discover');
 
+      // delete .kibana index and update configDoc
+      await opensearchDashboardsServer.uiSettings.replace(defaultSettings);
+
       // and load a set of makelogs data
       await opensearchArchiver.loadIfNeeded('logstash_functional');
       log.debug('discover');
@@ -258,7 +259,10 @@ export default function ({ getService, getPageObjects }) {
         });
       });
       it('should show bars in the correct time zone after switching', async function () {
-        await opensearchDashboardsServer.uiSettings.replace({ 'dateFormat:tz': 'America/Phoenix' });
+        await opensearchDashboardsServer.uiSettings.replace({
+          'dateFormat:tz': 'America/Phoenix',
+          'discover:v2': false,
+        });
         await PageObjects.common.navigateToApp('discover');
         await PageObjects.header.awaitOpenSearchDashboardsChrome();
         await queryBar.clearQuery();
@@ -273,7 +277,10 @@ export default function ({ getService, getPageObjects }) {
     });
     describe('usage of discover:searchOnPageLoad', () => {
       it('should fetch data from OpenSearch initially when discover:searchOnPageLoad is false', async function () {
-        await opensearchDashboardsServer.uiSettings.replace({ 'discover:searchOnPageLoad': false });
+        await opensearchDashboardsServer.uiSettings.replace({
+          'discover:searchOnPageLoad': false,
+          'discover:v2': false,
+        });
         await PageObjects.common.navigateToApp('discover');
         await PageObjects.header.awaitOpenSearchDashboardsChrome();
 
@@ -281,7 +288,10 @@ export default function ({ getService, getPageObjects }) {
       });
 
       it('should not fetch data from OpenSearch initially when discover:searchOnPageLoad is true', async function () {
-        await opensearchDashboardsServer.uiSettings.replace({ 'discover:searchOnPageLoad': true });
+        await opensearchDashboardsServer.uiSettings.replace({
+          'discover:searchOnPageLoad': true,
+          'discover:v2': false,
+        });
         await PageObjects.common.navigateToApp('discover');
         await PageObjects.header.awaitOpenSearchDashboardsChrome();
 
@@ -306,6 +316,7 @@ export default function ({ getService, getPageObjects }) {
       it('should update the histogram timerange when the query is resubmitted', async function () {
         await opensearchDashboardsServer.uiSettings.update({
           'timepicker:timeDefaults': '{  "from": "2015-09-18T19:37:13.000Z",  "to": "now"}',
+          'discover:v2': false,
         });
         await PageObjects.common.navigateToApp('discover');
         await PageObjects.header.awaitOpenSearchDashboardsChrome();
diff --git a/test/functional/apps/discover/_discover_histogram.ts b/test/functional/apps/discover/_discover_histogram.ts
index 391fa97e00a9..f32a85add6fa 100644
--- a/test/functional/apps/discover/_discover_histogram.ts
+++ b/test/functional/apps/discover/_discover_histogram.ts
@@ -40,6 +40,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const defaultSettings = {
     defaultIndex: 'long-window-logstash-*',
     'dateFormat:tz': 'Europe/Berlin',
+    'discover:v2': false,
   };
 
   describe('discover histogram', function describeIndexTests() {
diff --git a/test/functional/apps/discover/_doc_navigation.js b/test/functional/apps/discover/_doc_navigation.js
index bc0afcb92250..6978c363689b 100644
--- a/test/functional/apps/discover/_doc_navigation.js
+++ b/test/functional/apps/discover/_doc_navigation.js
@@ -37,6 +37,7 @@ export default function ({ getService, getPageObjects }) {
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['common', 'discover', 'timePicker', 'context']);
   const opensearchArchiver = getService('opensearchArchiver');
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
   const retry = getService('retry');
 
   describe('doc link in discover', function contextSize() {
@@ -45,6 +46,9 @@ export default function ({ getService, getPageObjects }) {
       await opensearchArchiver.loadIfNeeded('discover');
 
       await opensearchArchiver.loadIfNeeded('logstash_functional');
+      await opensearchDashboardsServer.uiSettings.replace({
+        'discover:v2': false,
+      });
       await PageObjects.common.navigateToApp('discover');
       await PageObjects.timePicker.setDefaultAbsoluteRange();
       await PageObjects.discover.waitForDocTableLoadingComplete();
diff --git a/test/functional/apps/discover/_doc_table.ts b/test/functional/apps/discover/_doc_table.ts
index ed7e30201cf2..166aa954c364 100644
--- a/test/functional/apps/discover/_doc_table.ts
+++ b/test/functional/apps/discover/_doc_table.ts
@@ -40,6 +40,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker']);
   const defaultSettings = {
     defaultIndex: 'logstash-*',
+    'discover:v2': false,
   };
 
   describe('discover doc table', function describeIndexTests() {
diff --git a/test/functional/apps/discover/_errors.ts b/test/functional/apps/discover/_errors.ts
index f2df3714e230..3251b9215e1a 100644
--- a/test/functional/apps/discover/_errors.ts
+++ b/test/functional/apps/discover/_errors.ts
@@ -33,6 +33,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const opensearchArchiver = getService('opensearchArchiver');
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
   const toasts = getService('toasts');
   const PageObjects = getPageObjects(['common', 'discover', 'timePicker']);
 
@@ -40,6 +41,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     before(async function () {
       await opensearchArchiver.loadIfNeeded('logstash_functional');
       await opensearchArchiver.load('invalid_scripted_field');
+      await opensearchDashboardsServer.uiSettings.replace({
+        'discover:v2': false,
+      });
       await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
       await PageObjects.common.navigateToApp('discover');
     });
diff --git a/test/functional/apps/discover/_field_data.js b/test/functional/apps/discover/_field_data.js
index a9c4ac34f735..90de964dc4ec 100644
--- a/test/functional/apps/discover/_field_data.js
+++ b/test/functional/apps/discover/_field_data.js
@@ -46,6 +46,7 @@ export default function ({ getService, getPageObjects }) {
       await opensearchArchiver.load('discover');
       await opensearchDashboardsServer.uiSettings.replace({
         defaultIndex: 'logstash-*',
+        'discover:v2': false,
       });
       await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
       await PageObjects.common.navigateToApp('discover');
diff --git a/test/functional/apps/discover/_field_visualize.ts b/test/functional/apps/discover/_field_visualize.ts
index ecefc610b746..50ecb54d27ff 100644
--- a/test/functional/apps/discover/_field_visualize.ts
+++ b/test/functional/apps/discover/_field_visualize.ts
@@ -41,6 +41,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker', 'visualize']);
   const defaultSettings = {
     defaultIndex: 'logstash-*',
+    'discover:v2': false,
   };
 
   describe('discover field visualize button', function () {
diff --git a/test/functional/apps/discover/_filter_editor.js b/test/functional/apps/discover/_filter_editor.js
index 482376994d79..7692d7e6148b 100644
--- a/test/functional/apps/discover/_filter_editor.js
+++ b/test/functional/apps/discover/_filter_editor.js
@@ -39,6 +39,7 @@ export default function ({ getService, getPageObjects }) {
   const PageObjects = getPageObjects(['common', 'discover', 'timePicker']);
   const defaultSettings = {
     defaultIndex: 'logstash-*',
+    'discover:v2': false,
   };
 
   describe('discover filter editor', function describeIndexTests() {
diff --git a/test/functional/apps/discover/_indexpattern_with_encoded_id.ts b/test/functional/apps/discover/_indexpattern_with_encoded_id.ts
index 4ff77a744c20..f2cb85fb9280 100644
--- a/test/functional/apps/discover/_indexpattern_with_encoded_id.ts
+++ b/test/functional/apps/discover/_indexpattern_with_encoded_id.ts
@@ -16,7 +16,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   describe('indexpattern with encoded id', () => {
     before(async () => {
       await opensearchArchiver.loadIfNeeded('index_pattern_with_encoded_id');
-      await opensearchDashboardsServer.uiSettings.replace({ defaultIndex: 'with-encoded-id' });
+      await opensearchDashboardsServer.uiSettings.replace({
+        defaultIndex: 'with-encoded-id',
+        'discover:v2': false,
+      });
       await PageObjects.common.navigateToApp('discover');
     });
 
diff --git a/test/functional/apps/discover/_indexpattern_without_timefield.ts b/test/functional/apps/discover/_indexpattern_without_timefield.ts
index 6aa50ec2b7df..1f89753c0336 100644
--- a/test/functional/apps/discover/_indexpattern_without_timefield.ts
+++ b/test/functional/apps/discover/_indexpattern_without_timefield.ts
@@ -43,7 +43,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         'opensearch_dashboards_timefield',
       ]);
       await opensearchArchiver.loadIfNeeded('index_pattern_without_timefield');
-      await opensearchDashboardsServer.uiSettings.replace({ defaultIndex: 'without-timefield' });
+      await opensearchDashboardsServer.uiSettings.replace({
+        defaultIndex: 'without-timefield',
+        'discover:v2': false,
+      });
       await PageObjects.common.navigateToApp('discover');
     });
 
diff --git a/test/functional/apps/discover/_inspector.js b/test/functional/apps/discover/_inspector.js
index 5c4262118fa0..5f4c2438fce1 100644
--- a/test/functional/apps/discover/_inspector.js
+++ b/test/functional/apps/discover/_inspector.js
@@ -53,6 +53,7 @@ export default function ({ getService, getPageObjects }) {
       // delete .kibana index and update configDoc
       await opensearchDashboardsServer.uiSettings.replace({
         defaultIndex: 'logstash-*',
+        'discover:v2': false,
       });
 
       await PageObjects.common.navigateToApp('discover');
diff --git a/test/functional/apps/discover/_large_string.js b/test/functional/apps/discover/_large_string.js
index 6b0395aa02fd..2cad2b0daf90 100644
--- a/test/functional/apps/discover/_large_string.js
+++ b/test/functional/apps/discover/_large_string.js
@@ -47,7 +47,10 @@ export default function ({ getService, getPageObjects }) {
       ]);
       await opensearchArchiver.load('empty_opensearch_dashboards');
       await opensearchArchiver.loadIfNeeded('hamlet');
-      await opensearchDashboardsServer.uiSettings.replace({ defaultIndex: 'testlargestring' });
+      await opensearchDashboardsServer.uiSettings.replace({
+        defaultIndex: 'testlargestring',
+        'discover:v2': false,
+      });
     });
 
     it('verify the large string book present', async function () {
diff --git a/test/functional/apps/discover/_saved_queries.js b/test/functional/apps/discover/_saved_queries.js
index 6ba2002653af..c51850eac00d 100644
--- a/test/functional/apps/discover/_saved_queries.js
+++ b/test/functional/apps/discover/_saved_queries.js
@@ -35,11 +35,12 @@ export default function ({ getService, getPageObjects }) {
   const log = getService('log');
   const opensearchArchiver = getService('opensearchArchiver');
   const opensearchDashboardsServer = getService('opensearchDashboardsServer');
-  const PageObjects = getPageObjects(['common', 'discover', 'timePicker']);
+  const PageObjects = getPageObjects(['common', 'discover', 'timePicker', 'settings']);
   const browser = getService('browser');
 
   const defaultSettings = {
     defaultIndex: 'logstash-*',
+    'discover:v2': false,
   };
   const filterBar = getService('filterBar');
   const queryBar = getService('queryBar');
@@ -54,6 +55,7 @@ export default function ({ getService, getPageObjects }) {
       // and load a set of makelogs data
       await opensearchArchiver.loadIfNeeded('logstash_functional');
       await opensearchDashboardsServer.uiSettings.replace(defaultSettings);
+
       log.debug('discover');
       await PageObjects.common.navigateToApp('discover');
       await PageObjects.timePicker.setDefaultAbsoluteRange();
diff --git a/test/functional/apps/discover/_shared_links.js b/test/functional/apps/discover/_shared_links.js
index ecae25d8d4d3..0583ff398283 100644
--- a/test/functional/apps/discover/_shared_links.js
+++ b/test/functional/apps/discover/_shared_links.js
@@ -62,6 +62,7 @@ export default function ({ getService, getPageObjects }) {
 
       await opensearchDashboardsServer.uiSettings.replace({
         'state:storeInSessionStorage': storeStateInSessionStorage,
+        'discover:v2': false,
       });
 
       log.debug('discover');
@@ -96,7 +97,7 @@ export default function ({ getService, getPageObjects }) {
         it('should allow for copying the snapshot URL', async function () {
           const expectedUrl =
             baseUrl +
-            '/app/discover?_t=1453775307251#' +
+            '/app/discoverLegacy?_t=1453775307251#' +
             '/?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time' +
             ":(from:'2015-09-19T06:31:44.000Z',to:'2015-09" +
             "-23T18:31:44.000Z'))&_a=(columns:!(_source),filters:!(),index:'logstash-" +
@@ -121,7 +122,7 @@ export default function ({ getService, getPageObjects }) {
         it('should allow for copying the saved object URL', async function () {
           const expectedUrl =
             baseUrl +
-            '/app/discover#' +
+            '/app/discoverLegacy#' +
             '/view/ab12e3c0-f231-11e6-9486-733b1ac9221a' +
             '?_g=%28filters%3A%21%28%29%2CrefreshInterval%3A%28pause%3A%21t%2Cvalue%3A0%29%' +
             '2Ctime%3A%28from%3A%272015-09-19T06%3A31%3A44.000Z%27%2C' +
@@ -160,7 +161,7 @@ export default function ({ getService, getPageObjects }) {
         await browser.get(actualUrl, false);
         await retry.waitFor('shortUrl resolves and opens', async () => {
           const resolvedUrl = await browser.getCurrentUrl();
-          expect(resolvedUrl).to.match(/discover/);
+          expect(resolvedUrl).to.match(/discoverLegacy/);
           const resolvedTime = await PageObjects.timePicker.getTimeConfig();
           expect(resolvedTime.start).to.equal(actualTime.start);
           expect(resolvedTime.end).to.equal(actualTime.end);
@@ -175,7 +176,7 @@ export default function ({ getService, getPageObjects }) {
         await browser.get(currentUrl, false);
         await retry.waitFor('discover to open', async () => {
           const resolvedUrl = await browser.getCurrentUrl();
-          expect(resolvedUrl).to.match(/discover/);
+          expect(resolvedUrl).to.match(/discoverLegacy/);
           const { message } = await toasts.getErrorToast();
           expect(message).to.contain(
             'Unable to completely restore the URL, be sure to use the share functionality.'
diff --git a/test/functional/apps/discover/_sidebar.js b/test/functional/apps/discover/_sidebar.js
index 446cb1b760e0..5d6bcb5134e6 100644
--- a/test/functional/apps/discover/_sidebar.js
+++ b/test/functional/apps/discover/_sidebar.js
@@ -38,17 +38,18 @@ export default function ({ getService, getPageObjects }) {
 
   describe('discover sidebar', function describeIndexTests() {
     before(async function () {
-      // delete .kibana index and update configDoc
-      await opensearchDashboardsServer.uiSettings.replace({
-        defaultIndex: 'logstash-*',
-      });
-
       log.debug('load opensearch-dashboards index with default index pattern');
       await opensearchArchiver.load('discover');
 
       // and load a set of makelogs data
       await opensearchArchiver.loadIfNeeded('logstash_functional');
 
+      // delete .kibana index and update configDoc
+      await opensearchDashboardsServer.uiSettings.replace({
+        defaultIndex: 'logstash-*',
+        'discover:v2': false,
+      });
+
       log.debug('discover');
       await PageObjects.common.navigateToApp('discover');
 
diff --git a/test/functional/apps/discover/_source_filters.js b/test/functional/apps/discover/_source_filters.js
index d324a0972b8a..1f425a4e341f 100644
--- a/test/functional/apps/discover/_source_filters.js
+++ b/test/functional/apps/discover/_source_filters.js
@@ -38,17 +38,18 @@ export default function ({ getService, getPageObjects }) {
 
   describe('source filters', function describeIndexTests() {
     before(async function () {
-      // delete .kibana index and update configDoc
-      await opensearchDashboardsServer.uiSettings.replace({
-        defaultIndex: 'logstash-*',
-      });
-
       log.debug('load opensearch-dashboards index with default index pattern');
       await opensearchArchiver.load('visualize_source-filters');
 
       // and load a set of makelogs data
       await opensearchArchiver.loadIfNeeded('logstash_functional');
 
+      // delete .kibana index and update configDoc
+      await opensearchDashboardsServer.uiSettings.replace({
+        defaultIndex: 'logstash-*',
+        'discover:v2': false,
+      });
+
       log.debug('discover');
       await PageObjects.common.navigateToApp('discover');
 
diff --git a/test/functional/apps/home/_navigation.ts b/test/functional/apps/home/_navigation.ts
index 03230f1270ed..36f8e50ea543 100644
--- a/test/functional/apps/home/_navigation.ts
+++ b/test/functional/apps/home/_navigation.ts
@@ -36,11 +36,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'header', 'home', 'timePicker']);
   const appsMenu = getService('appsMenu');
   const opensearchArchiver = getService('opensearchArchiver');
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
 
   describe('OpenSearch Dashboards browser back navigation should work', function describeIndexTests() {
     before(async () => {
       await opensearchArchiver.loadIfNeeded('discover');
       await opensearchArchiver.loadIfNeeded('logstash_functional');
+
+      await opensearchDashboardsServer.uiSettings.replace({ 'discover:v2': false });
     });
 
     it('detect navigate back issues', async () => {
diff --git a/test/functional/apps/management/_handle_alias.js b/test/functional/apps/management/_handle_alias.js
index c5c6456f0442..203345e38f91 100644
--- a/test/functional/apps/management/_handle_alias.js
+++ b/test/functional/apps/management/_handle_alias.js
@@ -32,6 +32,7 @@ import expect from '@osd/expect';
 
 export default function ({ getService, getPageObjects }) {
   const opensearchArchiver = getService('opensearchArchiver');
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
   const opensearch = getService('legacyOpenSearch');
   const retry = getService('retry');
   const security = getService('security');
@@ -42,6 +43,9 @@ export default function ({ getService, getPageObjects }) {
       await security.testUser.setRoles(['opensearch_dashboards_admin', 'test_alias_reader']);
       await opensearchArchiver.loadIfNeeded('alias');
       await opensearchArchiver.load('empty_opensearch_dashboards');
+      await opensearchDashboardsServer.uiSettings.replace({
+        'discover:v2': false,
+      });
       await opensearch.indices.updateAliases({
         body: {
           actions: [
diff --git a/test/functional/apps/management/_scripted_fields.js b/test/functional/apps/management/_scripted_fields.js
index 9ce2a57436e1..fd290ce76b8a 100644
--- a/test/functional/apps/management/_scripted_fields.js
+++ b/test/functional/apps/management/_scripted_fields.js
@@ -71,8 +71,9 @@ export default function ({ getService, getPageObjects }) {
     before(async function () {
       await browser.setWindowSize(1200, 800);
       await opensearchArchiver.load('discover');
-      // delete .kibana index and then wait for OpenSearch Dashboards to re-create it
-      await opensearchDashboardsServer.uiSettings.replace({});
+      await opensearchDashboardsServer.uiSettings.replace({
+        'discover:v2': false,
+      });
       await opensearchDashboardsServer.uiSettings.update({});
     });
 
diff --git a/test/functional/apps/visualize/_lab_mode.js b/test/functional/apps/visualize/_lab_mode.js
index 82ecbcb2a655..d852ac484eaa 100644
--- a/test/functional/apps/visualize/_lab_mode.js
+++ b/test/functional/apps/visualize/_lab_mode.js
@@ -34,8 +34,14 @@ import { VISUALIZE_ENABLE_LABS_SETTING } from '../../../../src/plugins/visualiza
 export default function ({ getService, getPageObjects }) {
   const log = getService('log');
   const PageObjects = getPageObjects(['common', 'header', 'discover', 'settings']);
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
 
   describe('visualize lab mode', () => {
+    before(async () => {
+      await opensearchDashboardsServer.uiSettings.replace({
+        'discover:v2': false,
+      });
+    });
     it('disabling does not break loading saved searches', async () => {
       await PageObjects.common.navigateToUrl('discover', '', { useActualUrl: true });
       await PageObjects.discover.saveSearch('visualize_lab_mode_test');
diff --git a/test/functional/apps/visualize/index.ts b/test/functional/apps/visualize/index.ts
index fb7e721db7de..2bdc5990b928 100644
--- a/test/functional/apps/visualize/index.ts
+++ b/test/functional/apps/visualize/index.ts
@@ -49,6 +49,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       await opensearchDashboardsServer.uiSettings.replace({
         defaultIndex: 'logstash-*',
         [UI_SETTINGS.FORMAT_BYTES_DEFAULT_PATTERN]: '0,0.[000]b',
+        'discover:v2': false,
       });
       isOss = await deployment.isOss();
     });
diff --git a/test/functional/config.js b/test/functional/config.js
index d927aea2966f..b862208276bf 100644
--- a/test/functional/config.js
+++ b/test/functional/config.js
@@ -80,7 +80,7 @@ export default async function ({ readConfigFile }) {
         pathname: '/status',
       },
       discover: {
-        pathname: '/app/discover',
+        pathname: '/app/discoverLegacy',
         hash: '/',
       },
       context: {
diff --git a/test/functional/screenshots/baseline/area_chart.png b/test/functional/screenshots/baseline/area_chart.png
index b234aa4b2f7f..cb3d4455937b 100644
Binary files a/test/functional/screenshots/baseline/area_chart.png and b/test/functional/screenshots/baseline/area_chart.png differ
diff --git a/test/functional/screenshots/baseline/tsvb_dashboard.png b/test/functional/screenshots/baseline/tsvb_dashboard.png
index e33a1ccb1266..0f3379feb320 100644
Binary files a/test/functional/screenshots/baseline/tsvb_dashboard.png and b/test/functional/screenshots/baseline/tsvb_dashboard.png differ
diff --git a/test/functional/services/dashboard/visualizations.ts b/test/functional/services/dashboard/visualizations.ts
index aee71c8d58ba..588368d4b4a1 100644
--- a/test/functional/services/dashboard/visualizations.ts
+++ b/test/functional/services/dashboard/visualizations.ts
@@ -37,6 +37,8 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }: F
   const queryBar = getService('queryBar');
   const testSubjects = getService('testSubjects');
   const dashboardAddPanel = getService('dashboardAddPanel');
+  const browser = getService('browser');
+  const opensearchDashboardsServer = getService('opensearchDashboardsServer');
   const PageObjects = getPageObjects([
     'dashboard',
     'visualize',
@@ -44,6 +46,8 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }: F
     'header',
     'discover',
     'timePicker',
+    'common',
+    'settings',
   ]);
 
   return new (class DashboardVisualizations {
@@ -69,6 +73,11 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }: F
       fields?: string[];
     }) {
       log.debug(`createSavedSearch(${name})`);
+
+      await opensearchDashboardsServer.uiSettings.replace({
+        'discover:v2': false,
+      });
+      await browser.refresh();
       await PageObjects.header.clickDiscover();
 
       await PageObjects.timePicker.setHistoricalDataRange();
diff --git a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
index 326ca8753a76..ac1c773e617d 100644
--- a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
     "@osd/plugin-helpers": "1.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.12.0",
diff --git a/test/plugin_functional/plugins/osd_sample_panel_action/package.json b/test/plugin_functional/plugins/osd_sample_panel_action/package.json
index 16579e3f07e6..36101d4524f8 100644
--- a/test/plugin_functional/plugins/osd_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/osd_sample_panel_action/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
     "react": "^16.14.0",
     "typescript": "4.0.2"
   }
diff --git a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
index b74231619c98..b1592d36ee3f 100644
--- a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
     "@osd/plugin-helpers": "1.0.0",
     "react": "^16.14.0",
     "typescript": "4.0.2"
diff --git a/yarn.lock b/yarn.lock
index 81d80ced4253..544864b2e711 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1154,6 +1154,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
+  integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.16.7", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1273,35 +1280,34 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@npm:@opensearch-project/oui@1.3.0-alpha.2":
-  version "1.3.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.3.0-alpha.2.tgz#90060e68ba9809239b7ee22a4f12c65e94e80028"
-  integrity sha512-RZ+23jgnz2vYgfipd++gNT9zsSNbqm8XEyE9vr6jMMGiwL/XCUJ/7Vli5Z3BpQb1XPQVklRQscMoG2UT9xEpxQ==
-  dependencies:
-    "@types/chroma-js" "^2.0.0"
-    "@types/lodash" "^4.14.160"
-    "@types/numeral" "^0.0.28"
-    "@types/react-beautiful-dnd" "^13.0.0"
-    "@types/react-input-autosize" "^2.2.0"
-    "@types/react-virtualized-auto-sizer" "^1.0.0"
-    "@types/react-window" "^1.8.2"
+"@elastic/eui@npm:@opensearch-project/oui@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.3.0.tgz#f0a55833b4fb3589ec11ca7344fa4cbd54db39a7"
+  integrity sha512-3hHNtZJevMQUGnTXuyrrj49C/f4Atlp/4xgsj7ErUyf0YMBFH6s5gReznk92s2u+9iUXg+AkU63C36BgAG62ow==
+  dependencies:
+    "@types/chroma-js" "^2.4.0"
+    "@types/lodash" "4.14.192"
+    "@types/numeral" "^2.0.2"
+    "@types/react-beautiful-dnd" "^13.1.3"
+    "@types/react-input-autosize" "^2.2.1"
+    "@types/react-virtualized-auto-sizer" "^1.0.1"
+    "@types/react-window" "^1.8.5"
     "@types/refractor" "^3.0.0"
-    "@types/resize-observer-browser" "^0.1.5"
-    "@types/vfile-message" "^2.0.0"
-    chroma-js "^2.1.0"
-    classnames "^2.2.6"
+    "@types/resize-observer-browser" "^0.1.7"
+    chroma-js "^2.4.2"
+    classnames "^2.3.2"
     lodash "^4.17.21"
     mdast-util-to-hast "^10.0.0"
     numeral "^2.0.6"
-    prop-types "^15.6.0"
+    prop-types "^15.8.1"
     react-ace "^7.0.5"
-    react-beautiful-dnd "^13.0.0"
-    react-dropzone "^11.2.0"
+    react-beautiful-dnd "^13.1.1"
+    react-dropzone "^14.2.3"
     react-focus-on "^3.5.0"
-    react-input-autosize "^2.2.2"
+    react-input-autosize "^3.0.0"
     react-is "~16.3.0"
-    react-virtualized-auto-sizer "^1.0.2"
-    react-window "^1.8.5"
+    react-virtualized-auto-sizer "1.0.7"
+    react-window "^1.8.9"
     refractor "^3.6.0"
     rehype-raw "^5.0.0"
     rehype-react "^6.0.0"
@@ -1309,12 +1315,12 @@
     remark-emoji "^2.1.0"
     remark-parse "^8.0.3"
     remark-rehype "^8.0.0"
-    tabbable "^3.0.0"
+    tabbable "^6.1.2"
     text-diff "^1.0.1"
     unified "^9.2.0"
     unist-util-visit "^2.0.3"
-    url-parse "^1.5.9"
-    uuid "^8.3.0"
+    url-parse "^1.5.10"
+    uuid "^9.0.0"
     vfile "^4.2.0"
 
 "@elastic/filesaver@1.1.2":
@@ -2221,35 +2227,35 @@
   resolved "https://registry.yarnpkg.com/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz#8ace5259254426ccef57f3175bc64ed7095ed919"
   integrity sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==
 
-"@lmdb/lmdb-darwin-arm64@2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-2.8.0.tgz#20c8c2b81cde5c35fcbe81714448493db93d3e62"
-  integrity sha512-SadxUdQvGDa+gfZr6uX8kiXbyVUzulhhvieco12K/c5oaNY00MQAm5C00eP2ht959zVus6cQyD09LmoP0OBIqg==
+"@lmdb/lmdb-darwin-arm64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-2.8.5.tgz#895d8cb16a9d709ce5fedd8b60022903b875e08e"
+  integrity sha512-KPDeVScZgA1oq0CiPBcOa3kHIqU+pTOwRFDIhxvmf8CTNvqdZQYp5cCKW0bUk69VygB2PuTiINFWbY78aR2pQw==
 
-"@lmdb/lmdb-darwin-x64@2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-2.8.0.tgz#b78c20328725daefce846bf7480a8d3d5b789e19"
-  integrity sha512-woNqmHXTX7cLu9Mbyj/c1wHQFSoCC/n1CwL2xw2tLVQTXFFJrX0RJQd5XBtvr5kC6Rqf51dk3ScLHU/Bl6v7wg==
+"@lmdb/lmdb-darwin-x64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-2.8.5.tgz#ca243534c8b37d5516c557e4624256d18dd63184"
+  integrity sha512-w/sLhN4T7MW1nB3R/U8WK5BgQLz904wh+/SmA2jD8NnF7BLLoUgflCNxOeSPOWp8geP6nP/+VjWzZVip7rZ1ug==
 
-"@lmdb/lmdb-linux-arm64@2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-2.8.0.tgz#1b343dfc91c13c3633b9237dce4c454c4a7d576f"
-  integrity sha512-XQtJs4xOQ9uNKuuxSkJfsUdQJ1a/gyKwbxBGQw5VUo/RhzwxOdVM8deIBv8UfdjfBId1JIDn/8FXuPmDVfnKQg==
+"@lmdb/lmdb-linux-arm64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-2.8.5.tgz#b44a8023057e21512eefb9f6120096843b531c1e"
+  integrity sha512-vtbZRHH5UDlL01TT5jB576Zox3+hdyogvpcbvVJlmU5PdL3c5V7cj1EODdh1CHPksRl+cws/58ugEHi8bcj4Ww==
 
-"@lmdb/lmdb-linux-arm@2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-2.8.0.tgz#26e079de966e9d68b640810593fdb14f1b5958f2"
-  integrity sha512-uog9KOYrK0uIafyIg7wddB3h0s6qA9qoDZVfACEW3LvYCmw5iLOAsKuh/c+7CUeCYyAJVaWGK2YSDFXRlHdcUw==
+"@lmdb/lmdb-linux-arm@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-2.8.5.tgz#17bd54740779c3e4324e78e8f747c21416a84b3d"
+  integrity sha512-c0TGMbm2M55pwTDIfkDLB6BpIsgxV4PjYck2HiOX+cy/JWiBXz32lYbarPqejKs9Flm7YVAKSILUducU9g2RVg==
 
-"@lmdb/lmdb-linux-x64@2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-2.8.0.tgz#ab84bb9591f73e194ee5d8c7aeecddbe953112ea"
-  integrity sha512-I5OuHnZYoGtIlq6Wmga3qHb0yefNgMrvsb+XbXfoDuQNa/KVBUb9UZgNJ65707egwHNGCFaMwXcKoGNTaJof6A==
+"@lmdb/lmdb-linux-x64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-2.8.5.tgz#6c61835b6cc58efdf79dbd5e8c72a38300a90302"
+  integrity sha512-Xkc8IUx9aEhP0zvgeKy7IQ3ReX2N8N1L0WPcQwnZweWmOuKfwpS3GRIYqLtK5za/w3E60zhFfNdS+3pBZPytqQ==
 
-"@lmdb/lmdb-win32-x64@2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-2.8.0.tgz#5fa3c9453820d474ffcf7a5c1d71d7b3775621fe"
-  integrity sha512-RWUSEdHh+MbqmshbsyAHA1kInR7F0MEphWh4HzWlP+3bjUVy36Fn6L1xVbLPfndcAwlbv/x5XuyKaiKK2hEzrw==
+"@lmdb/lmdb-win32-x64@2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-2.8.5.tgz#8233e8762440b0f4632c47a09b1b6f23de8b934c"
+  integrity sha512-4wvrf5BgnR8RpogHhtpCPJMKBmvyZPhhUtEwMJbXh0ni2BucpfF07jlmyM11zRqQ2XIq6PbC2j7W7UCCcm1rRQ==
 
 "@mapbox/hast-util-table-cell-style@^0.2.0":
   version "0.2.0"
@@ -2498,10 +2504,10 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@opensearch-project/opensearch@^2.2.0":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@opensearch-project/opensearch/-/opensearch-2.2.1.tgz#a400203afa6512ef73945663163a404763a10f5a"
-  integrity sha512-8zfQX1acL9eWG+ohIc9nJVT9LSqXCdbVEJs0rCPRtji3XF6ahzsiKmGNTeWLxCPDxWCjAIWq9t95xP3Y5Egi6Q==
+"@opensearch-project/opensearch@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@opensearch-project/opensearch/-/opensearch-2.3.1.tgz#3596e2f1f0615a7555102f6f941f0e0ec645c2cd"
+  integrity sha512-Kg8tddAx6sinStnNi6IeGilfvLWlonIxaRdVNiJcNPr1yMqd0c9TSegn18zKr0Pb0IM9xBIGBSkRPuh67ZN6Hw==
   dependencies:
     aws4 "^1.11.0"
     debug "^4.3.1"
@@ -2928,10 +2934,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/chroma-js@^2.0.0":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.1.3.tgz#0b03d737ff28fad10eb884e0c6cedd5ffdc4ba0a"
-  integrity sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g==
+"@types/chroma-js@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.4.0.tgz#476a16ae848c77478079d6749236fdb98837b92c"
+  integrity sha512-JklMxityrwjBTjGY2anH8JaTx3yjRU3/sEHSblLH1ba5lqcSh1LnImXJZO5peJfXyqKYWjHTGy4s5Wz++hARrw==
 
 "@types/clone@~2.1.1":
   version "2.1.1"
@@ -3346,7 +3352,12 @@
     "@types/node" "*"
     "@types/webpack" "^4"
 
-"@types/lodash@^4.14.160", "@types/lodash@^4.14.170":
+"@types/lodash@4.14.192":
+  version "4.14.192"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.192.tgz#5790406361a2852d332d41635d927f1600811285"
+  integrity sha512-km+Vyn3BYm5ytMO13k9KTp27O75rbQ0NFw+U//g+PX7VZyjCioXaRFisqSIJRECljcTv73G3i6BpglNGHgUQ5A==
+
+"@types/lodash@^4.14.170":
   version "4.14.181"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.181.tgz#d1d3740c379fda17ab175165ba04e2d03389385d"
   integrity sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==
@@ -3462,10 +3473,10 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-path/-/normalize-path-3.0.0.tgz#bb5c46cab77b93350b4cf8d7ff1153f47189ae31"
   integrity sha512-Nd8y/5t/7CRakPYiyPzr/IAfYusy1FkcZYFEAcoMZkwpJv2n4Wm+olW+e7xBdHEXhOnWdG9ddbar0gqZWS4x5Q==
 
-"@types/numeral@^0.0.28":
-  version "0.0.28"
-  resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-0.0.28.tgz#e43928f0bda10b169b6f7ecf99e3ddf836b8ebe4"
-  integrity sha512-Sjsy10w6XFHDktJJdXzBJmoondAKW+LcGpRFH+9+zXEDj0cOH8BxJuZA9vUDSMAzU1YRJlsPKmZEEiTYDlICLw==
+"@types/numeral@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-2.0.2.tgz#8ea2c4f4e64c0cc948ad7da375f6f827778a7912"
+  integrity sha512-A8F30k2gYJ/6e07spSCPpkuZu79LCnkPTvqmIWQzNGcrzwFKpVOydG41lNt5wZXjSI149qjyzC2L1+F2PD/NUA==
 
 "@types/ora@^1.3.5":
   version "1.3.5"
@@ -3523,10 +3534,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-beautiful-dnd@^13.0.0":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz#510405abb09f493afdfd898bf83995dc6385c130"
-  integrity sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg==
+"@types/react-beautiful-dnd@^13.1.3":
+  version "13.1.4"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.4.tgz#bcec72da719c18c0d8b4a7cb00e7fb443211d6d7"
+  integrity sha512-4bIBdzOr0aavN+88q3C7Pgz+xkb7tz3whORYrmSj77wfVEMfiWiooIwVWFR7KM2e+uGTe5BVrXqSfb0aHeflJA==
   dependencies:
     "@types/react" "*"
 
@@ -3551,7 +3562,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-input-autosize@^2.2.0":
+"@types/react-input-autosize@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.2.1.tgz#6a335212e7fce1e1a4da56ae2095c8c5c35fbfe6"
   integrity sha512-RxzEjd4gbLAAdLQ92Q68/AC+TfsAKTc4evsArUH1aIShIMqQMIMjsxoSnwyjtbFTO/AGIW/RQI94XSdvOxCz/w==
@@ -3604,7 +3615,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-virtualized-auto-sizer@^1.0.0":
+"@types/react-virtualized-auto-sizer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
   integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
@@ -3619,7 +3630,7 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react-window@^1.8.2":
+"@types/react-window@^1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
   integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
@@ -3656,7 +3667,7 @@
   dependencies:
     "@types/prismjs" "*"
 
-"@types/resize-observer-browser@^0.1.5":
+"@types/resize-observer-browser@^0.1.7":
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz#294aaadf24ac6580b8fbd1fe3ab7b59fe85f9ef3"
   integrity sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg==
@@ -3826,13 +3837,6 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.10.tgz#637d3c8431f112edf6728ac9bdfadfe029540f48"
   integrity sha512-BgeaZuElf7DEYZhWYDTc/XcLZXdVgFkVSTa13BqKvbnmUrxr3TJFKofUxCtDO9UQOdhnV+HPOESdHiHKZOJV1A==
 
-"@types/vfile-message@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/vfile-message/-/vfile-message-2.0.0.tgz#690e46af0fdfc1f9faae00cd049cc888957927d5"
-  integrity sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==
-  dependencies:
-    vfile-message "*"
-
 "@types/vinyl-fs@^2.4.11":
   version "2.4.12"
   resolved "https://registry.yarnpkg.com/@types/vinyl-fs/-/vinyl-fs-2.4.12.tgz#7b4673d9b4d5a874c8652d10f0f0265479014c8e"
@@ -5793,7 +5797,7 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chroma-js@^2.1.0:
+chroma-js@^2.1.0, chroma-js@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.4.2.tgz#dffc214ed0c11fa8eefca2c36651d8e57cbfb2b0"
   integrity sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==
@@ -5849,6 +5853,11 @@ classnames@2.3.1, classnames@2.x, classnames@^2.2.5, classnames@^2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -6143,6 +6152,11 @@ compare-versions@^5.0.1:
   resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-5.0.1.tgz#14c6008436d994c3787aba38d4087fabe858555e"
   integrity sha512-v8Au3l0b+Nwkp4G142JcgJFh1/TUhdxut7wzD1Nq1dyp5oa3tXaqb03EXOAB6jS4gMlalkjAUPZBMiAfKUixHQ==
 
+complex.js@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/complex.js/-/complex.js-2.1.1.tgz#0675dac8e464ec431fb2ab7d30f41d889fb25c31"
+  integrity sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==
+
 component-emitter@^1.2.1, component-emitter@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
@@ -6906,6 +6920,11 @@ decimal.js@^10.2.1:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
 
+decimal.js@^10.4.3:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+
 decode-uri-component@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
@@ -7855,6 +7874,11 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escape-latex@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/escape-latex/-/escape-latex-1.2.0.tgz#07c03818cf7dac250cce517f4fda1b001ef2bca1"
+  integrity sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==
+
 escape-string-regexp@4.0.0, escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@@ -8606,12 +8630,12 @@ file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-file-selector@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.4.0.tgz#59ec4f27aa5baf0841e9c6385c8386bef4d18b17"
-  integrity sha512-iACCiXeMYOvZqlF1kTiYINzgepRBymz1wwjiuup9u9nayhb6g4fSwiyJ/6adli+EPwrWtpgQAh2PoS7HukEGEg==
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
   dependencies:
-    tslib "^2.0.3"
+    tslib "^2.4.0"
 
 file-sync-cmp@^0.1.0:
   version "0.1.1"
@@ -10950,6 +10974,11 @@ jake@^10.8.5:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
+javascript-natural-sort@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
+  integrity sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==
+
 jest-canvas-mock@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.5.1.tgz#81509af658ef485e9a1bf39c64e06761517bdbcb"
@@ -11843,23 +11872,22 @@ listr@^0.14.1:
     rxjs "^6.3.3"
 
 lmdb@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.8.0.tgz#0f0aee59e35e6f890d75c02d0860e260bc95955a"
-  integrity sha512-KMBd90xia9x289LlwDtZkqvyXDFM1cZATxKm965uo3Nq2eaBTy+fmJsHf7+d6xXtFDANxKzWVvrbkThAAI2lfg==
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.8.5.tgz#ce191110c755c0951caa062722e300c703973837"
+  integrity sha512-9bMdFfc80S+vSldBmG3HOuLVHnxRdNTlpzR6QDnzqCQtCzGUEAGTzBKYMeIM+I/sU4oZfgbcbS7X7F65/z/oxQ==
   dependencies:
-    msgpackr "1.9.1"
+    msgpackr "^1.9.5"
     node-addon-api "^6.1.0"
-    node-gyp-build-optional-packages "5.1.0"
-    ordered-binary "^1.4.0"
+    node-gyp-build-optional-packages "5.1.1"
+    ordered-binary "^1.4.1"
     weak-lru-cache "^1.2.2"
-    yarn "^1.22.19"
   optionalDependencies:
-    "@lmdb/lmdb-darwin-arm64" "2.8.0"
-    "@lmdb/lmdb-darwin-x64" "2.8.0"
-    "@lmdb/lmdb-linux-arm" "2.8.0"
-    "@lmdb/lmdb-linux-arm64" "2.8.0"
-    "@lmdb/lmdb-linux-x64" "2.8.0"
-    "@lmdb/lmdb-win32-x64" "2.8.0"
+    "@lmdb/lmdb-darwin-arm64" "2.8.5"
+    "@lmdb/lmdb-darwin-x64" "2.8.5"
+    "@lmdb/lmdb-linux-arm" "2.8.5"
+    "@lmdb/lmdb-linux-arm64" "2.8.5"
+    "@lmdb/lmdb-linux-x64" "2.8.5"
+    "@lmdb/lmdb-win32-x64" "2.8.5"
 
 load-bmfont@^1.3.1, load-bmfont@^1.4.0:
   version "1.4.1"
@@ -12327,6 +12355,21 @@ markdown-it@^12.3.2:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+mathjs@^11.8.2:
+  version "11.8.2"
+  resolved "https://registry.yarnpkg.com/mathjs/-/mathjs-11.8.2.tgz#085d5cae70cd5c9702c0916979d6f55c74cb87e6"
+  integrity sha512-ZePu0oDbM0vuFExikIMY/9syjo/jbgNbX6ti+iMdaALDuxciMCsXIslGDBEn7QCpCWYBiVCYmc0lsmk5bwHBdQ==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    complex.js "^2.1.1"
+    decimal.js "^10.4.3"
+    escape-latex "^1.2.0"
+    fraction.js "^4.2.0"
+    javascript-natural-sort "^0.7.1"
+    seedrandom "^3.0.5"
+    tiny-emitter "^2.1.0"
+    typed-function "^4.1.0"
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -12902,10 +12945,10 @@ msgpackr-extract@^3.0.2:
     "@msgpackr-extract/msgpackr-extract-linux-x64" "3.0.2"
     "@msgpackr-extract/msgpackr-extract-win32-x64" "3.0.2"
 
-msgpackr@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.9.1.tgz#4375d705232b721bedb44a3993e7aa8a6f959502"
-  integrity sha512-jJdrNH8tzfCtT0rjPFryBXjRDQE7rqfLkah4/8B4gYa7NNZYFBcGxqWBtfQpGC+oYyBwlkj3fARk4aooKNPHxg==
+msgpackr@^1.9.5:
+  version "1.9.7"
+  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.9.7.tgz#8f13c06d7a22946a6d8351804ce39a6a9e74ca83"
+  integrity sha512-baUNaLvKQvVhzfWTNO07njwbZK1Lxjtb0P1JL6/EhXdLTHzR57/mZqqJC39TtQKvOmkJA4pcejS4dbk7BDgLLA==
   optionalDependencies:
     msgpackr-extract "^3.0.2"
 
@@ -13113,10 +13156,10 @@ node-gyp-build-optional-packages@5.0.7:
   resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.7.tgz#5d2632bbde0ab2f6e22f1bbac2199b07244ae0b3"
   integrity sha512-YlCCc6Wffkx0kHkmam79GKvDQ6x+QZkMjFGrIMxgFNILFvGSbCp2fCBC55pGTT9gVaz8Na5CLmxt/urtzRv36w==
 
-node-gyp-build-optional-packages@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.1.0.tgz#25f59b09bee310dd1b14d7ce539aa7c6093109b7"
-  integrity sha512-Jy0ZKyeFh3QwhJT2augyHuhn0WZ15osYBKNw4U6WAp8nadAgcB60uKJ80Y7HG2OkKnTNOtiUwqNZbSKW/nkvKg==
+node-gyp-build-optional-packages@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.1.1.tgz#52b143b9dd77b7669073cbfe39e3f4118bfc603c"
+  integrity sha512-+P72GAjVAbTxjjwUmwjVrqrdZROD4nf8KgpBoDxqXXTiYZZt/ud60dE5yvCSr9lRO8e8yv6kgJIC0K0PfZFVQw==
   dependencies:
     detect-libc "^2.0.1"
 
@@ -13580,10 +13623,10 @@ ora@^4.0.4:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
-ordered-binary@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ordered-binary/-/ordered-binary-1.4.0.tgz#6bb53d44925f3b8afc33d1eed0fa15693b211389"
-  integrity sha512-EHQ/jk4/a9hLupIKxTfUsQRej1Yd/0QLQs3vGvIqg5ZtCYSzNhkzHoZc7Zf4e4kUlDaC3Uw8Q/1opOLNN2OKRQ==
+ordered-binary@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/ordered-binary/-/ordered-binary-1.4.1.tgz#205cb6efd6c27fa0ef4eced994a023e081cdc911"
+  integrity sha512-9LtiGlPy982CsgxZvJGNNp2/NnrgEr6EAyN3iIEP3/8vd3YLgAZQHbQ75ZrkfBRGrNg37Dk3U6tuVb+B4Xfslg==
 
 ordered-read-streams@^1.0.0:
   version "1.0.1"
@@ -14546,10 +14589,10 @@ react-ace@^7.0.5:
     lodash.isequal "^4.5.0"
     prop-types "^15.7.2"
 
-react-beautiful-dnd@^13.0.0:
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
-  integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
+react-beautiful-dnd@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
+  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
   dependencies:
     "@babel/runtime" "^7.9.2"
     css-box-model "^1.2.0"
@@ -14592,13 +14635,13 @@ react-draggable@^4.0.3:
     clsx "^1.1.1"
     prop-types "^15.6.0"
 
-react-dropzone@^11.2.0:
-  version "11.7.1"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.7.1.tgz#3851bb75b26af0bf1b17ce1449fd980e643b9356"
-  integrity sha512-zxCMwhfPy1olUEbw3FLNPLhAm/HnaYH5aELIEglRbqabizKAdHs0h+WuyOpmA+v1JXn0++fpQDdNfUagWt5hJQ==
+react-dropzone@^14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
+  integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
   dependencies:
     attr-accept "^2.2.2"
-    file-selector "^0.4.0"
+    file-selector "^0.6.0"
     prop-types "^15.8.1"
 
 react-error-boundary@^3.1.0:
@@ -14644,10 +14687,10 @@ react-grid-layout@^0.16.2:
     react-draggable "3.x"
     react-resizable "1.x"
 
-react-input-autosize@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
-  integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
+react-input-autosize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
+  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
   dependencies:
     prop-types "^15.5.8"
 
@@ -14834,15 +14877,15 @@ react-use@^13.27.0:
     ts-easing "^0.2.0"
     tslib "^1.10.0"
 
-react-virtualized-auto-sizer@^1.0.2:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
-  integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+react-virtualized-auto-sizer@1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz#bfb8414698ad1597912473de3e2e5f82180c1195"
+  integrity sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==
 
-react-window@^1.8.5:
-  version "1.8.6"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
-  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+react-window@^1.8.9:
+  version "1.8.9"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8"
+  integrity sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
@@ -15058,6 +15101,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -15676,6 +15724,11 @@ secure-json-parse@^2.4.0:
   resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.4.0.tgz#5aaeaaef85c7a417f76271a4f5b0cc3315ddca85"
   integrity sha512-Q5Z/97nbON5t/L/sH6mY2EacfjVGwrCcSi5D3btRO2GZ8pf1K1UN7Z9H5J57hjVU2Qzxr1xO+FmBhOvEkzCMmg==
 
+seedrandom@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"
+  integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
+
 selenium-webdriver@^4.0.0-alpha.7:
   version "4.0.0-alpha.7"
   resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.7.tgz#e3879d8457fd7ad8e4424094b7dc0540d99e6797"
@@ -16764,10 +16817,10 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-tabbable@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-3.1.2.tgz#f2d16cccd01f400e38635c7181adfe0ad965a4a2"
-  integrity sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ==
+tabbable@^6.1.2:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
 table@^5.2.3:
   version "5.4.6"
@@ -17045,6 +17098,11 @@ timsort@~0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-emitter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
@@ -17068,11 +17126,6 @@ tinygradient@^1.1.5:
     "@types/tinycolor2" "^1.4.0"
     tinycolor2 "^1.0.0"
 
-tinymath@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/tinymath/-/tinymath-1.2.1.tgz#f97ed66c588cdbf3c19dfba2ae266ee323db7e47"
-  integrity sha512-8CYutfuHR3ywAJus/3JUhaJogZap1mrUQGzNxdBiQDhP3H0uFdQenvaXvqI8lMehX4RsanRZzxVfjMBREFdQaA==
-
 tmp@0.0.30:
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
@@ -17293,6 +17346,11 @@ tslib@^2.0.0, tslib@^2.0.3, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tslib@^2.4.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tslib@~2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
@@ -17382,6 +17440,11 @@ typechecker@^6.2.0:
   resolved "https://registry.yarnpkg.com/typechecker/-/typechecker-6.4.0.tgz#c087dc744c5a0f17524d58a17eb31a9660ab7324"
   integrity sha512-EbOu+9szY13mhl0EsvLXnR+pTCa3gTHQQPLdce72ujcC9fRHXlVFBNXtHeRhgzLxLlKUh4zA9C0tezLDgshf+A==
 
+typed-function@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/typed-function/-/typed-function-4.1.0.tgz#da4bdd8a6d19a89e22732f75e4a410860aaf9712"
+  integrity sha512-DGwUl6cioBW5gw2L+6SMupGwH/kZOqivy17E4nsh1JI9fKF87orMmlQx3KISQPmg3sfnOUGlwVkroosvgddrlg==
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -17619,13 +17682,6 @@ unist-util-stringify-position@^2.0.0:
   dependencies:
     "@types/unist" "^2.0.2"
 
-unist-util-stringify-position@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.2.tgz#5c6aa07c90b1deffd9153be170dce628a869a447"
-  integrity sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==
-  dependencies:
-    "@types/unist" "^2.0.0"
-
 unist-util-visit-parents@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz#f6e3afee8bdbf961c0e6f028ea3c0480028c3d06"
@@ -17721,7 +17777,7 @@ url-loader@^2.2.0:
     mime "^2.4.4"
     schema-utils "^2.5.0"
 
-url-parse@^1.5.3, url-parse@^1.5.9:
+url-parse@^1.5.10, url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
   integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
@@ -17831,11 +17887,6 @@ uuid@^3.3.2, uuid@^3.3.3:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
-
 uuid@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
@@ -18257,14 +18308,6 @@ vfile-location@^3.0.0, vfile-location@^3.2.0:
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.2.0.tgz#d8e41fbcbd406063669ebf6c33d56ae8721d0f3c"
   integrity sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==
 
-vfile-message@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.2.tgz#a2908f64d9e557315ec9d7ea3a910f658ac05f7d"
-  integrity sha512-QjSNP6Yxzyycd4SVOtmKKyTsSvClqBPJcd00Z0zuPj3hOIjg0rUPG6DbFGPvUKRgYyaIWLPKpuEclcuvb3H8qA==
-  dependencies:
-    "@types/unist" "^2.0.0"
-    unist-util-stringify-position "^3.0.0"
-
 vfile-message@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
@@ -18921,11 +18964,6 @@ yargs@~17.6.0:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
-yarn@^1.22.19:
-  version "1.22.19"
-  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
-  integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==
-
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"