diff --git a/.lycheeignore b/.lycheeignore
index 82348e6f047c..839c7454eb5d 100644
--- a/.lycheeignore
+++ b/.lycheeignore
@@ -91,3 +91,4 @@ https://code.google.com/p/v8/wiki/JavaScriptStackTraceApi
 http:/adomas.org/javascript-mouse-wheel/
 site.com
 http://sites.google.com/site/murmurhash/
+helpmenow.com
diff --git a/changelogs/fragments/8352.yml b/changelogs/fragments/8352.yml
new file mode 100644
index 000000000000..048f8a94a22a
--- /dev/null
+++ b/changelogs/fragments/8352.yml
@@ -0,0 +1,2 @@
+fix:
+- Add discover summary error info and button click logic enhancement ([#8352](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8352))
diff --git a/changelogs/fragments/8500.yml b/changelogs/fragments/8500.yml
new file mode 100644
index 000000000000..63e3a509aed0
--- /dev/null
+++ b/changelogs/fragments/8500.yml
@@ -0,0 +1,2 @@
+feat:
+- Introducing workspace level ui settings and hide non-global ui settings from advance settings page ([#8500](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8500))
\ No newline at end of file
diff --git a/changelogs/fragments/8504.yml b/changelogs/fragments/8504.yml
new file mode 100644
index 000000000000..3ccc6590581d
--- /dev/null
+++ b/changelogs/fragments/8504.yml
@@ -0,0 +1,6 @@
+feat:
+- Allow hiding the TSVB axis for time series visualizations ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504))
+- Allow setting scale of each axis for TSVB time series ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504))
+
+fix:
+- Compress non-OUI input fields in TSVB visualizations ([#8504](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8504))
\ No newline at end of file
diff --git a/changelogs/fragments/8520.yml b/changelogs/fragments/8520.yml
new file mode 100644
index 000000000000..f0883088331f
--- /dev/null
+++ b/changelogs/fragments/8520.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Remove collaborators in workspace creation page ([#8520](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8520))
\ No newline at end of file
diff --git a/changelogs/fragments/8529.yml b/changelogs/fragments/8529.yml
new file mode 100644
index 000000000000..4f57759a9e40
--- /dev/null
+++ b/changelogs/fragments/8529.yml
@@ -0,0 +1,2 @@
+fix:
+- Update the title of header recent menu ([#8529](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8529))
\ No newline at end of file
diff --git a/changelogs/fragments/8531.yml b/changelogs/fragments/8531.yml
new file mode 100644
index 000000000000..e23c5eba1faa
--- /dev/null
+++ b/changelogs/fragments/8531.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Display duplicate collaborators error in add collaborators modal ([#8531](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8531))
\ No newline at end of file
diff --git a/changelogs/fragments/8537.yml b/changelogs/fragments/8537.yml
new file mode 100644
index 000000000000..1afbb41a42e0
--- /dev/null
+++ b/changelogs/fragments/8537.yml
@@ -0,0 +1,2 @@
+fix:
+- [MDS] Mute the non-mds endpoints for direct query data connections ([#8537](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8537))
\ No newline at end of file
diff --git a/changelogs/fragments/8538.yml b/changelogs/fragments/8538.yml
new file mode 100644
index 000000000000..31ccc192392d
--- /dev/null
+++ b/changelogs/fragments/8538.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Add global search bar into left nav ([#8538](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8538))
\ No newline at end of file
diff --git a/changelogs/fragments/8540.yml b/changelogs/fragments/8540.yml
new file mode 100644
index 000000000000..c0008c804319
--- /dev/null
+++ b/changelogs/fragments/8540.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Replace connections copy with data sources ([#8540](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8540))
\ No newline at end of file
diff --git a/changelogs/fragments/8541.yml b/changelogs/fragments/8541.yml
new file mode 100644
index 000000000000..5b1b2457bc34
--- /dev/null
+++ b/changelogs/fragments/8541.yml
@@ -0,0 +1,2 @@
+fix:
+- The workspace selector jump that occurs when hovering and clicking. ([#8541](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8541))
\ No newline at end of file
diff --git a/changelogs/fragments/8543.yml b/changelogs/fragments/8543.yml
new file mode 100644
index 000000000000..06bade085a1d
--- /dev/null
+++ b/changelogs/fragments/8543.yml
@@ -0,0 +1,2 @@
+refactor:
+- Update workspace collaborator table UI ([#8543](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8543))
\ No newline at end of file
diff --git a/changelogs/fragments/8544.yml b/changelogs/fragments/8544.yml
new file mode 100644
index 000000000000..71d1d815e6dc
--- /dev/null
+++ b/changelogs/fragments/8544.yml
@@ -0,0 +1,2 @@
+fix:
+- Direct query connections fit and finish fixes ([#8544](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8544))
\ No newline at end of file
diff --git a/changelogs/fragments/8545.yml b/changelogs/fragments/8545.yml
new file mode 100644
index 000000000000..ba972ec51e7c
--- /dev/null
+++ b/changelogs/fragments/8545.yml
@@ -0,0 +1,2 @@
+feat:
+- Refactor data source list page to include data source association features for workspace ([#8545](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8545))
\ No newline at end of file
diff --git a/changelogs/fragments/8554.yml b/changelogs/fragments/8554.yml
new file mode 100644
index 000000000000..3c72872e1c0f
--- /dev/null
+++ b/changelogs/fragments/8554.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix new home page small screen display issues ([#8554](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8554))
\ No newline at end of file
diff --git a/changelogs/fragments/8555.yml b/changelogs/fragments/8555.yml
new file mode 100644
index 000000000000..8314c88c1872
--- /dev/null
+++ b/changelogs/fragments/8555.yml
@@ -0,0 +1,2 @@
+fix:
+- Refactored polling logic to poll for results once current request completes ([#8555](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8555))
\ No newline at end of file
diff --git a/changelogs/fragments/8557.yml b/changelogs/fragments/8557.yml
new file mode 100644
index 000000000000..7a9fb57b7f60
--- /dev/null
+++ b/changelogs/fragments/8557.yml
@@ -0,0 +1,2 @@
+feat:
+- Add ACL auditor ([#8557](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8557))
\ No newline at end of file
diff --git a/changelogs/fragments/8564.yml b/changelogs/fragments/8564.yml
new file mode 100644
index 000000000000..bc745037679c
--- /dev/null
+++ b/changelogs/fragments/8564.yml
@@ -0,0 +1,2 @@
+chore:
+- Update oui to 1.16 ([#8564](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8564))
\ No newline at end of file
diff --git a/changelogs/fragments/8570.yml b/changelogs/fragments/8570.yml
new file mode 100644
index 000000000000..e967ac10c560
--- /dev/null
+++ b/changelogs/fragments/8570.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix workspace update issue ([#8570](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8570))
\ No newline at end of file
diff --git a/changelogs/fragments/8574.yml b/changelogs/fragments/8574.yml
new file mode 100644
index 000000000000..72c73d09947a
--- /dev/null
+++ b/changelogs/fragments/8574.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Show add collaborators modal until collaborators added ([#8574](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8574))
\ No newline at end of file
diff --git a/changelogs/fragments/8581.yml b/changelogs/fragments/8581.yml
new file mode 100644
index 000000000000..5b352fc31fca
--- /dev/null
+++ b/changelogs/fragments/8581.yml
@@ -0,0 +1,2 @@
+fix:
+- Disable cope all button when there is no saved objects in assets page ([#8581](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8581))
\ No newline at end of file
diff --git a/changelogs/fragments/8587.yml b/changelogs/fragments/8587.yml
new file mode 100644
index 000000000000..259c99b7fd22
--- /dev/null
+++ b/changelogs/fragments/8587.yml
@@ -0,0 +1,2 @@
+feat:
+- Add support for otel sample data - logs, traces and metrics ([#8587](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8587))
\ No newline at end of file
diff --git a/changelogs/fragments/8592.yml b/changelogs/fragments/8592.yml
new file mode 100644
index 000000000000..fd4fae271865
--- /dev/null
+++ b/changelogs/fragments/8592.yml
@@ -0,0 +1,2 @@
+fix:
+- Workspace selector style alignment ([#8592](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8592))
\ No newline at end of file
diff --git a/changelogs/fragments/8594.yml b/changelogs/fragments/8594.yml
new file mode 100644
index 000000000000..cd572c3ffe25
--- /dev/null
+++ b/changelogs/fragments/8594.yml
@@ -0,0 +1,2 @@
+feat:
+- Add workspace collaborators page ([#8594](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8594))
\ No newline at end of file
diff --git a/changelogs/fragments/8600.yml b/changelogs/fragments/8600.yml
new file mode 100644
index 000000000000..d1e8a5c00480
--- /dev/null
+++ b/changelogs/fragments/8600.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix padding and responsive behavior of page header ([#8600](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8600))
\ No newline at end of file
diff --git a/changelogs/fragments/8603.yml b/changelogs/fragments/8603.yml
new file mode 100644
index 000000000000..38c4ceea441b
--- /dev/null
+++ b/changelogs/fragments/8603.yml
@@ -0,0 +1,2 @@
+fix:
+- Upgrade JSON11 from 1.1.2 to 2.0.0 to ensure UTF-8 safety when stringifying JSON data ([#8603](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8603))
\ No newline at end of file
diff --git a/changelogs/fragments/8604.yml b/changelogs/fragments/8604.yml
new file mode 100644
index 000000000000..0b186eaa5ef1
--- /dev/null
+++ b/changelogs/fragments/8604.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Keep confirm modal and disable confirm button during collaborators operation ([#8604](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8604))
\ No newline at end of file
diff --git a/changelogs/fragments/8606.yml b/changelogs/fragments/8606.yml
new file mode 100644
index 000000000000..463958814145
--- /dev/null
+++ b/changelogs/fragments/8606.yml
@@ -0,0 +1,2 @@
+fix:
+- [workspace]fix content management render dashboard with duplicate visualizations ([#8606](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8606))
\ No newline at end of file
diff --git a/changelogs/fragments/8607.yml b/changelogs/fragments/8607.yml
new file mode 100644
index 000000000000..3aadf45899b5
--- /dev/null
+++ b/changelogs/fragments/8607.yml
@@ -0,0 +1,2 @@
+feat:
+- Limit workspace colors ([#8607](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8607))
\ No newline at end of file
diff --git a/changelogs/fragments/8614.yml b/changelogs/fragments/8614.yml
new file mode 100644
index 000000000000..0f57ef1e86ca
--- /dev/null
+++ b/changelogs/fragments/8614.yml
@@ -0,0 +1,2 @@
+fix:
+- Update content and styling of use case getting started cards ([#8614](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8614))
\ No newline at end of file
diff --git a/changelogs/fragments/8616.yml b/changelogs/fragments/8616.yml
new file mode 100644
index 000000000000..aa41137d4968
--- /dev/null
+++ b/changelogs/fragments/8616.yml
@@ -0,0 +1,2 @@
+feat:
+- Adds sample queries and saved queries to Discover no results page ([#8616](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8616))
\ No newline at end of file
diff --git a/changelogs/fragments/8617.yml b/changelogs/fragments/8617.yml
new file mode 100644
index 000000000000..9ffdf7a19145
--- /dev/null
+++ b/changelogs/fragments/8617.yml
@@ -0,0 +1,2 @@
+refactor:
+- [Workspace] Update default OSD admin config permission and support wildcard. ([#8617](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8617))
\ No newline at end of file
diff --git a/changelogs/fragments/8619.yml b/changelogs/fragments/8619.yml
new file mode 100644
index 000000000000..59118814a798
--- /dev/null
+++ b/changelogs/fragments/8619.yml
@@ -0,0 +1,2 @@
+refactor:
+- Fine-tune workspace list page compressed style to align with compressed table ([#8619](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8619))
\ No newline at end of file
diff --git a/changelogs/fragments/8620.yml b/changelogs/fragments/8620.yml
new file mode 100644
index 000000000000..0bddae141f95
--- /dev/null
+++ b/changelogs/fragments/8620.yml
@@ -0,0 +1,2 @@
+feat:
+- Add data-connection type support for association modal ([#8620](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8620))
\ No newline at end of file
diff --git a/changelogs/fragments/8624.yml b/changelogs/fragments/8624.yml
new file mode 100644
index 000000000000..f6cc0838d746
--- /dev/null
+++ b/changelogs/fragments/8624.yml
@@ -0,0 +1,2 @@
+feat:
+- (contentManagement) Add a Page API to allow remove section ([#8624](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8624))
\ No newline at end of file
diff --git a/changelogs/fragments/8640.yml b/changelogs/fragments/8640.yml
new file mode 100644
index 000000000000..5a91c5a2ecfb
--- /dev/null
+++ b/changelogs/fragments/8640.yml
@@ -0,0 +1,2 @@
+chore:
+- Update oui to 1.17 ([#8640](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8640))
\ No newline at end of file
diff --git a/changelogs/fragments/8641.yml b/changelogs/fragments/8641.yml
new file mode 100644
index 000000000000..db81be375e22
--- /dev/null
+++ b/changelogs/fragments/8641.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Response forbidden error for not permitted workspace ([#8641](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8641))
\ No newline at end of file
diff --git a/changelogs/fragments/8648.yml b/changelogs/fragments/8648.yml
new file mode 100644
index 000000000000..84cc02108e2d
--- /dev/null
+++ b/changelogs/fragments/8648.yml
@@ -0,0 +1,2 @@
+fix:
+- [Workspace] Workspace assets page crashed after library_write permission revoked ([#8648](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8648))
\ No newline at end of file
diff --git a/changelogs/fragments/8650.yml b/changelogs/fragments/8650.yml
new file mode 100644
index 000000000000..3f53ba7a41fa
--- /dev/null
+++ b/changelogs/fragments/8650.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix random big number when loading in query result ([#8650](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8650))
\ No newline at end of file
diff --git a/changelogs/fragments/8651.yml b/changelogs/fragments/8651.yml
new file mode 100644
index 000000000000..0baf8f35105c
--- /dev/null
+++ b/changelogs/fragments/8651.yml
@@ -0,0 +1,2 @@
+feat:
+- Update the appearance of Discover ([#8651](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8651))
\ No newline at end of file
diff --git a/changelogs/fragments/8659.yml b/changelogs/fragments/8659.yml
new file mode 100644
index 000000000000..7b007d454736
--- /dev/null
+++ b/changelogs/fragments/8659.yml
@@ -0,0 +1,2 @@
+fix:
+- Discover UI stuck on searching after failing to find deleted index pattern ([#8659](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8659))
\ No newline at end of file
diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
index 349b002c9a1c..69a57caac33e 100644
--- a/config/opensearch_dashboards.yml
+++ b/config/opensearch_dashboards.yml
@@ -371,5 +371,7 @@
 
 # Set the backend roles in groups or users, whoever has the backend roles or exactly match the user ids defined in this config will be regard as dashboard admin.
 # Dashboard admin will have the access to all the workspaces(workspace.enabled: true) and objects inside OpenSearch Dashboards.
+# The default config is [], and no one will be dashboard admin. 
+# If the user config is set to wildcard ["*"], anyone will be dashboard admin.
 # opensearchDashboards.dashboardAdmin.groups: ["dashboard_admin"]
 # opensearchDashboards.dashboardAdmin.users: ["dashboard_admin"]
diff --git a/package.json b/package.json
index 28001b0a9006..b7dcbb23569e 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "**/jest-config": "npm:@amoo-miki/jest-config@27.5.1",
     "**/jest-jasmine2": "npm:@amoo-miki/jest-jasmine2@27.5.1",
     "**/joi/hoek": "npm:@amoo-miki/hoek@6.1.3",
-    "**/json11": "^1.1.2",
+    "**/json11": "^2.0.0",
     "**/json-schema": "^0.4.0",
     "**/kind-of": ">=6.0.3",
     "**/load-bmfont/phin": "^3.7.1",
@@ -148,7 +148,7 @@
   "dependencies": {
     "@aws-crypto/client-node": "^3.1.1",
     "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.15.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.17.0",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@elastic/request-crypto": "2.0.0",
diff --git a/packages/osd-i18n/src/core/i18n.test.ts b/packages/osd-i18n/src/core/i18n.test.ts
index ebfd546f8561..ad5ed920fd01 100644
--- a/packages/osd-i18n/src/core/i18n.test.ts
+++ b/packages/osd-i18n/src/core/i18n.test.ts
@@ -178,7 +178,7 @@ describe('I18n engine', () => {
         'en-us'
       );
 
-      expect(i18n.getLocale()).toBe('en-us');
+      expect(i18n.getLocale()).toBe('en-US');
       expect(i18n.getTranslation()).toEqual({
         messages: {
           ['a.b.c']: 'bar',
@@ -246,9 +246,19 @@ describe('I18n engine', () => {
       expect(i18n.getLocale()).toBe('foo');
     });
 
-    test('should normalize passed locale', () => {
-      i18n.setLocale('en-US');
-      expect(i18n.getLocale()).toBe('en-us');
+    test('should normalize basic locale', () => {
+      i18n.setLocale('It-iT');
+      expect(i18n.getLocale()).toBe('it-IT');
+    });
+
+    test('should normalize simple locale', () => {
+      i18n.setLocale('en-LATN-us_PRIVATE-variant');
+      expect(i18n.getLocale()).toBe('en-Latn-US');
+    });
+
+    test('should normalize complex locale', () => {
+      i18n.setLocale('FR-CA-X-FALLBACK-und-u@keyword=calendarKey');
+      expect(i18n.getLocale()).toBe('fr-CA');
     });
   });
 
@@ -280,8 +290,8 @@ describe('I18n engine', () => {
     });
 
     test('should normalize passed locale', () => {
-      i18n.setDefaultLocale('en-US');
-      expect(i18n.getDefaultLocale()).toBe('en-us');
+      i18n.setDefaultLocale('eN-uS');
+      expect(i18n.getDefaultLocale()).toBe('en-US');
     });
 
     test('should set "en" locale as default for IntlMessageFormat and IntlRelativeFormat', () => {
diff --git a/packages/osd-i18n/src/core/i18n.ts b/packages/osd-i18n/src/core/i18n.ts
index 65da4931ef13..fc040bb834e6 100644
--- a/packages/osd-i18n/src/core/i18n.ts
+++ b/packages/osd-i18n/src/core/i18n.ts
@@ -44,6 +44,16 @@ const EN_LOCALE = 'en';
 const translationsForLocale: Record<string, Translation> = {};
 const getMessageFormat = memoizeIntlConstructor(IntlMessageFormat);
 
+/* A locale code is made of several components:
+ *    * lang: The two- and three-letter lower-case language code follows the ISO 639-1 and ISO 639-2/3 standards, respectively.
+ *    * script: The optional four-letter title-case code follows the ISO 15924 standard for representing writing systems.
+ *    * region: The two-letter upper-case region code follows the ISO 3166-1 alpha-2 standard.
+ *
+ * Ref: https://www.rfc-editor.org/rfc/rfc5646.txt
+ * Note: While case carries no distinction with locale codes, proper formatting is recommended.
+ */
+const localeParser = /^(?<lang>[a-z]{2,3})(?:-(?<script>[a-z]{4}))?(?:-(?<region>[a-z]{2}|[0-9]{3}))?(?:[_@\-].*)?$/i;
+
 let defaultLocale = EN_LOCALE;
 let currentLocale = EN_LOCALE;
 let formats = EN_FORMATS;
@@ -64,8 +74,16 @@ function getMessageById(id: string): string | undefined {
  * Normalizes locale to make it consistent with IntlMessageFormat locales
  * @param locale
  */
-function normalizeLocale(locale: string) {
-  return locale.toLowerCase();
+export function normalizeLocale(locale: string) {
+  const { lang, script, region } = localeParser.exec(locale)?.groups || {};
+  // If parsing failed or the language code was not extracted, return the locale
+  if (!lang) return locale;
+
+  const parts = [lang.toLowerCase()];
+  if (script) parts.push(script[0].toUpperCase() + script.slice(1).toLowerCase());
+  if (region) parts.push(region.toUpperCase());
+
+  return parts.join('-');
 }
 
 /**
diff --git a/packages/osd-i18n/src/core/locales.js b/packages/osd-i18n/src/core/locales.js
index 14dfe95507a9..826dce2cbdf2 100644
--- a/packages/osd-i18n/src/core/locales.js
+++ b/packages/osd-i18n/src/core/locales.js
@@ -21,22 +21,49 @@ function addLocaleData(localeData) {
   IntlRelativeFormat.__addLocaleData(localeData);
 }
 
-addLocaleData({ locale: "pl", pluralRuleFunction: function (n, ord) { var s = String(n).split("."), v0 = !s[1], t0 = Number(s[0]) == n, n10 = t0 && s[0].slice(-1), n100 = t0 && s[0].slice(-2); if (ord) return n10 == 1 && n100 != 11 ? "jeden" : n10 == 2 && n100 != 12 ? "dwa" : n10 == 3 && n100 != 13 ? "kilka" : "inny"; return n == 1 && v0 ? "jeden" : "inny" }, "fields": { "rok": { "displayName": "rok", "relative": { "0": "ten rok", "1": "następny rok", "-1": "poprzedni rok" }, "relativeTime": { "future": { "jeden": "za {0} rok", "other": "za {0} lat" }, "past": { "jeden": "{0} rok temu", "other": "{0} lata temu" } } }, "year-short": { "displayName": "rok", "relative": { "0": "ten rok", "1": "następny rok", "-1": "poprzedni rok" }, "relativeTime": { "future": { "one": "za {0} r.", "other": "za {0} l." }, "past": { "one": "{0} r. temu", "other": "{0} l. temu" } } }, "month": { "displayName": "miesiąc", "relative": { "0": "ten miesiąc", "1": "następny miesiąc", "-1": "poprzedni miesiąc" }, "relativeTime": { "future": { "one": "w {0} miesiącu", "other": "w {0} miesiącach" }, "past": { "one": "{0} miesiąc temu", "other": "{0}  miesięcy temu" } } }, "month-short": { "displayName": "miesiąc", "relative": { "0": "ten miesiąc", "1": "następny miesiąc", "-1": "poprzedni miesiąc" }, "relativeTime": { "future": { "one": "z {0} miesiąc", "other": "za {0} miesięcy" }, "past": { "one": "{0} miesiąc temu", "other": "{0} miesięcy temu" } } }, "day": { "displayName": "dzień", "relative": { "0": "dzisiaj", "1": "jutro", "-1": "wczoraj" }, "relativeTime": { "future": { "one": "za {0} dzień", "other": "za {0} dni" }, "past": { "one": "{0} dzień temu", "other": "{0} dni temu" } } }, "day-short": { "displayName": "dzień", "relative": { "0": "dzisiaj", "1": "jutro", "-1": "wczoraj" }, "relativeTime": { "future": { "one": "za {0} dzień", "other": "za {0} dni" }, "past": { "one": "{0} dzień temu", "other": "{0} dni temu" } } }, "hour": { "displayName": "godzina", "relative": { "0": "ta godzina" }, "relativeTime": { "future": { "one": "za {0} godzinę", "other": "za {0} godzin" }, "past": { "one": "{0} godzina temu", "other": "{0} godzin temu" } } }, "hour-short": { "displayName": "godz.", "relative": { "0": "ta godzina" }, "relativeTime": { "future": { "one": "za {0} godz.", "other": "za {0} godz." }, "past": { "one": "{0} godz. temu", "other": "{0} godz. temu" } } }, "minute": { "displayName": "minuta", "relative": { "0": "ta minuta" }, "relativeTime": { "future": { "one": "za {0} minutę", "other": "za {0} minut" }, "past": { "one": "{0} minuta temu", "other": "{0} minut temu" } } }, "minute-short": { "displayName": "min.", "relative": { "0": "ta min." }, "relativeTime": { "future": { "one": "za {0} min.", "other": "za {0} min." }, "past": { "one": "{0} min. temu", "other": "{0} min. temu" } } }, "second": { "displayName": "sekunda", "relative": { "0": "teraz" }, "relativeTime": { "future": { "one": "za {0} sekundę", "other": "za {0} sekund" }, "past": { "one": "{0} sekundę temu", "other": "{0} sekund temu" } } }, "second-short": { "displayName": "sek.", "relative": { "0": "teraz" }, "relativeTime": { "future": { "one": "za {0} sek.", "other": "za {0} sek." }, "past": { "one": "{0} sek. temu", "other": "{0} sek. temu" } } } } });
-addLocaleData({ locale: "pl-PL", parentLocale: "pl" });
+addLocaleData({ locale: "de", pluralRuleFunction: function (n,ord){var s=String(n).split("."),v0=!s[1];if(ord)return"other";return n==1&&v0?"one":"other"},"fields":{"year":{"displayName":"Jahr","relative":{"0":"dieses Jahr","1":"nächstes Jahr","-1":"letztes Jahr"},"relativeTime":{"future":{"one":"in {0} Jahr","other":"in {0} Jahren"},"past":{"one":"vor {0} Jahr","other":"vor {0} Jahren"}}},"year-short":{"displayName":"Jahr","relative":{"0":"dieses Jahr","1":"nächstes Jahr","-1":"letztes Jahr"},"relativeTime":{"future":{"one":"in {0} Jahr","other":"in {0} Jahren"},"past":{"one":"vor {0} Jahr","other":"vor {0} Jahren"}}},"month":{"displayName":"Monat","relative":{"0":"diesen Monat","1":"nächsten Monat","-1":"letzten Monat"},"relativeTime":{"future":{"one":"in {0} Monat","other":"in {0} Monaten"},"past":{"one":"vor {0} Monat","other":"vor {0} Monaten"}}},"month-short":{"displayName":"Monat","relative":{"0":"diesen Monat","1":"nächsten Monat","-1":"letzten Monat"},"relativeTime":{"future":{"one":"in {0} Monat","other":"in {0} Monaten"},"past":{"one":"vor {0} Monat","other":"vor {0} Monaten"}}},"day":{"displayName":"Tag","relative":{"0":"heute","1":"morgen","2":"übermorgen","-2":"vorgestern","-1":"gestern"},"relativeTime":{"future":{"one":"in {0} Tag","other":"in {0} Tagen"},"past":{"one":"vor {0} Tag","other":"vor {0} Tagen"}}},"day-short":{"displayName":"Tag","relative":{"0":"heute","1":"morgen","2":"übermorgen","-2":"vorgestern","-1":"gestern"},"relativeTime":{"future":{"one":"in {0} Tag","other":"in {0} Tagen"},"past":{"one":"vor {0} Tag","other":"vor {0} Tagen"}}},"hour":{"displayName":"Stunde","relative":{"0":"in dieser Stunde"},"relativeTime":{"future":{"one":"in {0} Stunde","other":"in {0} Stunden"},"past":{"one":"vor {0} Stunde","other":"vor {0} Stunden"}}},"hour-short":{"displayName":"Std.","relative":{"0":"in dieser Stunde"},"relativeTime":{"future":{"one":"in {0} Std.","other":"in {0} Std."},"past":{"one":"vor {0} Std.","other":"vor {0} Std."}}},"minute":{"displayName":"Minute","relative":{"0":"in dieser Minute"},"relativeTime":{"future":{"one":"in {0} Minute","other":"in {0} Minuten"},"past":{"one":"vor {0} Minute","other":"vor {0} Minuten"}}},"minute-short":{"displayName":"Min.","relative":{"0":"in dieser Minute"},"relativeTime":{"future":{"one":"in {0} Min.","other":"in {0} Min."},"past":{"one":"vor {0} Min.","other":"vor {0} Min."}}},"second":{"displayName":"Sekunde","relative":{"0":"jetzt"},"relativeTime":{"future":{"one":"in {0} Sekunde","other":"in {0} Sekunden"},"past":{"one":"vor {0} Sekunde","other":"vor {0} Sekunden"}}},"second-short":{"displayName":"Sek.","relative":{"0":"jetzt"},"relativeTime":{"future":{"one":"in {0} Sek.","other":"in {0} Sek."},"past":{"one":"vor {0} Sek.","other":"vor {0} Sek."}}}} });
+addLocaleData({ locale: "de-DE", parentLocale: "de" });
 addLocaleData({ locale: "en", pluralRuleFunction: function (n,ord){var s=String(n).split("."),v0=!s[1],t0=Number(s[0])==n,n10=t0&&s[0].slice(-1),n100=t0&&s[0].slice(-2);if(ord)return n10==1&&n100!=11?"one":n10==2&&n100!=12?"two":n10==3&&n100!=13?"few":"other";return n==1&&v0?"one":"other"},"fields":{"year":{"displayName":"year","relative":{"0":"this year","1":"next year","-1":"last year"},"relativeTime":{"future":{"one":"in {0} year","other":"in {0} years"},"past":{"one":"{0} year ago","other":"{0} years ago"}}},"year-short":{"displayName":"yr.","relative":{"0":"this yr.","1":"next yr.","-1":"last yr."},"relativeTime":{"future":{"one":"in {0} yr.","other":"in {0} yr."},"past":{"one":"{0} yr. ago","other":"{0} yr. ago"}}},"month":{"displayName":"month","relative":{"0":"this month","1":"next month","-1":"last month"},"relativeTime":{"future":{"one":"in {0} month","other":"in {0} months"},"past":{"one":"{0} month ago","other":"{0} months ago"}}},"month-short":{"displayName":"mo.","relative":{"0":"this mo.","1":"next mo.","-1":"last mo."},"relativeTime":{"future":{"one":"in {0} mo.","other":"in {0} mo."},"past":{"one":"{0} mo. ago","other":"{0} mo. ago"}}},"day":{"displayName":"day","relative":{"0":"today","1":"tomorrow","-1":"yesterday"},"relativeTime":{"future":{"one":"in {0} day","other":"in {0} days"},"past":{"one":"{0} day ago","other":"{0} days ago"}}},"day-short":{"displayName":"day","relative":{"0":"today","1":"tomorrow","-1":"yesterday"},"relativeTime":{"future":{"one":"in {0} day","other":"in {0} days"},"past":{"one":"{0} day ago","other":"{0} days ago"}}},"hour":{"displayName":"hour","relative":{"0":"this hour"},"relativeTime":{"future":{"one":"in {0} hour","other":"in {0} hours"},"past":{"one":"{0} hour ago","other":"{0} hours ago"}}},"hour-short":{"displayName":"hr.","relative":{"0":"this hour"},"relativeTime":{"future":{"one":"in {0} hr.","other":"in {0} hr."},"past":{"one":"{0} hr. ago","other":"{0} hr. ago"}}},"minute":{"displayName":"minute","relative":{"0":"this minute"},"relativeTime":{"future":{"one":"in {0} minute","other":"in {0} minutes"},"past":{"one":"{0} minute ago","other":"{0} minutes ago"}}},"minute-short":{"displayName":"min.","relative":{"0":"this minute"},"relativeTime":{"future":{"one":"in {0} min.","other":"in {0} min."},"past":{"one":"{0} min. ago","other":"{0} min. ago"}}},"second":{"displayName":"second","relative":{"0":"now"},"relativeTime":{"future":{"one":"in {0} second","other":"in {0} seconds"},"past":{"one":"{0} second ago","other":"{0} seconds ago"}}},"second-short":{"displayName":"sec.","relative":{"0":"now"},"relativeTime":{"future":{"one":"in {0} sec.","other":"in {0} sec."},"past":{"one":"{0} sec. ago","other":"{0} sec. ago"}}}} });
 addLocaleData({ locale: "en-US", parentLocale: "en" });
 addLocaleData({ locale: "en-xa", pluralRuleFunction: function (n,ord){var s=String(n).split("."),v0=!s[1],t0=Number(s[0])==n,n10=t0&&s[0].slice(-1),n100=t0&&s[0].slice(-2);if(ord)return n10==1&&n100!=11?"one":n10==2&&n100!=12?"two":n10==3&&n100!=13?"few":"other";return n==1&&v0?"one":"other"}, "fields":{"year":{"displayName":"ýéààŕ","relative":{"0":"ţĥîîš ýééàŕ","1":"ñéẋẋţ ýééàŕ","-1":"ļàššţ ýééàŕ"},"relativeTime":{"future":{"one":"îñ {0} ýýéàŕŕ","other":"îñ {0} ýýéàŕŕš"},"past":{"one":"{0} ýéààŕ àĝĝô","other":"{0} ýéààŕš ààĝô"}}},"year-short":{"displayName":"ýŕ.","relative":{"0":"ţĥîîš ýŕŕ.","1":"ñéẋẋţ ýŕŕ.","-1":"ļàššţ ýŕŕ."},"relativeTime":{"future":{"one":"îñ {0} ýýŕ.","other":"îñ {0} ýýŕ."},"past":{"one":"{0} ýŕ. ààĝô","other":"{0} ýŕ. ààĝô"}}},"month":{"displayName":"ɱôññţĥ","relative":{"0":"ţĥîîš ɱôôñţĥĥ","1":"ñéẋẋţ ɱôôñţĥĥ","-1":"ļàššţ ɱôôñţĥĥ"},"relativeTime":{"future":{"one":"îñ {0} ɱɱôñţţĥ","other":"îñ {0} ɱɱôñţţĥš"},"past":{"one":"{0} ɱôññţĥ ààĝô","other":"{0} ɱôññţĥšš àĝôô"}}},"month-short":{"displayName":"ɱô.","relative":{"0":"ţĥîîš ɱôô.","1":"ñéẋẋţ ɱôô.","-1":"ļàššţ ɱôô."},"relativeTime":{"future":{"one":"îñ {0} ɱɱô.","other":"îñ {0} ɱɱô."},"past":{"one":"{0} ɱô. ààĝô","other":"{0} ɱô. ààĝô"}}},"day":{"displayName":"ðàýý","relative":{"0":"ţôððàý","1":"ţôɱɱôŕŕŕôŵ","-1":"ýéššţéŕŕðàýý"},"relativeTime":{"future":{"one":"îñ {0} ððàý","other":"îñ {0} ððàýšš"},"past":{"one":"{0} ðàýý àĝôô","other":"{0} ðàýýš àĝĝô"}}},"day-short":{"displayName":"ðàýý","relative":{"0":"ţôððàý","1":"ţôɱɱôŕŕŕôŵ","-1":"ýéššţéŕŕðàýý"},"relativeTime":{"future":{"one":"îñ {0} ððàý","other":"îñ {0} ððàýšš"},"past":{"one":"{0} ðàýý àĝôô","other":"{0} ðàýýš àĝĝô"}}},"hour":{"displayName":"ĥôûûŕ","relative":{"0":"ţĥîîš ĥôôûŕ"},"relativeTime":{"future":{"one":"îñ {0} ĥĥôûŕŕ","other":"îñ {0} ĥĥôûŕŕš"},"past":{"one":"{0} ĥôûûŕ àĝĝô","other":"{0} ĥôûûŕš ààĝô"}}},"hour-short":{"displayName":"ĥŕ.","relative":{"0":"ţĥîîš ĥôôûŕ"},"relativeTime":{"future":{"one":"îñ {0} ĥĥŕ.","other":"îñ {0} ĥĥŕ."},"past":{"one":"{0} ĥŕ. ààĝô","other":"{0} ĥŕ. ààĝô"}}},"minute":{"displayName":"ɱîññûţéé","relative":{"0":"ţĥîîš ɱîîñûţţé"},"relativeTime":{"future":{"one":"îñ {0} ɱɱîñûûţé","other":"îñ {0} ɱɱîñûûţéšš"},"past":{"one":"{0} ɱîññûţéé àĝôô","other":"{0} ɱîññûţééš àĝĝô"}}},"minute-short":{"displayName":"ɱîññ.","relative":{"0":"ţĥîîš ɱîîñûţţé"},"relativeTime":{"future":{"one":"îñ {0} ɱɱîñ.","other":"îñ {0} ɱɱîñ."},"past":{"one":"{0} ɱîññ. àĝôô","other":"{0} ɱîññ. àĝôô"}}},"second":{"displayName":"šéççôñðð","relative":{"0":"ñôŵŵ"},"relativeTime":{"future":{"one":"îñ {0} ššéçôôñð","other":"îñ {0} ššéçôôñðšš"},"past":{"one":"{0} šéççôñðð àĝôô","other":"{0} šéççôñððš àĝĝô"}}},"second-short":{"displayName":"šéçç.","relative":{"0":"ñôŵŵ"},"relativeTime":{"future":{"one":"îñ {0} ššéç.","other":"îñ {0} ššéç."},"past":{"one":"{0} šéçç. àĝôô","other":"{0} šéçç. àĝôô"}}}} });
 addLocaleData({ locale: "es", pluralRuleFunction: function (n,ord){if(ord)return"other";return n==1?"one":"other"},"fields":{"year":{"displayName":"año","relative":{"0":"este año","1":"el próximo año","-1":"el año pasado"},"relativeTime":{"future":{"one":"dentro de {0} año","other":"dentro de {0} años"},"past":{"one":"hace {0} año","other":"hace {0} años"}}},"year-short":{"displayName":"a","relative":{"0":"este año","1":"el próximo año","-1":"el año pasado"},"relativeTime":{"future":{"one":"dentro de {0} a","other":"dentro de {0} a"},"past":{"one":"hace {0} a","other":"hace {0} a"}}},"month":{"displayName":"mes","relative":{"0":"este mes","1":"el próximo mes","-1":"el mes pasado"},"relativeTime":{"future":{"one":"dentro de {0} mes","other":"dentro de {0} meses"},"past":{"one":"hace {0} mes","other":"hace {0} meses"}}},"month-short":{"displayName":"m","relative":{"0":"este mes","1":"el próximo mes","-1":"el mes pasado"},"relativeTime":{"future":{"one":"dentro de {0} m","other":"dentro de {0} m"},"past":{"one":"hace {0} m","other":"hace {0} m"}}},"day":{"displayName":"día","relative":{"0":"hoy","1":"mañana","2":"pasado mañana","-2":"anteayer","-1":"ayer"},"relativeTime":{"future":{"one":"dentro de {0} día","other":"dentro de {0} días"},"past":{"one":"hace {0} día","other":"hace {0} días"}}},"day-short":{"displayName":"d","relative":{"0":"hoy","1":"mañana","2":"pasado mañana","-2":"anteayer","-1":"ayer"},"relativeTime":{"future":{"one":"dentro de {0} día","other":"dentro de {0} días"},"past":{"one":"hace {0} día","other":"hace {0} días"}}},"hour":{"displayName":"hora","relative":{"0":"esta hora"},"relativeTime":{"future":{"one":"dentro de {0} hora","other":"dentro de {0} horas"},"past":{"one":"hace {0} hora","other":"hace {0} horas"}}},"hour-short":{"displayName":"h","relative":{"0":"esta hora"},"relativeTime":{"future":{"one":"dentro de {0} h","other":"dentro de {0} h"},"past":{"one":"hace {0} h","other":"hace {0} h"}}},"minute":{"displayName":"minuto","relative":{"0":"este minuto"},"relativeTime":{"future":{"one":"dentro de {0} minuto","other":"dentro de {0} minutos"},"past":{"one":"hace {0} minuto","other":"hace {0} minutos"}}},"minute-short":{"displayName":"min","relative":{"0":"este minuto"},"relativeTime":{"future":{"one":"dentro de {0} min","other":"dentro de {0} min"},"past":{"one":"hace {0} min","other":"hace {0} min"}}},"second":{"displayName":"segundo","relative":{"0":"ahora"},"relativeTime":{"future":{"one":"dentro de {0} segundo","other":"dentro de {0} segundos"},"past":{"one":"hace {0} segundo","other":"hace {0} segundos"}}},"second-short":{"displayName":"s","relative":{"0":"ahora"},"relativeTime":{"future":{"one":"dentro de {0} s","other":"dentro de {0} s"},"past":{"one":"hace {0} s","other":"hace {0} s"}}}} });
+addLocaleData({ locale: "es-419", parentLocale: "es", "fields":{"year":{"displayName":"año","relative":{"0":"este año","1":"el próximo año","-1":"el año pasado"},"relativeTime":{"future":{"one":"dentro de {0} año","other":"dentro de {0} años"},"past":{"one":"hace {0} año","other":"hace {0} años"}}},"year-short":{"displayName":"a","relative":{"0":"este año","1":"el próximo año","-1":"el año pasado"},"relativeTime":{"future":{"one":"dentro de {0} a","other":"dentro de {0} a"},"past":{"one":"hace {0} a","other":"hace {0} a"}}},"month":{"displayName":"mes","relative":{"0":"este mes","1":"el próximo mes","-1":"el mes pasado"},"relativeTime":{"future":{"one":"dentro de {0} mes","other":"dentro de {0} meses"},"past":{"one":"hace {0} mes","other":"hace {0} meses"}}},"month-short":{"displayName":"m","relative":{"0":"este mes","1":"el próximo mes","-1":"el mes pasado"},"relativeTime":{"future":{"one":"dentro de {0} m","other":"dentro de {0} m"},"past":{"one":"hace {0} m","other":"hace {0} m"}}},"week":{"displayName":"semana","relativePeriod":"la semana del {0}","relative":{"0":"esta semana","1":"la próxima semana","-1":"la semana pasada"},"relativeTime":{"future":{"one":"dentro de {0} semana","other":"dentro de {0} semanas"},"past":{"one":"hace {0} semana","other":"hace {0} semanas"}}},"week-short":{"displayName":"sem.","relativePeriod":"la semana del {0}","relative":{"0":"esta semana","1":"la próxima semana","-1":"la semana pasada"},"relativeTime":{"future":{"one":"dentro de {0} sem.","other":"dentro de {0} sem."},"past":{"one":"hace {0} sem.","other":"hace {0} sem."}}},"day":{"displayName":"día","relative":{"0":"hoy","1":"mañana","2":"pasado mañana","-2":"anteayer","-1":"ayer"},"relativeTime":{"future":{"one":"dentro de {0} día","other":"dentro de {0} días"},"past":{"one":"hace {0} día","other":"hace {0} días"}}},"day-short":{"displayName":"d","relative":{"0":"hoy","1":"mañana","2":"pasado mañana","-2":"anteayer","-1":"ayer"},"relativeTime":{"future":{"one":"dentro de {0} día","other":"dentro de {0} días"},"past":{"one":"hace {0} día","other":"hace {0} días"}}},"hour":{"displayName":"hora","relative":{"0":"esta hora"},"relativeTime":{"future":{"one":"dentro de {0} hora","other":"dentro de {0} horas"},"past":{"one":"hace {0} hora","other":"hace {0} horas"}}},"hour-short":{"displayName":"h","relative":{"0":"esta hora"},"relativeTime":{"future":{"one":"dentro de {0} h","other":"dentro de {0} h"},"past":{"one":"hace {0} h","other":"hace {0} h"}}},"minute":{"displayName":"minuto","relative":{"0":"este minuto"},"relativeTime":{"future":{"one":"dentro de {0} minuto","other":"dentro de {0} minutos"},"past":{"one":"hace {0} minuto","other":"hace {0} minutos"}}},"minute-short":{"displayName":"min","relative":{"0":"este minuto"},"relativeTime":{"future":{"one":"dentro de {0} min","other":"dentro de {0} min"},"past":{"one":"hace {0} min","other":"hace {0} min"}}},"second":{"displayName":"segundo","relative":{"0":"ahora"},"relativeTime":{"future":{"one":"dentro de {0} segundo","other":"dentro de {0} segundos"},"past":{"one":"hace {0} segundo","other":"hace {0} segundos"}}},"second-short":{"displayName":"s","relative":{"0":"ahora"},"relativeTime":{"future":{"one":"dentro de {0} s","other":"dentro de {0} s"},"past":{"one":"hace {0} s","other":"hace {0} s"}}}}});
+addLocaleData({ locale: "es-ES", parentLocale: "es" });
 addLocaleData({ locale: "es-LA", parentLocale: "es" });
 addLocaleData({ locale: "fr", pluralRuleFunction: function (n,ord){if(ord)return n==1?"one":"other";return n>=0&&n<2?"one":"other"},"fields":{"year":{"displayName":"année","relative":{"0":"cette année","1":"l’année prochaine","-1":"l’année dernière"},"relativeTime":{"future":{"one":"dans {0} an","other":"dans {0} ans"},"past":{"one":"il y a {0} an","other":"il y a {0} ans"}}},"year-short":{"displayName":"an","relative":{"0":"cette année","1":"l’année prochaine","-1":"l’année dernière"},"relativeTime":{"future":{"one":"dans {0} a","other":"dans {0} a"},"past":{"one":"il y a {0} a","other":"il y a {0} a"}}},"month":{"displayName":"mois","relative":{"0":"ce mois-ci","1":"le mois prochain","-1":"le mois dernier"},"relativeTime":{"future":{"one":"dans {0} mois","other":"dans {0} mois"},"past":{"one":"il y a {0} mois","other":"il y a {0} mois"}}},"month-short":{"displayName":"m.","relative":{"0":"ce mois-ci","1":"le mois prochain","-1":"le mois dernier"},"relativeTime":{"future":{"one":"dans {0} m.","other":"dans {0} m."},"past":{"one":"il y a {0} m.","other":"il y a {0} m."}}},"day":{"displayName":"jour","relative":{"0":"aujourd’hui","1":"demain","2":"après-demain","-2":"avant-hier","-1":"hier"},"relativeTime":{"future":{"one":"dans {0} jour","other":"dans {0} jours"},"past":{"one":"il y a {0} jour","other":"il y a {0} jours"}}},"day-short":{"displayName":"j","relative":{"0":"aujourd’hui","1":"demain","2":"après-demain","-2":"avant-hier","-1":"hier"},"relativeTime":{"future":{"one":"dans {0} j","other":"dans {0} j"},"past":{"one":"il y a {0} j","other":"il y a {0} j"}}},"hour":{"displayName":"heure","relative":{"0":"cette heure-ci"},"relativeTime":{"future":{"one":"dans {0} heure","other":"dans {0} heures"},"past":{"one":"il y a {0} heure","other":"il y a {0} heures"}}},"hour-short":{"displayName":"h","relative":{"0":"cette heure-ci"},"relativeTime":{"future":{"one":"dans {0} h","other":"dans {0} h"},"past":{"one":"il y a {0} h","other":"il y a {0} h"}}},"minute":{"displayName":"minute","relative":{"0":"cette minute-ci"},"relativeTime":{"future":{"one":"dans {0} minute","other":"dans {0} minutes"},"past":{"one":"il y a {0} minute","other":"il y a {0} minutes"}}},"minute-short":{"displayName":"min","relative":{"0":"cette minute-ci"},"relativeTime":{"future":{"one":"dans {0} min","other":"dans {0} min"},"past":{"one":"il y a {0} min","other":"il y a {0} min"}}},"second":{"displayName":"seconde","relative":{"0":"maintenant"},"relativeTime":{"future":{"one":"dans {0} seconde","other":"dans {0} secondes"},"past":{"one":"il y a {0} seconde","other":"il y a {0} secondes"}}},"second-short":{"displayName":"s","relative":{"0":"maintenant"},"relativeTime":{"future":{"one":"dans {0} s","other":"dans {0} s"},"past":{"one":"il y a {0} s","other":"il y a {0} s"}}}} });
+addLocaleData({ locale: "fr-CA", parentLocale: "fr", "fields":{"year":{"displayName":"année","relative":{"0":"cette année","1":"l’année prochaine","-1":"l’année dernière"},"relativeTime":{"future":{"one":"Dans {0} an","other":"Dans {0} ans"},"past":{"one":"Il y a {0} an","other":"Il y a {0} ans"}}},"year-short":{"displayName":"a","relative":{"0":"cette année","1":"l’année prochaine","-1":"l’année dernière"},"relativeTime":{"future":{"one":"dans {0} a","other":"dans {0} a"},"past":{"one":"il y a {0} a","other":"il y a {0} a"}}},"month":{"displayName":"mois","relative":{"0":"ce mois-ci","1":"le mois prochain","-1":"le mois dernier"},"relativeTime":{"future":{"one":"dans {0} mois","other":"dans {0} mois"},"past":{"one":"il y a {0} mois","other":"il y a {0} mois"}}},"month-short":{"displayName":"m.","relative":{"0":"ce mois-ci","1":"le mois prochain","-1":"le mois dernier"},"relativeTime":{"future":{"one":"dans {0} m.","other":"dans {0} m."},"past":{"one":"il y a {0} m.","other":"il y a {0} m."}}},"week":{"displayName":"semaine","relativePeriod":"la semaine du {0}","relative":{"0":"cette semaine","1":"la semaine prochaine","-1":"la semaine dernière"},"relativeTime":{"future":{"one":"dans {0} semaine","other":"dans {0} semaines"},"past":{"one":"il y a {0} semaine","other":"il y a {0} semaines"}}},"week-short":{"displayName":"sem.","relativePeriod":"sem. du {0}","relative":{"0":"cette semaine","1":"la semaine prochaine","-1":"la semaine dernière"},"relativeTime":{"future":{"one":"dans {0} sem.","other":"dans {0} sem."},"past":{"one":"il y a {0} sem.","other":"il y a {0} sem."}}},"day":{"displayName":"jour","relative":{"0":"aujourd’hui","1":"demain","2":"après-demain","-2":"avant-hier","-1":"hier"},"relativeTime":{"future":{"one":"dans {0} jour","other":"dans {0} jours"},"past":{"one":"il y a {0} jour","other":"il y a {0} jours"}}},"day-short":{"displayName":"j","relative":{"0":"aujourd’hui","1":"demain","2":"après-demain","-2":"avant-hier","-1":"hier"},"relativeTime":{"future":{"one":"dans {0} j","other":"dans {0} j"},"past":{"one":"il y a {0} j","other":"il y a {0} j"}}},"hour":{"displayName":"heure","relative":{"0":"cette heure-ci"},"relativeTime":{"future":{"one":"dans {0} heure","other":"dans {0} heures"},"past":{"one":"il y a {0} heure","other":"il y a {0} heures"}}},"hour-short":{"displayName":"h","relative":{"0":"cette heure-ci"},"relativeTime":{"future":{"one":"dans {0} h","other":"dans {0} h"},"past":{"one":"il y a {0} h","other":"il y a {0} h"}}},"minute":{"displayName":"minute","relative":{"0":"cette minute-ci"},"relativeTime":{"future":{"one":"dans {0} minute","other":"dans {0} minutes"},"past":{"one":"il y a {0} minute","other":"il y a {0} minutes"}}},"minute-short":{"displayName":"min","relative":{"0":"cette minute-ci"},"relativeTime":{"future":{"one":"dans {0} min","other":"dans {0} min"},"past":{"one":"il y a {0} min","other":"il y a {0} min"}}},"second":{"displayName":"seconde","relative":{"0":"maintenant"},"relativeTime":{"future":{"one":"dans {0} seconde","other":"dans {0} secondes"},"past":{"one":"il y a {0} seconde","other":"il y a {0} secondes"}}},"second-short":{"displayName":"s","relative":{"0":"maintenant"},"relativeTime":{"future":{"one":"dans {0} s","other":"dans {0} s"},"past":{"one":"il y a {0} s","other":"il y a {0} s"}}}}});
 addLocaleData({ locale: "fr-FR", parentLocale: "fr" });
-addLocaleData({ locale: "de", pluralRuleFunction: function (n,ord){var s=String(n).split("."),v0=!s[1];if(ord)return"other";return n==1&&v0?"one":"other"},"fields":{"year":{"displayName":"Jahr","relative":{"0":"dieses Jahr","1":"nächstes Jahr","-1":"letztes Jahr"},"relativeTime":{"future":{"one":"in {0} Jahr","other":"in {0} Jahren"},"past":{"one":"vor {0} Jahr","other":"vor {0} Jahren"}}},"year-short":{"displayName":"Jahr","relative":{"0":"dieses Jahr","1":"nächstes Jahr","-1":"letztes Jahr"},"relativeTime":{"future":{"one":"in {0} Jahr","other":"in {0} Jahren"},"past":{"one":"vor {0} Jahr","other":"vor {0} Jahren"}}},"month":{"displayName":"Monat","relative":{"0":"diesen Monat","1":"nächsten Monat","-1":"letzten Monat"},"relativeTime":{"future":{"one":"in {0} Monat","other":"in {0} Monaten"},"past":{"one":"vor {0} Monat","other":"vor {0} Monaten"}}},"month-short":{"displayName":"Monat","relative":{"0":"diesen Monat","1":"nächsten Monat","-1":"letzten Monat"},"relativeTime":{"future":{"one":"in {0} Monat","other":"in {0} Monaten"},"past":{"one":"vor {0} Monat","other":"vor {0} Monaten"}}},"day":{"displayName":"Tag","relative":{"0":"heute","1":"morgen","2":"übermorgen","-2":"vorgestern","-1":"gestern"},"relativeTime":{"future":{"one":"in {0} Tag","other":"in {0} Tagen"},"past":{"one":"vor {0} Tag","other":"vor {0} Tagen"}}},"day-short":{"displayName":"Tag","relative":{"0":"heute","1":"morgen","2":"übermorgen","-2":"vorgestern","-1":"gestern"},"relativeTime":{"future":{"one":"in {0} Tag","other":"in {0} Tagen"},"past":{"one":"vor {0} Tag","other":"vor {0} Tagen"}}},"hour":{"displayName":"Stunde","relative":{"0":"in dieser Stunde"},"relativeTime":{"future":{"one":"in {0} Stunde","other":"in {0} Stunden"},"past":{"one":"vor {0} Stunde","other":"vor {0} Stunden"}}},"hour-short":{"displayName":"Std.","relative":{"0":"in dieser Stunde"},"relativeTime":{"future":{"one":"in {0} Std.","other":"in {0} Std."},"past":{"one":"vor {0} Std.","other":"vor {0} Std."}}},"minute":{"displayName":"Minute","relative":{"0":"in dieser Minute"},"relativeTime":{"future":{"one":"in {0} Minute","other":"in {0} Minuten"},"past":{"one":"vor {0} Minute","other":"vor {0} Minuten"}}},"minute-short":{"displayName":"Min.","relative":{"0":"in dieser Minute"},"relativeTime":{"future":{"one":"in {0} Min.","other":"in {0} Min."},"past":{"one":"vor {0} Min.","other":"vor {0} Min."}}},"second":{"displayName":"Sekunde","relative":{"0":"jetzt"},"relativeTime":{"future":{"one":"in {0} Sekunde","other":"in {0} Sekunden"},"past":{"one":"vor {0} Sekunde","other":"vor {0} Sekunden"}}},"second-short":{"displayName":"Sek.","relative":{"0":"jetzt"},"relativeTime":{"future":{"one":"in {0} Sek.","other":"in {0} Sek."},"past":{"one":"vor {0} Sek.","other":"vor {0} Sek."}}}} });
-addLocaleData({ locale: "de-DE", parentLocale: "de" });
+addLocaleData({ locale: "id", pluralRuleFunction: function (n, ord) {if (ord) return 'other';return 'other';},"fields":{"year":{"displayName":"tahun","relative":{"0":"tahun ini","1":"tahun depan","-1":"tahun lalu"},"relativeTime":{"future":{"other":"dalam {0} tahun"},"past":{"other":"{0} tahun yang lalu"}}},"year-short":{"displayName":"thn.","relative":{"0":"tahun ini","1":"tahun depan","-1":"tahun lalu"},"relativeTime":{"future":{"other":"dlm {0} thn"},"past":{"other":"{0} thn lalu"}}},"month":{"displayName":"bulan","relative":{"0":"bulan ini","1":"bulan berikutnya","-1":"bulan lalu"},"relativeTime":{"future":{"other":"dalam {0} bulan"},"past":{"other":"{0} bulan yang lalu"}}},"month-short":{"displayName":"bln.","relative":{"0":"bulan ini","1":"bulan berikutnya","-1":"bulan lalu"},"relativeTime":{"future":{"other":"dlm {0} bln"},"past":{"other":"{0} bln lalu"}}},"week":{"displayName":"minggu","relativePeriod":"minggu ke-{0}","relative":{"0":"minggu ini","1":"minggu depan","-1":"minggu lalu"},"relativeTime":{"future":{"other":"dalam {0} minggu"},"past":{"other":"{0} minggu yang lalu"}}},"week-short":{"displayName":"mgg.","relativePeriod":"mgg ke-{0}","relative":{"0":"minggu ini","1":"minggu depan","-1":"minggu lalu"},"relativeTime":{"future":{"other":"dlm {0} mgg"},"past":{"other":"{0} mgg lalu"}}},"day":{"displayName":"hari","relative":{"0":"hari ini","1":"besok","2":"lusa","-2":"kemarin dulu","-1":"kemarin"},"relativeTime":{"future":{"other":"dalam {0} hari"},"past":{"other":"{0} hari yang lalu"}}},"day-short":{"displayName":"h","relative":{"0":"hari ini","1":"besok","2":"lusa","-2":"kemarin dulu","-1":"kemarin"},"relativeTime":{"future":{"other":"dalam {0} h"},"past":{"other":"{0} h lalu"}}},"hour":{"displayName":"Jam","relative":{"0":"jam ini"},"relativeTime":{"future":{"other":"dalam {0} jam"},"past":{"other":"{0} jam yang lalu"}}},"hour-short":{"displayName":"jam","relative":{"0":"jam ini"},"relativeTime":{"future":{"other":"dalam {0} jam"},"past":{"other":"{0} jam lalu"}}},"minute":{"displayName":"menit","relative":{"0":"menit ini"},"relativeTime":{"future":{"other":"dalam {0} menit"},"past":{"other":"{0} menit yang lalu"}}},"minute-short":{"displayName":"mnt.","relative":{"0":"menit ini"},"relativeTime":{"future":{"other":"dlm {0} mnt"},"past":{"other":"{0} mnt lalu"}}},"second":{"displayName":"detik","relative":{"0":"sekarang"},"relativeTime":{"future":{"other":"dalam {0} detik"},"past":{"other":"{0} detik yang lalu"}}},"second-short":{"displayName":"dtk.","relative":{"0":"sekarang"},"relativeTime":{"future":{"other":"dlm {0} dtk"},"past":{"other":"{0} dtk lalu"}}}}});
+addLocaleData({ locale: "id-ID", parentLocale: "id" });
+addLocaleData({ locale: "it", pluralRuleFunction: function(n, ord) {var s=String(n).split('.'),v0=!s[1];if (ord) return ((n == 11 || n == 8 || n == 80 || n == 800)) ? 'many' : 'other';return (n == 1 && v0) ? 'one' : 'other';},"fields":{"year":{"displayName":"anno","relative":{"0":"quest’anno","1":"anno prossimo","-1":"anno scorso"},"relativeTime":{"future":{"one":"tra {0} anno","other":"tra {0} anni"},"past":{"one":"{0} anno fa","other":"{0} anni fa"}}},"year-short":{"displayName":"anno","relative":{"0":"quest’anno","1":"anno prossimo","-1":"anno scorso"},"relativeTime":{"future":{"one":"tra {0} anno","other":"tra {0} anni"},"past":{"one":"{0} anno fa","other":"{0} anni fa"}}},"month":{"displayName":"mese","relative":{"0":"questo mese","1":"mese prossimo","-1":"mese scorso"},"relativeTime":{"future":{"one":"tra {0} mese","other":"tra {0} mesi"},"past":{"one":"{0} mese fa","other":"{0} mesi fa"}}},"month-short":{"displayName":"mese","relative":{"0":"questo mese","1":"mese prossimo","-1":"mese scorso"},"relativeTime":{"future":{"one":"tra {0} mese","other":"tra {0} mesi"},"past":{"one":"{0} mese fa","other":"{0} mesi fa"}}},"week":{"displayName":"settimana","relativePeriod":"la settimana del {0}","relative":{"0":"questa settimana","1":"settimana prossima","-1":"settimana scorsa"},"relativeTime":{"future":{"one":"tra {0} settimana","other":"tra {0} settimane"},"past":{"one":"{0} settimana fa","other":"{0} settimane fa"}}},"week-short":{"displayName":"sett.","relativePeriod":"la settimana del {0}","relative":{"0":"questa settimana","1":"settimana prossima","-1":"settimana scorsa"},"relativeTime":{"future":{"one":"tra {0} sett.","other":"tra {0} sett."},"past":{"one":"{0} sett. fa","other":"{0} sett. fa"}}},"day":{"displayName":"giorno","relative":{"0":"oggi","1":"domani","2":"dopodomani","-2":"l’altro ieri","-1":"ieri"},"relativeTime":{"future":{"one":"tra {0} giorno","other":"tra {0} giorni"},"past":{"one":"{0} giorno fa","other":"{0} giorni fa"}}},"day-short":{"displayName":"g","relative":{"0":"oggi","1":"domani","2":"dopodomani","-2":"l’altro ieri","-1":"ieri"},"relativeTime":{"future":{"one":"tra {0} g","other":"tra {0} gg"},"past":{"one":"{0} g fa","other":"{0} gg fa"}}},"hour":{"displayName":"ora","relative":{"0":"quest’ora"},"relativeTime":{"future":{"one":"tra {0} ora","other":"tra {0} ore"},"past":{"one":"{0} ora fa","other":"{0} ore fa"}}},"hour-short":{"displayName":"h.","relative":{"0":"quest’ora"},"relativeTime":{"future":{"one":"tra {0} h","other":"tra {0} h"},"past":{"one":"{0} h fa","other":"{0} h fa"}}},"minute":{"displayName":"minuto","relative":{"0":"questo minuto"},"relativeTime":{"future":{"one":"tra {0} minuto","other":"tra {0} minuti"},"past":{"one":"{0} minuto fa","other":"{0} minuti fa"}}},"minute-short":{"displayName":"min","relative":{"0":"questo minuto"},"relativeTime":{"future":{"one":"tra {0} min","other":"tra {0} min"},"past":{"one":"{0} min fa","other":"{0} min fa"}}},"second":{"displayName":"secondo","relative":{"0":"ora"},"relativeTime":{"future":{"one":"tra {0} secondo","other":"tra {0} secondi"},"past":{"one":"{0} secondo fa","other":"{0} secondi fa"}}},"second-short":{"displayName":"s","relative":{"0":"ora"},"relativeTime":{"future":{"one":"tra {0} s","other":"tra {0} sec."},"past":{"one":"{0} s fa","other":"{0} sec. fa"}}}}});
+addLocaleData({ locale: "it-CH", parentLocale: "it" });
+addLocaleData({ locale: "it-IT", parentLocale: "it" });
+addLocaleData({ locale: "it-SM", parentLocale: "it" });
+addLocaleData({ locale: "it-VA", parentLocale: "it" });
 addLocaleData({ locale: "ja", pluralRuleFunction: function (n,ord){if(ord)return"other";return"other"},"fields":{"year":{"displayName":"年","relative":{"0":"今年","1":"翌年","-1":"昨年"},"relativeTime":{"future":{"other":"{0} 年後"},"past":{"other":"{0} 年前"}}},"year-short":{"displayName":"年","relative":{"0":"今年","1":"翌年","-1":"昨年"},"relativeTime":{"future":{"other":"{0} 年後"},"past":{"other":"{0} 年前"}}},"month":{"displayName":"月","relative":{"0":"今月","1":"翌月","-1":"先月"},"relativeTime":{"future":{"other":"{0} か月後"},"past":{"other":"{0} か月前"}}},"month-short":{"displayName":"月","relative":{"0":"今月","1":"翌月","-1":"先月"},"relativeTime":{"future":{"other":"{0} か月後"},"past":{"other":"{0} か月前"}}},"day":{"displayName":"日","relative":{"0":"今日","1":"明日","2":"明後日","-2":"一昨日","-1":"昨日"},"relativeTime":{"future":{"other":"{0} 日後"},"past":{"other":"{0} 日前"}}},"day-short":{"displayName":"日","relative":{"0":"今日","1":"明日","2":"明後日","-2":"一昨日","-1":"昨日"},"relativeTime":{"future":{"other":"{0} 日後"},"past":{"other":"{0} 日前"}}},"hour":{"displayName":"時","relative":{"0":"1 時間以内"},"relativeTime":{"future":{"other":"{0} 時間後"},"past":{"other":"{0} 時間前"}}},"hour-short":{"displayName":"時","relative":{"0":"1 時間以内"},"relativeTime":{"future":{"other":"{0} 時間後"},"past":{"other":"{0} 時間前"}}},"minute":{"displayName":"分","relative":{"0":"1 分以内"},"relativeTime":{"future":{"other":"{0} 分後"},"past":{"other":"{0} 分前"}}},"minute-short":{"displayName":"分","relative":{"0":"1 分以内"},"relativeTime":{"future":{"other":"{0} 分後"},"past":{"other":"{0} 分前"}}},"second":{"displayName":"秒","relative":{"0":"今"},"relativeTime":{"future":{"other":"{0} 秒後"},"past":{"other":"{0} 秒前"}}},"second-short":{"displayName":"秒","relative":{"0":"今"},"relativeTime":{"future":{"other":"{0} 秒後"},"past":{"other":"{0} 秒前"}}}} });
 addLocaleData({ locale: "ja-JP", parentLocale: "ja" });
 addLocaleData({ locale: "ko", pluralRuleFunction: function (n,ord){if(ord)return"other";return"other"},"fields":{"year":{"displayName":"년","relative":{"0":"올해","1":"내년","-1":"작년"},"relativeTime":{"future":{"other":"{0}년 후"},"past":{"other":"{0}년 전"}}},"year-short":{"displayName":"년","relative":{"0":"올해","1":"내년","-1":"작년"},"relativeTime":{"future":{"other":"{0}년 후"},"past":{"other":"{0}년 전"}}},"month":{"displayName":"월","relative":{"0":"이번 달","1":"다음 달","-1":"지난달"},"relativeTime":{"future":{"other":"{0}개월 후"},"past":{"other":"{0}개월 전"}}},"month-short":{"displayName":"월","relative":{"0":"이번 달","1":"다음 달","-1":"지난달"},"relativeTime":{"future":{"other":"{0}개월 후"},"past":{"other":"{0}개월 전"}}},"day":{"displayName":"일","relative":{"0":"오늘","1":"내일","2":"모레","-2":"그저께","-1":"어제"},"relativeTime":{"future":{"other":"{0}일 후"},"past":{"other":"{0}일 전"}}},"day-short":{"displayName":"일","relative":{"0":"오늘","1":"내일","2":"모레","-2":"그저께","-1":"어제"},"relativeTime":{"future":{"other":"{0}일 후"},"past":{"other":"{0}일 전"}}},"hour":{"displayName":"시","relative":{"0":"현재 시간"},"relativeTime":{"future":{"other":"{0}시간 후"},"past":{"other":"{0}시간 전"}}},"hour-short":{"displayName":"시","relative":{"0":"현재 시간"},"relativeTime":{"future":{"other":"{0}시간 후"},"past":{"other":"{0}시간 전"}}},"minute":{"displayName":"분","relative":{"0":"현재 분"},"relativeTime":{"future":{"other":"{0}분 후"},"past":{"other":"{0}분 전"}}},"minute-short":{"displayName":"분","relative":{"0":"현재 분"},"relativeTime":{"future":{"other":"{0}분 후"},"past":{"other":"{0}분 전"}}},"second":{"displayName":"초","relative":{"0":"지금"},"relativeTime":{"future":{"other":"{0}초 후"},"past":{"other":"{0}초 전"}}},"second-short":{"displayName":"초","relative":{"0":"지금"},"relativeTime":{"future":{"other":"{0}초 후"},"past":{"other":"{0}초 전"}}}} });
 addLocaleData({ locale: "ko-KR", parentLocale: "ko" });
-addLocaleData({ locale: 'ru', pluralRuleFunction: function (n,ord){var s=String(n).split("."),i=s[0],v0=!s[1],i10=i.slice(-1),i100=i.slice(-2);if(ord)return"other";return v0&&i10==1&&i100!=11?"one":v0&&i10>=2&&i10<=4&&(i100<12||i100>14)?"few":(v0&&i10==0)||(v0&&i10>=5&&i10<=9)||(v0&&i100>=11&&i100<=14)?"many":"other";},"fields":{"year":{"displayName":"год","relative":{"0":"в этом году","1":"в следующем году","-1":"в прошлом году"},"relativeTime":{"future":{"one":"через {0} год","few":"через {0} года","many":"через {0} лет","other":"через {0} года"},"past":{"one":"{0} год назад","few":"{0} года назад","many":"{0} лет назад","other":"{0} года назад"}}},"year-short":{"displayName":"г.","relative":{"0":"в этом г.","1":"в след. г.","-1":"в прошлом г."},"relativeTime":{"future":{"one":"через {0} г.","few":"через {0} г.","many":"через {0} л.","other":"через {0} г."},"past":{"one":"{0} г. назад","few":"{0} г. назад","many":"{0} л. назад","other":"{0} г. назад"}}},"month":{"displayName":"месяц","relative":{"0":"в этом месяце","1":"в следующем месяце","-1":"в прошлом месяце"},"relativeTime":{"future":{"one":"через {0} месяц","few":"через {0} месяца","many":"через {0} месяцев","other":"через {0} месяца"},"past":{"one":"{0} месяц назад","few":"{0} месяца назад","many":"{0} месяцев назад","other":"{0} месяца назад"}}},"month-short":{"displayName":"мес.","relative":{"0":"в этом мес.","1":"в следующем мес.","-1":"в прошлом мес."},"relativeTime":{"future":{"one":"через {0} мес.","few":"через {0} мес.","many":"через {0} мес.","other":"через {0} мес."},"past":{"one":"{0} мес. назад","few":"{0} мес. назад","many":"{0} мес. назад","other":"{0} мес. назад"}}},"week":{"displayName":"неделя","relativePeriod":"на неделе {0}","relative":{"0":"на этой неделе","1":"на следующей неделе","-1":"на прошлой неделе"},"relativeTime":{"future":{"one":"через {0} неделю","few":"через {0} недели","many":"через {0} недель","other":"через {0} недели"},"past":{"one":"{0} неделю назад","few":"{0} недели назад","many":"{0} недель назад","other":"{0} недели назад"}}},"week-short":{"displayName":"нед.","relativePeriod":"на нед. {0}","relative":{"0":"на этой нед.","1":"на следующей нед.","-1":"на прошлой нед."},"relativeTime":{"future":{"one":"через {0} нед.","few":"через {0} нед.","many":"через {0} нед.","other":"через {0} нед."},"past":{"one":"{0} нед. назад","few":"{0} нед. назад","many":"{0} нед. назад","other":"{0} нед. назад"}}},"day":{"displayName":"день","relative":{"0":"сегодня","1":"завтра","2":"послезавтра","-1":"вчера","-2":"позавчера"},"relativeTime":{"future":{"one":"через {0} день","few":"через {0} дня","many":"через {0} дней","other":"через {0} дня"},"past":{"one":"{0} день назад","few":"{0} дня назад","many":"{0} дней назад","other":"{0} дня назад"}}},"day-short":{"displayName":"дн.","relative":{"0":"сегодня","1":"завтра","2":"послезавтра","-1":"вчера","-2":"позавчера"},"relativeTime":{"future":{"one":"через {0} дн.","few":"через {0} дн.","many":"через {0} дн.","other":"через {0} дн."},"past":{"one":"{0} дн. назад","few":"{0} дн. назад","many":"{0} дн. назад","other":"{0} дн. назад"}}},"hour":{"displayName":"час","relative":{"0":"в этот час"},"relativeTime":{"future":{"one":"через {0} час","few":"через {0} часа","many":"через {0} часов","other":"через {0} часа"},"past":{"one":"{0} час назад","few":"{0} часа назад","many":"{0} часов назад","other":"{0} часа назад"}}},"hour-short":{"displayName":"ч","relative":{"0":"в этот час"},"relativeTime":{"future":{"one":"через {0} ч.","few":"через {0} ч.","many":"через {0} ч.","other":"через {0} ч."},"past":{"one":"{0} ч. назад","few":"{0} ч. назад","many":"{0} ч. назад","other":"{0} ч. назад"}}},"minute":{"displayName":"минута","relative":{"0":"в эту минуту"},"relativeTime":{"future":{"one":"через {0} минуту","few":"через {0} минуты","many":"через {0} минут","other":"через {0} минуты"},"past":{"one":"{0} минуту назад","few":"{0} минуты назад","many":"{0} минут назад","other":"{0} минуты назад"}}},"minute-short":{"displayName":"мин.","relative":{"0":"в эту минуту"},"relativeTime":{"future":{"one":"через {0} мин.","few":"через {0} мин.","many":"через {0} мин.","other":"через {0} мин."},"past":{"one":"{0} мин. назад","few":"{0} мин. назад","many":"{0} мин. назад","other":"{0} мин. назад"}}},"second":{"displayName":"секунда","relative":{"0":"сейчас"},"relativeTime":{"future":{"one":"через {0} секунду","few":"через {0} секунды","many":"через {0} секунд","other":"через {0} секунды"},"past":{"one":"{0} секунду назад","few":"{0} секунды назад","many":"{0} секунд назад","other":"{0} секунды назад"}}},"second-short":{"displayName":"сек.","relative":{"0":"сейчас"},"relativeTime":{"future":{"one":"через {0} сек.","few":"через {0} сек.","many":"через {0} сек.","other":"через {0} сек."},"past":{"one":"{0} сек. назад","few":"{0} сек. назад","many":"{0} сек. назад","other":"{0} сек. назад"}}}} });
+addLocaleData({ locale: "pl", pluralRuleFunction: function (n, ord) { var s = String(n).split("."), v0 = !s[1], t0 = Number(s[0]) == n, n10 = t0 && s[0].slice(-1), n100 = t0 && s[0].slice(-2); if (ord) return n10 == 1 && n100 != 11 ? "jeden" : n10 == 2 && n100 != 12 ? "dwa" : n10 == 3 && n100 != 13 ? "kilka" : "inny"; return n == 1 && v0 ? "jeden" : "inny" }, "fields": { "rok": { "displayName": "rok", "relative": { "0": "ten rok", "1": "następny rok", "-1": "poprzedni rok" }, "relativeTime": { "future": { "jeden": "za {0} rok", "other": "za {0} lat" }, "past": { "jeden": "{0} rok temu", "other": "{0} lata temu" } } }, "year-short": { "displayName": "rok", "relative": { "0": "ten rok", "1": "następny rok", "-1": "poprzedni rok" }, "relativeTime": { "future": { "one": "za {0} r.", "other": "za {0} l." }, "past": { "one": "{0} r. temu", "other": "{0} l. temu" } } }, "month": { "displayName": "miesiąc", "relative": { "0": "ten miesiąc", "1": "następny miesiąc", "-1": "poprzedni miesiąc" }, "relativeTime": { "future": { "one": "w {0} miesiącu", "other": "w {0} miesiącach" }, "past": { "one": "{0} miesiąc temu", "other": "{0}  miesięcy temu" } } }, "month-short": { "displayName": "miesiąc", "relative": { "0": "ten miesiąc", "1": "następny miesiąc", "-1": "poprzedni miesiąc" }, "relativeTime": { "future": { "one": "z {0} miesiąc", "other": "za {0} miesięcy" }, "past": { "one": "{0} miesiąc temu", "other": "{0} miesięcy temu" } } }, "day": { "displayName": "dzień", "relative": { "0": "dzisiaj", "1": "jutro", "-1": "wczoraj" }, "relativeTime": { "future": { "one": "za {0} dzień", "other": "za {0} dni" }, "past": { "one": "{0} dzień temu", "other": "{0} dni temu" } } }, "day-short": { "displayName": "dzień", "relative": { "0": "dzisiaj", "1": "jutro", "-1": "wczoraj" }, "relativeTime": { "future": { "one": "za {0} dzień", "other": "za {0} dni" }, "past": { "one": "{0} dzień temu", "other": "{0} dni temu" } } }, "hour": { "displayName": "godzina", "relative": { "0": "ta godzina" }, "relativeTime": { "future": { "one": "za {0} godzinę", "other": "za {0} godzin" }, "past": { "one": "{0} godzina temu", "other": "{0} godzin temu" } } }, "hour-short": { "displayName": "godz.", "relative": { "0": "ta godzina" }, "relativeTime": { "future": { "one": "za {0} godz.", "other": "za {0} godz." }, "past": { "one": "{0} godz. temu", "other": "{0} godz. temu" } } }, "minute": { "displayName": "minuta", "relative": { "0": "ta minuta" }, "relativeTime": { "future": { "one": "za {0} minutę", "other": "za {0} minut" }, "past": { "one": "{0} minuta temu", "other": "{0} minut temu" } } }, "minute-short": { "displayName": "min.", "relative": { "0": "ta min." }, "relativeTime": { "future": { "one": "za {0} min.", "other": "za {0} min." }, "past": { "one": "{0} min. temu", "other": "{0} min. temu" } } }, "second": { "displayName": "sekunda", "relative": { "0": "teraz" }, "relativeTime": { "future": { "one": "za {0} sekundę", "other": "za {0} sekund" }, "past": { "one": "{0} sekundę temu", "other": "{0} sekund temu" } } }, "second-short": { "displayName": "sek.", "relative": { "0": "teraz" }, "relativeTime": { "future": { "one": "za {0} sek.", "other": "za {0} sek." }, "past": { "one": "{0} sek. temu", "other": "{0} sek. temu" } } } } });
+addLocaleData({ locale: "pl-PL", parentLocale: "pl" });
+addLocaleData({ locale: "pt", pluralRuleFunction: function (n, ord) {var s = String(n).split('.'), i = s[0];if (ord) return 'other';return ((i == 0 || i == 1)) ? 'one' : 'other';},"fields":{"year":{"displayName":"ano","relative":{"0":"este ano","1":"próximo ano","-1":"ano passado"},"relativeTime":{"future":{"one":"em {0} ano","other":"em {0} anos"},"past":{"one":"há {0} ano","other":"há {0} anos"}}},"year-short":{"displayName":"ano","relative":{"0":"este ano","1":"próximo ano","-1":"ano passado"},"relativeTime":{"future":{"one":"em {0} ano","other":"em {0} anos"},"past":{"one":"há {0} ano","other":"há {0} anos"}}},"month":{"displayName":"mês","relative":{"0":"este mês","1":"próximo mês","-1":"mês passado"},"relativeTime":{"future":{"one":"em {0} mês","other":"em {0} meses"},"past":{"one":"há {0} mês","other":"há {0} meses"}}},"month-short":{"displayName":"mês","relative":{"0":"este mês","1":"próximo mês","-1":"mês passado"},"relativeTime":{"future":{"one":"em {0} mês","other":"em {0} meses"},"past":{"one":"há {0} mês","other":"há {0} meses"}}},"week":{"displayName":"semana","relativePeriod":"a semana de {0}","relative":{"0":"esta semana","1":"próxima semana","-1":"semana passada"},"relativeTime":{"future":{"one":"em {0} semana","other":"em {0} semanas"},"past":{"one":"há {0} semana","other":"há {0} semanas"}}},"week-short":{"displayName":"sem.","relativePeriod":"a semana de {0}","relative":{"0":"esta semana","1":"próxima semana","-1":"semana passada"},"relativeTime":{"future":{"one":"em {0} sem.","other":"em {0} sem."},"past":{"one":"há {0} sem.","other":"há {0} sem."}}},"day":{"displayName":"dia","relative":{"0":"hoje","1":"amanhã","2":"depois de amanhã","-2":"anteontem","-1":"ontem"},"relativeTime":{"future":{"one":"em {0} dia","other":"em {0} dias"},"past":{"one":"há {0} dia","other":"há {0} dias"}}},"day-short":{"displayName":"dia","relative":{"0":"hoje","1":"amanhã","2":"depois de amanhã","-2":"anteontem","-1":"ontem"},"relativeTime":{"future":{"one":"em {0} dia","other":"em {0} dias"},"past":{"one":"há {0} dia","other":"há {0} dias"}}},"hour":{"displayName":"hora","relative":{"0":"esta hora"},"relativeTime":{"future":{"one":"em {0} hora","other":"em {0} horas"},"past":{"one":"há {0} hora","other":"há {0} horas"}}},"hour-short":{"displayName":"h","relative":{"0":"esta hora"},"relativeTime":{"future":{"one":"em {0} h","other":"em {0} h"},"past":{"one":"há {0} h","other":"há {0} h"}}},"minute":{"displayName":"minuto","relative":{"0":"este minuto"},"relativeTime":{"future":{"one":"em {0} minuto","other":"em {0} minutos"},"past":{"one":"há {0} minuto","other":"há {0} minutos"}}},"minute-short":{"displayName":"min.","relative":{"0":"este minuto"},"relativeTime":{"future":{"one":"em {0} min.","other":"em {0} min."},"past":{"one":"há {0} min.","other":"há {0} min."}}},"second":{"displayName":"segundo","relative":{"0":"agora"},"relativeTime":{"future":{"one":"em {0} segundo","other":"em {0} segundos"},"past":{"one":"há {0} segundo","other":"há {0} segundos"}}},"second-short":{"displayName":"seg.","relative":{"0":"agora"},"relativeTime":{"future":{"one":"em {0} seg.","other":"em {0} seg."},"past":{"one":"há {0} seg.","other":"há {0} seg."}}}}});
+addLocaleData({ locale: "pt-PT", parentLocale: "pt", pluralRuleFunction: function (n) {var s = String(n).split('.'), v0 = !s[1];return (n == 1 && v0) ? 'one' : 'other';},"fields":{"year":{"displayName":"ano","relative":{"0":"este ano","1":"próximo ano","-1":"ano passado"},"relativeTime":{"future":{"one":"dentro de {0} ano","other":"dentro de {0} anos"},"past":{"one":"há {0} ano","other":"há {0} anos"}}},"year-short":{"displayName":"ano","relative":{"0":"este ano","1":"próximo ano","-1":"ano passado"},"relativeTime":{"future":{"one":"dentro de {0} ano","other":"dentro de {0} anos"},"past":{"one":"há {0} ano","other":"há {0} anos"}}},"month":{"displayName":"mês","relative":{"0":"este mês","1":"próximo mês","-1":"mês passado"},"relativeTime":{"future":{"one":"dentro de {0} mês","other":"dentro de {0} meses"},"past":{"one":"há {0} mês","other":"há {0} meses"}}},"month-short":{"displayName":"mês","relative":{"0":"este mês","1":"próximo mês","-1":"mês passado"},"relativeTime":{"future":{"one":"dentro de {0} mês","other":"dentro de {0} meses"},"past":{"one":"há {0} mês","other":"há {0} meses"}}},"week":{"displayName":"semana","relativePeriod":"a semana de {0}","relative":{"0":"esta semana","1":"próxima semana","-1":"semana passada"},"relativeTime":{"future":{"one":"dentro de {0} semana","other":"dentro de {0} semanas"},"past":{"one":"há {0} semana","other":"há {0} semanas"}}},"week-short":{"displayName":"sem.","relativePeriod":"a sem. de {0}","relative":{"0":"esta semana","1":"próxima semana","-1":"semana passada"},"relativeTime":{"future":{"one":"dentro de {0} sem.","other":"dentro de {0} sem."},"past":{"one":"há {0} sem.","other":"há {0} sem."}}},"day":{"displayName":"dia","relative":{"0":"hoje","1":"amanhã","2":"depois de amanhã","-2":"anteontem","-1":"ontem"},"relativeTime":{"future":{"one":"dentro de {0} dia","other":"dentro de {0} dias"},"past":{"one":"há {0} dia","other":"há {0} dias"}}},"day-short":{"displayName":"dia","relative":{"0":"hoje","1":"amanhã","2":"depois de amanhã","-2":"anteontem","-1":"ontem"},"relativeTime":{"future":{"one":"dentro de {0} dia","other":"dentro de {0} dias"},"past":{"one":"há {0} dia","other":"há {0} dias"}}},"hour":{"displayName":"hora","relative":{"0":"esta hora"},"relativeTime":{"future":{"one":"dentro de {0} hora","other":"dentro de {0} horas"},"past":{"one":"há {0} hora","other":"há {0} horas"}}},"hour-short":{"displayName":"h","relative":{"0":"esta hora"},"relativeTime":{"future":{"one":"dentro de {0} h","other":"dentro de {0} h"},"past":{"one":"há {0} h","other":"há {0} h"}}},"minute":{"displayName":"minuto","relative":{"0":"este minuto"},"relativeTime":{"future":{"one":"dentro de {0} minuto","other":"dentro de {0} minutos"},"past":{"one":"há {0} minuto","other":"há {0} minutos"}}},"minute-short":{"displayName":"min","relative":{"0":"este minuto"},"relativeTime":{"future":{"one":"dentro de {0} min","other":"dentro de {0} min"},"past":{"one":"há {0} min","other":"há {0} min"}}},"second":{"displayName":"segundo","relative":{"0":"agora"},"relativeTime":{"future":{"one":"dentro de {0} segundo","other":"dentro de {0} segundos"},"past":{"one":"há {0} segundo","other":"há {0} segundos"}}},"second-short":{"displayName":"s","relative":{"0":"agora"},"relativeTime":{"future":{"one":"dentro de {0} s","other":"dentro de {0} s"},"past":{"one":"há {0} s","other":"há {0} s"}}}}});
+addLocaleData({ locale: "pt-AO", parentLocale: "pt-PT" });
+addLocaleData({ locale: "pt-BR", parentLocale: "pt" });
+addLocaleData({ locale: "pt-MZ", parentLocale: "pt-PT" });
+addLocaleData({ locale: "ru", pluralRuleFunction: function (n,ord){var s=String(n).split("."),i=s[0],v0=!s[1],i10=i.slice(-1),i100=i.slice(-2);if(ord)return"other";return v0&&i10==1&&i100!=11?"one":v0&&i10>=2&&i10<=4&&(i100<12||i100>14)?"few":(v0&&i10==0)||(v0&&i10>=5&&i10<=9)||(v0&&i100>=11&&i100<=14)?"many":"other";},"fields":{"year":{"displayName":"год","relative":{"0":"в этом году","1":"в следующем году","-1":"в прошлом году"},"relativeTime":{"future":{"one":"через {0} год","few":"через {0} года","many":"через {0} лет","other":"через {0} года"},"past":{"one":"{0} год назад","few":"{0} года назад","many":"{0} лет назад","other":"{0} года назад"}}},"year-short":{"displayName":"г.","relative":{"0":"в этом г.","1":"в след. г.","-1":"в прошлом г."},"relativeTime":{"future":{"one":"через {0} г.","few":"через {0} г.","many":"через {0} л.","other":"через {0} г."},"past":{"one":"{0} г. назад","few":"{0} г. назад","many":"{0} л. назад","other":"{0} г. назад"}}},"month":{"displayName":"месяц","relative":{"0":"в этом месяце","1":"в следующем месяце","-1":"в прошлом месяце"},"relativeTime":{"future":{"one":"через {0} месяц","few":"через {0} месяца","many":"через {0} месяцев","other":"через {0} месяца"},"past":{"one":"{0} месяц назад","few":"{0} месяца назад","many":"{0} месяцев назад","other":"{0} месяца назад"}}},"month-short":{"displayName":"мес.","relative":{"0":"в этом мес.","1":"в следующем мес.","-1":"в прошлом мес."},"relativeTime":{"future":{"one":"через {0} мес.","few":"через {0} мес.","many":"через {0} мес.","other":"через {0} мес."},"past":{"one":"{0} мес. назад","few":"{0} мес. назад","many":"{0} мес. назад","other":"{0} мес. назад"}}},"week":{"displayName":"неделя","relativePeriod":"на неделе {0}","relative":{"0":"на этой неделе","1":"на следующей неделе","-1":"на прошлой неделе"},"relativeTime":{"future":{"one":"через {0} неделю","few":"через {0} недели","many":"через {0} недель","other":"через {0} недели"},"past":{"one":"{0} неделю назад","few":"{0} недели назад","many":"{0} недель назад","other":"{0} недели назад"}}},"week-short":{"displayName":"нед.","relativePeriod":"на нед. {0}","relative":{"0":"на этой нед.","1":"на следующей нед.","-1":"на прошлой нед."},"relativeTime":{"future":{"one":"через {0} нед.","few":"через {0} нед.","many":"через {0} нед.","other":"через {0} нед."},"past":{"one":"{0} нед. назад","few":"{0} нед. назад","many":"{0} нед. назад","other":"{0} нед. назад"}}},"day":{"displayName":"день","relative":{"0":"сегодня","1":"завтра","2":"послезавтра","-1":"вчера","-2":"позавчера"},"relativeTime":{"future":{"one":"через {0} день","few":"через {0} дня","many":"через {0} дней","other":"через {0} дня"},"past":{"one":"{0} день назад","few":"{0} дня назад","many":"{0} дней назад","other":"{0} дня назад"}}},"day-short":{"displayName":"дн.","relative":{"0":"сегодня","1":"завтра","2":"послезавтра","-1":"вчера","-2":"позавчера"},"relativeTime":{"future":{"one":"через {0} дн.","few":"через {0} дн.","many":"через {0} дн.","other":"через {0} дн."},"past":{"one":"{0} дн. назад","few":"{0} дн. назад","many":"{0} дн. назад","other":"{0} дн. назад"}}},"hour":{"displayName":"час","relative":{"0":"в этот час"},"relativeTime":{"future":{"one":"через {0} час","few":"через {0} часа","many":"через {0} часов","other":"через {0} часа"},"past":{"one":"{0} час назад","few":"{0} часа назад","many":"{0} часов назад","other":"{0} часа назад"}}},"hour-short":{"displayName":"ч","relative":{"0":"в этот час"},"relativeTime":{"future":{"one":"через {0} ч.","few":"через {0} ч.","many":"через {0} ч.","other":"через {0} ч."},"past":{"one":"{0} ч. назад","few":"{0} ч. назад","many":"{0} ч. назад","other":"{0} ч. назад"}}},"minute":{"displayName":"минута","relative":{"0":"в эту минуту"},"relativeTime":{"future":{"one":"через {0} минуту","few":"через {0} минуты","many":"через {0} минут","other":"через {0} минуты"},"past":{"one":"{0} минуту назад","few":"{0} минуты назад","many":"{0} минут назад","other":"{0} минуты назад"}}},"minute-short":{"displayName":"мин.","relative":{"0":"в эту минуту"},"relativeTime":{"future":{"one":"через {0} мин.","few":"через {0} мин.","many":"через {0} мин.","other":"через {0} мин."},"past":{"one":"{0} мин. назад","few":"{0} мин. назад","many":"{0} мин. назад","other":"{0} мин. назад"}}},"second":{"displayName":"секунда","relative":{"0":"сейчас"},"relativeTime":{"future":{"one":"через {0} секунду","few":"через {0} секунды","many":"через {0} секунд","other":"через {0} секунды"},"past":{"one":"{0} секунду назад","few":"{0} секунды назад","many":"{0} секунд назад","other":"{0} секунды назад"}}},"second-short":{"displayName":"сек.","relative":{"0":"сейчас"},"relativeTime":{"future":{"one":"через {0} сек.","few":"через {0} сек.","many":"через {0} сек.","other":"через {0} сек."},"past":{"one":"{0} сек. назад","few":"{0} сек. назад","many":"{0} сек. назад","other":"{0} сек. назад"}}}} });
 addLocaleData({ locale: "ru-RU", parentLocale: "ru" });
+addLocaleData({ locale: "tr", pluralRuleFunction: function (n, ord) {if (ord) return 'other';return (n == 1) ? 'one' : 'other';},"fields":{"year":{"displayName":"yıl","relative":{"0":"bu yıl","1":"gelecek yıl","-1":"geçen yıl"},"relativeTime":{"future":{"one":"{0} yıl sonra","other":"{0} yıl sonra"},"past":{"one":"{0} yıl önce","other":"{0} yıl önce"}}},"year-short":{"displayName":"yıl","relative":{"0":"bu yıl","1":"gelecek yıl","-1":"geçen yıl"},"relativeTime":{"future":{"one":"{0} yıl sonra","other":"{0} yıl sonra"},"past":{"one":"{0} yıl önce","other":"{0} yıl önce"}}},"month":{"displayName":"ay","relative":{"0":"bu ay","1":"gelecek ay","-1":"geçen ay"},"relativeTime":{"future":{"one":"{0} ay sonra","other":"{0} ay sonra"},"past":{"one":"{0} ay önce","other":"{0} ay önce"}}},"month-short":{"displayName":"ay","relative":{"0":"bu ay","1":"gelecek ay","-1":"geçen ay"},"relativeTime":{"future":{"one":"{0} ay sonra","other":"{0} ay sonra"},"past":{"one":"{0} ay önce","other":"{0} ay önce"}}},"week":{"displayName":"hafta","relativePeriod":"{0} haftası","relative":{"0":"bu hafta","1":"gelecek hafta","-1":"geçen hafta"},"relativeTime":{"future":{"one":"{0} hafta sonra","other":"{0} hafta sonra"},"past":{"one":"{0} hafta önce","other":"{0} hafta önce"}}},"week-short":{"displayName":"hf.","relativePeriod":"{0} haftası","relative":{"0":"bu hafta","1":"gelecek hafta","-1":"geçen hafta"},"relativeTime":{"future":{"one":"{0} hf. sonra","other":"{0} hf. sonra"},"past":{"one":"{0} hf. önce","other":"{0} hf. önce"}}},"day":{"displayName":"gün","relative":{"0":"bugün","1":"yarın","2":"öbür gün","-2":"evvelsi gün","-1":"dün"},"relativeTime":{"future":{"one":"{0} gün sonra","other":"{0} gün sonra"},"past":{"one":"{0} gün önce","other":"{0} gün önce"}}},"day-short":{"displayName":"gün","relative":{"0":"bugün","1":"yarın","2":"öbür gün","-2":"evvelsi gün","-1":"dün"},"relativeTime":{"future":{"one":"{0} gün sonra","other":"{0} gün sonra"},"past":{"one":"{0} gün önce","other":"{0} gün önce"}}},"hour":{"displayName":"saat","relative":{"0":"bu saat"},"relativeTime":{"future":{"one":"{0} saat sonra","other":"{0} saat sonra"},"past":{"one":"{0} saat önce","other":"{0} saat önce"}}},"hour-short":{"displayName":"sa.","relative":{"0":"bu saat"},"relativeTime":{"future":{"one":"{0} sa. sonra","other":"{0} sa. sonra"},"past":{"one":"{0} sa. önce","other":"{0} sa. önce"}}},"minute":{"displayName":"dakika","relative":{"0":"bu dakika"},"relativeTime":{"future":{"one":"{0} dakika sonra","other":"{0} dakika sonra"},"past":{"one":"{0} dakika önce","other":"{0} dakika önce"}}},"minute-short":{"displayName":"dk.","relative":{"0":"bu dakika"},"relativeTime":{"future":{"one":"{0} dk. sonra","other":"{0} dk. sonra"},"past":{"one":"{0} dk. önce","other":"{0} dk. önce"}}},"second":{"displayName":"saniye","relative":{"0":"şimdi"},"relativeTime":{"future":{"one":"{0} saniye sonra","other":"{0} saniye sonra"},"past":{"one":"{0} saniye önce","other":"{0} saniye önce"}}},"second-short":{"displayName":"sn.","relative":{"0":"şimdi"},"relativeTime":{"future":{"one":"{0} sn. sonra","other":"{0} sn. sonra"},"past":{"one":"{0} sn. önce","other":"{0} sn. önce"}}}}});
+addLocaleData({ locale: "tr-CY", parentLocale: "tr" });
+addLocaleData({ locale: "tr-TR", parentLocale: "tr" });
 addLocaleData({ locale: "zh", pluralRuleFunction: function (n,ord){if(ord)return"other";return"other"},"fields":{"year":{"displayName":"年","relative":{"0":"今年","1":"明年","-1":"去年"},"relativeTime":{"future":{"other":"{0}年后"},"past":{"other":"{0}年前"}}},"year-short":{"displayName":"年","relative":{"0":"今年","1":"明年","-1":"去年"},"relativeTime":{"future":{"other":"{0}年后"},"past":{"other":"{0}年前"}}},"month":{"displayName":"月","relative":{"0":"本月","1":"下个月","-1":"上个月"},"relativeTime":{"future":{"other":"{0}个月后"},"past":{"other":"{0}个月前"}}},"month-short":{"displayName":"月","relative":{"0":"本月","1":"下个月","-1":"上个月"},"relativeTime":{"future":{"other":"{0}个月后"},"past":{"other":"{0}个月前"}}},"day":{"displayName":"日","relative":{"0":"今天","1":"明天","2":"后天","-2":"前天","-1":"昨天"},"relativeTime":{"future":{"other":"{0}天后"},"past":{"other":"{0}天前"}}},"day-short":{"displayName":"日","relative":{"0":"今天","1":"明天","2":"后天","-2":"前天","-1":"昨天"},"relativeTime":{"future":{"other":"{0}天后"},"past":{"other":"{0}天前"}}},"hour":{"displayName":"小时","relative":{"0":"这一时间 \u002F 此时"},"relativeTime":{"future":{"other":"{0}小时后"},"past":{"other":"{0}小时前"}}},"hour-short":{"displayName":"小时","relative":{"0":"这一时间 \u002F 此时"},"relativeTime":{"future":{"other":"{0}小时后"},"past":{"other":"{0}小时前"}}},"minute":{"displayName":"分钟","relative":{"0":"此刻"},"relativeTime":{"future":{"other":"{0}分钟后"},"past":{"other":"{0}分钟前"}}},"minute-short":{"displayName":"分","relative":{"0":"此刻"},"relativeTime":{"future":{"other":"{0}分钟后"},"past":{"other":"{0}分钟前"}}},"second":{"displayName":"秒","relative":{"0":"现在"},"relativeTime":{"future":{"other":"{0}秒钟后"},"past":{"other":"{0}秒钟前"}}},"second-short":{"displayName":"秒","relative":{"0":"现在"},"relativeTime":{"future":{"other":"{0}秒后"},"past":{"other":"{0}秒前"}}}} });
+addLocaleData({ locale: "zh-Hans", parentLocale: "zh" });
 addLocaleData({ locale: "zh-CN", parentLocale: "zh" });
+addLocaleData({ locale: "zh-Hans-SG", parentLocale: "zh-Hans", "fields":{"year":{"displayName":"年","relative":{"0":"今年","1":"明年","-1":"去年"},"relativeTime":{"future":{"other":"{0}年后"},"past":{"other":"{0}年前"}}},"year-short":{"displayName":"年","relative":{"0":"今年","1":"明年","-1":"去年"},"relativeTime":{"future":{"other":"{0}年后"},"past":{"other":"{0}年前"}}},"month":{"displayName":"月","relative":{"0":"本月","1":"下个月","-1":"上个月"},"relativeTime":{"future":{"other":"{0}个月后"},"past":{"other":"{0}个月前"}}},"month-short":{"displayName":"月","relative":{"0":"本月","1":"下个月","-1":"上个月"},"relativeTime":{"future":{"other":"{0}个月后"},"past":{"other":"{0}个月前"}}},"week":{"displayName":"周","relativePeriod":"{0}这周","relative":{"0":"本周","1":"下周","-1":"上周"},"relativeTime":{"future":{"other":"{0}周后"},"past":{"other":"{0}周前"}}},"week-short":{"displayName":"周","relativePeriod":"{0}这周","relative":{"0":"本周","1":"下周","-1":"上周"},"relativeTime":{"future":{"other":"{0}周后"},"past":{"other":"{0}周前"}}},"day":{"displayName":"日","relative":{"0":"今天","1":"明天","2":"后天","-2":"前天","-1":"昨天"},"relativeTime":{"future":{"other":"{0}天后"},"past":{"other":"{0}天前"}}},"day-short":{"displayName":"日","relative":{"0":"今天","1":"明天","2":"后天","-2":"前天","-1":"昨天"},"relativeTime":{"future":{"other":"{0}天后"},"past":{"other":"{0}天前"}}},"hour":{"displayName":"小时","relative":{"0":"这一时间 \u002F 此时"},"relativeTime":{"future":{"other":"{0}小时后"},"past":{"other":"{0}小时前"}}},"hour-short":{"displayName":"小时","relative":{"0":"这一时间 \u002F 此时"},"relativeTime":{"future":{"other":"{0}小时后"},"past":{"other":"{0}小时前"}}},"minute":{"displayName":"分钟","relative":{"0":"此刻"},"relativeTime":{"future":{"other":"{0}分钟后"},"past":{"other":"{0}分钟前"}}},"minute-short":{"displayName":"分","relative":{"0":"此刻"},"relativeTime":{"future":{"other":"{0}分钟后"},"past":{"other":"{0}分钟前"}}},"second":{"displayName":"秒","relative":{"0":"现在"},"relativeTime":{"future":{"other":"{0}秒后"},"past":{"other":"{0}秒前"}}},"second-short":{"displayName":"秒","relative":{"0":"现在"},"relativeTime":{"future":{"other":"{0}秒后"},"past":{"other":"{0}秒前"}}}}});
+addLocaleData({ locale: "zh-Hant", pluralRuleFunction: function (n) {return 'other';},"fields":{"year":{"displayName":"年","relative":{"0":"今年","1":"明年","-1":"去年"},"relativeTime":{"future":{"other":"{0} 年後"},"past":{"other":"{0} 年前"}}},"year-short":{"displayName":"年","relative":{"0":"今年","1":"明年","-1":"去年"},"relativeTime":{"future":{"other":"{0} 年後"},"past":{"other":"{0} 年前"}}},"month":{"displayName":"月","relative":{"0":"本月","1":"下個月","-1":"上個月"},"relativeTime":{"future":{"other":"{0} 個月後"},"past":{"other":"{0} 個月前"}}},"month-short":{"displayName":"月","relative":{"0":"本月","1":"下個月","-1":"上個月"},"relativeTime":{"future":{"other":"{0} 個月後"},"past":{"other":"{0} 個月前"}}},"week":{"displayName":"週","relativePeriod":"{0} 當週","relative":{"0":"本週","1":"下週","-1":"上週"},"relativeTime":{"future":{"other":"{0} 週後"},"past":{"other":"{0} 週前"}}},"week-short":{"displayName":"週","relativePeriod":"{0} 當週","relative":{"0":"本週","1":"下週","-1":"上週"},"relativeTime":{"future":{"other":"{0} 週後"},"past":{"other":"{0} 週前"}}},"day":{"displayName":"日","relative":{"0":"今天","1":"明天","2":"後天","-2":"前天","-1":"昨天"},"relativeTime":{"future":{"other":"{0} 天後"},"past":{"other":"{0} 天前"}}},"day-short":{"displayName":"日","relative":{"0":"今天","1":"明天","2":"後天","-2":"前天","-1":"昨天"},"relativeTime":{"future":{"other":"{0} 天後"},"past":{"other":"{0} 天前"}}},"hour":{"displayName":"小時","relative":{"0":"這一小時"},"relativeTime":{"future":{"other":"{0} 小時後"},"past":{"other":"{0} 小時前"}}},"hour-short":{"displayName":"小時","relative":{"0":"這一小時"},"relativeTime":{"future":{"other":"{0} 小時後"},"past":{"other":"{0} 小時前"}}},"minute":{"displayName":"分鐘","relative":{"0":"這一分鐘"},"relativeTime":{"future":{"other":"{0} 分鐘後"},"past":{"other":"{0} 分鐘前"}}},"minute-short":{"displayName":"分鐘","relative":{"0":"這一分鐘"},"relativeTime":{"future":{"other":"{0} 分鐘後"},"past":{"other":"{0} 分鐘前"}}},"second":{"displayName":"秒","relative":{"0":"現在"},"relativeTime":{"future":{"other":"{0} 秒後"},"past":{"other":"{0} 秒前"}}},"second-short":{"displayName":"秒","relative":{"0":"現在"},"relativeTime":{"future":{"other":"{0} 秒後"},"past":{"other":"{0} 秒前"}}}}});
+addLocaleData({ locale: "zh-Hant-HK", parentLocale: "zh-Hant", "fields":{"year":{"displayName":"年","relative":{"0":"今年","1":"下年","-1":"上年"},"relativeTime":{"future":{"other":"{0} 年後"},"past":{"other":"{0} 年前"}}},"year-short":{"displayName":"年","relative":{"0":"今年","1":"下年","-1":"上年"},"relativeTime":{"future":{"other":"{0} 年後"},"past":{"other":"{0} 年前"}}},"month":{"displayName":"月","relative":{"0":"本月","1":"下個月","-1":"上個月"},"relativeTime":{"future":{"other":"{0} 個月後"},"past":{"other":"{0} 個月前"}}},"month-short":{"displayName":"月","relative":{"0":"本月","1":"下個月","-1":"上個月"},"relativeTime":{"future":{"other":"{0} 個月後"},"past":{"other":"{0} 個月前"}}},"week":{"displayName":"星期","relativePeriod":"{0} 當週","relative":{"0":"本星期","1":"下星期","-1":"上星期"},"relativeTime":{"future":{"other":"{0} 星期後"},"past":{"other":"{0} 星期前"}}},"week-short":{"displayName":"星期","relativePeriod":"{0} 當週","relative":{"0":"本星期","1":"下星期","-1":"上星期"},"relativeTime":{"future":{"other":"{0} 星期後"},"past":{"other":"{0} 星期前"}}},"day":{"displayName":"日","relative":{"0":"今日","1":"明日","2":"後日","-2":"前日","-1":"昨日"},"relativeTime":{"future":{"other":"{0} 日後"},"past":{"other":"{0} 日前"}}},"day-short":{"displayName":"日","relative":{"0":"今日","1":"明日","2":"後日","-2":"前日","-1":"昨日"},"relativeTime":{"future":{"other":"{0} 日後"},"past":{"other":"{0} 日前"}}},"hour":{"displayName":"小時","relative":{"0":"這個小時"},"relativeTime":{"future":{"other":"{0} 小時後"},"past":{"other":"{0} 小時前"}}},"hour-short":{"displayName":"小時","relative":{"0":"這個小時"},"relativeTime":{"future":{"other":"{0} 小時後"},"past":{"other":"{0} 小時前"}}},"minute":{"displayName":"分鐘","relative":{"0":"這分鐘"},"relativeTime":{"future":{"other":"{0} 分鐘後"},"past":{"other":"{0} 分鐘前"}}},"minute-short":{"displayName":"分鐘","relative":{"0":"這分鐘"},"relativeTime":{"future":{"other":"{0} 分鐘後"},"past":{"other":"{0} 分鐘前"}}},"second":{"displayName":"秒","relative":{"0":"現在"},"relativeTime":{"future":{"other":"{0} 秒後"},"past":{"other":"{0} 秒前"}}},"second-short":{"displayName":"秒","relative":{"0":"現在"},"relativeTime":{"future":{"other":"{0} 秒後"},"past":{"other":"{0} 秒前"}}}}});
+addLocaleData({ locale: "zh-HK", parentLocale: "zh-Hant-HK" });
+addLocaleData({ locale: "zh-Hant-MO", parentLocale: "zh-Hant-HK" });
+addLocaleData({ locale: "zh-MO", parentLocale: "zh-Hant-HK" });
+addLocaleData({ locale: "zh-SG", parentLocale: "zh-Hans-SG" });
+addLocaleData({ locale: "zh-TW", parentLocale: "zh-Hant" });
diff --git a/packages/osd-i18n/src/loader.ts b/packages/osd-i18n/src/loader.ts
index c5fec0168e9f..6454a8a2f980 100644
--- a/packages/osd-i18n/src/loader.ts
+++ b/packages/osd-i18n/src/loader.ts
@@ -34,6 +34,7 @@ import { promisify } from 'util';
 
 import { unique } from './core/helper';
 import { Translation } from './translation';
+import { normalizeLocale } from './core';
 
 const TRANSLATION_FILE_EXTENSION = '.json';
 
@@ -69,7 +70,9 @@ function getLocaleFromFileName(fullFileName: string) {
     );
   }
 
-  return path.basename(fullFileName, TRANSLATION_FILE_EXTENSION);
+  const basename = path.basename(fullFileName, TRANSLATION_FILE_EXTENSION);
+
+  return normalizeLocale(basename);
 }
 
 /**
@@ -131,6 +134,15 @@ export function getRegisteredLocales() {
   return Object.keys(translationsRegistry);
 }
 
+/**
+ * Check if a locale is registered; returns undefined if i18n is uninitialized
+ */
+export function isRegisteredLocale(locale: string): boolean | undefined {
+  const normalizedLocale = normalizeLocale(locale);
+
+  return translationsRegistry?.hasOwnProperty(normalizedLocale);
+}
+
 /**
  * Returns translation messages by specified locale
  * @param locale
diff --git a/packages/osd-std/package.json b/packages/osd-std/package.json
index d0d859217c08..d23c5d6f6a8d 100644
--- a/packages/osd-std/package.json
+++ b/packages/osd-std/package.json
@@ -8,7 +8,7 @@
   "private": true,
   "sideEffects": false,
   "dependencies": {
-    "json11": "^1.1.2",
+    "json11": "^2.0.0",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
diff --git a/packages/osd-ui-framework/package.json b/packages/osd-ui-framework/package.json
index fbefeacb727b..919f028a57c7 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.15.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.17.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 18e1fe3f601c..2249c83ef2b5 100644
--- a/packages/osd-ui-shared-deps/package.json
+++ b/packages/osd-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "31.1.0",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.15.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.17.0",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@opensearch/datemath": "5.0.3",
     "@osd/i18n": "1.0.0",
diff --git a/src/core/public/application/scoped_history.test.ts b/src/core/public/application/scoped_history.test.ts
index 6575a6aa1ab1..067c33256bd1 100644
--- a/src/core/public/application/scoped_history.test.ts
+++ b/src/core/public/application/scoped_history.test.ts
@@ -30,23 +30,8 @@
 
 import { ScopedHistory } from './scoped_history';
 import { createMemoryHistory } from 'history';
-import { getLocaleInUrl } from '../locale_helper';
-import { i18n } from '@osd/i18n';
-
-jest.mock('../locale_helper', () => ({
-  getLocaleInUrl: jest.fn(),
-}));
-
-jest.mock('@osd/i18n', () => ({
-  i18n: {
-    getLocale: jest.fn(),
-  },
-}));
 
 describe('ScopedHistory', () => {
-  beforeEach(() => {
-    (getLocaleInUrl as jest.Mock).mockReturnValue('en');
-  });
   describe('construction', () => {
     it('succeeds if current location matches basePath', () => {
       const gh = createMemoryHistory();
@@ -373,49 +358,4 @@ describe('ScopedHistory', () => {
       expect(gh.length).toBe(4);
     });
   });
-
-  describe('locale handling', () => {
-    let originalLocation: Location;
-
-    beforeEach(() => {
-      originalLocation = window.location;
-      delete (window as any).location;
-      window.location = { href: 'http://localhost/app/wow', reload: jest.fn() } as any;
-      (i18n.getLocale as jest.Mock).mockReturnValue('en');
-    });
-
-    afterEach(() => {
-      window.location = originalLocation;
-      jest.resetAllMocks();
-    });
-
-    it('reloads the page when locale changes', () => {
-      const gh = createMemoryHistory();
-      gh.push('/app/wow');
-      const h = new ScopedHistory(gh, '/app/wow');
-      // Use the 'h' variable to trigger the listener
-      h.push('/new-page');
-
-      // Mock getLocaleInUrl to return a different locale
-      (getLocaleInUrl as jest.Mock).mockReturnValue('fr');
-
-      // Simulate navigation
-      gh.push('/app/wow/new-page');
-
-      expect(window.location.reload).toHaveBeenCalled();
-    });
-
-    it('does not reload the page when locale changes', () => {
-      const gh = createMemoryHistory();
-      gh.push('/app/wow');
-
-      // Mock getLocaleInUrl to return a different locale
-      (getLocaleInUrl as jest.Mock).mockReturnValue('en');
-
-      // Simulate navigation
-      gh.push('/app/wow/new-page');
-
-      expect(window.location.reload).not.toHaveBeenCalled();
-    });
-  });
 });
diff --git a/src/core/public/application/scoped_history.ts b/src/core/public/application/scoped_history.ts
index 74e4bb068d3e..487093be191f 100644
--- a/src/core/public/application/scoped_history.ts
+++ b/src/core/public/application/scoped_history.ts
@@ -39,8 +39,6 @@ import {
   Href,
   Action,
 } from 'history';
-import { i18n } from '@osd/i18n';
-import { getLocaleInUrl } from '../locale_helper';
 
 /**
  * A wrapper around a `History` instance that is scoped to a particular base path of the history stack. Behaves
@@ -309,7 +307,6 @@ export class ScopedHistory<HistoryLocationState = unknown>
    * state. Also forwards events to child listeners with the base path stripped from the location.
    */
   private setupHistoryListener() {
-    const currentLocale = i18n.getLocale() || 'en';
     const unlisten = this.parentHistory.listen((location, action) => {
       // If the user navigates outside the scope of this basePath, tear it down.
       if (!location.pathname.startsWith(this.basePath)) {
@@ -318,14 +315,6 @@ export class ScopedHistory<HistoryLocationState = unknown>
         return;
       }
 
-      const localeValue = getLocaleInUrl(window.location.href);
-
-      if (localeValue !== currentLocale) {
-        // Force a full page reload
-        window.location.reload();
-        return;
-      }
-
       /**
        * Track location keys using the same algorithm the browser uses internally.
        * - On PUSH, remove all items that came after the current location and append the new location.
diff --git a/src/core/public/chrome/chrome_service.mock.ts b/src/core/public/chrome/chrome_service.mock.ts
index c63232186672..19997a87561a 100644
--- a/src/core/public/chrome/chrome_service.mock.ts
+++ b/src/core/public/chrome/chrome_service.mock.ts
@@ -41,6 +41,9 @@ const createSetupContractMock = () => {
       getNavGroupEnabled: jest.fn(),
       registerNavGroupUpdater: jest.fn(),
     },
+    globalSearch: {
+      registerSearchCommand: jest.fn(),
+    },
   };
 };
 
@@ -83,6 +86,9 @@ const createStartContractMock = () => {
       getCurrentNavGroup$: jest.fn(() => new BehaviorSubject(undefined)),
       setCurrentNavGroup: jest.fn(),
     },
+    globalSearch: {
+      getAllSearchCommands: jest.fn(() => []),
+    },
     setAppTitle: jest.fn(),
     setIsVisible: jest.fn(),
     getIsVisible$: jest.fn(),
diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
index e737ecec2891..39f9f0fbc320 100644
--- a/src/core/public/chrome/chrome_service.tsx
+++ b/src/core/public/chrome/chrome_service.tsx
@@ -66,6 +66,11 @@ import {
   ChromeNavGroupServiceSetupContract,
   ChromeNavGroupServiceStartContract,
 } from './nav_group';
+import {
+  GlobalSearchService,
+  GlobalSearchServiceSetupContract,
+  GlobalSearchServiceStartContract,
+} from './global_search';
 
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
@@ -136,6 +141,7 @@ export class ChromeService {
   private readonly recentlyAccessed = new RecentlyAccessedService();
   private readonly docTitle = new DocTitleService();
   private readonly navGroup = new ChromeNavGroupService();
+  private readonly globalSearch = new GlobalSearchService();
   private useUpdatedHeader = false;
   private updatedHeaderSubscription: Subscription | undefined;
   private collapsibleNavHeaderRender?: CollapsibleNavHeaderRender;
@@ -198,6 +204,7 @@ export class ChromeService {
 
   public setup({ uiSettings }: SetupDeps): ChromeSetup {
     const navGroup = this.navGroup.setup({ uiSettings });
+    const globalSearch = this.globalSearch.setup();
     return {
       registerCollapsibleNavHeader: (render: CollapsibleNavHeaderRender) => {
         if (this.collapsibleNavHeaderRender) {
@@ -209,6 +216,7 @@ export class ChromeService {
         this.collapsibleNavHeaderRender = render;
       },
       navGroup,
+      globalSearch,
     };
   }
 
@@ -255,6 +263,8 @@ export class ChromeService {
       workspaces,
     });
 
+    const globalSearch = this.globalSearch.start();
+
     // erase chrome fields from a previous app while switching to a next app
     application.currentAppId$.subscribe(() => {
       helpExtension$.next(undefined);
@@ -346,6 +356,7 @@ export class ChromeService {
       docTitle,
       logos,
       navGroup,
+      globalSearch,
 
       getHeaderComponent: () => (
         <Header
@@ -388,6 +399,7 @@ export class ChromeService {
           workspaceList$={workspaces.workspaceList$}
           currentWorkspace$={workspaces.currentWorkspace$}
           useUpdatedHeader={this.useUpdatedHeader}
+          globalSearchCommands={globalSearch.getAllSearchCommands()}
         />
       ),
 
@@ -476,6 +488,8 @@ export class ChromeService {
 export interface ChromeSetup {
   registerCollapsibleNavHeader: (render: CollapsibleNavHeaderRender) => void;
   navGroup: ChromeNavGroupServiceSetupContract;
+  /** {@inheritdoc GlobalSearchService} */
+  globalSearch: GlobalSearchServiceSetupContract;
 }
 
 /**
@@ -517,6 +531,8 @@ export interface ChromeStart {
   navGroup: ChromeNavGroupServiceStartContract;
   /** {@inheritdoc Logos} */
   readonly logos: Logos;
+  /** {@inheritdoc GlobalSearchService} */
+  globalSearch: GlobalSearchServiceStartContract;
 
   /**
    * Sets the current app's title
@@ -605,7 +621,7 @@ export interface ChromeStart {
   setCustomNavLink(newCustomNavLink?: Partial<ChromeNavLink>): void;
 
   /**
-   * Get an observable of the current custom help conttent
+   * Get an observable of the current custom help content
    */
   getHelpExtension$(): Observable<ChromeHelpExtension | undefined>;
 
diff --git a/src/core/public/chrome/global_search/global_search_service.test.ts b/src/core/public/chrome/global_search/global_search_service.test.ts
new file mode 100644
index 000000000000..838423c7a1d6
--- /dev/null
+++ b/src/core/public/chrome/global_search/global_search_service.test.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// test global_search_service.ts
+import { GlobalSearchService } from './global_search_service';
+
+describe('GlobalSearchService', () => {
+  it('registerSearchCommand', async () => {
+    const globalSearchService = new GlobalSearchService();
+    const setup = globalSearchService.setup();
+    const start = globalSearchService.start();
+
+    setup.registerSearchCommand({
+      id: 'test1',
+      type: 'PAGES',
+      run: async (query) => {
+        return [];
+      },
+    });
+
+    expect(start.getAllSearchCommands()).toHaveLength(1);
+    expect(start.getAllSearchCommands()[0].id).toEqual('test1');
+    expect(start.getAllSearchCommands()[0].type).toEqual('PAGES');
+  });
+
+  it('registerSearchCommand with duplicate id', async () => {
+    const globalSearchService = new GlobalSearchService();
+    const setup = globalSearchService.setup();
+    const start = globalSearchService.start();
+
+    setup.registerSearchCommand({
+      id: 'test2',
+      type: 'PAGES',
+      run: async (query) => {
+        return [];
+      },
+    });
+
+    setup.registerSearchCommand({
+      id: 'test2',
+      type: 'SAVED_OBJECTS',
+      run: async (query) => {
+        return [];
+      },
+    });
+
+    // the second one will not overwrite the first one
+    expect(start.getAllSearchCommands()).toHaveLength(1);
+    expect(start.getAllSearchCommands()[0].id).toEqual('test2');
+    expect(start.getAllSearchCommands()[0].type).toEqual('PAGES');
+  });
+});
diff --git a/src/core/public/chrome/global_search/global_search_service.ts b/src/core/public/chrome/global_search/global_search_service.ts
new file mode 100644
index 000000000000..31fc65e82dfa
--- /dev/null
+++ b/src/core/public/chrome/global_search/global_search_service.ts
@@ -0,0 +1,103 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ReactNode } from 'react';
+import { i18n } from '@osd/i18n';
+
+/**
+ * search input match with `@` will handled by saved objects search command
+ * search input match with `>` will handled by plugin customized commands
+ */
+export const SAVED_OBJECTS_SYMBOL = '@';
+export const COMMANDS_SYMBOL = '>';
+
+export const SearchCommandTypes = {
+  PAGES: {
+    description: i18n.translate('core.globalSearch.pages.description', { defaultMessage: 'Pages' }),
+    alias: null,
+  },
+  SAVED_OBJECTS: {
+    description: i18n.translate('core.globalSearch.assets.description', {
+      defaultMessage: 'Assets',
+    }),
+    alias: SAVED_OBJECTS_SYMBOL,
+  },
+} as const;
+
+export type SearchCommandKeyTypes = keyof typeof SearchCommandTypes;
+
+/**
+ * @experimental
+ */
+export interface GlobalSearchCommand {
+  /**
+   * unique id of this command
+   */
+  id: string;
+  /**
+   * search command type
+   * @type {SearchCommandTypes}
+   */
+  type: SearchCommandKeyTypes;
+  /**
+   * do the search and return search result with a React element
+   * @param value search query
+   * @param callback callback function when search is done
+   */
+  run(value: string, callback?: () => void): Promise<ReactNode[]>;
+}
+
+export interface GlobalSearchServiceSetupContract {
+  registerSearchCommand(searchCommand: GlobalSearchCommand): void;
+}
+
+export interface GlobalSearchServiceStartContract {
+  getAllSearchCommands(): GlobalSearchCommand[];
+}
+
+/**
+ * {@link GlobalSearchCommand | APIs} for registering new global search command when do search from header search bar .
+ *
+ * @example
+ * Register a GlobalSearchCommand to search pages
+ * ```jsx
+ * chrome.globalSearch.registerSearchCommand({
+ *   id: 'test',
+ *   type: SearchObjectTypes.PAGES,
+ *   run: async (query) => {
+ *     return [];
+ *   },
+ * })
+ * ```
+ *
+ * @experimental
+ */
+export class GlobalSearchService {
+  private searchCommands = [] as GlobalSearchCommand[];
+
+  private registerSearchCommand(searchHandler: GlobalSearchCommand) {
+    const exists = this.searchCommands.find((item) => {
+      return item.id === searchHandler.id;
+    });
+    if (exists) {
+      // eslint-disable-next-line no-console
+      console.warn(`Duplicate SearchCommands id ${searchHandler.id} found`);
+      return;
+    }
+    this.searchCommands.push(searchHandler);
+  }
+
+  public setup(): GlobalSearchServiceSetupContract {
+    return {
+      registerSearchCommand: this.registerSearchCommand.bind(this),
+    };
+  }
+
+  public start(): GlobalSearchServiceStartContract {
+    return {
+      getAllSearchCommands: () => this.searchCommands,
+    };
+  }
+}
diff --git a/src/core/public/chrome/global_search/index.ts b/src/core/public/chrome/global_search/index.ts
new file mode 100644
index 000000000000..ae34ceb1b725
--- /dev/null
+++ b/src/core/public/chrome/global_search/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './global_search_service';
diff --git a/src/core/public/chrome/index.ts b/src/core/public/chrome/index.ts
index 5403634705c4..9fbc84b2e0d8 100644
--- a/src/core/public/chrome/index.ts
+++ b/src/core/public/chrome/index.ts
@@ -61,3 +61,4 @@ export { ChromeDocTitle } from './doc_title';
 export { RightNavigationOrder, HeaderVariant } from './constants';
 export { ChromeRegistrationNavLink, ChromeNavGroupUpdater, NavGroupItemInMap } from './nav_group';
 export { fulfillRegistrationLinksToChromeNavLinks, LinkItemType, getSortedNavLinks } from './utils';
+export { SearchCommandKeyTypes, GlobalSearchCommand } from './global_search';
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
index c3159005c50b..b65c2335a046 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
@@ -20,6 +20,9 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 1`] = `
           go back
         </button>
       </div>
+      <div
+        class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPanel--noBorder searchBar-wrapper"
+      />
       <div
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder eui-yScroll flex-1-container"
         style="padding-top: 0px;"
@@ -81,6 +84,9 @@ exports[`<CollapsibleNavGroupEnabled /> should render correctly 2`] = `
     <div
       class="eui-fullHeight left-navigation-wrapper"
     >
+      <div
+        class="searchBarIcon euiHeaderSectionItemButton"
+      />
       <div
         class="flex-1-container"
       />
@@ -112,6 +118,9 @@ exports[`<CollapsibleNavGroupEnabled /> should show use case nav when current na
           go back
         </button>
       </div>
+      <div
+        class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPanel--noBorder searchBar-wrapper"
+      />
       <div
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder eui-yScroll flex-1-container"
         style="padding-top: 0px;"
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 8cdd0a0f20aa..da288014a02c 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
@@ -20461,27 +20461,41 @@ exports[`Header renders page header with application title 1`] = `
           >
             <EuiFlexGroup
               className="secondaryPageHeaderFlexGroup"
-              gutterSize="s"
+              gutterSize="none"
               justifyContent="spaceBetween"
             >
               <div
-                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive secondaryPageHeaderFlexGroup"
+                className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive secondaryPageHeaderFlexGroup"
               >
                 <EuiHeaderSection
+                  grow={true}
                   side="left"
+                  style={
+                    Object {
+                      "flexShrink": 1,
+                    }
+                  }
                 >
                   <div
-                    className="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+                    className="euiHeaderSection euiHeaderSection--grow euiHeaderSection--left"
+                    style={
+                      Object {
+                        "flexShrink": 1,
+                      }
+                    }
                   >
                     <EuiFlexGroup
+                      className="leftSecondaryPageHeaderFlexGroup"
                       gutterSize="s"
                     >
                       <div
-                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive leftSecondaryPageHeaderFlexGroup"
                       >
-                        <EuiFlexItem>
+                        <EuiFlexItem
+                          grow={false}
+                        >
                           <div
-                            className="euiFlexItem"
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <EuiHeaderSectionItem
                               border="none"
@@ -20496,7 +20510,7 @@ exports[`Header renders page header with application title 1`] = `
                                   size="l"
                                 >
                                   <h1
-                                    className="euiTitle euiTitle--large newTopNavHeaderTitle"
+                                    className="euiTitle euiTitle--large newTopNavHeaderTitle eui-textBreakWord"
                                   >
                                     testTitle
                                   </h1>
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index c04d21131e5f..1310585eefea 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -1,9 +1,9 @@
 .context-nav-wrapper {
   border: none !important;
   border-top-right-radius: $euiSizeL;
-  border-bottom-right-radius: $euiSizeL;
   background-color: $euiSideNavBackgroundColor;
   overflow: hidden;
+  box-shadow: 1px 0 0 $euiBorderColor !important;
 
   .nav-link-item {
     padding: $euiSizeS;
@@ -114,4 +114,25 @@
     padding: 0 $euiSizeS;
     padding-left: $euiSize;
   }
+
+  .searchBar-wrapper {
+    padding: $euiSize;
+    padding-top: $euiSizeS;
+    background-color: transparent;
+    flex-grow: 0;
+
+    .searchInput {
+      background-color: transparentize($euiFormBackgroundColor, 0.5);
+    }
+
+    .searchInput:focus {
+      background-color: $euiFormBackgroundColor;
+    }
+  }
+
+  .searchBarIcon {
+    position: fixed;
+    top: $ouiHeaderChildSize;
+    left: 0;
+  }
 }
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
index 66257eb48d7b..b5adac4866d1 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -11,8 +11,8 @@ import useObservable from 'react-use/lib/useObservable';
 import * as Rx from 'rxjs';
 import classNames from 'classnames';
 import { WorkspacesStart } from 'src/core/public/workspace';
-import { ChromeNavControl, ChromeNavLink } from '../..';
 import { NavGroupType } from '../../../../types';
+import { ChromeNavControl, ChromeNavLink } from '../..';
 import { InternalApplicationStart } from '../../../application/types';
 import { HttpStart } from '../../../http';
 import { createEuiListItem } from './nav_link';
@@ -24,9 +24,11 @@ import {
 } from '../../nav_group';
 import { fulfillRegistrationLinksToChromeNavLinks, getVisibleUseCases, sortBy } from '../../utils';
 import { ALL_USE_CASE_ID, DEFAULT_APP_CATEGORIES } from '../../../../../core/utils';
+import { GlobalSearchCommand } from '../../global_search';
 import { CollapsibleNavTop } from './collapsible_nav_group_enabled_top';
 import { HeaderNavControls } from './header_nav_controls';
 import { NavGroups } from './collapsible_nav_groups';
+import { HeaderSearchBar, HeaderSearchBarIcon } from './header_search_bar';
 
 export interface CollapsibleNavGroupEnabledProps {
   appId$: InternalApplicationStart['currentAppId$'];
@@ -47,6 +49,7 @@ export interface CollapsibleNavGroupEnabledProps {
   setCurrentNavGroup: ChromeNavGroupServiceStartContract['setCurrentNavGroup'];
   capabilities: InternalApplicationStart['capabilities'];
   currentWorkspace$: WorkspacesStart['currentWorkspace$'];
+  globalSearchCommands?: GlobalSearchCommand[];
 }
 
 const titleForSeeAll = i18n.translate('core.ui.primaryNav.seeAllLabel', {
@@ -55,7 +58,7 @@ const titleForSeeAll = i18n.translate('core.ui.primaryNav.seeAllLabel', {
 
 enum NavWidth {
   Expanded = 270,
-  Collapsed = 48, // The Collasped width is supposed to be aligned with the hamburger icon on the top left navigation.
+  Collapsed = 48, // The Collapsed width is supposed to be aligned with the hamburger icon on the top left navigation.
 }
 
 export function CollapsibleNavGroupEnabled({
@@ -70,6 +73,7 @@ export function CollapsibleNavGroupEnabled({
   setCurrentNavGroup,
   capabilities,
   collapsibleNavHeaderRender,
+  globalSearchCommands,
   ...observables
 }: CollapsibleNavGroupEnabledProps) {
   const allNavLinks = useObservable(observables.navLinks$, []);
@@ -214,6 +218,24 @@ export function CollapsibleNavGroupEnabled({
             />
           </EuiPanel>
         )}
+        {!isNavOpen ? (
+          <div className="searchBarIcon euiHeaderSectionItemButton">
+            {globalSearchCommands && (
+              <HeaderSearchBarIcon globalSearchCommands={globalSearchCommands} />
+            )}
+          </div>
+        ) : (
+          <EuiPanel
+            hasBorder={false}
+            paddingSize="s"
+            hasShadow={false}
+            className="searchBar-wrapper"
+          >
+            {globalSearchCommands && (
+              <HeaderSearchBar globalSearchCommands={globalSearchCommands} />
+            )}
+          </EuiPanel>
+        )}
         {!isNavOpen ? null : (
           <EuiPanel
             hasBorder={false}
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
index 8a950ba87b84..628894864928 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx
@@ -19,7 +19,6 @@ import { InternalApplicationStart } from 'src/core/public/application';
 import { createEuiListItem } from './nav_link';
 import { NavGroupItemInMap } from '../../nav_group';
 import { ChromeNavLink } from '../../nav_links';
-
 export interface CollapsibleNavTopProps {
   collapsibleNavHeaderRender?: () => JSX.Element | null;
   homeLink?: ChromeNavLink;
diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss
index ed4608a605c5..f1d4e3eda91c 100644
--- a/src/core/public/chrome/ui/header/header.scss
+++ b/src/core/public/chrome/ui/header/header.scss
@@ -70,7 +70,7 @@
 }
 
 .newTopNavHeaderTitle {
-  line-height: 1;
+  line-height: $euiButtonHeightSmall; // match button size so title is centered
   font-size: 2rem;
 }
 
@@ -116,5 +116,36 @@
   .secondaryPageHeaderFlexGroup {
     display: flex;
     flex-direction: column;
+
+    // Override eui responsive spacing for header elements
+    // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+    .euiHeaderSection--left,
+    .euiHeaderSection--right {
+      // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+      .euiFlexGroup--responsive > .euiFlexItem {
+        margin: $euiSizeXS 0 !important; // set as !important in eui
+      }
+    }
+  }
+
+  // Add bottom margin to left group to counter-act negative margins from gutters
+  .leftSecondaryPageHeaderFlexGroup {
+    margin-bottom: $euiSizeXS;
+  }
+}
+
+// Make sure there's space betweeen left and right header content on non-mobile screens
+@include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
+  .leftSecondaryPageHeaderFlexGroup {
+    margin-right: $euiSizeM;
+  }
+}
+
+// Make badges/health statuses line-height match buttons so its vertically centered
+.leftSecondaryPageHeaderFlexGroup {
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  .euiBadge,
+  .euiHealth {
+    line-height: $euiButtonHeightSmall !important;
   }
 }
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index bb08a24305e6..dea3c8e3840d 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -81,6 +81,7 @@ import { HeaderLogo } from './header_logo';
 import { HeaderNavControls } from './header_nav_controls';
 import { HomeLoader } from './home_loader';
 import { RecentItems } from './recent_items';
+import { GlobalSearchCommand } from '../../global_search';
 
 export interface HeaderProps {
   http: HttpStart;
@@ -122,6 +123,7 @@ export interface HeaderProps {
   workspaceList$: Observable<WorkspaceObject[]>;
   currentWorkspace$: WorkspacesStart['currentWorkspace$'];
   useUpdatedHeader?: boolean;
+  globalSearchCommands?: GlobalSearchCommand[];
 }
 
 const hasValue = (value: any) => {
@@ -147,6 +149,7 @@ export function Header({
   navGroupEnabled,
   setCurrentNavGroup,
   useUpdatedHeader,
+  globalSearchCommands,
   ...observables
 }: HeaderProps) {
   const isVisible = useObservable(observables.isVisible$, false);
@@ -557,23 +560,27 @@ export function Header({
       <EuiHeader className="newTopNavHeader">
         <EuiFlexGroup
           justifyContent="spaceBetween"
-          gutterSize="s"
+          gutterSize="none"
           className="secondaryPageHeaderFlexGroup"
         >
           {/* Left Section */}
-          <EuiHeaderSection side="left">
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem>
+          <EuiHeaderSection side="left" grow={true} style={{ flexShrink: 1 }}>
+            <EuiFlexGroup gutterSize="s" className="leftSecondaryPageHeaderFlexGroup">
+              <EuiFlexItem grow={false}>
                 <EuiHeaderSectionItem border="none" data-test-subj="headerApplicationTitle">
                   <EuiTitle size="l" className="newTopNavHeaderTitle">
-                    {breadcrumbs && <h1>{breadcrumbs[breadcrumbs.length - 1]?.text}</h1>}
+                    {breadcrumbs && (
+                      <h1 className="eui-textBreakWord">
+                        {breadcrumbs[breadcrumbs.length - 1]?.text}
+                      </h1>
+                    )}
                   </EuiTitle>
                 </EuiHeaderSectionItem>
               </EuiFlexItem>
 
-              {badge && <EuiFlexItem>{badge}</EuiFlexItem>}
+              {badge && <EuiFlexItem grow={false}>{badge}</EuiFlexItem>}
 
-              {leftControls && <EuiFlexItem>{leftControls}</EuiFlexItem>}
+              {leftControls && <EuiFlexItem grow={false}>{leftControls}</EuiFlexItem>}
             </EuiFlexGroup>
           </EuiHeaderSection>
 
@@ -658,6 +665,7 @@ export function Header({
             setCurrentNavGroup={setCurrentNavGroup}
             capabilities={application.capabilities}
             currentWorkspace$={observables.currentWorkspace$}
+            globalSearchCommands={globalSearchCommands}
           />
         ) : (
           <CollapsibleNav
diff --git a/src/core/public/chrome/ui/header/header_search_bar.test.tsx b/src/core/public/chrome/ui/header/header_search_bar.test.tsx
new file mode 100644
index 000000000000..4762f85ba75c
--- /dev/null
+++ b/src/core/public/chrome/ui/header/header_search_bar.test.tsx
@@ -0,0 +1,220 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import { HeaderSearchBarIcon, HeaderSearchBar } from './header_search_bar';
+import { GlobalSearchCommand } from '../../global_search';
+import { EuiText } from '@elastic/eui';
+
+describe('<HeaderSearchBarIcon />', () => {
+  const searchFn = jest.fn().mockResolvedValue([]);
+  const searchFnBar = jest.fn().mockResolvedValue([]);
+  const globalSearchCommands: GlobalSearchCommand[] = [
+    {
+      id: 'foo',
+      type: 'PAGES',
+      run: searchFn,
+    },
+    {
+      id: 'bar',
+      type: 'PAGES',
+      run: searchFnBar,
+    },
+  ];
+
+  it('render HeaderSearchBarIcon correctly without search results', () => {
+    const { getByTestId, queryByText } = render(
+      <HeaderSearchBarIcon globalSearchCommands={globalSearchCommands} />
+    );
+    const searchIcon = getByTestId('globalSearch-leftNav-icon');
+    expect(searchIcon).toBeVisible();
+
+    fireEvent.click(searchIcon);
+
+    expect(getByTestId('search-input')).toBeVisible();
+
+    act(() => {
+      fireEvent.change(getByTestId('search-input'), {
+        target: { value: 'index' },
+      });
+    });
+
+    expect(searchFn).toHaveBeenCalled();
+
+    waitFor(() => {
+      expect(queryByText('No results found.')).toBeInTheDocument();
+    });
+  });
+
+  it('render HeaderSearchBarIcon correctly with search results', () => {
+    const { getByTestId, queryByText } = render(
+      <HeaderSearchBarIcon globalSearchCommands={globalSearchCommands} />
+    );
+    const searchIcon = getByTestId('globalSearch-leftNav-icon');
+    expect(searchIcon).toBeVisible();
+
+    fireEvent.click(searchIcon);
+
+    expect(getByTestId('search-input')).toBeVisible();
+
+    searchFn.mockResolvedValue([<EuiText>index page</EuiText>]);
+    act(() => {
+      fireEvent.change(getByTestId('search-input'), {
+        target: { value: 'index' },
+      });
+    });
+
+    expect(searchFn).toHaveBeenCalled();
+
+    waitFor(() => {
+      expect(queryByText('index page')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('<HeaderSearchBar />', () => {
+  const searchFn = jest.fn().mockResolvedValue([]);
+  const searchFnBar = jest.fn().mockResolvedValue([]);
+  const searchFnBaz = jest.fn().mockResolvedValue([]);
+  const globalSearchCommands: GlobalSearchCommand[] = [
+    {
+      id: 'foo',
+      type: 'PAGES',
+      run: searchFn,
+    },
+    {
+      id: 'bar',
+      type: 'PAGES',
+      run: searchFnBar,
+    },
+    {
+      id: 'baz',
+      type: 'SAVED_OBJECTS',
+      run: searchFnBaz,
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('render HeaderSearchBar with panel', () => {
+    const { getByTestId } = render(
+      <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
+    );
+    const searchPanel = getByTestId('search-result-panel');
+    expect(searchPanel).toBeVisible();
+  });
+
+  it('render HeaderSearchBar with search result', () => {
+    const { getByTestId, queryByText } = render(
+      <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
+    );
+    const searchPanel = getByTestId('search-result-panel');
+    expect(searchPanel).toBeVisible();
+
+    expect(getByTestId('search-input')).toBeVisible();
+
+    searchFn.mockResolvedValue([<EuiText>index page</EuiText>]);
+    searchFnBar.mockResolvedValue([<EuiText>index polices</EuiText>]);
+    act(() => {
+      fireEvent.change(getByTestId('search-input'), {
+        target: { value: 'index' },
+      });
+    });
+
+    expect(searchFn).toHaveBeenCalled();
+
+    // merge page results together
+    waitFor(() => {
+      expect(queryByText('index page')).toBeInTheDocument();
+      expect(queryByText('index polices')).toBeInTheDocument();
+    });
+  });
+
+  it('render HeaderSearchBar with reject search result', () => {
+    const { getByTestId, queryByText } = render(
+      <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
+    );
+    const searchPanel = getByTestId('search-result-panel');
+    expect(searchPanel).toBeVisible();
+
+    expect(getByTestId('search-input')).toBeVisible();
+
+    searchFn.mockResolvedValue([<EuiText>index page</EuiText>]);
+    searchFnBar.mockRejectedValue(new Error('Async search error'));
+
+    act(() => {
+      fireEvent.change(getByTestId('search-input'), {
+        target: { value: 'index' },
+      });
+    });
+
+    expect(searchFn).toHaveBeenCalled();
+
+    // ignore reject and show pages for success search≠
+    waitFor(() => {
+      expect(queryByText('index page')).toBeInTheDocument();
+    });
+  });
+
+  it('render HeaderSearchBar with all reject search result', () => {
+    const { getByTestId, queryByText } = render(
+      <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
+    );
+    const searchPanel = getByTestId('search-result-panel');
+    expect(searchPanel).toBeVisible();
+
+    expect(getByTestId('search-input')).toBeVisible();
+
+    searchFnBar.mockRejectedValue(new Error('Async search error'));
+    searchFn.mockRejectedValue(new Error('Async search error'));
+
+    act(() => {
+      fireEvent.change(getByTestId('search-input'), {
+        target: { value: 'index' },
+      });
+    });
+
+    expect(searchFn).toHaveBeenCalled();
+
+    // show no result for all reject search
+    waitFor(() => {
+      expect(queryByText('No results found.')).toBeInTheDocument();
+    });
+  });
+
+  it('render HeaderSearchBar with search saved objects', () => {
+    const { getByTestId, queryByText } = render(
+      <HeaderSearchBar globalSearchCommands={globalSearchCommands} panel />
+    );
+    const searchPanel = getByTestId('search-result-panel');
+    expect(searchPanel).toBeVisible();
+
+    expect(getByTestId('search-input')).toBeVisible();
+
+    searchFnBaz.mockResolvedValue([<div>saved objects</div>]);
+
+    act(() => {
+      fireEvent.change(getByTestId('search-input'), {
+        target: { value: '@index' },
+      });
+    });
+
+    // pages search command will not been invoked
+    globalSearchCommands.forEach((command) => {
+      if (command.type === 'SAVED_OBJECTS') {
+        expect(command.run).toHaveBeenCalled();
+      } else {
+        expect(command.run).not.toHaveBeenCalled();
+      }
+    });
+
+    waitFor(() => {
+      expect(queryByText('saved objects')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/core/public/chrome/ui/header/header_search_bar.tsx b/src/core/public/chrome/ui/header/header_search_bar.tsx
new file mode 100644
index 000000000000..023b5c19566b
--- /dev/null
+++ b/src/core/public/chrome/ui/header/header_search_bar.tsx
@@ -0,0 +1,249 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButtonIcon,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiPanel,
+  EuiPopover,
+  EuiText,
+  EuiTitle,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { ReactNode, useRef, useState } from 'react';
+import { i18n } from '@osd/i18n';
+import {
+  GlobalSearchCommand,
+  SearchCommandKeyTypes,
+  SearchCommandTypes,
+} from '../../global_search';
+
+interface Props {
+  globalSearchCommands: GlobalSearchCommand[];
+  panel?: boolean;
+  onSearchResultClick?: () => void;
+}
+
+export const HeaderSearchBarIcon = ({ globalSearchCommands }: Props) => {
+  const [isSearchPopoverOpen, setIsSearchPopoverOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  return (
+    <EuiPopover
+      panelPaddingSize="s"
+      anchorPosition="downCenter"
+      repositionOnScroll={true}
+      isOpen={isSearchPopoverOpen}
+      closePopover={() => {
+        setIsSearchPopoverOpen(false);
+      }}
+      button={
+        <EuiToolTip
+          content={i18n.translate('core.globalSearch.icon.toolTip', {
+            defaultMessage: 'Search',
+          })}
+        >
+          <EuiButtonIcon
+            aria-label="search"
+            iconType="search"
+            color="text"
+            buttonRef={buttonRef}
+            data-test-subj="globalSearch-leftNav-icon"
+            onClick={() => {
+              setIsSearchPopoverOpen(!isSearchPopoverOpen);
+              // remove focus from the button to dismiss the tooltip
+              buttonRef.current?.blur();
+            }}
+          />
+        </EuiToolTip>
+      }
+    >
+      <EuiPanel
+        hasBorder={false}
+        hasShadow={false}
+        paddingSize="none"
+        style={{ minHeight: '300px', minWidth: '400px' }}
+      >
+        <HeaderSearchBar
+          globalSearchCommands={globalSearchCommands}
+          panel
+          onSearchResultClick={() => {
+            setIsSearchPopoverOpen(false);
+            buttonRef.current?.blur();
+          }}
+        />
+      </EuiPanel>
+    </EuiPopover>
+  );
+};
+
+export const HeaderSearchBar = ({ globalSearchCommands, panel, onSearchResultClick }: Props) => {
+  const [results, setResults] = useState([] as React.JSX.Element[]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [panelWidth, setPanelWidth] = useState(0);
+  const inputElRef = useRef<HTMLElement | null>();
+  const inputRef = (node: HTMLElement | null) => (inputElRef.current = node);
+
+  const closePopover = () => {
+    setIsPopoverOpen(false);
+  };
+
+  const resultSection = (items: ReactNode[], sectionHeader: string) => {
+    return (
+      <EuiFlexGroup direction="column" gutterSize="xs">
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <EuiText size="xs" color="subdued">
+              {sectionHeader}
+            </EuiText>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          {items.length ? (
+            <EuiListGroup flush={true} gutterSize="none" maxWidth={false}>
+              {items.map((item, index) => (
+                <EuiListGroupItem key={index} label={item} size="s" />
+              ))}
+            </EuiListGroup>
+          ) : (
+            <EuiText color="subdued" size="xs">
+              {i18n.translate('core.globalSearch.emptyResult.description', {
+                defaultMessage: 'No results found.',
+              })}
+            </EuiText>
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const searchResultSections = results && (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      {results.map((result) => (
+        <EuiFlexItem key={result.key}>{result}</EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+
+  const onSearch = async (value: string) => {
+    const filteredCommands = globalSearchCommands.filter((command) => {
+      const alias = SearchCommandTypes[command.type].alias;
+      return alias && value.startsWith(alias);
+    });
+
+    const defaultSearchCommands = globalSearchCommands.filter((command) => {
+      return !SearchCommandTypes[command.type].alias;
+    });
+
+    if (filteredCommands.length === 0) {
+      filteredCommands.push(...defaultSearchCommands);
+    }
+
+    if (value && filteredCommands && filteredCommands.length) {
+      setIsPopoverOpen(true);
+      setIsLoading(true);
+
+      const settleResults = await Promise.allSettled(
+        filteredCommands.map((command) => {
+          const callback = onSearchResultClick || closePopover;
+          const alias = SearchCommandTypes[command.type].alias;
+          const queryValue = alias ? value.replace(alias, '').trim() : value;
+          return command.run(queryValue, callback).then((items) => {
+            return { items, type: command.type };
+          });
+        })
+      );
+
+      const searchResults = settleResults
+        .filter((result) => result.status === 'fulfilled')
+        .map(
+          (result) =>
+            (result as PromiseFulfilledResult<{
+              items: ReactNode[];
+              type: SearchCommandKeyTypes;
+            }>).value
+        )
+        .reduce((acc, { items, type }) => {
+          return {
+            ...acc,
+            [type]: (acc[type] || []).concat(items),
+          };
+        }, {} as Record<SearchCommandKeyTypes, ReactNode[]>);
+
+      const sections = Object.entries(searchResults).map(([key, items]) => {
+        const sectionHeader = SearchCommandTypes[key as SearchCommandKeyTypes].description;
+        return resultSection(items, sectionHeader);
+      });
+
+      setIsLoading(false);
+      setResults(sections);
+    } else {
+      setIsPopoverOpen(false);
+      setResults([]);
+    }
+  };
+
+  const searchBar = (
+    <EuiFieldSearch
+      compressed
+      incremental
+      onSearch={onSearch}
+      fullWidth
+      placeholder={i18n.translate('core.globalSearch.input.placeholder', {
+        defaultMessage: 'Search the menu',
+      })}
+      isLoading={isLoading}
+      aria-label="Search the menus"
+      data-test-subj="search-input"
+      className="searchInput"
+      onFocus={() => {
+        const inputEl = inputElRef.current;
+        if (inputEl) {
+          const width = inputEl.getBoundingClientRect().width;
+          setPanelWidth(width);
+        }
+      }}
+    />
+  );
+
+  if (panel) {
+    return (
+      <EuiPanel
+        hasBorder={false}
+        hasShadow={false}
+        paddingSize="s"
+        data-test-subj="search-result-panel"
+      >
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiFlexItem>{searchBar}</EuiFlexItem>
+          <EuiFlexItem>{searchResultSections}</EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    );
+  } else {
+    return (
+      <EuiPopover
+        button={searchBar}
+        buttonRef={inputRef}
+        panelStyle={{ minWidth: panelWidth }}
+        zIndex={2000}
+        panelPaddingSize="s"
+        attachToAnchor={true}
+        ownFocus={false}
+        display="block"
+        isOpen={isPopoverOpen}
+        closePopover={() => {
+          setIsPopoverOpen(false);
+        }}
+      >
+        {searchResultSections}
+      </EuiPopover>
+    );
+  }
+};
diff --git a/src/core/public/chrome/ui/header/recent_items.tsx b/src/core/public/chrome/ui/header/recent_items.tsx
index ee0554ece08d..7efd276b8fa9 100644
--- a/src/core/public/chrome/ui/header/recent_items.tsx
+++ b/src/core/public/chrome/ui/header/recent_items.tsx
@@ -276,7 +276,11 @@ export const RecentItems = ({
         style={{ maxHeight: '35vh', overflow: 'auto' }}
       >
         <EuiTitle size="xxs">
-          <h4>Recent</h4>
+          <h4>
+            {i18n.translate('core.header.recent.title', {
+              defaultMessage: 'Recent assets',
+            })}
+          </h4>
         </EuiTitle>
         <EuiSpacer size="s" />
         {selectedRecentsItems.length > 0 ? (
diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
index 4713bfa7d3cb..3a08e3b239b3 100644
--- a/src/core/public/doc_links/doc_links_service.ts
+++ b/src/core/public/doc_links/doc_links_service.ts
@@ -620,6 +620,18 @@ export class DocLinksService {
             // https://opensearch.org/docs/latest/api-reference/snapshots/verify-snapshot-repository/
             veirfyRepository: `${OPENSEARCH_WEBSITE_DOCS}/api-reference/snapshots/verify-snapshot-repository/`,
           },
+          lucene: {
+            // https://opensearch.org/docs/latest/query-dsl/full-text/query-string/
+            base: `${OPENSEARCH_WEBSITE_DOCS}/query-dsl/full-text/query-string/`,
+          },
+          ppl: {
+            // https://opensearch.org/docs/latest/search-plugins/sql/ppl/syntax/
+            base: `${OPENSEARCH_WEBSITE_DOCS}/search-plugins/sql/ppl/syntax/`,
+          },
+          sql: {
+            // https://opensearch.org/docs/latest/search-plugins/sql/sql/basic/
+            base: `${OPENSEARCH_WEBSITE_DOCS}/search-plugins/sql/sql/basic/`,
+          },
         },
       },
     });
@@ -962,6 +974,15 @@ export interface DocLinksStart {
         readonly cleanup: string;
         readonly veirfyRepository: string;
       };
+      readonly lucene: {
+        readonly base: string;
+      };
+      readonly sql: {
+        readonly base: string;
+      };
+      readonly ppl: {
+        readonly base: string;
+      };
     };
   };
 }
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index 0f177f672837..45fffa57ebe3 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -80,6 +80,7 @@ import {
   HeaderVariant,
   LinkItemType,
   getSortedNavLinks,
+  SearchCommandKeyTypes,
 } from './chrome';
 import { FatalErrorsSetup, FatalErrorsStart, FatalErrorInfo } from './fatal_errors';
 import { HttpSetup, HttpStart } from './http';
@@ -394,6 +395,7 @@ export {
   HeaderVariant,
   LinkItemType,
   getSortedNavLinks,
+  SearchCommandKeyTypes,
 };
 
 export { __osdBootstrap__ } from './osd_bootstrap';
@@ -404,6 +406,7 @@ export {
   WorkspacesService,
   WorkspaceObject,
   IWorkspaceClient,
+  IWorkspaceResponse,
 } from './workspace';
 
 export { debounce } from './utils';
diff --git a/src/core/public/locale_helper.test.ts b/src/core/public/locale_helper.test.ts
deleted file mode 100644
index 238dbced3892..000000000000
--- a/src/core/public/locale_helper.test.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { getLocaleInUrl } from './locale_helper';
-
-describe('getLocaleInUrl', () => {
-  beforeEach(() => {
-    // Clear any warnings before each test
-    delete (window as any).__localeWarning;
-  });
-
-  it('should return the locale from a valid query string', () => {
-    const url = 'http://localhost:5603/app/home?locale=en-US';
-    expect(getLocaleInUrl(url)).toBe('en-US');
-  });
-
-  it('should return the locale from a valid hash query string', () => {
-    const url = 'http://localhost:5603/app/home#/?locale=fr-FR';
-    expect(getLocaleInUrl(url)).toBe('fr-FR');
-  });
-
-  it('should return en for a URL without locale', () => {
-    const url = 'http://localhost:5603/app/home';
-    expect(getLocaleInUrl(url)).toBe('en');
-  });
-
-  it('should return en and set a warning for an invalid locale format in hash', () => {
-    const url = 'http://localhost:5603/app/home#/&locale=de-DE';
-    expect(getLocaleInUrl(url)).toBe('en');
-    expect((window as any).__localeWarning).toBeDefined();
-    expect((window as any).__localeWarning.title).toBe('Invalid URL Format');
-  });
-
-  it('should return en for an empty locale value', () => {
-    const url = 'http://localhost:5603/app/home?locale=';
-    expect(getLocaleInUrl(url)).toBe('en');
-  });
-
-  it('should handle URLs with other query parameters', () => {
-    const url = 'http://localhost:5603/app/home?param1=value1&locale=ja-JP&param2=value2';
-    expect(getLocaleInUrl(url)).toBe('ja-JP');
-  });
-
-  it('should handle URLs with other hash parameters', () => {
-    const url = 'http://localhost:5603/app/home#/route?param1=value1&locale=zh-CN&param2=value2';
-    expect(getLocaleInUrl(url)).toBe('zh-CN');
-  });
-});
diff --git a/src/core/public/locale_helper.ts b/src/core/public/locale_helper.ts
deleted file mode 100644
index 38a734a523b1..000000000000
--- a/src/core/public/locale_helper.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * Extracts the locale value from a given URL.
- *
- * This function looks for the 'locale' parameter in either the main query string
- * or in the hash part of the URL. It supports two valid formats:
- * 1. As a regular query parameter: "?locale=xx-XX"
- * 2. In the hash with a proper query string: "#/?locale=xx-XX"
- *
- * If an invalid format is detected, it sets a warning message on the window object.
- *
- * @param url - The URL to extract the locale from
- * @returns The locale value if found and valid, or null otherwise
- */
-export function getLocaleInUrl(url: string): string | null {
-  let urlObject: URL;
-  // Attempt to parse the URL, return null if invalid
-  try {
-    urlObject = new URL(url, window.location.origin);
-  } catch (error) {
-    setInvalidUrlWarning();
-    return null;
-  }
-
-  let localeValue: string | null = null;
-
-  // Check for locale in the main query string
-  if (urlObject.searchParams.has('locale')) {
-    localeValue = urlObject.searchParams.get('locale');
-  }
-  // Check for locale in the hash, but only if it's in proper query string format
-  else if (urlObject.hash.includes('?')) {
-    const hashParams = new URLSearchParams(urlObject.hash.split('?')[1]);
-    if (hashParams.has('locale')) {
-      localeValue = hashParams.get('locale');
-    }
-  }
-
-  // Check for non standard query format:
-  if (localeValue === null && url.includes('&locale=')) {
-    setInvalidUrlWithLocaleWarning();
-    return 'en';
-  }
-
-  // Return the locale value if found, or 'en' if not found
-  return localeValue && localeValue.trim() !== '' ? localeValue : 'en';
-}
-
-function setInvalidUrlWarning(): void {
-  (window as any).__localeWarning = {
-    title: 'Invalid URL Format',
-    text: 'The provided URL is not in a valid format.',
-  };
-}
-
-function setInvalidUrlWithLocaleWarning(): void {
-  (window as any).__localeWarning = {
-    title: 'Invalid URL Format',
-    text:
-      'The locale parameter is not in a valid URL format. ' +
-      'Use either "?locale=xx-XX" in the main URL or "#/?locale=xx-XX" in the hash. ' +
-      'For example: "yourapp.com/page?locale=en-US" or "yourapp.com/page#/?locale=en-US".',
-  };
-}
diff --git a/src/core/public/osd_bootstrap.test.ts b/src/core/public/osd_bootstrap.test.ts
index 7630b4441ab6..b51d05dd9312 100644
--- a/src/core/public/osd_bootstrap.test.ts
+++ b/src/core/public/osd_bootstrap.test.ts
@@ -28,23 +28,10 @@
  * under the License.
  */
 
-import {
-  apmSystem,
-  fatalErrorMock,
-  i18nLoad,
-  i18nSetLocale,
-  consoleWarnMock,
-} from './osd_bootstrap.test.mocks';
+import { apmSystem, fatalErrorMock, i18nLoad } from './osd_bootstrap.test.mocks';
 import { __osdBootstrap__ } from './';
-import { getLocaleInUrl } from './locale_helper';
-
-jest.mock('./locale_helper', () => ({
-  getLocaleInUrl: jest.fn(),
-}));
 
 describe('osd_bootstrap', () => {
-  let originalWindowLocation: Location;
-
   beforeAll(() => {
     const metadata = {
       branding: { darkMode: 'true' },
@@ -52,22 +39,12 @@ describe('osd_bootstrap', () => {
       vars: { apmConfig: null },
     };
     // eslint-disable-next-line no-unsanitized/property
-    document.body.innerHTML = `<osd-injected-metadata data=${JSON.stringify(
-      metadata
-    )}> </osd-injected-metadata>`;
-
-    originalWindowLocation = window.location;
-    delete (window as any).location;
-    window.location = { ...originalWindowLocation, href: 'http://localhost' };
+    document.body.innerHTML = `<osd-injected-metadata data=${JSON.stringify(metadata)}>
+</osd-injected-metadata>`;
   });
 
   beforeEach(() => {
     jest.clearAllMocks();
-    (getLocaleInUrl as jest.Mock).mockReturnValue(null);
-  });
-
-  afterAll(() => {
-    window.location = originalWindowLocation;
   });
 
   it('does not report a fatal error if apm load fails', async () => {
@@ -87,39 +64,4 @@ describe('osd_bootstrap', () => {
 
     expect(fatalErrorMock.add).toHaveBeenCalledTimes(1);
   });
-
-  it('sets locale from URL if present', async () => {
-    (getLocaleInUrl as jest.Mock).mockReturnValue('fr');
-    window.location.href = 'http://localhost/?locale=fr';
-
-    await __osdBootstrap__();
-
-    expect(i18nSetLocale).toHaveBeenCalledWith('fr');
-    expect(i18nLoad).toHaveBeenCalledWith('http://localhost/translations/fr.json');
-  });
-
-  it('sets default locale if not present in URL', async () => {
-    await __osdBootstrap__();
-
-    expect(i18nSetLocale).toHaveBeenCalledWith('en');
-    expect(i18nLoad).toHaveBeenCalledWith('http://localhost/translations/en.json');
-  });
-
-  it('displays locale warning if set', async () => {
-    (window as any).__localeWarning = { title: 'Locale Warning', text: 'Invalid locale' };
-
-    await __osdBootstrap__();
-
-    expect(consoleWarnMock).toHaveBeenCalledWith('Locale Warning: Invalid locale');
-    expect((window as any).__localeWarning).toBeUndefined();
-  });
-
-  it('displays i18n warning if set', async () => {
-    (window as any).__i18nWarning = { title: 'i18n Warning', text: 'Translation issue' };
-
-    await __osdBootstrap__();
-
-    expect(consoleWarnMock).toHaveBeenCalledWith('i18n Warning: Translation issue');
-    expect((window as any).__i18nWarning).toBeUndefined();
-  });
 });
diff --git a/src/core/public/osd_bootstrap.ts b/src/core/public/osd_bootstrap.ts
index 5190fdc37e21..2c614b279891 100644
--- a/src/core/public/osd_bootstrap.ts
+++ b/src/core/public/osd_bootstrap.ts
@@ -31,7 +31,6 @@
 import { i18n } from '@osd/i18n';
 import { CoreSystem } from './core_system';
 import { ApmSystem } from './apm_system';
-import { getLocaleInUrl } from './locale_helper';
 
 /** @internal */
 export async function __osdBootstrap__() {
@@ -39,33 +38,6 @@ export async function __osdBootstrap__() {
     document.querySelector('osd-injected-metadata')!.getAttribute('data')!
   );
 
-  // Extract the locale from the URL if present
-  const currentLocale = i18n.getLocale();
-  const urlLocale = getLocaleInUrl(window.location.href);
-
-  if (urlLocale && urlLocale !== currentLocale) {
-    // If a locale is specified in the URL, update the i18n settings
-    // This enables dynamic language switching
-    // Note: This works in conjunction with server-side changes:
-    // 1. The server registers all available translation files at startup
-    // 2. A server route handles requests for specific locale translations
-
-    // Set the locale in the i18n core
-    // This will affect all subsequent i18n.translate() calls
-    i18n.setLocale(urlLocale);
-
-    // Modify the translationsUrl to include the new locale
-    // This ensures that the correct translation file is requested from the server
-    // The replace function changes the locale in the URL, e.g.,
-    // from '/translations/en.json' to '/translations/zh-CN.json'
-    injectedMetadata.i18n.translationsUrl = injectedMetadata.i18n.translationsUrl.replace(
-      /\/([^/]+)\.json$/,
-      `/${urlLocale}.json`
-    );
-  } else if (!urlLocale) {
-    i18n.setLocale('en');
-  }
-
   const globals: any = typeof window === 'undefined' ? {} : window;
   const themeTag: string = globals.__osdThemeTag__ || '';
 
diff --git a/src/core/public/workspace/index.ts b/src/core/public/workspace/index.ts
index a605aff02fb1..59e3bb286e61 100644
--- a/src/core/public/workspace/index.ts
+++ b/src/core/public/workspace/index.ts
@@ -3,10 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export {
-  WorkspacesStart,
-  WorkspacesService,
-  WorkspacesSetup,
-  WorkspaceObject,
-  IWorkspaceClient,
-} from './workspaces_service';
+export { WorkspacesStart, WorkspacesService, WorkspacesSetup } from './workspaces_service';
+
+export { IWorkspaceClient, IWorkspaceResponse, WorkspaceObject } from './types';
diff --git a/src/core/public/workspace/types.ts b/src/core/public/workspace/types.ts
new file mode 100644
index 000000000000..fbb26287914b
--- /dev/null
+++ b/src/core/public/workspace/types.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { WorkspaceAttribute } from '../../types';
+
+export type WorkspaceObject = WorkspaceAttribute & { readonly?: boolean };
+
+export type IWorkspaceResponse<T> =
+  | {
+      result: T;
+      success: true;
+    }
+  | {
+      success: false;
+      error?: string;
+    };
+
+export interface AssociationResult {
+  id: string;
+  error?: string;
+}
+
+/**
+ * This interface representing a client for managing workspace-related operations.
+ * Workspace client should implement this interface.
+ *
+ * TODO: Refactor the current workspace client implementation in workspace plugin to add the missing operations to this interface
+ */
+export interface IWorkspaceClient {
+  /**
+   * copy saved objects to target workspace
+   *
+   * @param {Array<{ id: string; type: string }>} objects
+   * @param {string} targetWorkspace
+   * @param {boolean} includeReferencesDeep
+   * @returns {Promise<IResponse<any>>} result for this operation
+   */
+  copy(objects: any[], targetWorkspace: string, includeReferencesDeep?: boolean): Promise<any>;
+
+  /**
+   * Associates a list of objects with the given workspace ID.
+   *
+   * This method takes a workspace ID and an array of objects, where each object contains
+   * an `id` and `type`. It attempts to associate each object with the specified workspace.
+   * If the association succeeds, the object is included in the result without an error.
+   * If there is an issue associating an object, an error message is returned for that object.
+   *
+   * @returns A promise that resolves to a response object containing an array of results for each object.
+   *          Each result will include the object's `id` and, if there was an error during association, an `error` field
+   *          with the error message.
+   */
+  associate(
+    savedObjects: Array<{ id: string; type: string }>,
+    workspaceId: string
+  ): Promise<IWorkspaceResponse<AssociationResult[]>>;
+
+  /**
+   * Dissociates a list of objects from the given workspace ID.
+   *
+   * This method takes a workspace ID and an array of objects, where each object contains
+   * an `id` and `type`. It attempts to dissociate each object from the specified workspace.
+   * If the dissociation succeeds, the object is included in the result without an error.
+   * If there is an issue dissociating an object, an error message is returned for that object.
+   *
+   * @returns A promise that resolves to a response object containing an array of results for each object.
+   *          Each result will include the object's `id` and, if there was an error during dissociation, an `error` field
+   *          with the error message.
+   */
+  dissociate(
+    savedObjects: Array<{ id: string; type: string }>,
+    workspaceId: string
+  ): Promise<IWorkspaceResponse<AssociationResult[]>>;
+
+  ui(): WorkspaceUI;
+}
+
+interface DataSourceAssociationProps {
+  excludedDataSourceIds: string[];
+  onComplete?: () => void;
+  onError?: () => void;
+}
+
+export interface WorkspaceUI {
+  DataSourceAssociation: (props: DataSourceAssociationProps) => JSX.Element;
+}
diff --git a/src/core/public/workspace/workspaces_service.mock.ts b/src/core/public/workspace/workspaces_service.mock.ts
index ae0f4deb1d68..3645e5616d01 100644
--- a/src/core/public/workspace/workspaces_service.mock.ts
+++ b/src/core/public/workspace/workspaces_service.mock.ts
@@ -6,7 +6,8 @@
 import { BehaviorSubject } from 'rxjs';
 import type { PublicMethodsOf } from '@osd/utility-types';
 
-import { WorkspacesService, WorkspaceObject, IWorkspaceClient } from './workspaces_service';
+import { IWorkspaceClient, WorkspaceObject } from './types';
+import { WorkspacesService } from './workspaces_service';
 
 const createWorkspacesSetupContractMock = () => {
   const currentWorkspaceId$ = new BehaviorSubject<string>('');
diff --git a/src/core/public/workspace/workspaces_service.test.ts b/src/core/public/workspace/workspaces_service.test.ts
index 076100c8f558..609b1891c3a8 100644
--- a/src/core/public/workspace/workspaces_service.test.ts
+++ b/src/core/public/workspace/workspaces_service.test.ts
@@ -3,12 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  WorkspacesService,
-  WorkspacesSetup,
-  WorkspacesStart,
-  IWorkspaceClient,
-} from './workspaces_service';
+import { IWorkspaceClient } from './types';
+import { WorkspacesService, WorkspacesSetup, WorkspacesStart } from './workspaces_service';
 
 describe('WorkspacesService', () => {
   let workspaces: WorkspacesService;
@@ -43,7 +39,12 @@ describe('WorkspacesService', () => {
   });
 
   it('client is updated when set client', () => {
-    const client: IWorkspaceClient = { copy: jest.fn() };
+    const client: IWorkspaceClient = {
+      copy: jest.fn(),
+      associate: jest.fn(),
+      dissociate: jest.fn(),
+      ui: jest.fn(),
+    };
     workspacesSetUp.setClient(client);
     expect(workspacesStart.client$.value).toEqual(client);
   });
diff --git a/src/core/public/workspace/workspaces_service.ts b/src/core/public/workspace/workspaces_service.ts
index 6f934c294eba..70b17896264f 100644
--- a/src/core/public/workspace/workspaces_service.ts
+++ b/src/core/public/workspace/workspaces_service.ts
@@ -6,13 +6,8 @@
 import { BehaviorSubject, combineLatest } from 'rxjs';
 import { isEqual } from 'lodash';
 
-import { CoreService, WorkspaceAttribute } from '../../types';
-
-export type WorkspaceObject = WorkspaceAttribute & { readonly?: boolean };
-
-export interface IWorkspaceClient {
-  copy(objects: any[], targetWorkspace: string, includeReferencesDeep?: boolean): Promise<any>;
-}
+import { CoreService } from '../../types';
+import { IWorkspaceClient, WorkspaceObject } from './types';
 
 interface WorkspaceObservables {
   /**
diff --git a/src/core/server/index.ts b/src/core/server/index.ts
index 26dd30b8c6c4..984318556b4e 100644
--- a/src/core/server/index.ts
+++ b/src/core/server/index.ts
@@ -93,6 +93,7 @@ import {
   CoreEnvironmentUsageData,
   CoreServicesUsageData,
 } from './core_usage_data';
+import { WorkspaceSetup, WorkspaceStart } from './workspace';
 
 export { CoreUsageData, CoreConfigUsageData, CoreEnvironmentUsageData, CoreServicesUsageData };
 
@@ -480,6 +481,8 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
   auditTrail: AuditTrailSetup;
   /** {@link DynamicConfigServiceSetup} */
   dynamicConfigService: DynamicConfigServiceSetup;
+  /** {@link WorkspaceSetup} */
+  workspace: WorkspaceSetup;
 }
 
 /**
@@ -521,6 +524,8 @@ export interface CoreStart {
   crossCompatibility: CrossCompatibilityServiceStart;
   /** {@link DynamicConfigServiceStart} */
   dynamicConfig: DynamicConfigServiceStart;
+  /** {@link WorkspaceStart} */
+  workspace: WorkspaceStart;
 }
 
 export {
diff --git a/src/core/server/internal_types.ts b/src/core/server/internal_types.ts
index 571dc3ad6ca0..cde87134acf4 100644
--- a/src/core/server/internal_types.ts
+++ b/src/core/server/internal_types.ts
@@ -54,6 +54,7 @@ import { InternalLoggingServiceSetup } from './logging';
 import { CoreUsageDataStart } from './core_usage_data';
 import { InternalSecurityServiceSetup } from './security/types';
 import { CrossCompatibilityServiceStart } from './cross_compatibility';
+import { InternalWorkspaceServiceSetup, InternalWorkspaceServiceStart } from './workspace';
 
 /** @internal */
 export interface InternalCoreSetup {
@@ -72,6 +73,7 @@ export interface InternalCoreSetup {
   metrics: InternalMetricsServiceSetup;
   security: InternalSecurityServiceSetup;
   dynamicConfig: InternalDynamicConfigServiceSetup;
+  workspace: InternalWorkspaceServiceSetup;
 }
 
 /**
@@ -88,6 +90,7 @@ export interface InternalCoreStart {
   coreUsageData: CoreUsageDataStart;
   crossCompatibility: CrossCompatibilityServiceStart;
   dynamicConfig: InternalDynamicConfigServiceStart;
+  workspace: InternalWorkspaceServiceStart;
 }
 
 /**
diff --git a/src/core/server/legacy/legacy_service.test.ts b/src/core/server/legacy/legacy_service.test.ts
index 7fc8729264ce..4e9fe85269cd 100644
--- a/src/core/server/legacy/legacy_service.test.ts
+++ b/src/core/server/legacy/legacy_service.test.ts
@@ -63,6 +63,7 @@ import { auditTrailServiceMock } from '../audit_trail/audit_trail_service.mock';
 import { loggingServiceMock } from '../logging/logging_service.mock';
 import { metricsServiceMock } from '../metrics/metrics_service.mock';
 import { securityServiceMock } from '../security/security_service.mock';
+import { workspaceServiceMock } from '../workspace/mocks';
 
 const MockOsdServer: jest.Mock<OsdServer> = OsdServer as any;
 
@@ -114,6 +115,7 @@ beforeEach(() => {
       metrics: metricsServiceMock.createInternalSetupContract(),
       security: securityServiceMock.createSetupContract(),
       dynamicConfig: dynamicConfigServiceMock.createInternalSetupContract(),
+      workspace: workspaceServiceMock.createInternalSetupContract(),
     },
     plugins: { 'plugin-id': 'plugin-value' },
     uiPlugins: {
diff --git a/src/core/server/legacy/legacy_service.ts b/src/core/server/legacy/legacy_service.ts
index 1dd9be84a663..60c3e628b4ed 100644
--- a/src/core/server/legacy/legacy_service.ts
+++ b/src/core/server/legacy/legacy_service.ts
@@ -239,6 +239,7 @@ export class LegacyService implements CoreService {
         getAsyncLocalStore: startDeps.core.dynamicConfig.getAsyncLocalStore,
         createStoreFromRequest: startDeps.core.dynamicConfig.createStoreFromRequest,
       },
+      workspace: startDeps.core.workspace,
     };
 
     const router = setupDeps.core.http.createRouter('', this.legacyId);
@@ -308,6 +309,7 @@ export class LegacyService implements CoreService {
       auditTrail: setupDeps.core.auditTrail,
       getStartServices: () => Promise.resolve([coreStart, startDeps.plugins, {}]),
       security: setupDeps.core.security,
+      workspace: setupDeps.core.workspace,
     };
 
     // eslint-disable-next-line @typescript-eslint/no-var-requires
diff --git a/src/core/server/mocks.ts b/src/core/server/mocks.ts
index 823e778b469e..37d90bcfa93f 100644
--- a/src/core/server/mocks.ts
+++ b/src/core/server/mocks.ts
@@ -53,6 +53,7 @@ import { coreUsageDataServiceMock } from './core_usage_data/core_usage_data_serv
 import { securityServiceMock } from './security/security_service.mock';
 import { crossCompatibilityServiceMock } from './cross_compatibility/cross_compatibility.mock';
 import { dynamicConfigServiceMock } from './config/dynamic_config_service.mock';
+import { workspaceServiceMock } from './workspace/mocks';
 
 export { configServiceMock } from './config/mocks';
 export { dynamicConfigServiceMock } from './config/mocks';
@@ -170,6 +171,7 @@ function createCoreSetupMock({
       .mockResolvedValue([createCoreStartMock(), pluginStartDeps, pluginStartContract]),
     security: securityServiceMock.createSetupContract(),
     dynamicConfigService: dynamicConfigServiceMock.createSetupContract(),
+    workspace: workspaceServiceMock.createSetupContract(),
   };
 
   return mock;
@@ -187,6 +189,7 @@ function createCoreStartMock() {
     coreUsageData: coreUsageDataServiceMock.createStartContract(),
     crossCompatibility: crossCompatibilityServiceMock.createStartContract(),
     dynamicConfig: dynamicConfigServiceMock.createStartContract(),
+    workspace: workspaceServiceMock.createStartContract(),
   };
 
   return mock;
@@ -209,6 +212,7 @@ function createInternalCoreSetupMock() {
     metrics: metricsServiceMock.createInternalSetupContract(),
     security: securityServiceMock.createSetupContract(),
     dynamicConfig: dynamicConfigServiceMock.createInternalSetupContract(),
+    workspace: workspaceServiceMock.createInternalSetupContract(),
   };
   return setupDeps;
 }
@@ -225,6 +229,7 @@ function createInternalCoreStartMock() {
     coreUsageData: coreUsageDataServiceMock.createStartContract(),
     crossCompatibility: crossCompatibilityServiceMock.createStartContract(),
     dynamicConfig: dynamicConfigServiceMock.createInternalStartContract(),
+    workspace: workspaceServiceMock.createInternalStartContract(),
   };
   return startDeps;
 }
diff --git a/src/core/server/plugins/plugin_context.ts b/src/core/server/plugins/plugin_context.ts
index d9e79ec51a2b..28b7ec6337cf 100644
--- a/src/core/server/plugins/plugin_context.ts
+++ b/src/core/server/plugins/plugin_context.ts
@@ -226,6 +226,7 @@ export function createPluginSetupContext<TPlugin, TPluginDependencies>(
       registerAsyncLocalStoreRequestHeader: deps.dynamicConfig.registerAsyncLocalStoreRequestHeader,
       getStartService: deps.dynamicConfig.getStartService,
     },
+    workspace: deps.workspace,
   };
 }
 
@@ -282,5 +283,6 @@ export function createPluginStartContext<TPlugin, TPluginDependencies>(
       getClient: deps.dynamicConfig.getClient,
       createStoreFromRequest: deps.dynamicConfig.createStoreFromRequest,
     },
+    workspace: deps.workspace,
   };
 }
diff --git a/src/core/server/rendering/rendering_service.test.ts b/src/core/server/rendering/rendering_service.test.ts
index 5fa7d010989e..5df516f95114 100644
--- a/src/core/server/rendering/rendering_service.test.ts
+++ b/src/core/server/rendering/rendering_service.test.ts
@@ -29,6 +29,21 @@
  */
 
 import { load } from 'cheerio';
+import { i18nLoader } from '@osd/i18n';
+
+jest.mock('@osd/i18n', () => {
+  const originalModule = jest.requireActual('@osd/i18n');
+  return {
+    ...originalModule,
+    i18nLoader: {
+      getRegisteredLocales: jest.fn(),
+      getTranslationsByLocale: jest.fn(),
+      isRegisteredLocale: jest.fn(),
+    },
+  };
+});
+
+const i18nLoaderMock = jest.mocked(i18nLoader, true);
 
 import { httpServerMock } from '../http/http_server.mocks';
 import { uiSettingsServiceMock } from '../ui_settings/ui_settings_service.mock';
@@ -161,6 +176,34 @@ describe('RenderingService', () => {
 
         expect(data).toMatchSnapshot(INJECTED_METADATA);
       });
+
+      it('renders "core" page driven by overridden locale', async () => {
+        i18nLoaderMock.isRegisteredLocale.mockReturnValue(true);
+        const content = await render(
+          createOpenSearchDashboardsRequest({ query: { locale: 'TR-tr' } }),
+          uiSettings,
+          {}
+        );
+        const dom = load(content);
+        const $elStyle = dom('html');
+
+        expect(i18nLoader.isRegisteredLocale).toHaveBeenCalledWith('tr-TR');
+        expect($elStyle.attr('lang')).toBe('tr-TR');
+      });
+
+      it('renders "core" page driven by invalid overridden locale', async () => {
+        i18nLoaderMock.isRegisteredLocale.mockReturnValue(false);
+        const content = await render(
+          createOpenSearchDashboardsRequest({ query: { locale: 'xx-XX' } }),
+          uiSettings,
+          {}
+        );
+        const dom = load(content);
+        const $elStyle = dom('html');
+
+        expect(i18nLoader.isRegisteredLocale).toHaveBeenCalledWith('xx-XX');
+        expect($elStyle.attr('lang')).toBe('en');
+      });
     });
   });
 
diff --git a/src/core/server/rendering/rendering_service.tsx b/src/core/server/rendering/rendering_service.tsx
index 371737929f31..81ddce913649 100644
--- a/src/core/server/rendering/rendering_service.tsx
+++ b/src/core/server/rendering/rendering_service.tsx
@@ -31,7 +31,7 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { first, take } from 'rxjs/operators';
-import { i18n } from '@osd/i18n';
+import { i18n, i18nLoader } from '@osd/i18n';
 import { Agent as HttpsAgent } from 'https';
 
 import Axios from 'axios';
@@ -100,6 +100,15 @@ export class RenderingService {
           opensearchDashboardsConfig as OpenSearchDashboardsConfigType
         );
 
+        let locale = i18n.getLocale();
+        const localeOverride = (request.query as any)?.locale?.trim?.();
+        if (localeOverride) {
+          const normalizedLocale = i18n.normalizeLocale(localeOverride);
+          if (i18nLoader.isRegisteredLocale(normalizedLocale)) {
+            locale = normalizedLocale;
+          }
+        }
+
         const dynamicConfigStartServices = await dynamicConfig.getStartService();
 
         const metadata: RenderingMetadata = {
@@ -108,7 +117,7 @@ export class RenderingService {
           bootstrapScriptUrl: `${basePath}/bootstrap.js`,
           startupScriptUrl: `${basePath}/startup.js`,
           i18n: i18n.translate,
-          locale: i18n.getLocale(),
+          locale,
           injectedMetadata: {
             version: env.packageInfo.version,
             buildNumber: env.packageInfo.buildNum,
@@ -118,7 +127,7 @@ export class RenderingService {
             env,
             anonymousStatusPage: status.isStatusPageAnonymous(),
             i18n: {
-              translationsUrl: `${basePath}/translations/${i18n.getLocale()}.json`,
+              translationsUrl: `${basePath}/translations/${locale}.json`,
             },
             csp: { warnLegacyBrowsers: http.csp.warnLegacyBrowsers },
             vars: vars ?? {},
diff --git a/src/core/server/saved_objects/service/saved_objects_client.mock.ts b/src/core/server/saved_objects/service/saved_objects_client.mock.ts
index db7c4771c4f7..ca66c40c4aaf 100644
--- a/src/core/server/saved_objects/service/saved_objects_client.mock.ts
+++ b/src/core/server/saved_objects/service/saved_objects_client.mock.ts
@@ -31,22 +31,22 @@
 import { SavedObjectsClientContract } from '../types';
 import { SavedObjectsErrorHelpers } from './lib/errors';
 
-const create = () =>
-  (({
-    errors: SavedObjectsErrorHelpers,
-    create: jest.fn(),
-    bulkCreate: jest.fn(),
-    checkConflicts: jest.fn(),
-    bulkUpdate: jest.fn(),
-    delete: jest.fn(),
-    bulkGet: jest.fn(),
-    find: jest.fn(),
-    get: jest.fn(),
-    update: jest.fn(),
-    addToNamespaces: jest.fn(),
-    deleteFromNamespaces: jest.fn(),
-    addToWorkspaces: jest.fn(),
-    deleteFromWorkspaces: jest.fn(),
-  } as unknown) as jest.Mocked<SavedObjectsClientContract>);
+const create = (): jest.Mocked<SavedObjectsClientContract> => ({
+  errors: SavedObjectsErrorHelpers as jest.Mocked<SavedObjectsClientContract>['errors'],
+  create: jest.fn(),
+  bulkCreate: jest.fn(),
+  checkConflicts: jest.fn(),
+  bulkUpdate: jest.fn(),
+  delete: jest.fn(),
+  bulkGet: jest.fn(),
+  find: jest.fn(),
+  get: jest.fn(),
+  update: jest.fn(),
+  addToNamespaces: jest.fn(),
+  deleteFromNamespaces: jest.fn(),
+  addToWorkspaces: jest.fn(),
+  deleteFromWorkspaces: jest.fn(),
+  deleteByWorkspace: jest.fn(),
+});
 
 export const savedObjectsClientMock = { create };
diff --git a/src/core/server/server.ts b/src/core/server/server.ts
index 1b2e5f05679e..ca8d7a7775fc 100644
--- a/src/core/server/server.ts
+++ b/src/core/server/server.ts
@@ -71,6 +71,7 @@ import { InternalCoreSetup, InternalCoreStart, ServiceConfigDescriptor } from '.
 import { CoreUsageDataService } from './core_usage_data';
 import { CoreRouteHandlerContext } from './core_route_handler_context';
 import { DynamicConfigService } from './config/dynamic_config_service';
+import { WorkspaceService } from './workspace/workspace_service';
 
 const coreId = Symbol('core');
 const rootConfigPath = '';
@@ -88,6 +89,7 @@ export class Server {
   private readonly plugins: PluginsService;
   private readonly savedObjects: SavedObjectsService;
   private readonly uiSettings: UiSettingsService;
+  private readonly workspace: WorkspaceService;
   private readonly environment: EnvironmentService;
   private readonly metrics: MetricsService;
   private readonly httpResources: HttpResourcesService;
@@ -130,6 +132,7 @@ export class Server {
     this.opensearch = new OpenSearchService(core);
     this.savedObjects = new SavedObjectsService(core);
     this.uiSettings = new UiSettingsService(core);
+    this.workspace = new WorkspaceService(core);
     this.capabilities = new CapabilitiesService(core);
     this.environment = new EnvironmentService(core);
     this.metrics = new MetricsService(core);
@@ -199,6 +202,7 @@ export class Server {
       http: httpSetup,
       savedObjects: savedObjectsSetup,
     });
+    const workspaceSetup = await this.workspace.setup();
 
     const metricsSetup = await this.metrics.setup({ http: httpSetup });
 
@@ -247,6 +251,7 @@ export class Server {
       metrics: metricsSetup,
       security: securitySetup,
       dynamicConfig: dynamicConfigServiceSetup,
+      workspace: workspaceSetup,
     };
 
     const pluginsSetup = await this.plugins.setup(coreSetup);
@@ -285,6 +290,7 @@ export class Server {
     soStartSpan?.end();
     const capabilitiesStart = this.capabilities.start();
     const uiSettingsStart = await this.uiSettings.start();
+    const workspaceStart = await this.workspace.start();
     const metricsStart = await this.metrics.start();
     const httpStart = this.http.getStartContract();
     const coreUsageDataStart = this.coreUsageData.start({
@@ -308,6 +314,7 @@ export class Server {
       coreUsageData: coreUsageDataStart,
       crossCompatibility: crossCompatibilityServiceStart,
       dynamicConfig: dynamicConfigServiceStart,
+      workspace: workspaceStart,
     };
 
     const pluginsStart = await this.plugins.start(this.coreStart);
diff --git a/src/core/server/utils/acl_auditor.test.ts b/src/core/server/utils/acl_auditor.test.ts
new file mode 100644
index 000000000000..a77afb18ca30
--- /dev/null
+++ b/src/core/server/utils/acl_auditor.test.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { loggerMock } from '../logging/logger.mock';
+import { httpServerMock } from '../mocks';
+import {
+  initializeACLAuditor,
+  getACLAuditor,
+  cleanUpACLAuditor,
+  ACLAuditorStateKey,
+} from './acl_auditor';
+
+describe('#getACLAuditor', () => {
+  it('should be able to get ACL auditor if request initialized', () => {
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    const uninilizedMockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    const mockedLogger = loggerMock.create();
+    initializeACLAuditor(mockRequest, mockedLogger);
+    expect(getACLAuditor(mockRequest)).not.toBeFalsy();
+    expect(getACLAuditor(uninilizedMockRequest)).toBeFalsy();
+  });
+});
+
+describe('#cleanUpACLAuditor', () => {
+  it('should be able to destroy the auditor', () => {
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    const mockedLogger = loggerMock.create();
+    initializeACLAuditor(mockRequest, mockedLogger);
+    expect(getACLAuditor(mockRequest)).not.toBeFalsy();
+    cleanUpACLAuditor(mockRequest);
+    expect(getACLAuditor(mockRequest)).toBeFalsy();
+  });
+});
+
+describe('#ACLAuditor', () => {
+  it('should log error when auditor value is not correct', () => {
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    const mockedLogger = loggerMock.create();
+    initializeACLAuditor(mockRequest, mockedLogger);
+    const ACLAuditorInstance = getACLAuditor(mockRequest);
+    ACLAuditorInstance?.increment(ACLAuditorStateKey.DATABASE_OPERATION, 1);
+    ACLAuditorInstance?.checkout();
+    expect(
+      mockedLogger.error.mock.calls[0][0].toString().startsWith('[ACLCounterCheckoutFailed]')
+    ).toEqual(true);
+    ACLAuditorInstance?.checkout();
+    expect(mockedLogger.error).toBeCalledTimes(1);
+  });
+});
diff --git a/src/core/server/utils/acl_auditor.ts b/src/core/server/utils/acl_auditor.ts
new file mode 100644
index 000000000000..5ca87de5ea85
--- /dev/null
+++ b/src/core/server/utils/acl_auditor.ts
@@ -0,0 +1,97 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { OpenSearchDashboardsRequest, ensureRawRequest } from '../http/router';
+import { Logger } from '../logging';
+
+const ACLAuditorKey = Symbol('ACLAuditor');
+
+export const ACLAuditorStateKey = {
+  VALIDATE_SUCCESS: 'validateSuccess',
+  VALIDATE_FAILURE: 'validateFailure',
+  DATABASE_OPERATION: 'databaseOperation',
+} as const;
+
+const defaultState = {
+  [ACLAuditorStateKey.VALIDATE_SUCCESS]: 0,
+  [ACLAuditorStateKey.VALIDATE_FAILURE]: 0,
+  [ACLAuditorStateKey.DATABASE_OPERATION]: 0,
+};
+
+type ValueOf<T> = T[keyof T];
+
+class ACLAuditor {
+  private state = { ...defaultState };
+
+  constructor(private logger: Logger) {}
+
+  reset = () => {
+    this.state = { ...defaultState };
+  };
+
+  increment = (key: ValueOf<typeof ACLAuditorStateKey>, count: number) => {
+    if (typeof count !== 'number' || !this.state.hasOwnProperty(key)) {
+      return;
+    }
+
+    this.state[key] = this.state[key] + count;
+  };
+
+  checkout = (requestInfo?: string) => {
+    /**
+     * VALIDATE_FAILURE represents the count for unauthorized call to a specific objects
+     * VALIDATE_SUCCESS represents the count for authorized call to a specific objects
+     * DATABASE_OPERATION represents the count for operations call to the database.
+     *
+     * Normally the operations call to the database should always <= the AuthZ check(VALIDATE_FAILURE + VALIDATE_SUCCESS)
+     * If DATABASE_OPERATION > AuthZ check, it means we have somewhere bypasses the AuthZ check and we should audit this bypass behavior.
+     */
+    if (
+      this.state[ACLAuditorStateKey.VALIDATE_FAILURE] +
+        this.state[ACLAuditorStateKey.VALIDATE_SUCCESS] <
+      this.state[ACLAuditorStateKey.DATABASE_OPERATION]
+    ) {
+      this.logger.error(
+        `[ACLCounterCheckoutFailed] counter state: ${JSON.stringify(this.state)}, ${
+          requestInfo ? `requestInfo: ${requestInfo}` : ''
+        }`
+      );
+    }
+
+    this.reset();
+  };
+
+  getState = () => this.state;
+}
+
+interface AppState {
+  [ACLAuditorKey]?: ACLAuditor;
+}
+
+/**
+ * This function will be used to initialize a new app state to the request
+ *
+ * @param request OpenSearchDashboardsRequest
+ * @returns void
+ */
+export const initializeACLAuditor = (request: OpenSearchDashboardsRequest, logger: Logger) => {
+  const rawRequest = ensureRawRequest(request);
+  const appState: AppState = rawRequest.app;
+  const ACLCounterInstance = appState[ACLAuditorKey];
+
+  if (ACLCounterInstance) {
+    return;
+  }
+
+  appState[ACLAuditorKey] = new ACLAuditor(logger);
+};
+
+export const getACLAuditor = (request: OpenSearchDashboardsRequest): ACLAuditor | undefined => {
+  return (ensureRawRequest(request).app as AppState)[ACLAuditorKey];
+};
+
+export const cleanUpACLAuditor = (request: OpenSearchDashboardsRequest) => {
+  (ensureRawRequest(request).app as AppState)[ACLAuditorKey] = undefined;
+};
diff --git a/src/core/server/utils/client_call_auditor.test.ts b/src/core/server/utils/client_call_auditor.test.ts
new file mode 100644
index 000000000000..85f49c8e4345
--- /dev/null
+++ b/src/core/server/utils/client_call_auditor.test.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { httpServerMock } from '../../../core/server/mocks';
+import {
+  initializeClientCallAuditor,
+  getClientCallAuditor,
+  CLIENT_CALL_AUDITOR_KEY,
+  cleanUpClientCallAuditor,
+} from './client_call_auditor';
+
+describe('#getClientCallAuditor', () => {
+  it('should be able to get clientCallAuditor if request initialized', () => {
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    const uninilizedMockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    initializeClientCallAuditor(mockRequest);
+    expect(getClientCallAuditor(mockRequest)).not.toBeFalsy();
+    expect(getClientCallAuditor(uninilizedMockRequest)).toBeFalsy();
+  });
+});
+
+describe('#cleanUpClientCallAuditor', () => {
+  it('should be able to destroy the auditor', () => {
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    initializeClientCallAuditor(mockRequest);
+    expect(getClientCallAuditor(mockRequest)).not.toBeFalsy();
+    cleanUpClientCallAuditor(mockRequest);
+    expect(getClientCallAuditor(mockRequest)).toBeFalsy();
+  });
+});
+
+describe('#ClientCallAuditor', () => {
+  it('should return false when auditor incoming not equal outgoing', () => {
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    initializeClientCallAuditor(mockRequest);
+    const ACLAuditorInstance = getClientCallAuditor(mockRequest);
+    ACLAuditorInstance?.increment(CLIENT_CALL_AUDITOR_KEY.incoming);
+    expect(ACLAuditorInstance?.isAsyncClientCallsBalanced()).toEqual(false);
+  });
+});
diff --git a/src/core/server/utils/client_call_auditor.ts b/src/core/server/utils/client_call_auditor.ts
new file mode 100644
index 000000000000..405b103b4360
--- /dev/null
+++ b/src/core/server/utils/client_call_auditor.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { OpenSearchDashboardsRequest, ensureRawRequest } from '../http/router';
+
+const clientCallAuditorKey = Symbol('clientCallAuditor');
+
+interface AppState {
+  [clientCallAuditorKey]?: ClientCallAuditor;
+}
+
+export const CLIENT_CALL_AUDITOR_KEY = {
+  incoming: 'incoming',
+  outgoing: 'outgoing',
+} as const;
+
+/**
+ * This class will be used to audit all the async calls to saved objects client.
+ * For example, `/api/sample_data` will call savedObjectsClient.get() 3 times parallely and for ACL auditor,
+ * it should only `checkout` when the incoming calls equal outgoing call.
+ */
+class ClientCallAuditor {
+  private state: {
+    incoming?: number;
+    outgoing?: number;
+  } = {};
+  increment(key: keyof typeof CLIENT_CALL_AUDITOR_KEY) {
+    this.state[key] = (this.state[key] || 0) + 1;
+  }
+  isAsyncClientCallsBalanced() {
+    return this.state.incoming === this.state.outgoing;
+  }
+}
+
+/**
+ * This function will be used to initialize a new app state to the request
+ *
+ * @param request OpenSearchDashboardsRequest
+ * @returns void
+ */
+export const initializeClientCallAuditor = (request: OpenSearchDashboardsRequest) => {
+  const rawRequest = ensureRawRequest(request);
+  const appState: AppState = rawRequest.app;
+  const clientCallAuditorInstance = appState[clientCallAuditorKey];
+
+  if (clientCallAuditorInstance) {
+    return;
+  }
+
+  appState[clientCallAuditorKey] = new ClientCallAuditor();
+};
+
+export const getClientCallAuditor = (
+  request: OpenSearchDashboardsRequest
+): ClientCallAuditor | undefined => {
+  return (ensureRawRequest(request).app as AppState)[clientCallAuditorKey];
+};
+
+export const cleanUpClientCallAuditor = (request: OpenSearchDashboardsRequest) => {
+  (ensureRawRequest(request).app as AppState)[clientCallAuditorKey] = undefined;
+};
diff --git a/src/core/server/utils/index.ts b/src/core/server/utils/index.ts
index 64f8379a46e2..43bcbe52e6ac 100644
--- a/src/core/server/utils/index.ts
+++ b/src/core/server/utils/index.ts
@@ -35,3 +35,15 @@ export * from './streams';
 export { getPrincipalsFromRequest } from './auth_info';
 export { getWorkspaceIdFromUrl, cleanWorkspaceId } from '../../utils';
 export { updateWorkspaceState, getWorkspaceState } from './workspace';
+export {
+  ACLAuditorStateKey,
+  initializeACLAuditor,
+  getACLAuditor,
+  cleanUpACLAuditor,
+} from './acl_auditor';
+export {
+  CLIENT_CALL_AUDITOR_KEY,
+  getClientCallAuditor,
+  initializeClientCallAuditor,
+  cleanUpClientCallAuditor,
+} from './client_call_auditor';
diff --git a/src/core/server/workspace/index.ts b/src/core/server/workspace/index.ts
new file mode 100644
index 000000000000..5fec378f0722
--- /dev/null
+++ b/src/core/server/workspace/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PublicMethodsOf } from '@osd/utility-types';
+
+import {
+  InternalWorkspaceServiceSetup,
+  InternalWorkspaceServiceStart,
+  WorkspaceService,
+} from './workspace_service';
+
+export { InternalWorkspaceServiceSetup, InternalWorkspaceServiceStart } from './workspace_service';
+
+export type WorkspaceSetup = InternalWorkspaceServiceSetup;
+export type WorkspaceStart = InternalWorkspaceServiceStart;
+
+export type IWorkspaceService = PublicMethodsOf<WorkspaceService>;
diff --git a/src/core/server/workspace/mocks.ts b/src/core/server/workspace/mocks.ts
new file mode 100644
index 000000000000..d708885edc92
--- /dev/null
+++ b/src/core/server/workspace/mocks.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { IWorkspaceService } from '.';
+import { InternalWorkspaceServiceSetup, InternalWorkspaceServiceStart } from './workspace_service';
+
+const createWorkspaceServiceMock = () => {
+  const mocked: jest.Mocked<IWorkspaceService> = {
+    setup: jest.fn().mockReturnValue(createInternalSetupContractMock()),
+    start: jest.fn().mockReturnValue({}),
+    stop: jest.fn(),
+  };
+
+  return mocked;
+};
+
+const createInternalSetupContractMock = () => {
+  const mocked: jest.Mocked<InternalWorkspaceServiceSetup> = {
+    isWorkspaceEnabled: jest.fn(),
+  };
+
+  return mocked;
+};
+const createSetupContractMock = createInternalSetupContractMock;
+
+const createInternalStartContractMock = () => {
+  const mocked: jest.Mocked<InternalWorkspaceServiceStart> = {
+    isWorkspaceEnabled: jest.fn(),
+  };
+
+  return mocked;
+};
+const createStartContractMock = createInternalStartContractMock;
+
+export const workspaceServiceMock = {
+  create: createWorkspaceServiceMock,
+  createInternalSetupContract: createInternalSetupContractMock,
+  createInternalStartContract: createInternalStartContractMock,
+  createSetupContract: createSetupContractMock,
+  createStartContract: createStartContractMock,
+};
diff --git a/src/core/server/workspace/workspace_service.ts b/src/core/server/workspace/workspace_service.ts
new file mode 100644
index 000000000000..9adeb130be96
--- /dev/null
+++ b/src/core/server/workspace/workspace_service.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Observable } from 'rxjs';
+import { first } from 'rxjs/operators';
+
+import { CoreService } from '../../types';
+import { CoreContext } from '../core_context';
+import { Logger } from '../logging';
+
+export interface InternalWorkspaceServiceSetup {
+  isWorkspaceEnabled: () => boolean;
+}
+
+export interface InternalWorkspaceServiceStart {
+  isWorkspaceEnabled: () => boolean;
+}
+
+/** @internal */
+export class WorkspaceService
+  implements CoreService<InternalWorkspaceServiceSetup, InternalWorkspaceServiceStart> {
+  private readonly log: Logger;
+  private readonly config$: Observable<{ enabled: boolean }>;
+
+  constructor(private readonly coreContext: CoreContext) {
+    this.log = this.coreContext.logger.get('workspace-service');
+    this.config$ = this.coreContext.configService.atPath<{ enabled: boolean }>('workspace');
+  }
+
+  public async setup(): Promise<InternalWorkspaceServiceSetup> {
+    this.log.debug('Setting up workspace service');
+
+    const workspaceConfig = await this.config$.pipe(first()).toPromise();
+
+    return {
+      isWorkspaceEnabled: () => workspaceConfig.enabled,
+    };
+  }
+
+  public async start(): Promise<InternalWorkspaceServiceStart> {
+    this.log.debug('Starting workspace service');
+
+    const workspaceConfig = await this.config$.pipe(first()).toPromise();
+
+    return {
+      isWorkspaceEnabled: () => workspaceConfig.enabled,
+    };
+  }
+
+  public async stop() {}
+}
diff --git a/src/core/types/ui_settings.ts b/src/core/types/ui_settings.ts
index 061c31c1d73a..6c0b90566d5f 100644
--- a/src/core/types/ui_settings.ts
+++ b/src/core/types/ui_settings.ts
@@ -63,6 +63,7 @@ export interface DeprecationSettings {
 export enum UiSettingScope {
   GLOBAL = 'global',
   USER = 'user',
+  WORKSPACE = 'workspace',
 }
 
 /**
diff --git a/src/core/utils/default_nav_groups.ts b/src/core/utils/default_nav_groups.ts
index b58bd43e5b08..9f42356c09b8 100644
--- a/src/core/utils/default_nav_groups.ts
+++ b/src/core/utils/default_nav_groups.ts
@@ -23,6 +23,7 @@ const defaultNavGroups = {
     }),
     order: 1000,
     type: NavGroupType.SYSTEM,
+    icon: 'database',
   },
   settingsAndSetup: {
     id: 'settingsAndSetup',
@@ -34,6 +35,7 @@ const defaultNavGroups = {
     }),
     order: 2000,
     type: NavGroupType.SYSTEM,
+    icon: 'gear',
   },
   all: {
     id: ALL_USE_CASE_ID,
diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js
index 224050c0c0d3..f02e273c9f8a 100644
--- a/src/legacy/ui/ui_render/ui_render_mixin.js
+++ b/src/legacy/ui/ui_render/ui_render_mixin.js
@@ -55,7 +55,8 @@ import { getApmConfig } from '../apm';
  */
 export function uiRenderMixin(osdServer, server, config) {
   const translationsCache = { translations: null, hash: null };
-  const defaultLocale = i18n.getLocale() || 'en'; // Fallback to 'en' if no default locale is set
+  // `i18n.getLocale` will always return a value; the 'en' is just to accommodate tests
+  const defaultLocale = i18n.getLocale() || 'en';
 
   // Route handler for serving translation files.
   // This handler supports two scenarios:
@@ -67,8 +68,7 @@ export function uiRenderMixin(osdServer, server, config) {
     config: { auth: false },
     handler: async (request, h) => {
       const { locale } = request.params;
-      const normalizedLocale = locale.toLowerCase();
-      const registeredLocales = i18nLoader.getRegisteredLocales().map((l) => l.toLowerCase());
+      const normalizedLocale = i18n.normalizeLocale(locale);
       let warning = null;
 
       // Function to get or create cached translations
@@ -85,12 +85,12 @@ export function uiRenderMixin(osdServer, server, config) {
 
       let cachedTranslations;
 
-      if (normalizedLocale === defaultLocale.toLowerCase()) {
+      if (normalizedLocale === defaultLocale) {
         // Default locale
         cachedTranslations = await getCachedTranslations(defaultLocale, () =>
           i18n.getTranslation()
         );
-      } else if (registeredLocales.includes(normalizedLocale)) {
+      } else if (i18nLoader.isRegisteredLocale(normalizedLocale)) {
         // Other registered locales
         cachedTranslations = await getCachedTranslations(normalizedLocale, () =>
           i18nLoader.getTranslationsByLocale(locale)
diff --git a/src/legacy/ui/ui_render/ui_render_mixin.test.js b/src/legacy/ui/ui_render/ui_render_mixin.test.js
index 81f8a9f9a696..e96a3ce77a8e 100644
--- a/src/legacy/ui/ui_render/ui_render_mixin.test.js
+++ b/src/legacy/ui/ui_render/ui_render_mixin.test.js
@@ -6,17 +6,22 @@
 import { uiRenderMixin } from './ui_render_mixin';
 
 // Mock dependencies
-jest.mock('@osd/i18n', () => ({
-  i18n: {
-    getLocale: jest.fn(),
-    getTranslation: jest.fn(),
-    translate: jest.fn((key, { defaultMessage }) => defaultMessage),
-  },
-  i18nLoader: {
-    getRegisteredLocales: jest.fn(),
-    getTranslationsByLocale: jest.fn(),
-  },
-}));
+jest.mock('@osd/i18n', () => {
+  const getRegisteredLocales = jest.fn();
+  return {
+    i18n: {
+      getLocale: jest.fn(),
+      getTranslation: jest.fn(),
+      normalizeLocale: jest.fn((locale) => locale),
+      translate: jest.fn((key, { defaultMessage }) => defaultMessage),
+    },
+    i18nLoader: {
+      getRegisteredLocales: getRegisteredLocales,
+      getTranslationsByLocale: jest.fn(),
+      isRegisteredLocale: jest.fn((locale) => getRegisteredLocales()?.includes?.(locale)),
+    },
+  };
+});
 
 // Import mocked modules
 const { i18n, i18nLoader } = require('@osd/i18n');
diff --git a/src/plugins/advanced_settings/public/management_app/__snapshots__/advanced_settings.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/__snapshots__/advanced_settings.test.tsx.snap
index 7feb20684141..3484851dd85b 100644
--- a/src/plugins/advanced_settings/public/management_app/__snapshots__/advanced_settings.test.tsx.snap
+++ b/src/plugins/advanced_settings/public/management_app/__snapshots__/advanced_settings.test.tsx.snap
@@ -142,6 +142,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
           "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
         },
         "logstash": "https://opensearch.org/docs/mocked-test-branch",
+        "lucene": Object {
+          "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+        },
         "management": Object {
           "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
           "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -158,6 +161,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
           "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
         },
         "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+        "ppl": Object {
+          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+        },
         "reIndex": Object {
           "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
         },
@@ -188,6 +194,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
           "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
           "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
         },
+        "sql": Object {
+          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+        },
         "tutorial": Object {
           "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
           "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -785,6 +794,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
               "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
             },
             "logstash": "https://opensearch.org/docs/mocked-test-branch",
+            "lucene": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+            },
             "management": Object {
               "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
               "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -801,6 +813,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
               "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
             },
             "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+            "ppl": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+            },
             "reIndex": Object {
               "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
             },
@@ -831,6 +846,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
               "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
               "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
             },
+            "sql": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+            },
             "tutorial": Object {
               "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
               "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -1707,6 +1725,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                         },
                         "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                        "lucene": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                        },
                         "management": Object {
                           "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                           "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -1723,6 +1744,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                         },
                         "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                        "ppl": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                        },
                         "reIndex": Object {
                           "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                         },
@@ -1753,6 +1777,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                           "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                         },
+                        "sql": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                        },
                         "tutorial": Object {
                           "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                           "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -2107,6 +2134,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                         },
                         "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                        "lucene": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                        },
                         "management": Object {
                           "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                           "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -2123,6 +2153,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                         },
                         "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                        "ppl": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                        },
                         "reIndex": Object {
                           "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                         },
@@ -2153,6 +2186,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                           "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                         },
+                        "sql": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                        },
                         "tutorial": Object {
                           "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                           "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -2507,6 +2543,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                         },
                         "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                        "lucene": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                        },
                         "management": Object {
                           "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                           "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -2523,6 +2562,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                         },
                         "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                        "ppl": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                        },
                         "reIndex": Object {
                           "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                         },
@@ -2553,6 +2595,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                           "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                         },
+                        "sql": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                        },
                         "tutorial": Object {
                           "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                           "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -2907,6 +2952,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                         },
                         "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                        "lucene": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                        },
                         "management": Object {
                           "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                           "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -2923,6 +2971,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                         },
                         "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                        "ppl": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                        },
                         "reIndex": Object {
                           "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                         },
@@ -2953,6 +3004,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                           "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                         },
+                        "sql": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                        },
                         "tutorial": Object {
                           "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                           "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -3362,6 +3416,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                         },
                         "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                        "lucene": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                        },
                         "management": Object {
                           "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                           "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -3378,6 +3435,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                         },
                         "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                        "ppl": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                        },
                         "reIndex": Object {
                           "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                         },
@@ -3408,6 +3468,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                           "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                         },
+                        "sql": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                        },
                         "tutorial": Object {
                           "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                           "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -3764,6 +3827,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                         },
                         "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                        "lucene": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                        },
                         "management": Object {
                           "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                           "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -3780,6 +3846,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                         },
                         "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                        "ppl": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                        },
                         "reIndex": Object {
                           "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                         },
@@ -3810,6 +3879,9 @@ exports[`AdvancedSettings should render normally when use updated UX 1`] = `
                           "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                           "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                         },
+                        "sql": Object {
+                          "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                        },
                         "tutorial": Object {
                           "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                           "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
index 0ecca876e94d..bb5e107dc066 100644
--- a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
+++ b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
@@ -173,7 +173,23 @@ export class AdvancedSettingsComponent extends Component<
     const all = config.getAll();
     const userSettingsEnabled = config.get('theme:enableUserControl');
     return Object.entries(all)
-      .filter(([, setting]) => setting.scope !== UiSettingScope.USER)
+      .filter(([, setting]) => {
+        const scope = setting.scope;
+        // if scope is not defined, then it's a global ui setting
+        if (!scope) {
+          return true;
+        }
+
+        if (typeof scope === 'string') {
+          return scope === UiSettingScope.GLOBAL;
+        }
+
+        if (Array.isArray(scope)) {
+          return scope.includes(UiSettingScope.GLOBAL);
+        }
+
+        return false;
+      })
       .map((setting) => {
         return toEditableConfig({
           def: setting[1],
diff --git a/src/plugins/content_management/public/components/section_input.test.ts b/src/plugins/content_management/public/components/section_input.test.ts
index bcf7db4a7ab8..3f5ee6886c12 100644
--- a/src/plugins/content_management/public/components/section_input.test.ts
+++ b/src/plugins/content_management/public/components/section_input.test.ts
@@ -305,14 +305,14 @@ test('it should create section with a dashboard as content', async () => {
     savedObjectsClient: clientMock,
   });
   expect(input.panels).toEqual({
-    'ce24dd10-eb8a-11ed-8e00-17d7d50cd7b2': {
+    '1': {
       explicitInput: {
-        id: 'ce24dd10-eb8a-11ed-8e00-17d7d50cd7b2',
+        id: '1',
         savedObjectId: 'ce24dd10-eb8a-11ed-8e00-17d7d50cd7b2',
       },
       gridData: {
         h: 5,
-        i: 'ce24dd10-eb8a-11ed-8e00-17d7d50cd7b2',
+        i: '1',
         w: 48,
         x: 0,
         y: 0,
@@ -351,14 +351,14 @@ test('it should create section with a dynamic dashboard as content', async () =>
     savedObjectsClient: clientMock,
   });
   expect(input.panels).toEqual({
-    'ce24dd10-eb8a-11ed-8e00-17d7d50cd7b2': {
+    '1': {
       explicitInput: {
-        id: 'ce24dd10-eb8a-11ed-8e00-17d7d50cd7b2',
+        id: '1',
         savedObjectId: 'ce24dd10-eb8a-11ed-8e00-17d7d50cd7b2',
       },
       gridData: {
         h: 5,
-        i: 'ce24dd10-eb8a-11ed-8e00-17d7d50cd7b2',
+        i: '1',
         w: 48,
         x: 0,
         y: 0,
@@ -368,6 +368,78 @@ test('it should create section with a dynamic dashboard as content', async () =>
   });
 });
 
+test('it should create section with a dashboard which has duplicate visualization', async () => {
+  const section: Section = { id: 'section1', kind: 'dashboard', order: 10 };
+  const staticDashboard: Content = {
+    id: 'content1',
+    kind: 'dashboard',
+    order: 0,
+    input: {
+      kind: 'static',
+      id: 'dashboard-id-static',
+    },
+  };
+  const clientMock = {
+    ...coreMock.createStart().savedObjects.client,
+    // all three visualization referenced to same object
+    get: jest.fn().mockResolvedValue({
+      id: 'dashboard-id-static',
+      attributes: {
+        panelsJSON:
+          '[{"version":"3.0.0","gridData":{"x":24,"y":0,"w":24,"h":15,"i":"909ee211-fab3-400f-858a-734e6fb52326"},"panelIndex":"909ee211-fab3-400f-858a-734e6fb52326","embeddableConfig":{},"panelRefName":"panel_0"},{"version":"3.0.0","gridData":{"x":0,"y":0,"w":24,"h":15,"i":"d61bbd24-be5d-4422-a522-096be0d5e711"},"panelIndex":"d61bbd24-be5d-4422-a522-096be0d5e711","embeddableConfig":{},"panelRefName":"panel_1"},{"version":"3.0.0","gridData":{"x":24,"y":15,"w":24,"h":15,"i":"111d18c7-788f-4276-b54c-bd7f78ea768d"},"panelIndex":"111d18c7-788f-4276-b54c-bd7f78ea768d","embeddableConfig":{},"panelRefName":"panel_2"}]',
+      },
+      references: [
+        {
+          name: 'panel_0',
+          type: 'visualization',
+          id: '_Chk-0_10f1a240-b891-11e8-a6d9-e546fe2bba5f',
+        },
+        {
+          name: 'panel_1',
+          type: 'visualization',
+          id: '_Chk-0_10f1a240-b891-11e8-a6d9-e546fe2bba5f',
+        },
+        {
+          name: 'panel_2',
+          type: 'visualization',
+          id: '_Chk-0_10f1a240-b891-11e8-a6d9-e546fe2bba5f',
+        },
+      ],
+    }),
+  };
+
+  const input = await createDashboardInput(section, [staticDashboard], {
+    savedObjectsClient: clientMock,
+  });
+  // expect we still have 3 panels with same content
+  expect(input.panels).toEqual({
+    '111d18c7-788f-4276-b54c-bd7f78ea768d': {
+      explicitInput: {
+        id: '111d18c7-788f-4276-b54c-bd7f78ea768d',
+        savedObjectId: '_Chk-0_10f1a240-b891-11e8-a6d9-e546fe2bba5f',
+      },
+      gridData: { h: 15, i: '111d18c7-788f-4276-b54c-bd7f78ea768d', w: 24, x: 24, y: 15 },
+      type: 'visualization',
+    },
+    '909ee211-fab3-400f-858a-734e6fb52326': {
+      explicitInput: {
+        id: '909ee211-fab3-400f-858a-734e6fb52326',
+        savedObjectId: '_Chk-0_10f1a240-b891-11e8-a6d9-e546fe2bba5f',
+      },
+      gridData: { h: 15, i: '909ee211-fab3-400f-858a-734e6fb52326', w: 24, x: 24, y: 0 },
+      type: 'visualization',
+    },
+    'd61bbd24-be5d-4422-a522-096be0d5e711': {
+      explicitInput: {
+        id: 'd61bbd24-be5d-4422-a522-096be0d5e711',
+        savedObjectId: '_Chk-0_10f1a240-b891-11e8-a6d9-e546fe2bba5f',
+      },
+      gridData: { h: 15, i: 'd61bbd24-be5d-4422-a522-096be0d5e711', w: 24, x: 0, y: 0 },
+      type: 'visualization',
+    },
+  });
+});
+
 test('it renders content with custom width and height', async () => {
   const customWidth = 24;
   const customHeight = 20;
diff --git a/src/plugins/content_management/public/components/section_input.ts b/src/plugins/content_management/public/components/section_input.ts
index 1ae3207867ad..37ad45b29ca5 100644
--- a/src/plugins/content_management/public/components/section_input.ts
+++ b/src/plugins/content_management/public/components/section_input.ts
@@ -124,13 +124,15 @@ export const createDashboardInput = async (
                 if (!panel.panelRefName) {
                   return;
                 }
+                // panelIndex should be unique
+                const panelIndex = panel.panelIndex || panel.panelRefName;
                 const reference = references.find((ref) => ref.name === panel.panelRefName);
                 if (reference) {
-                  panels[reference.id] = {
-                    gridData: { ...panel.gridData, i: reference.id },
+                  panels[panelIndex] = {
+                    gridData: { ...panel.gridData, i: panelIndex },
                     type: reference.type,
                     explicitInput: {
-                      id: reference.id,
+                      id: panelIndex,
                       savedObjectId: reference.id,
                     },
                   };
diff --git a/src/plugins/content_management/public/components/section_render.tsx b/src/plugins/content_management/public/components/section_render.tsx
index 08eac7f92f88..f9db299cb297 100644
--- a/src/plugins/content_management/public/components/section_render.tsx
+++ b/src/plugins/content_management/public/components/section_render.tsx
@@ -66,25 +66,24 @@ const CardSection = ({ section, embeddable, contents$ }: Props) => {
     return (
       <>
         {section.title ? (
-          <EuiTitle size="s">
-            <h2>
-              {isCardCollapsible ? (
-                <EuiButtonIcon
-                  iconType={isCardVisible ? 'arrowDown' : 'arrowRight'}
-                  onClick={() => setIsCardVisible(!isCardVisible)}
-                  color="text"
-                  aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
-                />
-              ) : null}
-              {section.title}
-            </h2>
-          </EuiTitle>
-        ) : null}
-        {isCardVisible && (
           <>
-            <EuiSpacer size="m" /> <EmbeddableRenderer factory={factory} input={input} />
+            <EuiTitle size="s">
+              <h2>
+                {isCardCollapsible ? (
+                  <EuiButtonIcon
+                    iconType={isCardVisible ? 'arrowDown' : 'arrowRight'}
+                    onClick={() => setIsCardVisible(!isCardVisible)}
+                    color="text"
+                    aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
+                  />
+                ) : null}
+                {section.title}
+              </h2>
+            </EuiTitle>
+            <EuiSpacer size="m" />
           </>
-        )}
+        ) : null}
+        {isCardVisible && <EmbeddableRenderer factory={factory} input={input} />}
       </>
     );
   }
diff --git a/src/plugins/content_management/public/plugin.ts b/src/plugins/content_management/public/plugin.ts
index 91c3b1a979ff..e0e336374a5d 100644
--- a/src/plugins/content_management/public/plugin.ts
+++ b/src/plugins/content_management/public/plugin.ts
@@ -66,6 +66,7 @@ export class ContentManagementPublicPlugin
     return {
       registerContentProvider: this.contentManagementService.registerContentProvider,
       updatePageSection: this.contentManagementService.updatePageSection,
+      getPage: (id: string) => this.contentManagementService.getPage(id),
       renderPage: (id: string, renderOptions?: RenderOptions) => {
         const page = this.contentManagementService.getPage(id);
         if (page) {
diff --git a/src/plugins/content_management/public/services/content_management/page.test.ts b/src/plugins/content_management/public/services/content_management/page.test.ts
index 3a960f2805a6..74f34d20c950 100644
--- a/src/plugins/content_management/public/services/content_management/page.test.ts
+++ b/src/plugins/content_management/public/services/content_management/page.test.ts
@@ -264,3 +264,16 @@ test('it should callback with error if section not exist', () => {
   expect(callbackMock.mock.calls[0][0]).toBe(null);
   expect(callbackMock.mock.calls[0][1]).toBeInstanceOf(Error);
 });
+
+test('it should remove the specified section', () => {
+  const page = new Page({ id: 'page1' });
+  page.createSection({
+    id: 'section_id',
+    kind: 'dashboard',
+    order: 1000,
+    input: { timeRange: { from: 'now-7d', to: 'now' } },
+  });
+  expect(page.getSections()).toHaveLength(1);
+  page.removeSection('section_id');
+  expect(page.getSections()).toHaveLength(0);
+});
diff --git a/src/plugins/content_management/public/services/content_management/page.ts b/src/plugins/content_management/public/services/content_management/page.ts
index 7e8c988882a2..3c98d22ea465 100644
--- a/src/plugins/content_management/public/services/content_management/page.ts
+++ b/src/plugins/content_management/public/services/content_management/page.ts
@@ -27,6 +27,11 @@ export class Page {
     this.setSection(section);
   }
 
+  removeSection(id: string) {
+    this.sections.delete(id);
+    this.sections$.next(this.getSections());
+  }
+
   getSections() {
     return [...this.sections.values()].sort((a, b) => a.order - b.order);
   }
diff --git a/src/plugins/content_management/public/types.ts b/src/plugins/content_management/public/types.ts
index e925408a7823..b958f16ab152 100644
--- a/src/plugins/content_management/public/types.ts
+++ b/src/plugins/content_management/public/types.ts
@@ -6,7 +6,7 @@
 import React from 'react';
 import { CoreStart } from 'opensearch-dashboards/public';
 
-import { ContentManagementService, ContentProvider, Section } from './services';
+import { ContentManagementService, ContentProvider, Page, Section } from './services';
 import { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public';
 
 export interface ContentManagementPluginSetup {
@@ -36,6 +36,10 @@ export interface ContentManagementPluginStart {
     targetArea: string,
     callback: (section: Section | null, err?: Error) => Section | null
   ) => void;
+  /**
+   * @experimental this API is experimental and might change in future releases
+   */
+  getPage: (id: string) => Page | undefined;
   renderPage: (id: string, options?: RenderOptions) => React.ReactNode;
 }
 
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 df0e5af66a0b..b09ffb33bb6e 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
@@ -144,6 +144,9 @@ exports[`Dashboard top nav render in embed mode 1`] = `
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "globalSearch": Object {
+                "getAllSearchCommands": [MockFunction],
+              },
               "logos": Object {
                 "AnimatedMark": Object {
                   "dark": Object {
@@ -516,6 +519,9 @@ exports[`Dashboard top nav render in embed mode 1`] = `
                     "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                   },
                   "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                  "lucene": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                  },
                   "management": Object {
                     "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                     "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -532,6 +538,9 @@ exports[`Dashboard top nav render in embed mode 1`] = `
                     "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                   },
                   "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                  "ppl": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                  },
                   "reIndex": Object {
                     "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                   },
@@ -562,6 +571,9 @@ exports[`Dashboard top nav render in embed mode 1`] = `
                     "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                     "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                   },
+                  "sql": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                  },
                   "tutorial": Object {
                     "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                     "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -1211,6 +1223,9 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "globalSearch": Object {
+                "getAllSearchCommands": [MockFunction],
+              },
               "logos": Object {
                 "AnimatedMark": Object {
                   "dark": Object {
@@ -1583,6 +1598,9 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
                     "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                   },
                   "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                  "lucene": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                  },
                   "management": Object {
                     "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                     "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -1599,6 +1617,9 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
                     "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                   },
                   "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                  "ppl": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                  },
                   "reIndex": Object {
                     "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                   },
@@ -1629,6 +1650,9 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
                     "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                     "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                   },
+                  "sql": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                  },
                   "tutorial": Object {
                     "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                     "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -2278,6 +2302,9 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "globalSearch": Object {
+                "getAllSearchCommands": [MockFunction],
+              },
               "logos": Object {
                 "AnimatedMark": Object {
                   "dark": Object {
@@ -2650,6 +2677,9 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
                     "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                   },
                   "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                  "lucene": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                  },
                   "management": Object {
                     "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                     "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -2666,6 +2696,9 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
                     "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                   },
                   "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                  "ppl": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                  },
                   "reIndex": Object {
                     "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                   },
@@ -2696,6 +2729,9 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
                     "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                     "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                   },
+                  "sql": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                  },
                   "tutorial": Object {
                     "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                     "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -3345,6 +3381,9 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "globalSearch": Object {
+                "getAllSearchCommands": [MockFunction],
+              },
               "logos": Object {
                 "AnimatedMark": Object {
                   "dark": Object {
@@ -3717,6 +3756,9 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
                     "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                   },
                   "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                  "lucene": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                  },
                   "management": Object {
                     "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                     "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -3733,6 +3775,9 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
                     "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                   },
                   "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                  "ppl": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                  },
                   "reIndex": Object {
                     "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                   },
@@ -3763,6 +3808,9 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
                     "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                     "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                   },
+                  "sql": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                  },
                   "tutorial": Object {
                     "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                     "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -4412,6 +4460,9 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "globalSearch": Object {
+                "getAllSearchCommands": [MockFunction],
+              },
               "logos": Object {
                 "AnimatedMark": Object {
                   "dark": Object {
@@ -4784,6 +4835,9 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
                     "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                   },
                   "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                  "lucene": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                  },
                   "management": Object {
                     "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                     "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -4800,6 +4854,9 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
                     "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                   },
                   "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                  "ppl": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                  },
                   "reIndex": Object {
                     "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                   },
@@ -4830,6 +4887,9 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
                     "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                     "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                   },
+                  "sql": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                  },
                   "tutorial": Object {
                     "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                     "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -5479,6 +5539,9 @@ exports[`Dashboard top nav render with all components 1`] = `
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "globalSearch": Object {
+                "getAllSearchCommands": [MockFunction],
+              },
               "logos": Object {
                 "AnimatedMark": Object {
                   "dark": Object {
@@ -5851,6 +5914,9 @@ exports[`Dashboard top nav render with all components 1`] = `
                     "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
                   },
                   "logstash": "https://opensearch.org/docs/mocked-test-branch",
+                  "lucene": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+                  },
                   "management": Object {
                     "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
                     "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -5867,6 +5933,9 @@ exports[`Dashboard top nav render with all components 1`] = `
                     "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
                   },
                   "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+                  "ppl": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+                  },
                   "reIndex": Object {
                     "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
                   },
@@ -5897,6 +5966,9 @@ exports[`Dashboard top nav render with all components 1`] = `
                     "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
                     "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
                   },
+                  "sql": Object {
+                    "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+                  },
                   "tutorial": Object {
                     "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
                     "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
diff --git a/src/plugins/data/common/constants.ts b/src/plugins/data/common/constants.ts
index c28fecc6cf02..356ebb609d76 100644
--- a/src/plugins/data/common/constants.ts
+++ b/src/plugins/data/common/constants.ts
@@ -87,6 +87,7 @@ export const UI_SETTINGS = {
   SEARCH_INCLUDE_FROZEN: 'search:includeFrozen',
   SEARCH_TIMEOUT: 'search:timeout',
   SEARCH_INCLUDE_ALL_FIELDS: 'search:includeAllFields',
+  SEARCH_MAX_RECENT_DATASETS: 'search:maxRecentDatasets',
   HISTOGRAM_BAR_TARGET: 'histogram:barTarget',
   HISTOGRAM_MAX_BARS: 'histogram:maxBars',
   HISTORY_LIMIT: 'history:limit',
diff --git a/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts b/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts
index e64b0bf33f63..94df6995186a 100644
--- a/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts
+++ b/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts
@@ -32,7 +32,7 @@ import { includes } from 'lodash';
 import { IndexPatternsContract } from './index_patterns';
 import { UiSettingsCommon } from '../types';
 
-export type EnsureDefaultIndexPattern = () => Promise<unknown> | undefined;
+export type EnsureDefaultIndexPattern = () => Promise<unknown | void> | undefined;
 
 export const createEnsureDefaultIndexPattern = (
   uiSettings: UiSettingsCommon,
@@ -62,7 +62,10 @@ export const createEnsureDefaultIndexPattern = (
       defaultId = patterns[0];
       await uiSettings.set('defaultIndex', defaultId);
     } else {
-      return onRedirectNoIndexPattern();
+      const isEnhancementsEnabled = await uiSettings.get('query:enhancements:enabled');
+      const shouldRedirect = !isEnhancementsEnabled;
+      if (shouldRedirect) return onRedirectNoIndexPattern();
+      else return;
     }
   };
 };
diff --git a/src/plugins/data/common/utils/helpers.ts b/src/plugins/data/common/utils/helpers.ts
index c3fc8112ceec..2d1ab2ab1417 100644
--- a/src/plugins/data/common/utils/helpers.ts
+++ b/src/plugins/data/common/utils/helpers.ts
@@ -28,13 +28,8 @@
  * under the License.
  */
 
-import { timer } from 'rxjs';
-import { filter, mergeMap, take, takeWhile } from 'rxjs/operators';
-import {
-  PollQueryResultsHandler,
-  FetchStatusResponse,
-  QueryFailedStatusResponse,
-} from '../data_frames';
+import { i18n } from '@osd/i18n';
+import { PollQueryResultsHandler, FetchStatusResponse } from '../data_frames';
 
 export interface QueryStatusOptions {
   pollQueryResults: PollQueryResultsHandler;
@@ -42,29 +37,28 @@ export interface QueryStatusOptions {
   interval?: number;
 }
 
-export const handleQueryResults = <T>(
+export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
+export const handleQueryResults = async <T>(
   options: QueryStatusOptions
 ): Promise<FetchStatusResponse> => {
-  const { pollQueryResults, interval = 5000, queryId } = options;
+  const { pollQueryResults, interval = 5000 } = options;
+  let queryResultsRes: FetchStatusResponse;
+  let queryStatus;
+  do {
+    // Wait for the given interval in ms before polling for the query status/results
+    await delay(interval);
+    queryResultsRes = await pollQueryResults();
+    queryStatus = queryResultsRes?.status?.toUpperCase();
+  } while (queryStatus !== 'SUCCESS' && queryStatus !== 'FAILED');
+
+  if (queryStatus === 'FAILED') {
+    throw new Error(
+      i18n.translate('data.search.request.failed', {
+        defaultMessage: 'An error occurred while executing the search query',
+      })
+    );
+  }
 
-  return timer(0, interval)
-    .pipe(
-      mergeMap(() => pollQueryResults()),
-      takeWhile((response: FetchStatusResponse) => {
-        const status = response?.status?.toUpperCase();
-        return status !== 'SUCCESS' && status !== 'FAILED';
-      }, true),
-      filter((response: FetchStatusResponse) => {
-        const status = response?.status?.toUpperCase();
-        if (status === 'FAILED') {
-          throw (
-            (response as QueryFailedStatusResponse).body.error ??
-            new Error(`Failed to fetch results ${queryId ?? ''}`)
-          );
-        }
-        return status === 'SUCCESS';
-      }),
-      take(1)
-    )
-    .toPromise();
+  return queryResultsRes;
 };
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
index cdf4d29697ca..773f24118907 100644
--- a/src/plugins/data/public/index.ts
+++ b/src/plugins/data/public/index.ts
@@ -62,7 +62,16 @@ import {
 } from '../common';
 
 import { FilterLabel } from './ui';
-export { createEditor, DefaultInput, DQLBody, SingleLineInput } from './ui';
+export {
+  createEditor,
+  DefaultInput,
+  DQLBody,
+  SingleLineInput,
+  DatasetSelector,
+  AdvancedSelector,
+  NoIndexPatternsPanel,
+  DatasetSelectorAppearance,
+} from './ui';
 
 import {
   generateFilters,
@@ -485,6 +494,7 @@ export {
   QueryStateChange,
   QueryStart,
   PersistedLog,
+  LanguageReference,
 } from './query';
 
 export { AggsStart } from './search/aggs';
diff --git a/src/plugins/data/public/plugin.ts b/src/plugins/data/public/plugin.ts
index fcb35f486e0b..b44244865d52 100644
--- a/src/plugins/data/public/plugin.ts
+++ b/src/plugins/data/public/plugin.ts
@@ -53,6 +53,7 @@ import {
   UiSettingsPublicToCommon,
 } from './index_patterns';
 import {
+  setApplication,
   setFieldFormats,
   setIndexPatterns,
   setNotifications,
@@ -150,7 +151,8 @@ export class DataPublicPlugin
       storage: this.storage,
       sessionStorage: this.sessionStorage,
       defaultSearchInterceptor: searchService.getDefaultSearchInterceptor(),
-      applicaton: core.application,
+      application: core.application,
+      notifications: core.notifications,
     });
 
     uiActions.registerAction(
@@ -194,6 +196,7 @@ export class DataPublicPlugin
     setNotifications(notifications);
     setOverlays(overlays);
     setUiSettings(uiSettings);
+    setApplication(application);
 
     const fieldFormats = this.fieldFormatsService.start();
     setFieldFormats(fieldFormats);
@@ -224,7 +227,8 @@ export class DataPublicPlugin
       savedObjectsClient: savedObjects.client,
       uiSettings,
       indexPatterns,
-      applicaton: core.application,
+      application: core.application,
+      notifications,
     });
     setQueryService(query);
 
diff --git a/src/plugins/data/public/query/query_service.ts b/src/plugins/data/public/query/query_service.ts
index f13f8decc9a2..b009d4eeef01 100644
--- a/src/plugins/data/public/query/query_service.ts
+++ b/src/plugins/data/public/query/query_service.ts
@@ -62,6 +62,7 @@ export class QueryService {
     storage,
     sessionStorage,
     defaultSearchInterceptor,
+    notifications,
   }: QueryServiceSetupDependencies): IQuerySetup {
     this.filterManager = new FilterManager(uiSettings);
 
@@ -75,7 +76,8 @@ export class QueryService {
       storage,
       sessionStorage,
       uiSettings,
-      defaultSearchInterceptor
+      defaultSearchInterceptor,
+      notifications
     );
 
     this.state$ = createQueryStateObservable({
@@ -97,7 +99,7 @@ export class QueryService {
     storage,
     uiSettings,
     indexPatterns,
-    applicaton,
+    application,
   }: QueryServiceStartDependencies): IQueryStart {
     this.queryStringManager.getDatasetService().init(indexPatterns);
     return {
@@ -110,7 +112,7 @@ export class QueryService {
       savedQueries: createSavedQueryService(
         savedObjectsClient,
         this.queryStringManager,
-        applicaton
+        application
       ),
       state$: this.state$,
       timefilter: this.timefilter,
diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.mock.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.mock.ts
index 0b9372b73092..df5521078feb 100644
--- a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.mock.ts
+++ b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.mock.ts
@@ -41,6 +41,8 @@ const createSetupDatasetServiceMock = (): jest.Mocked<DatasetServiceContract> =>
     getDefault: jest.fn().mockReturnValue(defaultDataset),
     cacheDataset: jest.fn(),
     fetchOptions: jest.fn(),
+    getRecentDatasets: jest.fn(),
+    addRecentDataset: jest.fn(),
   };
 };
 
diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts
index d994d3a7699a..014a4acbc0b5 100644
--- a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts
+++ b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts
@@ -5,7 +5,7 @@
 
 import { DatasetService } from './dataset_service';
 import { coreMock } from '../../../../../../core/public/mocks';
-import { DEFAULT_DATA, DataStorage, Dataset } from 'src/plugins/data/common';
+import { DEFAULT_DATA, DataStorage, Dataset, UI_SETTINGS } from 'src/plugins/data/common';
 import { DataStructure } from '../../../../common';
 import { IDataPluginServices } from '../../../types';
 import { indexPatternTypeConfig } from './lib';
@@ -21,9 +21,13 @@ describe('DatasetService', () => {
 
   beforeEach(() => {
     uiSettings = coreMock.createSetup().uiSettings;
+    uiSettings.get = jest.fn().mockImplementation((setting: string) => {
+      if (setting === UI_SETTINGS.SEARCH_MAX_RECENT_DATASETS) {
+        return 4;
+      }
+    });
     sessionStorage = new DataStorage(window.sessionStorage, 'opensearchDashboards.');
     mockDataPluginServices = {} as jest.Mocked<IDataPluginServices>;
-
     service = new DatasetService(uiSettings, sessionStorage);
     indexPatterns = dataPluginMock.createStartContract().indexPatterns;
     service.init(indexPatterns);
@@ -129,4 +133,53 @@ describe('DatasetService', () => {
     expect(indexPatterns.create).toHaveBeenCalledTimes(0);
     expect(indexPatterns.saveToCache).toHaveBeenCalledTimes(0);
   });
+
+  test('addRecentDataset adds a dataset', () => {
+    const mockDataset1: Dataset = {
+      id: 'dataset1',
+      title: 'Dataset 1',
+      type: 'test-type',
+      timeFieldName: 'timestamp',
+    };
+
+    service.addRecentDataset(mockDataset1);
+    const recents = service.getRecentDatasets();
+    expect(recents).toContainEqual(mockDataset1);
+    expect(recents.length).toEqual(1);
+    expect(sessionStorage.get('recentDatasets')).toContainEqual(mockDataset1);
+  });
+
+  test('getRecentDatasets returns all datasets', () => {
+    for (let i = 0; i < 4; i++) {
+      service.addRecentDataset({
+        id: `dataset${i}`,
+        title: `Dataset ${i}`,
+        type: 'test-type',
+        timeFieldName: 'timestamp',
+      });
+    }
+    expect(service.getRecentDatasets().length).toEqual(4);
+    for (let i = 0; i < 4; i++) {
+      const mockDataset = {
+        id: `dataset${i}`,
+        title: `Dataset ${i}`,
+        type: 'test-type',
+        timeFieldName: 'timestamp',
+      };
+      expect(service.getRecentDatasets()).toContainEqual(mockDataset);
+      expect(sessionStorage.get('recentDatasets')).toContainEqual(mockDataset);
+    }
+  });
+
+  test('addRecentDatasets respects max size', () => {
+    for (let i = 0; i < 5; i++) {
+      service.addRecentDataset({
+        id: `dataset${i}`,
+        title: `Dataset ${i}`,
+        type: 'test-type',
+        timeFieldName: 'timestamp',
+      });
+    }
+    expect(service.getRecentDatasets().length).toEqual(4);
+  });
 });
diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
index 2ea646c56abc..d8414a33779e 100644
--- a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
+++ b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
@@ -4,6 +4,7 @@
  */
 
 import { CoreStart } from 'opensearch-dashboards/public';
+import LRUCache from 'lru-cache';
 import {
   Dataset,
   DataStructure,
@@ -22,6 +23,7 @@ export class DatasetService {
   private indexPatterns?: IndexPatternsContract;
   private defaultDataset?: Dataset;
   private typesRegistry: Map<string, DatasetTypeConfig> = new Map();
+  private recentDatasets: LRUCache<string, Dataset>;
 
   constructor(
     private readonly uiSettings: CoreStart['uiSettings'],
@@ -30,6 +32,10 @@ export class DatasetService {
     if (this.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)) {
       this.registerDefaultTypes();
     }
+    this.recentDatasets = new LRUCache({
+      max: this.uiSettings.get(UI_SETTINGS.SEARCH_MAX_RECENT_DATASETS),
+    });
+    this.deserializeRecentDatasets();
   }
 
   /**
@@ -61,6 +67,30 @@ export class DatasetService {
     return this.defaultDataset;
   }
 
+  private serializeRecentDatasets(): void {
+    this.sessionStorage.set('recentDatasets', this.getRecentDatasets());
+  }
+
+  private deserializeRecentDatasets(): void {
+    const cacheData = this.sessionStorage.get('recentDatasets');
+    if (cacheData) {
+      cacheData.forEach((dataset: Dataset) => this.addRecentDataset(dataset, false));
+    }
+  }
+
+  public getRecentDatasets(): Dataset[] {
+    return this.recentDatasets.values();
+  }
+
+  public addRecentDataset(dataset: Dataset | undefined, serialize: boolean = true): void {
+    if (dataset) {
+      this.recentDatasets.set(dataset.id, dataset);
+    }
+    if (serialize) {
+      this.serializeRecentDatasets();
+    }
+  }
+
   public async cacheDataset(dataset: Dataset): Promise<void> {
     const type = this.getType(dataset.type);
     if (dataset && dataset.type !== DEFAULT_DATA.SET_TYPES.INDEX_PATTERN) {
@@ -177,6 +207,11 @@ export class DatasetService {
     return Number(this.sessionStorage.get('lastCacheTime')) || undefined;
   }
 
+  public removeFromRecentDatasets(datasetId: string): void {
+    this.recentDatasets.del(datasetId);
+    this.serializeRecentDatasets();
+  }
+
   private setLastCacheTime(time: number): void {
     this.sessionStorage.set('lastCacheTime', time);
   }
diff --git a/src/plugins/data/public/query/query_string/dataset_service/lib/index_pattern_type.ts b/src/plugins/data/public/query/query_string/dataset_service/lib/index_pattern_type.ts
index e8064715f7af..5d230e0396bf 100644
--- a/src/plugins/data/public/query/query_string/dataset_service/lib/index_pattern_type.ts
+++ b/src/plugins/data/public/query/query_string/dataset_service/lib/index_pattern_type.ts
@@ -4,6 +4,7 @@
  */
 
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
+import { i18n } from '@osd/i18n';
 import { DataSourceAttributes } from '../../../../../../data_source/common/data_sources';
 import {
   DEFAULT_DATA,
@@ -24,6 +25,7 @@ export const indexPatternTypeConfig: DatasetTypeConfig = {
   meta: {
     icon: { type: 'indexPatternApp' },
     tooltip: 'OpenSearch Index Patterns',
+    searchOnLoad: true,
   },
 
   toDataset: (path) => {
@@ -69,6 +71,29 @@ export const indexPatternTypeConfig: DatasetTypeConfig = {
     }
     return ['kuery', 'lucene', 'PPL', 'SQL'];
   },
+
+  getSampleQueries: (dataset: Dataset, language: string) => {
+    switch (language) {
+      case 'PPL':
+        return [
+          {
+            title: i18n.translate('data.indexPatternType.sampleQuery.basicPPLQuery', {
+              defaultMessage: 'Sample query for PPL',
+            }),
+            query: `source = ${dataset.title}`,
+          },
+        ];
+      case 'SQL':
+        return [
+          {
+            title: i18n.translate('data.indexPatternType.sampleQuery.basicSQLQuery', {
+              defaultMessage: 'Sample query for SQL',
+            }),
+            query: `SELECT * FROM ${dataset.title} LIMIT 10`,
+          },
+        ];
+    }
+  },
 };
 
 const fetchIndexPatterns = async (client: SavedObjectsClientContract): Promise<DataStructure[]> => {
diff --git a/src/plugins/data/public/query/query_string/dataset_service/lib/index_type.ts b/src/plugins/data/public/query/query_string/dataset_service/lib/index_type.ts
index cd2e45b8d25b..655d3720dab2 100644
--- a/src/plugins/data/public/query/query_string/dataset_service/lib/index_type.ts
+++ b/src/plugins/data/public/query/query_string/dataset_service/lib/index_type.ts
@@ -5,6 +5,7 @@
 
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
 import { map } from 'rxjs/operators';
+import { i18n } from '@osd/i18n';
 import {
   DEFAULT_DATA,
   DataStructure,
@@ -21,6 +22,7 @@ export const indexTypeConfig: DatasetTypeConfig = {
   meta: {
     icon: { type: 'logoOpenSearch' },
     tooltip: 'OpenSearch Indexes',
+    searchOnLoad: true,
   },
 
   toDataset: (path) => {
@@ -87,6 +89,29 @@ export const indexTypeConfig: DatasetTypeConfig = {
   supportedLanguages: (dataset: Dataset): string[] => {
     return ['SQL', 'PPL'];
   },
+
+  getSampleQueries: (dataset: Dataset, language: string) => {
+    switch (language) {
+      case 'PPL':
+        return [
+          {
+            title: i18n.translate('data.indexType.sampleQuery.basicPPLQuery', {
+              defaultMessage: 'Sample query for PPL',
+            }),
+            query: `source = ${dataset.title}`,
+          },
+        ];
+      case 'SQL':
+        return [
+          {
+            title: i18n.translate('data.indexType.sampleQuery.basicSQLQuery', {
+              defaultMessage: 'Sample query for SQL',
+            }),
+            query: `SELECT * FROM ${dataset.title} LIMIT 10`,
+          },
+        ];
+    }
+  },
 };
 
 const fetchDataSources = async (client: SavedObjectsClientContract) => {
diff --git a/src/plugins/data/public/query/query_string/dataset_service/types.ts b/src/plugins/data/public/query/query_string/dataset_service/types.ts
index 6b84dd630c2c..43607fe49feb 100644
--- a/src/plugins/data/public/query/query_string/dataset_service/types.ts
+++ b/src/plugins/data/public/query/query_string/dataset_service/types.ts
@@ -30,6 +30,8 @@ export interface DatasetTypeConfig {
     icon: EuiIconProps;
     /** Optional tooltip text */
     tooltip?: string;
+    /** Optional preference for search on page load else defaulted to true */
+    searchOnLoad?: boolean;
   };
   /**
    * Converts a DataStructure to a Dataset.
@@ -69,4 +71,8 @@ export interface DatasetTypeConfig {
    * @see https://github.com/opensearch-project/OpenSearch-Dashboards/issues/8362.
    */
   combineDataStructures?: (dataStructures: DataStructure[]) => DataStructure | undefined;
+  /**
+   * Returns a list of sample queries for this dataset type
+   */
+  getSampleQueries?: (dataset: Dataset, language: string) => any;
 }
diff --git a/src/plugins/data/public/query/query_string/index.ts b/src/plugins/data/public/query/query_string/index.ts
index 0a1ad963ef9e..96f473a3aea5 100644
--- a/src/plugins/data/public/query/query_string/index.ts
+++ b/src/plugins/data/public/query/query_string/index.ts
@@ -44,4 +44,5 @@ export {
   QueryControls,
   QueryResult,
   QueryStatus,
+  LanguageReference,
 } from './language_service';
diff --git a/src/plugins/data/public/query/query_string/language_service/index.ts b/src/plugins/data/public/query/query_string/language_service/index.ts
index 70df0971f50c..4030e3728fbd 100644
--- a/src/plugins/data/public/query/query_string/language_service/index.ts
+++ b/src/plugins/data/public/query/query_string/language_service/index.ts
@@ -5,4 +5,10 @@
 
 export * from './types';
 export { LanguageServiceContract, LanguageService } from './language_service';
-export { RecentQueriesTable, QueryControls, QueryResult, QueryStatus } from './lib';
+export {
+  RecentQueriesTable,
+  QueryControls,
+  QueryResult,
+  QueryStatus,
+  LanguageReference,
+} from './lib';
diff --git a/src/plugins/data/public/query/query_string/language_service/language_service.ts b/src/plugins/data/public/query/query_string/language_service/language_service.ts
index 6fb250d8d359..aa9ac4b84754 100644
--- a/src/plugins/data/public/query/query_string/language_service/language_service.ts
+++ b/src/plugins/data/public/query/query_string/language_service/language_service.ts
@@ -14,7 +14,8 @@ import {
   UiEnhancements,
 } from '../../../ui';
 import { DataStorage, setOverrides as setFieldOverrides } from '../../../../common';
-import { createDefaultLanguageReference } from './lib/default_language_reference';
+import { dqlLanguageReference } from './lib/dql_language_reference';
+import { luceneLanguageReference } from './lib/lucene_language_reference';
 
 export class LanguageService {
   private languages: Map<string, LanguageConfig> = new Map();
@@ -35,22 +36,22 @@ export class LanguageService {
     }
   };
 
-  public createDefaultLanguageReference = () => {
-    return createDefaultLanguageReference();
-  };
-
   /**
    * Registers default handlers for index patterns and indices.
    */
   private registerDefaultLanguages() {
-    const defaultEditor = createEditor(
-      SingleLineInput,
-      SingleLineInput,
-      [this.createDefaultLanguageReference()],
-      DQLBody
+    this.registerLanguage(
+      getDQLLanguageConfig(
+        this.defaultSearchInterceptor,
+        createEditor(SingleLineInput, SingleLineInput, [dqlLanguageReference()], DQLBody)
+      )
+    );
+    this.registerLanguage(
+      getLuceneLanguageConfig(
+        this.defaultSearchInterceptor,
+        createEditor(SingleLineInput, SingleLineInput, [luceneLanguageReference()], DQLBody)
+      )
     );
-    this.registerLanguage(getDQLLanguageConfig(this.defaultSearchInterceptor, defaultEditor));
-    this.registerLanguage(getLuceneLanguageConfig(this.defaultSearchInterceptor, defaultEditor));
   }
 
   public registerLanguage(config: LanguageConfig): void {
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/default_language_reference.tsx b/src/plugins/data/public/query/query_string/language_service/lib/default_language_reference.tsx
deleted file mode 100644
index a2894c4e3cab..000000000000
--- a/src/plugins/data/public/query/query_string/language_service/lib/default_language_reference.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { i18n } from '@osd/i18n';
-
-import { EuiButtonIcon, EuiLink, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
-
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { IDataPluginServices } from '../../../../types';
-import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
-
-export const DefaultLanguageReference = () => {
-  const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
-  const [isLanguageReferenceOpen, setIsLanguageReferenceOpen] = React.useState(false);
-  const osdDQLDocs = opensearchDashboards.services.docLinks?.links.opensearchDashboards.dql.base;
-  const dqlFullName = (
-    <FormattedMessage
-      id="data.query.queryBar.dqlFullLanguageName"
-      defaultMessage="OpenSearch Dashboards Query Language"
-    />
-  );
-
-  const button = (
-    <div>
-      <EuiButtonIcon
-        iconType={'iInCircle'}
-        aria-label={i18n.translate('data.queryControls.languageReference', {
-          defaultMessage: `Language Reference`,
-        })}
-        onClick={() => setIsLanguageReferenceOpen(!isLanguageReferenceOpen)}
-      />
-    </div>
-  );
-
-  return (
-    <EuiPopover
-      id="languageReferencePopover"
-      button={button}
-      isOpen={isLanguageReferenceOpen}
-      closePopover={() => setIsLanguageReferenceOpen(false)}
-      panelPaddingSize="s"
-      anchorPosition="downLeft"
-      anchorClassName="euiFormControlLayout__append"
-    >
-      <EuiPopoverTitle>
-        <FormattedMessage
-          id="data.query.queryBar.syntaxOptionsTitle"
-          defaultMessage="Syntax options"
-        />
-      </EuiPopoverTitle>
-      <div style={{ width: '350px' }}>
-        <EuiText size="s">
-          <p>
-            <FormattedMessage
-              id="data.query.queryBar.syntaxOptionsDescription"
-              defaultMessage="The {docsLink} (DQL) offers a simplified query syntax and support for scripted fields."
-              values={{
-                docsLink: (
-                  <EuiLink href={osdDQLDocs} target="_blank">
-                    {dqlFullName}
-                  </EuiLink>
-                ),
-              }}
-            />
-          </p>
-        </EuiText>
-      </div>
-    </EuiPopover>
-  );
-};
-
-export const createDefaultLanguageReference = () => {
-  return <DefaultLanguageReference />;
-};
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts b/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts
index 39dc49f22fce..402af7482d08 100644
--- a/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts
+++ b/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import { LanguageConfig } from '../types';
 import { ISearchInterceptor } from '../../../../search';
 
@@ -23,7 +24,59 @@ export const getDQLLanguageConfig = (
       visualizable: true,
     },
     showDocLinks: true,
+    docLink: {
+      title: i18n.translate('data.dqlLanguage.docLink', {
+        defaultMessage: 'DQL documentation',
+      }),
+      url: 'https://opensearch.org/docs/latest/query-dsl/full-text/query-string/',
+    },
     editorSupportedAppNames: ['discover'],
-    supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer'],
+    supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer', 'vis-builder', '*'],
+    sampleQueries: [
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleContainsWind', {
+          defaultMessage: 'The title field contains the word wind.',
+        }),
+        query: 'title: wind',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleContainsWindOrWindy', {
+          defaultMessage: 'The title field contains the word wind or the word windy.',
+        }),
+        query: 'title: (wind OR windy)',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleContainsPhraseWindRises', {
+          defaultMessage: 'The title field contains the phrase wind rises.',
+        }),
+        query: 'title: "wind rises"',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleKeywordExactMatch', {
+          defaultMessage: 'The title.keyword field exactly matches The wind rises.',
+        }),
+        query: 'title.keyword: The wind rises',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleFieldsContainWind', {
+          defaultMessage:
+            'Any field that starts with title (for example, title and title.keyword) contains the word wind',
+        }),
+        query: 'title*: wind',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.articleTitleContainsWind', {
+          defaultMessage:
+            'The field that starts with article and ends with title contains the word wind. Matches the field article title.',
+        }),
+        query: 'article*title: wind',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.descriptionFieldExists', {
+          defaultMessage: 'Documents in which the field description exists.',
+        }),
+        query: 'description:*',
+      },
+    ],
   };
 };
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/dql_language_reference.tsx b/src/plugins/data/public/query/query_string/language_service/lib/dql_language_reference.tsx
new file mode 100644
index 000000000000..3179aeae96ca
--- /dev/null
+++ b/src/plugins/data/public/query/query_string/language_service/lib/dql_language_reference.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { EuiLink, EuiText } from '@elastic/eui';
+import { IDataPluginServices } from '../../../../types';
+import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
+import { LanguageReference } from './language_reference';
+
+const DqlReference = () => {
+  const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
+  const osdDQLDocs = opensearchDashboards.services.docLinks?.links.opensearchDashboards.dql.base;
+  const dqlFullName = (
+    <FormattedMessage
+      id="data.query.queryBar.dqlFullLanguageName"
+      defaultMessage="OpenSearch Dashboards Query Language"
+    />
+  );
+
+  return (
+    <>
+      <EuiText size="s">
+        <p>
+          <FormattedMessage
+            id="data.query.queryBar.dqlSyntaxOptionsDescription"
+            defaultMessage="The {docsLink} (DQL) offers a simplified query syntax and support for scripted fields."
+            values={{
+              docsLink: (
+                <EuiLink href={osdDQLDocs} target="_blank">
+                  {dqlFullName}
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    </>
+  );
+};
+
+export const dqlLanguageReference = () => {
+  return <LanguageReference body={<DqlReference />} />;
+};
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/index.ts b/src/plugins/data/public/query/query_string/language_service/lib/index.ts
index dbaaec3e1905..1b4a0d85d294 100644
--- a/src/plugins/data/public/query/query_string/language_service/lib/index.ts
+++ b/src/plugins/data/public/query/query_string/language_service/lib/index.ts
@@ -6,7 +6,7 @@
 export * from './dql_language';
 export * from './lucene_language';
 
-export * from './default_language_reference';
+export * from './language_reference';
 export * from './get_query_control_links';
 export * from './recent_query';
 export * from './query_result';
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/language_reference.tsx b/src/plugins/data/public/query/query_string/language_service/lib/language_reference.tsx
new file mode 100644
index 000000000000..0d21790362e0
--- /dev/null
+++ b/src/plugins/data/public/query/query_string/language_service/lib/language_reference.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+
+import { EuiButtonIcon, EuiPopover, EuiPopoverTitle } from '@elastic/eui';
+
+import React, { ReactFragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export const LanguageReference = (props: { body: ReactFragment }) => {
+  const [isLanguageReferenceOpen, setIsLanguageReferenceOpen] = React.useState(false);
+
+  const button = (
+    <div>
+      <EuiButtonIcon
+        iconType={'iInCircle'}
+        aria-label={i18n.translate('data.queryControls.languageReference', {
+          defaultMessage: `Language Reference`,
+        })}
+        onClick={() => setIsLanguageReferenceOpen(!isLanguageReferenceOpen)}
+      />
+    </div>
+  );
+
+  return (
+    <EuiPopover
+      id="languageReferencePopover"
+      button={button}
+      isOpen={isLanguageReferenceOpen}
+      closePopover={() => setIsLanguageReferenceOpen(false)}
+      panelPaddingSize="s"
+      anchorPosition="downLeft"
+      anchorClassName="euiFormControlLayout__append"
+    >
+      <EuiPopoverTitle>
+        <FormattedMessage
+          id="data.query.queryBar.syntaxOptionsTitle"
+          defaultMessage="Syntax options"
+        />
+      </EuiPopoverTitle>
+      <div style={{ width: '350px' }}>{props.body}</div>
+    </EuiPopover>
+  );
+};
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts b/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts
index 742747d037e9..4da92f868654 100644
--- a/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts
+++ b/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import { LanguageConfig } from '../types';
 import { ISearchInterceptor } from '../../../../search';
 
@@ -23,7 +24,59 @@ export const getLuceneLanguageConfig = (
       visualizable: true,
     },
     showDocLinks: true,
+    docLink: {
+      title: i18n.translate('data.luceneLanguage.docLink', {
+        defaultMessage: 'Lucene documentation',
+      }),
+      url: 'https://opensearch.org/docs/latest/query-dsl/full-text/query-string/',
+    },
     editorSupportedAppNames: ['discover'],
-    supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer'],
+    supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer', 'vis-builder', '*'],
+    sampleQueries: [
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleContainsWind', {
+          defaultMessage: 'The title field contains the word wind.',
+        }),
+        query: 'title: wind',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleContainsWindOrWindy', {
+          defaultMessage: 'The title field contains the word wind or the word windy.',
+        }),
+        query: 'title: (wind OR windy)',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleContainsPhraseWindRises', {
+          defaultMessage: 'The title field contains the phrase wind rises.',
+        }),
+        query: 'title: "wind rises"',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleKeywordExactMatch', {
+          defaultMessage: 'The title.keyword field exactly matches The wind rises.',
+        }),
+        query: 'title.keyword: The wind rises',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleFieldsContainWind', {
+          defaultMessage:
+            'Any field that starts with title (for example, title and title.keyword) contains the word wind',
+        }),
+        query: 'title*: wind',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.articleTitleContainsWind', {
+          defaultMessage:
+            'The field that starts with article and ends with title contains the word wind. Matches the field article title.',
+        }),
+        query: 'article*title: wind',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.descriptionFieldExists', {
+          defaultMessage: 'Documents in which the field description exists.',
+        }),
+        query: 'description:*',
+      },
+    ],
   };
 };
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/lucene_language_reference.tsx b/src/plugins/data/public/query/query_string/language_service/lib/lucene_language_reference.tsx
new file mode 100644
index 000000000000..8fc5499f0ebb
--- /dev/null
+++ b/src/plugins/data/public/query/query_string/language_service/lib/lucene_language_reference.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { EuiLink, EuiText } from '@elastic/eui';
+import { IDataPluginServices } from '../../../../types';
+import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
+import { LanguageReference } from './language_reference';
+
+const LuceneReference = () => {
+  const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
+  const luceneDocs = opensearchDashboards.services.docLinks?.links.noDocumentation.lucene.base;
+  const luceneFullName = (
+    <FormattedMessage id="data.query.queryBar.luceneFullLanguageName" defaultMessage="Lucene" />
+  );
+
+  return (
+    <>
+      <EuiText size="s">
+        <p>
+          <FormattedMessage
+            id="data.query.queryBar.luceneSyntaxOptionsDescription"
+            defaultMessage="{docsLink} Query Language is a powerful search syntax that enables precise and efficient data retrieval. It utilizes boolean operators, wildcards, and field-specific searches to construct complex queries for finding relevant information. Lucene is particularly well-suited for full-text search and indexing of structured and unstructured data, making it ideal for applications ranging from document retrieval to log analysis and content management systems."
+            values={{
+              docsLink: (
+                <EuiLink href={luceneDocs} target="_blank">
+                  {luceneFullName}
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    </>
+  );
+};
+
+export const luceneLanguageReference = () => {
+  return <LanguageReference body={<LuceneReference />} />;
+};
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx b/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx
index 042d2e11a664..074ba4b5d0d5 100644
--- a/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx
+++ b/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx
@@ -41,40 +41,42 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
     setPopover(!isPopoverOpen);
   };
 
-  const updateElapsedTime = () => {
-    const time = Date.now() - (props.queryStatus.startTime || 0);
-    if (time > BUFFER_TIME) {
-      setElapsedTime(time);
-    } else {
-      setElapsedTime(0);
-    }
-  };
-
   useEffect(() => {
+    const updateElapsedTime = () => {
+      const currentTime = Date.now();
+      if (!props.queryStatus.startTime) {
+        return;
+      }
+      const elapsed = currentTime - props.queryStatus.startTime;
+      setElapsedTime(elapsed);
+    };
+
     const interval = setInterval(updateElapsedTime, 1000);
 
-    return () => clearInterval(interval);
-  });
+    return () => {
+      clearInterval(interval);
+      setElapsedTime(0);
+    };
+  }, [props.queryStatus.startTime]);
 
-  if (props.queryStatus.status === ResultStatus.LOADING) {
-    if (elapsedTime < BUFFER_TIME) {
-      return null;
+  if (elapsedTime > BUFFER_TIME) {
+    if (props.queryStatus.status === ResultStatus.LOADING) {
+      const time = Math.floor(elapsedTime / 1000);
+      return (
+        <EuiButtonEmpty
+          color="text"
+          size="xs"
+          onClick={() => {}}
+          isLoading
+          data-test-subj="queryResultLoading"
+        >
+          {i18n.translate('data.query.languageService.queryResults.loadTime', {
+            defaultMessage: 'Loading {time} s',
+            values: { time },
+          })}
+        </EuiButtonEmpty>
+      );
     }
-    const time = Math.floor(elapsedTime / 1000);
-    return (
-      <EuiButtonEmpty
-        color="text"
-        size="xs"
-        onClick={() => {}}
-        isLoading
-        data-test-subj="queryResultLoading"
-      >
-        {i18n.translate('data.query.languageService.queryResults.loadTime', {
-          defaultMessage: 'Loading {time} s',
-          values: { time },
-        })}
-      </EuiButtonEmpty>
-    );
   }
 
   if (props.queryStatus.status === ResultStatus.READY) {
@@ -85,7 +87,7 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
       });
     } else if (props.queryStatus.elapsedMs < 1000) {
       message = i18n.translate(
-        'data.query.languageService.queryResults.completeTimeInMiliseconds',
+        'data.query.languageService.queryResults.completeTimeInMilliseconds',
         {
           defaultMessage: 'Completed in {timeMS} ms',
           values: { timeMS: props.queryStatus.elapsedMs },
diff --git a/src/plugins/data/public/query/query_string/language_service/types.ts b/src/plugins/data/public/query/query_string/language_service/types.ts
index 6fe7119789d4..c80858d67102 100644
--- a/src/plugins/data/public/query/query_string/language_service/types.ts
+++ b/src/plugins/data/public/query/query_string/language_service/types.ts
@@ -35,6 +35,11 @@ export interface EditorEnhancements {
   queryEditorExtension?: QueryEditorExtensionConfig;
 }
 
+export interface SampleQuery {
+  title: string;
+  query: string;
+}
+
 export interface LanguageConfig {
   id: string;
   title: string;
@@ -50,7 +55,12 @@ export interface LanguageConfig {
     visualizable?: boolean;
   };
   showDocLinks?: boolean;
+  docLink?: {
+    title: string;
+    url: string;
+  };
   editorSupportedAppNames?: string[];
   supportedAppNames?: string[];
   hideDatePicker?: boolean;
+  sampleQueries?: SampleQuery[];
 }
diff --git a/src/plugins/data/public/query/query_string/query_string_manager.ts b/src/plugins/data/public/query/query_string/query_string_manager.ts
index 23aa938ba23a..94d0eb318791 100644
--- a/src/plugins/data/public/query/query_string/query_string_manager.ts
+++ b/src/plugins/data/public/query/query_string/query_string_manager.ts
@@ -30,13 +30,15 @@
 
 import { BehaviorSubject } from 'rxjs';
 import { skip } from 'rxjs/operators';
-import { CoreStart } from 'opensearch-dashboards/public';
-import { isEqual } from 'lodash';
+import { CoreStart, NotificationsSetup } from 'opensearch-dashboards/public';
+import { debounce, isEqual } from 'lodash';
+import { i18n } from '@osd/i18n';
 import { Dataset, DataStorage, Query, TimeRange, UI_SETTINGS } from '../../../common';
 import { createHistory, QueryHistory } from './query_history';
 import { DatasetService, DatasetServiceContract } from './dataset_service';
 import { LanguageService, LanguageServiceContract } from './language_service';
 import { ISearchInterceptor } from '../../search';
+import { getApplication } from '../../services';
 
 export class QueryStringManager {
   private query$: BehaviorSubject<Query>;
@@ -48,7 +50,8 @@ export class QueryStringManager {
     private readonly storage: DataStorage,
     private readonly sessionStorage: DataStorage,
     private readonly uiSettings: CoreStart['uiSettings'],
-    private readonly defaultSearchInterceptor: ISearchInterceptor
+    private readonly defaultSearchInterceptor: ISearchInterceptor,
+    private readonly notifications: NotificationsSetup
   ) {
     this.query$ = new BehaviorSubject<Query>(this.getDefaultQuery());
     this.queryHistory = createHistory({ storage });
@@ -108,6 +111,40 @@ export class QueryStringManager {
   };
 
   public getQuery = (): Query => {
+    const currentAppId = this.getCurrentAppId();
+    const query = this.query$.getValue();
+
+    if (currentAppId) {
+      const currentLanguage = query.language;
+      if (
+        containsWildcardOrValue(
+          this.languageService.getLanguage(currentLanguage)?.supportedAppNames,
+          currentAppId
+        )
+      ) {
+        return this.query$.getValue();
+      }
+
+      const defaultLanguage = this.uiSettings.get('search:queryLanguage');
+      const defaultLanguageTitle = this.languageService.getLanguage(defaultLanguage)?.title;
+
+      showWarning(this.notifications, {
+        title: i18n.translate('data.unSupportedLanguageTitle', {
+          defaultMessage: 'Unsupported Language Selected',
+        }),
+        text: i18n.translate('data.unSupportedLanguageBody', {
+          defaultMessage:
+            'Selected language {currentLanguage} is not supported. Defaulting to {defaultLanguage}.',
+          values: {
+            currentLanguage,
+            defaultLanguage: defaultLanguageTitle,
+          },
+        }),
+      });
+
+      const updatedQuery = this.getInitialQueryByLanguage(defaultLanguage);
+      this.setQuery(updatedQuery);
+    }
     return this.query$.getValue();
   };
 
@@ -194,6 +231,29 @@ export class QueryStringManager {
       this.uiSettings.get(UI_SETTINGS.SEARCH_QUERY_LANGUAGE)
     );
   }
+
+  private getCurrentAppId = () => {
+    let appId;
+    try {
+      const application = getApplication();
+      if (application) {
+        application.currentAppId$.subscribe((val) => (appId = val)).unsubscribe();
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log('Application Not available.');
+    }
+
+    return appId;
+  };
 }
 
+const showWarning = (notifications: NotificationsSetup, { title, text }) => {
+  notifications.toasts.addWarning({ title, text, id: 'unsupported_language_selected' });
+};
+
+const containsWildcardOrValue = (arr: string[] | undefined, value: string) => {
+  return arr ? arr.includes('*') || arr.includes(value) : true;
+};
+
 export type QueryStringContract = PublicMethodsOf<QueryStringManager>;
diff --git a/src/plugins/data/public/query/state_sync/connect_to_query_state.test.ts b/src/plugins/data/public/query/state_sync/connect_to_query_state.test.ts
index 2f804f711c1e..034a4f218fbd 100644
--- a/src/plugins/data/public/query/state_sync/connect_to_query_state.test.ts
+++ b/src/plugins/data/public/query/state_sync/connect_to_query_state.test.ts
@@ -92,6 +92,8 @@ setupMock.uiSettings.get.mockImplementation((key: string) => {
       return { pause: false, value: 0 };
     case UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED:
       return false;
+    case UI_SETTINGS.SEARCH_MAX_RECENT_DATASETS:
+      return 4;
     default:
       throw new Error(`sync_query test: not mocked uiSetting: ${key}`);
   }
@@ -121,13 +123,16 @@ describe('connect_storage_to_query_state', () => {
     queryService.setup({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
+      sessionStorage: new DataStorage(window.sessionStorage, 'opensearch_dashboards.'),
       defaultSearchInterceptor: mockSearchInterceptor,
+      application: setupMock.application,
     });
     queryServiceStart = queryService.start({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
       savedObjectsClient: startMock.savedObjects.client,
       indexPatterns: indexPatternsMock,
+      application: startMock.application,
     });
     indexPatternsMock = ({
       get: jest.fn(),
@@ -232,13 +237,16 @@ describe('connect_to_global_state', () => {
     queryService.setup({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
+      sessionStorage: new DataStorage(window.sessionStorage, 'opensearch_dashboards.'),
       defaultSearchInterceptor: mockSearchInterceptor,
+      application: setupMock.application,
     });
     queryServiceStart = queryService.start({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
       savedObjectsClient: startMock.savedObjects.client,
       indexPatterns: indexPatternsMock,
+      application: startMock.application,
     });
     filterManager = queryServiceStart.filterManager;
     timeFilter = queryServiceStart.timefilter.timefilter;
@@ -473,13 +481,16 @@ describe('connect_to_app_state', () => {
     queryService.setup({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
+      sessionStorage: new DataStorage(window.sessionStorage, 'opensearch_dashboards.'),
       defaultSearchInterceptor: mockSearchInterceptor,
+      application: setupMock.application,
     });
     queryServiceStart = queryService.start({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
       savedObjectsClient: startMock.savedObjects.client,
       indexPatterns: indexPatternsMock,
+      application: startMock.application,
     });
     filterManager = queryServiceStart.filterManager;
     indexPatternsMock = ({
@@ -659,13 +670,16 @@ describe('filters with different state', () => {
     queryService.setup({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
+      sessionStorage: new DataStorage(window.sessionStorage, 'opensearch_dashboards.'),
       defaultSearchInterceptor: mockSearchInterceptor,
+      application: setupMock.application,
     });
     queryServiceStart = queryService.start({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
       savedObjectsClient: startMock.savedObjects.client,
       indexPatterns: indexPatternsMock,
+      application: startMock.application,
     });
     filterManager = queryServiceStart.filterManager;
     indexPatternsMock = ({
diff --git a/src/plugins/data/public/query/state_sync/sync_state_with_url.test.ts b/src/plugins/data/public/query/state_sync/sync_state_with_url.test.ts
index ca87637eb467..24abf6951cde 100644
--- a/src/plugins/data/public/query/state_sync/sync_state_with_url.test.ts
+++ b/src/plugins/data/public/query/state_sync/sync_state_with_url.test.ts
@@ -48,6 +48,7 @@ import { QueryService, QueryStart } from '../query_service';
 import { TimefilterContract } from '../timefilter';
 import { syncQueryStateWithUrl } from './sync_state_with_url';
 import { QueryState } from './types';
+import { ISearchInterceptor } from '../../search';
 
 const setupMock = coreMock.createSetup();
 const startMock = coreMock.createStart();
@@ -66,6 +67,8 @@ setupMock.uiSettings.get.mockImplementation((key: string) => {
       return { pause: false, value: 0 };
     case UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED:
       return false;
+    case UI_SETTINGS.SEARCH_MAX_RECENT_DATASETS:
+      return 4;
     default:
       throw new Error(`sync_query test: not mocked uiSetting: ${key}`);
   }
@@ -87,6 +90,7 @@ describe('sync_query_state_with_url', () => {
 
   let filterManagerChangeSub: Subscription;
   let filterManagerChangeTriggered = jest.fn();
+  let mockSearchInterceptor: jest.Mocked<ISearchInterceptor>;
 
   let gF: Filter;
   let aF: Filter;
@@ -99,12 +103,16 @@ describe('sync_query_state_with_url', () => {
     queryService.setup({
       uiSettings: setupMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
+      sessionStorage: new DataStorage(window.sessionStorage, 'opensearch_dashboards.'),
+      defaultSearchInterceptor: mockSearchInterceptor,
+      application: setupMock.application,
     });
     queryServiceStart = queryService.start({
       indexPatterns: indexPatternsMock,
       uiSettings: startMock.uiSettings,
       storage: new DataStorage(window.localStorage, 'opensearch_dashboards.'),
       savedObjectsClient: startMock.savedObjects.client,
+      application: startMock.application,
     });
     filterManager = queryServiceStart.filterManager;
     timefilter = queryServiceStart.timefilter.timefilter;
diff --git a/src/plugins/data/public/query/types.ts b/src/plugins/data/public/query/types.ts
index bacdc6b9b8e4..86ef7fa7e8f6 100644
--- a/src/plugins/data/public/query/types.ts
+++ b/src/plugins/data/public/query/types.ts
@@ -7,6 +7,8 @@ import {
   ApplicationSetup,
   ApplicationStart,
   IUiSettingsClient,
+  NotificationsSetup,
+  NotificationsStart,
   SavedObjectsClientContract,
 } from 'opensearch-dashboards/public';
 import { Observable } from 'rxjs';
@@ -43,7 +45,8 @@ export interface QueryServiceSetupDependencies {
   storage: DataStorage;
   sessionStorage: DataStorage;
   defaultSearchInterceptor: ISearchInterceptor;
-  applicaton: ApplicationSetup;
+  application: ApplicationSetup;
+  notifications: NotificationsSetup;
 }
 
 /** @internal */
@@ -52,5 +55,6 @@ export interface QueryServiceStartDependencies {
   storage: DataStorage;
   uiSettings: IUiSettingsClient;
   indexPatterns: IndexPatternsService;
-  applicaton: ApplicationStart;
+  application: ApplicationStart;
+  notifications: NotificationsStart;
 }
diff --git a/src/plugins/data/public/services.ts b/src/plugins/data/public/services.ts
index d75dab2986ca..c042c2b6d9b8 100644
--- a/src/plugins/data/public/services.ts
+++ b/src/plugins/data/public/services.ts
@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { NotificationsStart, CoreStart } from 'src/core/public';
+import { NotificationsStart, CoreStart, ApplicationStart } from 'src/core/public';
 import { FieldFormatsStart } from './field_formats';
 import { createGetterSetter } from '../../opensearch_dashboards_utils/public';
 import { IndexPatternsContract } from './index_patterns';
@@ -61,3 +61,5 @@ export const [getSearchService, setSearchService] = createGetterSetter<
 >('Search');
 
 export const [getUiService, setUiService] = createGetterSetter<DataPublicPluginStart['ui']>('Ui');
+
+export const [getApplication, setApplication] = createGetterSetter<ApplicationStart>('Application');
diff --git a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
index 0fd82fc1b9ca..2f92480a4413 100644
--- a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
+++ b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
@@ -19,7 +19,9 @@
   &__advancedModal {
     width: 1200px;
     height: 800px;
-    max-height: calc(100vh - $euiSizeS);
+
+    // euiOverlayMask pushes the modal up due to having padding-bottom: 10vh
+    max-height: calc(90vh - $euiSizeL);
 
     .euiModal__flex {
       max-height: none;
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.test.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.test.tsx
index 1738cd4bc0d4..4621a4a4d3e7 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.test.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.test.tsx
@@ -19,7 +19,7 @@ jest.mock('../../services', () => ({
 describe('DatasetSelector', () => {
   const nextTick = () => new Promise((res) => process.nextTick(res));
 
-  const fetchMock = jest.fn().mockResolvedValue({ children: [] });
+  const fetchMock = jest.fn().mockResolvedValue([]);
   const setDatasetsMock = jest.fn();
   const mockDatasetTypeConfig: DatasetTypeConfig = {
     id: 'mockType',
@@ -56,6 +56,8 @@ describe('DatasetSelector', () => {
       queryString: {
         getDatasetService: jest.fn().mockReturnValue({
           getType: getTypeMock,
+          getRecentDatasets: jest.fn().mockReturnValue([]),
+          addRecentDataset: jest.fn(),
         }),
       },
     });
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
index 1b46d5a9176c..691f477a5818 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
@@ -11,22 +11,53 @@ import {
   EuiSelectable,
   EuiSelectableOption,
   EuiSmallButtonEmpty,
+  EuiSmallButton,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { i18n } from '@osd/i18n';
 import { toMountPoint } from '../../../../opensearch_dashboards_react/public';
 import { Dataset, DEFAULT_DATA } from '../../../common';
 import { getQueryService } from '../../services';
 import { IDataPluginServices } from '../../types';
 import { AdvancedSelector } from './advanced_selector';
 
+export enum DatasetSelectorAppearance {
+  Button = 'button',
+  None = 'none',
+}
+
+type EuiSmallButtonProps = React.ComponentProps<typeof EuiSmallButton>;
+type EuiSmallButtonEmptyProps = React.ComponentProps<typeof EuiSmallButtonEmpty>;
+
 interface DatasetSelectorProps {
   selectedDataset?: Dataset;
   setSelectedDataset: (dataset: Dataset) => void;
   services: IDataPluginServices;
 }
 
+export interface DatasetSelectorUsingButtonProps {
+  appearance: DatasetSelectorAppearance.Button;
+  buttonProps?: EuiSmallButtonProps;
+}
+
+export interface DatasetSelectorUsingButtonEmptyProps {
+  appearance?: DatasetSelectorAppearance.None;
+  buttonProps?: EuiSmallButtonEmptyProps;
+}
+
+const RootComponent: React.FC<
+  (EuiSmallButtonEmptyProps | EuiSmallButtonProps) & { appearance?: DatasetSelectorAppearance }
+> = (props) => {
+  const { appearance, ...rest } = props;
+  if (appearance === DatasetSelectorAppearance.Button) {
+    return <EuiSmallButton {...(rest as EuiSmallButtonProps)} />;
+  } else {
+    return <EuiSmallButtonEmpty {...(rest as EuiSmallButtonEmptyProps)} />;
+  }
+};
+
 /**
  * This component provides a dropdown selector for datasets and an advanced selector modal.
  * It fetches datasets once on mount to populate the selector options.
@@ -41,10 +72,13 @@ export const DatasetSelector = ({
   selectedDataset,
   setSelectedDataset,
   services,
-}: DatasetSelectorProps) => {
+  appearance,
+  buttonProps,
+}: DatasetSelectorProps &
+  (DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
   const isMounted = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [indexPatterns, setIndexPatterns] = useState<Dataset[]>([]);
   const { overlays } = services;
   const datasetService = getQueryService().queryString.getDatasetService();
   const datasetIcon =
@@ -64,7 +98,7 @@ export const DatasetSelector = ({
         fetchedIndexPatternDataStructures.children?.map((pattern) =>
           typeConfig.toDataset([pattern])
         ) ?? [];
-      setDatasets(fetchedDatasets);
+      setIndexPatterns(fetchedDatasets);
 
       // If no dataset is selected, select the first one
       if (!selectedDataset && fetchedDatasets.length > 0) {
@@ -81,6 +115,12 @@ export const DatasetSelector = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [datasetService]);
 
+  const recentDatasets = useMemo(() => {
+    return datasetService.getRecentDatasets();
+    // NOTE: Intentionally adding dependencies to ensure that we have the latest recentDatasets
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, datasetService]);
+
   const togglePopover = useCallback(async () => {
     setIsOpen(!isOpen);
   }, [isOpen]);
@@ -88,38 +128,62 @@ export const DatasetSelector = ({
   const closePopover = useCallback(() => setIsOpen(false), []);
 
   const options = useMemo(() => {
-    const newOptions: EuiSelectableOption[] = [
-      {
-        label: 'Index patterns',
-        isGroupLabel: true,
-      },
-    ];
-
-    datasets.forEach(({ id, title, type, dataSource }) => {
-      const label = dataSource ? `${dataSource.title}::${title}` : title;
-      newOptions.push({
-        label,
-        checked: id === selectedDataset?.id ? 'on' : undefined,
-        key: id,
-        prepend: <EuiIcon type={datasetService.getType(type)!.meta.icon.type} />,
+    const buildDatasetOptions = (
+      groupLabel: string,
+      ds: Dataset[],
+      selectedDatasetId: string | undefined
+    ): EuiSelectableOption[] => {
+      const datasetOptions: EuiSelectableOption[] = [
+        {
+          label: groupLabel,
+          isGroupLabel: true,
+        },
+      ];
+      ds.forEach(({ id, title, type, dataSource }) => {
+        const label = dataSource ? `${dataSource.title}::${title}` : title;
+        datasetOptions.push({
+          label,
+          checked: id === selectedDatasetId ? 'on' : undefined,
+          key: id,
+          prepend: <EuiIcon type={datasetService.getType(type)!.meta.icon.type} />,
+        });
       });
-    });
+      return datasetOptions.length > 1 ? datasetOptions : [];
+    };
+    const recentDatasetOptions = buildDatasetOptions(
+      i18n.translate('data.dataSelector.recentDatasetsGroupLabel', {
+        defaultMessage: 'Recently selected data',
+      }),
+      recentDatasets,
+      selectedDataset?.id
+    );
+    const indexPatternOptions = buildDatasetOptions(
+      i18n.translate('data.dataSelector.indexPatternsGroupLabel', {
+        defaultMessage: 'Index patterns',
+      }),
+      indexPatterns.filter(
+        (dataset) => !recentDatasets.some((recentDataset) => recentDataset.id === dataset.id)
+      ),
+      selectedDataset?.id
+    );
 
-    return newOptions;
-  }, [datasets, selectedDataset?.id, datasetService]);
+    return [...recentDatasetOptions, ...indexPatternOptions];
+  }, [indexPatterns, selectedDataset?.id, datasetService, recentDatasets]);
 
   const handleOptionChange = useCallback(
     (newOptions: EuiSelectableOption[]) => {
       const selectedOption = newOptions.find((option) => option.checked === 'on');
       if (selectedOption) {
-        const foundDataset = datasets.find((dataset) => dataset.id === selectedOption.key);
+        const foundDataset =
+          recentDatasets.find((dataset) => dataset.id === selectedOption.key) ||
+          indexPatterns.find((dataset) => dataset.id === selectedOption.key);
         if (foundDataset) {
           closePopover();
           setSelectedDataset(foundDataset);
         }
       }
     },
-    [datasets, setSelectedDataset, closePopover]
+    [recentDatasets, indexPatterns, setSelectedDataset, closePopover]
   );
 
   const datasetTitle = useMemo(() => {
@@ -137,8 +201,18 @@ export const DatasetSelector = ({
   return (
     <EuiPopover
       button={
-        <EuiToolTip content={`${selectedDataset?.title ?? 'Select data'}`}>
-          <EuiSmallButtonEmpty
+        <EuiToolTip
+          display="block"
+          content={`${
+            selectedDataset?.title ??
+            i18n.translate('data.dataSelector.defaultTitle', {
+              defaultMessage: 'Select data',
+            })
+          }`}
+        >
+          <RootComponent
+            appearance={appearance}
+            {...buttonProps}
             className="datasetSelector__button"
             iconType="arrowDown"
             iconSide="right"
@@ -146,7 +220,7 @@ export const DatasetSelector = ({
           >
             <EuiIcon type={datasetIcon} className="datasetSelector__icon" />
             {datasetTitle}
-          </EuiSmallButtonEmpty>
+          </RootComponent>
         </EuiToolTip>
       }
       isOpen={isOpen}
diff --git a/src/plugins/data/public/ui/dataset_selector/index.test.tsx b/src/plugins/data/public/ui/dataset_selector/index.test.tsx
index 3bd94d043ec8..77528eaea532 100644
--- a/src/plugins/data/public/ui/dataset_selector/index.test.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/index.test.tsx
@@ -19,11 +19,19 @@ jest.mock('./dataset_selector', () => ({
 }));
 
 describe('ConnectedDatasetSelector', () => {
+  const mockSubscribe = jest.fn();
+  const mockUnsubscribe = jest.fn();
   const mockQueryString = {
     getQuery: jest.fn().mockReturnValue({}),
     getDefaultQuery: jest.fn().mockReturnValue({}),
     getInitialQueryByDataset: jest.fn().mockReturnValue({}),
     setQuery: jest.fn(),
+    getDatasetService: jest.fn().mockReturnValue({
+      addRecentDataset: jest.fn(),
+    }),
+    getUpdates$: jest.fn().mockReturnValue({
+      subscribe: mockSubscribe.mockReturnValue({ unsubscribe: mockUnsubscribe }),
+    }),
   };
   const mockOnSubmit = jest.fn();
   const mockServices = {
diff --git a/src/plugins/data/public/ui/dataset_selector/index.tsx b/src/plugins/data/public/ui/dataset_selector/index.tsx
index fa6dea8f0035..53966ed6375f 100644
--- a/src/plugins/data/public/ui/dataset_selector/index.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/index.tsx
@@ -3,10 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import React from 'react';
 import { Dataset, Query, TimeRange } from '../../../common';
-import { DatasetSelector } from './dataset_selector';
+import {
+  DatasetSelector,
+  DatasetSelectorUsingButtonEmptyProps,
+  DatasetSelectorUsingButtonProps,
+  DatasetSelectorAppearance,
+} from './dataset_selector';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { IDataPluginServices } from '../../types';
 
@@ -14,13 +19,27 @@ interface ConnectedDatasetSelectorProps {
   onSubmit: ((query: Query, dateRange?: TimeRange | undefined) => void) | undefined;
 }
 
-const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) => {
+const ConnectedDatasetSelector = ({
+  onSubmit,
+  ...datasetSelectorProps
+}: ConnectedDatasetSelectorProps &
+  (DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
   const { services } = useOpenSearchDashboards<IDataPluginServices>();
   const queryString = services.data.query.queryString;
   const [selectedDataset, setSelectedDataset] = useState<Dataset | undefined>(
     () => queryString.getQuery().dataset || queryString.getDefaultQuery().dataset
   );
 
+  useEffect(() => {
+    const subscription = queryString.getUpdates$().subscribe((query) => {
+      setSelectedDataset(query.dataset);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [queryString]);
+
   const handleDatasetChange = useCallback(
     (dataset?: Dataset) => {
       setSelectedDataset(dataset);
@@ -28,6 +47,7 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =
         const query = queryString.getInitialQueryByDataset(dataset);
         queryString.setQuery(query);
         onSubmit!(queryString.getQuery());
+        queryString.getDatasetService().addRecentDataset(dataset);
       }
     },
     [onSubmit, queryString]
@@ -35,6 +55,7 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =
 
   return (
     <DatasetSelector
+      {...datasetSelectorProps}
       selectedDataset={selectedDataset}
       setSelectedDataset={handleDatasetChange}
       services={services}
@@ -42,4 +63,8 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =
   );
 };
 
-export { ConnectedDatasetSelector as DatasetSelector };
+export {
+  ConnectedDatasetSelector as DatasetSelector,
+  ConnectedDatasetSelectorProps as DatasetSelectorProps,
+  DatasetSelectorAppearance,
+};
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
index 2f347b6e2996..9cab10db15f7 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -81,4 +81,8 @@
   &--compressed {
     margin-top: -$euiSizeS;
   }
+
+  &__allFiltersPopover {
+    background-color: $euiFormInputGroupLabelBackground;
+  }
 }
diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
index 131d317ecbc5..6de37d562ce1 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_options.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -88,8 +88,7 @@ const FilterOptionsUI = (props: Props) => {
   const uiSettings = opensearchDashboards.services.uiSettings;
   const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
   const useNewHeader = Boolean(uiSettings!.get(UI_SETTINGS.NEW_HOME_PAGE));
-  const [indexPattern] = props.indexPatterns;
-  const index = indexPattern && indexPattern.id;
+  const index = Array.isArray(props.indexPatterns) ? props.indexPatterns[0]?.id : undefined;
   const newFilter = buildEmptyFilter(isPinned, index);
 
   const togglePopover = () => {
@@ -407,7 +406,6 @@ const FilterOptionsUI = (props: Props) => {
     return (
       <EuiPopover
         id="popoverForAllFilters"
-        className="globalFilterGroup__allFiltersPopover"
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         button={savedQueryPopoverButton}
@@ -425,7 +423,7 @@ const FilterOptionsUI = (props: Props) => {
   return (
     <EuiPopover
       id="popoverForAllFilters"
-      className="globalFilterGroup__allFiltersPopover"
+      className={useNewHeader ? 'globalFilterGroup__allFiltersPopover' : undefined}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       button={props.useSaveQueryMenu ? savedQueryPopoverButton : filterPopoverButton}
diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts
index a5ee305d0b53..bdde4cc42a39 100644
--- a/src/plugins/data/public/ui/index.ts
+++ b/src/plugins/data/public/ui/index.ts
@@ -28,7 +28,7 @@
  * under the License.
  */
 
-export { UiEnhancements, IUiStart, IUiSetup } from './types';
+export { IUiStart, IUiSetup } from './types';
 export { IndexPatternSelectProps } from './index_pattern_select';
 export { FilterLabel } from './filter_bar';
 export { QueryStringInput, QueryStringInputProps } from './query_string_input';
@@ -51,3 +51,4 @@ export {
   useQueryStringManager,
 } from './search_bar';
 export { SuggestionsComponent } from './typeahead';
+export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector';
diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
index 1e53bf9ea570..68e06485f77c 100644
--- a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
+++ b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
@@ -198,6 +198,9 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
               "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
             },
             "logstash": "https://opensearch.org/docs/mocked-test-branch",
+            "lucene": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+            },
             "management": Object {
               "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
               "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -214,6 +217,9 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
               "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
             },
             "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+            "ppl": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+            },
             "reIndex": Object {
               "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
             },
@@ -244,6 +250,9 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
               "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
               "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
             },
+            "sql": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+            },
             "tutorial": Object {
               "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
               "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -499,7 +508,6 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
         <EuiSmallButtonEmpty
           className="languageSelector__button"
           iconSide="right"
-          iconSize="s"
           iconType="arrowDown"
           onClick={[Function]}
         >
@@ -523,14 +531,12 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
           <EuiSmallButtonEmpty
             className="languageSelector__button"
             iconSide="right"
-            iconSize="s"
             iconType="arrowDown"
             onClick={[Function]}
           >
             <EuiButtonEmpty
               className="languageSelector__button"
               iconSide="right"
-              iconSize="s"
               iconType="arrowDown"
               onClick={[Function]}
               size="s"
@@ -538,7 +544,6 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
               <button
                 className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small languageSelector__button"
                 disabled={false}
-                iconSize="s"
                 onClick={[Function]}
                 type="button"
               >
@@ -785,6 +790,9 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
               "userAgentProcessor": "https://opensearch.org/docs/mocked-test-branch",
             },
             "logstash": "https://opensearch.org/docs/mocked-test-branch",
+            "lucene": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/query-dsl/full-text/query-string/",
+            },
             "management": Object {
               "dashboardSettings": "https://opensearch.org/docs/mocked-test-branch",
               "opensearchDashboardsGeneralSettings": "https://opensearch.org/docs/mocked-test-branch",
@@ -801,6 +809,9 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
               "usage": "https://opensearch.org/docs/mocked-test-branch/api-reference/nodes-apis/nodes-usage/",
             },
             "painless_execute": "https://opensearch.org/docs/mocked-test-branch/api-reference/script-apis/exec-script/",
+            "ppl": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/ppl/syntax/",
+            },
             "reIndex": Object {
               "rethrottle": "https://opensearch.org/docs/mocked-test-branch",
             },
@@ -831,6 +842,9 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
               "deleteSnapshot": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/delete-snapshot/",
               "veirfyRepository": "https://opensearch.org/docs/mocked-test-branch/api-reference/snapshots/verify-snapshot-repository/",
             },
+            "sql": Object {
+              "base": "https://opensearch.org/docs/mocked-test-branch/search-plugins/sql/sql/basic/",
+            },
             "tutorial": Object {
               "loadDataTutorial": "https://opensearch.org/docs/mocked-test-branch",
               "visualizeTutorial": "https://opensearch.org/docs/mocked-test-branch",
@@ -1086,7 +1100,6 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
         <EuiSmallButtonEmpty
           className="languageSelector__button"
           iconSide="right"
-          iconSize="s"
           iconType="arrowDown"
           onClick={[Function]}
         >
@@ -1110,14 +1123,12 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
           <EuiSmallButtonEmpty
             className="languageSelector__button"
             iconSide="right"
-            iconSize="s"
             iconType="arrowDown"
             onClick={[Function]}
           >
             <EuiButtonEmpty
               className="languageSelector__button"
               iconSide="right"
-              iconSize="s"
               iconType="arrowDown"
               onClick={[Function]}
               size="s"
@@ -1125,7 +1136,6 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
               <button
                 className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small languageSelector__button"
                 disabled={false}
-                iconSize="s"
                 onClick={[Function]}
                 type="button"
               >
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
index a970a970853b..cf2321cf3d4e 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -137,7 +137,7 @@
 .osdQueryEditor__header {
   display: flex;
   align-items: center;
-  padding: 0 $euiSizeXS $euiSizeXS;
+  padding: 0 $euiSizeXS $euiSizeS;
 }
 
 .osdQueryEditor__topBar {
@@ -150,9 +150,6 @@
   }
 
   .osdQueryEditor__querycontrols {
-    float: right;
-    margin: $euiSizeS $euiSizeS;
-
     .osdQueryEditor__extensionQueryControls {
       display: flex;
       padding: 0 $euiSizeS 0 $euiSizeXS;
@@ -187,13 +184,19 @@
 
 .osdQuerEditor__singleLine {
   padding: calc($euiSizeXS + 1px);
-  background-color: $euiColorEmptyShade;
   overflow: initial !important; // needed for suggestion window, otherwise will be hidden in child
   min-width: 0;
 
   .monaco-editor .view-overlays .current-line {
     border: none;
   }
+
+  &,
+  & .monaco-editor,
+  & .monaco-editor .inputarea.ime-input,
+  & .monaco-editor-background {
+    background-color: $euiFormBackgroundColor;
+  }
 }
 
 .suggest-widget {
diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss b/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss
index ccebd35c4ead..2516c32ec27c 100644
--- a/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss
@@ -1,9 +1,38 @@
 .defaultEditor {
   border: $euiBorderThin;
   border-radius: $euiSizeXS;
-  margin: 0 $euiSizeXS $euiSizeXS;
 
   &__footer {
-    margin-left: $euiSizeXS;
+    padding-left: $euiSizeXS;
+    background-color: $euiColorLightestShade;
   }
+
+  .monaco-editor {
+    border-radius: $euiSizeXS $euiSizeXS 0 0;
+
+    .margin {
+      border-radius: $euiSizeXS 0 0 0;
+      background-color: $euiFormBackgroundColor;
+      padding: 0 $euiSizeXS;
+    }
+
+    .view-lines {
+      padding: 0 $euiSizeXS;
+    }
+
+    .monaco-scrollable-element {
+      border-radius: 0 $euiSizeXS 0 0;
+    }
+  }
+
+  .monaco-editor,
+  .monaco-editor-background,
+  .monaco-editor .inputarea.ime-input,
+  .monaco-editor .decorationsOverviewRuler {
+    background-color: $euiColorEmptyShade;
+  }
+}
+
+.defaultEditor__footerRow {
+  gap: $euiSizeM;
 }
diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
index 764b25d4b9ac..0d76ff0e78f3 100644
--- a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
+++ b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
@@ -43,14 +43,15 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
         options={{
           minimap: { enabled: false },
           scrollBeyondLastLine: false,
-          fontSize: 14,
-          fontFamily: 'Roboto Mono',
+          fontSize: 12,
+          lineHeight: 20,
+          fontFamily: 'var(--font-code)',
           lineNumbers: 'on',
           folding: true,
           wordWrap: 'on',
           wrappingIndent: 'same',
           lineDecorationsWidth: 0,
-          lineNumbersMinChars: 2,
+          lineNumbersMinChars: 1,
           wordBasedSuggestions: false,
         }}
         suggestionProvider={{
@@ -70,15 +71,28 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
       />
       <div className="defaultEditor__footer">
         {footerItems && (
-          <EuiFlexGroup direction="row" alignItems="center">
-            {footerItems.start?.map((item) => (
-              <EuiFlexItem grow={false} className="defaultEditor__footerItem">
+          <EuiFlexGroup
+            direction="row"
+            alignItems="center"
+            gutterSize="none"
+            className="defaultEditor__footerRow"
+          >
+            {footerItems.start?.map((item, idx) => (
+              <EuiFlexItem
+                key={`defaultEditor__footerItem-start-${idx}`}
+                grow={false}
+                className="defaultEditor__footerItem"
+              >
                 {item}
               </EuiFlexItem>
             ))}
             <EuiFlexItem grow />
-            {footerItems.end?.map((item) => (
-              <EuiFlexItem grow={false} className="defaultEditor__footerItem">
+            {footerItems.end?.map((item, idx) => (
+              <EuiFlexItem
+                key={`defaultEditor__footerItem-end-${idx}`}
+                grow={false}
+                className="defaultEditor__footerItem"
+              >
                 {item}
               </EuiFlexItem>
             ))}
diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx
index ed7598fea563..6fc0606c1997 100644
--- a/src/plugins/data/public/ui/query_editor/language_selector.tsx
+++ b/src/plugins/data/public/ui/query_editor/language_selector.tsx
@@ -111,7 +111,6 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
       button={
         <EuiSmallButtonEmpty
           iconSide="right"
-          iconSize="s"
           onClick={onButtonClick}
           className="languageSelector__button"
           iconType="arrowDown"
diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
index 1516c1c28266..4df7b9e13c35 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -36,7 +36,6 @@ import { SuggestionsListSize } from '../typeahead/suggestions_component';
 import { QueryLanguageSelector } from './language_selector';
 import { QueryEditorExtensions } from './query_editor_extensions';
 import { getQueryService, getIndexPatterns } from '../../services';
-import { DatasetSelector } from '../dataset_selector';
 import { DefaultInputProps } from './editors';
 import { MonacoCompatibleQuerySuggestion } from '../../autocomplete/providers/query_suggestion_provider';
 
@@ -454,7 +453,6 @@ export default class QueryEditorUI extends Component<Props, State> {
           className={classNames('osdQueryEditor__banner', this.props.bannerClassName)}
         />
         <div className="osdQueryEditor__topBar">
-          <DatasetSelector onSubmit={this.props.onSubmit} />
           <div className="osdQueryEditor__input">
             {this.state.isCollapsed
               ? languageEditor.TopBar.Collapsed()
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
index 62ba24527cd5..ab9b8c50e038 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
@@ -15,7 +15,15 @@ import {
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
-import { IDataPluginServices, IIndexPattern, Query, TimeHistoryContract, TimeRange } from '../..';
+import {
+  DatasetSelector,
+  DatasetSelectorAppearance,
+  IDataPluginServices,
+  IIndexPattern,
+  Query,
+  TimeHistoryContract,
+  TimeRange,
+} from '../..';
 import {
   useOpenSearchDashboards,
   withOpenSearchDashboards,
@@ -52,6 +60,7 @@ export interface QueryEditorTopRowProps {
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
   indicateNoData?: boolean;
+  datasetSelectorRef?: React.RefObject<HTMLDivElement>;
   datePickerRef?: React.RefObject<HTMLDivElement>;
   savedQueryManagement?: any;
   queryStatus?: QueryStatus;
@@ -63,14 +72,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
   const [isDateRangeInvalid, setIsDateRangeInvalid] = useState(false);
   const [isQueryEditorFocused, setIsQueryEditorFocused] = useState(false);
   const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
-  const {
-    uiSettings,
-    storage,
-    appName,
-    data: {
-      query: { queryString },
-    },
-  } = opensearchDashboards.services;
+  const { uiSettings, storage, appName } = opensearchDashboards.services;
 
   const queryLanguage = props.query && props.query.language;
   const persistedLog: PersistedLog | undefined = React.useMemo(
@@ -170,6 +172,19 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     return valueAsMoment.toISOString();
   }
 
+  function renderDatasetSelector() {
+    return (
+      <DatasetSelector
+        onSubmit={onInputSubmit}
+        appearance={DatasetSelectorAppearance.Button}
+        buttonProps={{
+          color: 'text',
+          fullWidth: true,
+        }}
+      />
+    );
+  }
+
   function renderQueryEditor() {
     if (!shouldRenderQueryEditor()) return;
     return (
@@ -315,6 +330,8 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     </EuiFlexGroup>
   );
 
+  const datasetSelector = <>{renderDatasetSelector()}</>;
+
   return (
     <EuiFlexGroup
       className={classes}
@@ -323,6 +340,8 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
       direction="column"
       justifyContent="flexEnd"
     >
+      {props?.datasetSelectorRef?.current &&
+        createPortal(datasetSelector, props.datasetSelectorRef.current)}
       {props?.datePickerRef?.current && uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED)
         ? createPortal(datePicker, props.datePickerRef.current)
         : datePicker}
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
index 3976a12d594d..e240d89281bf 100644
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -91,3 +91,7 @@
     }
   }
 }
+
+.osdQueryBar--hideEmpty:empty {
+  display: none;
+}
diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
index 14b9ef6d8fd9..45e718fd52ba 100644
--- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
@@ -402,7 +402,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
       >
         {renderQueryInput()}
         {renderSharingMetaFields()}
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} className="osdQueryBar--hideEmpty">
           {shouldUseDatePickerRef
             ? createPortal(renderUpdateButton(), props.datePickerRef!.current!)
             : renderUpdateButton()}
diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
index 03bb2abfa508..f8b9694caabc 100644
--- a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -209,6 +209,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           onClearSavedQuery={defaultOnClearSavedQuery(props, clearSavedQuery)}
           onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, setSavedQuery)}
           onSaved={defaultOnSavedQueryUpdated(props, setSavedQuery)}
+          datasetSelectorRef={props.datasetSelectorRef}
           datePickerRef={props.datePickerRef}
           isFilterBarPortable={props.isFilterBarPortable}
           {...overrideDefaultBehaviors(props)}
diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
index 975b0535c9d8..35c2065b14c8 100644
--- a/src/plugins/data/public/ui/search_bar/search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -75,6 +75,7 @@ export interface SearchBarOwnProps {
   refreshInterval?: number;
   dateRangeFrom?: string;
   dateRangeTo?: string;
+  datasetSelectorRef?: React.RefObject<HTMLDivElement>;
   datePickerRef?: React.RefObject<HTMLDivElement>;
   // Query bar - should be in SearchBarInjectedDeps
   query?: Query;
@@ -223,7 +224,8 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     const showDatePicker = this.props.showDatePicker || this.props.showAutoRefreshOnly;
     // TODO: MQL showQueryEditor should be a prop of it's own but using showQueryInput for now
     const showQueryEditor =
-      this.props.showQueryInput && this.props.indexPatterns && this.state.query;
+      (this.props.showQueryInput && this.props.indexPatterns && this.state.query) ||
+      this.props.datasetSelectorRef?.current;
     return this.props.showQueryBar && (showDatePicker || showQueryEditor);
   }
 
@@ -549,6 +551,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           filterBar={filterBar}
           dataTestSubj={this.props.dataTestSubj}
           indicateNoData={this.props.indicateNoData}
+          datasetSelectorRef={this.props.datasetSelectorRef}
           datePickerRef={this.props.datePickerRef}
           savedQueryManagement={searchBarMenu(false, true)}
           queryStatus={this.props.queryStatus}
diff --git a/src/plugins/data/public/ui/ui_service.ts b/src/plugins/data/public/ui/ui_service.ts
index 4eb45b1a67f2..87cfcf630965 100644
--- a/src/plugins/data/public/ui/ui_service.ts
+++ b/src/plugins/data/public/ui/ui_service.ts
@@ -4,7 +4,6 @@
  */
 
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
-import { BehaviorSubject } from 'rxjs';
 import { ConfigSchema } from '../../config';
 import { DataPublicPluginStart } from '../types';
 import { createIndexPatternSelect } from './index_pattern_select';
@@ -12,8 +11,6 @@ import { createSearchBar } from './search_bar/create_search_bar';
 import { SuggestionsComponent } from './typeahead';
 import { IUiSetup, IUiStart } from './types';
 import { DataStorage } from '../../common';
-import { QueryStatus } from '../query';
-import { ResultStatus } from '../query/query_string/language_service/lib';
 
 /** @internal */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
diff --git a/src/plugins/data/server/dql_telemetry/route.ts b/src/plugins/data/server/dql_telemetry/route.ts
index 2f2f3459658d..e18afcaf8b91 100644
--- a/src/plugins/data/server/dql_telemetry/route.ts
+++ b/src/plugins/data/server/dql_telemetry/route.ts
@@ -47,7 +47,6 @@ export function registerDqlTelemetryRoute(
     },
     async (context, request, response) => {
       const [{ savedObjects }] = await getStartServices();
-      const internalRepository = savedObjects.createScopedRepository(request);
 
       const {
         body: { opt_in: optIn },
@@ -56,11 +55,12 @@ export function registerDqlTelemetryRoute(
       const counterName = optIn ? 'optInCount' : 'optOutCount';
 
       try {
+        const internalRepository = savedObjects.createScopedRepository(request);
         await internalRepository.incrementCounter('dql-telemetry', 'dql-telemetry', counterName);
       } catch (error) {
         logger.warn(`Unable to increment counter: ${error}`);
         return response.customError({
-          statusCode: error.status,
+          statusCode: error.status || 403,
           body: {
             message: 'Something went wrong',
             attributes: {
diff --git a/src/plugins/data/server/plugin.ts b/src/plugins/data/server/plugin.ts
index a1e52fbb66a1..c9ca35a18cf6 100644
--- a/src/plugins/data/server/plugin.ts
+++ b/src/plugins/data/server/plugin.ts
@@ -106,7 +106,7 @@ export class DataServerPlugin
     this.autocompleteService.setup(core);
     this.dqlTelemetryService.setup(core, { usageCollection });
 
-    core.uiSettings.register(getUiSettings());
+    core.uiSettings.register(getUiSettings(core.workspace.isWorkspaceEnabled()));
 
     const searchSetup = await this.searchService.setup(core, {
       registerFunction: expressions.registerFunction,
diff --git a/src/plugins/data/server/ui_settings.ts b/src/plugins/data/server/ui_settings.ts
index e446b8330473..a9f664cea2e2 100644
--- a/src/plugins/data/server/ui_settings.ts
+++ b/src/plugins/data/server/ui_settings.ts
@@ -34,6 +34,10 @@ import { UiSettingsParams } from 'opensearch-dashboards/server';
 // @ts-ignore untyped module
 import numeralLanguages from '@elastic/numeral/languages';
 import { DEFAULT_QUERY_LANGUAGE, UI_SETTINGS } from '../common';
+// cannot import from core/server due to src/core/server/saved_objects/opensearch_query.js which
+// export { opensearchKuery } from '../../../plugins/data/server';
+// eslint-disable-next-line @osd/eslint/no-restricted-paths
+import { UiSettingScope } from '../../../core/server/ui_settings/types';
 
 const luceneQueryLanguageLabel = i18n.translate('data.advancedSettings.searchQueryLanguageLucene', {
   defaultMessage: 'Lucene',
@@ -79,7 +83,9 @@ const numeralLanguageIds = [
   }),
 ];
 
-export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
+export function getUiSettings(
+  workspaceEnabled: boolean
+): Record<string, UiSettingsParams<unknown>> {
   return {
     [UI_SETTINGS.META_FIELDS]: {
       name: i18n.translate('data.advancedSettings.metaFieldsTitle', {
@@ -200,6 +206,7 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
         defaultMessage: 'The index to access if no index is set',
       }),
       schema: schema.nullable(schema.string()),
+      scope: workspaceEnabled ? UiSettingScope.WORKSPACE : UiSettingScope.GLOBAL,
     },
     [UI_SETTINGS.COURIER_IGNORE_FILTER_IF_FIELD_NOT_IN_INDEX]: {
       name: i18n.translate('data.advancedSettings.courier.ignoreFilterTitle', {
@@ -788,7 +795,7 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
       }),
       value: ['none'],
       description: i18n.translate('data.advancedSettings.searchQueryLanguageBlocklistText', {
-        defaultMessage: `Additional languages that are blocked from being used in the query editor. 
+        defaultMessage: `Additional languages that are blocked from being used in the query editor.
          <strong>Note</strong>: DQL and Lucene will not be blocked even if set.`,
       }),
       schema: schema.arrayOf(schema.string()),
@@ -806,5 +813,14 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
       schema: schema.boolean(),
       category: ['search'],
     },
+    [UI_SETTINGS.SEARCH_MAX_RECENT_DATASETS]: {
+      name: i18n.translate('data.advancedSettings.searchMaxRecentDatasets', {
+        defaultMessage: 'Maximum datasets in recents list',
+      }),
+      value: 4,
+      type: 'number',
+      schema: schema.number(),
+      category: ['search'],
+    },
   };
 }
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
index f0320d5d9b8e..0d9b66b8e471 100644
--- a/src/plugins/data_explorer/public/components/app_container.scss
+++ b/src/plugins/data_explorer/public/components/app_container.scss
@@ -11,6 +11,7 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
 
 .deLayout {
   height: calc(100vh - #{$osdHeaderOffset * 1});
+  padding: $euiSizeS;
 
   &.dsc--next {
     height: calc(100vh - #{$osdHeaderOffset * 2});
@@ -19,6 +20,15 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
   &__canvas {
     height: 100%;
   }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  & > .euiResizableContainer {
+    gap: $euiSizeXS;
+  }
+
+  .globalQueryBar {
+    padding: 0;
+  }
 }
 
 .headerIsExpanded .deLayout {
diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx
index abd1328bafeb..63f759f65408 100644
--- a/src/plugins/data_explorer/public/components/app_container.tsx
+++ b/src/plugins/data_explorer/public/components/app_container.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -23,13 +23,7 @@ import './app_container.scss';
 import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
 import { IDataPluginServices } from '../../../data/public';
 import { QUERY_ENHANCEMENT_ENABLED_SETTING } from './constants';
-import {
-  DISCOVER_LOAD_EVENT,
-  NEW_DISCOVER_LOAD_EVENT,
-  NEW_DISCOVER_OPT_IN,
-  NEW_DISCOVER_OPT_OUT,
-  trackUiMetric,
-} from '../ui_metric';
+import { DISCOVER_LOAD_EVENT, NEW_DISCOVER_LOAD_EVENT, trackUiMetric } from '../ui_metric';
 
 export const AppContainer = React.memo(
   ({ view, params }: { view?: View; params: AppMountParameters }) => {
@@ -41,6 +35,7 @@ export const AppContainer = React.memo(
     const showActionsInGroup = uiSettings?.get('home:useNewHomePage');
 
     const topLinkRef = useRef<HTMLDivElement>(null);
+    const datasetSelectorRef = useRef<HTMLDivElement>(null);
     const datePickerRef = useRef<HTMLDivElement>(null);
 
     if (!view) {
@@ -59,6 +54,7 @@ export const AppContainer = React.memo(
 
     params.optionalRef = {
       topLinkRef,
+      datasetSelectorRef,
       datePickerRef,
     };
     // Render the application DOM.
@@ -103,7 +99,7 @@ export const AppContainer = React.memo(
                       mode={['collapsible', { position: 'top' }]}
                       paddingSize="none"
                     >
-                      <Sidebar>
+                      <Sidebar datasetSelectorRef={datasetSelectorRef}>
                         <MemoizedPanel {...params} />
                       </Sidebar>
                     </EuiResizablePanel>
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.scss b/src/plugins/data_explorer/public/components/sidebar/index.scss
index 1828568bc361..bdabfcdb5943 100644
--- a/src/plugins/data_explorer/public/components/sidebar/index.scss
+++ b/src/plugins/data_explorer/public/components/sidebar/index.scss
@@ -2,10 +2,6 @@
   &_panel {
     border-top: 0;
   }
-
-  &_dataSource {
-    border-bottom: $euiBorderThin !important;
-  }
 }
 
 .dataPanelTypeFilterPopover {
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
index 430d70fa9180..6a4ef0585e33 100644
--- a/src/plugins/data_explorer/public/components/sidebar/index.tsx
+++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -18,7 +18,12 @@ import { DataExplorerServices } from '../../types';
 import { setIndexPattern, useTypedDispatch, useTypedSelector } from '../../utils/state_management';
 import './index.scss';
 
-export const Sidebar: FC = ({ children }) => {
+interface SidebarProps {
+  children: React.ReactNode;
+  datasetSelectorRef: React.RefObject<HTMLDivElement>;
+}
+
+export const Sidebar: FC<SidebarProps> = ({ children, datasetSelectorRef }) => {
   const { indexPattern: indexPatternId } = useTypedSelector((state) => state.metadata);
   const dispatch = useTypedDispatch();
   const [selectedSources, setSelectedSources] = useState<DataSourceOption[]>([]);
@@ -119,16 +124,11 @@ export const Sidebar: FC = ({ children }) => {
       <EuiSplitPanel.Outer
         className="eui-yScroll deSidebar_panel"
         hasBorder={true}
-        borderRadius="none"
-        color="transparent"
+        borderRadius="l"
       >
-        {!isEnhancementEnabled && (
-          <EuiSplitPanel.Inner
-            paddingSize="s"
-            grow={false}
-            color="transparent"
-            className="deSidebar_dataSource"
-          >
+        <EuiSplitPanel.Inner paddingSize="s" grow={false} className="deSidebar_dataSource">
+          {isEnhancementEnabled && <div ref={datasetSelectorRef} />}
+          {!isEnhancementEnabled && (
             <DataSourceSelectable
               dataSources={activeDataSources}
               dataSourceOptionList={dataSourceOptionList}
@@ -139,8 +139,9 @@ export const Sidebar: FC = ({ children }) => {
               onRefresh={memorizedReload}
               fullWidth
             />
-          </EuiSplitPanel.Inner>
-        )}
+          )}
+        </EuiSplitPanel.Inner>
+
         <EuiSplitPanel.Inner paddingSize="none" color="transparent" className="eui-yScroll">
           {children}
         </EuiSplitPanel.Inner>
diff --git a/src/plugins/data_explorer/public/index.ts b/src/plugins/data_explorer/public/index.ts
index 6b0561261c16..f8adda434ced 100644
--- a/src/plugins/data_explorer/public/index.ts
+++ b/src/plugins/data_explorer/public/index.ts
@@ -18,5 +18,4 @@ export {
   useTypedSelector,
   useTypedDispatch,
   setIndexPattern,
-  setDataSet,
 } from './utils/state_management';
diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.test.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.test.tsx
index 6e0a1eef2059..87ed1e76d09e 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.test.tsx
@@ -10,10 +10,12 @@ import { DataSourceTable } from './data_source_table';
 import { mount, ReactWrapper } from 'enzyme';
 import { RouteComponentProps } from 'react-router-dom';
 import { wrapWithIntl } from 'test_utils/enzyme_helpers';
-import { ScopedHistory } from 'opensearch-dashboards/public';
+import { ScopedHistory, WorkspaceObject } from 'opensearch-dashboards/public';
 import { scopedHistoryMock } from '../../../../../core/public/mocks';
 import { OpenSearchDashboardsContextProvider } from '../../../../opensearch_dashboards_react/public';
 import { getMappedDataSources, mockManagementPlugin } from '../../mocks';
+import { BehaviorSubject } from 'rxjs';
+import { DEFAULT_DATA_SOURCE_UI_SETTINGS_ID } from '../constants';
 
 const deleteButtonIdentifier = '[data-test-subj="deleteDataSourceConnections"]';
 const tableIdentifier = 'EuiInMemoryTable';
@@ -62,7 +64,7 @@ describe('DataSourceTable', () => {
   describe('should get datasources successful', () => {
     beforeEach(async () => {
       spyOn(utils, 'getDataSources').and.returnValue(Promise.resolve(getMappedDataSources));
-      spyOn(uiSettings, 'get').and.returnValue('test1');
+      spyOn(uiSettings, 'get$').and.returnValue(new BehaviorSubject('test1'));
       await act(async () => {
         component = await mount(
           wrapWithIntl(
@@ -204,4 +206,227 @@ describe('DataSourceTable', () => {
       expect(component.find(emptyStateIdentifier).exists()).toBe(true);
     });
   });
+
+  describe('data source table with actions', () => {
+    beforeEach(() => {
+      spyOn(utils, 'getDataSources').and.returnValue(Promise.resolve(getMappedDataSources));
+      spyOn(uiSettings, 'get$').and.returnValue(new BehaviorSubject('test1'));
+    });
+
+    test('should display set as default action', async () => {
+      const currentWorkspace$ = mockedContext.workspaces.currentWorkspace$;
+      // Mock that there is current workspace
+      mockedContext.workspaces.currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>({
+        id: 'workspace-id',
+        name: 'workspace name',
+      });
+
+      await act(async () => {
+        component = mount(
+          wrapWithIntl(
+            <DataSourceTable
+              history={history}
+              location={({} as unknown) as RouteComponentProps['location']}
+              match={({} as unknown) as RouteComponentProps['match']}
+            />
+          ),
+          {
+            wrappingComponent: OpenSearchDashboardsContextProvider,
+            wrappingComponentProps: {
+              services: mockedContext,
+            },
+          }
+        );
+      });
+      component.update();
+
+      // The set as default action button should be displayed when inside a workspace
+      expect(
+        component
+          .find('[data-test-subj="dataSourcesManagement-dataSourceTable-setAsDefaultButton"]')
+          .exists()
+      ).toBe(true);
+
+      // click setAsDefault button should set the data source as default
+      component
+        .find('[data-test-subj="dataSourcesManagement-dataSourceTable-setAsDefaultButton"]')
+        .first()
+        .simulate('click');
+      expect(uiSettings.set).toBeCalledWith(DEFAULT_DATA_SOURCE_UI_SETTINGS_ID, 'alpha-test');
+
+      // reset to original value
+      mockedContext.workspaces.currentWorkspace$ = currentWorkspace$;
+    });
+
+    test('should NOT display set as default action', async () => {
+      const currentWorkspace$ = mockedContext.workspaces.currentWorkspace$;
+      // Mock that there is NO current workspace
+      mockedContext.workspaces.currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>(
+        null
+      );
+
+      await act(async () => {
+        component = mount(
+          wrapWithIntl(
+            <DataSourceTable
+              history={history}
+              location={({} as unknown) as RouteComponentProps['location']}
+              match={({} as unknown) as RouteComponentProps['match']}
+            />
+          ),
+          {
+            wrappingComponent: OpenSearchDashboardsContextProvider,
+            wrappingComponentProps: {
+              services: mockedContext,
+            },
+          }
+        );
+      });
+      component.update();
+
+      // The set as default action button should NOT be displayed when outside of workspace
+      expect(
+        component
+          .find('[data-test-subj="dataSourcesManagement-dataSourceTable-setAsDefaultButton"]')
+          .exists()
+      ).toBe(false);
+
+      // reset to original value
+      mockedContext.workspaces.currentWorkspace$ = currentWorkspace$;
+    });
+
+    test('should display dissociate action', async () => {
+      const currentWorkspace$ = mockedContext.workspaces.currentWorkspace$;
+      const capabilities = mockedContext.application.capabilities;
+      // Mock that there is current workspace
+      mockedContext.workspaces.currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>({
+        id: 'workspace-id',
+        name: 'workspace name',
+      });
+      // Mock that the current user is dashboard admin
+      mockedContext.application.capabilities = {
+        ...capabilities,
+        dashboards: { isDashboardAdmin: true },
+      };
+
+      await act(async () => {
+        component = mount(
+          wrapWithIntl(
+            <DataSourceTable
+              history={history}
+              location={({} as unknown) as RouteComponentProps['location']}
+              match={({} as unknown) as RouteComponentProps['match']}
+            />
+          ),
+          {
+            wrappingComponent: OpenSearchDashboardsContextProvider,
+            wrappingComponentProps: {
+              services: mockedContext,
+            },
+          }
+        );
+      });
+      component.update();
+
+      // The dissociate data source action should be displayed
+      expect(
+        component
+          .find('[data-test-subj="dataSourcesManagement-dataSourceTable-dissociateButton"]')
+          .exists()
+      ).toBe(true);
+
+      // reset to original value
+      mockedContext.workspaces.currentWorkspace$ = currentWorkspace$;
+      mockedContext.application.capabilities = capabilities;
+    });
+
+    test('should NOT display dissociate action for non dashboard admin', async () => {
+      const currentWorkspace$ = mockedContext.workspaces.currentWorkspace$;
+      const capabilities = mockedContext.application.capabilities;
+      // Mock that there is current workspace
+      mockedContext.workspaces.currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>({
+        id: 'workspace-id',
+        name: 'workspace name',
+      });
+      // Mock that the current user is not dashboard admin
+      mockedContext.application.capabilities = {
+        ...capabilities,
+        dashboards: { isDashboardAdmin: false },
+      };
+
+      await act(async () => {
+        component = mount(
+          wrapWithIntl(
+            <DataSourceTable
+              history={history}
+              location={({} as unknown) as RouteComponentProps['location']}
+              match={({} as unknown) as RouteComponentProps['match']}
+            />
+          ),
+          {
+            wrappingComponent: OpenSearchDashboardsContextProvider,
+            wrappingComponentProps: {
+              services: mockedContext,
+            },
+          }
+        );
+      });
+      component.update();
+
+      // The dissociate data source action should not be displayed for non-admin user
+      expect(
+        component
+          .find('[data-test-subj="dataSourcesManagement-dataSourceTable-dissociateButton"]')
+          .exists()
+      ).toBe(false);
+
+      // reset to original value
+      mockedContext.workspaces.currentWorkspace$ = currentWorkspace$;
+      mockedContext.application.capabilities = capabilities;
+    });
+
+    test('should NOT display dissociate action if not in a workspace', async () => {
+      const currentWorkspace$ = mockedContext.workspaces.currentWorkspace$;
+      const capabilities = mockedContext.application.capabilities;
+      // Mock that there is no current workspace
+      mockedContext.workspaces.currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>(
+        null
+      );
+      // Mock that the current user is dashboard admin
+      mockedContext.application.capabilities = {
+        ...capabilities,
+        dashboards: { isDashboardAdmin: true },
+      };
+
+      await act(async () => {
+        component = mount(
+          wrapWithIntl(
+            <DataSourceTable
+              history={history}
+              location={({} as unknown) as RouteComponentProps['location']}
+              match={({} as unknown) as RouteComponentProps['match']}
+            />
+          ),
+          {
+            wrappingComponent: OpenSearchDashboardsContextProvider,
+            wrappingComponentProps: {
+              services: mockedContext,
+            },
+          }
+        );
+      });
+      component.update();
+
+      // The dissociate data source action should not be display when not inside a workspace
+      expect(
+        component
+          .find('[data-test-subj="dataSourcesManagement-dataSourceTable-dissociateButton"]')
+          .exists()
+      ).toBe(false);
+
+      // reset to original value
+      mockedContext.workspaces.currentWorkspace$ = currentWorkspace$;
+      mockedContext.application.capabilities = capabilities;
+    });
+  });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
index 3ea2d61d1a79..d74b110ea07b 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
@@ -13,12 +13,16 @@ import {
   EuiSpacer,
   EuiText,
   EuiSearchBarProps,
+  EuiBasicTableColumn,
+  EuiButtonIcon,
 } from '@elastic/eui';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { useEffectOnce } from 'react-use';
+import { useEffectOnce, useObservable } from 'react-use';
+import { of } from 'rxjs';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import { TopNavControlComponentData } from 'src/plugins/navigation/public';
 import {
   reactRouterNavigate,
   useOpenSearchDashboards,
@@ -33,10 +37,10 @@ import {
   deleteMultipleDataSources,
   getDataSources,
   setFirstDataSourceAsDefault,
-  getDefaultDataSourceId,
   fetchDataSourceConnections,
 } from '../utils';
 import { LoadingMask } from '../loading_mask';
+import { DEFAULT_DATA_SOURCE_UI_SETTINGS_ID } from '../constants';
 
 /* Table config */
 const pagination = {
@@ -59,7 +63,18 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
     notifications,
     uiSettings,
     application,
+    navigation,
+    workspaces,
+    overlays,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
+  const { HeaderControl } = navigation.ui;
+  const workspaceClient = useObservable(workspaces.client$);
+  const DataSourceAssociation = workspaceClient?.ui().DataSourceAssociation;
+  const defaultDataSourceIdRef = useRef(
+    uiSettings.get$<string | null>(DEFAULT_DATA_SOURCE_UI_SETTINGS_ID)
+  );
+  const defaultDataSourceId = useObservable(defaultDataSourceIdRef.current);
+  const useUpdatedUX = uiSettings.get('home:useNewHomePage');
 
   /* Component state variables */
   const [dataSources, setDataSources] = useState<DataSourceTableItem[]>([]);
@@ -68,6 +83,9 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   const [isDeleting, setIsDeleting] = React.useState<boolean>(false);
   const [confirmDeleteVisible, setConfirmDeleteVisible] = React.useState(false);
   const canManageDataSource = !!application.capabilities?.dataSource?.canManage;
+  const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
+  const isDashboardAdmin = !!application?.capabilities?.dashboards?.isDashboardAdmin;
+  const canAssociateDataSource = !!currentWorkspace && isDashboardAdmin;
 
   /* useEffectOnce hook to avoid these methods called multiple times when state is updated. */
   useEffectOnce(() => {
@@ -82,9 +100,28 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
     fetchDataSources();
   });
 
-  const fetchDataSources = () => {
+  const associateDataSourceButton = DataSourceAssociation && [
+    {
+      renderComponent: (
+        <DataSourceAssociation
+          excludedDataSourceIds={dataSources.map((ds) => ds.id)}
+          onComplete={() => fetchDataSources()}
+        />
+      ),
+    } as TopNavControlComponentData,
+  ];
+
+  /* Toast Handlers */
+  const handleDisplayToastMessage = useCallback(
+    ({ message }: DataSourceManagementToastMessageItem) => {
+      notifications.toasts.addDanger(message);
+    },
+    [notifications.toasts]
+  );
+
+  const fetchDataSources = useCallback(() => {
     setIsLoading(true);
-    getDataSources(savedObjects.client)
+    return getDataSources(savedObjects.client)
       .then((response: DataSourceTableItem[]) => {
         return fetchDataSourceConnections(response, http, notifications, false);
       })
@@ -105,31 +142,87 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
       .finally(() => {
         setIsLoading(false);
       });
-  };
+  }, [handleDisplayToastMessage, http, notifications, savedObjects.client]);
+
+  const onDissociate = useCallback(
+    async (item: DataSourceTableItem | DataSourceTableItem[]) => {
+      const itemsToDissociate = Array<DataSourceTableItem>().concat(item);
+      const payload = itemsToDissociate.map((ds) => ({ id: ds.id, type: 'data-source' }));
+      const confirmed = await overlays.openConfirm('', {
+        title: i18n.translate('dataSourcesManagement.dataSourcesTable.removeAssociation', {
+          defaultMessage:
+            '{selectionSize, plural, one {Remove # association} other {Remove # associations}}',
+          values: { selectionSize: itemsToDissociate.length },
+        }),
+        buttonColor: 'danger',
+      });
+      if (confirmed) {
+        setIsLoading(true);
+        if (workspaceClient && currentWorkspace) {
+          await workspaceClient.dissociate(payload, currentWorkspace.id);
+          await fetchDataSources();
+          setSelectedDataSources([]);
+          if (payload.some((p) => p.id === defaultDataSourceId)) {
+            setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
+          }
+        }
+      }
+    },
+    [
+      currentWorkspace,
+      defaultDataSourceId,
+      fetchDataSources,
+      overlays,
+      savedObjects.client,
+      uiSettings,
+      workspaceClient,
+    ]
+  );
 
   /* Table search config */
   const renderToolsLeft = useCallback(() => {
-    return selectedDataSources.length > 0
-      ? [
-          <EuiSmallButton
-            color="danger"
-            onClick={() => {
-              setConfirmDeleteVisible(true);
-            }}
-            data-test-subj="deleteDataSourceConnections"
-          >
-            <FormattedMessage
-              id="dataSourcesManagement.dataSourcesTable.deleteToolLabel"
-              defaultMessage="{selectionSize, plural, one {Delete # connection} other {Delete # connections}}"
-              values={{ selectionSize: selectedDataSources.length }}
-            />
-          </EuiSmallButton>,
-        ]
-      : [];
-  }, [selectedDataSources]);
+    if (selectedDataSources.length === 0) {
+      return [];
+    }
+    if (canManageDataSource) {
+      return [
+        <EuiSmallButton
+          color="danger"
+          onClick={() => {
+            setConfirmDeleteVisible(true);
+          }}
+          data-test-subj="deleteDataSourceConnections"
+        >
+          <FormattedMessage
+            id="dataSourcesManagement.dataSourcesTable.deleteToolLabel"
+            defaultMessage="{selectionSize, plural, one {Delete # connection} other {Delete # connections}}"
+            values={{ selectionSize: selectedDataSources.length }}
+          />
+        </EuiSmallButton>,
+      ];
+    }
+    if (canAssociateDataSource) {
+      return [
+        <EuiSmallButton
+          color="danger"
+          onClick={() => {
+            onDissociate(selectedDataSources);
+          }}
+          data-test-subj="dissociateSelectedDataSources"
+        >
+          <FormattedMessage
+            id="dataSourcesManagement.dataSourcesTable.dissociateSelectedDataSources"
+            defaultMessage="{selectionSize, plural, one {Remove # association} other {Remove # associations}}"
+            values={{ selectionSize: selectedDataSources.length }}
+          />
+        </EuiSmallButton>,
+      ];
+    }
+    return [];
+  }, [selectedDataSources, canManageDataSource, canAssociateDataSource, onDissociate]);
 
   const search: EuiSearchBarProps = {
-    toolsLeft: canManageDataSource ? renderToolsLeft() : undefined,
+    toolsLeft: renderToolsLeft(),
     compressed: true,
     box: {
       incremental: true,
@@ -157,7 +250,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   };
 
   /* Table columns */
-  const columns = [
+  const columns: Array<EuiBasicTableColumn<DataSourceTableItem>> = [
     {
       field: 'title',
       name: i18n.translate('dataSourcesManagement.dataSourcesTable.dataSourceField', {
@@ -177,7 +270,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
           <EuiButtonEmpty size="xs" {...reactRouterNavigate(history, `${index.id}`)} flush="left">
             {name}
           </EuiButtonEmpty>
-          {index.id === getDefaultDataSourceId(uiSettings) ? (
+          {index.id === defaultDataSourceId ? (
             <EuiBadge iconType="starFilled" iconSide="left">
               Default
             </EuiBadge>
@@ -295,7 +388,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   const setDefaultDataSource = async () => {
     try {
       for (const dataSource of selectedDataSources) {
-        if (getDefaultDataSourceId(uiSettings) === dataSource.id) {
+        if (defaultDataSourceId === dataSource.id) {
           await setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
           break;
         }
@@ -324,12 +417,6 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
     onSelectionChange,
   };
 
-  /* Toast Handlers */
-
-  const handleDisplayToastMessage = ({ message }: DataSourceManagementToastMessageItem) => {
-    notifications.toasts.addDanger(message);
-  };
-
   /* Render Ui elements*/
   /* Render table */
   const renderTableContent = () => {
@@ -384,8 +471,67 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
     );
   };
 
+  const actionColumn: EuiBasicTableColumn<DataSourceTableItem> = {
+    name: 'Action',
+    actions: [],
+  };
+
+  // Add remove association action
+  if (canAssociateDataSource) {
+    actionColumn.actions.push({
+      name: i18n.translate('dataSourcesManagement.dataSourcesTable.removeAssociation.label', {
+        defaultMessage: 'Remove association',
+      }),
+      isPrimary: true,
+      description: i18n.translate(
+        'dataSourcesManagement.dataSourcesTable.removeAssociation.description',
+        {
+          defaultMessage: 'Remove association',
+        }
+      ),
+      icon: 'unlink',
+      type: 'icon',
+      onClick: async (item: DataSourceTableItem) => {
+        onDissociate(item);
+      },
+      'data-test-subj': 'dataSourcesManagement-dataSourceTable-dissociateButton',
+    });
+  }
+
+  // Add set as default action when data source list page opened within a workspace
+  if (currentWorkspace) {
+    actionColumn.actions.push({
+      render: (item) => {
+        return (
+          <EuiButtonIcon
+            data-test-subj="dataSourcesManagement-dataSourceTable-setAsDefaultButton"
+            isDisabled={defaultDataSourceId === item.id}
+            aria-label="Set as default data source"
+            title={i18n.translate('dataSourcesManagement.dataSourcesTable.setAsDefault.label', {
+              defaultMessage: 'Set as default',
+            })}
+            iconType="flag"
+            onClick={async () => {
+              await uiSettings.set(DEFAULT_DATA_SOURCE_UI_SETTINGS_ID, item.id);
+            }}
+          />
+        );
+      },
+    });
+  }
+
+  if (actionColumn.actions.length > 0) {
+    columns.push(actionColumn);
+  }
+
   return (
     <>
+      {useUpdatedUX && canAssociateDataSource && associateDataSourceButton && (
+        <HeaderControl
+          setMountPoint={application.setAppRightControls}
+          controls={associateDataSourceButton}
+        />
+      )}
       {tableRenderDeleteModal()}
       {!isLoading && (!dataSources || !dataSources.length)
         ? renderEmptyState()
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx
index 334fad5f810f..c4b82fc5156f 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx
@@ -3,18 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { MemoryRouter, Route } from 'react-router-dom';
-import { DirectQueryDataConnectionDetail } from './direct_query_connection_detail';
+import { render, screen, waitFor } from '@testing-library/react';
 import {
   ApplicationStart,
   HttpStart,
   NotificationsStart,
   SavedObjectsStart,
 } from 'opensearch-dashboards/public';
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { DataSourceSelectionService } from '../../../service/data_source_selection_service';
 import * as utils from '../../utils';
+import { DirectQueryDataConnectionDetail } from './direct_query_connection_detail';
 
 jest.mock('../../../constants', () => ({
   DATACONNECTIONS_BASE: '/api/dataconnections',
@@ -67,9 +69,17 @@ jest.mock('../associated_object_management/utils/associated_objects_tab_utils',
   redirectToExplorerS3: jest.fn(),
 }));
 
+const mockApplication = coreMock.createSetup().application;
+const mockUiSettings = coreMock.createSetup().uiSettings;
+const mockdataSourceSelection = new DataSourceSelectionService();
+
 jest.mock('../../utils', () => ({
   isPluginInstalled: jest.fn(),
   getDataSourcesWithFields: jest.fn(),
+  getApplication: () => mockApplication,
+  getUiSettings: () => mockUiSettings,
+  getHideLocalCluster: () => ({ enabled: true }),
+  getDataSourceSelection: () => mockdataSourceSelection,
 }));
 
 const renderComponent = ({
@@ -87,6 +97,7 @@ const renderComponent = ({
       find: jest.fn().mockResolvedValue({ saved_objects: [] }),
     },
   },
+  setHeaderActionMenu = jest.fn(),
 }) => {
   return render(
     <MemoryRouter initialEntries={['/dataconnections/test?dataSourceMDSId=test-mdsid']}>
@@ -98,6 +109,8 @@ const renderComponent = ({
           application={application as ApplicationStart}
           setBreadcrumbs={setBreadcrumbs}
           savedObjects={savedObjects as SavedObjectsStart}
+          useNewUX={false}
+          setHeaderActionMenu={setHeaderActionMenu}
         />
       </Route>
     </MemoryRouter>
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
index 9593f683ff92..8c8ea54a4854 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
@@ -3,55 +3,57 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
 import {
+  EuiAccordion,
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
   EuiPage,
   EuiPageBody,
   EuiPageHeader,
   EuiPageHeaderSection,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiPanel,
   EuiSpacer,
-  EuiText,
   EuiTabbedContent,
-  EuiIcon,
-  EuiCard,
-  EuiAccordion,
+  EuiText,
 } from '@elastic/eui';
+import { escapeRegExp } from 'lodash';
 import {
   ApplicationStart,
   HttpStart,
+  MountPoint,
   NotificationsStart,
   SavedObjectsStart,
 } from 'opensearch-dashboards/public';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { escapeRegExp } from 'lodash';
-import { DATACONNECTIONS_BASE } from '../../../constants';
-import { DirectQueryDatasourceDetails, PrometheusProperties } from '../../../types';
-import { NoAccess } from './utils/no_access_page';
-import { InactiveDataConnectionCallout } from './utils/inactive_data_connection_callout';
-import { AccessControlTab } from './access_control_tab';
-import { getManageDirectQueryDataSourceBreadcrumbs } from '../../breadcrumbs';
 import {
   useLoadAccelerationsToCache,
   useLoadDatabasesToCache,
   useLoadTablesToCache,
 } from '../../../../framework/catalog_cache/cache_loader';
-import { AccelerationTable } from '../acceleration_management/acceleration_table';
+import {
+  IntegrationInstanceResult,
+  IntegrationInstancesSearchResult,
+} from '../../../../framework/types';
+import { INTEGRATIONS_BASE } from '../../../../framework/utils/shared';
+import { DATACONNECTIONS_BASE } from '../../../constants';
 import { getRenderCreateAccelerationFlyout } from '../../../plugin';
+import { DirectQueryDatasourceDetails, PrometheusProperties } from '../../../types';
+import { getManageDirectQueryDataSourceBreadcrumbs } from '../../breadcrumbs';
+import { createDataSourceMenu, DataSourceViewConfig } from '../../data_source_menu';
+import { getDataSourcesWithFields, isPluginInstalled } from '../../utils';
+import { AccelerationTable } from '../acceleration_management/acceleration_table';
 import { AssociatedObjectsTab } from '../associated_object_management/associated_objects_tab';
 import { redirectToExplorerS3 } from '../associated_object_management/utils/associated_objects_tab_utils';
 import {
-  InstallIntegrationFlyout,
   InstalledIntegrationsTable,
+  InstallIntegrationFlyout,
 } from '../integrations/installed_integrations_table';
-import {
-  IntegrationInstanceResult,
-  IntegrationInstancesSearchResult,
-} from '../../../../framework/types';
-import { INTEGRATIONS_BASE } from '../../../../framework/utils/shared';
-import { isPluginInstalled, getDataSourcesWithFields } from '../../utils';
+import { AccessControlTab } from './access_control_tab';
+import { InactiveDataConnectionCallout } from './utils/inactive_data_connection_callout';
+import { NoAccess } from './utils/no_access_page';
 
 interface DirectQueryDataConnectionDetailProps {
   featureFlagStatus: boolean;
@@ -61,6 +63,7 @@ interface DirectQueryDataConnectionDetailProps {
   setBreadcrumbs: (breadcrumbs: any) => void;
   useNewUX: boolean;
   savedObjects: SavedObjectsStart;
+  setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 
 export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnectionDetailProps> = ({
@@ -71,12 +74,13 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
   setBreadcrumbs,
   useNewUX,
   savedObjects,
+  setHeaderActionMenu,
 }) => {
   const [observabilityDashboardsExists, setObservabilityDashboardsExists] = useState(false);
   const { dataSourceName } = useParams<{ dataSourceName: string }>();
   const { search } = useLocation();
   const queryParams = new URLSearchParams(search);
-  const dataSourceMDSId = queryParams.get('dataSourceMDSId');
+  const dataSourceMDSId = queryParams.get('dataSourceMDSId') ?? '';
   const [datasourceDetails, setDatasourceDetails] = useState<DirectQueryDatasourceDetails>({
     allowedRoles: [],
     name: '',
@@ -91,6 +95,24 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
     redirectToExplorerS3(dataSourceName, application);
   };
 
+  const dataSourceMenuView = useMemo(() => {
+    if (!featureFlagStatus) return null;
+
+    const DataSourceMenuView = createDataSourceMenu<DataSourceViewConfig>();
+
+    const dataSourceViewProps = {
+      setMenuMountPoint: setHeaderActionMenu,
+      componentConfig: {
+        activeOption: [{ id: dataSourceMDSId }],
+        savedObjects: savedObjects.client,
+        notifications,
+        fullWidth: true,
+      },
+    };
+
+    return <DataSourceMenuView {...dataSourceViewProps} componentType={'DataSourceView'} />;
+  }, [featureFlagStatus, dataSourceMDSId, setHeaderActionMenu, savedObjects.client, notifications]);
+
   // Cache loader hook
   const {
     loadStatus: databasesLoadStatus,
@@ -322,7 +344,7 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Description</EuiText>
               <EuiText size="s" className="overview-content">
-                {datasourceDetails.description || '-'}
+                {datasourceDetails.description || '\u2014'}
               </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -352,13 +374,13 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Connection title</EuiText>
               <EuiText size="s" className="overview-content">
-                {datasourceDetails.name || '-'}
+                {datasourceDetails.name || '\u2014'}
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Data source description</EuiText>
               <EuiText size="s" className="overview-content">
-                {datasourceDetails.description || '-'}
+                {datasourceDetails.description || '\u2014'}
               </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -473,14 +495,15 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
       <EuiPageBody>
         <EuiPageHeader style={{ justifyContent: 'spaceBetween' }}>
           <EuiPageHeaderSection style={{ width: '100%', justifyContent: 'space-between' }}>
-            <EuiFlexGroup>
-              <EuiFlexItem grow={false}>
+            <EuiFlexGroup alignItems="center">
+              <EuiFlexItem>
                 {!useNewUX && (
                   <EuiText data-test-subj="datasourceTitle" size="s">
                     <h1>{datasourceDetails.name}</h1>
                   </EuiText>
                 )}
               </EuiFlexItem>
+              <EuiFlexItem grow={false}>{dataSourceMenuView}</EuiFlexItem>
             </EuiFlexGroup>
           </EuiPageHeaderSection>
         </EuiPageHeader>
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.test.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.test.tsx
index cf104ef0c64b..df69c2f5d4ef 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.test.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.test.tsx
@@ -14,6 +14,7 @@ import { scopedHistoryMock } from '../../../../../../core/public/mocks';
 import { OpenSearchDashboardsContextProvider } from '../../../../../opensearch_dashboards_react/public';
 import { getMappedDataSources, mockManagementPlugin } from '../../../mocks';
 import { ManageDirectQueryDataConnectionsTable } from './manage_direct_query_data_connections_table';
+import { BehaviorSubject } from 'rxjs';
 
 const deleteButtonIdentifier = '[data-test-subj="deleteDataSourceConnections"]';
 const tableIdentifier = 'EuiInMemoryTable';
@@ -62,7 +63,7 @@ describe('ManageDirectQueryDataConnectionsTable', () => {
         Promise.resolve(getMappedDataSources)
       );
       spyOn(utils, 'getHideLocalCluster').and.returnValue(false);
-      spyOn(uiSettings, 'get').and.returnValue('test1');
+      spyOn(uiSettings, 'get$').and.returnValue(new BehaviorSubject('test1'));
       await act(async () => {
         component = await mount(
           wrapWithIntl(
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
index ac70945ec739..e34483eed75f 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
@@ -13,17 +13,21 @@ import {
   EuiConfirmModal,
   EuiPageBody,
   EuiSpacer,
-  EuiTableFieldDataColumnType,
   EuiSearchBarProps,
   EuiLoadingSpinner,
   EuiText,
   LEFT_ALIGNMENT,
   EuiButtonEmpty,
+  EuiBasicTableColumn,
 } from '@elastic/eui';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from 'react-intl';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
+import { TopNavControlComponentData } from 'src/plugins/navigation/public';
+
 import {
   DataSourceConnectionType,
   DataSourceManagementContext,
@@ -35,13 +39,13 @@ import {
   fetchDataSourceConnections,
   getDataSources,
   deleteMultipleDataSources,
-  getDefaultDataSourceId,
   setFirstDataSourceAsDefault,
   getHideLocalCluster,
 } from '../../utils';
 import { LoadingMask } from '../../loading_mask';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DATACONNECTIONS_BASE, LOCAL_CLUSTER } from '../../../constants';
+import { DEFAULT_DATA_SOURCE_UI_SETTINGS_ID } from '../../constants';
 
 interface DirectQueryDataConnectionsProps extends RouteComponentProps {
   featureFlagStatus: boolean;
@@ -51,9 +55,30 @@ export const ManageDirectQueryDataConnectionsTable = ({
   featureFlagStatus,
   history,
 }: DirectQueryDataConnectionsProps) => {
-  const { savedObjects, http, notifications, uiSettings } = useOpenSearchDashboards<
-    DataSourceManagementContext
-  >().services;
+  const {
+    application,
+    savedObjects,
+    http,
+    notifications,
+    uiSettings,
+    navigation,
+    workspaces,
+    overlays,
+  } = useOpenSearchDashboards<DataSourceManagementContext>().services;
+  const { HeaderControl } = navigation.ui;
+  const workspaceClient = useObservable(workspaces.client$);
+  const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
+  const DataSourceAssociation = workspaceClient?.ui().DataSourceAssociation;
+  const useUpdatedUX = uiSettings.get('home:useNewHomePage');
+  const defaultDataSourceIdRef = useRef(
+    uiSettings.get$<string | null>(DEFAULT_DATA_SOURCE_UI_SETTINGS_ID)
+  );
+  const defaultDataSourceId = useObservable(defaultDataSourceIdRef.current);
+  const canManageDataSource = !!application.capabilities?.dataSource?.canManage;
+  const isDashboardAdmin = !!application?.capabilities?.dashboards?.isDashboardAdmin;
+  const canAssociateDataSource =
+    !!currentWorkspace && !currentWorkspace.readonly && isDashboardAdmin;
+
   const [observabilityDashboardsExists, setObservabilityDashboardsExists] = useState(false);
   const [showIntegrationsFlyout, setShowIntegrationsFlyout] = useState(false);
   const [integrationsFlyout, setIntegrationsFlyout] = useState<React.JSX.Element | null>(null);
@@ -83,7 +108,7 @@ export const ManageDirectQueryDataConnectionsTable = ({
   const setDefaultDataSource = async () => {
     try {
       for (const dataSource of selectedDataSources) {
-        if (getDefaultDataSourceId(uiSettings) === dataSource.id) {
+        if (defaultDataSourceId === dataSource.id) {
           await setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
           break;
         }
@@ -100,6 +125,55 @@ export const ManageDirectQueryDataConnectionsTable = ({
     }
   };
 
+  const fetchDataSources = useCallback(() => {
+    setIsLoading(true);
+
+    const fetchConnections = featureFlagStatus
+      ? getDataSources(savedObjects.client)
+      : http.get(`${DATACONNECTIONS_BASE}`);
+
+    return fetchConnections
+      .then((response) => {
+        return featureFlagStatus
+          ? fetchDataSourceConnections(
+              response,
+              http,
+              notifications,
+              true,
+              getHideLocalCluster().enabled
+            )
+          : response.map((dataConnection: DirectQueryDatasourceDetails) => ({
+              id: dataConnection.name,
+              title: dataConnection.name,
+              type:
+                {
+                  S3GLUE: 'Amazon S3',
+                  PROMETHEUS: 'Prometheus',
+                }[dataConnection.connector] || dataConnection.connector,
+              connectionType: dataConnection.connector,
+              description: dataConnection.description,
+            }));
+      })
+      .then((finalData) => {
+        setData(
+          featureFlagStatus
+            ? finalData.filter((item) => item.relatedConnections?.length > 0)
+            : finalData
+        );
+      })
+      .catch(() => {
+        setData([]);
+        notifications.toasts.addDanger(
+          i18n.translate('dataSourcesManagement.directQueryTable.fetchDataSources', {
+            defaultMessage: 'Could not fetch data sources',
+          })
+        );
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [http, savedObjects, notifications, featureFlagStatus]);
+
   /* Delete selected data sources*/
   const onClickDelete = () => {
     setIsDeleting(true);
@@ -127,6 +201,41 @@ export const ManageDirectQueryDataConnectionsTable = ({
       });
   };
 
+  const onDissociate = useCallback(
+    async (item: DataSourceTableItem | DataSourceTableItem[]) => {
+      const itemsToDissociate = Array<DataSourceTableItem>().concat(item);
+      const payload = itemsToDissociate.map((ds) => ({ id: ds.id, type: 'data-source' }));
+      const confirmed = await overlays.openConfirm('', {
+        title: i18n.translate('dataSourcesManagement.dataSourcesTable.removeAssociation', {
+          defaultMessage:
+            '{selectionSize, plural, one {Remove # association} other {Remove # associations}}',
+          values: { selectionSize: itemsToDissociate.length },
+        }),
+        buttonColor: 'danger',
+      });
+      if (confirmed) {
+        setIsLoading(true);
+        if (workspaceClient && currentWorkspace) {
+          await workspaceClient.dissociate(payload, currentWorkspace.id);
+          await fetchDataSources();
+          setSelectedDataSources([]);
+          if (payload.some((p) => p.id === defaultDataSourceId)) {
+            setFirstDataSourceAsDefault(savedObjects.client, uiSettings, true);
+          }
+        }
+      }
+    },
+    [
+      currentWorkspace,
+      defaultDataSourceId,
+      fetchDataSources,
+      overlays,
+      savedObjects.client,
+      uiSettings,
+      workspaceClient,
+    ]
+  );
+
   /* render delete modal*/
   const tableRenderDeleteModal = () => {
     return isModalVisible ? (
@@ -173,22 +282,43 @@ export const ManageDirectQueryDataConnectionsTable = ({
   };
 
   const renderToolsLeft = useCallback(() => {
-    return selectedDataSources.length > 0
-      ? [
-          <EuiSmallButton
-            color="danger"
-            onClick={() => setIsModalVisible(true)}
-            data-test-subj="deleteDataSourceConnections"
-          >
-            <FormattedMessage
-              id="dataSourcesManagement.directQueryTable.deleteToolLabel"
-              defaultMessage="{selectionSize, plural, one {Delete # connection} other {Delete # connections}}"
-              values={{ selectionSize: selectedDataSources.length }}
-            />
-          </EuiSmallButton>,
-        ]
-      : [];
-  }, [selectedDataSources]);
+    if (selectedDataSources.length === 0) {
+      return [];
+    }
+    if (canManageDataSource) {
+      return [
+        <EuiSmallButton
+          color="danger"
+          onClick={() => setIsModalVisible(true)}
+          data-test-subj="deleteDataSourceConnections"
+        >
+          <FormattedMessage
+            id="dataSourcesManagement.directQueryTable.deleteToolLabel"
+            defaultMessage="{selectionSize, plural, one {Delete # connection} other {Delete # connections}}"
+            values={{ selectionSize: selectedDataSources.length }}
+          />
+        </EuiSmallButton>,
+      ];
+    }
+    if (canAssociateDataSource) {
+      return [
+        <EuiSmallButton
+          color="danger"
+          onClick={() => {
+            onDissociate(selectedDataSources);
+          }}
+          data-test-subj="dissociateSelectedDataSources"
+        >
+          <FormattedMessage
+            id="dataSourcesManagement.dataSourcesTable.dissociateSelectedDataSources"
+            defaultMessage="{selectionSize, plural, one {Remove # association} other {Remove # associations}}"
+            values={{ selectionSize: selectedDataSources.length }}
+          />
+        </EuiSmallButton>,
+      ];
+    }
+    return [];
+  }, [selectedDataSources, canManageDataSource, canAssociateDataSource, onDissociate]);
 
   const toggleDetails = (item: DataSourceTableItem) => {
     const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
@@ -210,55 +340,6 @@ export const ManageDirectQueryDataConnectionsTable = ({
     setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
   };
 
-  const fetchDataSources = useCallback(() => {
-    setIsLoading(true);
-
-    const fetchConnections = featureFlagStatus
-      ? getDataSources(savedObjects.client)
-      : http.get(`${DATACONNECTIONS_BASE}`);
-
-    fetchConnections
-      .then((response) => {
-        return featureFlagStatus
-          ? fetchDataSourceConnections(
-              response,
-              http,
-              notifications,
-              true,
-              getHideLocalCluster().enabled
-            )
-          : response.map((dataConnection: DirectQueryDatasourceDetails) => ({
-              id: dataConnection.name,
-              title: dataConnection.name,
-              type:
-                {
-                  S3GLUE: 'Amazon S3',
-                  PROMETHEUS: 'Prometheus',
-                }[dataConnection.connector] || dataConnection.connector,
-              connectionType: dataConnection.connector,
-              description: dataConnection.description,
-            }));
-      })
-      .then((finalData) => {
-        setData(
-          featureFlagStatus
-            ? finalData.filter((item) => item.relatedConnections?.length > 0)
-            : finalData
-        );
-      })
-      .catch(() => {
-        setData([]);
-        notifications.toasts.addDanger(
-          i18n.translate('dataSourcesManagement.directQueryTable.fetchDataSources', {
-            defaultMessage: 'Could not fetch data sources',
-          })
-        );
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, [http, savedObjects, notifications, featureFlagStatus]);
-
   useEffect(() => {
     fetchDataSources();
     isPluginInstalled('plugin:observabilityDashboards', notifications, http).then(
@@ -345,7 +426,7 @@ export const ManageDirectQueryDataConnectionsTable = ({
       truncateText: true,
       render: (relatedConnections: DataSourceTableItem[]) => relatedConnections?.length,
     },
-  ].filter(Boolean) as Array<EuiTableFieldDataColumnType<DataSourceTableItem>>;
+  ].filter(Boolean) as Array<EuiBasicTableColumn<DataSourceTableItem>>;
 
   const customSearchBar: EuiSearchBarProps = {
     toolsLeft: renderToolsLeft(),
@@ -370,8 +451,77 @@ export const ManageDirectQueryDataConnectionsTable = ({
     ],
   };
 
+  const associateDataSourceButton = DataSourceAssociation && [
+    {
+      renderComponent: (
+        <DataSourceAssociation
+          excludedDataSourceIds={data.map((ds) => ds.id)}
+          onComplete={() => fetchDataSources()}
+        />
+      ),
+    } as TopNavControlComponentData,
+  ];
+
+  const actionColumn: EuiBasicTableColumn<DataSourceTableItem> = {
+    name: 'Action',
+    actions: [],
+  };
+
+  // Add remove association action
+  if (canAssociateDataSource) {
+    actionColumn.actions.push({
+      name: i18n.translate('dataSourcesManagement.dataSourcesTable.removeAssociation.label', {
+        defaultMessage: 'Remove association',
+      }),
+      isPrimary: true,
+      description: i18n.translate(
+        'dataSourcesManagement.dataSourcesTable.removeAssociation.description',
+        {
+          defaultMessage: 'Remove association',
+        }
+      ),
+      icon: 'unlink',
+      type: 'icon',
+      onClick: async (item: DataSourceTableItem) => {
+        onDissociate(item);
+      },
+      'data-test-subj': 'dataSourcesManagement-dataSourceTable-dissociateButton',
+    });
+  }
+
+  // Add set as default action when data source list page opened within a workspace
+  if (currentWorkspace) {
+    actionColumn.actions.push({
+      render: (item) => {
+        return (
+          <EuiButtonIcon
+            isDisabled={defaultDataSourceId === item.id}
+            aria-label="Set as default data source"
+            title={i18n.translate('dataSourcesManagement.dataSourcesTable.setAsDefault.label', {
+              defaultMessage: 'Set as default',
+            })}
+            iconType="flag"
+            onClick={async () => {
+              await uiSettings.set(DEFAULT_DATA_SOURCE_UI_SETTINGS_ID, item.id);
+            }}
+          />
+        );
+      },
+    });
+  }
+
+  if (actionColumn.actions.length > 0) {
+    tableColumns.push(actionColumn);
+  }
+
   return (
     <EuiPageBody component="div">
+      {useUpdatedUX && canAssociateDataSource && associateDataSourceButton && (
+        <HeaderControl
+          setMountPoint={application.setAppRightControls}
+          controls={associateDataSourceButton}
+        />
+      )}
       <EuiFlexGroup justifyContent="center">
         {tableRenderDeleteModal()}
         <EuiFlexItem grow={false} style={{ width: '100%' }}>
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index c8b10eaddf91..8ec6c558e66f 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -62,7 +62,7 @@ export const getDirectQueryConnections = async (dataSourceId: string, http: Http
 };
 
 export const getLocalClusterConnections = async (http: HttpSetup) => {
-  const res = await http.get(`${DATACONNECTIONS_BASE}`);
+  const res = await http.get(`${DATACONNECTIONS_BASE}/dataSourceMDSId=`);
   const localClusterConnections: DataSourceTableItem[] = res.map(
     (dataConnection: DirectQueryDatasourceDetails) => ({
       id: `${dataConnection.name}`,
diff --git a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
index 01727d5bf2dc..4423cf1f92f6 100644
--- a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
+++ b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
@@ -3,26 +3,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { StartServicesAccessor } from 'src/core/public';
+import { MountPoint, StartServicesAccessor } from 'src/core/public';
 
+import { EuiPageContent } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
-import { EuiPageContent } from '@elastic/eui';
 import { ManagementAppMountParams } from '../../../management/public';
 
 import { NavigationPublicPluginStart } from '../../../navigation/public';
 import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
+import { AuthenticationMethodRegistry } from '../auth_registry';
 import { CreateDataSourceWizardWithRouter } from '../components/create_data_source_wizard';
-import { EditDataSourceWithRouter } from '../components/edit_data_source';
-import { DataSourceHomePanel } from '../components/data_source_home_panel/data_source_home_panel';
 import { CreateDataSourcePanel } from '../components/data_source_creation_panel/create_data_source_panel';
-import { DataSourceManagementContext } from '../types';
-import { AuthenticationMethodRegistry } from '../auth_registry';
-import { ConfigureDirectQueryDataSourceWithRouter } from '../components/direct_query_data_sources_components/direct_query_data_source_configuration/configure_direct_query_data_sources';
+import { DataSourceHomePanel } from '../components/data_source_home_panel/data_source_home_panel';
 import { DirectQueryDataConnectionDetail } from '../components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail';
+import { ConfigureDirectQueryDataSourceWithRouter } from '../components/direct_query_data_sources_components/direct_query_data_source_configuration/configure_direct_query_data_sources';
+import { EditDataSourceWithRouter } from '../components/edit_data_source';
+import { DataSourceManagementContext } from '../types';
 
 export interface DataSourceManagementStartDependencies {
   data: DataPublicPluginStart;
@@ -31,7 +31,10 @@ export interface DataSourceManagementStartDependencies {
 
 export async function mountManagementSection(
   getStartServices: StartServicesAccessor<DataSourceManagementStartDependencies>,
-  params: ManagementAppMountParams & { wrapInPage?: boolean },
+  params: ManagementAppMountParams & {
+    wrapInPage?: boolean;
+    setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
+  },
   authMethodsRegistry: AuthenticationMethodRegistry,
   featureFlagStatus: boolean
 ) {
@@ -80,6 +83,7 @@ export async function mountManagementSection(
             application={application}
             useNewUX={useNewUX}
             savedObjects={savedObjects}
+            setHeaderActionMenu={params.setHeaderActionMenu}
           />
         </Route>
         {canManageDataSource && (
diff --git a/src/plugins/data_source_management/public/mocks.ts b/src/plugins/data_source_management/public/mocks.ts
index aa77ebece0a0..cd26df261ca8 100644
--- a/src/plugins/data_source_management/public/mocks.ts
+++ b/src/plugins/data_source_management/public/mocks.ts
@@ -30,6 +30,7 @@ import {
   SkippingIndexRowType,
 } from '../framework/types';
 import { AvailableIntegrationsTableProps } from './components/direct_query_data_sources_components/integrations/available_integration_table';
+import { navigationPluginMock } from '../../navigation/public/mocks';
 
 /* Mock Types */
 
@@ -54,6 +55,7 @@ const createDataSourceManagementContext = () => {
     uiSettings,
     notifications,
     overlays,
+    workspaces,
   } = coreMock.createStart();
   const { http } = coreMock.createSetup();
 
@@ -64,10 +66,12 @@ const createDataSourceManagementContext = () => {
     uiSettings,
     notifications,
     overlays,
+    workspaces,
     http,
     docLinks,
     setBreadcrumbs: () => {},
     authenticationMethodRegistry,
+    navigation: navigationPluginMock.createStartContract(),
   };
 };
 
diff --git a/src/plugins/data_source_management/server/routes/data_connections_router.ts b/src/plugins/data_source_management/server/routes/data_connections_router.ts
index 6b8dc4b42054..4533e75c405b 100644
--- a/src/plugins/data_source_management/server/routes/data_connections_router.ts
+++ b/src/plugins/data_source_management/server/routes/data_connections_router.ts
@@ -16,7 +16,7 @@ import {
   EDIT,
 } from '../../framework/utils/shared';
 
-export function registerDataConnectionsRoute(router: IRouter, dataSourceEnabled: boolean) {
+export function registerNonMdsDataConnectionsRoute(router: IRouter) {
   router.get(
     {
       path: `${DATACONNECTIONS_BASE}/{name}`,
@@ -204,7 +204,9 @@ export function registerDataConnectionsRoute(router: IRouter, dataSourceEnabled:
       }
     }
   );
+}
 
+export function registerDataConnectionsRoute(router: IRouter, dataSourceEnabled: boolean) {
   router.get(
     {
       path: `${DATACONNECTIONS_BASE}/dataSourceMDSId={dataSourceMDSId?}`,
diff --git a/src/plugins/data_source_management/server/routes/index.ts b/src/plugins/data_source_management/server/routes/index.ts
index 7fdca26b50ee..2bab16798262 100644
--- a/src/plugins/data_source_management/server/routes/index.ts
+++ b/src/plugins/data_source_management/server/routes/index.ts
@@ -5,7 +5,10 @@
 
 import { IRouter, ILegacyClusterClient } from '../../../../core/server';
 import { registerDslRoute } from './dsl';
-import { registerDataConnectionsRoute } from './data_connections_router';
+import {
+  registerDataConnectionsRoute,
+  registerNonMdsDataConnectionsRoute,
+} from './data_connections_router';
 import { registerDatasourcesRoute } from './datasources_router';
 import { registerPplRoute } from './ppl';
 import { DSLFacet } from '../services/facets/dsl_facet';
@@ -43,6 +46,9 @@ export function setupRoutes({
   // const queryService = new QueryService(client);
   // registerSqlRoute(router, queryService);
 
+  if (!dataSourceEnabled) {
+    registerNonMdsDataConnectionsRoute(router);
+  }
   registerDataConnectionsRoute(router, dataSourceEnabled);
   registerDatasourcesRoute(router, dataSourceEnabled);
 }
diff --git a/src/plugins/dev_tools/opensearch_dashboards.json b/src/plugins/dev_tools/opensearch_dashboards.json
index 9b4a419c9ff4..de87e8d512cb 100644
--- a/src/plugins/dev_tools/opensearch_dashboards.json
+++ b/src/plugins/dev_tools/opensearch_dashboards.json
@@ -4,6 +4,6 @@
   "server": false,
   "ui": true,
   "optionalPlugins": ["dataSource", "managementOverview", "dataSourceManagement"],
-  "requiredPlugins": ["urlForwarding"],
+  "requiredPlugins": ["urlForwarding", "uiActions"],
   "requiredBundles": ["opensearchDashboardsReact"]
 }
diff --git a/src/plugins/dev_tools/public/application.tsx b/src/plugins/dev_tools/public/application.tsx
index e57f11bee617..1e7ba10a4728 100644
--- a/src/plugins/dev_tools/public/application.tsx
+++ b/src/plugins/dev_tools/public/application.tsx
@@ -243,6 +243,7 @@ export function MainApp(
   props: {
     devTools: readonly DevToolApp[];
     RouterComponent?: React.ComponentClass;
+    defaultRoute?: string;
   } & Pick<
     DevToolsWrapperProps,
     | 'savedObjects'
@@ -262,7 +263,9 @@ export function MainApp(
     useUpdatedUX,
     setMenuMountPoint,
     RouterComponent = Router,
+    defaultRoute,
   } = props;
+  const defaultTool = devTools.find((devTool) => devTool.id === defaultRoute) || devTools[0];
   return (
     <I18nProvider>
       <RouterComponent>
@@ -291,7 +294,7 @@ export function MainApp(
               />
             ))}
           <Route path="/">
-            <Redirect to={`/${devTools[0].id}`} />
+            <Redirect to={`/${defaultTool.id}`} />
           </Route>
         </Switch>
       </RouterComponent>
diff --git a/src/plugins/dev_tools/public/dev_tools_icon.test.tsx b/src/plugins/dev_tools/public/dev_tools_icon.test.tsx
index 1f0ca532f6cd..474fc1257936 100644
--- a/src/plugins/dev_tools/public/dev_tools_icon.test.tsx
+++ b/src/plugins/dev_tools/public/dev_tools_icon.test.tsx
@@ -8,10 +8,12 @@ import { fireEvent, render } from '@testing-library/react';
 import { DevToolsIcon } from './dev_tools_icon';
 import { coreMock } from '../../../core/public/mocks';
 import { urlForwardingPluginMock } from 'src/plugins/url_forwarding/public/mocks';
+import { uiActionsPluginMock } from 'src/plugins/ui_actions/public/mocks';
 
 const createDepsMock = () => {
   return {
     urlForwarding: urlForwardingPluginMock.createSetupContract(),
+    uiActions: uiActionsPluginMock.createSetupContract(),
   };
 };
 
@@ -55,4 +57,12 @@ describe('<DevToolsIcon />', () => {
     fireEvent.click(getByTestId('openDevToolsModal'));
     await findByText('Dev tools title');
   });
+
+  it('should register uiActions to show dev tools', async () => {
+    const coreStartMock = coreMock.createStart();
+    const deps = createDepsMock();
+    render(<DevToolsIcon core={coreStartMock} devTools={[]} deps={deps} title="Dev tools title" />);
+
+    expect(deps.uiActions.addTriggerAction).toHaveBeenCalled();
+  });
 });
diff --git a/src/plugins/dev_tools/public/dev_tools_icon.tsx b/src/plugins/dev_tools/public/dev_tools_icon.tsx
index fc30fb558f7c..5047864ec7bd 100644
--- a/src/plugins/dev_tools/public/dev_tools_icon.tsx
+++ b/src/plugins/dev_tools/public/dev_tools_icon.tsx
@@ -20,8 +20,9 @@ import { CoreStart } from 'opensearch-dashboards/public';
 import { MemoryRouter } from 'react-router-dom';
 import { MainApp } from './application';
 import { DevToolApp } from './dev_tool';
-import { DevToolsSetupDependencies } from './plugin';
+import { DEVTOOL_OPEN_ACTION, DevToolsSetupDependencies, devToolsTrigger } from './plugin';
 import './dev_tools_icon.scss';
+import { createAction } from '../../ui_actions/public';
 
 export function DevToolsIcon({
   core,
@@ -35,6 +36,20 @@ export function DevToolsIcon({
   title: string;
 }) {
   const [modalVisible, setModalVisible] = useState(false);
+
+  const [devToolTab, setDevToolTab] = useState('');
+
+  const createOpenDevToolAction = createAction<typeof DEVTOOL_OPEN_ACTION>({
+    type: DEVTOOL_OPEN_ACTION,
+    getDisplayName: () => 'Open DevTools',
+    execute: async ({ defaultRoute }) => {
+      setModalVisible(true);
+      setDevToolTab(defaultRoute);
+    },
+  });
+
+  deps.uiActions.addTriggerAction(devToolsTrigger.id, createOpenDevToolAction);
+
   const elementRef = useRef<HTMLDivElement | null>(null);
   const setMountPoint = useCallback((renderFn) => {
     renderFn(elementRef.current);
@@ -114,6 +129,7 @@ export function DevToolsIcon({
                     useUpdatedUX
                     setMenuMountPoint={setMountPoint}
                     RouterComponent={MemoryRouter}
+                    defaultRoute={devToolTab}
                   />
                   <EuiSpacer size="s" />
                   <EuiSmallButton
diff --git a/src/plugins/dev_tools/public/global_search/__snapshots__/search_devtool_command.test.tsx.snap b/src/plugins/dev_tools/public/global_search/__snapshots__/search_devtool_command.test.tsx.snap
new file mode 100644
index 000000000000..9c9cf8c830ca
--- /dev/null
+++ b/src/plugins/dev_tools/public/global_search/__snapshots__/search_devtool_command.test.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DevToolItem /> render DevToolItem 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    data-test-subj="toolId-dev"
+  >
+    <nav
+      aria-label="breadcrumb"
+      class="euiSimplifiedBreadcrumbs euiSimplifiedBreadcrumbs--truncate"
+    >
+      <div
+        class="euiSimplifiedBreadcrumbWall euiSimplifiedBreadcrumbWall--single"
+      >
+        <span
+          aria-current="page"
+          class="euiSimplifiedBreadcrumb euiSimplifiedBreadcrumb--last"
+          title="Dev tools"
+        >
+          Dev tools
+        </span>
+      </div>
+    </nav>
+  </div>
+</div>
+`;
diff --git a/src/plugins/dev_tools/public/global_search/search_devtool_command.test.tsx b/src/plugins/dev_tools/public/global_search/search_devtool_command.test.tsx
new file mode 100644
index 000000000000..883584e49e08
--- /dev/null
+++ b/src/plugins/dev_tools/public/global_search/search_devtool_command.test.tsx
@@ -0,0 +1,103 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { DevToolItem, searchForDevTools } from './search_devtool_command';
+import { fireEvent, render } from '@testing-library/react';
+import { uiActionsPluginMock } from 'src/plugins/ui_actions/public/mocks';
+import { DEVTOOL_TRIGGER_ID } from '../plugin';
+
+describe('DevtoolSearchCommand', () => {
+  const devToolsFn = jest.fn().mockReturnValue([
+    {
+      id: 'console',
+      title: 'Console',
+    },
+    {
+      id: 'others',
+      title: 'others dev tools',
+    },
+  ]);
+  const uiActionsApiFn = jest.fn();
+
+  it('searchForDevTools without any match', async () => {
+    const searchResult = await searchForDevTools('query', {
+      devTools: devToolsFn,
+      title: 'Dev tools',
+      uiActionsApi: uiActionsApiFn,
+    });
+
+    expect(searchResult).toHaveLength(0);
+  });
+
+  it('searchForDevTools with match tool', async () => {
+    const searchResult = await searchForDevTools('console', {
+      devTools: devToolsFn,
+      title: 'Dev tools',
+      uiActionsApi: uiActionsApiFn,
+    });
+
+    expect(searchResult).toHaveLength(1);
+    expect(searchResult[0]).toMatchInlineSnapshot(`
+      <DevToolItem
+        breadcrumbs={
+          Array [
+            Object {
+              "text": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem>
+                  <EuiIcon
+                    color="text"
+                    type="consoleApp"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  Dev tools
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+            },
+            Object {
+              "onClick": [Function],
+              "text": <EuiHighlight
+                search="console"
+              >
+                Console
+              </EuiHighlight>,
+            },
+          ]
+        }
+        toolId="console"
+      />
+    `);
+  });
+});
+
+describe('<DevToolItem />', () => {
+  const uiActionsStartMock = uiActionsPluginMock.createStartContract();
+  uiActionsStartMock.getTrigger.mockReturnValue({
+    id: '',
+    exec: jest.fn(),
+  });
+  // test component DevToolItem
+  it('render DevToolItem', () => {
+    // render component with jest
+    const { container, getByTestId } = render(
+      <DevToolItem
+        breadcrumbs={[
+          {
+            text: 'Dev tools',
+          },
+        ]}
+        toolId="dev"
+        uiActionsApi={uiActionsStartMock}
+      />
+    );
+    expect(container).toMatchSnapshot();
+    fireEvent.click(getByTestId('toolId-dev'));
+    expect(uiActionsStartMock.getTrigger).toHaveBeenCalledWith(DEVTOOL_TRIGGER_ID);
+  });
+});
diff --git a/src/plugins/dev_tools/public/global_search/search_devtool_command.tsx b/src/plugins/dev_tools/public/global_search/search_devtool_command.tsx
new file mode 100644
index 000000000000..7bb8a9cb7238
--- /dev/null
+++ b/src/plugins/dev_tools/public/global_search/search_devtool_command.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ReactNode } from 'react';
+import {
+  EuiBreadcrumb,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHighlight,
+  EuiIcon,
+  EuiSimplifiedBreadcrumbs,
+} from '@elastic/eui';
+import React from 'react';
+import { DevToolApp } from '../dev_tool';
+import { UiActionsStart } from '../../../ui_actions/public';
+import { DEVTOOL_TRIGGER_ID } from '../plugin';
+
+export const searchForDevTools = async (
+  query: string,
+  props: {
+    devTools: () => readonly DevToolApp[];
+    title: string;
+    uiActionsApi: () => UiActionsStart;
+    callback?: () => void;
+  }
+): Promise<ReactNode[]> => {
+  const tools = props.devTools();
+
+  const devTool = (
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem>
+        <EuiIcon type="consoleApp" color="text" />
+      </EuiFlexItem>
+      <EuiFlexItem>{props.title}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  return tools
+    .filter((tool) => tool.title.toLowerCase().includes(query.toLowerCase()))
+    .map((tool) => ({
+      breadcrumbs: [
+        {
+          text: devTool,
+        },
+        /**
+         * add onClick to make it looks like a link and don't changed to href,
+         * for dev tools, the url will not change, set href will have unexpected behavior
+         */
+        { text: <EuiHighlight search={query}>{tool.title}</EuiHighlight>, onClick: () => {} },
+      ],
+      toolId: tool.id,
+    }))
+    .map((item) => {
+      return (
+        <DevToolItem
+          uiActionsApi={props.uiActionsApi()}
+          callback={props.callback}
+          breadcrumbs={item.breadcrumbs}
+          toolId={item.toolId}
+        />
+      );
+    });
+};
+
+export const DevToolItem = ({
+  breadcrumbs,
+  toolId,
+  callback,
+  uiActionsApi,
+}: {
+  breadcrumbs: EuiBreadcrumb[];
+  toolId: string;
+  callback?: () => void;
+  uiActionsApi: UiActionsStart;
+}) => {
+  return (
+    <div
+      onClick={() => {
+        callback?.();
+        uiActionsApi.getTrigger(DEVTOOL_TRIGGER_ID).exec({ defaultRoute: toolId });
+      }}
+      aria-hidden={true}
+      data-test-subj={`toolId-${toolId}`}
+    >
+      <EuiSimplifiedBreadcrumbs breadcrumbs={breadcrumbs} hideTrailingSeparator />
+    </div>
+  );
+};
diff --git a/src/plugins/dev_tools/public/plugin.test.ts b/src/plugins/dev_tools/public/plugin.test.ts
new file mode 100644
index 000000000000..7cccaa2b58b5
--- /dev/null
+++ b/src/plugins/dev_tools/public/plugin.test.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CoreSetup } from 'opensearch-dashboards/public';
+import { DevToolsPlugin, DevToolsSetupDependencies } from './plugin';
+import { coreMock } from '../../../core/public/mocks';
+import { urlForwardingPluginMock } from '../../url_forwarding/public/mocks';
+import { uiActionsPluginMock } from '../../ui_actions/public/mocks';
+
+describe('DevToolsPlugin', () => {
+  describe('setup', () => {
+    const plugin = new DevToolsPlugin();
+
+    const coreSetup: CoreSetup = coreMock.createSetup();
+    const deps: DevToolsSetupDependencies = {
+      urlForwarding: urlForwardingPluginMock.createSetupContract(),
+      uiActions: uiActionsPluginMock.createSetupContract(),
+    };
+
+    const getNavGroupEnabledMock = jest.fn().mockReturnValue(true);
+    const coreSetupMock = {
+      ...coreSetup,
+      chrome: {
+        ...coreSetup.chrome,
+        navGroup: {
+          ...coreSetup.chrome.navGroup,
+          getNavGroupEnabled: getNavGroupEnabledMock,
+        },
+      },
+    };
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should register global search strategy for dev tools when new home is enabled', () => {
+      plugin.setup(coreSetupMock, deps);
+      expect(coreSetupMock.chrome.globalSearch.registerSearchCommand).toHaveBeenCalled();
+      expect(deps.uiActions.registerTrigger).toHaveBeenCalled();
+    });
+
+    it('should not register global search strategy for dev tools when new home is not enabled', () => {
+      getNavGroupEnabledMock.mockReturnValue(false);
+      plugin.setup(coreSetupMock, deps);
+      expect(coreSetupMock.chrome.globalSearch.registerSearchCommand).not.toHaveBeenCalled();
+      expect(deps.uiActions.registerTrigger).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/plugins/dev_tools/public/plugin.ts b/src/plugins/dev_tools/public/plugin.ts
index e6478807da7a..d099d1fc90de 100644
--- a/src/plugins/dev_tools/public/plugin.ts
+++ b/src/plugins/dev_tools/public/plugin.ts
@@ -50,14 +50,40 @@ import { ManagementOverViewPluginSetup } from '../../management_overview/public'
 import { toMountPoint } from '../../opensearch_dashboards_react/public';
 import { DevToolsIcon } from './dev_tools_icon';
 import { WorkspaceAvailability } from '../../../core/public';
+import { searchForDevTools } from './global_search/search_devtool_command';
+import { Trigger, UiActionsSetup, UiActionsStart } from '../../ui_actions/public';
+
+export const DEVTOOL_OPEN_ACTION = 'DEVTOOL_OPEN_ACTION';
+export const DEVTOOL_TRIGGER_ID = 'DEVTOOL_TRIGGER_ID';
+export const devToolsTrigger: Trigger = {
+  id: DEVTOOL_TRIGGER_ID,
+};
+
+export interface DevToolsContext {
+  defaultRoute: string;
+}
+
+declare module '../../ui_actions/public' {
+  export interface TriggerContextMapping {
+    [DEVTOOL_TRIGGER_ID]: {};
+  }
+
+  export interface ActionContextMapping {
+    [DEVTOOL_OPEN_ACTION]: DevToolsContext;
+  }
+}
 
 export interface DevToolsSetupDependencies {
   urlForwarding: UrlForwardingSetup;
+  uiActions: UiActionsSetup;
   dataSource?: DataSourcePluginSetup;
   dataSourceManagement?: DataSourceManagementPluginSetup;
   managementOverview?: ManagementOverViewPluginSetup;
 }
 
+export interface DevToolsStartDependencies {
+  uiActions: UiActionsStart;
+}
 export interface DevToolsSetup {
   /**
    * Register a developer tool. It will be available
@@ -76,11 +102,16 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
   private readonly devTools = new Map<string, DevToolApp>();
   private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
   private setupDeps: DevToolsSetupDependencies | undefined;
+  private uiActionsStart: UiActionsStart | undefined;
 
   private getSortedDevTools(): readonly DevToolApp[] {
     return sortBy([...this.devTools.values()], 'order');
   }
 
+  private getUiActionsStart(): UiActionsStart {
+    return this.uiActionsStart!;
+  }
+
   private title = i18n.translate('devTools.devToolsTitle', {
     defaultMessage: 'Dev Tools',
   });
@@ -89,7 +120,7 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
 
   public setup(coreSetup: CoreSetup, deps: DevToolsSetupDependencies) {
     const { application: applicationSetup, getStartServices } = coreSetup;
-    const { urlForwarding, managementOverview } = deps;
+    const { urlForwarding, managementOverview, uiActions } = deps;
     this.setupDeps = deps;
 
     applicationSetup.register({
@@ -124,6 +155,25 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
 
     urlForwarding.forwardApp('dev_tools', 'dev_tools');
 
+    if (coreSetup.chrome.navGroup.getNavGroupEnabled()) {
+      /**
+       * register search strategy for dev tools
+       */
+      coreSetup.chrome.globalSearch.registerSearchCommand({
+        id: 'devtools',
+        type: 'PAGES',
+        run: async (query: string, callback?: () => void) =>
+          searchForDevTools(query, {
+            devTools: this.getSortedDevTools.bind(this),
+            title: this.title,
+            uiActionsApi: this.getUiActionsStart.bind(this),
+            callback,
+          }),
+      });
+
+      uiActions.registerTrigger(devToolsTrigger);
+    }
+
     return {
       register: (devToolArgs: CreateDevToolArgs) => {
         if (this.devTools.has(devToolArgs.id)) {
@@ -139,7 +189,8 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
     };
   }
 
-  public start(core: CoreStart) {
+  public start(core: CoreStart, { uiActions }: DevToolsStartDependencies) {
+    this.uiActionsStart = uiActions;
     if (core.chrome.navGroup.getNavGroupEnabled()) {
       core.chrome.navControls.registerLeftBottom({
         order: 4,
diff --git a/src/plugins/discover/public/application/components/chart/_histogram.scss b/src/plugins/discover/public/application/components/chart/_histogram.scss
index 3b1c1799e0f6..f30d24d0bb45 100644
--- a/src/plugins/discover/public/application/components/chart/_histogram.scss
+++ b/src/plugins/discover/public/application/components/chart/_histogram.scss
@@ -11,7 +11,6 @@
 }
 
 .dscChart__wrapper {
-  border-top: 1px solid $euiColorLightShade;
   border-bottom: 1px solid $euiColorLightShade;
   padding: 8px;
   gap: 8px;
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
index a79876ccb455..a20f551d09fa 100644
--- 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
@@ -118,7 +118,7 @@ export function TimechartHeader({
 
   return (
     <I18nProvider>
-      <EuiFlexGroup gutterSize="s" responsive justifyContent="center" alignItems="center">
+      <EuiFlexGroup gutterSize="s" responsive alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiToolTip
             content={i18n.translate('discover.howToChangeTheTimeTooltip', {
diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
index e5af22b21874..233b5d3f4959 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
+++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
@@ -88,7 +88,7 @@ $osdDocTableCellPadding: calc($euiSizeM / 2); // corresponds to DataGrid medium
 // nested for specificity
 .osd-table {
   .osdDocTableCell {
-    padding: $osdDocTableCellPadding;
+    padding: $euiSizeS;
   }
 }
 
diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss
index 92c60f9eafe7..40040c46b6df 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss
+++ b/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss
@@ -4,7 +4,7 @@
 
   // nested for specificity
   .docTableHeaderField {
-    padding: calc($euiSizeM / 2); // corresponds to DataGrid medium cellPadding
+    padding: $euiSizeS;
   }
 }
 
diff --git a/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.scss b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.scss
new file mode 100644
index 000000000000..b435d3b36a6d
--- /dev/null
+++ b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.scss
@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.discoverNoIndexPatterns-centerPanel {
+  width: 100%;
+
+  & > * {
+    @include euiLegibilityMaxWidth(100%);
+  }
+}
diff --git a/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.tsx b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.tsx
new file mode 100644
index 000000000000..7906a2f06041
--- /dev/null
+++ b/src/plugins/discover/public/application/components/no_index_patterns/no_index_patterns.tsx
@@ -0,0 +1,89 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './no_index_patterns.scss';
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiTitle,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import { getServices } from '../../../opensearch_dashboards_services';
+
+export const DiscoverNoIndexPatterns: React.FC = () => {
+  const languageService = getServices().data.query.queryString.getLanguageService();
+  const registeredLanguages = languageService.getLanguages();
+
+  return (
+    <EuiFlexGroup
+      justifyContent="center"
+      alignItems="center"
+      gutterSize="none"
+      className="discoverNoIndexPatterns-centerPanel"
+    >
+      <EuiFlexItem grow={false}>
+        <EuiPanel paddingSize="l">
+          <EuiFlexGroup direction="column" alignItems="center" gutterSize="m">
+            <EuiFlexItem>
+              <EuiIcon type="visBarVertical" size="xl" color="subdued" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiTitle size="m">
+                <h2>
+                  {i18n.translate('discover.noIndexPatterns.selectDataTitle', {
+                    defaultMessage: 'Select data',
+                  })}
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText textAlign="center" color="subdued" size="xs">
+                {i18n.translate('discover.noIndexPatterns.selectDataDescription', {
+                  defaultMessage:
+                    'Select an available data source and choose a query language to use for running queries. You can use the data dropdown or use the enhanced data selector to select data.',
+                })}
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiTitle size="xs">
+                <h4>
+                  {i18n.translate('discover.noIndexPatterns.learnMoreAboutQueryLanguages', {
+                    defaultMessage: 'Learn more about query languages',
+                  })}
+                </h4>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup justifyContent="center" gutterSize="s" wrap>
+                {registeredLanguages.map(
+                  (language) =>
+                    language.docLink && (
+                      <EuiFlexItem grow={false} key={language.id}>
+                        <EuiButtonEmpty
+                          href={language.docLink.url}
+                          target="_blank"
+                          size="xs"
+                          iconType="popout"
+                          iconSide="right"
+                          iconGap="s"
+                        >
+                          <EuiText size="xs">{language.docLink.title}</EuiText>
+                        </EuiButtonEmpty>
+                      </EuiFlexItem>
+                    )
+                )}
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/discover/public/application/components/no_results/no_results.scss b/src/plugins/discover/public/application/components/no_results/no_results.scss
new file mode 100644
index 000000000000..401aa9bb6f7a
--- /dev/null
+++ b/src/plugins/discover/public/application/components/no_results/no_results.scss
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.discoverNoResults-sampleContainer {
+  @include euiLegibilityMaxWidth(100%);
+
+  margin: 0 auto;
+}
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
index 2c64bd6a0412..57d34b64ef64 100644
--- a/src/plugins/discover/public/application/components/no_results/no_results.tsx
+++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx
@@ -28,18 +28,34 @@
  * under the License.
  */
 
-import React from 'react';
+import './no_results.scss';
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import { I18nProvider } from '@osd/i18n/react';
 
-import { EuiEmptyPrompt, EuiPanel, EuiText } from '@elastic/eui';
+import {
+  EuiEmptyPrompt,
+  EuiText,
+  EuiTabbedContent,
+  EuiCodeBlock,
+  EuiSpacer,
+  EuiPanel,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
+import {
+  Query,
+  QueryStringContract,
+  SavedQuery,
+  SavedQueryService,
+} from '../../../../../data/public/';
 
 interface Props {
+  queryString: QueryStringContract;
+  savedQuery: SavedQueryService;
+  query: Query | undefined;
   timeFieldName?: string;
-  queryLanguage?: string;
 }
 
-export const DiscoverNoResults = ({ timeFieldName, queryLanguage }: Props) => {
+export const DiscoverNoResults = ({ queryString, query, savedQuery, timeFieldName }: Props) => {
   // Commented out due to no usage in code
   // See: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/8149
   //
@@ -157,34 +173,120 @@ export const DiscoverNoResults = ({ timeFieldName, queryLanguage }: Props) => {
   //   );
   // }
 
+  const [savedQueries, setSavedQueries] = useState<SavedQuery[]>([]);
+
+  useEffect(() => {
+    const fetchSavedQueries = async () => {
+      const { queries: savedQueryItems } = await savedQuery.findSavedQueries('', 1000);
+      setSavedQueries(
+        savedQueryItems.filter((sq) => query?.language === sq.attributes.query.language)
+      );
+    };
+
+    fetchSavedQueries();
+  }, [setSavedQueries, query, savedQuery]);
+
+  const tabs = useMemo(() => {
+    const buildSampleQueryBlock = (sampleTitle: string, sampleQuery: string) => {
+      return (
+        <>
+          <EuiText size="s">{sampleTitle}</EuiText>
+          <EuiSpacer size="s" />
+          <EuiCodeBlock isCopyable>{sampleQuery}</EuiCodeBlock>
+          <EuiSpacer size="s" />
+        </>
+      );
+    };
+
+    const sampleQueries = [];
+
+    // Samples for the dataset type
+    if (query?.dataset?.type) {
+      const datasetSampleQueries = queryString
+        .getDatasetService()
+        ?.getType(query.dataset.type)
+        ?.getSampleQueries?.(query.dataset, query.language);
+      if (Array.isArray(datasetSampleQueries)) sampleQueries.push(...datasetSampleQueries);
+    }
+
+    // Samples for the language
+    if (query?.language) {
+      const languageSampleQueries = queryString.getLanguageService()?.getLanguage(query.language)
+        ?.sampleQueries;
+      if (Array.isArray(languageSampleQueries)) sampleQueries.push(...languageSampleQueries);
+    }
+
+    return [
+      ...(sampleQueries.length > 0
+        ? [
+            {
+              id: 'sample_queries',
+              name: i18n.translate('discover.emptyPrompt.sampleQueries.title', {
+                defaultMessage: 'Sample Queries',
+              }),
+              content: (
+                <EuiPanel hasBorder={false} hasShadow={false}>
+                  <EuiSpacer size="s" />
+                  {sampleQueries
+                    .slice(0, 5)
+                    .map((sampleQuery) =>
+                      buildSampleQueryBlock(sampleQuery.title, sampleQuery.query)
+                    )}
+                </EuiPanel>
+              ),
+            },
+          ]
+        : []),
+      ...(savedQueries.length > 0
+        ? [
+            {
+              id: 'saved_queries',
+              name: i18n.translate('discover.emptyPrompt.savedQueries.title', {
+                defaultMessage: 'Saved Queries',
+              }),
+              content: (
+                <Fragment>
+                  <EuiSpacer />
+                  {savedQueries.map((sq) =>
+                    buildSampleQueryBlock(sq.id, sq.attributes.query.query as string)
+                  )}
+                </Fragment>
+              ),
+            },
+          ]
+        : []),
+    ];
+  }, [queryString, query, savedQueries]);
+
   return (
     <I18nProvider>
-      <EuiPanel hasBorder={false} hasShadow={false} color="transparent">
-        <EuiEmptyPrompt
-          iconType="alert"
-          iconColor="default"
-          data-test-subj="discoverNoResults"
-          title={
-            <EuiText size="s">
-              <h2>
-                {i18n.translate('discover.emptyPrompt.title', {
-                  defaultMessage: 'No Results',
-                })}
-              </h2>
-            </EuiText>
-          }
-          body={
-            <EuiText size="s" data-test-subj="discoverNoResultsTimefilter">
-              <p>
-                {i18n.translate('discover.emptyPrompt.body', {
-                  defaultMessage:
-                    'Try selecting a different data source, expanding your time range or modifying the query & filters.',
-                })}
-              </p>
-            </EuiText>
-          }
-        />
-      </EuiPanel>
+      <EuiEmptyPrompt
+        iconType="editorCodeBlock"
+        iconColor="default"
+        data-test-subj="discoverNoResults"
+        title={
+          <EuiText size="s">
+            <h2>
+              {i18n.translate('discover.emptyPrompt.title', {
+                defaultMessage: 'No Results',
+              })}
+            </h2>
+          </EuiText>
+        }
+        body={
+          <EuiText size="s" data-test-subj="discoverNoResultsTimefilter">
+            <p>
+              {i18n.translate('discover.emptyPrompt.body', {
+                defaultMessage:
+                  'Try selecting a different data source, expanding your time range or modifying the query & filters.',
+              })}
+            </p>
+          </EuiText>
+        }
+      />
+      <div className="discoverNoResults-sampleContainer">
+        <EuiTabbedContent tabs={tabs} />
+      </div>
     </I18nProvider>
   );
 };
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 3469fd1d34dc..c93352d43589 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
@@ -275,6 +275,7 @@ export function DiscoverFieldSearch({
         <EuiSmallFilterButton
           iconType="filter"
           iconSide="left"
+          iconGap="none"
           hasActiveFilters={activeFiltersCount > 0}
           aria-label={filterBtnAriaLabel}
           data-test-subj="toggleFieldFilterButton"
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 aaba1c5a42aa..07f9e7e4ed06 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -4,19 +4,40 @@
  */
 
 .deSidebar_panel {
-  border-left: 0;
-
   .dscSideBar_searchContainer {
-    padding: $euiSizeXS;
     border-bottom: $euiBorderThin;
 
     .toggleFieldFilterButton {
       border: none;
+      background-color: $euiFormInputGroupLabelBackground;
     }
 
     .dscSideBar_searchInput {
       box-shadow: none;
-      border-right: $euiBorderThin;
+      border: $euiBorderThin;
+      background-color: $euiFormBackgroundColor;
+    }
+  }
+
+  .dscSideBar_fieldListContainer {
+    padding-top: $euiSizeS;
+  }
+
+  .deSidebar_dataSource {
+    padding-bottom: 0;
+  }
+
+  .datasetSelector__button {
+    border-radius: $euiFormControlCompressedBorderRadius;
+    border-color: $euiFormBorderColor;
+    background-color: $euiFormBackgroundColor;
+
+    & > .euiButtonContent {
+      justify-content: space-between;
+
+      .euiIcon {
+        fill: $euiTextSubduedColor;
+      }
     }
   }
 }
@@ -27,7 +48,8 @@
   .euiButtonEmpty__content {
     font-size: $euiFontSizeXS;
     font-weight: $euiFontWeightSemiBold;
-    justify-content: flex-end;
+    justify-content: flex-start;
+    padding-left: $euiSizeM + 2px;
   }
 }
 
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 0b0162159a38..12ba460bb5a1 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx
@@ -215,11 +215,7 @@ export function DiscoverSidebar(props: DiscoverSidebarProps) {
           color="transparent"
           hasBorder={false}
         >
-          <EuiSplitPanel.Inner
-            grow={false}
-            paddingSize="none"
-            className="dscSideBar_searchContainer"
-          >
+          <EuiSplitPanel.Inner grow={false} paddingSize="s" className="dscSideBar_searchContainer">
             <DiscoverFieldSearch
               onChange={onChangeFieldSearch}
               value={fieldFilterState.name}
@@ -235,7 +231,10 @@ export function DiscoverSidebar(props: DiscoverSidebarProps) {
               />
             </EuiSplitPanel.Inner>
           ) : null}
-          <EuiSplitPanel.Inner className="eui-yScroll" paddingSize="none">
+          <EuiSplitPanel.Inner
+            className="eui-yScroll dscSideBar_fieldListContainer"
+            paddingSize="none"
+          >
             {fields.length > 0 && (
               <>
                 <FieldList
@@ -306,7 +305,7 @@ const FieldList = ({
   return (
     <>
       <EuiButtonEmpty
-        iconSide="right"
+        iconSide="left"
         color="text"
         iconType={expanded ? 'arrowDown' : 'arrowRight'}
         onClick={() => setExpanded(!expanded)}
@@ -319,7 +318,7 @@ const FieldList = ({
       {expanded && (
         <EuiDroppable
           droppableId={`${category.toUpperCase()}_FIELDS`}
-          spacing="m"
+          spacing="l"
           data-test-subj={`fieldList-${category}`}
           cloneDraggables={category !== 'selected'}
         >
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 93b80ae99653..5d9a030e2e13 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
@@ -28,8 +28,7 @@
  * under the License.
  */
 
-import { difference } from 'lodash';
-import { IndexPattern, IndexPatternField } from 'src/plugins/data/public';
+import { IndexPattern } from 'src/plugins/data/public';
 
 export function getIndexPatternFieldList(
   indexPattern?: IndexPattern,
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
index 647b989f42e4..d87e1e47f702 100644
--- 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
@@ -277,7 +277,8 @@ export const getTopNavLinks = (
   services: DiscoverViewServices,
   inspectorAdapters: Adapters,
   savedSearch: SavedSearch,
-  isEnhancementEnabled: boolean = false
+  isEnhancementEnabled: boolean = false,
+  useNoIndexPatternsTopNav: boolean = false
 ) => {
   const {
     history,
@@ -503,8 +504,18 @@ export const getTopNavLinks = (
   // Order their appearance
   return ['save', 'open', 'new', 'inspect', 'share'].reduce((acc, item) => {
     const itemDef = topNavLinksMap.get(item);
-    if (itemDef) acc.push(itemDef);
-
+    if (itemDef) {
+      if (useNoIndexPatternsTopNav && item !== 'open') {
+        // Disable all buttons except 'open' when in no index patterns mode
+        acc.push({
+          ...itemDef,
+          disabled: true,
+          run: () => {}, // Empty function for disabled buttons
+        });
+      } else {
+        acc.push(itemDef);
+      }
+    }
     return acc;
   }, [] as TopNavMenuData[]);
 };
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
index e0ab20a15296..beac224ec6ba 100644
--- a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
+++ b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
@@ -1,5 +1,5 @@
 .dscCanvas {
-  @include euiYScrollWithShadows;
+  @include euiYScroll;
 
   /* stylelint-disable-next-line */
   container-type: inline-size; // containment context
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
index 2e956d6908e9..cf834888b4f0 100644
--- a/src/plugins/discover/public/application/view_components/canvas/index.tsx
+++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
 import { DiscoverTable } from './discover_table';
@@ -12,6 +12,7 @@ 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 { DiscoverNoIndexPatterns } from '../../components/no_index_patterns/no_index_patterns';
 import { DiscoverUninitialized } from '../../components/uninitialized/uninitialized';
 import { LoadingSpinner } from '../../components/loading_spinner/loading_spinner';
 import { setColumns, useDispatch, useSelector } from '../../utils/state_management';
@@ -37,6 +38,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
       uiSettings,
       capabilities,
       chrome: { setHeaderVariant },
+      data,
     },
   } = useOpenSearchDashboards<DiscoverViewServices>();
   const { columns } = useSelector((state) => {
@@ -125,11 +127,11 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
   return (
     <EuiPanel
       panelRef={panelRef}
-      hasBorder={false}
+      hasBorder={true}
       hasShadow={false}
-      color="transparent"
-      paddingSize="none"
+      paddingSize="s"
       className="dscCanvas"
+      borderRadius="l"
     >
       <TopNav
         isEnhancementsEnabled={isEnhancementsEnabled}
@@ -141,27 +143,46 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history, optionalR
         showSaveQuery={showSaveQuery}
       />
 
-      {fetchState.status === ResultStatus.NO_RESULTS && (
-        <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
-      )}
-      {fetchState.status === ResultStatus.ERROR && (
-        <DiscoverNoResults timeFieldName={timeField} queryLanguage={''} />
-      )}
-      {fetchState.status === ResultStatus.UNINITIALIZED && (
-        <DiscoverUninitialized onRefresh={() => refetch$.next()} />
-      )}
-      {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
-      {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && (
+      {indexPattern ? (
         <>
-          <MemoizedDiscoverChartContainer {...fetchState} />
-          <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+          {fetchState.status === ResultStatus.NO_RESULTS && (
+            <DiscoverNoResults
+              queryString={data.query.queryString}
+              query={data.query.queryString.getQuery()}
+              savedQuery={data.query.savedQueries}
+              timeFieldName={timeField}
+            />
+          )}
+          {fetchState.status === ResultStatus.ERROR && (
+            <DiscoverNoResults
+              queryString={data.query.queryString}
+              query={data.query.queryString.getQuery()}
+              savedQuery={data.query.savedQueries}
+              timeFieldName={timeField}
+            />
+          )}
+          {fetchState.status === ResultStatus.UNINITIALIZED && (
+            <DiscoverUninitialized onRefresh={() => refetch$.next()} />
+          )}
+          {fetchState.status === ResultStatus.LOADING && <LoadingSpinner />}
+          {fetchState.status === ResultStatus.READY && isEnhancementsEnabled && (
+            <>
+              <MemoizedDiscoverChartContainer {...fetchState} />
+              <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+            </>
+          )}
+          {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && (
+            <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
+              <MemoizedDiscoverChartContainer {...fetchState} />
+              <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+            </EuiPanel>
+          )}
+        </>
+      ) : (
+        <>
+          <EuiSpacer size="xxl" />
+          <DiscoverNoIndexPatterns />
         </>
-      )}
-      {fetchState.status === ResultStatus.READY && !isEnhancementsEnabled && (
-        <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
-          <MemoizedDiscoverChartContainer {...fetchState} />
-          <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
-        </EuiPanel>
       )}
     </EuiPanel>
   );
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
index 2aa288b9bdf1..6f827e563ec6 100644
--- a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
+++ b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
@@ -90,16 +90,9 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
     const initializeDataset = async () => {
       await data.indexPatterns.ensureDefaultIndexPattern();
       const defaultIndexPattern = await data.indexPatterns.getDefault();
-      // TODO: ROCKY do we need this?
-      // const queryString = data.query.queryString;
-      // const defaultDataset = queryString.getDatasetService().getDefault();
-
       if (!isMounted) return;
 
       setIndexPatterns(defaultIndexPattern ? [defaultIndexPattern] : undefined);
-      // if (defaultDataset) {
-      //   datasetManager.setDataset(defaultDataset);
-      // }
     };
 
     initializeDataset();
@@ -173,10 +166,12 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
         onQuerySubmit={opts.onQuerySubmit}
         savedQueryId={state.savedQuery}
         onSavedQueryIdChange={updateSavedQueryId}
+        datasetSelectorRef={opts?.optionalRef?.datasetSelectorRef}
         datePickerRef={opts?.optionalRef?.datePickerRef}
         groupActions={showActionsInGroup}
         screenTitle={screenTitle}
         queryStatus={queryStatus}
+        showQueryBar={!!opts?.optionalRef?.datasetSelectorRef}
       />
     </>
   );
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
index 1ced2beaccfe..7274bf125497 100644
--- 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
@@ -74,25 +74,25 @@ export const useIndexPattern = (services: DiscoverViewServices) => {
             handleIndexPattern();
           }
         } else {
-          try {
-            const ip = await fetchIndexPatternDetails(indexPatternIdFromState);
-            if (isMounted) {
-              setIndexPattern(ip);
-            }
-          } catch (error) {
-            if (isMounted) {
-              const warningMessage = i18n.translate('discover.indexPatternFetchErrorWarning', {
-                defaultMessage: 'Error fetching index pattern: {error}',
-                values: { error: (error as Error).message },
-              });
-              toastNotifications.addWarning(warningMessage);
-            }
+          const ip = await fetchIndexPatternDetails(indexPatternIdFromState);
+          if (isMounted) {
+            setIndexPattern(ip);
           }
         }
       }
     };
 
-    handleIndexPattern();
+    try {
+      handleIndexPattern();
+    } catch (error) {
+      if (isMounted) {
+        const warningMessage = i18n.translate('discover.indexPatternFetchErrorWarning', {
+          defaultMessage: 'Error fetching index pattern: {error}',
+          values: { error: (error as Error).message },
+        });
+        toastNotifications.addWarning(warningMessage);
+      }
+    }
 
     return () => {
       isMounted = false;
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
index 70fca506af68..3796faea1142 100644
--- a/src/plugins/discover/public/application/view_components/utils/use_search.ts
+++ b/src/plugins/discover/public/application/view_components/utils/use_search.ts
@@ -88,6 +88,7 @@ export const useSearch = (services: DiscoverViewServices) => {
   const [savedSearch, setSavedSearch] = useState<SavedSearch | undefined>(undefined);
   const { savedSearch: savedSearchId, sort, interval } = useSelector((state) => state.discover);
   const indexPattern = useIndexPattern(services);
+  const skipInitialFetch = useRef(false);
   const {
     data,
     filterManager,
@@ -111,6 +112,15 @@ export const useSearch = (services: DiscoverViewServices) => {
     requests: new RequestAdapter(),
   };
 
+  const getDatasetAutoSearchOnPageLoadPreference = () => {
+    // Checks the searchOnpageLoadPreference for the current dataset if not specifed defaults to true
+    const datasetType = data.query.queryString.getQuery().dataset?.type;
+
+    const datasetService = data.query.queryString.getDatasetService();
+
+    return !datasetType || (datasetService?.getType(datasetType)?.meta?.searchOnLoad ?? true);
+  };
+
   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
@@ -125,10 +135,13 @@ export const useSearch = (services: DiscoverViewServices) => {
   const data$ = useMemo(
     () =>
       new BehaviorSubject<SearchData>({
-        status: shouldSearchOnPageLoad() ? ResultStatus.LOADING : ResultStatus.UNINITIALIZED,
+        status:
+          shouldSearchOnPageLoad() && !skipInitialFetch.current
+            ? ResultStatus.LOADING
+            : ResultStatus.UNINITIALIZED,
         queryStatus: { startTime },
       }),
-    [shouldSearchOnPageLoad, startTime]
+    [shouldSearchOnPageLoad, startTime, skipInitialFetch]
   );
   const refetch$ = useMemo(() => new Subject<SearchRefetch>(), []);
 
@@ -289,6 +302,9 @@ export const useSearch = (services: DiscoverViewServices) => {
   ]);
 
   useEffect(() => {
+    if (!getDatasetAutoSearchOnPageLoadPreference()) {
+      skipInitialFetch.current = true;
+    }
     const fetch$ = merge(
       refetch$,
       filterManager.getFetches$(),
@@ -297,8 +313,11 @@ export const useSearch = (services: DiscoverViewServices) => {
       timefilter.getAutoRefreshFetch$(),
       data.query.queryString.getUpdates$()
     ).pipe(debounceTime(100));
-
     const subscription = fetch$.subscribe(() => {
+      if (skipInitialFetch.current) {
+        skipInitialFetch.current = false; // Reset so future fetches will proceed normally
+        return; // Skip the first fetch
+      }
       (async () => {
         try {
           await fetch();
@@ -316,6 +335,8 @@ export const useSearch = (services: DiscoverViewServices) => {
     return () => {
       subscription.unsubscribe();
     };
+    // disabling the eslint since we are not adding getDatasetAutoSearchOnPageLoadPreference since this changes when dataset changes and these chnages are already part of data.query.queryString
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     data$,
     data.query.queryString,
diff --git a/src/plugins/discover/public/plugin.ts b/src/plugins/discover/public/plugin.ts
index 2e1f76aea6ad..2b17d334283b 100644
--- a/src/plugins/discover/public/plugin.ts
+++ b/src/plugins/discover/public/plugin.ts
@@ -206,9 +206,10 @@ export class DiscoverPlugin
       generateCb: (renderProps: any) => {
         const globalFilters: any = getServices().filterManager.getGlobalFilters();
         const appFilters: any = getServices().filterManager.getAppFilters();
-        const showDocLinks = getServices()
-          .data.query.queryString.getLanguageService()
-          .getUiOverrides().showDocLinks;
+        const queryString = getServices().data.query.queryString;
+        const showDocLinks =
+          queryString.getLanguageService().getLanguage(queryString.getQuery().language)
+            ?.showDocLinks ?? undefined;
 
         const hash = stringify(
           url.encodeQuery({
@@ -242,9 +243,10 @@ export class DiscoverPlugin
         defaultMessage: 'View single document',
       }),
       generateCb: (renderProps) => {
-        const showDocLinks = getServices()
-          .data.query.queryString.getLanguageService()
-          .getUiOverrides().showDocLinks;
+        const queryString = getServices().data.query.queryString;
+        const showDocLinks =
+          queryString.getLanguageService().getLanguage(queryString.getQuery().language)
+            ?.showDocLinks ?? undefined;
 
         const docUrl = `#/doc/${renderProps.indexPattern.id}/${
           renderProps.hit._index
diff --git a/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
index 3230c2c5d8ca..e51688edf775 100644
--- a/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
@@ -39,7 +39,7 @@ exports[`should render popover when appLinks is not empty 1`] = `
               "onClick": [Function],
             },
             Object {
-              "href": "rootapp/myAppPath",
+              "href": "rootundefined",
               "icon": <EuiIcon
                 size="m"
                 type="inputOutput"
diff --git a/src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx b/src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx
index 6d3d3559605c..677f87df8718 100644
--- a/src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx
+++ b/src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx
@@ -23,28 +23,17 @@ describe('Sample data card', () => {
     expect(call[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
-          "selectable": Object {
-            "children": <EuiI18n
-              default="Sample Datasets"
-              token="home.sampleData.card.footer"
-            />,
-            "isSelected": false,
-            "onClick": [Function],
-          },
-          "titleElement": "h4",
-          "titleSize": "s",
+          "className": "usecaseOverviewGettingStartedCard",
         },
-        "description": "Explore sample data before adding your own.",
+        "description": "Install sample data to experiment with OpenSearch.",
+        "getFooter": [Function],
+        "getIcon": [Function],
         "id": "sample_data",
         "kind": "card",
+        "onClick": [Function],
         "order": 0,
-        "title": "Try OpenSearch",
+        "title": "",
       }
     `);
-
-    // search use case overview
-    expect(registerContentProviderMock.mock.calls[1][0].getTargetArea()).toEqual(
-      'search_overview/get_started'
-    );
   });
 });
diff --git a/src/plugins/home/public/application/components/sample_data/sample_data_card.tsx b/src/plugins/home/public/application/components/sample_data/sample_data_card.tsx
index 061f00335212..30d1c64c8798 100644
--- a/src/plugins/home/public/application/components/sample_data/sample_data_card.tsx
+++ b/src/plugins/home/public/application/components/sample_data/sample_data_card.tsx
@@ -5,13 +5,12 @@
 
 import { CoreStart } from 'opensearch-dashboards/public';
 import React from 'react';
-import { EuiI18n } from '@elastic/eui';
+import { EuiI18n, EuiIcon, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
   ContentManagementPluginStart,
   ContentProvider,
   ESSENTIAL_OVERVIEW_CONTENT_AREAS,
-  SEARCH_OVERVIEW_CONTENT_AREAS,
 } from '../../../../../content_management/public';
 import { IMPORT_SAMPLE_DATA_APP_ID } from '../../../../common/constants';
 
@@ -27,22 +26,21 @@ export const registerSampleDataCard = (
       kind: 'card',
       order,
       description: i18n.translate('home.sampleData.card.description', {
-        defaultMessage: 'Explore sample data before adding your own.',
-      }),
-      title: i18n.translate('home.sampleData.card.title', {
-        defaultMessage: 'Try OpenSearch',
+        defaultMessage: 'Install sample data to experiment with OpenSearch.',
       }),
+      title: '',
+      onClick: () => {
+        // TODO change to a modal
+        core.application.navigateToApp(IMPORT_SAMPLE_DATA_APP_ID);
+      },
+      getIcon: () => <EuiIcon type="functionAdd" size="l" color="primary" />,
+      getFooter: () => (
+        <EuiTextColor color="subdued">
+          <EuiI18n token="home.sampleData.card.footer" default="Sample datasets" />
+        </EuiTextColor>
+      ),
       cardProps: {
-        titleElement: 'h4',
-        titleSize: 's',
-        selectable: {
-          children: <EuiI18n token="home.sampleData.card.footer" default="Sample Datasets" />,
-          isSelected: false,
-          onClick: () => {
-            // TODO change to a modal
-            core.application.navigateToApp(IMPORT_SAMPLE_DATA_APP_ID);
-          },
-        },
+        className: 'usecaseOverviewGettingStartedCard',
       },
     }),
   });
@@ -50,7 +48,4 @@ export const registerSampleDataCard = (
   contentManagement.registerContentProvider(
     sampleDataCard(0, ESSENTIAL_OVERVIEW_CONTENT_AREAS.GET_STARTED)
   );
-  contentManagement.registerContentProvider(
-    sampleDataCard(30, SEARCH_OVERVIEW_CONTENT_AREAS.GET_STARTED)
-  );
 };
diff --git a/src/plugins/home/public/application/components/sample_data_set_card.js b/src/plugins/home/public/application/components/sample_data_set_card.js
index 8e6e2138ee1e..5671478fa0de 100644
--- a/src/plugins/home/public/application/components/sample_data_set_card.js
+++ b/src/plugins/home/public/application/components/sample_data_set_card.js
@@ -117,6 +117,7 @@ export class SampleDataSetCard extends React.Component {
             <EuiFlexItem grow={false}>
               <SampleDataViewDataButton
                 id={this.props.id}
+                dataSourceId={this.props.dataSourceId}
                 name={this.props.name}
                 overviewDashboard={this.props.overviewDashboard}
                 appLinks={this.props.appLinks}
diff --git a/src/plugins/home/public/application/components/sample_data_view_data_button.js b/src/plugins/home/public/application/components/sample_data_view_data_button.js
index b0ae8da375e6..b51aef399200 100644
--- a/src/plugins/home/public/application/components/sample_data_view_data_button.js
+++ b/src/plugins/home/public/application/components/sample_data_view_data_button.js
@@ -38,6 +38,8 @@ import { createAppNavigationHandler } from './app_navigation_handler';
 
 export class SampleDataViewDataButton extends React.Component {
   addBasePath = getServices().addBasePath;
+  isDataSourceEnabled = !!getServices().dataSource;
+  chrome = getServices().chrome;
 
   state = {
     isPopoverOpen: false,
@@ -71,7 +73,7 @@ export class SampleDataViewDataButton extends React.Component {
     const dashboardPath = `/app/dashboards#/view/${this.props.overviewDashboard}`;
     const prefixedDashboardPath = this.addBasePath(dashboardPath);
 
-    if (this.props.appLinks.length === 0) {
+    if (this.props.appLinks.length === 0 && this.props.overviewDashboard !== '') {
       return (
         <EuiSmallButton
           onClick={createAppNavigationHandler(dashboardPath)}
@@ -83,26 +85,40 @@ export class SampleDataViewDataButton extends React.Component {
       );
     }
 
-    const additionalItems = this.props.appLinks.map(({ path, label, icon }) => {
-      return {
-        name: label,
-        icon: <EuiIcon type={icon} size="m" />,
-        href: this.addBasePath(path),
-        onClick: createAppNavigationHandler(path),
-      };
-    });
+    const additionalItems = this.props.appLinks.map(
+      ({ path, label, icon, newPath, appendDatasourceToPath }) => {
+        // switch paths if new nav is enabled
+        let appPath = this.chrome.navGroup.getNavGroupEnabled()
+          ? this.addBasePath(newPath)
+          : this.addBasePath(path);
+        // append datasourceId to app path
+        if (this.isDataSourceEnabled && appendDatasourceToPath) {
+          appPath = `${appPath}?datasourceId=${this.props.dataSourceId}`;
+        }
+        return {
+          name: label,
+          icon: <EuiIcon type={icon} size="m" />,
+          href: appPath,
+          onClick: createAppNavigationHandler(appPath),
+        };
+      }
+    );
     const panels = [
       {
         id: 0,
         items: [
-          {
-            name: i18n.translate('home.sampleDataSetCard.dashboardLinkLabel', {
-              defaultMessage: 'Dashboard',
-            }),
-            icon: <EuiIcon type="dashboardApp" size="m" />,
-            href: prefixedDashboardPath,
-            onClick: createAppNavigationHandler(dashboardPath),
-          },
+          ...(this.props.overviewDashboard !== ''
+            ? [
+                {
+                  name: i18n.translate('home.sampleDataSetCard.dashboardLinkLabel', {
+                    defaultMessage: 'Dashboard',
+                  }),
+                  icon: <EuiIcon type="dashboardApp" size="m" />,
+                  href: prefixedDashboardPath,
+                  onClick: createAppNavigationHandler(dashboardPath),
+                },
+              ]
+            : []),
           ...additionalItems,
         ],
       },
diff --git a/src/plugins/home/public/application/components/sample_data_view_data_button.test.js b/src/plugins/home/public/application/components/sample_data_view_data_button.test.js
index 11b0e617f764..32c7800226c0 100644
--- a/src/plugins/home/public/application/components/sample_data_view_data_button.test.js
+++ b/src/plugins/home/public/application/components/sample_data_view_data_button.test.js
@@ -36,6 +36,11 @@ import { SampleDataViewDataButton } from './sample_data_view_data_button';
 jest.mock('../opensearch_dashboards_services', () => ({
   getServices: () => ({
     addBasePath: (path) => `root${path}`,
+    chrome: {
+      navGroup: {
+        getNavGroupEnabled: jest.fn().mockReturnValue(true),
+      },
+    },
   }),
 }));
 
diff --git a/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.test.tsx b/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.test.tsx
index 9c5efee630c1..4b64c4d7532e 100644
--- a/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.test.tsx
+++ b/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.test.tsx
@@ -67,52 +67,35 @@ describe('Search use case setup', () => {
     expect(call[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
-          "selectable": Object {
-            "children": <EuiI18n
-              default="Documentation"
-              token="home.searchOverview.setup.accessSearch.footer"
-            />,
-            "isSelected": false,
-            "onClick": [Function],
-          },
-          "titleElement": "h4",
-          "titleSize": "s",
+          "className": "usecaseOverviewGettingStartedCard",
         },
-        "description": "You can run a search using REST API or language client. For experimentation, you can also run queries interactively.",
+        "description": "Explore search capabilities and functionality of OpenSearch.",
+        "getFooter": [Function],
+        "getIcon": [Function],
         "id": "access_search_functionality",
         "kind": "card",
+        "onClick": [Function],
         "order": 10,
-        "title": "Access search functionality",
+        "title": "",
       }
     `);
 
     // search type section
     const searchTypesCall = registerContentProviderMock.mock.calls[2];
-    expect(searchTypesCall[0].getTargetArea()).toEqual('search_overview/different_search_types');
+    expect(searchTypesCall[0].getTargetArea()).toEqual('search_overview/get_started');
     expect(searchTypesCall[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
-          "children": <div
-            className="euiCard__footer"
-          >
-            <EuiLink
-              external={true}
-              href="https://opensearch.org/docs/latest/query-dsl/full-text/"
-              target="_blank"
-            >
-              View Documentation
-            </EuiLink>
-          </div>,
-          "layout": "horizontal",
-          "titleElement": "h3",
-          "titleSize": "s",
+          "className": "usecaseOverviewGettingStartedCard",
         },
-        "description": "Lexical or keyword search matches documents based on exact words or phrases. Search the text using human-friendly query string query syntax or create complex, customizable queries using Query DSL—the OpenSearch query language.",
+        "description": "Explore data to uncover and discover insights.",
+        "getFooter": [Function],
         "getIcon": [Function],
-        "id": "text_search",
+        "id": "get_start_discover",
         "kind": "card",
-        "order": 10,
-        "title": "Text search",
+        "onClick": [Function],
+        "order": 30,
+        "title": "",
       }
     `);
   });
diff --git a/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.tsx b/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.tsx
index 96e0b159c595..b8c5102d9ccd 100644
--- a/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.tsx
+++ b/src/plugins/home/public/application/components/usecase_overview/search_use_case_setup.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { CoreStart } from 'opensearch-dashboards/public';
-import { EuiI18n, EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiI18n, EuiIcon, EuiLink, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
   ContentManagementPluginSetup,
@@ -15,6 +15,8 @@ import {
   SEARCH_OVERVIEW_CONTENT_AREAS,
 } from '../../../../../content_management/public';
 
+const DISCOVER_APP_ID = 'discover';
+
 export const setupSearchUseCase = (contentManagement: ContentManagementPluginSetup) => {
   contentManagement.registerPage({
     id: SEARCH_OVERVIEW_PAGE_ID,
@@ -56,39 +58,64 @@ export const registerContentToSearchUseCasePage = (
   contentManagement: ContentManagementPluginStart,
   core: CoreStart
 ) => {
+  // Replicate external EuiLink icon as doc links can't use EuiLink for visual consistency
+  const externalLinkIcon = (
+    <>
+      {' '}
+      <EuiIcon size="s" type="popout" />
+    </>
+  );
   const getStartedCards = [
     {
       id: 'access_search_functionality',
       order: 10,
-      title: i18n.translate('home.searchOverview.setup.accessSearch.title', {
-        defaultMessage: 'Access search functionality',
-      }),
+      icon: <EuiIcon type="bookOpen" size="l" color="primary" />,
+      title: '',
       description: i18n.translate('home.searchOverview.setup.accessSearch.description', {
-        defaultMessage:
-          'You can run a search using REST API or language client. For experimentation, you can also run queries interactively.',
+        defaultMessage: 'Explore search capabilities and functionality of OpenSearch.',
       }),
       footer: (
-        <EuiI18n token="home.searchOverview.setup.accessSearch.footer" default="Documentation" />
+        <EuiTextColor color="subdued">
+          <EuiI18n token="home.searchOverview.setup.accessSearch.footer" default="Documentation" />
+          {externalLinkIcon}
+        </EuiTextColor>
       ),
       documentURL: 'https://opensearch.org/docs/latest/search-plugins/',
     },
     {
       id: 'create_document_index',
       order: 20,
-      title: i18n.translate('home.searchOverview.setup.createDocumentIndex.title', {
-        defaultMessage: 'Create a document index',
-      }),
+      icon: <EuiIcon type="bookOpen" size="l" color="primary" />,
+      title: '',
       description: i18n.translate('home.searchOverview.setup.createDocumentIndex.description', {
-        defaultMessage:
-          'You can create a document collection (an index) by adding documents to a new index.',
+        defaultMessage: 'Create a document collection (an index) to query your data.',
+      }),
+      footer: (
+        <EuiTextColor color="subdued">
+          <EuiI18n
+            token="home.search_overview.createDocumentIndex.card.footer"
+            default="Documentation"
+          />
+          {externalLinkIcon}
+        </EuiTextColor>
+      ),
+      documentURL: 'https://opensearch.org/docs/latest/getting-started/intro/',
+    },
+    {
+      id: 'get_start_discover',
+      order: 30,
+      icon: <EuiIcon type="compass" size="l" color="primary" />,
+      title: '',
+      description: i18n.translate('home.searchOverview.setup.discover.description', {
+        defaultMessage: 'Explore data to uncover and discover insights.',
       }),
       footer: (
-        <EuiI18n
-          token="home.search_overview.createDocumentIndex.card.footer"
-          default="Documentation"
-        />
+        <EuiTextColor color="subdued">
+          <EuiI18n token="workspace.essential_overview.discover.card.footer" default="Discover" />
+        </EuiTextColor>
       ),
       documentURL: 'https://opensearch.org/docs/latest/getting-started/intro/',
+      navigateAppId: DISCOVER_APP_ID,
     },
   ];
 
@@ -101,16 +128,17 @@ export const registerContentToSearchUseCasePage = (
         order: card.order,
         title: card.title,
         description: card.description,
+        onClick: () => {
+          if (card.navigateAppId) {
+            core.application.navigateToApp(card.navigateAppId);
+          } else {
+            window.open(card.documentURL, '_blank');
+          }
+        },
+        getFooter: () => card.footer,
+        getIcon: () => card.icon,
         cardProps: {
-          titleElement: 'h4',
-          titleSize: 's',
-          selectable: {
-            onClick: () => {
-              window.open(card.documentURL, '_blank');
-            },
-            children: card.footer,
-            isSelected: false,
-          },
+          className: 'usecaseOverviewGettingStartedCard',
         },
       }),
       getTargetArea: () => SEARCH_OVERVIEW_CONTENT_AREAS.GET_STARTED,
diff --git a/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces.png b/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces.png
new file mode 100644
index 000000000000..80eaa7beb2e2
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_dark.png b/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_dark.png
new file mode 100644
index 000000000000..a01821ec0303
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_dark.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_dark_new.png b/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_dark_new.png
new file mode 100644
index 000000000000..a01821ec0303
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_dark_new.png differ
diff --git a/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_new.png b/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_new.png
new file mode 100644
index 000000000000..80eaa7beb2e2
Binary files /dev/null and b/src/plugins/home/public/assets/sample_data_resources/otel/otel_traces_new.png differ
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/index.ts b/src/plugins/home/server/services/sample_data/data_sets/otel/index.ts
new file mode 100644
index 000000000000..6e83c85c5d4b
--- /dev/null
+++ b/src/plugins/home/server/services/sample_data/data_sets/otel/index.ts
@@ -0,0 +1,101 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+import path from 'path';
+import { AppLinkSchema, SampleDatasetSchema } from '../../lib/sample_dataset_registry_types';
+import {
+  appendDataSourceId,
+  getSavedObjectsWithDataSource,
+  overwriteSavedObjectsWithWorkspaceId,
+} from '../util';
+import { logsFieldMappings } from './logs_field_mappings';
+import { metricsFieldMappings } from './metrics_field_mappings';
+import { servicesFieldMappings } from './services_field_mappings';
+import { tracesFieldMappings } from './traces_field_mappings';
+
+const otelDataName = i18n.translate('home.sampleData.otelSpecTitle', {
+  defaultMessage: 'Sample Observability Logs, Traces, and Metrics',
+});
+const otelDataDescription = i18n.translate('home.sampleData.otelSpecDescription', {
+  defaultMessage:
+    'Correlated observability signals for an e-commerce application in OpenTelemetry standard.',
+});
+const initialAppLinks: AppLinkSchema[] = [
+  {
+    path: 'observability-traces#/traces',
+    icon: 'apmTrace',
+    label: 'View traces',
+    newPath: 'observability-traces-nav#/traces',
+    appendDatasourceToPath: true,
+  },
+  {
+    path: 'observability-traces#/services',
+    icon: 'graphApp',
+    label: 'View services',
+    newPath: 'observability-services-nav#/services',
+    appendDatasourceToPath: true,
+  },
+];
+
+export const otelSpecProvider = function (): SampleDatasetSchema {
+  return {
+    id: 'otel',
+    name: otelDataName,
+    description: otelDataDescription,
+    previewImagePath: '/plugins/home/assets/sample_data_resources/otel/otel_traces.png',
+    darkPreviewImagePath: '/plugins/home/assets/sample_data_resources/otel/otel_traces_dark.png',
+    hasNewThemeImages: true,
+    overviewDashboard: '',
+    getDataSourceIntegratedDashboard: appendDataSourceId(''),
+    appLinks: initialAppLinks,
+    defaultIndex: '',
+    getDataSourceIntegratedDefaultIndex: appendDataSourceId(''),
+    savedObjects: [],
+    getDataSourceIntegratedSavedObjects: (dataSourceId?: string, dataSourceTitle?: string) =>
+      getSavedObjectsWithDataSource([], dataSourceId, dataSourceTitle),
+    getWorkspaceIntegratedSavedObjects: (workspaceId) =>
+      overwriteSavedObjectsWithWorkspaceId([], workspaceId),
+    dataIndices: [
+      {
+        id: 'otel-v1-apm-span-sample',
+        dataPath: path.join(__dirname, './sample_traces.json.gz'),
+        fields: tracesFieldMappings,
+        timeFields: ['startTime', 'endTime', 'traceGroupFields.endTime'], // TODO: add support for 'events.time'
+        currentTimeMarker: '2024-10-16T19:00:01',
+        preserveDayOfWeekTimeOfDay: false,
+        indexName: 'otel-v1-apm-span-sample',
+      },
+      {
+        id: 'otel-v1-apm-service-map-sample',
+        dataPath: path.join(__dirname, './sample_service_map.json.gz'),
+        fields: servicesFieldMappings,
+        timeFields: [],
+        currentTimeMarker: '2024-10-16T19:00:01',
+        preserveDayOfWeekTimeOfDay: false,
+        indexName: 'otel-v1-apm-service-map-sample',
+      },
+      {
+        id: 'ss4o_metrics-otel-sample',
+        dataPath: path.join(__dirname, './sample_metrics.json.gz'),
+        fields: metricsFieldMappings,
+        timeFields: ['@timestamp', 'exemplar.time', 'startTime', 'time', 'observedTimestamp'],
+        currentTimeMarker: '2024-10-16T19:00:01',
+        preserveDayOfWeekTimeOfDay: false,
+        indexName: 'ss4o_metrics-otel-sample',
+      },
+      {
+        id: 'ss4o_logs-otel-sample',
+        dataPath: path.join(__dirname, './sample_logs.json.gz'),
+        fields: logsFieldMappings,
+        timeFields: ['time', 'observedTime'],
+        currentTimeMarker: '2024-10-16T19:00:01',
+        preserveDayOfWeekTimeOfDay: false,
+        indexName: 'ss4o_logs-otel-sample',
+      },
+    ],
+    status: 'not_installed',
+  };
+};
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/logs_field_mappings.ts b/src/plugins/home/server/services/sample_data/data_sets/otel/logs_field_mappings.ts
new file mode 100644
index 000000000000..fd6bcecbf568
--- /dev/null
+++ b/src/plugins/home/server/services/sample_data/data_sets/otel/logs_field_mappings.ts
@@ -0,0 +1,343 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const logsFieldMappings = {
+  body: {
+    type: 'text',
+    fields: {
+      keyword: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+  droppedAttributesCount: {
+    type: 'long',
+  },
+  flags: {
+    type: 'long',
+  },
+  instrumentationScope: {
+    properties: {
+      name: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+    },
+  },
+  log: {
+    properties: {
+      attributes: {
+        properties: {
+          address: {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          contentRoot: {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          context: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+          envName: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+          otelServiceName: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+          otelSpanID: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+          otelTraceID: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+          otelTraceSampled: {
+            type: 'boolean',
+          },
+          productId: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+          quantity: {
+            type: 'long',
+          },
+          userId: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+    },
+  },
+  observedTime: {
+    type: 'date',
+  },
+  resource: {
+    properties: {
+      attributes: {
+        properties: {
+          'container@id': {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+          'docker@cli@cobra@command_path': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'host@arch': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'host@name': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'os@description': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'os@name': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'os@type': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'os@version': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'process@command': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'process@command_args': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'process@command_line': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'process@executable@path': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'process@owner': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'process@pid': {
+            type: 'long',
+          },
+          'process@runtime@description': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'process@runtime@name': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'process@runtime@version': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'service@name': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'service@version': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'telemetry@auto@version': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'telemetry@sdk@language': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'telemetry@sdk@name': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'telemetry@sdk@version': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  schemaUrl: {
+    type: 'text',
+    fields: {
+      keyword: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+  serviceName: {
+    type: 'keyword',
+    fields: {
+      keyword: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+  severityNumber: {
+    type: 'long',
+  },
+  severityText: {
+    type: 'text',
+    fields: {
+      keyword: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+  spanId: {
+    type: 'keyword',
+    ignore_above: 256,
+  },
+  time: {
+    type: 'date',
+  },
+  traceId: {
+    type: 'keyword',
+    ignore_above: 256,
+  },
+};
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/metrics_field_mappings.ts b/src/plugins/home/server/services/sample_data/data_sets/otel/metrics_field_mappings.ts
new file mode 100644
index 000000000000..fad89469bffe
--- /dev/null
+++ b/src/plugins/home/server/services/sample_data/data_sets/otel/metrics_field_mappings.ts
@@ -0,0 +1,915 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const metricsFieldMappings = {
+  '@timestamp': {
+    type: 'date',
+  },
+  aggregationTemporality: {
+    type: 'keyword',
+    ignore_above: 128,
+  },
+  attributes: {
+    properties: {
+      data_stream: {
+        properties: {
+          dataset: {
+            type: 'keyword',
+            ignore_above: 128,
+          },
+          namespace: {
+            type: 'keyword',
+            ignore_above: 128,
+          },
+          type: {
+            type: 'keyword',
+            ignore_above: 56,
+          },
+        },
+      },
+      instrumentationScope: {
+        properties: {
+          name: {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          version: {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+        },
+      },
+      metric: {
+        properties: {
+          attributes: {
+            properties: {
+              action: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'app@ads@ad_request_type': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'app@ads@ad_response_type': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'app@payment@currency': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'client-id': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              count: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              cpu: {
+                type: 'long',
+              },
+              currency_code: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              daemon: {
+                type: 'boolean',
+              },
+              device: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              direction: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              dropped: {
+                type: 'boolean',
+              },
+              family: {
+                type: 'long',
+              },
+              gc: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              generation: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'http@flavor': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'http@host': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'http@method': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'http@route': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'http@scheme': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'http@status_code': {
+                type: 'long',
+              },
+              method: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'net@host@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'net@host@port': {
+                type: 'long',
+              },
+              'net@peer@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'net@peer@port': {
+                type: 'long',
+              },
+              'node-id': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              operation: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              partition: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              pool: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              processor: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              processorType: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              protocol: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'recommendation@type': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'rpc@grpc@status_code': {
+                type: 'long',
+              },
+              'rpc@method': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'rpc@service': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'rpc@system': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'service@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'span@kind': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'span@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              state: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              status: {
+                type: 'long',
+              },
+              'status@code': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              success: {
+                type: 'boolean',
+              },
+              target: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              topic: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              type: {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      resource: {
+        properties: {
+          attributes: {
+            properties: {
+              'container@id': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'docker@cli@cobra@command_path': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'host@arch': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'host@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'os@description': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'os@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'os@type': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'os@version': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@command': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@command_args': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@command_line': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@executable@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@executable@path': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@owner': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@pid': {
+                type: 'long',
+              },
+              'process@runtime@description': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@runtime@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'process@runtime@version': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'service@instance@id': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'service@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'service@version': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'telemetry@auto@version': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'telemetry@sdk@language': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'telemetry@sdk@name': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+              'telemetry@sdk@version': {
+                type: 'text',
+                fields: {
+                  keyword: {
+                    type: 'keyword',
+                    ignore_above: 256,
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  bucketCount: {
+    type: 'long',
+  },
+  bucketCounts: {
+    type: 'long',
+  },
+  bucketCountsList: {
+    type: 'long',
+  },
+  buckets: {
+    type: 'nested',
+    properties: {
+      count: {
+        type: 'long',
+      },
+      max: {
+        type: 'float',
+      },
+      min: {
+        type: 'float',
+      },
+      sum: {
+        type: 'double',
+      },
+    },
+  },
+  count: {
+    type: 'long',
+  },
+  description: {
+    type: 'text',
+    fields: {
+      keyword: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+  exemplar: {
+    properties: {
+      serviceName: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+      spanId: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+      time: {
+        type: 'date',
+      },
+      traceId: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+  exemplars: {
+    properties: {
+      attributes: {
+        properties: {
+          exemplar: {
+            properties: {
+              attributes: {
+                properties: {
+                  'net@sock@peer@addr': {
+                    type: 'text',
+                    fields: {
+                      keyword: {
+                        type: 'keyword',
+                        ignore_above: 256,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      spanId: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      time: {
+        type: 'date',
+      },
+      traceId: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      value: {
+        type: 'float',
+      },
+    },
+  },
+  explicitBounds: {
+    type: 'float',
+  },
+  explicitBoundsCount: {
+    type: 'float',
+  },
+  explicitBoundsList: {
+    type: 'float',
+  },
+  flags: {
+    type: 'long',
+  },
+  instrumentationScope: {
+    properties: {
+      droppedAttributesCount: {
+        type: 'integer',
+      },
+      name: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+      schemaUrl: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      version: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+  isMonotonic: {
+    type: 'boolean',
+  },
+  kind: {
+    type: 'keyword',
+    ignore_above: 128,
+  },
+  max: {
+    type: 'float',
+  },
+  min: {
+    type: 'float',
+  },
+  monotonic: {
+    type: 'boolean',
+  },
+  name: {
+    type: 'keyword',
+    ignore_above: 256,
+  },
+  negativeBuckets: {
+    type: 'nested',
+    properties: {
+      count: {
+        type: 'long',
+      },
+      max: {
+        type: 'float',
+      },
+      min: {
+        type: 'float',
+      },
+    },
+  },
+  negativeOffset: {
+    type: 'integer',
+  },
+  observedTimestamp: {
+    type: 'date_nanos',
+  },
+  positiveBuckets: {
+    type: 'nested',
+    properties: {
+      count: {
+        type: 'long',
+      },
+      max: {
+        type: 'float',
+      },
+      min: {
+        type: 'float',
+      },
+    },
+  },
+  positiveOffset: {
+    type: 'integer',
+  },
+  quantileValuesCount: {
+    type: 'long',
+  },
+  quantiles: {
+    properties: {
+      quantile: {
+        type: 'double',
+      },
+      value: {
+        type: 'double',
+      },
+    },
+  },
+  scale: {
+    type: 'long',
+  },
+  schemaUrl: {
+    type: 'text',
+    fields: {
+      keyword: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+  serviceName: {
+    type: 'keyword',
+  },
+  startTime: {
+    type: 'date',
+  },
+  sum: {
+    type: 'float',
+  },
+  time: {
+    type: 'date',
+  },
+  unit: {
+    type: 'keyword',
+    ignore_above: 128,
+  },
+  value: {
+    type: 'float',
+  },
+  'value@double': {
+    type: 'double',
+  },
+  'value@int': {
+    type: 'integer',
+  },
+  zeroCount: {
+    type: 'long',
+  },
+};
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/sample_logs.json.gz b/src/plugins/home/server/services/sample_data/data_sets/otel/sample_logs.json.gz
new file mode 100644
index 000000000000..88375837e226
Binary files /dev/null and b/src/plugins/home/server/services/sample_data/data_sets/otel/sample_logs.json.gz differ
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/sample_metrics.json.gz b/src/plugins/home/server/services/sample_data/data_sets/otel/sample_metrics.json.gz
new file mode 100644
index 000000000000..e0fa991cfc16
Binary files /dev/null and b/src/plugins/home/server/services/sample_data/data_sets/otel/sample_metrics.json.gz differ
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/sample_service_map.json.gz b/src/plugins/home/server/services/sample_data/data_sets/otel/sample_service_map.json.gz
new file mode 100644
index 000000000000..8e1c1ef60377
Binary files /dev/null and b/src/plugins/home/server/services/sample_data/data_sets/otel/sample_service_map.json.gz differ
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/sample_traces.json.gz b/src/plugins/home/server/services/sample_data/data_sets/otel/sample_traces.json.gz
new file mode 100644
index 000000000000..5eb988d1785f
Binary files /dev/null and b/src/plugins/home/server/services/sample_data/data_sets/otel/sample_traces.json.gz differ
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/services_field_mappings.ts b/src/plugins/home/server/services/sample_data/data_sets/otel/services_field_mappings.ts
new file mode 100644
index 000000000000..a9a475d8d62f
--- /dev/null
+++ b/src/plugins/home/server/services/sample_data/data_sets/otel/services_field_mappings.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const servicesFieldMappings = {
+  destination: {
+    properties: {
+      domain: {
+        type: 'keyword',
+        ignore_above: 1024,
+      },
+      resource: {
+        type: 'keyword',
+        ignore_above: 1024,
+      },
+    },
+  },
+  hashId: {
+    type: 'keyword',
+    ignore_above: 1024,
+  },
+  kind: {
+    type: 'keyword',
+    ignore_above: 1024,
+  },
+  serviceName: {
+    type: 'keyword',
+    ignore_above: 1024,
+  },
+  target: {
+    properties: {
+      domain: {
+        type: 'keyword',
+        ignore_above: 1024,
+      },
+      resource: {
+        type: 'keyword',
+        ignore_above: 1024,
+      },
+    },
+  },
+  traceGroupName: {
+    type: 'keyword',
+    ignore_above: 1024,
+  },
+};
diff --git a/src/plugins/home/server/services/sample_data/data_sets/otel/traces_field_mappings.ts b/src/plugins/home/server/services/sample_data/data_sets/otel/traces_field_mappings.ts
new file mode 100644
index 000000000000..5b4016997f46
--- /dev/null
+++ b/src/plugins/home/server/services/sample_data/data_sets/otel/traces_field_mappings.ts
@@ -0,0 +1,599 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const tracesFieldMappings = {
+  droppedAttributesCount: {
+    type: 'long',
+  },
+  droppedEventsCount: {
+    type: 'long',
+  },
+  droppedLinksCount: {
+    type: 'long',
+  },
+  durationInNanos: {
+    type: 'long',
+  },
+  endTime: {
+    type: 'date_nanos',
+  },
+  events: {
+    type: 'nested',
+    properties: {
+      attributes: {
+        properties: {
+          'app@payment@transaction@id': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'app@quote@cost@total': {
+            type: 'float',
+          },
+          'app@shipping@cost@total': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'app@shipping@tracking@id': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+          'message@id': {
+            type: 'long',
+          },
+          'message@type': {
+            type: 'text',
+            fields: {
+              keyword: {
+                type: 'keyword',
+                ignore_above: 256,
+              },
+            },
+          },
+        },
+      },
+      droppedAttributesCount: {
+        type: 'long',
+      },
+      name: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      time: {
+        type: 'date_nanos',
+      },
+    },
+  },
+  instrumentationScope: {
+    properties: {
+      name: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      version: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+    },
+  },
+  kind: {
+    type: 'keyword',
+    ignore_above: 128,
+  },
+  links: {
+    type: 'nested',
+    properties: {
+      attributes: {
+        type: 'object',
+      },
+      droppedAttributesCount: {
+        type: 'long',
+      },
+      spanId: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+      traceId: {
+        type: 'keyword',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      traceState: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+    },
+  },
+  name: {
+    type: 'keyword',
+    ignore_above: 1024,
+  },
+  parentSpanId: {
+    type: 'keyword',
+    ignore_above: 256,
+  },
+  resource: {
+    properties: {
+      attributes: {
+        properties: {
+          'container@id': {
+            type: 'keyword',
+          },
+          'docker@cli@cobra@command_path': {
+            type: 'keyword',
+          },
+          'host@arch': {
+            type: 'keyword',
+          },
+          'host@name': {
+            type: 'keyword',
+          },
+          'os@description': {
+            type: 'keyword',
+          },
+          'os@name': {
+            type: 'keyword',
+          },
+          'os@type': {
+            type: 'keyword',
+          },
+          'os@version': {
+            type: 'keyword',
+          },
+          'process@command': {
+            type: 'keyword',
+          },
+          'process@command_args': {
+            type: 'keyword',
+          },
+          'process@command_line': {
+            type: 'keyword',
+          },
+          'process@executable@name': {
+            type: 'keyword',
+          },
+          'process@executable@path': {
+            type: 'keyword',
+          },
+          'process@owner': {
+            type: 'keyword',
+          },
+          'process@pid': {
+            type: 'keyword',
+          },
+          'process@runtime@description': {
+            type: 'keyword',
+          },
+          'process@runtime@name': {
+            type: 'keyword',
+          },
+          'process@runtime@version': {
+            type: 'keyword',
+          },
+          'service@instance@id': {
+            type: 'keyword',
+          },
+          'service@name': {
+            type: 'keyword',
+          },
+          'service@version': {
+            type: 'keyword',
+          },
+          'telemetry@auto@version': {
+            type: 'keyword',
+          },
+          'telemetry@sdk@language': {
+            type: 'keyword',
+          },
+          'telemetry@sdk@name': {
+            type: 'keyword',
+          },
+          'telemetry@sdk@version': {
+            type: 'keyword',
+          },
+        },
+      },
+    },
+  },
+  serviceName: {
+    type: 'keyword',
+  },
+  span: {
+    properties: {
+      attributes: {
+        properties: {
+          'app@ads@ad_request_type': {
+            type: 'keyword',
+          },
+          'app@ads@ad_response_type': {
+            type: 'keyword',
+          },
+          'app@ads@category': {
+            type: 'keyword',
+          },
+          'app@ads@contextKeys': {
+            type: 'keyword',
+          },
+          'app@ads@contextKeys@count': {
+            type: 'keyword',
+          },
+          'app@ads@count': {
+            type: 'keyword',
+          },
+          'app@cart@items@count': {
+            type: 'keyword',
+          },
+          'app@currency@conversion@from': {
+            type: 'keyword',
+          },
+          'app@currency@conversion@to': {
+            type: 'keyword',
+          },
+          'app@email@recipient': {
+            type: 'keyword',
+          },
+          'app@featureflag@enabled': {
+            type: 'keyword',
+          },
+          'app@featureflag@name': {
+            type: 'keyword',
+          },
+          'app@filtered_products@count': {
+            type: 'keyword',
+          },
+          'app@filtered_products@list': {
+            type: 'keyword',
+          },
+          'app@order@amount': {
+            type: 'keyword',
+          },
+          'app@order@id': {
+            type: 'keyword',
+          },
+          'app@order@items@count': {
+            type: 'keyword',
+          },
+          'app@payment@amount': {
+            type: 'keyword',
+          },
+          'app@payment@card_type': {
+            type: 'keyword',
+          },
+          'app@payment@card_valid': {
+            type: 'keyword',
+          },
+          'app@payment@charged': {
+            type: 'keyword',
+          },
+          'app@product@id': {
+            type: 'keyword',
+          },
+          'app@product@name': {
+            type: 'keyword',
+          },
+          'app@product@quantity': {
+            type: 'keyword',
+          },
+          'app@products@count': {
+            type: 'keyword',
+          },
+          'app@products_recommended@count': {
+            type: 'keyword',
+          },
+          'app@quote@cost@total': {
+            type: 'keyword',
+          },
+          'app@quote@items@count': {
+            type: 'keyword',
+          },
+          'app@recommendation@cache_enabled': {
+            type: 'keyword',
+          },
+          'app@shipping@amount': {
+            type: 'keyword',
+          },
+          'app@shipping@cost@total': {
+            type: 'keyword',
+          },
+          'app@shipping@items@count': {
+            type: 'keyword',
+          },
+          'app@shipping@tracking@id': {
+            type: 'keyword',
+          },
+          'app@shipping@zip_code': {
+            type: 'keyword',
+          },
+          'app@synthetic_request': {
+            type: 'keyword',
+          },
+          'app@user@currency': {
+            type: 'keyword',
+          },
+          'app@user@id': {
+            type: 'keyword',
+          },
+          busy_ns: {
+            type: 'keyword',
+          },
+          'code@filepath': {
+            type: 'keyword',
+          },
+          'code@function': {
+            type: 'keyword',
+          },
+          'code@lineno': {
+            type: 'keyword',
+          },
+          'code@namespace': {
+            type: 'keyword',
+          },
+          'db@instance': {
+            type: 'keyword',
+          },
+          'db@name': {
+            type: 'keyword',
+          },
+          'db@redis@database_index': {
+            type: 'keyword',
+          },
+          'db@redis@flags': {
+            type: 'keyword',
+          },
+          'db@statement': {
+            type: 'keyword',
+          },
+          'db@system': {
+            type: 'keyword',
+          },
+          'db@type': {
+            type: 'keyword',
+          },
+          'db@url': {
+            type: 'keyword',
+          },
+          decode_time_microseconds: {
+            type: 'keyword',
+          },
+          'http@client_ip': {
+            type: 'keyword',
+          },
+          'http@flavor': {
+            type: 'keyword',
+          },
+          'http@host': {
+            type: 'keyword',
+          },
+          'http@method': {
+            type: 'keyword',
+          },
+          'http@request_content_length': {
+            type: 'keyword',
+          },
+          'http@request_content_length_uncompressed': {
+            type: 'keyword',
+          },
+          'http@response_content_length': {
+            type: 'keyword',
+          },
+          'http@route': {
+            type: 'keyword',
+          },
+          'http@scheme': {
+            type: 'keyword',
+          },
+          'http@status_code': {
+            type: 'keyword',
+          },
+          'http@status_text': {
+            type: 'keyword',
+          },
+          'http@target': {
+            type: 'keyword',
+          },
+          'http@url': {
+            type: 'keyword',
+          },
+          'http@user_agent': {
+            type: 'keyword',
+          },
+          idle_ns: {
+            type: 'keyword',
+          },
+          idle_time_microseconds: {
+            type: 'keyword',
+          },
+          'messaging@client_id': {
+            type: 'keyword',
+          },
+          'messaging@destination@kind': {
+            type: 'keyword',
+          },
+          'messaging@destination@name': {
+            type: 'keyword',
+          },
+          'messaging@kafka@consumer@group': {
+            type: 'keyword',
+          },
+          'messaging@kafka@destination@partition': {
+            type: 'keyword',
+          },
+          'messaging@kafka@message@offset': {
+            type: 'keyword',
+          },
+          'messaging@message@payload_size_bytes': {
+            type: 'keyword',
+          },
+          'messaging@operation': {
+            type: 'keyword',
+          },
+          'messaging@system': {
+            type: 'keyword',
+          },
+          'net@host@ip': {
+            type: 'keyword',
+          },
+          'net@host@name': {
+            type: 'keyword',
+          },
+          'net@host@port': {
+            type: 'keyword',
+          },
+          'net@peer@ip': {
+            type: 'keyword',
+          },
+          'net@peer@name': {
+            type: 'keyword',
+          },
+          'net@peer@port': {
+            type: 'keyword',
+          },
+          'net@sock@host@addr': {
+            type: 'keyword',
+          },
+          'net@sock@peer@addr': {
+            type: 'keyword',
+          },
+          'net@sock@peer@port': {
+            type: 'keyword',
+          },
+          'net@transport': {
+            type: 'keyword',
+          },
+          'peer@service': {
+            type: 'keyword',
+          },
+          'phoenix@action': {
+            type: 'keyword',
+          },
+          'phoenix@plug': {
+            type: 'keyword',
+          },
+          query_time_microseconds: {
+            type: 'keyword',
+          },
+          queue_time_microseconds: {
+            type: 'keyword',
+          },
+          'rpc@grpc@status_code': {
+            type: 'keyword',
+          },
+          'rpc@method': {
+            type: 'keyword',
+          },
+          'rpc@service': {
+            type: 'keyword',
+          },
+          'rpc@system': {
+            type: 'keyword',
+          },
+          'rpc@user_agent': {
+            type: 'keyword',
+          },
+          'sinatra@template_name': {
+            type: 'keyword',
+          },
+          source: {
+            type: 'keyword',
+          },
+          'thread@id': {
+            type: 'keyword',
+          },
+          'thread@name': {
+            type: 'keyword',
+          },
+          total_time_microseconds: {
+            type: 'keyword',
+          },
+        },
+      },
+    },
+  },
+  spanId: {
+    type: 'keyword',
+    ignore_above: 256,
+  },
+  startTime: {
+    type: 'date_nanos',
+  },
+  status: {
+    properties: {
+      code: {
+        type: 'integer',
+      },
+      message: {
+        type: 'keyword',
+      },
+    },
+  },
+  traceGroup: {
+    type: 'keyword',
+    ignore_above: 1024,
+  },
+  traceGroupFields: {
+    properties: {
+      durationInNanos: {
+        type: 'long',
+      },
+      endTime: {
+        type: 'date_nanos',
+      },
+      statusCode: {
+        type: 'integer',
+      },
+    },
+  },
+  traceId: {
+    type: 'keyword',
+    ignore_above: 256,
+  },
+  traceState: {
+    type: 'text',
+    fields: {
+      keyword: {
+        type: 'keyword',
+        ignore_above: 256,
+      },
+    },
+  },
+};
diff --git a/src/plugins/home/server/services/sample_data/data_sets/util.test.ts b/src/plugins/home/server/services/sample_data/data_sets/util.test.ts
index c51e289231dc..4f3863167004 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/util.test.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/util.test.ts
@@ -3,9 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { getSavedObjectsWithDataSource, getFinalSavedObjects } from './util';
 import { SavedObject, updateDataSourceNameInVegaSpec } from '../../../../../../core/server';
 import visualizationObjects from './test_utils/visualization_objects.json';
+import {
+  getFinalSavedObjects,
+  getNestedField,
+  getSavedObjectsWithDataSource,
+  setNestedField,
+} from './util';
 
 describe('getSavedObjectsWithDataSource()', () => {
   const getVisualizationSavedObjects = (): Array<SavedObject<any>> => {
@@ -267,3 +272,67 @@ describe('getFinalSavedObjects()', () => {
     ).toBe(dataset.savedObjects);
   });
 });
+
+describe('getNestedField', () => {
+  it('should return the value of a top-level field', () => {
+    const doc = { field1: 'value1', field2: 'value2' };
+    const result = getNestedField(doc, 'field1');
+    expect(result).toBe('value1');
+  });
+
+  it('should return the value of a nested field', () => {
+    const doc = { field1: { nestedField: 'nestedValue' } };
+    const result = getNestedField(doc, 'field1.nestedField');
+    expect(result).toBe('nestedValue');
+  });
+
+  it('should return undefined for a non-existent field', () => {
+    const doc = { field1: 'value1' };
+    const result = getNestedField(doc, 'nonExistentField');
+    expect(result).toBeUndefined();
+  });
+
+  it('should handle fields with dots in their names', () => {
+    const doc = { 'field.with.dot': 'valueWithDot' };
+    const result = getNestedField(doc, 'field.with.dot');
+    expect(result).toBe('valueWithDot');
+  });
+
+  it('should return undefined for a non-existent nested field', () => {
+    const doc = { field1: { nestedField: 'nestedValue' } };
+    const result = getNestedField(doc, 'field1.nonExistentField');
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('setNestedField', () => {
+  it('should set the value of a top-level field', () => {
+    const doc = { field1: 'value1', field2: 'value2' };
+    setNestedField(doc, 'field1', 'newValue1');
+    expect(doc.field1).toBe('newValue1');
+  });
+
+  it('should set the value of a nested field', () => {
+    const doc = { field1: { nestedField: 'nestedValue' } };
+    setNestedField(doc, 'field1.nestedField', 'newNestedValue');
+    expect(doc.field1.nestedField).toBe('newNestedValue');
+  });
+
+  it('should create nested fields if they do not exist', () => {
+    const doc: any = {}; // Allow dynamic properties
+    setNestedField(doc, 'field1.nestedField', 'newNestedValue');
+    expect(doc.field1).toEqual({ nestedField: 'newNestedValue' });
+  });
+
+  it('should handle fields with dots in their names', () => {
+    const doc = { 'field.with.dot': 'valueWithDot' };
+    setNestedField(doc, 'field.with.dot', 'newValueWithDot');
+    expect(doc['field.with.dot']).toBe('newValueWithDot');
+  });
+
+  it('should set a value in deeply nested structures', () => {
+    const doc = { level1: { level2: { level3: { level4: 'oldValue' } } } };
+    setNestedField(doc, 'level1.level2.level3.level4', 'newValue');
+    expect(doc.level1.level2.level3.level4).toBe('newValue');
+  });
+});
diff --git a/src/plugins/home/server/services/sample_data/data_sets/util.ts b/src/plugins/home/server/services/sample_data/data_sets/util.ts
index 4b2cc8b56fa3..77abf6122033 100644
--- a/src/plugins/home/server/services/sample_data/data_sets/util.ts
+++ b/src/plugins/home/server/services/sample_data/data_sets/util.ts
@@ -5,10 +5,10 @@
 
 import { SavedObject } from 'opensearch-dashboards/server';
 import {
-  extractVegaSpecFromSavedObject,
   extractTimelineExpression,
-  updateDataSourceNameInVegaSpec,
+  extractVegaSpecFromSavedObject,
   updateDataSourceNameInTimeline,
+  updateDataSourceNameInVegaSpec,
 } from '../../../../../../core/server';
 import { SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
 
@@ -193,3 +193,34 @@ export const getFinalSavedObjects = ({
 
   return dataset.savedObjects;
 };
+
+// Helper function to get a nested field by path
+export const getNestedField = (doc: any, path: string) => {
+  // First check if the exact path exists as a field
+  if (path in doc) {
+    return doc[path];
+  }
+  // If not, treat it as a nested path
+  return path
+    .split('.')
+    .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), doc);
+};
+
+// Helper function to set a nested field by path
+export const setNestedField = (doc: any, path: string, value: any) => {
+  // First check if the exact path exists as a field
+  if (path in doc) {
+    doc[path] = value;
+    return;
+  }
+  // If not, treat it as a nested path
+  const keys = path.split('.');
+  keys.reduce((obj, key, indexName) => {
+    if (indexName === keys.length - 1) {
+      obj[key] = value;
+    } else {
+      if (!obj[key]) obj[key] = {}; // Create the object if it doesn't exist
+      return obj[key];
+    }
+  }, doc);
+};
diff --git a/src/plugins/home/server/services/sample_data/lib/create_index_name.test.ts b/src/plugins/home/server/services/sample_data/lib/create_index_name.test.ts
new file mode 100644
index 000000000000..7c3ac799ee10
--- /dev/null
+++ b/src/plugins/home/server/services/sample_data/lib/create_index_name.test.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createIndexName } from './create_index_name';
+
+describe('createIndexName', () => {
+  it('should return the sample dataset name when sampleDataSetId equals dataIndexId', () => {
+    const result = createIndexName('sample1', 'sample1');
+    expect(result).toBe('opensearch_dashboards_sample_data_sample1');
+  });
+
+  it('should return a name with both sampleDataSetId and dataIndexId when they are different', () => {
+    const result = createIndexName('sample1', 'data1');
+    expect(result).toBe('opensearch_dashboards_sample_data_sample1_data1');
+  });
+});
diff --git a/src/plugins/home/server/services/sample_data/lib/create_index_name.ts b/src/plugins/home/server/services/sample_data/lib/create_index_name.ts
index 532c07d23dca..34314b74e324 100644
--- a/src/plugins/home/server/services/sample_data/lib/create_index_name.ts
+++ b/src/plugins/home/server/services/sample_data/lib/create_index_name.ts
@@ -29,10 +29,10 @@
  */
 
 export const createIndexName = function (sampleDataSetId: string, dataIndexId: string): string {
-  // Sample data schema was updated to support multiple indices in 6.5.
-  // This if statement ensures that sample data sets that used a single index prior to the schema change
-  // have the same index name to avoid orphaned indices when uninstalling.
   if (sampleDataSetId === dataIndexId) {
+    // Sample data schema was updated to support multiple indices in 6.5.
+    // This if statement ensures that sample data sets that used a single index prior to the schema change
+    // have the same index name to avoid orphaned indices when uninstalling.
     return `opensearch_dashboards_sample_data_${sampleDataSetId}`;
   }
   return `opensearch_dashboards_sample_data_${sampleDataSetId}_${dataIndexId}`;
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 625427265858..8d68cb93de91 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
@@ -71,12 +71,19 @@ export interface DataIndexSchema {
   // Set to true to move timestamp to current week, preserving day of week and time of day
   // Relative distance from timestamp to currentTimeMarker will not remain the same
   preserveDayOfWeekTimeOfDay: boolean;
+
+  // Optional indexName field, if added wouldn't all flow would use this name
+  // `createIndexName` wouldn't be used
+  indexName?: string;
 }
 
 export interface AppLinkSchema {
   path: string;
   icon: string;
   label: string;
+  // Alternative app path when new nav flag is enabled
+  newPath?: string;
+  appendDatasourceToPath?: boolean;
 }
 
 export interface SampleDatasetSchema<T = unknown> {
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 c202290f911a..6f56a960e458 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
@@ -55,12 +55,19 @@ const dataIndexSchema = Joi.object({
   // Set to true to move timestamp to current week, preserving day of week and time of day
   // Relative distance from timestamp to currentTimeMarker will not remain the same
   preserveDayOfWeekTimeOfDay: Joi.boolean().default(false),
+
+  // Optional indexName field, if added wouldn't all flow would use this name
+  // `createIndexName` wouldn't be used
+  indexName: Joi.string(),
 });
 
 const appLinkSchema = Joi.object({
   path: Joi.string().required(),
   label: Joi.string().required(),
   icon: Joi.string().required(),
+  // Alternative app path when new nav flag is enabled
+  newPath: Joi.string(),
+  appendDatasourceToPath: Joi.string(),
 });
 
 export const sampleDataSchema = {
diff --git a/src/plugins/home/server/services/sample_data/routes/install.test.ts b/src/plugins/home/server/services/sample_data/routes/install.test.ts
index 9e174b5a53cb..22ec1b2b1096 100644
--- a/src/plugins/home/server/services/sample_data/routes/install.test.ts
+++ b/src/plugins/home/server/services/sample_data/routes/install.test.ts
@@ -5,6 +5,7 @@
 
 import { CoreSetup, RequestHandlerContext } from 'src/core/server';
 import { coreMock, httpServerMock } from '../../../../../../core/server/mocks';
+import { SavedObjectsErrorHelpers } from '../../../../../../core/server';
 import { updateWorkspaceState } from '../../../../../../core/server/utils';
 import { flightsSpecProvider } from '../data_sets';
 import { SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
@@ -222,4 +223,119 @@ describe('sample data install route', () => {
       },
     });
   });
+
+  it('handler response forbidden error when bulkCreate forbidden inside workspace', async () => {
+    const mockWorkspaceId = 'workspace';
+
+    const mockClient = jest.fn().mockResolvedValue(true);
+
+    const mockSOClientGetResponse = {
+      saved_objects: [
+        {
+          type: 'dashboard',
+          id: '12345',
+          namespaces: ['default'],
+          attributes: { title: 'dashboard' },
+        },
+      ],
+    };
+    const mockSOClient = {
+      bulkCreate: jest
+        .fn()
+        .mockRejectedValue(
+          SavedObjectsErrorHelpers.decorateForbiddenError(new Error('Invalid workspace permission'))
+        ),
+      get: jest.fn().mockResolvedValue(mockSOClientGetResponse),
+    };
+
+    const mockContext = {
+      core: {
+        opensearch: {
+          legacy: {
+            client: { callAsCurrentUser: mockClient },
+          },
+        },
+        savedObjects: { client: mockSOClient },
+      },
+    };
+    const mockBody = { id: 'flights' };
+    const mockQuery = {};
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest({
+      params: mockBody,
+      query: mockQuery,
+    });
+    updateWorkspaceState(mockRequest, { requestWorkspaceId: mockWorkspaceId });
+    const mockResponse = httpServerMock.createResponseFactory();
+
+    createInstallRoute(
+      mockCoreSetup.http.createRouter(),
+      sampleDatasets,
+      mockLogger,
+      mockUsageTracker
+    );
+
+    const mockRouter = mockCoreSetup.http.createRouter.mock.results[0].value;
+    const handler = mockRouter.post.mock.calls[0][1];
+
+    await handler((mockContext as unknown) as RequestHandlerContext, mockRequest, mockResponse);
+
+    expect(mockResponse.forbidden).toBeCalled();
+    expect(mockResponse.forbidden.mock.calls[0][0]).toMatchObject({
+      body: expect.stringContaining('Invalid workspace permission'),
+    });
+  });
+
+  it('handler response internal error when bulkCreate throw error', async () => {
+    const mockClient = jest.fn().mockResolvedValue(true);
+
+    const mockSOClientGetResponse = {
+      saved_objects: [
+        {
+          type: 'dashboard',
+          id: '12345',
+          namespaces: ['default'],
+          attributes: { title: 'dashboard' },
+        },
+      ],
+    };
+    const mockSOClient = {
+      bulkCreate: jest.fn().mockRejectedValue(new Error('Unknown error')),
+      get: jest.fn().mockResolvedValue(mockSOClientGetResponse),
+    };
+
+    const mockContext = {
+      core: {
+        opensearch: {
+          legacy: {
+            client: { callAsCurrentUser: mockClient },
+          },
+        },
+        savedObjects: { client: mockSOClient },
+      },
+    };
+    const mockBody = { id: 'flights' };
+    const mockQuery = {};
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest({
+      params: mockBody,
+      query: mockQuery,
+    });
+    const mockResponse = httpServerMock.createResponseFactory();
+
+    createInstallRoute(
+      mockCoreSetup.http.createRouter(),
+      sampleDatasets,
+      mockLogger,
+      mockUsageTracker
+    );
+
+    const mockRouter = mockCoreSetup.http.createRouter.mock.results[0].value;
+    const handler = mockRouter.post.mock.calls[0][1];
+
+    await handler((mockContext as unknown) as RequestHandlerContext, mockRequest, mockResponse);
+
+    expect(mockResponse.internalError).toBeCalled();
+    expect(mockResponse.internalError.mock.calls[0][0]).toMatchObject({
+      body: expect.stringContaining('Unknown error'),
+    });
+  });
 });
diff --git a/src/plugins/home/server/services/sample_data/routes/install.ts b/src/plugins/home/server/services/sample_data/routes/install.ts
index 8134f8099352..4f6d0ca563d6 100644
--- a/src/plugins/home/server/services/sample_data/routes/install.ts
+++ b/src/plugins/home/server/services/sample_data/routes/install.ts
@@ -30,17 +30,18 @@
 
 import { schema } from '@osd/config-schema';
 import { IRouter, LegacyCallAPIOptions, Logger } from 'src/core/server';
+import { SavedObjectsErrorHelpers } from '../../../../../../core/server';
 import { getWorkspaceState } from '../../../../../../core/server/utils';
-import { SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
+import { getFinalSavedObjects, getNestedField, setNestedField } from '../data_sets/util';
 import { createIndexName } from '../lib/create_index_name';
+import { loadData } from '../lib/load_data';
+import { SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
 import {
   dateToIso8601IgnoringTime,
   translateTimeRelativeToDifference,
   translateTimeRelativeToWeek,
 } from '../lib/translate_timestamp';
-import { loadData } from '../lib/load_data';
 import { SampleDataUsageTracker } from '../usage/usage';
-import { getFinalSavedObjects } from '../data_sets/util';
 
 const insertDataIntoIndex = (
   dataIndexConfig: any,
@@ -53,21 +54,20 @@ const insertDataIntoIndex = (
   ) => Promise<any>,
   logger: Logger
 ) => {
+  // Function to update timestamps
   function updateTimestamps(doc: any) {
     dataIndexConfig.timeFields
-      .filter((timeFieldName: string) => doc[timeFieldName])
+      .filter((timeFieldName: string) => getNestedField(doc, timeFieldName))
       .forEach((timeFieldName: string) => {
-        doc[timeFieldName] = dataIndexConfig.preserveDayOfWeekTimeOfDay
-          ? translateTimeRelativeToWeek(
-              doc[timeFieldName],
-              dataIndexConfig.currentTimeMarker,
-              nowReference
-            )
+        const timeValue = getNestedField(doc, timeFieldName);
+        const updatedTime = dataIndexConfig.preserveDayOfWeekTimeOfDay
+          ? translateTimeRelativeToWeek(timeValue, dataIndexConfig.currentTimeMarker, nowReference)
           : translateTimeRelativeToDifference(
-              doc[timeFieldName],
+              timeValue,
               dataIndexConfig.currentTimeMarker,
               nowReference
             );
+        setNestedField(doc, timeFieldName, updatedTime);
       });
     return doc;
   }
@@ -157,7 +157,8 @@ export function createInstallRoute(
 
       for (let i = 0; i < sampleDataset.dataIndices.length; i++) {
         const dataIndexConfig = sampleDataset.dataIndices[i];
-        const index = createIndexName(sampleDataset.id, dataIndexConfig.id);
+        const index =
+          dataIndexConfig.indexName ?? createIndexName(sampleDataset.id, dataIndexConfig.id);
 
         // clean up any old installation of dataset
         try {
@@ -217,6 +218,9 @@ export function createInstallRoute(
       } catch (err) {
         const errMsg = `bulkCreate failed, error: ${err.message}`;
         logger.warn(errMsg);
+        if (workspaceId && SavedObjectsErrorHelpers.isForbiddenError(err)) {
+          return res.forbidden({ body: errMsg });
+        }
         return res.internalError({ body: errMsg });
       }
       const errors = createResults.saved_objects.filter((savedObjectCreateResult) => {
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 9a3f1acbead2..209e43d7f63b 100644
--- a/src/plugins/home/server/services/sample_data/routes/list.ts
+++ b/src/plugins/home/server/services/sample_data/routes/list.ts
@@ -28,11 +28,11 @@
  * under the License.
  */
 
-import { IRouter } from 'src/core/server';
 import { schema } from '@osd/config-schema';
+import { IRouter } from 'src/core/server';
 import { getWorkspaceState } from '../../../../../../core/server/utils';
-import { SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
 import { createIndexName } from '../lib/create_index_name';
+import { SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
 
 const NOT_INSTALLED = 'not_installed';
 const INSTALLED = 'installed';
@@ -61,16 +61,17 @@ export const createListRoute = (router: IRouter, sampleDatasets: SampleDatasetSc
           previewImagePath: sampleDataset.previewImagePath,
           darkPreviewImagePath: sampleDataset.darkPreviewImagePath,
           hasNewThemeImages: sampleDataset.hasNewThemeImages,
-          overviewDashboard: sampleDataset.getDataSourceIntegratedDashboard(
-            dataSourceId,
-            workspaceId
-          ),
+          overviewDashboard: sampleDataset.overviewDashboard
+            ? sampleDataset.getDataSourceIntegratedDashboard(dataSourceId, workspaceId)
+            : '',
           appLinks: sampleDataset.appLinks,
-          defaultIndex: sampleDataset.getDataSourceIntegratedDefaultIndex(
-            dataSourceId,
-            workspaceId
-          ),
-          dataIndices: sampleDataset.dataIndices.map(({ id }) => ({ id })),
+          defaultIndex: sampleDataset.defaultIndex
+            ? sampleDataset.getDataSourceIntegratedDefaultIndex(dataSourceId, workspaceId)
+            : '',
+          dataIndices: sampleDataset.dataIndices.map(({ id, indexName }) => ({
+            id,
+            indexName,
+          })),
           status: sampleDataset.status,
           statusMsg: sampleDataset.statusMsg,
         };
@@ -82,7 +83,8 @@ export const createListRoute = (router: IRouter, sampleDatasets: SampleDatasetSc
 
         for (let i = 0; i < sampleDataset.dataIndices.length; i++) {
           const dataIndexConfig = sampleDataset.dataIndices[i];
-          const index = createIndexName(sampleDataset.id, dataIndexConfig.id);
+          const index =
+            dataIndexConfig.indexName ?? createIndexName(sampleDataset.id, dataIndexConfig.id);
           try {
             const indexExists = await caller('indices.exists', { index });
 
@@ -105,19 +107,25 @@ export const createListRoute = (router: IRouter, sampleDatasets: SampleDatasetSc
             return;
           }
         }
-        try {
-          await context.core.savedObjects.client.get('dashboard', sampleDataset.overviewDashboard);
-        } catch (err) {
-          if (context.core.savedObjects.client.errors.isNotFoundError(err)) {
-            sampleDataset.status = NOT_INSTALLED;
+
+        // check dashboards only if a default dashboard is set
+        if (sampleDataset.overviewDashboard) {
+          try {
+            await context.core.savedObjects.client.get(
+              'dashboard',
+              sampleDataset.overviewDashboard
+            );
+          } catch (err) {
+            if (context.core.savedObjects.client.errors.isNotFoundError(err)) {
+              sampleDataset.status = NOT_INSTALLED;
+              return;
+            }
+
+            sampleDataset.status = UNKNOWN;
+            sampleDataset.statusMsg = err.message;
             return;
           }
-
-          sampleDataset.status = UNKNOWN;
-          sampleDataset.statusMsg = err.message;
-          return;
         }
-
         sampleDataset.status = INSTALLED;
       });
 
diff --git a/src/plugins/home/server/services/sample_data/routes/uninstall.ts b/src/plugins/home/server/services/sample_data/routes/uninstall.ts
index 472bc6bc4aad..3e4636c32486 100644
--- a/src/plugins/home/server/services/sample_data/routes/uninstall.ts
+++ b/src/plugins/home/server/services/sample_data/routes/uninstall.ts
@@ -32,10 +32,10 @@ import { schema } from '@osd/config-schema';
 import _ from 'lodash';
 import { IRouter } from 'src/core/server';
 import { getWorkspaceState } from '../../../../../../core/server/utils';
-import { SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
+import { getFinalSavedObjects } from '../data_sets/util';
 import { createIndexName } from '../lib/create_index_name';
+import { SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
 import { SampleDataUsageTracker } from '../usage/usage';
-import { getFinalSavedObjects } from '../data_sets/util';
 
 export function createUninstallRoute(
   router: IRouter,
@@ -68,7 +68,8 @@ export function createUninstallRoute(
 
       for (let i = 0; i < sampleDataset.dataIndices.length; i++) {
         const dataIndexConfig = sampleDataset.dataIndices[i];
-        const index = createIndexName(sampleDataset.id, dataIndexConfig.id);
+        const index =
+          dataIndexConfig.indexName ?? createIndexName(sampleDataset.id, dataIndexConfig.id);
 
         try {
           await caller('indices.delete', { index });
diff --git a/src/plugins/home/server/services/sample_data/sample_data_registry.ts b/src/plugins/home/server/services/sample_data/sample_data_registry.ts
index d90de532c339..4acbcb0c861d 100644
--- a/src/plugins/home/server/services/sample_data/sample_data_registry.ts
+++ b/src/plugins/home/server/services/sample_data/sample_data_registry.ts
@@ -29,25 +29,27 @@
  */
 
 import Joi from 'joi';
-import { CoreSetup, PluginInitializerContext } from 'src/core/server';
 import { SavedObject } from 'src/core/public';
+import { CoreSetup, PluginInitializerContext } from 'src/core/server';
 import {
-  SampleDatasetProvider,
-  SampleDatasetSchema,
   AppLinkSchema,
   SampleDatasetDashboardPanel,
+  SampleDatasetProvider,
+  SampleDatasetSchema,
 } from './lib/sample_dataset_registry_types';
 import { sampleDataSchema } from './lib/sample_dataset_schema';
 
-import { flightsSpecProvider, logsSpecProvider, ecommerceSpecProvider } from './data_sets';
-import { createListRoute, createInstallRoute } from './routes';
 import { UsageCollectionSetup } from '../../../../usage_collection/server';
-import { makeSampleDataUsageCollector, usage } from './usage';
+import { ecommerceSpecProvider, flightsSpecProvider, logsSpecProvider } from './data_sets';
+import { otelSpecProvider } from './data_sets/otel';
+import { createInstallRoute, createListRoute } from './routes';
 import { createUninstallRoute } from './routes/uninstall';
+import { makeSampleDataUsageCollector, usage } from './usage';
 
 const flightsSampleDataset = flightsSpecProvider();
 const logsSampleDataset = logsSpecProvider();
 const ecommerceSampleDataset = ecommerceSpecProvider();
+const otelSampleDataset = otelSpecProvider();
 
 export class SampleDataRegistry {
   constructor(private readonly initContext: PluginInitializerContext) {}
@@ -55,6 +57,7 @@ export class SampleDataRegistry {
     flightsSampleDataset,
     logsSampleDataset,
     ecommerceSampleDataset,
+    otelSampleDataset,
   ];
 
   public setup(core: CoreSetup, usageCollections: UsageCollectionSetup | undefined) {
diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx
index e5f87af2e974..4beafd982013 100644
--- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/edit_index_pattern.tsx
@@ -162,6 +162,8 @@ export const EditIndexPattern = withRouter(
         }
         if (indexPattern.id) {
           Promise.resolve(data.indexPatterns.delete(indexPattern.id)).then(function () {
+            const datasetService = data.query.queryString.getDatasetService();
+            datasetService.removeFromRecentDatasets(indexPattern.id);
             history.push('');
           });
         }
diff --git a/src/plugins/navigation/public/top_nav_menu/_index.scss b/src/plugins/navigation/public/top_nav_menu/_index.scss
index da71d3047d06..68d2237a8522 100644
--- a/src/plugins/navigation/public/top_nav_menu/_index.scss
+++ b/src/plugins/navigation/public/top_nav_menu/_index.scss
@@ -9,7 +9,7 @@
 }
 
 .osdTopNavMenuGroupedActions {
-  background-color: $euiColorEmptyShade;
+  background-color: $euiPageBackgroundColor;
 
   .newTopNavHeader & {
     margin: 0;
diff --git a/src/plugins/query_enhancements/common/query_assist/index.ts b/src/plugins/query_enhancements/common/query_assist/index.ts
index 7c577db88834..0541207e49f8 100644
--- a/src/plugins/query_enhancements/common/query_assist/index.ts
+++ b/src/plugins/query_enhancements/common/query_assist/index.ts
@@ -3,4 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { QueryAssistParameters, QueryAssistResponse, QueryAssistContextType } from './types';
+export {
+  QueryAssistParameters,
+  QueryAssistResponse,
+  QueryAssistContextType,
+  FeedbackStatus,
+} from './types';
diff --git a/src/plugins/query_enhancements/common/query_assist/types.ts b/src/plugins/query_enhancements/common/query_assist/types.ts
index d191befad5e7..a10da649d573 100644
--- a/src/plugins/query_enhancements/common/query_assist/types.ts
+++ b/src/plugins/query_enhancements/common/query_assist/types.ts
@@ -23,3 +23,9 @@ export enum QueryAssistContextType {
   QUERY,
   DATA,
 }
+
+export enum FeedbackStatus {
+  NONE = 'none',
+  THUMB_UP = 'thumbup',
+  THUMB_DOWN = 'thumbdown',
+}
diff --git a/src/plugins/query_enhancements/public/datasets/s3_type.ts b/src/plugins/query_enhancements/public/datasets/s3_type.ts
index bedb2efc78a6..2a26a7e5fcea 100644
--- a/src/plugins/query_enhancements/public/datasets/s3_type.ts
+++ b/src/plugins/query_enhancements/public/datasets/s3_type.ts
@@ -5,6 +5,7 @@
 
 import { HttpSetup, SavedObjectsClientContract } from 'opensearch-dashboards/public';
 import { trimEnd } from 'lodash';
+import { i18n } from '@osd/i18n';
 import {
   DATA_STRUCTURE_META_TYPES,
   DEFAULT_DATA,
@@ -24,6 +25,7 @@ export const s3TypeConfig: DatasetTypeConfig = {
   meta: {
     icon: { type: S3_ICON },
     tooltip: 'Amazon S3 Connections',
+    searchOnLoad: true,
   },
 
   toDataset: (path: DataStructure[]): Dataset => {
@@ -101,6 +103,29 @@ export const s3TypeConfig: DatasetTypeConfig = {
   supportedLanguages: (dataset: Dataset): string[] => {
     return ['SQL'];
   },
+
+  getSampleQueries: (dataset: Dataset, language: string) => {
+    switch (language) {
+      case 'PPL':
+        return [
+          {
+            title: i18n.translate('queryEnhancements.s3Type.sampleQuery.basicPPLQuery', {
+              defaultMessage: 'Sample query for PPL',
+            }),
+            query: `source = ${dataset.title}`,
+          },
+        ];
+      case 'SQL':
+        return [
+          {
+            title: i18n.translate('queryEnhancements.s3Type.sampleQuery.basicSQLQuery', {
+              defaultMessage: 'Sample query for SQL',
+            }),
+            query: `SELECT * FROM ${dataset.title} LIMIT 10`,
+          },
+        ];
+    }
+  },
 };
 
 const fetch = async (
diff --git a/src/plugins/query_enhancements/public/plugin.tsx b/src/plugins/query_enhancements/public/plugin.tsx
index ad8a3aca412c..cbd40cb60b60 100644
--- a/src/plugins/query_enhancements/public/plugin.tsx
+++ b/src/plugins/query_enhancements/public/plugin.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '../../../core/public';
 import { ConfigSchema } from '../common/config';
 import { setData, setStorage } from './services';
@@ -17,8 +18,8 @@ import {
 import { LanguageConfig, Query } from '../../data/public';
 import { s3TypeConfig } from './datasets';
 import { createEditor, DefaultInput, SingleLineInput } from '../../data/public';
-import { QueryLanguageReference } from './query_editor/query_language_reference';
 import { DataStorage } from '../../data/common';
+import { pplLanguageReference, sqlLanguageReference } from './query_editor_extensions';
 
 export class QueryEnhancementsPlugin
   implements
@@ -57,9 +58,8 @@ export class QueryEnhancementsPlugin
       usageCollector: data.search.usageCollector,
     });
 
-    const queryLanguageReference = new QueryLanguageReference(core.getStartServices());
-    const pplControls = [queryLanguageReference.createPPLLanguageReference()];
-    const sqlControls = [queryLanguageReference.createPPLLanguageReference()];
+    const pplControls = [pplLanguageReference()];
+    const sqlControls = [sqlLanguageReference()];
 
     const enhancedPPLQueryEditor = createEditor(SingleLineInput, null, pplControls, DefaultInput);
 
@@ -77,6 +77,12 @@ export class QueryEnhancementsPlugin
         filterable: false,
         visualizable: false,
       },
+      docLink: {
+        title: i18n.translate('queryEnhancements.pplLanguage.docLink', {
+          defaultMessage: 'PPL documentation',
+        }),
+        url: 'https://opensearch.org/docs/latest/search-plugins/sql/ppl/syntax/',
+      },
       showDocLinks: false,
       editor: enhancedPPLQueryEditor,
       editorSupportedAppNames: ['discover'],
@@ -96,11 +102,71 @@ export class QueryEnhancementsPlugin
         filterable: false,
         visualizable: false,
       },
+      docLink: {
+        title: i18n.translate('queryEnhancements.sqlLanguage.docLink', {
+          defaultMessage: 'SQL documentation',
+        }),
+        url: 'https://opensearch.org/docs/latest/search-plugins/sql/sql/basic/',
+      },
       showDocLinks: false,
       editor: enhancedSQLQueryEditor,
       editorSupportedAppNames: ['discover'],
       supportedAppNames: ['discover', 'data-explorer'],
       hideDatePicker: true,
+      sampleQueries: [
+        {
+          title: i18n.translate('queryEnhancements.sqlLanguage.sampleQuery.titleContainsWind', {
+            defaultMessage: 'The title field contains the word wind.',
+          }),
+          query: `SELECT * FROM your_table WHERE title LIKE '%wind%'`,
+        },
+        {
+          title: i18n.translate(
+            'queryEnhancements.sqlLanguage.sampleQuery.titleContainsWindOrWindy',
+            {
+              defaultMessage: 'The title field contains the word wind or the word windy.',
+            }
+          ),
+          query: `SELECT * FROM your_table WHERE title LIKE '%wind%' OR title LIKE '%windy%';`,
+        },
+        {
+          title: i18n.translate(
+            'queryEnhancements.sqlLanguage.sampleQuery.titleContainsPhraseWindRises',
+            {
+              defaultMessage: 'The title field contains the phrase wind rises.',
+            }
+          ),
+          query: `SELECT * FROM your_table WHERE title LIKE '%wind rises%'`,
+        },
+        {
+          title: i18n.translate(
+            'queryEnhancements.sqlLanguage.sampleQuery.titleExactMatchWindRises',
+            {
+              defaultMessage: 'The title.keyword field exactly matches The wind rises.',
+            }
+          ),
+          query: `SELECT * FROM your_table WHERE title = 'The wind rises'`,
+        },
+        {
+          title: i18n.translate(
+            'queryEnhancements.sqlLanguage.sampleQuery.titleFieldsContainWind',
+            {
+              defaultMessage:
+                'Any field that starts with title (for example, title and title.keyword) contains the word wind',
+            }
+          ),
+          query: `SELECT * FROM your_table WHERE title LIKE '%wind%' OR title = 'wind'`,
+        },
+        {
+          title: i18n.translate(
+            'queryEnhancements.sqlLanguage.sampleQuery.descriptionFieldExists',
+            {
+              defaultMessage: 'Documents in which the field description exists.',
+            }
+          ),
+          query: `SELECT * FROM your_table WHERE description IS NOT NULL AND description != '';`,
+        },
+      ],
     };
     queryString.getLanguageService().registerLanguage(sqlLanguageConfig);
 
diff --git a/src/plugins/query_enhancements/public/query_assist/components/query_assist_summary.test.tsx b/src/plugins/query_enhancements/public/query_assist/components/query_assist_summary.test.tsx
index 4ec5289a3fa0..09059494b48a 100644
--- a/src/plugins/query_enhancements/public/query_assist/components/query_assist_summary.test.tsx
+++ b/src/plugins/query_enhancements/public/query_assist/components/query_assist_summary.test.tsx
@@ -9,6 +9,7 @@ import { BehaviorSubject } from 'rxjs';
 import { QueryAssistSummary, convertResult } from './query_assist_summary';
 import { useQueryAssist } from '../hooks';
 import { IDataFrame, Query } from '../../../../data/common';
+import { FeedbackStatus as FEEDBACK } from '../../../common/query_assist';
 
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
@@ -89,10 +90,6 @@ describe('query assist summary', () => {
     YES: true,
     NO: false,
   };
-  const FEEDBACK = {
-    YES: true,
-    NO: false,
-  };
 
   const renderQueryAssistSummary = (isCollapsed: boolean) => {
     const component = render(
@@ -136,7 +133,7 @@ describe('query assist summary', () => {
   };
 
   const defaultUseStateMock = () => {
-    mockUseState(null, LOADING.NO, FEEDBACK.NO);
+    mockUseState(null, LOADING.NO, FEEDBACK.NONE);
   };
 
   it('should not show if collapsed is true', () => {
@@ -147,14 +144,14 @@ describe('query assist summary', () => {
   });
 
   it('should not show if assistant is disabled by capability', () => {
-    mockUseState(null, LOADING.NO, FEEDBACK.NO, false);
+    mockUseState(null, LOADING.NO, FEEDBACK.NONE, false);
     renderQueryAssistSummary(COLLAPSED.NO);
     const summaryPanels = screen.queryAllByTestId('queryAssist__summary');
     expect(summaryPanels).toHaveLength(0);
   });
 
   it('should not show if query assistant is collapsed', () => {
-    mockUseState(null, LOADING.NO, FEEDBACK.NO, true, COLLAPSED.YES);
+    mockUseState(null, LOADING.NO, FEEDBACK.NONE, true, COLLAPSED.YES);
     renderQueryAssistSummary(COLLAPSED.NO);
     const summaryPanels = screen.queryAllByTestId('queryAssist__summary');
     expect(summaryPanels).toHaveLength(0);
@@ -168,7 +165,7 @@ describe('query assist summary', () => {
   });
 
   it('should display loading view if loading state is true', () => {
-    mockUseState(null, LOADING.YES, FEEDBACK.NO);
+    mockUseState(null, LOADING.YES, FEEDBACK.NONE);
     renderQueryAssistSummary(COLLAPSED.NO);
     expect(screen.getByTestId('queryAssist_summary_loading')).toBeInTheDocument();
     expect(screen.queryAllByTestId('queryAssist_summary_result')).toHaveLength(0);
@@ -176,7 +173,7 @@ describe('query assist summary', () => {
   });
 
   it('should display loading view if loading state is true even with summary', () => {
-    mockUseState('summary', LOADING.YES, FEEDBACK.NO);
+    mockUseState('summary', LOADING.YES, FEEDBACK.NONE);
     renderQueryAssistSummary(COLLAPSED.NO);
     expect(screen.getByTestId('queryAssist_summary_loading')).toBeInTheDocument();
     expect(screen.queryAllByTestId('queryAssist_summary_result')).toHaveLength(0);
@@ -192,7 +189,7 @@ describe('query assist summary', () => {
   });
 
   it('should display summary result', () => {
-    mockUseState('summary', LOADING.NO, FEEDBACK.NO);
+    mockUseState('summary', LOADING.NO, FEEDBACK.NONE);
     renderQueryAssistSummary(COLLAPSED.NO);
     expect(screen.getByTestId('queryAssist_summary_result')).toBeInTheDocument();
     expect(screen.getByTestId('queryAssist_summary_result')).toHaveTextContent('summary');
@@ -201,12 +198,12 @@ describe('query assist summary', () => {
   });
 
   it('should report metric for thumbup click', async () => {
-    mockUseState('summary', LOADING.NO, FEEDBACK.NO);
+    mockUseState('summary', LOADING.NO, FEEDBACK.NONE);
     renderQueryAssistSummary(COLLAPSED.NO);
     expect(screen.getByTestId('queryAssist_summary_result')).toBeInTheDocument();
     await screen.getByTestId('queryAssist_summary_buttons_thumbup');
     fireEvent.click(screen.getByTestId('queryAssist_summary_buttons_thumbup'));
-    expect(setFeedback).toHaveBeenCalledWith(true);
+    expect(setFeedback).toHaveBeenCalledWith(FEEDBACK.THUMB_UP);
     expect(reportUiStatsMock).toHaveBeenCalledWith(
       'query-assist',
       'click',
@@ -215,12 +212,12 @@ describe('query assist summary', () => {
   });
 
   it('should report metric for thumbdown click', async () => {
-    mockUseState('summary', LOADING.NO, FEEDBACK.NO);
+    mockUseState('summary', LOADING.NO, FEEDBACK.NONE);
     renderQueryAssistSummary(COLLAPSED.NO);
     expect(screen.getByTestId('queryAssist_summary_result')).toBeInTheDocument();
     await screen.getByTestId('queryAssist_summary_buttons_thumbdown');
     fireEvent.click(screen.getByTestId('queryAssist_summary_buttons_thumbdown'));
-    expect(setFeedback).toHaveBeenCalledWith(true);
+    expect(setFeedback).toHaveBeenCalledWith(FEEDBACK.THUMB_DOWN);
     expect(reportUiStatsMock).toHaveBeenCalledWith(
       'query-assist',
       'click',
@@ -228,8 +225,24 @@ describe('query assist summary', () => {
     );
   });
 
+  it('should hide thumbdown button if thumbup button is clicked', async () => {
+    mockUseState('summary', LOADING.NO, FEEDBACK.THUMB_UP);
+    renderQueryAssistSummary(COLLAPSED.NO);
+    expect(screen.getByTestId('queryAssist_summary_result')).toBeInTheDocument();
+    await screen.getByTestId('queryAssist_summary_buttons_thumbup');
+    expect(screen.queryByTestId('queryAssist_summary_buttons_thumbdown')).not.toBeInTheDocument();
+  });
+
+  it('should hide thumbup button if thumbdown button is clicked', async () => {
+    mockUseState('summary', LOADING.NO, FEEDBACK.THUMB_DOWN);
+    renderQueryAssistSummary(COLLAPSED.NO);
+    expect(screen.getByTestId('queryAssist_summary_result')).toBeInTheDocument();
+    await screen.getByTestId('queryAssist_summary_buttons_thumbdown');
+    expect(screen.queryByTestId('queryAssist_summary_buttons_thumbup')).not.toBeInTheDocument();
+  });
+
   it('should not fetch summary if data is empty', async () => {
-    mockUseState(null, LOADING.NO, FEEDBACK.NO);
+    mockUseState(null, LOADING.NO, FEEDBACK.NONE);
     renderQueryAssistSummary(COLLAPSED.NO);
     question$.next(question);
     query$.next({ query: PPL, language: 'PPL' });
@@ -238,7 +251,7 @@ describe('query assist summary', () => {
   });
 
   it('should fetch summary with expected payload and response', async () => {
-    mockUseState('summary', LOADING.NO, FEEDBACK.NO);
+    mockUseState('summary', LOADING.NO, FEEDBACK.NONE);
     const RESPONSE_TEXT = 'response';
     httpMock.post.mockResolvedValue(RESPONSE_TEXT);
     renderQueryAssistSummary(COLLAPSED.NO);
@@ -258,27 +271,27 @@ describe('query assist summary', () => {
         dataSourceId: undefined,
       },
     });
-    expect(setSummary).toHaveBeenNthCalledWith(1, null);
+    expect(setSummary).toHaveBeenNthCalledWith(1, '');
     expect(setSummary).toHaveBeenNthCalledWith(2, RESPONSE_TEXT);
     expect(setLoading).toHaveBeenNthCalledWith(1, true);
     expect(setLoading).toHaveBeenNthCalledWith(2, false);
   });
 
   it('should handle fetch summary error', async () => {
-    mockUseState('summary', LOADING.NO, FEEDBACK.NO);
+    mockUseState('summary', LOADING.NO, FEEDBACK.NONE);
     httpMock.post.mockRejectedValueOnce({});
     renderQueryAssistSummary(COLLAPSED.NO);
     question$.next(question);
     query$.next({ query: PPL, language: 'PPL' });
     data$.next(dataFrame as IDataFrame);
     await sleep(WAIT_TIME);
-    expect(setSummary).toBeCalledTimes(1);
+    expect(setSummary).toBeCalledTimes(2);
     expect(setLoading).toHaveBeenNthCalledWith(1, true);
     expect(setLoading).toHaveBeenNthCalledWith(2, false);
   });
 
   it('should not update queryResults if subscription changed not in order', async () => {
-    mockUseState('summary', LOADING.NO, FEEDBACK.NO);
+    mockUseState('summary', LOADING.NO, FEEDBACK.NONE);
     const RESPONSE_TEXT = 'response';
     httpMock.post.mockResolvedValue(RESPONSE_TEXT);
     renderQueryAssistSummary(COLLAPSED.NO);
@@ -290,7 +303,7 @@ describe('query assist summary', () => {
   });
 
   it('should update queryResults if subscriptions changed in order', async () => {
-    mockUseState('summary', LOADING.NO, FEEDBACK.NO);
+    mockUseState('summary', LOADING.NO, FEEDBACK.NONE);
     const RESPONSE_TEXT = 'response';
     httpMock.post.mockResolvedValue(RESPONSE_TEXT);
     renderQueryAssistSummary(COLLAPSED.NO);
@@ -308,7 +321,7 @@ describe('query assist summary', () => {
   });
 
   it('should reset feedback state if re-fetch summary', async () => {
-    mockUseState('summary', LOADING.NO, FEEDBACK.YES);
+    mockUseState('summary', LOADING.NO, FEEDBACK.THUMB_UP);
     const RESPONSE_TEXT = 'response';
     httpMock.post.mockResolvedValue(RESPONSE_TEXT);
     renderQueryAssistSummary(COLLAPSED.NO);
@@ -316,6 +329,6 @@ describe('query assist summary', () => {
     query$.next({ query: PPL, language: 'PPL' });
     data$.next(dataFrame as IDataFrame);
     await sleep(WAIT_TIME);
-    expect(setFeedback).toHaveBeenCalledWith(FEEDBACK.NO);
+    expect(setFeedback).toHaveBeenCalledWith(FEEDBACK.NONE);
   });
 });
diff --git a/src/plugins/query_enhancements/public/query_assist/components/query_assist_summary.tsx b/src/plugins/query_enhancements/public/query_assist/components/query_assist_summary.tsx
index 4606a975713c..9a20c98fcbbd 100644
--- a/src/plugins/query_enhancements/public/query_assist/components/query_assist_summary.tsx
+++ b/src/plugins/query_enhancements/public/query_assist/components/query_assist_summary.tsx
@@ -29,6 +29,7 @@ import { CoreSetup } from '../../../../../core/public';
 import { QueryAssistContextType } from '../../../common/query_assist';
 import sparkleHollowSvg from '../../assets/sparkle_hollow.svg';
 import sparkleSolidSvg from '../../assets/sparkle_solid.svg';
+import { FeedbackStatus } from '../../../common/query_assist';
 
 export interface QueryContext {
   question: string;
@@ -65,9 +66,9 @@ export const convertResult = (body: IDataFrame) => {
 
 export const QueryAssistSummary: React.FC<QueryAssistSummaryProps> = (props) => {
   const { query, search } = props.data;
-  const [summary, setSummary] = useState(null); // store fetched data
+  const [summary, setSummary] = useState(''); // store fetched data
   const [loading, setLoading] = useState(false); // track loading state
-  const [feedback, setFeedback] = useState(false);
+  const [feedback, setFeedback] = useState(FeedbackStatus.NONE);
   const [isEnabledByCapability, setIsEnabledByCapability] = useState(false);
   const selectedDataset = useRef(query.queryString.getQuery()?.dataset);
   const { question$, isQueryAssistCollapsed } = useQueryAssist();
@@ -76,6 +77,9 @@ export const QueryAssistSummary: React.FC<QueryAssistSummaryProps> = (props) =>
     defaultMessage:
       'Thank you for the feedback. Try again by adjusting your question so that I have the opportunity to better assist you.',
   });
+  const errorPrompt = i18n.translate('queryEnhancements.queryAssist.summary.errorPrompt', {
+    defaultMessage: 'I am unable to respond to this query. Try another question.',
+  });
 
   const sampleSize = 10;
 
@@ -117,8 +121,8 @@ export const QueryAssistSummary: React.FC<QueryAssistSummaryProps> = (props) =>
     async (queryContext: QueryContext) => {
       if (isEmpty(queryContext?.queryResults)) return;
       setLoading(true);
-      setSummary(null);
-      setFeedback(false);
+      setSummary('');
+      setFeedback(FeedbackStatus.NONE);
       const SUCCESS_METRIC = 'fetch_summary_success';
       try {
         const actualSampleSize = Math.min(sampleSize, queryContext?.queryResults?.length);
@@ -140,11 +144,12 @@ export const QueryAssistSummary: React.FC<QueryAssistSummaryProps> = (props) =>
         reportCountMetric(SUCCESS_METRIC, 1);
       } catch (error) {
         reportCountMetric(SUCCESS_METRIC, 0);
+        setSummary(errorPrompt);
       } finally {
         setLoading(false);
       }
     },
-    [props.http, reportCountMetric]
+    [props.http, reportCountMetric, errorPrompt]
   );
 
   useEffect(() => {
@@ -203,9 +208,10 @@ export const QueryAssistSummary: React.FC<QueryAssistSummaryProps> = (props) =>
 
   const onFeedback = useCallback(
     (satisfied: boolean) => {
-      if (feedback) return;
-      setFeedback(true);
-      reportMetric(satisfied ? 'thumbup' : 'thumbdown');
+      if (feedback !== FeedbackStatus.NONE) return;
+      const feedbackStatus = satisfied ? FeedbackStatus.THUMB_UP : FeedbackStatus.THUMB_DOWN;
+      setFeedback(feedbackStatus);
+      reportMetric(feedbackStatus);
     },
     [feedback, reportMetric]
   );
@@ -247,38 +253,42 @@ export const QueryAssistSummary: React.FC<QueryAssistSummaryProps> = (props) =>
                     })}
                   />
                 </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiSmallButtonIcon
-                    aria-label="feedback thumbs up"
-                    color="text"
-                    iconType="thumbsUp"
-                    title={
-                      !feedback
-                        ? i18n.translate('queryEnhancements.queryAssist.summary.goodResponse', {
-                            defaultMessage: `Good response`,
-                          })
-                        : afterFeedbackTip
-                    }
-                    onClick={() => onFeedback(true)}
-                    data-test-subj="queryAssist_summary_buttons_thumbup"
-                  />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiSmallButtonIcon
-                    aria-label="feedback thumbs down"
-                    color="text"
-                    title={
-                      !feedback
-                        ? i18n.translate('queryEnhancements.queryAssist.summary.badResponse', {
-                            defaultMessage: `Bad response`,
-                          })
-                        : afterFeedbackTip
-                    }
-                    iconType="thumbsDown"
-                    onClick={() => onFeedback(false)}
-                    data-test-subj="queryAssist_summary_buttons_thumbdown"
-                  />
-                </EuiFlexItem>
+                {feedback !== FeedbackStatus.THUMB_DOWN && (
+                  <EuiFlexItem grow={false}>
+                    <EuiSmallButtonIcon
+                      aria-label="feedback thumbs up"
+                      color={feedback === FeedbackStatus.THUMB_UP ? 'subdued' : 'text'}
+                      iconType="thumbsUp"
+                      title={
+                        !feedback
+                          ? i18n.translate('queryEnhancements.queryAssist.summary.goodResponse', {
+                              defaultMessage: `Good response`,
+                            })
+                          : afterFeedbackTip
+                      }
+                      onClick={() => onFeedback(true)}
+                      data-test-subj="queryAssist_summary_buttons_thumbup"
+                    />
+                  </EuiFlexItem>
+                )}
+                {feedback !== FeedbackStatus.THUMB_UP && (
+                  <EuiFlexItem grow={false}>
+                    <EuiSmallButtonIcon
+                      aria-label="feedback thumbs down"
+                      color={feedback === FeedbackStatus.THUMB_DOWN ? 'subdued' : 'text'}
+                      title={
+                        !feedback
+                          ? i18n.translate('queryEnhancements.queryAssist.summary.badResponse', {
+                              defaultMessage: `Bad response`,
+                            })
+                          : afterFeedbackTip
+                      }
+                      iconType="thumbsDown"
+                      onClick={() => onFeedback(false)}
+                      data-test-subj="queryAssist_summary_buttons_thumbdown"
+                    />
+                  </EuiFlexItem>
+                )}
                 <EuiSpacer size="m" style={{ borderLeft: '1px solid #D3DAE6', height: '20px' }} />
                 <EuiFlexItem grow={false}>
                   <EuiCopy textToCopy={summary ?? ''}>
diff --git a/src/plugins/query_enhancements/public/query_editor/flyout_containers.tsx b/src/plugins/query_enhancements/public/query_editor/flyout_containers.tsx
deleted file mode 100644
index 4d11d2ed01d7..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/flyout_containers.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { EuiFlyout } from '@elastic/eui';
-import React from 'react';
-
-/*
- * "FlyoutContainers" component used to create flyouts
- *
- * Props taken in as params are:
- * flyoutHeader - header JSX element of flyout
- * flyoutBody - body JSX element of flyout
- * flyoutFooter - footer JSX element of flyout
- * ariaLabel - aria-label for focus of flyout
- */
-
-interface Props {
-  closeFlyout: () => void;
-  flyoutHeader: JSX.Element;
-  flyoutBody: JSX.Element;
-  flyoutFooter: JSX.Element;
-  ariaLabel: string;
-  size?: string;
-}
-
-export const FlyoutContainers = ({
-  closeFlyout,
-  flyoutHeader,
-  flyoutBody,
-  flyoutFooter,
-  ariaLabel,
-  size,
-}: Props) => {
-  return (
-    <div>
-      <EuiFlyout
-        className="observability-flyout"
-        ownFocus={false}
-        onClose={() => closeFlyout()}
-        size={size ? size : 'm'}
-        aria-labelledby={ariaLabel}
-      >
-        {flyoutHeader}
-        {flyoutBody}
-        {flyoutFooter}
-      </EuiFlyout>
-    </div>
-  );
-};
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/dedup.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/dedup.ts
deleted file mode 100644
index 1acde2fb90c9..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/dedup.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const dedupCmd = `## dedup
----
-
-### Description
-
-Use the \'dedup\' command to remove identical documents from the search results, based on the specified field.
-
-### Syntax
-
-dedup \[int\] &lt;field-list&gt; \[keepempty=&lt;bool&gt;\]
-\[consecutive=&lt;bool&gt;\]
-
--   \`field-list\`: Required. The comma-delimited field list. At least one field is required.
--   \`consecutive\`: Optional. If set to \`true\`, removes duplicate events, where the duplicate events have consecutive timestamps. Default is \`false\`.
--   \`int\`: Optional. The \'dedup\' command retains multiple events for each combination when you specify \`&lt;int&gt;\`. The number for \`&lt;int&gt;\` must be greater than 0. If you do not specify a number, only the first occurring event is kept. All other duplicates are removed from the results. Default is \`1\`.
--   \`keepempty\`: Optional. If set to \`true\`, keeps the document if any field in the \`field-list\` is null or missing. Default is \`false\`.
-
-#### Example 1: Dedup by one field
-
-The following example PPL query shows how to use \`dedup\` to remove duplicate documents based on the \`gender\` field:
-
-    os> source=accounts | dedup gender | fields account_number, gender;
-    fetched rows / total rows = 2/2
-    +------------------+----------+
-    | account_number   | gender   |
-    |------------------+----------|
-    | 1                | M        |
-    | 13               | F        |
-    +------------------+----------+
-
-#### Example 2: Keep two duplicate documents
-
-The following example PPL query shows how to use \`dedup\` to remove duplicate documents based on the \`gender\` field while keeping two duplicates:
-
-    os> source=accounts | dedup 2 gender | fields account_number, gender;
-    fetched rows / total rows = 3/3
-    +------------------+----------+
-    | account_number   | gender   |
-    |------------------+----------|
-    | 1                | M        |
-    | 6                | M        |
-    | 13               | F        |
-    +------------------+----------+
-
-#### Example 3: Keep or ignore empty fields by default
-
-The following example PPL query shows how to use \`dedup\` to remove duplicate documents while keeping documents with null values in the specified field:
-
-    os> source=accounts | dedup email keepempty=true | fields account_number, email;
-    fetched rows / total rows = 4/4
-    +------------------+-----------------------+
-    | account_number   | email                 |
-    |------------------+-----------------------|
-    | 1                | amberduke@pyrami.com  |
-    | 6                | hattiebond@netagy.com |
-    | 13               | null                  |
-    | 18               | daleadams@boink.com   |
-    +------------------+-----------------------+
-
-The following example PPL query shows how to use \`dedup\` to remove duplicate documents while ignoring documents with empty values in the specified field:
-
-    os> source=accounts | dedup email | fields account_number, email;
-    fetched rows / total rows = 3/3
-    +------------------+-----------------------+
-    | account_number   | email                 |
-    |------------------+-----------------------|
-    | 1                | amberduke@pyrami.com  |
-    | 6                | hattiebond@netagy.com |
-    | 18               | daleadams@boink.com   |
-    +------------------+-----------------------+
-
-#### Example 4: Remove duplicate consecutive documents
-
-The following example PPL query shows how to use \`dedup\` to remove duplicate consecutive documents:
-
-    os> source=accounts | dedup gender consecutive=true | fields account_number, gender;
-    fetched rows / total rows = 3/3
-    +------------------+----------+
-    | account_number   | gender   |
-    |------------------+----------|
-    | 1                | M        |
-    | 13               | F        |
-    | 18               | M        |
-    +------------------+----------+
-
-### Limitation
-The \`dedup\` command is not rewritten to [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/). It is only run on the coordinating node.
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/eval.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/eval.ts
deleted file mode 100644
index f20a5ee35198..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/eval.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const evalCmd = `## eval
----
-
-### Description
-
-Use the \'eval\' command to evaluate the expression and append the result to the search result.
-
-### Syntax
-
-eval &lt;field&gt;=&lt;expression&gt; \[","
-&lt;field&gt;=&lt;expression&gt; \]...
-
--   \`field\`: Required. If the field name does not exist, a new field is created. If the field name exists, the value of the existing field is replaced.
--   \`expression\`: Required. Any expression that is supported by the system.
-
-#### Example 1: Create new fields
-
-The following example PPL query shows how to use \`eval\` to create a new field for each document. In this example, the new field is \`doubleAge\`.
-
-    os> source=accounts | eval doubleAge = age * 2 | fields age, doubleAge;
-    fetched rows / total rows = 4/4
-    +-------+-------------+
-    | age   | doubleAge   |
-    |-------+-------------|
-    | 32    | 64          |
-    | 36    | 72          |
-    | 28    | 56          |
-    | 33    | 66          |
-    +-------+-------------+
-
-#### Example 2: Override existing fields
-
-The following example PPL query shows how to use \`eval\` to override an existing field. In this example, the existing field \`age\` is overridden by the \`age\` field plus 1.
-
-    os> source=accounts | eval age = age + 1 | fields age;
-    fetched rows / total rows = 4/4
-    +-------+
-    | age   |
-    |-------|
-    | 33    |
-    | 37    |
-    | 29    |
-    | 34    |
-    +-------+
-
-#### Example 3: Create new fields based on the fields defined in the \`eval\` expression
-
-The following example PPL query shows how to use \`eval\` to create a new field based on the fields defined in the \`eval\` expression. In this example, the new field \`ddAge\` is the evaluation result of the \`doubleAge\` field multiplied by 2. \`doubleAge\` is defined in the \`eval\` command.
-
-    os> source=accounts | eval doubleAge = age * 2, ddAge = doubleAge * 2 | fields age, doubleAge, ddAge;
-    fetched rows / total rows = 4/4
-    +-------+-------------+---------+
-    | age   | doubleAge   | ddAge   |
-    |-------+-------------+---------|
-    | 32    | 64          | 128     |
-    | 36    | 72          | 144     |
-    | 28    | 56          | 112     |
-    | 33    | 66          | 132     |
-    +-------+-------------+---------+
-
-### Limitation
-The \`eval\` command is not rewritten to [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/). It is only run on the coordinating node.
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/fields.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/fields.ts
deleted file mode 100644
index 2110349b54eb..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/fields.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const fieldsCmd = `## fields
----
-### Description
-
-Use the \`fields\` command to specify the fields that should be included in or excluded from the search results.
-
-### Syntax
-
-fields \[+\|-\] &lt;field-list&gt;
-
--   \`field-list\`: Required. Comma-separated list of fields to keep or remove.
--   \`index\`: Optional. If the plus sign \`+\` is used, only the fields specified in the field list will be included. If the minus \`-\` is used, all the fields specified in the field list will be excluded. Default is \`+\`.
-
-#### Example 1: Select specified fields from the search result
-
-The following example PPL query shows how to retrieve the \`account\_number\`, \`firstname\`, and \`lastname\` fields from the search results:
-
-    os> source=accounts | fields account_number, firstname, lastname;
-    fetched rows / total rows = 4/4
-    +------------------+-------------+------------+
-    | account_number   | firstname   | lastname   |
-    |------------------+-------------+------------|
-    | 1                | Amber       | Duke       |
-    | 6                | Hattie      | Bond       |
-    | 13               | Nanette     | Bates      |
-    | 18               | Dale        | Adams      |
-    +------------------+-------------+------------+
-
-#### Example 2: Remove specified fields from the search results
-
-The following example PPL query shows how to remove the \`account\_number\` field from the search results:
-
-    os> source=accounts | fields account_number, firstname, lastname | fields - account_number;
-    fetched rows / total rows = 4/4
-    +-------------+------------+
-    | firstname   | lastname   |
-    |-------------+------------|
-    | Amber       | Duke       |
-    | Hattie      | Bond       |
-    | Nanette     | Bates      |
-    | Dale        | Adams      |
-    +-------------+------------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/head.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/head.ts
deleted file mode 100644
index 468da72d3871..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/head.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const headCmd = `## head
----
-
-### Description
-
-Use the \`head\` command to return the first N number of lines from a search result.
-
-### Syntax
-
-head \[N\]
-
--   \`N\`: Optional. The number of results you want to return. Default is 10.
-
-#### Example 1: Get the first 10 results
-
-The following example PPL query shows how to use \`head\` to return the first 10 search results:
-
-    os> source=accounts | fields firstname, age | head;
-    fetched rows / total rows = 10/10
-    +---------------+-----------+
-    | firstname     | age       |
-    |---------------+-----------|
-    | Amber         | 32        |
-    | Hattie        | 36        |
-    | Nanette       | 28        |
-    | Dale          | 33        |
-    | Elinor        | 36        |
-    | Virginia      | 39        |
-    | Dillard       | 34        |
-    | Mcgee         | 39        |
-    | Aurelia       | 37        |
-    | Fulton        | 23        |
-    +---------------+-----------+
-
-#### Example 2: Get the first N results
-
-The following example PPL query shows how to use \`head\` to get a specified number of search results. In this example, N is equal to 3: 
-
-    os> source=accounts | fields firstname, age | head 3;
-    fetched rows / total rows = 3/3
-    +---------------+-----------+
-    | firstname     | age       |
-    |---------------+-----------|
-    | Amber         | 32        |
-    | Hattie        | 36        |
-    | Nanette       | 28        |
-    +---------------+-----------+
-
-#### Limitation
-The \`head\` command is not rewritten to [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/). It is only run on the coordinating node.
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/index.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/index.ts
deleted file mode 100644
index 27328a4c2be8..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export { dedupCmd } from './dedup';
-export { evalCmd } from './eval';
-export { fieldsCmd } from './fields';
-export { headCmd } from './head';
-export { parseCmd } from './parse';
-export { rareCmd } from './rare';
-export { renameCmd } from './rename';
-export { searchCmd } from './search';
-export { sortCmd } from './sort';
-export { statsCmd } from './stats';
-export { syntaxCmd } from './syntax';
-export { topCmd } from './top';
-export { whereCmd } from './where';
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/parse.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/parse.ts
deleted file mode 100644
index 28501cf8555e..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/parse.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const parseCmd = `## parse 
----
-### Description
-
-Use the \`parse\` command to extract information from a text field using a regular expression and add it to the search result.
-
-### Syntax
-
-parse &lt;field&gt; &lt;regular-expression&gt;
-
-- \`field\`: Required. Must be a text field.
-- \`regular-expression\`: Required. The regular expression used to extract new fields from a text field. It replaces the original field if a new field name exists.
-
-### Regular expression
-
-Use the Java regular expression engine to match the entire text field of each document. Each named capture group in the expression will be converted to a new \`string\` field.
-
-#### Example 1: Create a new field
-
-The following example PPL query shows how to create new field \`host\` for each document. \`host\` becomes the hostname after the @ symbol in the \`email\` field. Parsing a null field returns an empty string.
-
-    os> source=accounts | parse email '.+@(?<host>.+)' | fields email, host;
-    fetched rows / total rows = 4/4
-    +-----------------------+------------+
-    | email                 | host       |
-    |-----------------------+------------|
-    | amberduke@pyrami.com  | pyrami.com |
-    | hattiebond@netagy.com | netagy.com |
-    | null                  |            |
-    | daleadams@boink.com   | boink.com  |
-    +-----------------------+------------+
-
-#### Example 2: Override an existing field
-
-The following example PPL query shows how to override the existing \`address\` field while excluding the street number:
-
-    os> source=accounts | parse address '\\d+ (?<address>.+)' | fields address;
-    fetched rows / total rows = 4/4
-    +------------------+
-    | address          |
-    |------------------|
-    | Holmes Lane      |
-    | Bristol Street   |
-    | Madison Street   |
-    | Hutchinson Court |
-    +------------------+
-
-#### Example 3: Filter and sort by casted-parsed field
-
-The following example PPL query shows how to sort street numbers that are greater than 500 in the \`address\` field:
-
-    os> source=accounts | parse address '(?<streetNumber>\d+) (?<street>.+)' | where cast(streetNumber as int) > 500 | sort num(streetNumber) | fields streetNumber, street;
-    fetched rows / total rows = 3/3
-    +----------------+----------------+
-    | streetNumber   | street         |
-    |----------------+----------------|
-    | 671            | Bristol Street |
-    | 789            | Madison Street |
-    | 880            | Holmes Lane    |
-    +----------------+----------------+
-
-### Limitation
-
-The following limitations apply:
-
-- Parsed fields cannot be parsed again. For example, the following command is not valid:
-
-      source=accounts | parse address '\\d+ (?<street>.+)' | parse street '\\w+ (?<road>\\w+)';
-
-- Other commands cannot overwrite fields created by parsing. For example, in the following query, \`where\` does not match any documents because \`street\` cannot be overridden:
-
-      source=accounts | parse address '\\d+ (?<street>.+)' | eval street='1' | where street='1';
-
-- The text field that is parsed cannot be overridden. For example, in the following query, \`street\` is not successfully parsed because \`address\` is overridden:
-
-      source=accounts | parse address '\\d+ (?<street>.+)' | eval address='1';
-
-- Fields created by parsing cannot be filtered or sorted after using them in the \`stats\` command. For example, in the following query, \`where\` is not valid:
-
-      source=accounts | parse email '.+@(?<host>.+)' | stats avg(age) by host | where host=pyrami.com;
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/rare.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/rare.ts
deleted file mode 100644
index 61f5016f4e9e..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/rare.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const rareCmd = `## rare
----
-
-### Description
-
-Use the \`rare\` command to find the least common tuple of values across all fields in the \`field-list\` field. A maximum of 10 results is returned for each distinct tuple of group-by field values.
-
-### Syntax
-
-rare &lt;field-list&gt; \[by-clause\]
-
--   \`field-list\`: Required. A comma-separated list of field names.
--   \`by-clause\`: Optional. One or more fields to group by.
-
-#### Example 1: Find a field's least common values
-
-The following example PPL query shows how to find a least common value in the \`gender\` field:
-
-    os> source=accounts | rare gender;
-    fetched rows / total rows = 2/2
-    +------------+
-    | gender     |
-    |------------|
-    | F          |
-    |------------|
-    | M          |
-    +------------+
-
-#### Example 2: Find least common values in group-by fields
-
-The following example PPL query shows how to find a least common value in the \`age\` field that is grouped by \`gender\`:
-
-    os> source=accounts | rare age by gender;
-    fetched rows / total rows = 20/20
-    +----------+----------+
-    | gender   | age      |
-    |----------+----------|
-    | F        | 29       |
-    | F        | 20       |
-    | F        | 23       |
-    | F        | 25       |
-    | F        | 37       |
-    | F        | 38       |
-    | F        | 40       |
-    | F        | 27       |
-    | F        | 36       |
-    | F        | 24       |
-    | M        | 27       |
-    | M        | 24       |
-    | M        | 34       |
-    | M        | 38       |
-    | M        | 28       |
-    | M        | 39       |
-    | M        | 21       |
-    | M        | 30       |
-    | M        | 25       |
-    | M        | 29       |
-    +----------+----------+
-
-#### Limitation
-The \`rare\` command is not rewritten to [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/). It is only run on the coordinating node.
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/rename.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/rename.ts
deleted file mode 100644
index 22d9790514a8..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/rename.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const renameCmd = `## rename
----
-### Description
-
-Use the \`rename\` command to rename one or more fields in the search result.
-
-### Syntax
-
-rename &lt;source-field&gt; AS &lt;target-field&gt;\[","
-&lt;source-field&gt; AS &lt;target-field&gt;\]...
-
--   \`source-field\`: Required. The field to rename.
--   \`target-field\`: Required. The new field.
-
-#### Example 1: Rename one field
-
-The following example PPL query renames a field:
-
-    os> source=accounts | rename account_number as an | fields an;
-    fetched rows / total rows = 4/4
-    +------+
-    | an   |
-    |------|
-    | 1    |
-    | 6    |
-    | 13   |
-    | 18   |
-    +------+
-
-#### Example 2: Rename two or more fields
-
-The following example PPL query renames two or more fields:
-
-    os> source=accounts | rename account_number as an, employer as emp | fields an, emp;
-    fetched rows / total rows = 4/4
-    +------+---------+
-    | an   | emp     |
-    |------+---------|
-    | 1    | Pyrami  |
-    | 6    | Netagy  |
-    | 13   | Quility |
-    | 18   | null    |
-    +------+---------+
-
-#### Limitation
-The \`rename\` command is not rewritten to [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/). It is only run on the coordinating node.
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/search.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/search.ts
deleted file mode 100644
index 2c2e361dd958..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/search.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const searchCmd = `## search 
----
-
-### Description
-
-Use the \`search\` command to retrieve a document from the index. The \`search\`
-command can only be used as the first command in a PPL query.
-
-### Syntax
-
-search source=&lt;index&gt; \[boolean-expression\]
-
--   \`search\`: Search keywords, which can be ignored.
--   \`index\`: Required. Search commands must specify the index to query.
--   \`bool-expression\`: Optional. Any expression that can be evaluated to a Boolean value.
-
-#### Example 1: Fetch all data from an index
-
-The following example PPL query shows how to fetch all documents from the \`accounts\` index:
-
-    os> source=accounts;
-    fetched rows / total rows = 4/4
-    +----------------+-----------+----------------------+---------+--------+--------+----------+-------+-----+-----------------------+----------+
-    | account_number | firstname | address              | balance | gender | city   | employer | state | age | email                 | lastname |
-    +----------------+-----------+----------------------+---------+--------+--------+----------+-------+-----+-----------------------+----------+
-    | 1              | Amber     | 880 Holmes Lane      | 39225   | M      | Brogan | Pyrami   | IL    | 32  | amberduke@pyrami.com  | Duke     |
-    | 6              | Hattie    | 671 Bristol Street   | 5686    | M      | Dante  | Netagy   | TN    | 36  | hattiebond@netagy.com | Bond     |
-    | 13             | Nanette   | 789 Madison Street   | 32838   | F      | Nogal  | Quility  | VA    | 28  | null                  | Bates    |
-    | 18             | Dale      | 467 Hutchinson Court | 4180    | M      | Orick  | null     | MD    | 33  | daleadams@boink.com   | Adams    |
-    +----------------+-----------+----------------------+---------+--------+--------+----------+-------+-----+-----------------------+----------+
-
-#### Example 2: Fetch data with a condition
-
-The following example PPL query shows how to fetch all documents from the \`accounts\` index by using the \`or\` condition.
-
-    os> source=accounts account_number=1 or gender="F";
-    fetched rows / total rows = 2/2
-    +------------------+-------------+--------------------+-----------+----------+--------+------------+---------+-------+----------------------+------------+
-    | account_number   | firstname   | address            | balance   | gender   | city   | employer   | state   | age   | email                | lastname   |
-    |------------------+-------------+--------------------+-----------+----------+--------+------------+---------+-------+----------------------+------------|
-    | 1                | Amber       | 880 Holmes Lane    | 39225     | M        | Brogan | Pyrami     | IL      | 32    | amberduke@pyrami.com | Duke       |
-    | 13               | Nanette     | 789 Madison Street | 32838     | F        | Nogal  | Quility    | VA      | 28    | null                 | Bates      |
-    +------------------+-------------+--------------------+-----------+----------+--------+------------+---------+-------+----------------------+------------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/sort.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/sort.ts
deleted file mode 100644
index d31e84a96e29..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/sort.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const sortCmd = `## sort 
----
-### Description
-
-Use the \`sort\` command to sort search results by a specified field.
-
-### Syntax
-
-sort &lt;\[+\|-\] sort-field&gt;...
-
--   \`sort-field\`: Required. The field to sort by.
--   \[+\|-\]: Optional. The symbols used to indicate the sorting order. A plus sign \[+\] indicates ascending order, with null and missing values first. A minus sign \[-\] indicates descending order, with null and missing last. Default is \[+\], with null and missing first.
-
-#### Example 1: Sort by one field
-
-The following example PPL query shows how to sort documents by one field in ascending order:
-
-    os> source=accounts | sort age | fields account_number, age;
-    fetched rows / total rows = 4/4
-    +------------------+-------+
-    | account_number   | age   |
-    |------------------+-------|
-    | 13               | 28    |
-    | 1                | 32    |
-    | 18               | 33    |
-    | 6                | 36    |
-    +------------------+-------+
-
-#### Example 2: Sort by one field and return all results
-
-The following example PPL query shows how to sort by one field and return all results in ascending order:
-
-    os> source=accounts | sort age | fields account_number, age;
-    fetched rows / total rows = 4/4
-    +------------------+-------+
-    | account_number   | age   |
-    |------------------+-------|
-    | 13               | 28    |
-    | 1                | 32    |
-    | 18               | 33    |
-    | 6                | 36    |
-    +------------------+-------+
-
-#### Example 3: Sort by one field in descending order
-
-The following example PPL query shows how to sort by one field in descending order:
-
-    os> source=accounts | sort - age | fields account_number, age;
-    fetched rows / total rows = 4/4
-    +------------------+-------+
-    | account_number   | age   |
-    |------------------+-------|
-    | 6                | 36    |
-    | 18               | 33    |
-    | 1                | 32    |
-    | 13               | 28    |
-    +------------------+-------+
-
-#### Example 4: Sort multiple fields in both ascending and descending order 
-
-The following example PPL query shows how to sort by multiple fields in both ascending and descending order. In this example, the \`gender\` field is in ascending order and the \`age\` field is in descending order.
-
-    os> source=accounts | sort + gender, - age | fields account_number, gender, age;
-    fetched rows / total rows = 4/4
-    +------------------+----------+-------+
-    | account_number   | gender   | age   |
-    |------------------+----------+-------|
-    | 13               | F        | 28    |
-    | 6                | M        | 36    |
-    | 18               | M        | 33    |
-    | 1                | M        | 32    |
-    +------------------+----------+-------+
-
-#### Example 5: Sort by field, including null values
-
-The following example PPL query shows how to sort by the \`employer\` field using the default order (\[+\] with null and missing first):
-
-    os> source=accounts | sort employer | fields employer;
-    fetched rows / total rows = 4/4
-    +------------+
-    | employer   |
-    |------------|
-    | null       |
-    | Netagy     |
-    | Pyrami     |
-    | Quility    |
-    +------------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/stats.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/stats.ts
deleted file mode 100644
index 5392c9ef4b5d..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/stats.ts
+++ /dev/null
@@ -1,282 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const statsCmd = `## stats
----
-
-### Description
-
-Use the \`stats\` command to calculate the aggregation from the search results.
-
-The following table catalogs the aggregation functions and defines how the null and missing values are handled.
-
-|          |             |             |
-|----------|-------------|-------------|
-| Function | NULL        | MISSING     |
-| COUNT    | Not counted | Not counted |
-| SUM      | Ignore      | Ignore      |
-| AVG      | Ignore      | Ignore      |
-| MAX      | Ignore      | Ignore      |
-| MIN      | Ignore      | Ignore      |
-
-### Syntax
-
-stats &lt;aggregation&gt;... \[by-clause\]...
-
--   \`aggregation\`: Required. The aggregation function that must be applied to the field.
--   \`by-clause\`: Optional. One or more fields to group by. Default: If \`&lt;by-clause&gt;\` is not specified, the \`stats\` command returns one row, which is the aggregation for the entire result set.
-
-### Aggregation functions
----
-#### COUNT
-
-The \`count\` function returns the number of rows in the result set. The following is an example PPL query:
-
-    os> source=accounts | stats count();
-    fetched rows / total rows = 1/1
-    +-----------+
-    | count()   |
-    |-----------|
-    | 4         |
-    +-----------+
-
-#### SUM
-
-The \`SUM(expr)\` function returns the sum of the values in the expression \`expr\`. The following is an example PPL query:
-
-    os> source=accounts | stats sum(age) by gender;
-    fetched rows / total rows = 2/2
-    +------------+----------+
-    | sum(age)   | gender   |
-    |------------+----------|
-    | 28         | F        |
-    | 101        | M        |
-    +------------+----------+
-
-#### AVG
-
-The \`AVG(expr)\` function returns the average of the values in the expression \`expr\`. The following is an example PPL query:
-
-    os> source=accounts | stats avg(age) by gender;
-    fetched rows / total rows = 2/2
-    +--------------------+----------+
-    | avg(age)           | gender   |
-    |--------------------+----------|
-    | 28.0               | F        |
-    | 33.666666666666664 | M        |
-    +--------------------+----------+
-
-#### MAX
-
-The \`MAX(expr)\` function returns the largest value in the expression \`expr\`. The following is an example PPL query:
-
-    os> source=accounts | stats max(age);
-    fetched rows / total rows = 1/1
-    +------------+
-    | max(age)   |
-    |------------|
-    | 36         |
-    +------------+
-
-#### MIN
-
-The \`MIN(expr)\` function returns the smallest value in the expression \`expr\`. The following is an example PPL query:
-
-    os> source=accounts | stats min(age);
-    fetched rows / total rows = 1/1
-    +------------+
-    | min(age)   |
-    |------------|
-    | 28         |
-    +------------+
-
-#### VAR\_SAMP
-
-The \`VAR\_SAMP(expr)\` function returns the sample variance of a selection of data in the expression \`expr\`. The following is an example PPL query:
-
-    os> source=accounts | stats var_samp(age);
-    fetched rows / total rows = 1/1
-    +--------------------+
-    | var_samp(age)      |
-    |--------------------|
-    | 10.916666666666666 |
-    +--------------------+
-
-#### VAR\_POP
-
-The \`VAR\_POP(expr)\` function returns the population variance of a selection of data in the expression \`expr\`. See the following example.
-
-    os> source=accounts | stats var_pop(age);
-    fetched rows / total rows = 1/1
-    +----------------+
-    | var_pop(age)   |
-    |----------------|
-    | 8.1875         |
-    +----------------+
-
-#### STDDEV\_SAMP
-
-The \`STDDEV\_SAMP(expr)\` function returns the sample standard deviation of a set of values in the expression \`expr\`. The following is an example PPL query: 
-
-    os> source=accounts | stats stddev_samp(age);
-    fetched rows / total rows = 1/1
-    +--------------------+
-    | stddev_samp(age)   |
-    |--------------------|
-    | 3.304037933599835  |
-    +--------------------+
-
-#### STDDEV\_POP
-
-The \`STDDEV\_POP(expr)\` function returns the population standard deviation of a set of values in the expression \`expr\`. The following is an example PPL query:
-
-    os> source=accounts | stats stddev_pop(age);
-    fetched rows / total rows = 1/1
-    +--------------------+
-    | stddev_pop(age)    |
-    |--------------------|
-    | 2.8613807855648994 |
-    +--------------------+
-
-### By clause
-
-The \`by\` clause can contain fields, expressions, scalar functions, or aggregation functions. The \`span\` clause can be used in the \`by\` clause to split specific fields into buckets of the same interval. The \`stats\` command then performs the aggregation on these buckets.
-
-The span syntax is \`span(field_expr, interval_expr)\`. By default, the interval expression in the \`span\` clause is interpreted in natural units. If the field is a date and time type field and the interval is in date and time units, you must specify the unit in the interval expression. For example, to split the \`age\` field into buckets of 10 years, you would use \`span(age, 10y). To split a timestamp field into hourly intervals, you would use \`span(timestamp, 1h)\`.
-
-The following table lists the available time units.
-
-| Span Interval Units        |
-|----------------------------|
-| millisecond (ms)           |
-| second (s)                 |
-| minute (m, case sensitive) |
-| hour (h)                   |
-| day (d)                    |
-| week (w)                   |
-| month (M, case sensitive)  |
-| quarter (q)                |
-| year (y)                   |
-
-### PPL queries using the stats command
-
-The following example PPL queries show ways you can use the \`stats\` command in your queries.
-
-#### Example 1: Calculate event counts
-
-The following example PPL query calculates event counts:
-
-    os> source=accounts | stats count();
-    fetched rows / total rows = 1/1
-    +-----------+
-    | count()   |
-    |-----------|
-    | 4         |
-    +-----------+
-
-#### Example 2: Calculate a field's average
-
-The following example PPL query calculates the average age:
-
-    os> source=accounts | stats avg(age);
-    fetched rows / total rows = 1/1
-    +------------+
-    | avg(age)   |
-    |------------|
-    | 32.25      |
-    +------------+
-
-#### Example 3: Calculate the average of a field by group
-
-The following example PPL query calculates the average age grouped by gender:
-
-    os> source=accounts | stats avg(age) by gender;
-    fetched rows / total rows = 2/2
-    +--------------------+----------+
-    | avg(age)           | gender   |
-    |--------------------+----------|
-    | 28.0               | F        |
-    | 33.666666666666664 | M        |
-    +--------------------+----------+
-
-#### Example 4: Calculate the average, sum, and count of a field by group
-
-The following example PPL query calculates the average age, sum age, and count of events by gender.
-
-    os> source=accounts | stats avg(age), sum(age), count() grouped by gender;
-    fetched rows / total rows = 2/2
-    +--------------------+------------+-----------+----------+
-    | avg(age)           | sum(age)   | count()   | gender   |
-    |--------------------+------------+-----------+----------|
-    | 28.0               | 28         | 1         | F        |
-    | 33.666666666666664 | 101        | 3         | M        |
-    +--------------------+------------+-----------+----------+
-
-#### Example 5: Calculate a field's maximum
-
-The following example PPL query calculates the maximum age:
-
-    os> source=accounts | stats max(age);
-    fetched rows / total rows = 1/1
-    +------------+
-    | max(age)   |
-    |------------|
-    | 36         |
-    +------------+
-
-#### Example 6: Calculate a field's min/max by group
-
-The following example PPL query calculates the min/max age grouped by gender:
-
-    os> source=accounts | stats max(age), min(age) by gender;
-    fetched rows / total rows = 2/2
-    +------------+------------+----------+
-    | max(age)   | min(age)   | gender   |
-    |------------+------------+----------|
-    | 28         | 28         | F        |
-    | 36         | 32         | M        |
-    +------------+------------+----------+
-
-#### Example 7: Calculate a field's distinct count
-
-To count the number of distinct values in a field, you can use the \`DISTINCT_COUNT\` or \`DC\` function instead of the \`COUNT\` funtion.
-
-The following PPL query calculates both the count and distinct count of the \`gender\` field for all accounts.
-
-    os> source=accounts | stats count(gender), distinct_count(gender);
-    fetched rows / total rows = 1/1
-    +-----------------+--------------------------+
-    | count(gender)   | distinct_count(gender)   |
-    |-----------------+--------------------------|
-    | 4               | 2                        |
-    +-----------------+--------------------------+
-
-#### Example 8: Calculate count by span
-
-The following PPL query calculates age by span of 10 years.
-
-    os> source=accounts | stats count(age) by span(age, 10) as age_span
-    fetched rows / total rows = 2/2
-    +--------------+------------+
-    | count(age)   | age_span   |
-    |--------------+------------|
-    | 1            | 20         |
-    | 3            | 30         |
-    +--------------+------------+
-
-#### Example 9: Calculate count by gender and span
-
-The following PPL query calculates age by span of 10 years and groups by gender.
-
-    os> source=accounts | stats count() as cnt by span(age, 5) as age_span, gender
-    fetched rows / total rows = 3/3
-    +-------+------------+----------+
-    | cnt   | age_span   | gender   |
-    |-------+------------+----------|
-    | 1     | 25         | F        |
-    | 2     | 30         | M        |
-    | 1     | 35         | M        |
-    +-------+------------+----------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/syntax.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/syntax.ts
deleted file mode 100644
index a37cf8be65ce..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/syntax.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const syntaxCmd = `## Syntax
----
-### Command order
-
-The PPL query starts with a \`search\` command to reference a table to search.
-Commands can be in any order. For example, in the following query, the \`search\` command references the \`accounts\` index as the source and then uses fields and a \`where\` command to perform further processing. 
-
-\`\`\` 
-search source=accounts
-| where age > 18
-| fields firstname, lastname
-\`\`\`
-
-### Required and optional arguments
-
-Required arguments are enclosed in angle brackets \< \>, and optional arguments are enclosed in square brackets \[ \].`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/top.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/top.ts
deleted file mode 100644
index 0cf6b7c8b8de..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/top.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const topCmd = `## top
----
-### Description
-
-Use the \`top\` command to find the most common tuple of values for all
-fields in the field list.
-
-### Syntax
-
-top \[N\] &lt;field-list&gt; \[by-clause\]
-
--   \`N\`: The number of results you want to return. Default is 10.
--   \`field-list\`: Required. The comma-delimited field list.
--   \`by-clause\`: Optional. One or more fields to group by.
-
-#### Example 1: Find the most common values in a field
-
-The following example PPL query finds the most common gender.
-
-    os> source=accounts | top 1 gender;
-    fetched rows / total rows = 1/1
-    +------------+
-    | gender     |
-    |------------|
-    | M          |
-    +------------+
-
-#### Example 2: Find the most common values grouped by gender
-
-The following example PPL query finds the most common age grouped by gender.
-
-    os> source=accounts | top 1 age by gender;
-    fetched rows / total rows = 2/2
-    +----------+----------+
-    | gender   | age      |
-    |----------+----------|
-    | F        | 39       |
-    | M        | 31       |
-    +----------+----------+
-
-#### Limitation
-The \`top\` command is not rewritten to [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/). It is only run on the coordinating node.
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/where.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/where.ts
deleted file mode 100644
index b92d65b01312..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/commands/where.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const whereCmd = `## where
----
-
-### Description
-
-Use the \`where\` command to filter search results. The \`where\` command only returns the result when the \`bool-expression\` is set to \`true\`.
-
-### Syntax
-
-\`where &lt;boolean-expression&gt;\`
-
--   \`bool-expression\`: Optional. Any expression that can be evaluated to a Boolean expression.
-
-#### Example 1: Filter the result set with a condition
-
-The following example PPL query fetches all documents from the \`accounts\` index using an \`or\ condition.
-
-    os> source=accounts | where account_number=1 or gender="F" | fields account_number, gender;
-    fetched rows / total rows = 2/2
-    +------------------+----------+
-    | account_number   | gender   |
-    |------------------+----------|
-    | 1                | M        |
-    | 13               | F        |
-    +------------------+----------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/condition.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/condition.ts
deleted file mode 100644
index 4824b5aa2300..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/condition.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const conditionFunction = `## Condition
----
-
-### Condition functions
-
-PPL functions use the search capabilities of the OpenSearch engine. However, these functions don't execute directly within the OpenSearch plugin's memory. Instead, they facilitate the global filtering of query results based on specific conditions, such as a \`WHERE\` or \`HAVING\` clause. 
-
-The following sections describe the condition PPL functions.
-
-### ISNULL
-
-The \`isnull(field)\` function checks a specific field and returns \`true\` if the field contains no data, that is, it's null.
-
-**Argument type:** All supported data types
-
-**Return type:** \`BOOLEAN\`
-
-#### Example
-
-    os> source=accounts | eval result = isnull(employer) | fields result, employer, firstname
-    fetched rows / total rows = 4/4
-    +----------+------------+-------------+
-    | result   | employer   | firstname   |
-    |----------+------------+-------------|
-    | False    | Pyrami     | Amber       |
-    | False    | Netagy     | Hattie      |
-    | False    | Quility    | Nanette     |
-    | True     | null       | Dale        |
-    +----------+------------+-------------+
-
-### ISNOTNULL
-
-The \`isnotnull(field)\` function is the opposite of \`isnull(field)\`. Instead of checking for null values, it checks a specific field and returns \`true\` if the field contains data, that is, it is not null.
-
-**Argument type:** All supported data types
-
-**Return type:** \`BOOLEAN\`
-
-#### Example
-
-    os> source=accounts | where not isnotnull(employer) | fields account_number, employer
-    fetched rows / total rows = 1/1
-    +------------------+------------+
-    | account_number   | employer   |
-    |------------------+------------|
-    | 18               | null       |
-    +------------------+------------+
-
-### EXISTS
-
-OpenSearch does not differentiate between null and missing. Thus, a function such as \`ismissing\` or \`isnotmissing\` cannot be used to test if a field exists or not. The \`isnull\` or \`isnotnull\` functions can be used for this purpose.
-
-#### Example
-
-    os> source=accounts | where isnull(email) | fields account_number, email
-    fetched rows / total rows = 1/1
-    +------------------+---------+
-    | account_number   | email   |
-    |------------------+---------|
-    | 13               | null    |
-    +------------------+---------+
-
-### IFNULL
-
-The \`ifnull(field1, field2)\` function returns the value in the first field if it is not null; otherwise, it returns the value in the second field.
-
-**Argument type:** All supported data types (Note that the semantic check will fail if the parameters are different types.)
-
-**Return type:** Any
-
-#### Example
-
-    os> source=accounts | eval result = ifnull(employer, 'default') | fields result, employer, firstname
-    fetched rows / total rows = 4/4
-    +----------+------------+-------------+
-    | result   | employer   | firstname   |
-    |----------+------------+-------------|
-    | Pyrami   | Pyrami     | Amber       |
-    | Netagy   | Netagy     | Hattie      |
-    | Quility  | Quility    | Nanette     |
-    | default  | null       | Dale        |
-    +----------+------------+-------------+
-
-### NULLIF
-
-The \`nullif(field1, field2)\` function returns \`null\` if the values in both fields are identical. If the values differ, the function returns the value in the first field (field1).
-
-**Argument type:** All supported data types (Note that the semantic check will fail if the parameters are different types.)
-
-**Return type:** Any
-
-#### Example
-
-    os> source=accounts | eval result = nullif(employer, 'Pyrami') | fields result, employer, firstname
-    fetched rows / total rows = 4/4
-    +----------+------------+-------------+
-    | result   | employer   | firstname   |
-    |----------+------------+-------------|
-    | null     | Pyrami     | Amber       |
-    | Netagy   | Netagy     | Hattie      |
-    | Quility  | Quility    | Nanette     |
-    | null     | null       | Dale        |
-    +----------+------------+-------------+
-
-### ISNULL
-
-The \`isnull(field1, field2)\` function checks for null values and returns \`null\` if the values in both fields are identical. If the values differ, the function returns the value in the first field (field1).
-
-**Argument type:** All supported data types
-
-**Return type:** Any
-
-#### Example
-
-    os> source=accounts | eval result = isnull(employer) | fields result, employer, firstname
-    fetched rows / total rows = 4/4
-    +----------+------------+-------------+
-    | result   | employer   | firstname   |
-    |----------+------------+-------------|
-    | False    | Pyrami     | Amber       |
-    | False    | Netagy     | Hattie      |
-    | False    | Quility    | Nanette     |
-    | True     | null       | Dale        |
-    +----------+------------+-------------+
-
-### IF
-
-The \`if(condition, expr1, expr2)\` function returns \`expr1\` if \`condition\` is \`true\`, and \`expr2\` otherwise.
-
-**Argument type:** All supported data types (Note that the semantic check will fail if \`expr1\` and \`expr2\` have different types.)
-
-**Return type:** Any
-
-Example:
-
-    os> source=accounts | eval result = if(true, firstname, lastname) | fields result, firstname, lastname
-    fetched rows / total rows = 4/4
-    +----------+-------------+------------+
-    | result   | firstname   | lastname   |
-    |----------+-------------+------------|
-    | Amber    | Amber       | Duke       |
-    | Hattie   | Hattie      | Bond       |
-    | Nanette  | Nanette     | Bates      |
-    | Dale     | Dale        | Adams      |
-    +----------+-------------+------------+
-
-    os> source=accounts | eval result = if(false, firstname, lastname) | fields result, firstname, lastname
-    fetched rows / total rows = 4/4
-    +----------+-------------+------------+
-    | result   | firstname   | lastname   |
-    |----------+-------------+------------|
-    | Duke     | Amber       | Duke       |
-    | Bond     | Hattie      | Bond       |
-    | Bates    | Nanette     | Bates      |
-    | Adams    | Dale        | Adams      |
-    +----------+-------------+------------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/datetime.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/datetime.ts
deleted file mode 100644
index 5b2ca67f50c2..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/datetime.ts
+++ /dev/null
@@ -1,537 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const datetimeFunction = `## Datetime
----
-
-### Datetime functions
-
-PPL functions use the search capabilities of the OpenSearch engine. However, these functions don't execute directly within the OpenSearch plugin's memory. Instead, they facilitate the global filtering of query results based on specific conditions, such as a \`WHERE\` or \`HAVING\` clause. 
-
-The following sections describe the \`datetime\` PPL functions.
-
-### ADDDATE
-
-The \`adddate\` function add a time interval to a date. It supports two forms: adding a specified interval using \`INTERVAL\` keyword or adding an integer number of days directly.
-
-**Argument type:** \`DATE/DATETIME/TIMESTAMP/STRING, INTERVAL/LONG\`
-
-**Return type:** \`(DATE/DATETIME/TIMESTAMP/STRING, INTERVAL) -&gt; DATETIME\`, \`(DATE, LONG) -&gt; DATE\`, \`(DATETIME/TIMESTAMP/STRING, LONG) -&gt; DATETIME\`
-
-**Synonyms**: \`[DATE\_ADD](#date_add)\`
-
-#### Example
-
-    os> source=people | eval \`ADDDATE(DATE('2020-08-26'), INTERVAL 1 HOUR)\` = ADDDATE(DATE('2020-08-26'), INTERVAL 1 HOUR), \`ADDDATE(DATE('2020-08-26'), 1)\` = ADDDATE(DATE('2020-08-26'), 1), \`ADDDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)\` = ADDDATE(TIMESTAMP('2020-08-26 01:01:01'), 1) | fields \`ADDDATE(DATE('2020-08-26'), INTERVAL 1 HOUR)\`, \`ADDDATE(DATE('2020-08-26'), 1)\`, \`ADDDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)\`
-    fetched rows / total rows = 1/1
-    +------------------------------------------------+----------------------------------+------------------------------------------------+
-    | ADDDATE(DATE('2020-08-26'), INTERVAL 1 HOUR)   | ADDDATE(DATE('2020-08-26'), 1)   | ADDDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)   |
-    |------------------------------------------------+----------------------------------+------------------------------------------------|
-    | 2020-08-26 01:00:00                            | 2020-08-27                       | 2020-08-27 01:01:01                            |
-    +------------------------------------------------+----------------------------------+------------------------------------------------+
-
-#### DATE
-
-The \`date(expr)\` function converts strings to date types and extracts the date portion from existing date, datetime, and timestamp values.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`DATE\`
-
-#### Example
-
-    >od source=people | eval \`DATE('2020-08-26')\` = DATE('2020-08-26'), \`DATE(TIMESTAMP('2020-08-26 13:49:00'))\` = DATE(TIMESTAMP('2020-08-26 13:49:00')) | fields \`DATE('2020-08-26')\`, \`DATE(TIMESTAMP('2020-08-26 13:49:00'))\`
-    fetched rows / total rows = 1/1
-    +----------------------+------------------------------------------+
-    | DATE('2020-08-26')   | DATE(TIMESTAMP('2020-08-26 13:49:00'))   |
-    |----------------------+------------------------------------------|
-    | DATE '2020-08-26'    | DATE '2020-08-26'                        |
-    +----------------------+------------------------------------------+
-
-#### DATE\_ADD
-
-The \`date\_add(date, INTERVAL expr unit)\` or \`date\_add(date, expr)\` adds
-the time interval specified by \`expr\` to a given \`date\`. It supports adding a specific interval and adding an integer number of days.
-
-**Argument type:** \`DATE/DATETIME/TIMESTAMP/STRING, INTERVAL/LONG\`
-
-**Return type:** \`DATE/DATETIME/TIMESTAMP/STRING, INTERVAL -&gt;\`,  \`DATETIME\`, \`DATE, LONG -&gt; DATE\`, \`DATETIME/TIMESTAMP/STRING, LONG -&gt; DATETIME\`
-
-**Synonyms:** \`[ADDDATE](#adddate)\`
-
-#### Example
-
-    os> source=people | eval \`DATE_ADD(DATE('2020-08-26'), INTERVAL 1 HOUR)\` = DATE_ADD(DATE('2020-08-26'), INTERVAL 1 HOUR), \`DATE_ADD(DATE('2020-08-26'), 1)\` = DATE_ADD(DATE('2020-08-26'), 1), \`DATE_ADD(TIMESTAMP('2020-08-26 01:01:01'), 1)\` = DATE_ADD(TIMESTAMP('2020-08-26 01:01:01'), 1) | fields \`DATE_ADD(DATE('2020-08-26'), INTERVAL 1 HOUR)\`, \`DATE_ADD(DATE('2020-08-26'), 1)\`, \`DATE_ADD(TIMESTAMP('2020-08-26 01:01:01'), 1)\`
-    fetched rows / total rows = 1/1
-    +-------------------------------------------------+-----------------------------------+-------------------------------------------------+
-    | DATE_ADD(DATE('2020-08-26'), INTERVAL 1 HOUR)   | DATE_ADD(DATE('2020-08-26'), 1)   | DATE_ADD(TIMESTAMP('2020-08-26 01:01:01'), 1)   |
-    |-------------------------------------------------+-----------------------------------+-------------------------------------------------|
-    | 2020-08-26 01:00:00                             | 2020-08-27                        | 2020-08-27 01:01:01                             |
-    +-------------------------------------------------+-----------------------------------+-------------------------------------------------+
-
-### DATE\_FORMAT
-
-The \`date\_format(date, format)\` function takes a date and a format string as arguments and returns the formatted date string according to the specified format.
-
-The following table lists the available specifier arguments.
-
-| Specifier | Description |
-|-----------|-----------------------------------------------------------|
-| %a        | Abbreviated weekday name (Sun..Sat) |
-| %b        | Abbreviated month name (Jan..Dec)   |
-| %c        | Month, numeric (0..12)              |
-| %D        | Day of the month with English suffix (0th, 1st, 2nd, 3rd, …) |
-| %d        | Day of the month, numeric (00..31)  |
-| %e        | Day of the month, numeric (0..31)   |
-| %f        | Microseconds (000000..999999)       |
-| %H        | Hour (00..23)                       |
-| %h        | Hour (01..12)                       |
-| %I        | Hour (01..12)                       |
-| %i        | Minutes, numeric (00..59)           |
-| %j        | Day of year (001..366)              |
-| %k        | Hour (0..23)                        |
-| %l        | Hour (1..12)                        |
-| %M        | Month name (January..December)      |
-| %m        | Month, numeric (00..12)             |
-| %p        | AM or PM                            |
-| %r        | Time, 12-hour (hh:mm&#58;ss followed by AM or PM) |
-| %S        | Seconds (00..59)                    |
-| %s        | Seconds (00..59)                    |
-| %T        | Time, 24-hour (hh:mm:ss)            |
-| %U        | Week (00..53), where Sunday is the first day of the week; WEEK() mode 0                                            |
-| %u        | Week (00..53), where Monday is the first day of the week; WEEK() mode 1                                            |
-| %V        | Week (01..53), where Sunday is the first day of the week; WEEK() mode 2; used with %X                              |
-| %v        | Week (01..53), where Monday is the first day of the week; WEEK() mode 3; used with %x                              |
-| %W        | Weekday name (Sunday..Saturday)     |
-| %w        | Day of the week (0=Sunday..6&#61;Saturday) |
-| %X        | Year for the week where Sunday is the first day of the week, numeric, four digits; used with %V                |
-| %x        | Year for the week, where Monday is the first day of the week, numeric, four digits; used with %v                |
-| %Y        | Year, numeric, four digits          |
-| %y        | Year, numeric (two digits)          |
-| %%        | A literal % character               |
-| %x        | x, for any “x” not listed above     |
-
-**Argument type:** STRING/DATE/DATETIME/TIMESTAMP, STRING
-
-**Return type:** STRING
-
-#### Example
-
-    >od source=people | eval \`DATE_FORMAT('1998-01-31 13:14:15.012345', '%T.%f')\` = DATE_FORMAT('1998-01-31 13:14:15.012345', '%T.%f'), \`DATE_FORMAT(TIMESTAMP('1998-01-31 13:14:15.012345'), '%Y-%b-%D %r')\` = DATE_FORMAT(TIMESTAMP('1998-01-31 13:14:15.012345'), '%Y-%b-%D %r') | fields \`DATE_FORMAT('1998-01-31 13:14:15.012345', '%T.%f')\`, \`DATE_FORMAT(TIMESTAMP('1998-01-31 13:14:15.012345'), '%Y-%b-%D %r')\`
-    fetched rows / total rows = 1/1
-    +-----------------------------------------------+----------------------------------------------------------------+
-    | DATE('1998-01-31 13:14:15.012345', '%T.%f')   | DATE(TIMESTAMP('1998-01-31 13:14:15.012345'), '%Y-%b-%D %r')   |
-    |-----------------------------------------------+----------------------------------------------------------------|
-    | '13:14:15.012345'                             | '1998-Jan-31st 01:14:15 PM'                                    |
-    +-----------------------------------------------+----------------------------------------------------------------+
-
-### DATE\_SUB
-
-**Description**
-
-Usage: date\_sub(date, INTERVAL expr unit)/ date\_sub(date, expr)
-subtracts the time interval expr from date
-
-Argument type: \`DATE/DATETIME/TIMESTAMP/STRING, INTERVAL/LONG\`
-
-**Return type:** \`DATE/DATETIME/TIMESTAMP/STRING, INTERVAL -&gt; DATETIME\`, \`DATE, LONG -&gt; DATE\`, \`DATETIME/TIMESTAMP/STRING, LONG -&gt; DATETIME\`
-
-**Synonyms:** \`[SUBDATE](#subdate)\`
-
-#### Example
-
-    os> source=people | eval \`DATE_SUB(DATE('2008-01-02'), INTERVAL 31 DAY)\` = DATE_SUB(DATE('2008-01-02'), INTERVAL 31 DAY), \`DATE_SUB(DATE('2020-08-26'), 1)\` = DATE_SUB(DATE('2020-08-26'), 1), \`DATE_SUB(TIMESTAMP('2020-08-26 01:01:01'), 1)\` = DATE_SUB(TIMESTAMP('2020-08-26 01:01:01'), 1) | fields \`DATE_SUB(DATE('2008-01-02'), INTERVAL 31 DAY)\`, \`DATE_SUB(DATE('2020-08-26'), 1)\`, \`DATE_SUB(TIMESTAMP('2020-08-26 01:01:01'), 1)\`
-    fetched rows / total rows = 1/1
-    +-------------------------------------------------+-----------------------------------+-------------------------------------------------+
-    | DATE_SUB(DATE('2008-01-02'), INTERVAL 31 DAY)   | DATE_SUB(DATE('2020-08-26'), 1)   | DATE_SUB(TIMESTAMP('2020-08-26 01:01:01'), 1)   |
-    |-------------------------------------------------+-----------------------------------+-------------------------------------------------|
-    | 2007-12-02                                      | 2020-08-25                        | 2020-08-25 01:01:01                             |
-    +-------------------------------------------------+-----------------------------------+-------------------------------------------------+
-
-### DAY
-
-The \`day(date)\` function retrieves the day of the month (1-31) for a provided \`date\`. Note that dated with a value of 0, such as "0000-00-00" or "2008-00-00", are considered invalid. 
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-**Synonyms:** \`DAYOFMONTH\`
-
-#### Example
-
-    os> source=people | eval \`DAY(DATE('2020-08-26'))\` = DAY(DATE('2020-08-26')) | fields \`DAY(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +---------------------------+
-    | DAY(DATE('2020-08-26'))   |
-    |---------------------------|
-    | 26                        |
-    +---------------------------+
-
-### DAYNAME
-
-The \`dayname(date)\` function retrieves the full name of the weekday, for example, Monday, Tuesday, and so forth, for a given \`date\`.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`DAYNAME(DATE('2020-08-26'))\` = DAYNAME(DATE('2020-08-26')) | fields \`DAYNAME(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +-------------------------------+
-    | DAYNAME(DATE('2020-08-26'))   |
-    |-------------------------------|
-    | Wednesday                     |
-    +-------------------------------+
-
-### DAYOFMONTH
-
-The \`dayofmonth(date)\` function retrieves the day of the month (1-31) for a provided \`date\`. Note that dated with a value of 0, such as "0000-00-00" or "2008-00-00", are considered invalid. 
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-**Synonyms:** \`DAY\`
-
-#### Example
-
-    os> source=people | eval \`DAYOFMONTH(DATE('2020-08-26'))\` = DAYOFMONTH(DATE('2020-08-26')) | fields \`DAYOFMONTH(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +----------------------------------+
-    | DAYOFMONTH(DATE('2020-08-26'))   |
-    |----------------------------------|
-    | 26                               |
-    +----------------------------------+
-
-### DAYOFWEEK
-
-The \`dayofweek(date)\` retrieves the numerical index (1-7) representing the weekday for a given \`date\`, where 1 corresponds to Sunday and 7 corresponds to Saturday.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`DAYOFWEEK(DATE('2020-08-26'))\` = DAYOFWEEK(DATE('2020-08-26')) | fields \`DAYOFWEEK(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +---------------------------------+
-    | DAYOFWEEK(DATE('2020-08-26'))   |
-    |---------------------------------|
-    | 4                               |
-    +---------------------------------+
-
-### DAYOFYEAR
-
-The \`dayofyear(date)\` function retrieves the day of the year for a given \`date\`, ranging from 1 to 366.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`DAYOFYEAR(DATE('2020-08-26'))\` = DAYOFYEAR(DATE('2020-08-26')) | fields \`DAYOFYEAR(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +---------------------------------+
-    | DAYOFYEAR(DATE('2020-08-26'))   |
-    |---------------------------------|
-    | 239                             |
-    +---------------------------------+
-
-### FROM\_DAYS
-
-The \`from\_days(N)\` function retrieves the date value corresponding to the provided day number \`N\`.
-
-**Argument type:** \`INTEGER/LONG\`
-
-**Return type:** \`DATE\`
-
-#### Example
-
-    os> source=people | eval \`FROM_DAYS(733687)\` = FROM_DAYS(733687) | fields \`FROM_DAYS(733687)\`
-    fetched rows / total rows = 1/1
-    +---------------------+
-    | FROM_DAYS(733687)   |
-    |---------------------|
-    | 2008-10-07          |
-    +---------------------+
-
-### HOUR
-
-The \`hour(time)\` function extracts the hour value from a given \`time\`. Unlike the typical time-of-day format wher hours range from 0 to 23, the \`time\` input can have a larger range. Therefore, the \`hour(time)\` function may return values exceeding 23.
-
-**Argument type:** \`STRING/TIME/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`HOUR(TIME('01:02:03'))\` = HOUR(TIME('01:02:03')) | fields \`HOUR(TIME('01:02:03'))\`
-    fetched rows / total rows = 1/1
-    +--------------------------+
-    | HOUR(TIME('01:02:03'))   |
-    |--------------------------|
-    | 1                        |
-    +--------------------------+
-
-### MAKETIME
-
-**Function signature:** \`MAKETIME(INTEGER, INTEGER, INTEGER) -&gt; DATE\`
-
-### MICROSECOND
-
-The \`microsecond(expr)\` function retrieves the microsecond portion (0-999999) from a given \`time\` or \`datetime\` expression.
-
-**Argument type:** \`STRING/TIME/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`MICROSECOND(TIME('01:02:03.123456'))\` = MICROSECOND(TIME('01:02:03.123456')) | fields \`MICROSECOND(TIME('01:02:03.123456'))\`
-    fetched rows / total rows = 1/1
-    +----------------------------------------+
-    | MICROSECOND(TIME('01:02:03.123456'))   |
-    |----------------------------------------|
-    | 123456                                 |
-    +----------------------------------------+
-
-### MINUTE
-
-The \`minute(time)\` extracts the minute value (0-59) from a given \`time\` expression.
-
-**Argument type:** \`STRING/TIME/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`MINUTE(TIME('01:02:03'))\` =  MINUTE(TIME('01:02:03')) | fields \`MINUTE(TIME('01:02:03'))\`
-    fetched rows / total rows = 1/1
-    +----------------------------+
-    | MINUTE(TIME('01:02:03'))   |
-    |----------------------------|
-    | 2                          |
-    +----------------------------+
-
-### MONTH
-
-The \`month(date)\` function extracts the month (1-12) from a valid \`date\` value. However, invalid dates containing 0 values for the month, such as "0000-00-00" or "2008-00-00" are considered invalid.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`MONTH(DATE('2020-08-26'))\` =  MONTH(DATE('2020-08-26')) | fields \`MONTH(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +-----------------------------+
-    | MONTH(DATE('2020-08-26'))   |
-    |-----------------------------|
-    | 8                           |
-    +-----------------------------+
-
-### MONTHNAME
-
-The \`monthname(date)\` function retrieves the full name of the month, for example, January, February, and so forth, for a given \`date\`.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`MONTHNAME(DATE('2020-08-26'))\` = MONTHNAME(DATE('2020-08-26')) | fields \`MONTHNAME(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +---------------------------------+
-    | MONTHNAME(DATE('2020-08-26'))   |
-    |---------------------------------|
-    | August                          |
-    +---------------------------------+
-
-### NOW
-
-**Function signature:** NOW() -&gt; DATE
-
-### QUARTER
-
-The \`quarter(date)\` function retrieves the quarter (1-4) for a given \`date\`.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`QUARTER(DATE('2020-08-26'))\` = QUARTER(DATE('2020-08-26')) | fields \`QUARTER(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +-------------------------------+
-    | QUARTER(DATE('2020-08-26'))   |
-    |-------------------------------|
-    | 3                             |
-    +-------------------------------+
-
-### SECOND
-
-The \`second(time)\` function extracts the second value (0-59) from a given \`time\` expression. 
-
-**Argument type:** \`STRING/TIME/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`SECOND(TIME('01:02:03'))\` = SECOND(TIME('01:02:03')) | fields \`SECOND(TIME('01:02:03'))\`
-    fetched rows / total rows = 1/1
-    +----------------------------+
-    | SECOND(TIME('01:02:03'))   |
-    |----------------------------|
-    | 3                          |
-    +----------------------------+
-
-### SUBDATE
-
-The \`subdate(date, INTERVAL expr unit)\` or \`subdate(date, expr)\` function subtracts a time interval from a date.
-
-**Argument type:** \`DATE/DATETIME/TIMESTAMP/STRING, INTERVAL/LONG\`
-
-**Return type:** \`DATE/DATETIME/TIMESTAMP/STRING, INTERVAL -&gt; DATETIME\`, \`DATE, LONG -&gt; DATE\`, \`DATETIME/TIMESTAMP/STRING, LONG -&gt; DATETIME\`
-
-**Synonyms:** \`[DATE\_SUB](#date_sub)\`
-
-#### Example
-
-    os> source=people | eval \`SUBDATE(DATE('2008-01-02'), INTERVAL 31 DAY)\` = SUBDATE(DATE('2008-01-02'), INTERVAL 31 DAY), \`SUBDATE(DATE('2020-08-26'), 1)\` = SUBDATE(DATE('2020-08-26'), 1), \`SUBDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)\` = SUBDATE(TIMESTAMP('2020-08-26 01:01:01'), 1) | fields \`SUBDATE(DATE('2008-01-02'), INTERVAL 31 DAY)\`, \`SUBDATE(DATE('2020-08-26'), 1)\`, \`SUBDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)\`
-    fetched rows / total rows = 1/1
-    +------------------------------------------------+----------------------------------+------------------------------------------------+
-    | SUBDATE(DATE('2008-01-02'), INTERVAL 31 DAY)   | SUBDATE(DATE('2020-08-26'), 1)   | SUBDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)   |
-    |------------------------------------------------+----------------------------------+------------------------------------------------|
-    | 2007-12-02                                     | 2020-08-25                       | 2020-08-25 01:01:01                            |
-    +------------------------------------------------+----------------------------------+------------------------------------------------+
-
-### TIME
-
-The \`time(expr)\` function has dual functionality. If \`expr\` is a string, it contructs a \`time\` object from the provided time value format. Conversly, for input of the type \`date\`, \`datetime\`. \`time\`, or \`timestamp\`, it extracts and returns the pure time component from the given expression.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIME/TIMESTAMP\`
-
-**Return type:** \`TIME\`
-
-#### Example
-
-    >od source=people | eval \`TIME('13:49:00')\` = TIME('13:49:00'), \`TIME(TIMESTAMP('2020-08-26 13:49:00'))\` = TIME(TIMESTAMP('2020-08-26 13:49:00')) | fields \`TIME('13:49:00')\`, \`TIME(TIMESTAMP('2020-08-26 13:49:00'))\`
-    fetched rows / total rows = 1/1
-    +--------------------+------------------------------------------+
-    | TIME('13:49:00')   | TIME(TIMESTAMP('2020-08-26 13:49:00'))   |
-    |--------------------+------------------------------------------|
-    | TIME '13:49:00'    | TIME '13:49:00'                          |
-    +--------------------+------------------------------------------+
-
-### TIME\_TO\_SEC
-
-The \`time\_to\_sec(time)\` function transforms a given \`time\` value into its corresponding number of seconds. 
-
-**Argument type:** \`STRING/TIME/DATETIME/TIMESTAMP\`
-
-**Return type:** \`LONG\`
-
-#### Example
-
-    os> source=people | eval \`TIME_TO_SEC(TIME('22:23:00'))\` = TIME_TO_SEC(TIME('22:23:00')) | fields \`TIME_TO_SEC(TIME('22:23:00'))\`
-    fetched rows / total rows = 1/1
-    +---------------------------------+
-    | TIME_TO_SEC(TIME('22:23:00'))   |
-    |---------------------------------|
-    | 80580                           |
-    +---------------------------------+
-
-### TIMESTAMP
-
-The \`timestamp(expr)\` function serves a dual purpose: it can both construct a timestamp object from a string representing a time value or act as a caster, converting exsiting date, datetime, or timestamp objects to a standardized timestamp type with the default UTC time zone.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`TIMESTAMP\`
-
-#### Example
-
-    >od source=people | eval \`TIMESTAMP('2020-08-26 13:49:00')\` = TIMESTAMP('2020-08-26 13:49:00') | fields \`TIMESTAMP('2020-08-26 13:49:00')\`
-    fetched rows / total rows = 1/1
-    +------------------------------------+
-    | TIMESTAMP('2020-08-26 13:49:00')   |
-    |------------------------------------|
-    | TIMESTAMP '2020-08-26 13:49:00     |
-    +------------------------------------+
-
-### TO\_DAYS
-
-The \`to\_days(date)\` function calculates the number of days that have elapsed since the year 0 for a given \`date\`. If the provided date is invalid, it returns \`NULL\`.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`LONG\`
-
-#### Example
-
-    os> source=people | eval \`TO_DAYS(DATE('2008-10-07'))\` = TO_DAYS(DATE('2008-10-07')) | fields \`TO_DAYS(DATE('2008-10-07'))\`
-    fetched rows / total rows = 1/1
-    +-------------------------------+
-    | TO_DAYS(DATE('2008-10-07'))   |
-    |-------------------------------|
-    | 733687                        |
-    +-------------------------------+
-
-### WEEK
-
-The \`week(date\[, mode\])\` function extracts the week number for a given \`date\`. If the mode argument is omitted, the default mode 0 is used. The following table lists the mode arguments.
-
-| Mode | First day of week | Range | Week 1 is the first week …    |
-|------|-------------------|-------|-------------------------------|
-| 0    | Sunday            | 0-53  | with a Sunday in this year    |
-| 1    | Monday            | 0-53  | with 4 or more days this year |
-| 2    | Sunday            | 1-53  | with a Sunday in this year    |
-| 3    | Monday            | 1-53  | with 4 or more days this year |
-| 4    | Sunday            | 0-53  | with 4 or more days this year |
-| 5    | Monday            | 0-53  | with a Monday in this year    |
-| 6    | Sunday            | 1-53  | with 4 or more days this year |
-| 7    | Monday            | 1-53  | with a Monday in this year    |
-
-**Argument type:** \`DATE/DATETIME/TIMESTAMP/STRING\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    >od source=people | eval \`WEEK(DATE('2008-02-20'))\` = WEEK(DATE('2008-02-20')), \`WEEK(DATE('2008-02-20'), 1)\` = WEEK(DATE('2008-02-20'), 1) | fields \`WEEK(DATE('2008-02-20'))\`, \`WEEK(DATE('2008-02-20'), 1)\`
-    fetched rows / total rows = 1/1
-    +----------------------------+-------------------------------+
-    | WEEK(DATE('2008-02-20'))   | WEEK(DATE('2008-02-20'), 1)   |
-    |----------------------------|-------------------------------|
-    | 7                          | 8                             |
-    +----------------------------+-------------------------------+
-
-### YEAR
-
-The \`year(date)\` function extracts the year component from a given \`date\` value. However, it only returns valid years within the range of 1000 to 9999. If the provided date is invalid or falls outside this range, the function returns 0.
-
-**Argument type:** \`STRING/DATE/DATETIME/TIMESTAMP\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`YEAR(DATE('2020-08-26'))\` = YEAR(DATE('2020-08-26')) | fields \`YEAR(DATE('2020-08-26'))\`
-    fetched rows / total rows = 1/1
-    +----------------------------+
-    | YEAR(DATE('2020-08-26'))   |
-    |----------------------------|
-    | 2020                       |
-    +----------------------------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/full_text_search.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/full_text_search.ts
deleted file mode 100644
index 7f31bae65166..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/full_text_search.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const fullTextSearchFunction = `## Full-text search
----
-
-### Full-text search function
-
-PPL functions use the search capabilities of the OpenSearch engine. However, these functions don't execute directly within the OpenSearch plugin's memory. Instead, they facilitate the global filtering of query results based on specific conditions, such as a \`WHERE\` or \`HAVING\` clause.
-
-Full-text search allows for searching by full-text queries. For details about full-text search in OpenSearch, see the [Full-text search](https://opensearch.org/docs/latest/search-plugins/sql/full-text/) documentation.
-
-### MATCH
-
-The \`match\` function maps user-defined criteria to OpenSearch queries, returning documents that match specific text, number, date, or Boolean values. 
-
-The function signature is \`match(field_expression, query_expression[, option=<option_value>]*)\`.
-
-The available parameters are:
-
--   analyzer
--   auto\_generate\_synonyms\_phrase
--   fuzziness
--   max\_expansions
--   prefix\_length
--   fuzzy\_transpositions
--   fuzzy\_rewrite
--   lenient
--   operator
--   minimum\_should\_match
--   zero\_terms\_query
--   boost
-
-**Example 1: Using specific expressions and default values**
-
-The following example PPL query uses only the \`field\` and \`query\` expressions, with all other parameters set to their default values:
-
-    os> source=accounts | where match(address, 'Street') | fields lastname, address;
-    fetched rows / total rows = 2/2
-    +------------+--------------------+
-    | lastname   | address            |
-    |------------+--------------------|
-    | Bond       | 671 Bristol Street |
-    | Bates      | 789 Madison Street |
-    +------------+--------------------+
-
-**Example 2: Setting custom values for optional parameters**
-
-The following example PPL query sets custom values for the optional parameters:
-
-    os> source=accounts | where match(firstname, 'Hattie', operator='AND', boost=2.0) | fields lastname;
-    fetched rows / total rows = 1/1
-    +------------+
-    | lastname   |
-    |------------|
-    | Bond       |
-    +------------+
-
-### Limitations
-
-The full-text search functions can be executed only in [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/), not in-memory. 
-
-To ensure optimal performance and avoid translation issues with complex full-text searhes, place them as clauses within the search command.
-
-#### Example
-
-The following is an example complex query that could fail because it is difficult to translate to query DSL: 
-
-    \`search source = people | rename firstname as name | dedup account_number | fields name, account_number, balance, employer | where match(employer, 'Open Search') | stats count() by city\` 
-
-To optimize full-text search performance, rewrite the query by placing the \`WHERE\` clause with the full-text search function as the second command after the \`SEARCH\` command. This ensures the full-text search gets pushed down to query DSL. The following is an example query: 
-
-    \`search source = people | where match(employer, 'Open Search') | rename firstname as name | dedup account_number | fields name, account_number, balance, employer | stats count() by city\` 
-
-For details about query engine optimization, see the [Optimizations](https://github.com/opensearch-project/sql/blob/22924b13d9cb46759c8d213a7ce903effe06ab47/docs/user/optimization/optimization.rst) developer documentation on GitHub.
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/index.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/index.ts
deleted file mode 100644
index e061c6188e43..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export { datetimeFunction } from './datetime';
-export { conditionFunction } from './condition';
-export { mathFunction } from './math';
-export { stringFunction } from './string';
-export { fullTextSearchFunction } from './full_text_search';
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/math.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/math.ts
deleted file mode 100644
index ed189c3eb42c..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/math.ts
+++ /dev/null
@@ -1,518 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const mathFunction = `## Math
----
-
-### Math functions
-
-PPL functions use the search capabilities of the OpenSearch engine. However, these functions don't execute directly within the OpenSearch plugin's memory. Instead, they facilitate the global filtering of query results based on specific conditions, such as a \`WHERE\` or \`HAVING\` clause. 
-
-The following sections describe the \`math\` PPL functions.
-
-### ABS
-
-The \`abs\` function is an absolute value function. 
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`ABS(-1)\` = ABS(-1) | fields \`ABS(-1)\`
-    fetched rows / total rows = 1/1
-    +-----------+
-    | ABS(-1)   |
-    |-----------|
-    | 1         |
-    +-----------+
-
-### ACOS
-
-The \`acos(x)\` function is an arc cosine function. The function expects values in the range of \`-1\` to \`1\` and returns \`NULL\` if the values aren't in that range.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`ACOS(0)\` = ACOS(0) | fields \`ACOS(0)\`
-    fetched rows / total rows = 1/1
-    +--------------------+
-    | ACOS(0)            |
-    |--------------------|
-    | 1.5707963267948966 |
-    +--------------------+
-
-### ASIN
-
-The \`asin(x)\` function is an arc sine function. The function expects values in the range of \`-1\` to \`1\` and returns \`NULL\` if the values aren't in that range.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`ASIN(0)\` = ASIN(0) | fields \`ASIN(0)\`
-    fetched rows / total rows = 1/1
-    +-----------+
-    | ASIN(0)   |
-    |-----------|
-    | 0.0       |
-    +-----------+
-
-### ATAN
-
-The \`atan(x)\` function is an arc tangent function that returns an arc tangent of a value \`x\`.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`ATAN(2)\` = ATAN(2), \`ATAN(2, 3)\` = ATAN(2, 3) | fields \`ATAN(2)\`, \`ATAN(2, 3)\`
-    fetched rows / total rows = 1/1
-    +--------------------+--------------------+
-    | ATAN(2)            | ATAN(2, 3)         |
-    |--------------------+--------------------|
-    | 1.1071487177940904 | 0.5880026035475675 |
-    +--------------------+--------------------+
-
-### ATAN2
-
-The \`atan2(y, x)\` function is an arc tangent function that calculates the angle from a specified point to the coordinate origin as measured from the positive x-axis.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`ATAN2(2, 3)\` = ATAN2(2, 3) | fields \`ATAN2(2, 3)\`
-    fetched rows / total rows = 1/1
-    +--------------------+
-    | ATAN2(2, 3)        |
-    |--------------------|
-    | 0.5880026035475675 |
-    +--------------------+
-
-### CEIL
-
-The \`ceil(x)\` function returns the smallest integer value that is greater than or equal to the specified value.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`CEIL(2.75)\` = CEIL(2.75) | fields \`CEIL(2.75)\`
-    fetched rows / total rows = 1/1
-    +--------------+
-    | CEIL(2.75)   |
-    |--------------|
-    | 3            |
-    +--------------+
-
-### CONV
-
-The \`CONV(x, a, b)\` function converts the number \`x\` from \`a\` base to \`b\` base.
-
-**Argument type:** \`x: STRING, a: INTEGER, b: INTEGER\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`CONV('12', 10, 16)\` = CONV('12', 10, 16), \`CONV('2C', 16, 10)\` = CONV('2C', 16, 10), \`CONV(12, 10, 2)\` = CONV(12, 10, 2), \`CONV(1111, 2, 10)\` = CONV(1111, 2, 10) | fields \`CONV('12', 10, 16)\`, \`CONV('2C', 16, 10)\`, \`CONV(12, 10, 2)\`, \`CONV(1111, 2, 10)\`
-    fetched rows / total rows = 1/1
-    +----------------------+----------------------+-------------------+---------------------+
-    | CONV('12', 10, 16)   | CONV('2C', 16, 10)   | CONV(12, 10, 2)   | CONV(1111, 2, 10)   |
-    |----------------------+----------------------+-------------------+---------------------|
-    | c                    | 44                   | 1100              | 15                  |
-    +----------------------+----------------------+-------------------+---------------------+
-
-### COS
-
-The \`cos(x)\` function is a cosine function, with \`x\` in radians.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`COS(0)\` = COS(0) | fields \`COS(0)\`
-    fetched rows / total rows = 1/1
-    +----------+
-    | COS(0)   |
-    |----------|
-    | 1.0      |
-    +----------+
-
-### COT
-
-The \`cot(x)\` function is a cotangent function. An out-of-range error is returned if \`x\` equals \`0\`.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`COT(1)\` = COT(1) | fields \`COT(1)\`
-    fetched rows / total rows = 1/1
-    +--------------------+
-    | COT(1)             |
-    |--------------------|
-    | 0.6420926159343306 |
-    +--------------------+
-
-### CRC32
-
-The \`crc32\` function calculates the cyclic redundancy check (CRC) value of a given string as a 32-bit unsigned value. 
-
-**Argument type:** \`STRING\`
-
-**Return type:** \`LONG\`
-
-#### Example
-
-    os> source=people | eval \`CRC32('MySQL')\` = CRC32('MySQL') | fields \`CRC32('MySQL')\`
-    fetched rows / total rows = 1/1
-    +------------------+
-    | CRC32('MySQL')   |
-    |------------------|
-    | 3259397556       |
-    +------------------+
-
-### DEGREES
-
-The \`degrees(x)\` function converts \`x\` from radians to degrees.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`DEGREES(1.57)\` = DEGREES(1.57) | fields \`DEGREES(1.57)\`
-    fetched rows / total rows  = 1/1
-    +-------------------+
-    | DEGREES(1.57)     |
-    |-------------------|
-    | 89.95437383553924 |
-    +-------------------+
-
-### E
-
-The \`E()\` function returns Euler's number.
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`E()\` = E() | fields \`E()\`
-    fetched rows / total rows = 1/1
-    +-------------------+
-    | E()               |
-    |-------------------|
-    | 2.718281828459045 |
-    +-------------------+
-
-### EXP
-
-The \`exp(x)\` function returns \`e\` raised to the power of \`x\`.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`EXP(2)\` = EXP(2) | fields \`EXP(2)\`
-    fetched rows / total rows = 1/1
-    +------------------+
-    | EXP(2)           |
-    |------------------|
-    | 7.38905609893065 |
-    +------------------+
-
-### FLOOR
-
-The \`floor(x)\` function returns the largest integer less than or equal to the specified value.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`FLOOR(2.75)\` = FLOOR(2.75) | fields \`FLOOR(2.75)\`
-    fetched rows / total rows = 1/1
-    +---------------+
-    | FLOOR(2.75)   |
-    |---------------|
-    | 2             |
-    +---------------+
-
-### LN
-
-The \`ln(x)\` function returns the natural logarithm of \`x\`.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`LN(2)\` = LN(2) | fields \`LN(2)\`
-    fetched rows / total rows = 1/1
-    +--------------------+
-    | LN(2)              |
-    |--------------------|
-    | 0.6931471805599453 |
-    +--------------------+
-
-### LOG
-
-The \`log(x)\` function returns the natural logarithm of \`x\`.
-
-**Argument type: \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`LOG(2)\` = LOG(2), \`LOG(2, 8)\` = LOG(2, 8) | fields \`LOG(2)\`, \`LOG(2, 8)\`
-    fetched rows / total rows = 1/1
-    +--------------------+-------------+
-    | LOG(2)             | LOG(2, 8)   |
-    |--------------------+-------------|
-    | 0.6931471805599453 | 3.0         |
-    +--------------------+-------------+
-
-### LOG2
-
-The \`log2(x)\` function calculates the base-2 logarithm of \`x\`.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`LOG2(8)\` = LOG2(8) | fields \`LOG2(8)\`
-    fetched rows / total rows = 1/1
-    +-----------+
-    | LOG2(8)   |
-    |-----------|
-    | 3.0       |
-    +-----------+
-
-### LOG10
-
-The \`log10(x)\` function calculates the base-10 logarithm of \`x\`.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`LOG10(100)\` = LOG10(100) | fields \`LOG10(100)\`
-    fetched rows / total rows = 1/1
-    +--------------+
-    | LOG10(100)   |
-    |--------------|
-    | 2.0          |
-    +--------------+
-
-### MOD
-
-The \`MOD(n, m)\` function calculates the remainder of the number \`n\` divided by \`m\`.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** If \`m\` is a nonzero value, a type greater in size between types \`n\` and \`m\` is returned. If \`m\` equals \`0\`, \`NULL\` is returned.
-
-#### Example
-
-    os> source=people | eval \`MOD(3, 2)\` = MOD(3, 2), \`MOD(3.1, 2)\` = MOD(3.1, 2) | fields \`MOD(3, 2)\`, \`MOD(3.1, 2)\`
-    fetched rows / total rows = 1/1
-    +-------------+---------------+
-    | MOD(3, 2)   | MOD(3.1, 2)   |
-    |-------------+---------------|
-    | 1           | 1.1           |
-    +-------------+---------------+
-
-### PI
-
-The \`PI()\` function returns the constant pi.
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`PI()\` = PI() | fields \`PI()\`
-    fetched rows / total rows = 1/1
-    +-------------------+
-    | PI()              |
-    |-------------------|
-    | 3.141592653589793 |
-    +-------------------+
-
-### POW
-
-The \`POW(x, y)\` function calculates the value of \`x\` raised to the power of \`y\`. Bad inputs return \`NULL\` results.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-**Synonyms:** \`[POWER](#power)\`
-
-#### Example
-
-    os> source=people | eval \`POW(3, 2)\` = POW(3, 2), \`POW(-3, 2)\` = POW(-3, 2), \`POW(3, -2)\` = POW(3, -2) | fields \`POW(3, 2)\`, \`POW(-3, 2)\`, \`POW(3, -2)\`
-    fetched rows / total rows = 1/1
-    +-------------+--------------+--------------------+
-    | POW(3, 2)   | POW(-3, 2)   | POW(3, -2)         |
-    |-------------+--------------+--------------------|
-    | 9.0         | 9.0          | 0.1111111111111111 |
-    +-------------+--------------+--------------------+
-
-### POWER
-
-The \`POWER(x, y)\` function calculates the value of \`x\` raised to the power of \`y\`. Bad inputs return \`NULL\` results.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-**Synonyms:** \`[POW](#pow)\`
-
-#### Example
-
-    os> source=people | eval \`POWER(3, 2)\` = POWER(3, 2), \`POWER(-3, 2)\` = POWER(-3, 2), \`POWER(3, -2)\` = POWER(3, -2) | fields \`POWER(3, 2)\`, \`POWER(-3, 2)\`, \`POWER(3, -2)\`
-    fetched rows / total rows = 1/1
-    +---------------+----------------+--------------------+
-    | POWER(3, 2)   | POWER(-3, 2)   | POWER(3, -2)       |
-    |---------------+----------------+--------------------|
-    | 9.0           | 9.0            | 0.1111111111111111 |
-    +---------------+----------------+--------------------+
-
-### RADIANS
-
-The \`radians(x)\` function converts \`x\` from degrees to radians.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`RADIANS(90)\` = RADIANS(90) | fields \`RADIANS(90)\`
-    fetched rows / total rows  = 1/1
-    +--------------------+
-    | RADIANS(90)        |
-    |--------------------|
-    | 1.5707963267948966 |
-    +--------------------+
-
-### RAND
-
-The \`RAND()/RAND(N)\` function returns a random floating-point value in the range \`0 &lt;= value &lt; 1.0\`. If integer \`N\` is specified, the seed is initialized prior to execution. One implication of this behavior is that with identical argument \`N\`, \`rand(N)\` returns the same value each time and thus produces a repeatable sequence of column values.
-
-**Argument type:** \`INTEGER\`
-
-**Return type:** \`FLOAT\`
-
-#### Example
-
-    os> source=people | eval \`RAND(3)\` = RAND(3) | fields \`RAND(3)\`
-    fetched rows / total rows = 1/1
-    +------------+
-    | RAND(3)    |
-    |------------|
-    | 0.73105735 |
-    +------------+
-
-### ROUND
-
-The \`ROUND(x, d)\` function rounds the argument \`x\` to \`d\` decimal places. \`d\` defaults to \`0\` if a value is not specified.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`(INTEGER/LONG \[,INTEGER\]) -&gt; LONG (FLOAT/DOUBLE \[,INTEGER\]) -&gt;LONG\`
-
-#### Example
-
-    os> source=people | eval \`ROUND(12.34)\` = ROUND(12.34), \`ROUND(12.34, 1)\` = ROUND(12.34, 1), \`ROUND(12.34, -1)\` = ROUND(12.34, -1), \`ROUND(12, 1)\` = ROUND(12, 1) | fields \`ROUND(12.34)\`, \`ROUND(12.34, 1)\`, \`ROUND(12.34, -1)\`, \`ROUND(12, 1)\`
-    fetched rows / total rows = 1/1
-    +----------------+-------------------+--------------------+----------------+
-    | ROUND(12.34)   | ROUND(12.34, 1)   | ROUND(12.34, -1)   | ROUND(12, 1)   |
-    |----------------+-------------------+--------------------+----------------|
-    | 12.0           | 12.3              | 10.0               | 12             |
-    +----------------+-------------------+--------------------+----------------+
-
-### SIGN
-
-The \`sign\` function returns the sign of the argument as -1, 0, or 1, depending on whether the number is negative, zero, or positive.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`SIGN(1)\` = SIGN(1), \`SIGN(0)\` = SIGN(0), \`SIGN(-1.1)\` = SIGN(-1.1) | fields \`SIGN(1)\`, \`SIGN(0)\`, \`SIGN(-1.1)\`
-    fetched rows / total rows = 1/1
-    +-----------+-----------+--------------+
-    | SIGN(1)   | SIGN(0)   | SIGN(-1.1)   |
-    |-----------+-----------+--------------|
-    | 1         | 0         | -1           |
-    +-----------+-----------+--------------+
-
-### SIN
-
-The \`sin(x)\` function is a sine function, with \`x\` in radians.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** \`DOUBLE\`
-
-#### Example
-
-    os> source=people | eval \`SIN(0)\` = SIN(0) | fields \`SIN(0)\`
-    fetched rows / total rows = 1/1
-    +----------+
-    | SIN(0)   |
-    |----------|
-    | 0.0      |
-    +----------+
-
-### SQRT
-
-The \`sqrt\` function calculates the square root of a non-negative value \`x\`.
-
-**Argument type:** \`INTEGER/LONG/FLOAT/DOUBLE\`
-
-**Return type:** (Non-negative) \`INTEGER/LONG/FLOAT/DOUBLE -&gt; DOUBLE\` (Negative) \`INTEGER/LONG/FLOAT/DOUBLE -&gt; NULL\`
-
-#### Example
-
-    os> source=people | eval \`SQRT(4)\` = SQRT(4), \`SQRT(4.41)\` = SQRT(4.41) | fields \`SQRT(4)\`, \`SQRT(4.41)\`
-    fetched rows / total rows = 1/1
-    +-----------+--------------+
-    | SQRT(4)   | SQRT(4.41)   |
-    |-----------+--------------|
-    | 2.0       | 2.1          |
-    +-----------+--------------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/string.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/string.ts
deleted file mode 100644
index 1667b6bafd89..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/functions/string.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const stringFunction = `## String
----
-
-### String functions
-
-PPL functions use the search capabilities of the OpenSearch engine. However, these functions don't execute directly within the OpenSearch plugin's memory. Instead, they facilitate the global filtering of query results based on specific conditions, such as a \`WHERE\` or \`HAVING\` clause. 
-
-The following sections describe the string functions.
-
-### CONCAT
-
-The \`CONCAT(str1, str2)\` function returns \`str1\` and \`str\` concatenated strings.
-
-**Argument type:** \`STRING, STRING\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`CONCAT('hello', 'world')\` = CONCAT('hello', 'world') | fields \`CONCAT('hello', 'world')\`
-    fetched rows / total rows = 1/1
-    +----------------------------+
-    | CONCAT('hello', 'world')   |
-    |----------------------------|
-    | helloworld                 |
-    +----------------------------+
-
-### CONCAT\_WS
-
-The \`CONCAT\_WS(sep, str1, str2)\` function concatenates two strings together, using \`sep\` as a separator between them.
-
-**Argument type:** \`STRING, STRING, STRING\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`CONCAT_WS(',', 'hello', 'world')\` = CONCAT_WS(',', 'hello', 'world') | fields \`CONCAT_WS(',', 'hello', 'world')\`
-    fetched rows / total rows = 1/1
-    +------------------------------------+
-    | CONCAT_WS(',', 'hello', 'world')   |
-    |------------------------------------|
-    | hello,world                        |
-    +------------------------------------+
-
-### LENGTH
-
-The \`length(str)\` function returns the length of a string, measured in number of bytes.
-
-**Function signature:** \`LENGTH(STRING) -&gt; INTEGER\`
-
-**Argument type:** \`STRING\`
-
-**Return type:** \`INTEGER\`
-
-#### Example
-
-    os> source=people | eval \`LENGTH('helloworld')\` = LENGTH('helloworld') | fields \`LENGTH('helloworld')\`
-    fetched rows / total rows = 1/1
-    +------------------------+
-    | LENGTH('helloworld')   |
-    |------------------------|
-    | 10                     |
-    +------------------------+
-
-### LIKE
-
-The \`like(string, PATTERN)\` function returns \`true\` if the string matches the \`PATTERN\` value. The following two wildcards are commonly used with the \`like\` operator:
-
-- \`%\`: A percent sign represents zero, one, or multiple characters.
-- \`_\`: An underscore represents a single character.
-
-#### Example
-
-    os> source=people | eval \`LIKE('hello world', '_ello%')\` = LIKE('hello world', '_ello%') | fields \`LIKE('hello world', '_ello%')\`
-    fetched rows / total rows = 1/1
-    +---------------------------------+
-    | LIKE('hello world', '_ello%')   |
-    |---------------------------------|
-    | True                            |
-    +---------------------------------+
-
-### LOWER
-
-The \`lower(string)\` function converts a string to lowercase.
-
-**Argument type:** \`STRING\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`LOWER('helloworld')\` = LOWER('helloworld'), \`LOWER('HELLOWORLD')\` = LOWER('HELLOWORLD') | fields \`LOWER('helloworld')\`, \`LOWER('HELLOWORLD')\`
-    fetched rows / total rows = 1/1
-    +-----------------------+-----------------------+
-    | LOWER('helloworld')   | LOWER('HELLOWORLD')   |
-    |-----------------------+-----------------------|
-    | helloworld            | helloworld            |
-    +-----------------------+-----------------------+
-
-### LTRIM
-
-The \`ltrim(str)\` function trims leading space characters from a string.
-
-**Argument type:** \`STRING\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`LTRIM('   hello')\` = LTRIM('   hello'), \`LTRIM('hello   ')\` = LTRIM('hello   ') | fields \`LTRIM('   hello')\`, \`LTRIM('hello   ')\`
-    fetched rows / total rows = 1/1
-    +---------------------+---------------------+
-    | LTRIM('   hello')   | LTRIM('hello   ')   |
-    |---------------------+---------------------|
-    | hello               | hello               |
-    +---------------------+---------------------+
-
-### RIGHT
-
-The \`right(str, len)\` function returns the rightmost \`len\` characters from a \`str\` value. \`NULL\` is returned if any argument is null.
-
-**Argument type:** \`STRING, INTEGER\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`RIGHT('helloworld', 5)\` = RIGHT('helloworld', 5), \`RIGHT('HELLOWORLD', 0)\` = RIGHT('HELLOWORLD', 0) | fields \`RIGHT('helloworld', 5)\`, \`RIGHT('HELLOWORLD', 0)\`
-    fetched rows / total rows = 1/1
-    +--------------------------+--------------------------+
-    | RIGHT('helloworld', 5)   | RIGHT('HELLOWORLD', 0)   |
-    |--------------------------+--------------------------|
-    | world                    |                          |
-    +--------------------------+--------------------------+
-
-### RTRIM
-
-The \`rtrim(str)\` function trims trailing space characters from a string.
-
-**Argument type:** \`STRING\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`RTRIM('   hello')\` = RTRIM('   hello'), \`RTRIM('hello   ')\` = RTRIM('hello   ') | fields \`RTRIM('   hello')\`, \`RTRIM('hello   ')\`
-    fetched rows / total rows = 1/1
-    +---------------------+---------------------+
-    | RTRIM('   hello')   | RTRIM('hello   ')   |
-    |---------------------+---------------------|
-    |    hello            | hello               |
-    +---------------------+---------------------+
-
-### SUBSTRING
-
-The \`substring(str, start)\` or \`substring(str, start, length)\`function returns a substring of the input string \`str\`. If \`length\` is not specified, the function returns the entire string from the \`start\` index.
-
-**Argument type:** \`STRING, INTEGER, INTEGER\`
-
-**Return type:** \`STRING\`
-
-**Synonyms:** \`SUBSTR\`
-
-#### Example
-
-    os> source=people | eval \`SUBSTRING('helloworld', 5)\` = SUBSTRING('helloworld', 5), \`SUBSTRING('helloworld', 5, 3)\` = SUBSTRING('helloworld', 5, 3) | fields \`SUBSTRING('helloworld', 5)\`, \`SUBSTRING('helloworld', 5, 3)\`
-    fetched rows / total rows = 1/1
-    +------------------------------+---------------------------------+
-    | SUBSTRING('helloworld', 5)   | SUBSTRING('helloworld', 5, 3)   |
-    |------------------------------+---------------------------------|
-    | oworld                       | owo                             |
-    +------------------------------+---------------------------------+
-
-### TRIM
-
-The \`trim\` function removes leading and trailing white space from a string.
-
-**Argument type:** \`STRING\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`TRIM('   hello')\` = TRIM('   hello'), \`TRIM('hello   ')\` = TRIM('hello   ') | fields \`TRIM('   hello')\`, \`TRIM('hello   ')\`
-    fetched rows / total rows = 1/1
-    +--------------------+--------------------+
-    | TRIM('   hello')   | TRIM('hello   ')   |
-    |--------------------+--------------------|
-    | hello              | hello              |
-    +--------------------+--------------------+
-
-### UPPER
-
-The \`upper(string)\` function converts a string to uppercase.
-
-**Argument type:** \`STRING\`
-
-**Return type:** \`STRING\`
-
-#### Example
-
-    os> source=people | eval \`UPPER('helloworld')\` = UPPER('helloworld'), \`UPPER('HELLOWORLD')\` = UPPER('HELLOWORLD') | fields \`UPPER('helloworld')\`, \`UPPER('HELLOWORLD')\`
-    fetched rows / total rows = 1/1
-    +-----------------------+-----------------------+
-    | UPPER('helloworld')   | UPPER('HELLOWORLD')   |
-    |-----------------------+-----------------------|
-    | HELLOWORLD            | HELLOWORLD            |
-    +-----------------------+-----------------------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/groups.tsx b/src/plugins/query_enhancements/public/query_editor/ppl_docs/groups.tsx
deleted file mode 100644
index 633def301493..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/groups.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {
-  dedupCmd,
-  evalCmd,
-  fieldsCmd,
-  headCmd,
-  parseCmd,
-  rareCmd,
-  renameCmd,
-  searchCmd,
-  sortCmd,
-  statsCmd,
-  syntaxCmd,
-  topCmd,
-  whereCmd,
-} from './commands';
-import {
-  mathFunction,
-  datetimeFunction,
-  stringFunction,
-  conditionFunction,
-  fullTextSearchFunction,
-} from './functions';
-import { pplDatatypes, pplIdentifiers } from './language_structure';
-
-export const Group1 = {
-  label: 'Commands',
-  options: [
-    {
-      label: 'Syntax',
-      value: syntaxCmd,
-    },
-    {
-      label: 'dedup',
-      value: dedupCmd,
-    },
-    {
-      label: 'eval',
-      value: evalCmd,
-    },
-    {
-      label: 'fields',
-      value: fieldsCmd,
-    },
-    {
-      label: 'rename',
-      value: renameCmd,
-    },
-    {
-      label: 'search',
-      value: searchCmd,
-    },
-    {
-      label: 'sort',
-      value: sortCmd,
-    },
-    {
-      label: 'stats',
-      value: statsCmd,
-    },
-    {
-      label: 'where',
-      value: whereCmd,
-    },
-    {
-      label: 'head',
-      value: headCmd,
-    },
-    {
-      label: 'parse',
-      value: parseCmd,
-    },
-    {
-      label: 'rare',
-      value: rareCmd,
-    },
-    {
-      label: 'top',
-      value: topCmd,
-    },
-  ],
-};
-
-export const Group2 = {
-  label: 'Functions',
-  options: [
-    {
-      label: 'Math',
-      value: mathFunction,
-    },
-    {
-      label: 'Date and Time',
-      value: datetimeFunction,
-    },
-    {
-      label: 'String',
-      value: stringFunction,
-    },
-    {
-      label: 'Condition',
-      value: conditionFunction,
-    },
-    {
-      label: 'Full Text Search',
-      value: fullTextSearchFunction,
-    },
-  ],
-};
-
-export const Group3 = {
-  label: 'Language Structure',
-  options: [
-    {
-      label: 'Identifiers',
-      value: pplIdentifiers,
-    },
-    {
-      label: 'Data Types',
-      value: pplDatatypes,
-    },
-  ],
-};
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/datatypes.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/datatypes.ts
deleted file mode 100644
index 7914bc628daf..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/datatypes.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const pplDatatypes = `## Data Types
----
-
-### Data types
-
-A data type defines a collection of data type values and a set of predefined operations for those values. PPL supports the following data types:
-
-.. hlist::
-   :columns: 3
-
-   * array 
-   * binary
-   * boolean 
-   * byte 
-   * date
-   * datetime
-   * double
-   * float
-   * geo\_point
-   * integer
-   * interval
-   * ip
-   * long
-   * short
-   * string
-   * struct
-   * text
-   * time
-   * timestamp
-
-### Data type mapping
-
-The following table is a reference guide for the mapping between an OpenSearch data type, a PPL data type, and a SQL data type.
-
-| OpenSearch type | PPL type  | SQL type  |
-|-----------------|-----------|-----------|
-| binary          | binary    | VARBINARY |
-| boolean         | boolean   | BOOLEAN   |
-| byte            | byte      | TINYINT   |
-| date            | timestamp | TIMESTAMP |
-| double          | double    | DOUBLE    |
-| float           | float     | REAL      |
-| half\_float     | float     | FLOAT     |
-| integer         | integer   | INTEGER   |
-| ip              | ip        | VARCHAR   |
-| keyword         | string    | VARCHAR   |
-| long            | long      | BIGINT    |
-| nested          | array     | STRUCT    |
-| object          | struct    | STRUCT    |
-| scaled\_float   | float     | DOUBLE    |
-| short           | byte      | SMALLINT  |
-| text            | text      | VARCHAR   |
-
-Some PPL types do not correspond to an OpenSearch type. To use functions that require date and time data types, data type conversion must be performed, as described in the following sections.
-
-### Numeric data types
-
-Numeric values ranging from -2147483648 to +2147483647 are recognized as
-integers, with data type name \`INTEGER\`. For values that fall beyond the specified range, the \`LONG\` data type is assigned during parsing.
-
-### Date and time data types
-
-The data types \`date\` and \`time\` represent temporal values. The PPL plugin supports \`date\`, \`time\`, \`datetime\`, \`timestamp\`, and \`interval\`. By default, [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/) uses \`date\` for any date or time types. To integrate with PPL, each data type, excluding \`timestamp\`, contains temporal and time zone information. Use \`datetime\` functions to clarify the date and time types. Note that certain functions may have limitations on the input argument type. See the [Functions](functions.rst) section in this manual for more information.
-
-#### Date
-
-The \`date\` data type represents the calendar date, regardless of time zone. A specific date value represents a 24-hour period, but this period differs across time zones and may be subject to variations due to daylight saving time adjustments. Additionally, the date alone does not contain time-specific information. The date values range from '1000-01-01' to '9999-12-31'.
-
-| Type     | Syntax       | Range                        |
-|----------|--------------|------------------------------|
-| \`date\` | 'yyyy-MM-dd' | '0001-01-01' to '9999-12-31' |
-
-#### Time
-
-The \`time\` data type represents the time of day as displayed on a clock or watch, without specifying a particular time zone. It does not include any information about the calendar date.
-
-| Type     | Syntax       | Range                        |
-|----------|--------------|------------------------------|
-| \`time\` | 'hh:mm:ss\[.fraction\]' | '00:00:00.000000' to '23:59:59.999999' |
-
-#### Datetime
-
-The \`datetime\` data type represents a combination of \`date\` and \`time\`. The \`datetime\` data type does not contain time zone information. For an absolute time point that contains both datetime and time zone information, see the [Timestamp](#timestamp) section. 
-
-See the [Conversion between date and time types](#conversion-between-date-and-time-types) section for information about the conversion rule for \`date\` or \`time\` to \`datetime\`.
-
-| Type     | Syntax | Range |
-|----------|--------|-------|
-| \`datetime\` | 'yyyy-MM-dd hh:mm:ss\[.fraction\]' | '0001-01-01 00:00:00.000000' to '9999-12-31 23:59:59.999999' |
-
-#### Timestamp
-
-The \`timestamp\` data type represents absolute points in time, unaffected by time zones or conventions. The \`timestamp\` data type differs from other data types in its storage and retrieval behavior. When a timestamp is sorted, it is converted from Coordinated Universal Time (UTC) to the specified time zone. Conversely, when a timestamp is retrieved, it is converted back to UTC before being displayed or used in calculations. This ensures that the timestamp values remain consistent and comparable across different time zones.
-
-| Type      | Syntax | Range |
-|-----------|--------|-------|
-| Timestamp | 'yyyy-MM-dd hh:mm:ss\[.fraction\]' | '0001-01-01 00:00:01.000000' UTC to '9999-12-31 23:59:59.999999' |
-
-####  Interval
-
-The \`interval\` data type represents a span of time encompassing a specified duration or period.
-
-| Type     | Syntax             |
-|----------|--------------------|
-| Interval | INTERVAL expr unit |
-
-The expression \`expr\` is configured to be repeatedly evaluated to produce a quantitative value. See the [Expressions](expressions.rst) section of this manual for more information. The unit represents the unit used to interpret the quantity, including MICROSECOND, SECOND, MINUTE, HOUR, DAY, WEEK, MONTH, QUARTER, and YEAR. The INTERVAL keyword and the unit specifier are not case sensitive. 
-
-Intervals consist of two classes: day-time and year-week. Day-time intervals store days, hours, minutes, seconds, and microseconds. Year-week intervals store years, quarters, months, and weeks. Each type can only be compared to the same type. 
-
-### Date and time conversion
-
-Date and time types, excluding \`interval\`, can be mutually converted, with some alteration of the value or some information loss, for example, when extracting the \`time\` value from a \`datetime\` value or converting a \`date\` value to a \`datetime\` value. The PPL plugin supports the following conversion rules for each of the types.
-
-#### \`date\` conversion
-
-- Because \`date\` does not contain time information, conversion to \`time\` returns a zero time value \`00:00:00\`.
-- Converting from \`date\` to \`datetime\` sets the time value to \`00:00:00\` if \`time\` is not provided, for example, \`2020-08-17\` converts to \`2020-08-17 00:00:00\`.
-- Converting to \`timestamp\` sets \`time\` to \`00:00:00\` and time zone (UTC by default), for example, \`2020-08-17\` converts to \`2020-08-17 00:00:00 UTC\`.
-
-#### \`time\` conversion
-
-- A \`time\` value does not have any date information, so it cannot be converted to other date and time types.
-
-#### \`datetime\` conversion
-
-- Converting from \`datetime\` to \`date\` extracts the date component from the \`datetime\` value, for example, \`2020-08-17 14:09:00\` converts to \`2020-08-08\`.
-- Converting to \`time\` extracts the time component from the \`datetime\` value, for example, \`2020-08-17 14:09:00\` converts to \`14:09:00\`.
-- Because \`datetime\` does not contain time zone information, conversion to \`timestamp\` sets the time zone to the session's time zone, for example, \`2020-08-17 14:09:00\`, with the system time zone set to UTC, for example, \`2020-08-17 14:09:00 UTC\`.
-
-#### \`timestamp\` conversion
-
-- Converting from \`timestamp\` to \`date\ extracts the \`date\` and \`time\` values. Converting from \`timestamp\` to \`datetime\` extracts the \`datetime\` value and retains the time zone information. For example, \`2020-08-17 14:09:00 UTC\` converts \`date\` and \`time\` to \`2020-08-17\` and \`14:09:00\` and \`datetime\` to \`2020-08-17 14:09:00\`.
-
-### String data types
-
-A \`string\` data type is a series of characters enclosed within single or double quotation marks that serves as a data type for storing text data.
-
-### Query struct data type
-
-In PPL, the \`struct\` data type corresponds to the [Object field type in
-OpenSearch](https://opensearch.org/docs/latest/field-types/supported-field-types/object-fields/). The \`"."\` is used as the path selector for accessing the inner attribute of the struct data.
-
-#### Example 1: Struct to store population data
-
-The following example struct stores population data in an index containing the following fields: deep-nested object field \`city\`, object field of array value \`account\`, and nested field \`projects\`.
-
-    {
-      "mappings": {
-        "properties": {
-          "city": {
-            "properties": {
-              "name": {
-                "type": "keyword"
-              },
-              "location": {
-                "properties": {
-                  "latitude": {
-                    "type": "double"
-                  }
-                }
-              }
-            }
-          },
-          "account": {
-            "properties": {
-              "id": {
-                "type": "keyword"
-              }
-            }
-          },
-          "projects": {
-            "type": "nested",
-            "properties": {
-              "name": {
-                "type": "keyword"
-              }
-            }
-          }
-        }
-      }
-    }
-
-#### Example 2: Struct to store employee data
-
-The following example struct stores employee data and includes a nested field:
-
-    {
-      "mappings": {
-        "properties": {
-          "id": {
-            "type": "long"
-          },
-          "name": {
-            "type": "text",
-            "fields": {
-              "keyword": {
-                "type": "keyword",
-                "ignore_above": 256
-              }
-            }
-          },
-          "projects": {
-            "type": "nested",
-            "properties": {
-              "name": {
-                "type": "text",
-                "fields": {
-                  "keyword": {
-                    "type": "keyword"
-                  }
-                },
-                "fielddata": true
-              },
-              "started_year": {
-                "type": "long"
-              }
-            }
-          },
-          "title": {
-            "type": "text",
-            "fields": {
-              "keyword": {
-                "type": "keyword",
-                "ignore_above": 256
-              }
-            }
-          }
-        }
-      }
-    }
-
-Result set:
-
-    {
-      "employees_nested" : [
-        {
-          "id" : 3,
-          "name" : "Bob Smith",
-          "title" : null,
-          "projects" : [
-            {
-              "name" : "AWS Redshift Spectrum querying",
-              "started_year" : 1990
-            },
-            {
-              "name" : "AWS Redshift security",
-              "started_year" : 1999
-            },
-            {
-              "name" : "AWS Aurora security",
-              "started_year" : 2015
-            }
-          ]
-        },
-        {
-          "id" : 4,
-          "name" : "Susan Smith",
-          "title" : "Dev Mgr",
-          "projects" : [ ]
-        },
-        {
-          "id" : 6,
-          "name" : "Jane Smith",
-          "title" : "Software Eng 2",
-          "projects" : [
-            {
-              "name" : "AWS Redshift security",
-              "started_year" : 1998
-            },
-            {
-              "name" : "AWS Hello security",
-              "started_year" : 2015,
-              "address" : [
-                {
-                  "city" : "Dallas",
-                  "state" : "TX"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-
-#### Example 3: Select a struct inner attribute
-
-The following example PPL query shows how to fetch \`city\` (top level), \`city.name\` (second level), and \`city.location.latitude\` (deeper level) struct data from the results:
-
-    os> source=people | fields city, city.name, city.location.latitude;
-    fetched rows / total rows = 1/1
-    +-----------------------------------------------------+-------------+--------------------------+
-    | city                                                | city.name   | city.location.latitude   |
-    |-----------------------------------------------------+-------------+--------------------------|
-    | {'name': 'Seattle', 'location': {'latitude': 10.5}} | Seattle     | 10.5                     |
-    +-----------------------------------------------------+-------------+--------------------------+
-
-#### Example 4: Group by a struct inner attribute
-
-The following example PPL query shows how to group by a struct inner attribute:
-
-    os> source=people | stats count() by city.name;
-    fetched rows / total rows = 1/1
-    +-----------+-------------+
-    | count()   | city.name   |
-    |-----------+-------------|
-    | 1         | Seattle     |
-    +-----------+-------------+
-
-#### Example 5: Select an object field of an array value
-
-The following example PPL query shows how to select a deeper level for object fields of array values that return the first element in the array. In this example, the document's inner field \`accounts.id\` has three values instead of a tuple: 
-
-    os> source = people | fields accounts, accounts.id;
-    fetched rows / total rows = 1/1
-    +------------+---------------+
-    | accounts   | accounts.id   |
-    |------------+---------------|
-    | {'id': 1}  | 1             |
-    +------------+---------------+
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/identifiers.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/identifiers.ts
deleted file mode 100644
index 36288736366e..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/identifiers.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const pplIdentifiers = `## Indentifiers
----
-
-### Identifiers
-
-Identifiers are used for naming database objects, such as an index name, a field name, or a custom label. The two types of identifiers are _regular identifiers_ and _delimited identifiers_.
-
-#### Regular identifiers
-
-A regular identifier is a string of characters that starts with an ASCII letter (lowercase or uppercase). The subsequent characters can be a combination of letters, digits, or underscores (\`_\`). A regular identifier cannot be a reversed keyword, and white space or other special characters are not allowed.
-
-The following identifiers are supported by OpenSearch extensions:
-
-- **Identifiers prefixed by dot \`.\`:** This is called a hidden index. An example is \`.opensearch_dashboards\`.
-- **Identifiers prefixed by the \`@\` symbol:** This is common in meta fields generated for data ingestion.
-- **Identifiers with \`-\` in the middle:** This is common in index naming conventions with date information.
-- **Identifiers with the \`*\` symbol:** This is common in wildcard matches in an index pattern.
-
-Index names with a date suffix separated by dashes or dots, such as \`cwl-2020.01.11\` or \`logs-7.0-2020.01.11\`, are common in data ingestion. Identifiers used as index names do not need to be enclosed in quotation marks. Additionally, wildcards within date patterns are accepted, enabling data retrieval across indexes covering different date ranges. For example, you can use \`logs-2020.1*\` to search in indexes for October, November, and December 2020.
-
-#### Example 1: Index pattern without quotes 
-
-The following example PPL query uses an index pattern directly without quotes:
-
-    os> source=accounts | fields account_number, firstname, lastname;
-    fetched rows / total rows = 4/4
-    +------------------+-------------+------------+
-    | account_number   | firstname   | lastname   |
-    |------------------+-------------+------------|
-    | 1                | Amber       | Duke       |
-    | 6                | Hattie      | Bond       |
-    | 13               | Nanette     | Bates      |
-    | 18               | Dale        | Adams      |
-    +------------------+-------------+------------+
-
-### Delimited identifiers
-
-A delimited identifier is an identifier enclosed in backticks \`\` that contains special characters not permitted in regular identifiers. This allows for the use of characters that would otherwise violate the naming rules for identifiers.
-
-#### Use cases
-
-Common use cases for delimited identifiers include the following:
-
-- Identifiers that coincide with reserved keywords.
-- Identifiers that contain a dot \`.\` or a dash \`-\` need to be distinguished from regular identifiers with qualifiers. Enclosing such identifiers in backticks \`\` allows for the parser to differentiate them from qualified identifiers and enables date information within index names.
-- Identifiers with special characters in index names. Note that OpenSearch permits the use of special characters, including Unicode characters.
-
-#### Example 2: Index name enclosed in backticks
-
-The following example PPL query uses an index name enclosed in backticks \`\`:
-
-    os> source=\`accounts\` | fields \`account_number\`;
-    fetched rows / total rows = 4/4
-    +------------------+
-    | account_number   |
-    |------------------|
-    | 1                |
-    | 6                |
-    | 13               |
-    | 18               |
-    +------------------+
-
-### Case sensitivity
-
-Identifiers are case sensitive and must match what is stored in OpenSearch. For example, if you run \`source=Accounts\`, an error \`index not found\` occurs \` because the index name \`accounts\` is lowercase.
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/index.ts b/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/index.ts
deleted file mode 100644
index 75423e184c08..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/language_structure/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export { pplDatatypes } from './datatypes';
-export { pplIdentifiers } from './identifiers';
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_docs/overview.tsx b/src/plugins/query_enhancements/public/query_editor/ppl_docs/overview.tsx
deleted file mode 100644
index 5c8d92e57df4..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_docs/overview.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export const overview = `## Overview
----
-Piped Processing Language (PPL) is a query language that processes data in a sequential, step-by-step manner. PPL uses a set of commands, connected by pipes (|), to process data and return results (note that the requests and results are read-only in OpenSearch). 
-
-You can query data in OpenSearch using [PPL](https://opensearch.org/docs/latest/search-plugins/sql/ppl/index/), [query domain-specific language (DSL)](https://opensearch.org/docs/latest/query-dsl/index/), or [SQL](https://opensearch.org/docs/latest/search-plugins/sql/sql/index/). 
-
-PPL is the primary language used for observability tasks in OpenSearch. Developers, DevOps engineers, support engineers, site reliability engineers, and IT managers find it useful for exploring and discovering log, monitoring, and observability data. For example, you can use PPL to:
-
-- Find all log messages that contain a specific error code. 
-- Identify trends in your data over time. 
-- Group similar data points.
-- Calculate statistics for your data.
-
-PPL is available in OpenSearch Dashboards and as a standalone command-line tool. Within OpenSearch Dashboards, you can use [Query Workbench](https://opensearch.org/docs/latest/dashboards/query-workbench/) to run on-demand PPL commands and view and save the results as both text and JSON. The [PPL command line interface (CLI)](https://opensearch.org/docs/latest/search-plugins/sql/cli/) is a standalone Python application that you can launch with the \`opensearchsql\` command and then run on-demand PPL commands and view and save the results as both text and JSON.
-
-Here is an example of a PPL query. This query retrieves the first and last names of all accounts for which the age is greater than 18.
-
-\`\`\` 
-source=accounts
-| where age > 18
-| fields firstname, lastname
-\`\`\`
-`;
diff --git a/src/plugins/query_enhancements/public/query_editor/ppl_reference_flyout.tsx b/src/plugins/query_enhancements/public/query_editor/ppl_reference_flyout.tsx
deleted file mode 100644
index 220dc1ffecc1..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/ppl_reference_flyout.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {
-  EuiComboBoxOptionOption,
-  EuiCompressedComboBox,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlyoutHeader,
-  EuiLink,
-  EuiMarkdownFormat,
-  EuiSmallButton,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
-import React, { useState } from 'react';
-import { FlyoutContainers } from './flyout_containers';
-import { Group1, Group2, Group3 } from './ppl_docs/groups';
-import { overview } from './ppl_docs/overview';
-
-interface Props {
-  module: string;
-  onClose: () => void;
-}
-
-export const PPLReferenceFlyout = ({ module, onClose }: Props) => {
-  const allOptionsStatic = [{ label: 'Overview', value: overview }, Group1, Group2, Group3];
-  const defaultOption = [allOptionsStatic[0]];
-  const [selectedOptions, setSelected] = useState(defaultOption);
-  const [flyoutContent, setFlyoutContent] = useState(
-    <EuiMarkdownFormat>{defaultOption[0].value}</EuiMarkdownFormat>
-  );
-
-  const onChange = (SelectedOptions: any) => {
-    setSelected(SelectedOptions);
-
-    const newContent = SelectedOptions.map((option: EuiComboBoxOptionOption<string>) => (
-      <EuiMarkdownFormat>{option.value}</EuiMarkdownFormat>
-    ));
-    setFlyoutContent(newContent);
-  };
-
-  const flyoutHeader = (
-    <EuiFlyoutHeader hasBorder>
-      <EuiTitle size="m">
-        <h2 id="pplReferenceFlyout">OpenSearch PPL Reference Manual</h2>
-      </EuiTitle>
-    </EuiFlyoutHeader>
-  );
-
-  const PPL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/ppl/index';
-
-  const flyoutBody = (
-    <EuiFlyoutBody>
-      <EuiFlexGroup component="span">
-        <EuiFlexItem>
-          <EuiCompressedComboBox
-            placeholder="Refer commands, functions and language structures"
-            options={allOptionsStatic}
-            selectedOptions={selectedOptions}
-            onChange={onChange}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem style={{ justifyContent: 'center' }}>
-          <EuiText size="s" color="subdued">
-            <EuiLink target="_blank" href={PPL_DOCUMENTATION_URL} external>
-              Learn More
-            </EuiLink>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="l" />
-      {flyoutContent}
-    </EuiFlyoutBody>
-  );
-
-  const flyoutFooter = (
-    <EuiFlyoutFooter>
-      <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiSmallButton onClick={onClose}>Close</EuiSmallButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlyoutFooter>
-  );
-
-  return (
-    <FlyoutContainers
-      closeFlyout={onClose}
-      flyoutHeader={flyoutHeader}
-      flyoutBody={flyoutBody}
-      flyoutFooter={flyoutFooter}
-      ariaLabel="pplReferenceFlyout"
-    />
-  );
-};
diff --git a/src/plugins/query_enhancements/public/query_editor/query_language_reference.tsx b/src/plugins/query_enhancements/public/query_editor/query_language_reference.tsx
deleted file mode 100644
index 225da9511e95..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/query_language_reference.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { i18n } from '@osd/i18n';
-import React from 'react';
-import { EuiButtonIcon } from '@elastic/eui';
-import { CoreStart } from 'opensearch-dashboards/public';
-import { PPLReferenceFlyout } from './ppl_reference_flyout';
-import {
-  OpenSearchDashboardsContextProvider,
-  toMountPoint,
-} from '../../../opensearch_dashboards_react/public';
-
-export class QueryLanguageReference {
-  protected coreStart!: CoreStart;
-  protected overLaysService!: CoreStart['overlays'];
-
-  constructor(private readonly startServices: Promise<[CoreStart, any, unknown]>) {
-    startServices.then(([coreStart]) => {
-      this.coreStart = coreStart;
-      this.overLaysService = coreStart.overlays;
-    });
-  }
-
-  public createPPLLanguageReference() {
-    const button = (
-      <EuiButtonIcon
-        iconType={'iInCircle'}
-        aria-label={i18n.translate('queryEnhancements.queryControls.languageReference', {
-          defaultMessage: `PPL language Reference`,
-        })}
-        onClick={() => {
-          const flyoutSession = this.overLaysService!.openFlyout(
-            toMountPoint(
-              <OpenSearchDashboardsContextProvider services={this.coreStart}>
-                <PPLReferenceFlyout
-                  onClose={() => flyoutSession?.close()}
-                  makeUrl={(searchId: any) => `#/view/${encodeURIComponent(searchId)}`}
-                />
-              </OpenSearchDashboardsContextProvider>
-            )
-          );
-        }}
-      />
-    );
-    return button;
-  }
-}
diff --git a/src/plugins/query_enhancements/public/query_editor/sql_reference_flyout.tsx b/src/plugins/query_enhancements/public/query_editor/sql_reference_flyout.tsx
deleted file mode 100644
index 40b849fb72d7..000000000000
--- a/src/plugins/query_enhancements/public/query_editor/sql_reference_flyout.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {
-  EuiComboBoxOptionOption,
-  EuiCompressedComboBox,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlyoutHeader,
-  EuiLink,
-  EuiMarkdownFormat,
-  EuiSmallButton,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
-import React, { useState } from 'react';
-import { FlyoutContainers } from './flyout_containers';
-import { Group1, Group2, Group3 } from './ppl_docs/groups';
-import { overview } from './ppl_docs/overview';
-
-interface Props {
-  module: string;
-  onClose: () => void;
-}
-
-export const SQLReferenceFlyout = ({ module, onClose }: Props) => {
-  const flyoutHeader = (
-    <EuiFlyoutHeader hasBorder>
-      <EuiTitle size="m">
-        <h2 id="pplReferenceFlyout">OpenSearch SQL Reference Manual</h2>
-      </EuiTitle>
-    </EuiFlyoutHeader>
-  );
-
-  const flyoutBody = null;
-
-  const flyoutFooter = (
-    <EuiFlyoutFooter>
-      <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiSmallButton onClick={onClose}>Close</EuiSmallButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlyoutFooter>
-  );
-
-  return (
-    <FlyoutContainers
-      closeFlyout={onClose}
-      flyoutHeader={flyoutHeader}
-      flyoutBody={flyoutBody}
-      flyoutFooter={flyoutFooter}
-      ariaLabel="pplReferenceFlyout"
-    />
-  );
-};
diff --git a/src/plugins/query_enhancements/public/query_editor_extensions/index.ts b/src/plugins/query_enhancements/public/query_editor_extensions/index.ts
new file mode 100644
index 000000000000..5c07eb04061f
--- /dev/null
+++ b/src/plugins/query_enhancements/public/query_editor_extensions/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export { pplLanguageReference } from './ppl_language_reference';
+export { sqlLanguageReference } from './sql_language_reference';
diff --git a/src/plugins/query_enhancements/public/query_editor_extensions/ppl_language_reference.tsx b/src/plugins/query_enhancements/public/query_editor_extensions/ppl_language_reference.tsx
new file mode 100644
index 000000000000..7029152b36d6
--- /dev/null
+++ b/src/plugins/query_enhancements/public/query_editor_extensions/ppl_language_reference.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { EuiLink, EuiText } from '@elastic/eui';
+import { IDataPluginServices } from 'src/plugins/data/public';
+import { LanguageReference } from '../../../data/public';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+const PPLReference = () => {
+  const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
+  const pplDocs = opensearchDashboards.services.docLinks?.links.noDocumentation.ppl.base;
+  const pplFullName = (
+    <FormattedMessage id="queryEnhancements.queryBar.pplFullLanguageName" defaultMessage="PPL" />
+  );
+
+  return (
+    <>
+      <EuiText size="s">
+        <p>
+          <FormattedMessage
+            id="queryEnhancements.queryBar.pplSyntaxOptionsDescription"
+            defaultMessage="Piped Processing Language ({docsLink}) is a query language that focuses on processing data in a sequential, step-by-step manner. PPL uses the pipe (|) operator to combine commands to find and retrieve data. It is particularly well suited for analyzing observability data, such as logs, metrics, and traces, due to its ability to handle semi-structured data efficiently."
+            values={{
+              docsLink: (
+                <EuiLink href={pplDocs} target="_blank">
+                  {pplFullName}
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    </>
+  );
+};
+
+export const pplLanguageReference = () => {
+  return <LanguageReference body={<PPLReference />} />;
+};
diff --git a/src/plugins/query_enhancements/public/query_editor_extensions/sql_language_reference.tsx b/src/plugins/query_enhancements/public/query_editor_extensions/sql_language_reference.tsx
new file mode 100644
index 000000000000..e30be766d64c
--- /dev/null
+++ b/src/plugins/query_enhancements/public/query_editor_extensions/sql_language_reference.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { EuiLink, EuiText } from '@elastic/eui';
+import { IDataPluginServices } from 'src/plugins/data/public';
+import { LanguageReference } from '../../../data/public';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+const SQLReference = () => {
+  const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
+  const sqlDocs = opensearchDashboards.services.docLinks?.links.noDocumentation.sql.base;
+  const sqlFullName = (
+    <FormattedMessage id="queryEnhancements.queryBar.sqlFullLanguageName" defaultMessage="SQL" />
+  );
+
+  return (
+    <>
+      <EuiText size="s">
+        <p>
+          <FormattedMessage
+            id="queryEnhancements.queryBar.sqlSyntaxOptionsDescription"
+            defaultMessage="{docsLink} in OpenSearch bridges the gap between traditional relational database concepts and the flexibility of OpenSearch’s document-oriented data storage. This integration gives you the ability to use your SQL knowledge to query, analyze, and extract insights from your OpenSearch data."
+            values={{
+              docsLink: (
+                <EuiLink href={sqlDocs} target="_blank">
+                  {sqlFullName}
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    </>
+  );
+};
+
+export const sqlLanguageReference = () => {
+  return <LanguageReference body={<SQLReference />} />;
+};
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/duplicate_result_flyout.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/duplicate_result_flyout.test.tsx.snap
index f8008f93250c..9501523a3755 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/duplicate_result_flyout.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/duplicate_result_flyout.test.tsx.snap
@@ -142,9 +142,13 @@ HTMLCollection [
           <div
             class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
           >
-            <span>
-              Copy saved objects to targetWorkspace
-            </span>
+            <h2
+              class="euiTitle euiTitle--small"
+            >
+              <span>
+                Copy saved objects to targetWorkspace
+              </span>
+            </h2>
           </div>
           <div
             class="euiFlyoutBody"
@@ -342,9 +346,13 @@ HTMLCollection [
           <div
             class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
           >
-            <span>
-              Copy saved objects to targetWorkspace
-            </span>
+            <h2
+              class="euiTitle euiTitle--small"
+            >
+              <span>
+                Copy saved objects to targetWorkspace
+              </span>
+            </h2>
           </div>
           <div
             class="euiFlyoutBody"
@@ -374,7 +382,7 @@ HTMLCollection [
                     class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <h4
-                      class="euiTitle euiTitle--xsmall savedObjectsManagementImportSummary__copiedCountCount"
+                      class="euiTitle euiTitle--xsmall savedObjectsManagementImportSummary__createdCount"
                     >
                       <span>
                         2 Successful
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap
index 8a451f6802ed..55efd385954c 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/header.test.tsx.snap
@@ -261,8 +261,8 @@ exports[`Header should render normally when useUpdatedUX is true 1`] = `
         Array [
           Object {
             "controlType": "button",
-            "disabled": false,
             "iconType": "copy",
+            "isDisabled": false,
             "label": "Copy all assets to...",
             "run": [Function],
             "testId": "duplicateObjects",
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_modal.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_modal.tsx
index e98aa35ebd21..2f5b9c2c9a1f 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_modal.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_modal.tsx
@@ -130,7 +130,7 @@ export class SavedObjectsDuplicateModal extends React.Component<ShowDuplicateMod
               id="savedObjectsManagement.objectsTable.duplicateModal.title"
               defaultMessage="Copy {objectCount, plural, =1 {{objectName}} other {# {useUpdatedUX, select, true {assets} other {objects}}}} to another workspace?"
               values={{
-                objectName: allSelectedObjects[0].meta.title,
+                objectName: allSelectedObjects[0]?.meta.title,
                 objectCount: allSelectedObjects.length,
                 useUpdatedUX: this.props.useUpdatedUX,
               }}
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_result_flyout.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_result_flyout.test.tsx
index 7ab24e418500..154a4c24e3eb 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_result_flyout.test.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_result_flyout.test.tsx
@@ -7,6 +7,7 @@ import { SavedObjectsImportError, SavedObjectsImportSuccess } from 'opensearch-d
 import { DuplicateResultFlyout, DuplicateResultFlyoutProps } from './duplicate_result_flyout';
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
+import { IntlProvider } from 'react-intl';
 
 describe('DuplicateResultFlyout', () => {
   const failedCopies: SavedObjectsImportError[] = [
@@ -48,8 +49,16 @@ describe('DuplicateResultFlyout', () => {
     jest.clearAllMocks();
   });
 
+  const DuplicateResultFlyoutComponent = (props: DuplicateResultFlyoutProps) => {
+    return (
+      <IntlProvider locale="en">
+        <DuplicateResultFlyout {...props} />
+      </IntlProvider>
+    );
+  };
+
   it('renders the flyout with correct title and result', () => {
-    render(<DuplicateResultFlyout {...duplicateResultFlyoutProps} />);
+    render(<DuplicateResultFlyoutComponent {...duplicateResultFlyoutProps} />);
     expect(document.children).toMatchSnapshot();
 
     // Check title
@@ -76,7 +85,7 @@ describe('DuplicateResultFlyout', () => {
   });
 
   it('calls onClose when the close button is clicked', () => {
-    render(<DuplicateResultFlyout {...duplicateResultFlyoutProps} />);
+    render(<DuplicateResultFlyoutComponent {...duplicateResultFlyoutProps} />);
 
     const closeButton = screen.getByTestId('euiFlyoutCloseButton');
     fireEvent.click(closeButton);
@@ -86,7 +95,7 @@ describe('DuplicateResultFlyout', () => {
 
   it('copy count is null', () => {
     render(
-      <DuplicateResultFlyout
+      <DuplicateResultFlyoutComponent
         workspaceName={workspaceName}
         failedCopies={[]}
         successfulCopies={[]}
@@ -97,7 +106,7 @@ describe('DuplicateResultFlyout', () => {
   });
 
   it('calls onClose after footer close button clicked', () => {
-    render(<DuplicateResultFlyout {...duplicateResultFlyoutProps} />);
+    render(<DuplicateResultFlyoutComponent {...duplicateResultFlyoutProps} />);
 
     const closeButton = screen.getByText('Close');
     fireEvent.click(closeButton);
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_result_flyout.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_result_flyout.tsx
index 7b771d6723ee..0698a55b6d52 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_result_flyout.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/duplicate_result_flyout.tsx
@@ -91,7 +91,7 @@ export class DuplicateResultFlyout extends React.Component<DuplicateResultFlyout
         {copiedCount && (
           <EuiFlexItem grow={false}>
             <EuiTitle size="xs">
-              <h4 className="savedObjectsManagementImportSummary__copiedCountCount">
+              <h4 className="savedObjectsManagementImportSummary__createdCount">
                 <FormattedMessage
                   id="savedObjectsManagement.copyResult.copiedCountHeader"
                   defaultMessage="{copiedCount} Successful"
@@ -220,11 +220,13 @@ export class DuplicateResultFlyout extends React.Component<DuplicateResultFlyout
       <EuiFlyout ownFocus onClose={onClose} size="s">
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
-            <FormattedMessage
-              id="savedObjectsManagement.copyResult.title"
-              defaultMessage="Copy saved objects to {workspaceName}"
-              values={{ workspaceName }}
-            />
+            <h2>
+              <FormattedMessage
+                id="savedObjectsManagement.copyResult.title"
+                defaultMessage="Copy saved objects to {workspaceName}"
+                values={{ workspaceName }}
+              />
+            </h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>{this.copyResult({ failedCopies, successfulCopies })}</EuiFlyoutBody>
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/header.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/header.tsx
index 7d201e16f224..0d447966be09 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/header.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/header.tsx
@@ -127,7 +127,7 @@ export const Header = ({
                 testId: 'duplicateObjects',
                 run: onDuplicate,
                 controlType: 'button',
-                disabled: objectCount === 0,
+                isDisabled: objectCount === 0,
                 iconType: 'copy',
                 label: i18n.translate(
                   'savedObjectsManagement.objectsTable.header.duplicateAllAssetsButtonLabel',
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
index df7bec839a90..b3e440460428 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
@@ -1021,7 +1021,38 @@ describe('SavedObjectsTable', () => {
       });
     });
 
-    it('should catch error when duplicating selected object is fail', async () => {
+    it('should catch error when duplicating selected object is failed', async () => {
+      const component = shallowRender({ applications, workspaces });
+      component.setState({ isShowingDuplicateModal: true });
+
+      const mockCopy = jest.fn().mockResolvedValue({ error: 'error' });
+      workspaces.client$.next({ copy: mockCopy });
+      const client = workspaces.client$.getValue();
+
+      // Ensure all promises resolve
+      await new Promise((resolve) => process.nextTick(resolve));
+      // Ensure the state changes are reflected
+      component.update();
+
+      await component.instance().onDuplicate(mockSelectedSavedObjects, false, 'workspace2', 'bar');
+
+      expect(client?.copy).toHaveBeenCalledWith(
+        [
+          { id: '1', type: 'dashboard' },
+          { id: '2', type: 'dashboard' },
+        ],
+        'workspace2',
+        false
+      );
+      component.update();
+
+      expect(notifications.toasts.addDanger).toHaveBeenCalledWith({
+        title: 'Unable to copy 2 saved objects.',
+        text: 'error',
+      });
+    });
+
+    it('should show error toast when copy is fail', async () => {
       const component = shallowRender({ applications, workspaces });
       component.setState({ isShowingDuplicateModal: true });
 
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
index 3ecfd103488b..8c77f9dd3eff 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
@@ -761,13 +761,14 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
     const { notifications, workspaces, useUpdatedUX } = this.props;
     const workspaceClient = workspaces.client$.getValue();
 
-    const showErrorNotification = () => {
+    const showErrorNotification = (text?: string) => {
       notifications.toasts.addDanger({
         title: i18n.translate('savedObjectsManagement.objectsTable.duplicate.dangerNotification', {
           defaultMessage:
             'Unable to copy {useUpdatedUX, select, true {{errorCount, plural, one {# asset} other {# assets}}} other {{errorCount, plural, one {# saved object} other {# saved objects}}}}.',
           values: { errorCount: savedObjects.length, useUpdatedUX },
         }),
+        ...(text && { text }),
       });
     };
     if (!workspaceClient) {
@@ -781,18 +782,22 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
         targetWorkspace,
         includeReferencesDeep
       );
-
-      this.setState({
-        isShowingDuplicateResultFlyout: true,
-        failedCopies: result.success ? [] : result.errors,
-        successfulCopies: result.successCount > 0 ? result.successResults : [],
-        targetWorkspaceName,
-      });
+      if (result?.error) {
+        showErrorNotification(result.error);
+      } else {
+        this.setState({
+          isShowingDuplicateResultFlyout: true,
+          failedCopies: result?.errors || [],
+          successfulCopies: result?.successCount > 0 ? result.successResults : [],
+          targetWorkspaceName,
+        });
+      }
     } catch (e) {
       showErrorNotification();
+    } finally {
+      this.hideDuplicateModal();
+      await this.refreshObjects();
     }
-    this.hideDuplicateModal();
-    await this.refreshObjects();
   };
 
   renderDuplicateModal() {
diff --git a/src/plugins/vis_builder/public/application/components/data_tab/index.tsx b/src/plugins/vis_builder/public/application/components/data_tab/index.tsx
index 51a69950c719..1764b62a4454 100644
--- a/src/plugins/vis_builder/public/application/components/data_tab/index.tsx
+++ b/src/plugins/vis_builder/public/application/components/data_tab/index.tsx
@@ -20,6 +20,7 @@ import { addFieldToConfiguration } from './drag_drop/add_field_to_configuration'
 import { replaceFieldInConfiguration } from './drag_drop/replace_field_in_configuration';
 import { reorderFieldsWithinSchema } from './drag_drop/reorder_fields_within_schema';
 import { moveFieldBetweenSchemas } from './drag_drop/move_field_between_schemas';
+import { validateAggregations } from '../../utils/validations';
 
 export const DATA_TAB_ID = 'data_tab';
 
@@ -39,6 +40,7 @@ export const DataTab = () => {
       data: {
         search: { aggs: aggService },
       },
+      notifications: { toasts },
     },
   } = useOpenSearchDashboards<VisBuilderServices>();
 
@@ -77,6 +79,17 @@ export const DataTab = () => {
       }
 
       const panelGroups = Array.from(schemas.all.map((schema) => schema.name));
+      // Check schema order
+      if (destinationSchemaName === 'split') {
+        const validationResult = validateAggregations(aggProps.aggs, schemas.all);
+        if (!validationResult.valid) {
+          toasts.addWarning({
+            title: 'vb_invalid_schema',
+            text: validationResult.errorMsg,
+          });
+          return;
+        }
+      }
 
       if (destinationSchemaName.startsWith(ADD_PANEL_PREFIX)) {
         const updatedDestinationSchemaName = destinationSchemaName.split(ADD_PANEL_PREFIX)[1];
diff --git a/src/plugins/vis_builder/public/application/utils/validations/validate_aggregations.test.ts b/src/plugins/vis_builder/public/application/utils/validations/validate_aggregations.test.ts
index bec1ae506928..a0b8c7be24f9 100644
--- a/src/plugins/vis_builder/public/application/utils/validations/validate_aggregations.test.ts
+++ b/src/plugins/vis_builder/public/application/utils/validations/validate_aggregations.test.ts
@@ -96,4 +96,80 @@ describe('validateAggregations', () => {
     expect(valid).toBe(true);
     expect(errorMsg).not.toBeDefined();
   });
+
+  test('Split chart should be first in the configuration', () => {
+    const aggConfigs = dataStart.search.aggs.createAggConfigs(indexPattern as IndexPattern, [
+      {
+        id: '0',
+        enabled: true,
+        type: BUCKET_TYPES.TERMS,
+        schema: 'group',
+        params: {},
+      },
+      {
+        id: '1',
+        enabled: true,
+        type: BUCKET_TYPES.TERMS,
+        schema: 'split',
+        params: {},
+      },
+    ]);
+
+    const schemas = [{ name: 'split', mustBeFirst: true }, { name: 'group' }];
+
+    const { valid, errorMsg } = validateAggregations(aggConfigs.aggs, schemas);
+
+    expect(valid).toBe(false);
+    expect(errorMsg).toMatchInlineSnapshot(`"Split chart must be first in the configuration."`);
+  });
+
+  test('Valid configuration with split chart first', () => {
+    const aggConfigs = dataStart.search.aggs.createAggConfigs(indexPattern as IndexPattern, [
+      {
+        id: '0',
+        enabled: true,
+        type: BUCKET_TYPES.TERMS,
+        schema: 'split',
+        params: {},
+      },
+      {
+        id: '2',
+        enabled: true,
+        type: METRIC_TYPES.COUNT,
+        schema: 'metric',
+        params: {},
+      },
+    ]);
+
+    const schemas = [{ name: 'split', mustBeFirst: true }, { name: 'metric' }];
+
+    const { valid, errorMsg } = validateAggregations(aggConfigs.aggs, schemas);
+
+    expect(valid).toBe(true);
+    expect(errorMsg).toBeUndefined();
+  });
+
+  test('Valid configuration when schemas are not provided', () => {
+    const aggConfigs = dataStart.search.aggs.createAggConfigs(indexPattern as IndexPattern, [
+      {
+        id: '0',
+        enabled: true,
+        type: BUCKET_TYPES.TERMS,
+        schema: 'group',
+        params: {},
+      },
+      {
+        id: '1',
+        enabled: true,
+        type: BUCKET_TYPES.TERMS,
+        schema: 'split',
+        params: {},
+      },
+    ]);
+
+    const { valid, errorMsg } = validateAggregations(aggConfigs.aggs);
+
+    expect(valid).toBe(true);
+    expect(errorMsg).not.toBeDefined();
+  });
 });
diff --git a/src/plugins/vis_builder/public/application/utils/validations/validate_aggregations.ts b/src/plugins/vis_builder/public/application/utils/validations/validate_aggregations.ts
index 470c83e96895..37dde685a14c 100644
--- a/src/plugins/vis_builder/public/application/utils/validations/validate_aggregations.ts
+++ b/src/plugins/vis_builder/public/application/utils/validations/validate_aggregations.ts
@@ -12,9 +12,10 @@ import { ValidationResult } from './types';
 /**
  * Validate if the aggregations to perform are possible
  * @param aggs Aggregations to be performed
+ * @param schemas Optional. All available schemas
  * @returns ValidationResult
  */
-export const validateAggregations = (aggs: AggConfig[]): ValidationResult => {
+export const validateAggregations = (aggs: AggConfig[], schemas?: any[]): ValidationResult => {
   // Pipeline aggs should have a valid bucket agg
   const metricAggs = aggs.filter((agg) => agg.schema === 'metric');
   const lastParentPipelineAgg = findLast(
@@ -50,5 +51,18 @@ export const validateAggregations = (aggs: AggConfig[]): ValidationResult => {
     };
   }
 
+  const splitSchema = schemas?.find((s) => s.name === 'split');
+  if (splitSchema?.mustBeFirst) {
+    const firstGroupSchemaIndex = aggs.findIndex((item) => item.schema === 'group');
+    if (firstGroupSchemaIndex !== -1) {
+      return {
+        valid: false,
+        errorMsg: i18n.translate('visBuilder.aggregation.splitChartOrderErrorMessage', {
+          defaultMessage: 'Split chart must be first in the configuration.',
+        }),
+      };
+    }
+  }
+
   return { valid: true };
 };
diff --git a/src/plugins/vis_builder/public/plugin.ts b/src/plugins/vis_builder/public/plugin.ts
index 20b13281e53b..216feafe187a 100644
--- a/src/plugins/vis_builder/public/plugin.ts
+++ b/src/plugins/vis_builder/public/plugin.ts
@@ -57,6 +57,7 @@ import {
 } from '../../opensearch_dashboards_utils/public';
 import { opensearchFilters } from '../../data/public';
 import { createRawDataVisFn } from './visualizations/vega/utils/expression_helper';
+import { VISBUILDER_ENABLE_VEGA_SETTING } from '../common/constants';
 
 export class VisBuilderPlugin
   implements
@@ -107,7 +108,7 @@ export class VisBuilderPlugin
 
     // Register Default Visualizations
     const typeService = this.typeService;
-    registerDefaultTypes(typeService.setup());
+    registerDefaultTypes(typeService.setup(), core.uiSettings.get(VISBUILDER_ENABLE_VEGA_SETTING));
     exp.registerFunction(createRawDataVisFn());
 
     // Register the plugin to core
diff --git a/src/plugins/vis_builder/public/services/type_service/types.ts b/src/plugins/vis_builder/public/services/type_service/types.ts
index 0c232829431c..7f2a132fa752 100644
--- a/src/plugins/vis_builder/public/services/type_service/types.ts
+++ b/src/plugins/vis_builder/public/services/type_service/types.ts
@@ -34,4 +34,5 @@ export interface VisualizationTypeOptions<T = any> {
     searchContext: IExpressionLoaderParams['searchContext'],
     useVega: boolean
   ) => Promise<string | undefined>;
+  readonly hierarchicalData?: boolean | ((vis: { params: T }) => boolean);
 }
diff --git a/src/plugins/vis_builder/public/visualizations/index.ts b/src/plugins/vis_builder/public/visualizations/index.ts
index c867e570143e..6efa77dbf869 100644
--- a/src/plugins/vis_builder/public/visualizations/index.ts
+++ b/src/plugins/vis_builder/public/visualizations/index.ts
@@ -6,10 +6,32 @@
 import type { TypeServiceSetup } from '../services/type_service';
 import { createMetricConfig } from './metric';
 import { createTableConfig } from './table';
-import { createHistogramConfig, createLineConfig, createAreaConfig } from './vislib';
+import {
+  createHistogramConfig,
+  createLineConfig,
+  createAreaConfig,
+  createPieConfig,
+} from './vislib';
+import { VisualizationTypeOptions } from '../services/type_service';
+import {
+  HistogramOptionsDefaults,
+  LineOptionsDefaults,
+  AreaOptionsDefaults,
+  PieOptionsDefaults,
+} from './vislib';
+import { MetricOptionsDefaults } from './metric/metric_viz_type';
+import { TableOptionsDefaults } from './table/table_viz_type';
 
-export function registerDefaultTypes(typeServiceSetup: TypeServiceSetup) {
-  const visualizationTypes = [
+type VisualizationConfigFunction =
+  | (() => VisualizationTypeOptions<HistogramOptionsDefaults>)
+  | (() => VisualizationTypeOptions<LineOptionsDefaults>)
+  | (() => VisualizationTypeOptions<AreaOptionsDefaults>)
+  | (() => VisualizationTypeOptions<MetricOptionsDefaults>)
+  | (() => VisualizationTypeOptions<TableOptionsDefaults>)
+  | (() => VisualizationTypeOptions<PieOptionsDefaults>);
+
+export function registerDefaultTypes(typeServiceSetup: TypeServiceSetup, useVega: boolean) {
+  const visualizationTypes: VisualizationConfigFunction[] = [
     createHistogramConfig,
     createLineConfig,
     createAreaConfig,
@@ -17,6 +39,8 @@ export function registerDefaultTypes(typeServiceSetup: TypeServiceSetup) {
     createTableConfig,
   ];
 
+  if (useVega) visualizationTypes.push(createPieConfig);
+
   visualizationTypes.forEach((createTypeConfig) => {
     typeServiceSetup.createVisualizationType(createTypeConfig());
   });
diff --git a/src/plugins/vis_builder/public/visualizations/vega/components/mark.test.ts b/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark.test.ts
similarity index 100%
rename from src/plugins/vis_builder/public/visualizations/vega/components/mark.test.ts
rename to src/plugins/vis_builder/public/visualizations/vega/components/mark/mark.test.ts
diff --git a/src/plugins/vis_builder/public/visualizations/vega/components/mark.ts b/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark.ts
similarity index 98%
rename from src/plugins/vis_builder/public/visualizations/vega/components/mark.ts
rename to src/plugins/vis_builder/public/visualizations/vega/components/mark/mark.ts
index dd85544dd839..6e717960e7f2 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/components/mark.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark.ts
@@ -4,7 +4,7 @@
  */
 
 import { AxisFormats } from '../utils/types';
-import { buildAxes } from './axes';
+import { buildAxes } from '../axes';
 
 export type VegaMarkType =
   | 'line'
@@ -87,7 +87,7 @@ export const buildMarkForVegaLite = (vegaType: string): VegaLiteMark => {
 };
 
 /**
- * Builds a mark configuration for Vega based on the chart type.
+ * Builds a mark configuration for Vega useing series data based on the chart type.
  *
  * @param {VegaMarkType} chartType - The type of chart to build the mark for.
  * @param {any} dimensions - The dimensions of the data.
diff --git a/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark_slices.test.ts b/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark_slices.test.ts
new file mode 100644
index 000000000000..b14fe365a14e
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark_slices.test.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { buildSlicesMarkForVega, buildPieMarks, buildArcMarks } from './mark_slices';
+
+describe('buildSlicesMarkForVega', () => {
+  it('should return a group mark with correct properties', () => {
+    const result = buildSlicesMarkForVega(['level1', 'level2'], true, true);
+    expect(result.type).toBe('group');
+    expect(result.from).toEqual({ data: 'splits' });
+    expect(result.encode.enter.width).toEqual({ signal: 'chartWidth' });
+    expect(result.title).toBeDefined();
+    expect(result.data).toBeDefined();
+    expect(result.marks).toBeDefined();
+  });
+
+  it('should handle non-split case correctly', () => {
+    const result = buildSlicesMarkForVega(['level1'], false, true);
+    expect(result.from).toBeNull();
+    expect(result.encode.enter.width).toEqual({ signal: 'width' });
+    expect(result.title).toBeNull();
+  });
+});
+
+describe('buildPieMarks', () => {
+  it('should create correct number of marks', () => {
+    const result = buildPieMarks(['level1', 'level2'], true);
+    expect(result).toHaveLength(2);
+  });
+
+  it('should create correct transformations', () => {
+    const result = buildPieMarks(['level1'], true);
+    expect(result[0].transform).toHaveLength(3);
+    expect(result[0].transform[0].type).toBe('filter');
+    expect(result[0].transform[1].type).toBe('aggregate');
+    expect(result[0].transform[2].type).toBe('pie');
+  });
+});
+
+describe('buildArcMarks', () => {
+  it('should create correct number of arc marks', () => {
+    const result = buildArcMarks(['level1', 'level2'], false);
+    expect(result).toHaveLength(2);
+    expect(result[0].encode.update.tooltip).toBeUndefined();
+  });
+
+  it('should create arc marks with correct properties', () => {
+    const result = buildArcMarks(['level1'], true);
+    expect(result[0].type).toBe('arc');
+    expect(result[0].encode.enter.fill).toBeDefined();
+    expect(result[0].encode.update.startAngle).toBeDefined();
+    expect(result[0].encode.update.tooltip).toBeDefined();
+  });
+});
diff --git a/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark_slices.ts b/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark_slices.ts
new file mode 100644
index 000000000000..0fba717a2ce2
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vega/components/mark/mark_slices.ts
@@ -0,0 +1,121 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Builds a mark configuration for Vega using slices data.
+ *
+ * @param {string[]} levels - The array of hierarchy levels.
+ * @param {boolean} hasSplit - Indicates whether we have split data.
+ * @returns {Object} An object containing a single group mark configuration.
+ */
+export const buildSlicesMarkForVega = (levels: string[], hasSplit: boolean, addTooltip) => {
+  return {
+    type: 'group',
+    // If we have splits, use the 'splits' data, otherwise no specific data source
+    from: hasSplit ? { data: 'splits' } : null,
+    encode: {
+      enter: {
+        // Set width based on whether we have splits or not
+        width: { signal: hasSplit ? 'chartWidth' : 'width' },
+        height: { signal: 'chartHeight' },
+      },
+    },
+    // Define signals for facet dimensions
+    signals: [
+      { name: 'facetWidth', update: hasSplit ? 'chartWidth' : 'width' },
+      { name: 'facetHeight', update: 'height' },
+    ],
+    // Add a title if have splits
+    title: hasSplit
+      ? {
+          text: { signal: 'parent.split' },
+          frame: 'group',
+          baseline: 'bottom', // Align the text to the bottom
+          orient: 'bottom', // Position the title at the bottom
+          offset: 20,
+          limit: { signal: 'chartWidth' }, // This limits the title width
+          ellipsis: '...', // Add ellipsis for truncated text
+        }
+      : null,
+    // Build the data for each level of the pie
+    data: buildPieMarks(levels, hasSplit),
+    // Build the arc marks for each level of the pie
+    marks: buildArcMarks(levels, addTooltip),
+  };
+};
+
+/**
+ * Builds the data transformations for each level of the pie chart.
+ *
+ * @param {string[]} levels - The array of hierarchy levels.
+ * @param {boolean} hasSplit - Indicates whether we have split data.
+ * @returns {Object[]} An array of data transformation configurations for each level.
+ */
+export const buildPieMarks = (levels: string[], hasSplit: boolean) => {
+  return levels.map((level, index) => ({
+    name: `facet_${level}`,
+    source: 'table',
+    transform: [
+      // Filter data if we have splits
+      {
+        type: 'filter',
+        expr: hasSplit ? `datum.split === parent.split` : 'true',
+      },
+      // Aggregate data for this level
+      {
+        type: 'aggregate',
+        groupby: levels.slice(0, index + 1),
+        fields: ['value'],
+        ops: ['sum'],
+        as: ['sum_value'],
+      },
+      // Create pie layout
+      { type: 'pie', field: 'sum_value' },
+    ],
+  }));
+};
+
+/**
+ * Builds the arc marks for each level of the pie chart.
+ *
+ * @param {string[]} levels - The array of hierarchy levels.
+ * @returns {Object[]} An array of arc mark configurations for each level.
+ */
+export const buildArcMarks = (levels: string[], addTooltip) => {
+  return levels.map((level, index) => ({
+    type: 'arc',
+    from: { data: `facet_${level}` },
+    encode: {
+      enter: {
+        // Set fill color based on the current level
+        fill: { scale: 'color', field: level },
+        // Center the arc
+        x: { signal: 'facetWidth / 2' },
+        y: { signal: 'facetHeight / 2' },
+      },
+      update: {
+        // Set arc angles and dimensions
+        startAngle: { field: 'startAngle' },
+        endAngle: { field: 'endAngle' },
+        padAngle: { value: 0.01 },
+        innerRadius: { signal: `innerRadius + thickness * ${index}` },
+        outerRadius: { signal: `innerRadius + thickness * (${index} + 1)` },
+        stroke: { value: 'white' },
+        strokeWidth: { value: 2 },
+        // Create tooltip with all relevant level data
+        ...(addTooltip
+          ? {
+              tooltip: {
+                signal: `{${levels
+                  .slice(0, index + 1)
+                  .map((l) => `'${l}': datum.${l}`)
+                  .join(', ')}, 'Value': datum.sum_value}`,
+              },
+            }
+          : {}),
+      },
+    },
+  }));
+};
diff --git a/src/plugins/vis_builder/public/visualizations/vega/utils/expression_helper.test.ts b/src/plugins/vis_builder/public/visualizations/vega/utils/expression_helper.test.ts
index dd26df5219c2..302de1ad727e 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/utils/expression_helper.test.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/utils/expression_helper.test.ts
@@ -5,6 +5,7 @@
 
 import { createRawDataVisFn, executeExpression } from './expression_helper';
 import { getExpressionsService } from '../../../../../expressions/public';
+import { ExecutionContext, OpenSearchDashboardsDatatable } from '../../../../../expressions/public';
 
 jest.mock('../../../../../expressions/public', () => ({
   getExpressionsService: jest.fn(),
@@ -22,7 +23,15 @@ describe('expression_helper.ts', () => {
     it('should return the input context unchanged', () => {
       const result = createRawDataVisFn();
       const context = { some: 'data' };
-      expect(result.fn(context as any)).toBe(context);
+      const mockArgs = {};
+      const mockHandlers: ExecutionContext<OpenSearchDashboardsDatatable, {}> = {
+        getInitialInput: jest.fn(),
+        variables: {},
+        types: {},
+        abortSignal: new AbortController().signal,
+        inspectorAdapters: {},
+      };
+      expect(result.fn(context as any, mockArgs, mockHandlers)).toBe(context);
     });
   });
 
diff --git a/src/plugins/vis_builder/public/visualizations/vega/utils/expression_helper.ts b/src/plugins/vis_builder/public/visualizations/vega/utils/expression_helper.ts
index 2967fa177983..9b71ce408a0c 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/utils/expression_helper.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/utils/expression_helper.ts
@@ -27,7 +27,11 @@ export const createRawDataVisFn = (): ExpressionFunctionDefinition<
   inputTypes: ['opensearch_dashboards_datatable'],
   help: 'Returns raw data from opensearchaggs without modification',
   args: {},
-  fn(context: OpenSearchDashboardsDatatable): OpenSearchDashboardsDatatable {
+  fn(
+    context: OpenSearchDashboardsDatatable,
+    args?: {},
+    handlers?: {}
+  ): OpenSearchDashboardsDatatable {
     // Simply return the input context, which should be the opensearchaggs result
     return context;
   },
diff --git a/src/plugins/vis_builder/public/visualizations/vega/utils/helpers.test.ts b/src/plugins/vis_builder/public/visualizations/vega/utils/helpers.test.ts
index 92576d1a608b..4b210ea9b497 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/utils/helpers.test.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/utils/helpers.test.ts
@@ -5,7 +5,7 @@
 
 import { flattenDataHandler, mapFieldTypeToVegaType, mapChartTypeToVegaType } from './helpers';
 
-// Mock the vislibSeriesResponseHandler
+// Mock the vislibSeriesResponseHandler and vislibSlicesResponseHandler
 jest.mock('../../../../../vis_type_vislib/public', () => ({
   vislibSeriesResponseHandler: jest.fn((context, dimensions) => {
     if (dimensions.splitRow || dimensions.splitColumn) {
@@ -18,6 +18,11 @@ jest.mock('../../../../../vis_type_vislib/public', () => ({
       };
     }
   }),
+  vislibSlicesResponseHandler: jest.fn((context) => {
+    return {
+      slices: context.slices,
+    };
+  }),
 }));
 
 describe('helpers.ts', () => {
@@ -66,13 +71,108 @@ describe('helpers.ts', () => {
       expect(result.series[0]).toEqual({ x: 1, y: 10, series: 'Series 1' });
       expect(result.series[1]).toEqual({ x: 2, y: 20, series: 'Series 1' });
     });
+
+    it('should flatten slice data correctly', () => {
+      const context = {
+        slices: {
+          children: [
+            {
+              name: 'Category A',
+              children: [
+                { name: 'Subcategory 1', size: 10 },
+                { name: 'Subcategory 2', size: 20 },
+              ],
+            },
+          ],
+        },
+      };
+      const dimensions = {};
+      const result = flattenDataHandler(context, dimensions, 'slices');
+
+      expect(result.slices).toHaveLength(2);
+      expect(result.slices[0]).toEqual({
+        level1: 'Category A',
+        level2: 'Subcategory 1',
+        value: 10,
+      });
+      expect(result.slices[1]).toEqual({
+        level1: 'Category A',
+        level2: 'Subcategory 2',
+        value: 20,
+      });
+      expect(result.levels).toEqual(['level1', 'level2']);
+    });
+
+    it('should handle slice data with splits', () => {
+      const context = {
+        slices: {
+          children: [
+            {
+              name: 'Category A',
+              children: [{ name: 'Subcategory 1', size: 10 }],
+            },
+          ],
+        },
+      };
+      const dimensions = { splitRow: [{}] };
+      const result = flattenDataHandler(context, dimensions, 'slices');
+
+      expect(result.slices).toHaveLength(1);
+      expect(result.slices[0]).toEqual({
+        level1: 'Category A',
+        level2: 'Subcategory 1',
+        value: 10,
+        split: undefined,
+      });
+    });
+
+    it('should handle z-values in series data', () => {
+      const context = {
+        series: [
+          {
+            label: 'Series 1',
+            values: [
+              { x: 1, y: 10, z: 5 },
+              { x: 2, y: 20, z: 10 },
+            ],
+          },
+        ],
+      };
+      const dimensions = {};
+      const result = flattenDataHandler(context, dimensions);
+
+      expect(result.series).toHaveLength(2);
+      expect(result.series[0]).toEqual({ x: 1, y: 10, z: 5, series: 'Series 1' });
+      expect(result.series[1]).toEqual({ x: 2, y: 20, z: 10, series: 'Series 1' });
+    });
+
+    it('should throw an error if series values are not an array', () => {
+      const context = {
+        series: [
+          {
+            label: 'Series 1',
+            values: 'not an array',
+          },
+        ],
+      };
+      const dimensions = {};
+
+      expect(() => flattenDataHandler(context, dimensions)).toThrow(
+        'Each series must have a "values" array'
+      );
+    });
   });
 
   describe('mapFieldTypeToVegaType', () => {
     it('should map OpenSearch field types to Vega data types', () => {
       expect(mapFieldTypeToVegaType('number')).toBe('quantitative');
       expect(mapFieldTypeToVegaType('date')).toBe('temporal');
+      expect(mapFieldTypeToVegaType('time')).toBe('temporal');
+      expect(mapFieldTypeToVegaType('terms')).toBe('nominal');
       expect(mapFieldTypeToVegaType('keyword')).toBe('nominal');
+      expect(mapFieldTypeToVegaType('ip')).toBe('nominal');
+      expect(mapFieldTypeToVegaType('boolean')).toBe('nominal');
+      expect(mapFieldTypeToVegaType('histogram')).toBe('quantitative');
       expect(mapFieldTypeToVegaType('unknown')).toBe('nominal');
     });
   });
@@ -81,6 +181,9 @@ describe('helpers.ts', () => {
     it('should map chart types to Vega mark types', () => {
       expect(mapChartTypeToVegaType('histogram')).toBe('bar');
       expect(mapChartTypeToVegaType('line')).toBe('line');
+      expect(mapChartTypeToVegaType('area')).toBe('area');
+      expect(mapChartTypeToVegaType('bar')).toBe('bar');
+      expect(mapChartTypeToVegaType('pie')).toBe('pie');
     });
   });
 });
diff --git a/src/plugins/vis_builder/public/visualizations/vega/utils/helpers.ts b/src/plugins/vis_builder/public/visualizations/vega/utils/helpers.ts
index e15edf1ac795..e77e1460e7ae 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/utils/helpers.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/utils/helpers.ts
@@ -37,7 +37,7 @@ interface Series {
   values: SeriesValue[];
 }
 
-interface FlattenedSeriesItem extends SeriesValue {
+export interface FlattenedSeriesItem extends SeriesValue {
   series: string;
   split?: string;
 }
@@ -79,30 +79,93 @@ const flattenSeries = (
   });
 };
 
+export interface FlattenedSliceItem {
+  [key: string]: any;
+  value: number;
+  split?: string;
+}
+
+export interface FlattenHierarchyResult {
+  flattenedData: FlattenedSliceItem[];
+  levels: string[];
+}
+
+/**
+ * Flattens hierarchical slice data into a single array of data points
+ * @param {any} data - The hierarchical data to flatten
+ * @param {any[]} group - The group data (rows or columns) if split dimensions exist
+ * @returns {FlattenedSliceItem[]} Flattened array of data points
+ */
+const flattenHierarchy = (data, group): FlattenHierarchyResult => {
+  const flattenedData: FlattenedSliceItem[] = [];
+  const levelSet = new Set<string>();
+
+  const flattenSlices = (
+    slices: any,
+    split?: string,
+    level = 1,
+    parentLabels: { [key: string]: string } = {}
+  ) => {
+    slices.children.forEach((child: any) => {
+      const currentLabels = { ...parentLabels, [`level${level}`]: child.name };
+      levelSet.add(`level${level}`);
+
+      if (Array.isArray(child.children) && child.children.length > 0) {
+        flattenSlices(child, split, level + 1, currentLabels);
+      } else {
+        const dataPoint: FlattenedSliceItem = {
+          ...currentLabels,
+          value: child.size !== undefined ? child.size : null,
+        };
+        if (split !== undefined) {
+          dataPoint.split = split;
+        }
+        flattenedData.push(dataPoint);
+      }
+    });
+  };
+
+  if (Array.isArray(group) && group.length !== 0) {
+    group.forEach((splitData) => {
+      flattenSlices(splitData.slices, splitData.label);
+    });
+  } else {
+    flattenSlices(data.slices, undefined);
+  }
+
+  return { flattenedData, levels: Array.from(levelSet) };
+};
+
+/**
+ * Handles the flattening of data for different chart types
+ * @param {any} context - The context object containing the data
+ * @param {any} dimensions - The dimensions object defining the chart structure
+ * @param {'series' | 'slices'} handlerType - The type of chart data to handle
+ * @returns {any} Converted and flattened data suitable for visualization
+ */
 export const flattenDataHandler = (context, dimensions, handlerType = 'series') => {
-  // Currently, our vislib only supports 'series' or 'slices' response types.
-  // This will need to be updated if more types are added in the future.
+  // TODO: Update this func if more types are added in the future.
   const handler =
     handlerType === 'series' ? vislibSeriesResponseHandler : vislibSlicesResponseHandler;
   const converted = handler(context, dimensions);
+  const group = dimensions.splitRow
+    ? converted.rows
+    : dimensions.splitColumn
+    ? converted.columns
+    : [];
 
   if (handlerType === 'series') {
     // Determine the group based on split dimensions
-    const group = dimensions.splitRow
-      ? converted.rows
-      : dimensions.splitColumn
-      ? converted.columns
-      : [];
-
-    if (group && group.length !== 0) {
+    if (Array.isArray(group) && group.length !== 0) {
       converted.series = group.flatMap((split) => flattenSeries(split.series, split.label));
       setAxisProperties(converted, group);
     } else {
       converted.series = flattenSeries(converted.series);
     }
   } else if (handlerType === 'slices') {
-    // TODO: Handle slices data, such as pie charts
-    // This section should be implemented when support for slice-based charts is added
+    const { flattenedData, levels } = flattenHierarchy(converted, group);
+    converted.slices = flattenedData;
+    converted.levels = levels;
   }
 
   return converted;
diff --git a/src/plugins/vis_builder/public/visualizations/vega/utils/types.ts b/src/plugins/vis_builder/public/visualizations/vega/utils/types.ts
index 855d88fd145e..1b5c630788f2 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/utils/types.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/utils/types.ts
@@ -4,7 +4,8 @@
  */
 
 import { VegaEncoding } from '../components/encoding';
-import { VegaLiteMark } from '../components/mark';
+import { VegaLiteMark } from '../components/mark/mark';
+
 export interface AxisFormat {
   id: string;
 }
@@ -76,7 +77,7 @@ export interface VegaSpec {
   }>;
   layout?: {
     [key: string]: any;
-  };
+  } | null;
   marks: Array<{
     type: string;
     from?: any;
diff --git a/src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_builder.test.ts b/src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_series_builder.test.ts
similarity index 81%
rename from src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_builder.test.ts
rename to src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_series_builder.test.ts
index 0f1f25b1e762..e5c0a2a93fce 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_builder.test.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_series_builder.test.ts
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { generateVegaLiteSpec } from './vega_lite_spec_builder';
+import { generateVegaLiteSpecForSeries } from './vega_lite_spec_series_builder';
 
-describe('generateVegaLiteSpec', () => {
+describe('generateVegaLiteSpecForSeries', () => {
   it('should generate a basic Vega-Lite specification', () => {
     const data = {
       xAxisFormat: { id: 'date' },
@@ -22,7 +22,7 @@ describe('generateVegaLiteSpec', () => {
     };
     const style = { type: 'line' };
 
-    const result = generateVegaLiteSpec(data, visConfig, style);
+    const result = generateVegaLiteSpecForSeries(data, visConfig, style);
 
     expect(result.$schema).toBe('https://vega.github.io/schema/vega-lite/v5.json');
     expect(result.data).toBeDefined();
@@ -45,10 +45,10 @@ describe('generateVegaLiteSpec', () => {
       addTooltip: true,
     };
 
-    const lineResult = generateVegaLiteSpec(data, visConfig, { type: 'line' });
+    const lineResult = generateVegaLiteSpecForSeries(data, visConfig, { type: 'line' });
     expect(lineResult.mark).toEqual({ type: 'line', point: true, tooltip: true });
 
-    const areaResult = generateVegaLiteSpec(data, visConfig, { type: 'area' });
+    const areaResult = generateVegaLiteSpecForSeries(data, visConfig, { type: 'area' });
     expect(areaResult.mark).toEqual({
       type: 'area',
       line: true,
@@ -58,7 +58,7 @@ describe('generateVegaLiteSpec', () => {
       baseline: 0,
     });
 
-    const barResult = generateVegaLiteSpec(data, visConfig, { type: 'bar' });
+    const barResult = generateVegaLiteSpecForSeries(data, visConfig, { type: 'bar' });
     expect(barResult.mark).toEqual({ type: 'bar', tooltip: true });
   });
 
@@ -78,7 +78,7 @@ describe('generateVegaLiteSpec', () => {
     };
     const style = { type: 'line' };
 
-    const result = generateVegaLiteSpec(data, visConfig, style);
+    const result = generateVegaLiteSpecForSeries(data, visConfig, style);
 
     expect(result.config).toBeDefined();
     expect(result.config!.legend).toBeDefined();
@@ -101,7 +101,7 @@ describe('generateVegaLiteSpec', () => {
     };
     const style = { type: 'line' };
 
-    const result = generateVegaLiteSpec(data, visConfig, style);
+    const result = generateVegaLiteSpecForSeries(data, visConfig, style);
 
     expect(result.encoding!.tooltip).toBeDefined();
     expect(result.mark).toHaveProperty('tooltip', true);
diff --git a/src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_builder.ts b/src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_series_builder.ts
similarity index 97%
rename from src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_builder.ts
rename to src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_series_builder.ts
index 6110b3f75ed9..347f3a5299ba 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_builder.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/vega_lite_spec_series_builder.ts
@@ -4,7 +4,7 @@
  */
 
 import { buildVegaLiteEncoding } from './components/encoding';
-import { buildMarkForVegaLite, VegaMarkType } from './components/mark';
+import { buildMarkForVegaLite, VegaMarkType } from './components/mark/mark';
 import { buildTooltip } from './components/tooltip';
 import { buildLegend } from './components/legend';
 import { StyleState } from '../../application/utils/state_management';
@@ -19,7 +19,7 @@ import { mapChartTypeToVegaType } from './utils/helpers';
  * @param {StyleState} style - The StyleState defined in style slice.
  * @returns {VegaLiteSpec} The complete Vega-Lite specification.
  */
-export const generateVegaLiteSpec = (
+export const generateVegaLiteSpecForSeries = (
   data: any,
   visConfig: any,
   style: StyleState
diff --git a/src/plugins/vis_builder/public/visualizations/vega/vega_spec_factory.ts b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_factory.ts
index b1ea168e8279..ba01c48e4ad5 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/vega_spec_factory.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_factory.ts
@@ -5,8 +5,9 @@
 
 import { StyleState } from '../../application/utils/state_management';
 import { flattenDataHandler } from './utils/helpers';
-import { generateVegaLiteSpec } from './vega_lite_spec_builder';
-import { generateVegaSpec } from './vega_spec_builder';
+import { generateVegaLiteSpecForSeries } from './vega_lite_spec_series_builder';
+import { generateVegaSpecForSeries } from './vega_spec_series_builder';
+import { generateVegaSpecForSlices } from './vega_spec_slices_builder';
 import { VegaLiteSpec, VegaSpec } from './utils/types';
 
 /**
@@ -25,15 +26,26 @@ export const createVegaSpec = (
   const { dimensions } = visConfig;
 
   // Transform the data using the flattenDataHandler
-  const transformedData = flattenDataHandler(context, dimensions, 'series');
+  const handler = style.type !== 'pie' ? 'series' : 'slices';
+  const transformedData = flattenDataHandler(context, dimensions, handler);
 
+  return handler === 'series'
+    ? createVegaSpecForSeriesData(dimensions, transformedData, visConfig, style)
+    : createVegaSpecForSlicesData(dimensions, transformedData, visConfig, style);
+};
+
+const createVegaSpecForSeriesData = (dimensions, transformedData, visConfig, style) => {
   // Determine whether to use Vega or Vega-Lite based on the presence of split dimensions
   // TODO: Summarize the cases to use Vega. Change this to a better determine function.
   if (dimensions.splitRow || dimensions.splitColumn) {
     // Use Vega for more complex, split visualizations
-    return generateVegaSpec(transformedData, visConfig, style);
+    return generateVegaSpecForSeries(transformedData, visConfig, style);
   } else {
     // Use Vega-Lite for simpler visualizations
-    return generateVegaLiteSpec(transformedData, visConfig, style);
+    return generateVegaLiteSpecForSeries(transformedData, visConfig, style);
   }
 };
+
+const createVegaSpecForSlicesData = (dimensions, transformedData, visConfig, style) => {
+  return generateVegaSpecForSlices(transformedData, visConfig, style);
+};
diff --git a/src/plugins/vis_builder/public/visualizations/vega/vega_spec_builder.test.ts b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_series_builder.test.ts
similarity index 77%
rename from src/plugins/vis_builder/public/visualizations/vega/vega_spec_builder.test.ts
rename to src/plugins/vis_builder/public/visualizations/vega/vega_spec_series_builder.test.ts
index 3197e28ae40a..9b2cc424ea84 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/vega_spec_builder.test.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_series_builder.test.ts
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { generateVegaSpec } from './vega_spec_builder';
+import { generateVegaSpecForSeries } from './vega_spec_series_builder';
 
-describe('generateVegaSpec', () => {
+describe('generateVegaSpecForSeries', () => {
   const baseData = {
     xAxisFormat: { id: 'date' },
     xAxisLabel: 'Date',
@@ -26,7 +26,7 @@ describe('generateVegaSpec', () => {
   it('should generate a basic Vega specification', () => {
     const style = { type: 'line' };
 
-    const result = generateVegaSpec(baseData, baseVisConfig, style);
+    const result = generateVegaSpecForSeries(baseData, baseVisConfig, style);
 
     expect(result.$schema).toBe('https://vega.github.io/schema/vega/v5.json');
     expect(result.data).toBeDefined();
@@ -38,7 +38,7 @@ describe('generateVegaSpec', () => {
   it('should handle area charts', () => {
     const style = { type: 'area' };
 
-    const result = generateVegaSpec(baseData, baseVisConfig, style);
+    const result = generateVegaSpecForSeries(baseData, baseVisConfig, style);
 
     expect(result.data).toBeDefined();
     expect(result.data?.some((d) => d.name === 'stacked')).toBe(true);
@@ -48,7 +48,7 @@ describe('generateVegaSpec', () => {
   it('should add legend when specified', () => {
     const style = { type: 'line' };
 
-    const result = generateVegaSpec(baseData, baseVisConfig, style);
+    const result = generateVegaSpecForSeries(baseData, baseVisConfig, style);
 
     expect(result.legends).toBeDefined();
     expect(result.legends?.[0]?.orient).toBe('right');
@@ -61,7 +61,7 @@ describe('generateVegaSpec', () => {
     };
     const style = { type: 'line' };
 
-    const result = generateVegaSpec(baseData, visConfigNoLegend, style);
+    const result = generateVegaSpecForSeries(baseData, visConfigNoLegend, style);
 
     expect(result.legends).toBeUndefined();
   });
diff --git a/src/plugins/vis_builder/public/visualizations/vega/vega_spec_builder.ts b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_series_builder.ts
similarity index 96%
rename from src/plugins/vis_builder/public/visualizations/vega/vega_spec_builder.ts
rename to src/plugins/vis_builder/public/visualizations/vega/vega_spec_series_builder.ts
index 90181a8e5513..7f77cf85d553 100644
--- a/src/plugins/vis_builder/public/visualizations/vega/vega_spec_builder.ts
+++ b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_series_builder.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { buildMarkForVega, VegaMarkType } from './components/mark';
+import { buildMarkForVega, VegaMarkType } from './components/mark/mark';
 import { buildLegend } from './components/legend';
 import { VegaSpec, AxisFormats } from './utils/types';
 import { StyleState } from '../../application/utils/state_management';
@@ -17,7 +17,11 @@ import { mapChartTypeToVegaType } from './utils/helpers';
  * @param {StyleState} style - The style configuration for the visualization.
  * @returns {VegaSpec} The complete Vega specification.
  */
-export const generateVegaSpec = (data: any, visConfig: any, style: StyleState): VegaSpec => {
+export const generateVegaSpecForSeries = (
+  data: any,
+  visConfig: any,
+  style: StyleState
+): VegaSpec => {
   const { dimensions, addLegend, legendPosition } = visConfig;
   const { type } = style;
   const vegaType = mapChartTypeToVegaType(type) as VegaMarkType;
diff --git a/src/plugins/vis_builder/public/visualizations/vega/vega_spec_slices_builder.test.ts b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_slices_builder.test.ts
new file mode 100644
index 000000000000..1f4529e5cd27
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_slices_builder.test.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { generateVegaSpecForSlices } from './vega_spec_slices_builder';
+
+// Mock the imported functions
+jest.mock('./components/mark/mark_slices', () => ({
+  buildSlicesMarkForVega: jest.fn(() => ({ type: 'mock-slices-mark' })),
+}));
+
+jest.mock('./components/legend', () => ({
+  buildLegend: jest.fn(() => ({ type: 'mock-legend' })),
+}));
+
+describe('generateVegaSpecForSlices', () => {
+  const mockData = {
+    slices: [{ value: 10 }, { value: 20 }],
+    levels: ['level1', 'level2'],
+  };
+
+  const mockVisConfig = {
+    dimensions: {},
+    addLegend: true,
+    legendPosition: 'right',
+  };
+
+  const mockStyle = {
+    colorSchema: 'custom-schema',
+  };
+
+  it('should generate a valid Vega spec for slices', () => {
+    const result = generateVegaSpecForSlices(mockData, mockVisConfig, mockStyle);
+
+    expect(result.$schema).toBe('https://vega.github.io/schema/vega/v5.json');
+    expect(result.padding).toBe(5);
+    expect(result.signals).toHaveLength(8);
+    expect(result.data).toHaveLength(2);
+    expect(result.scales).toHaveLength(1);
+    expect(result.scales?.[0].range.scheme).toBe('category20');
+    expect(result.marks).toEqual([{ type: 'mock-slices-mark' }]);
+    expect(result.legends).toEqual([{ type: 'mock-legend' }]);
+  });
+
+  it('should handle split data correctly', () => {
+    const splitVisConfig = {
+      ...mockVisConfig,
+      dimensions: { splitRow: true },
+    };
+
+    const result = generateVegaSpecForSlices(mockData, splitVisConfig, mockStyle);
+
+    expect(result.signals?.[0].update).toBe("length(data('splits'))");
+    expect(result.layout).toBeDefined();
+    if (result.layout) expect(result.layout.columns).toEqual({ signal: 'splitCount' });
+  });
+
+  it('should not add legend when addLegend is false', () => {
+    const noLegendVisConfig = {
+      ...mockVisConfig,
+      addLegend: false,
+    };
+
+    const result = generateVegaSpecForSlices(mockData, noLegendVisConfig, mockStyle);
+
+    expect(result.legends).toBeUndefined();
+  });
+
+  it('should use default color schema when not provided in style', () => {
+    const result = generateVegaSpecForSlices(mockData, mockVisConfig, {});
+
+    expect(result.scales?.[0].range.scheme).toBe('category20');
+  });
+});
diff --git a/src/plugins/vis_builder/public/visualizations/vega/vega_spec_slices_builder.ts b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_slices_builder.ts
new file mode 100644
index 000000000000..1651bf2882e6
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vega/vega_spec_slices_builder.ts
@@ -0,0 +1,89 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { VegaSpec } from './utils/types';
+import { buildLegend } from './components/legend';
+import { StyleState } from '../../application/utils/state_management';
+import { buildSlicesMarkForVega } from './components/mark/mark_slices';
+
+/**
+ * Generates a Vega specification for a sliced chart (pie/donut chart).
+ *
+ * @param {any} data - The data object containing slices and levels information.
+ * @param {any} visConfig - The visualization configuration object.
+ * @param {StyleState} style - The style state object.
+ * @returns {VegaSpec} A Vega specification object for the sliced chart.
+ */
+export const generateVegaSpecForSlices = (
+  data: any,
+  visConfig: any,
+  style: StyleState
+): VegaSpec => {
+  const { dimensions, addLegend, addTooltip, legendPosition, isDonut } = visConfig;
+  const { slices, levels } = data;
+  const hasSplit = dimensions.splitRow || dimensions.splitColumn;
+
+  const spec: VegaSpec = {
+    $schema: 'https://vega.github.io/schema/vega/v5.json',
+    padding: 5,
+
+    signals: [
+      { name: 'splitCount', update: hasSplit ? `length(data('splits'))` : '1' },
+      { name: 'levelCount', update: levels.length.toString() },
+      { name: 'chartWidth', update: hasSplit ? 'width / splitCount - 10' : 'width' },
+      { name: 'chartHeight', update: 'height' },
+      { name: 'radius', update: 'min(chartWidth, chartHeight) / 2' },
+      {
+        name: 'innerRadiusRatio',
+        update: isDonut ? 'max(0.1, 0.4 - (levelCount - 1) * 0.05)' : '0',
+      },
+      { name: 'innerRadius', update: 'radius * innerRadiusRatio' },
+      { name: 'thickness', update: '(radius - innerRadius) / levelCount' },
+    ],
+
+    data: [
+      {
+        name: 'table',
+        values: slices,
+        transform: [{ type: 'filter', expr: 'datum.value != null' }],
+      },
+      {
+        name: 'splits',
+        source: 'table',
+        transform: [
+          {
+            type: 'aggregate',
+            groupby: hasSplit ? ['split'] : [],
+          },
+        ],
+      },
+    ],
+
+    scales: [
+      {
+        name: 'color',
+        type: 'ordinal',
+        domain: { data: 'table', fields: levels },
+        range: { scheme: 'category20' },
+      },
+    ],
+
+    layout: hasSplit
+      ? {
+          columns: { signal: 'splitCount' },
+          padding: { row: 40, column: 20 },
+        }
+      : null,
+
+    marks: [buildSlicesMarkForVega(levels, hasSplit, addTooltip)],
+  };
+
+  // Add legend if specified
+  if (addLegend) {
+    spec.legends = [buildLegend(legendPosition, true)];
+  }
+
+  return spec;
+};
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/area/index.ts b/src/plugins/vis_builder/public/visualizations/vislib/area/index.ts
index 7ec1f37a601d..b71df534272c 100644
--- a/src/plugins/vis_builder/public/visualizations/vislib/area/index.ts
+++ b/src/plugins/vis_builder/public/visualizations/vislib/area/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { createAreaConfig } from './area_vis_type';
+export { createAreaConfig, AreaOptionsDefaults } from './area_vis_type';
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/histogram/index.ts b/src/plugins/vis_builder/public/visualizations/vislib/histogram/index.ts
index bba280de2d77..ad52c3072814 100644
--- a/src/plugins/vis_builder/public/visualizations/vislib/histogram/index.ts
+++ b/src/plugins/vis_builder/public/visualizations/vislib/histogram/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { createHistogramConfig } from './histogram_vis_type';
+export { createHistogramConfig, HistogramOptionsDefaults } from './histogram_vis_type';
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/index.ts b/src/plugins/vis_builder/public/visualizations/vislib/index.ts
index 84dc3e346ef5..4f02715d07e8 100644
--- a/src/plugins/vis_builder/public/visualizations/vislib/index.ts
+++ b/src/plugins/vis_builder/public/visualizations/vislib/index.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { createHistogramConfig } from './histogram';
-export { createLineConfig } from './line';
-export { createAreaConfig } from './area';
+export { createHistogramConfig, HistogramOptionsDefaults } from './histogram';
+export { createLineConfig, LineOptionsDefaults } from './line';
+export { createAreaConfig, AreaOptionsDefaults } from './area';
+export { createPieConfig, PieOptionsDefaults } from './pie';
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/line/index.ts b/src/plugins/vis_builder/public/visualizations/vislib/line/index.ts
index 721ec7858a7a..ea3448e7a514 100644
--- a/src/plugins/vis_builder/public/visualizations/vislib/line/index.ts
+++ b/src/plugins/vis_builder/public/visualizations/vislib/line/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { createLineConfig } from './line_vis_type';
+export { createLineConfig, LineOptionsDefaults } from './line_vis_type';
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/pie/components/pie_vis_options.tsx b/src/plugins/vis_builder/public/visualizations/vislib/pie/components/pie_vis_options.tsx
new file mode 100644
index 000000000000..0de536b6e8fd
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vislib/pie/components/pie_vis_options.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback } from 'react';
+import { i18n } from '@osd/i18n';
+import produce, { Draft } from 'immer';
+import { useTypedDispatch, useTypedSelector } from '../../../../application/utils/state_management';
+import { PieOptionsDefaults } from '../pie_vis_type';
+import { setState } from '../../../../application/utils/state_management/style_slice';
+import { Option } from '../../../../application/app';
+import { BasicVisOptions } from '../../common/basic_vis_options';
+import { SwitchOption } from '../../../../../../charts/public';
+
+function PieVisOptions() {
+  const styleState = useTypedSelector((state) => state.style) as PieOptionsDefaults;
+  const dispatch = useTypedDispatch();
+
+  const setOption = useCallback(
+    (callback: (draft: Draft<typeof styleState>) => void) => {
+      const newState = produce(styleState, callback);
+      dispatch(setState<PieOptionsDefaults>(newState));
+    },
+    [dispatch, styleState]
+  );
+
+  return (
+    <>
+      <Option
+        title={i18n.translate('visBuilder.pie.params.settingsTitle', {
+          defaultMessage: 'Settings',
+        })}
+        initialIsOpen
+      >
+        <BasicVisOptions styleState={styleState} setOption={setOption} />
+        <SwitchOption
+          label={i18n.translate('visBuilder.pie.params.isDonutLabel', {
+            defaultMessage: 'Donut',
+          })}
+          paramName="isDonut"
+          value={styleState.isDonut}
+          setValue={(_, value) =>
+            setOption((draft) => {
+              draft.isDonut = value;
+            })
+          }
+        />
+      </Option>
+    </>
+  );
+}
+
+export { PieVisOptions };
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/pie/index.ts b/src/plugins/vis_builder/public/visualizations/vislib/pie/index.ts
new file mode 100644
index 000000000000..d05188e1316e
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vislib/pie/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { createPieConfig, PieOptionsDefaults } from './pie_vis_type';
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/pie/pie_vis_type.ts b/src/plugins/vis_builder/public/visualizations/vislib/pie/pie_vis_type.ts
new file mode 100644
index 000000000000..bdaa3abc4dac
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vislib/pie/pie_vis_type.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+import { Schemas } from '../../../../../vis_default_editor/public';
+import { Positions } from '../../../../../vis_type_vislib/public';
+import { AggGroupNames } from '../../../../../data/public';
+import { PieVisOptions } from './components/pie_vis_options';
+import { VisualizationTypeOptions } from '../../../services/type_service';
+import { toExpression } from './to_expression';
+import { BasicOptionsDefaults } from '../common/types';
+
+export interface PieOptionsDefaults extends BasicOptionsDefaults {
+  type: 'pie';
+  isDonut: boolean;
+  showMetricsAtAllLevels: boolean;
+  labels: {
+    show: boolean;
+    values: boolean;
+    last_level: boolean;
+    truncate: number;
+  };
+}
+
+export const createPieConfig = (): VisualizationTypeOptions<PieOptionsDefaults> => ({
+  name: 'pie',
+  title: 'Pie',
+  icon: 'visPie',
+  description: 'Display pie chart',
+  toExpression,
+  ui: {
+    containerConfig: {
+      data: {
+        schemas: new Schemas([
+          {
+            group: AggGroupNames.Metrics,
+            name: 'metric',
+            title: i18n.translate('visBuilder.pie.metricTitle', {
+              defaultMessage: 'Slice size',
+            }),
+            min: 1,
+            max: 1,
+            aggFilter: ['sum', 'count', 'cardinality', 'top_hits'],
+            defaults: [{ schema: 'metric', type: 'count' }],
+          },
+          {
+            group: AggGroupNames.Buckets,
+            name: 'group',
+            title: i18n.translate('visBuilder.pie.groupTitle', {
+              defaultMessage: 'Split slices',
+            }),
+            min: 0,
+            max: Infinity,
+            aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+            defaults: { aggTypes: ['terms'] },
+          },
+          {
+            group: AggGroupNames.Buckets,
+            name: 'split',
+            title: i18n.translate('visBuilder.pie.splitTitle', {
+              defaultMessage: 'Split chart',
+            }),
+            mustBeFirst: true,
+            min: 0,
+            max: 1,
+            aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
+            defaults: { aggTypes: ['terms'] },
+          },
+        ]),
+      },
+      style: {
+        defaults: {
+          addTooltip: true,
+          addLegend: true,
+          legendPosition: Positions.RIGHT,
+          isDonut: true,
+          showMetricsAtAllLevels: true,
+          type: 'pie',
+          labels: {
+            show: false,
+            values: true,
+            last_level: true,
+            truncate: 100,
+          },
+        },
+        render: PieVisOptions,
+      },
+    },
+  },
+  hierarchicalData: true,
+});
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/pie/to_expression.test.ts b/src/plugins/vis_builder/public/visualizations/vislib/pie/to_expression.test.ts
new file mode 100644
index 000000000000..ca70c19478a7
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vislib/pie/to_expression.test.ts
@@ -0,0 +1,128 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { toExpression } from './to_expression';
+import * as expressionHelpers from '../../common/expression_helpers';
+import * as vegaSpecFactory from '../../vega/vega_spec_factory';
+import * as expressionHelper from '../../vega/utils/expression_helper';
+import * as createVis from '../common/create_vis';
+import * as visualizationsPublic from '../../../../../visualizations/public';
+import * as expressionsPublic from '../../../../../expressions/public';
+
+jest.mock('../../common/expression_helpers');
+jest.mock('../../vega/vega_spec_factory');
+jest.mock('../../vega/utils/expression_helper');
+jest.mock('../common/create_vis');
+jest.mock('../../../../../visualizations/public');
+jest.mock('../../../../../expressions/public');
+
+jest.mock('../../../plugin_services', () => ({
+  getSearchService: jest.fn(() => ({
+    aggs: {
+      createAggConfigs: jest.fn(),
+    },
+  })),
+  getTimeFilter: jest.fn(() => ({
+    getTime: jest.fn(() => ({ from: 'now-7d', to: 'now' })),
+  })),
+}));
+
+describe('pie/to_expression.ts', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should generate vega expression for pie chart', async () => {
+    const mockState = {
+      style: {
+        addLegend: true,
+        addTooltip: true,
+        showMetricsAtAllLevels: true,
+        isDonut: false,
+        legendPosition: 'right',
+        type: 'pie',
+      },
+      visualization: { someConfig: 'value' },
+    };
+    const mockSearchContext = { someContext: 'value' };
+
+    (expressionHelpers.getAggExpressionFunctions as jest.Mock).mockResolvedValue({
+      expressionFns: ['mockFn1', 'mockFn2'],
+      aggConfigs: {},
+      indexPattern: {},
+    });
+
+    (createVis.createVis as jest.Mock).mockResolvedValue({
+      data: {
+        aggs: {
+          getResponseAggs: jest.fn().mockReturnValue([]),
+        },
+      },
+    });
+
+    (visualizationsPublic.getVisSchemas as jest.Mock).mockReturnValue({
+      metric: [{ label: 'Metric' }],
+      group: [{ label: 'Group' }],
+      split_row: [{ label: 'Split Row' }],
+      split_column: [{ label: 'Split Column' }],
+    });
+
+    (expressionsPublic.buildExpression as jest.Mock).mockReturnValue({
+      toString: jest.fn().mockReturnValue('rawData | mockFn1 | mockFn2'),
+    });
+    (expressionsPublic.buildExpressionFunction as jest.Mock).mockReturnValue({});
+
+    (expressionHelper.executeExpression as jest.Mock).mockResolvedValue({ someData: 'value' });
+    (vegaSpecFactory.createVegaSpec as jest.Mock).mockReturnValue({ spec: 'mockVegaSpec' });
+
+    (visualizationsPublic.buildPipeline as jest.Mock).mockResolvedValue('vega | mockVegaSpec');
+
+    const result = await toExpression(mockState as any, mockSearchContext as any);
+
+    expect(result).toBe('vega | mockVegaSpec');
+    expect(expressionHelpers.getAggExpressionFunctions).toHaveBeenCalledWith(
+      mockState.visualization,
+      mockState.style,
+      true,
+      mockSearchContext
+    );
+    expect(createVis.createVis).toHaveBeenCalledWith('pie', {}, {}, mockSearchContext);
+    expect(visualizationsPublic.getVisSchemas).toHaveBeenCalled();
+    expect(expressionsPublic.buildExpressionFunction).toHaveBeenCalledWith('rawData', {});
+    expect(expressionHelper.executeExpression).toHaveBeenCalledWith(
+      'rawData | mockFn1 | mockFn2',
+      mockSearchContext
+    );
+    expect(vegaSpecFactory.createVegaSpec).toHaveBeenCalledWith(
+      { someData: 'value' },
+      expect.objectContaining({
+        addLegend: true,
+        addTooltip: true,
+        isDonut: false,
+        legendPosition: 'right',
+        dimensions: expect.any(Object),
+        showMetricsAtAllLevels: true,
+      }),
+      mockState.style
+    );
+    expect(visualizationsPublic.buildPipeline).toHaveBeenCalled();
+  });
+
+  it('should handle errors gracefully', async () => {
+    const mockState = {
+      style: { type: 'pie' },
+      visualization: {},
+    };
+    const mockSearchContext = {};
+
+    (expressionHelpers.getAggExpressionFunctions as jest.Mock).mockRejectedValue(
+      new Error('Mock error')
+    );
+
+    await expect(toExpression(mockState as any, mockSearchContext as any)).rejects.toThrow(
+      'Mock error'
+    );
+  });
+});
diff --git a/src/plugins/vis_builder/public/visualizations/vislib/pie/to_expression.ts b/src/plugins/vis_builder/public/visualizations/vislib/pie/to_expression.ts
new file mode 100644
index 000000000000..4f70e2cce76b
--- /dev/null
+++ b/src/plugins/vis_builder/public/visualizations/vislib/pie/to_expression.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { buildVislibDimensions, getVisSchemas } from '../../../../../visualizations/public';
+import {
+  buildExpression,
+  buildExpressionFunction,
+  IExpressionLoaderParams,
+} from '../../../../../expressions/public';
+import { PieOptionsDefaults } from './pie_vis_type';
+import { getAggExpressionFunctions } from '../../common/expression_helpers';
+import { VislibRootState, getPipelineParams } from '../common';
+import { createVis } from '../common/create_vis';
+import { buildPipeline } from '../../../../../visualizations/public';
+import { createVegaSpec } from '../../vega/vega_spec_factory';
+import { executeExpression } from '../../vega/utils/expression_helper';
+
+export const toExpression = async (
+  { style: styleState, visualization }: VislibRootState<PieOptionsDefaults>,
+  searchContext: IExpressionLoaderParams['searchContext']
+) => {
+  const { expressionFns, aggConfigs, indexPattern } = await getAggExpressionFunctions(
+    visualization,
+    styleState,
+    true,
+    searchContext
+  );
+  const {
+    addLegend,
+    addTooltip,
+    showMetricsAtAllLevels,
+    isDonut,
+    legendPosition,
+    type,
+  } = styleState;
+  const vis = await createVis(type, aggConfigs, indexPattern, searchContext);
+  const params = getPipelineParams();
+  const schemas = getVisSchemas(vis, {
+    timeRange: params.timeRange,
+    timefilter: params.timefilter,
+  });
+
+  const dimensions = {
+    metric: schemas.metric[0],
+    buckets: schemas.group,
+    splitRow: schemas.split_row,
+    splitColumn: schemas.split_column,
+  };
+
+  const visConfig = {
+    addLegend,
+    addTooltip,
+    isDonut,
+    legendPosition,
+    dimensions,
+    showMetricsAtAllLevels,
+  };
+
+  const rawDataFn = buildExpressionFunction('rawData', {});
+  const dataExpression = buildExpression([...expressionFns, rawDataFn]).toString();
+  // Execute the expression to get the raw data
+  const rawData = await executeExpression(dataExpression, searchContext);
+
+  const vegaSpec = createVegaSpec(rawData, visConfig, styleState);
+
+  const visVega = await createVis('vega', aggConfigs, indexPattern, searchContext);
+  visVega.params = {
+    spec: JSON.stringify(vegaSpec),
+  };
+
+  const vegaExpression = await buildPipeline(visVega, {
+    timefilter: params.timefilter,
+    timeRange: params.timeRange,
+    abortSignal: undefined,
+    visLayers: undefined,
+    visAugmenterConfig: undefined,
+  });
+
+  return vegaExpression;
+};
diff --git a/src/plugins/vis_builder/server/plugin.ts b/src/plugins/vis_builder/server/plugin.ts
index 35d3f4b89c20..a9e48d1bc2b7 100644
--- a/src/plugins/vis_builder/server/plugin.ts
+++ b/src/plugins/vis_builder/server/plugin.ts
@@ -44,6 +44,7 @@ export class VisBuilderPlugin implements Plugin<VisBuilderPluginSetup, VisBuilde
         description: i18n.translate('visBuilder.advancedSettings.visbuilderEnableVegaText', {
           defaultMessage: `Allow visbuilder to render visualizations via vega.`,
         }),
+        requiresPageReload: true,
         category: ['visbuilder'],
         schema: schema.boolean(),
       },
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss b/src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss
index f021d0f1905a..13c874435d36 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss
@@ -17,7 +17,3 @@
 .tvbAggRow__unavailable {
   margin-top: -$euiSizeXS;
 }
-
-.tvbAgg__input {
-  @include euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: false);
-}
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js
index 22254d3d4a08..cdc80d0650a9 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js
@@ -45,6 +45,7 @@ import {
   EuiSpacer,
   EuiCompressedFormRow,
   EuiCompressedFieldNumber,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { MODEL_TYPES } from '../../../../common/model_options';
@@ -207,16 +208,18 @@ export const MovingAverageAgg = (props) => {
               })
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              Should it be text or number?
-            */}
-            <input
-              className="tvbAgg__input"
-              type="text"
-              onChange={handleNumberChange('window')}
-              value={model.window}
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                Should it be text or number?
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                type="text"
+                onChange={handleNumberChange('window')}
+                value={model.window}
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js
index b3fb682d7bb6..dfc8b9101605 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js
@@ -43,6 +43,7 @@ import {
   EuiFormLabel,
   EuiCompressedFormRow,
   EuiSpacer,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
@@ -117,16 +118,18 @@ export const SerialDiffAgg = (props) => {
               />
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              Should it be text or number?
-            */}
-            <input
-              className="tvbAgg__input"
-              onChange={handleNumberChange('lag')}
-              value={model.lag}
-              type="text"
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                Should it be text or number?
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                onChange={handleNumberChange('lag')}
+                value={model.lag}
+                type="text"
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js
index 7580c1c881bd..65ed49714a6e 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/aggs/top_hit.js
@@ -44,6 +44,7 @@ import {
   EuiCompressedComboBox,
   EuiSpacer,
   EuiCompressedFormRow,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@osd/i18n/react';
 import { OSD_FIELD_TYPES } from '../../../../../../plugins/data/public';
@@ -206,15 +207,17 @@ const TopHitAggUi = (props) => {
               <FormattedMessage id="visTypeTimeseries.topHit.sizeLabel" defaultMessage="Size" />
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              Should it be text or number?
-            */}
-            <input
-              className="tvbAgg__input"
-              value={model.size}
-              onChange={handleTextChange('size')}
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                Should it be text or number?
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                value={model.size}
+                onChange={handleTextChange('size')}
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem>
diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js b/src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js
index d623915074a9..1d2b32a035d4 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js
@@ -52,6 +52,7 @@ import {
   EuiCompressedFieldNumber,
   EuiTitle,
   EuiHorizontalRule,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@osd/i18n/react';
 import { QueryBarWrapper } from '../query_bar_wrapper';
@@ -215,17 +216,19 @@ class GaugePanelConfigUi extends Component {
                     />
                   }
                 >
-                  {/*
-                    EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-                    It accepts a null value, but is passed a empty string.
-                  */}
-                  <input
-                    id={htmlId('gaugeMax')}
-                    className="tvbAgg__input"
-                    type="number"
-                    onChange={handleTextChange('gauge_max')}
-                    value={model.gauge_max}
-                  />
+                  <EuiFormControlLayout compressed={true}>
+                    {/*
+                      EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                      It accepts a null value, but is passed a empty string.
+                    */}
+                    <input
+                      id={htmlId('gaugeMax')}
+                      className="euiFieldText euiFieldText--compressed"
+                      type="number"
+                      onChange={handleTextChange('gauge_max')}
+                      value={model.gauge_max}
+                    />
+                  </EuiFormControlLayout>
                 </EuiCompressedFormRow>
               </EuiFlexItem>
               <EuiFlexItem>
diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js b/src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js
index e5ce1e9f9865..a7fef70aeaed 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js
@@ -52,6 +52,7 @@ import {
   EuiHorizontalRule,
   EuiCode,
   EuiText,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import { QueryBarWrapper } from '../query_bar_wrapper';
@@ -164,16 +165,18 @@ export class TablePanelConfig extends Component {
                       />
                     }
                   >
-                    {/*
-                      EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-                      Should it be number or string?
-                    */}
-                    <input
-                      className="tvbAgg__input"
-                      type="number"
-                      onChange={handleTextChange('pivot_rows')}
-                      value={model.pivot_rows}
-                    />
+                    <EuiFormControlLayout compressed={true}>
+                      {/*
+                        EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                        Should it be number or string?
+                      */}
+                      <input
+                        className="euiFieldText euiFieldText--compressed"
+                        type="number"
+                        onChange={handleTextChange('pivot_rows')}
+                        value={model.pivot_rows}
+                      />
+                    </EuiFormControlLayout>
                   </EuiCompressedFormRow>
                 </EuiFlexItem>
               </EuiFlexGroup>
diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js b/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js
index ac95f5450df1..09c094178502 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js
@@ -48,7 +48,7 @@ import {
   EuiCompressedFormRow,
   EuiFormLabel,
   EuiSpacer,
-  EuiCompressedFieldText,
+  EuiCompressedFieldNumber,
   EuiTitle,
   EuiHorizontalRule,
 } from '@elastic/eui';
@@ -271,7 +271,7 @@ class TimeseriesPanelConfigUi extends Component {
                     />
                   }
                 >
-                  <EuiCompressedFieldText
+                  <EuiCompressedFieldNumber
                     onChange={handleTextChange('axis_min')}
                     value={model.axis_min}
                   />
@@ -287,7 +287,7 @@ class TimeseriesPanelConfigUi extends Component {
                     />
                   }
                 >
-                  <EuiCompressedFieldText
+                  <EuiCompressedFieldNumber
                     onChange={handleTextChange('axis_max')}
                     value={model.axis_max}
                   />
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js
index d0a4af543610..41dd2fee0bc2 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js
@@ -47,13 +47,14 @@ import {
   EuiCompressedFieldNumber,
   EuiFormLabel,
   EuiSpacer,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@osd/i18n/react';
 import { getDefaultQueryLanguage } from '../../lib/get_default_query_language';
 import { QueryBarWrapper } from '../../query_bar_wrapper';
 
 import { isPercentDisabled } from '../../lib/stacked';
-import { STACKED_OPTIONS } from '../../../visualizations/constants/chart';
+import { STACKED_OPTIONS, AXIS_POSITION } from '../../../visualizations/constants/chart';
 
 export const TimeseriesConfig = injectI18n(function (props) {
   const handleSelectChange = createSelectHandler(props.onChange);
@@ -114,20 +115,48 @@ export const TimeseriesConfig = injectI18n(function (props) {
         id: 'visTypeTimeseries.timeSeries.rightLabel',
         defaultMessage: 'Right',
       }),
-      value: 'right',
+      value: AXIS_POSITION.RIGHT,
     },
     {
       label: intl.formatMessage({
         id: 'visTypeTimeseries.timeSeries.leftLabel',
         defaultMessage: 'Left',
       }),
-      value: 'left',
+      value: AXIS_POSITION.LEFT,
+    },
+    {
+      label: intl.formatMessage({
+        id: 'visTypeTimeseries.timeSeries.hiddenLabel',
+        defaultMessage: 'Hidden',
+      }),
+      value: AXIS_POSITION.HIDDEN,
     },
   ];
+
   const selectedAxisPosOption = positionOptions.find((option) => {
     return model.axis_position === option.value;
   });
 
+  const scaleOptions = [
+    {
+      label: intl.formatMessage({
+        id: 'visTypeTimeseries.timeseries.scaleOptions.normalLabel',
+        defaultMessage: 'Normal',
+      }),
+      value: 'normal',
+    },
+    {
+      label: intl.formatMessage({
+        id: 'visTypeTimeseries.timeseries.scaleOptions.logLabel',
+        defaultMessage: 'Log',
+      }),
+      value: 'log',
+    },
+  ];
+  const selectedAxisScaleOption = scaleOptions.find((option) => {
+    return model.axis_scale === option.value;
+  });
+
   const chartTypeOptions = [
     {
       label: intl.formatMessage({
@@ -505,17 +534,19 @@ export const TimeseriesConfig = injectI18n(function (props) {
               />
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              It accepts a null value, but is passed a empty string.
-            */}
-            <input
-              className="tvbAgg__input"
-              type="number"
-              disabled={disableSeparateYaxis}
-              onChange={handleTextChange('axis_min')}
-              value={model.axis_min}
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                It accepts a null value, but is passed a empty string.
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                type="number"
+                disabled={disableSeparateYaxis}
+                onChange={handleTextChange('axis_min')}
+                value={model.axis_min}
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -528,16 +559,19 @@ export const TimeseriesConfig = injectI18n(function (props) {
               />
             }
           >
-            {/*
-              EUITODO: The following input couldn't be converted to EUI because of type mis-match.
-              It accepts a null value, but is passed a empty string.
-            */}
-            <input
-              className="tvbAgg__input"
-              disabled={disableSeparateYaxis}
-              onChange={handleTextChange('axis_max')}
-              value={model.axis_max}
-            />
+            <EuiFormControlLayout compressed={true}>
+              {/*
+                EUITODO: The following input couldn't be converted to EUI because of type mis-match.
+                It accepts a null value, but is passed a empty string.
+              */}
+              <input
+                className="euiFieldText euiFieldText--compressed"
+                type="number"
+                disabled={disableSeparateYaxis}
+                onChange={handleTextChange('axis_max')}
+                value={model.axis_max}
+              />
+            </EuiFormControlLayout>
           </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -560,6 +594,26 @@ export const TimeseriesConfig = injectI18n(function (props) {
             />
           </EuiCompressedFormRow>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiCompressedFormRow
+            id={htmlId('axisScale')}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.timeseries.optionsTab.axisScaleLabel"
+                defaultMessage="Axis scale"
+              />
+            }
+          >
+            <EuiCompressedComboBox
+              isClearable={false}
+              isDisabled={disableSeparateYaxis}
+              options={scaleOptions}
+              selectedOptions={selectedAxisScaleOption ? [selectedAxisScaleOption] : []}
+              onChange={handleSelectChange('axis_scale')}
+              singleSelection={{ asPlainText: true }}
+            />
+          </EuiCompressedFormRow>
+        </EuiFlexItem>
       </EuiFlexGroup>
 
       <EuiHorizontalRule margin="s" />
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
index db0dc4de77a6..cbf293cb1781 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
@@ -43,7 +43,7 @@ import { replaceVars } from '../../lib/replace_vars';
 import { getAxisLabelString } from '../../lib/get_axis_label_string';
 import { getInterval } from '../../lib/get_interval';
 import { createXaxisFormatter } from '../../lib/create_xaxis_formatter';
-import { STACKED_OPTIONS } from '../../../visualizations/constants';
+import { STACKED_OPTIONS, AXIS_POSITION } from '../../../visualizations/constants';
 import { getCoreStart } from '../../../../services';
 
 export class TimeseriesVisualization extends Component {
@@ -202,7 +202,11 @@ export class TimeseriesVisualization extends Component {
         seriesGroup.axisFormatter = 'percent';
         seriesGroup.axis_min = seriesGroup.axis_min || 0;
         seriesGroup.axis_max = seriesGroup.axis_max || 1;
-        seriesGroup.axis_position = model.axis_position;
+        // If the axis is hidden, arbitrarily set it to left
+        seriesGroup.axis_position =
+          seriesGroup.axis_position === AXIS_POSITION.HIDDEN
+            ? AXIS_POSITION.LEFT
+            : model.axis_position;
       }
 
       series
@@ -219,8 +223,11 @@ export class TimeseriesVisualization extends Component {
           domain,
           groupId,
           id: yAxisIdGenerator(seriesGroup.id),
-          position: seriesGroup.axis_position,
-          hide: isStackedWithinSeries,
+          position:
+            seriesGroup.axis_position === AXIS_POSITION.HIDDEN
+              ? AXIS_POSITION.LEFT
+              : seriesGroup.axis_position,
+          hide: isStackedWithinSeries || seriesGroup.axis_position === AXIS_POSITION.HIDDEN,
           tickFormatter:
             seriesGroup.stacked === STACKED_OPTIONS.PERCENT
               ? this.yAxisStackedByPercentFormatter
@@ -231,7 +238,11 @@ export class TimeseriesVisualization extends Component {
           tickFormatter: allSeriesHaveSameFormatters ? seriesGroupTickFormatter : (val) => val,
           id: yAxisIdGenerator('main'),
           groupId: mainAxisGroupId,
-          position: model.axis_position,
+          position:
+            seriesGroup.axis_position === AXIS_POSITION.HIDDEN
+              ? AXIS_POSITION.LEFT
+              : model.axis_position,
+          hide: seriesGroup.axis_position === AXIS_POSITION.HIDDEN,
           domain: mainAxisDomain,
         });
 
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/constants/chart.js b/src/plugins/vis_type_timeseries/public/application/visualizations/constants/chart.js
index a9a82d5c2bef..a21111cad21d 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/constants/chart.js
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/constants/chart.js
@@ -51,3 +51,9 @@ export const STACKED_OPTIONS = {
   STACKED: 'stacked',
   STACKED_WITHIN_SERIES: 'stacked_within_series',
 };
+
+export const AXIS_POSITION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  HIDDEN: 'hidden',
+};
diff --git a/src/plugins/vis_type_timeseries/public/metrics_type.ts b/src/plugins/vis_type_timeseries/public/metrics_type.ts
index ed3ea21c25e2..337689e2f57d 100644
--- a/src/plugins/vis_type_timeseries/public/metrics_type.ts
+++ b/src/plugins/vis_type_timeseries/public/metrics_type.ts
@@ -65,6 +65,7 @@ export const metricsVisDefinition = {
           ],
           separate_axis: 0,
           axis_position: 'right',
+          axis_scale: 'normal',
           formatter: 'number',
           chart_type: 'line',
           line_width: 1,
diff --git a/src/plugins/vis_type_timeseries/server/lib/timeseries_visualization_client_wrapper.ts b/src/plugins/vis_type_timeseries/server/lib/timeseries_visualization_client_wrapper.ts
index 91f8fd5b4134..03b79e327db7 100644
--- a/src/plugins/vis_type_timeseries/server/lib/timeseries_visualization_client_wrapper.ts
+++ b/src/plugins/vis_type_timeseries/server/lib/timeseries_visualization_client_wrapper.ts
@@ -32,7 +32,12 @@ export const timeSeriesVisualizationClientWrapper: SavedObjectsClientWrapperFact
     }
 
     const tsvbAttributes = attributes as T & { visState: string };
-    const visState = JSON.parse(tsvbAttributes.visState);
+    let visState;
+    try {
+      visState = JSON.parse(tsvbAttributes.visState);
+    } catch (ex) {
+      throw SavedObjectsErrorHelpers.createUnsupportedTypeError(type);
+    }
 
     if (visState.type !== 'metrics' || !visState.params) {
       return await wrapperOptions.client.create(type, attributes, options);
diff --git a/src/plugins/workspace/common/constants.ts b/src/plugins/workspace/common/constants.ts
index 0d660944d02e..366e5ace85d1 100644
--- a/src/plugins/workspace/common/constants.ts
+++ b/src/plugins/workspace/common/constants.ts
@@ -14,6 +14,7 @@ export const WORKSPACE_LIST_APP_ID = 'workspace_list';
 export const WORKSPACE_DETAIL_APP_ID = 'workspace_detail';
 export const WORKSPACE_INITIAL_APP_ID = 'workspace_initial';
 export const WORKSPACE_NAVIGATION_APP_ID = 'workspace_navigation';
+export const WORKSPACE_COLLABORATORS_APP_ID = 'workspace_collaborators';
 
 export const WORKSPACE_SAVED_OBJECTS_CLIENT_WRAPPER_ID = 'workspace';
 export const WORKSPACE_CONFLICT_CONTROL_SAVED_OBJECTS_CLIENT_WRAPPER_ID =
@@ -44,6 +45,12 @@ export const PRIORITY_FOR_WORKSPACE_UI_SETTINGS_WRAPPER = -2;
 export const PRIORITY_FOR_WORKSPACE_CONFLICT_CONTROL_WRAPPER = -1;
 export const PRIORITY_FOR_PERMISSION_CONTROL_WRAPPER = 0;
 
+/**
+ * The repository wrapper should be the wrapper closest to the repository client,
+ * so we give a large number to the wrapper
+ */
+export const PRIORITY_FOR_REPOSITORY_WRAPPER = Number.MAX_VALUE;
+
 /**
  *
  * This is a temp solution to store relationships between use cases  and features.
@@ -169,3 +176,5 @@ export const WORKSPACE_DATA_SOURCE_AND_CONNECTION_OBJECT_TYPES = [
 ];
 
 export const USE_CASE_CARD_GRADIENT_PREFIX = 'workspace-initial-use-case-card';
+
+export const OSD_ADMIN_WILDCARD_MATCH_ALL = '*';
diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx
index 902a1d5a0d33..45397a3396d1 100644
--- a/src/plugins/workspace/public/application.tsx
+++ b/src/plugins/workspace/public/application.tsx
@@ -18,6 +18,7 @@ import { WorkspaceDetailProps } from './components/workspace_detail/workspace_de
 import { WorkspaceInitialApp } from './components/workspace_initial_app';
 import { WorkspaceUseCaseOverviewApp } from './components/workspace_use_case_overview_app';
 import { WorkspaceInitialProps } from './components/workspace_initial/workspace_initial';
+import { WorkspaceCollaboratorsApp } from './components/workspace_collaborators_app';
 
 export const renderCreatorApp = (
   { element }: AppMountParameters,
@@ -135,3 +136,20 @@ export const renderUseCaseOverviewApp = async (
     ReactDOM.unmountComponentAtNode(element);
   };
 };
+
+export const renderCollaboratorsApp = (
+  { element }: AppMountParameters,
+  services: Services,
+  props: {}
+) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceCollaboratorsApp {...props} />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
diff --git a/src/plugins/workspace/public/assets/background_pic.tsx b/src/plugins/workspace/public/assets/background_pic.tsx
new file mode 100644
index 000000000000..5dab33d11d38
--- /dev/null
+++ b/src/plugins/workspace/public/assets/background_pic.tsx
@@ -0,0 +1,1942 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+export const BackgroundPic = () => (
+  <div>
+    <svg
+      width="235"
+      height="182"
+      viewBox="0 0 235 182"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="17.2349"
+        y="25.7905"
+        width="216.765"
+        height="134.468"
+        rx="3"
+        stroke="#78AEC3"
+        strokeOpacity="0.15"
+        strokeWidth="2"
+      />
+      <rect
+        x="111.6"
+        y="31.46"
+        width="115.703"
+        height="76.1554"
+        rx="3"
+        stroke="#DCE9EE"
+        strokeOpacity="0.2"
+        strokeWidth="2"
+      />
+      <rect
+        x="117.906"
+        y="47.873"
+        width="32.0639"
+        height="36.0406"
+        rx="4"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="153.816"
+        y="47.873"
+        width="32.0639"
+        height="36.0406"
+        rx="4"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="189.725"
+        y="47.873"
+        width="32.0639"
+        height="36.0406"
+        rx="4"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="69.6071"
+        y="34.5098"
+        width="30.3367"
+        height="6.47921"
+        rx="3.2396"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="27.8704"
+        y="77.7031"
+        width="30.3367"
+        height="4.53352"
+        rx="2.26676"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="69.6071"
+        y="44.6333"
+        width="30.3367"
+        height="6.47921"
+        rx="3.2396"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="27.8704"
+        y="84.7866"
+        width="18.3749"
+        height="4.53352"
+        rx="2.26676"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="69.6071"
+        y="54.7568"
+        width="30.3367"
+        height="6.47921"
+        rx="3.2396"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="27.8704"
+        y="91.8701"
+        width="23.5579"
+        height="4.53352"
+        rx="2.26676"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="27.8704"
+        y="98.9536"
+        width="30.3367"
+        height="4.53352"
+        rx="2.26676"
+        fill="#8EC1D5"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="117.906"
+        y="35.7241"
+        width="103.883"
+        height="8.50396"
+        rx="4"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="26.0795"
+        y="33.7158"
+        width="31.2522"
+        height="8.50396"
+        rx="4"
+        fill="#9EC3D2"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="23.4318"
+        y="115.189"
+        width="116.703"
+        height="39.9"
+        rx="3.5"
+        stroke="#78AEC3"
+        strokeOpacity="0.15"
+      />
+      <g filter="url(#filter0_d_12024_153157)">
+        <rect
+          x="151.282"
+          y="115.189"
+          width="76.5216"
+          height="39.9"
+          rx="3.5"
+          stroke="#78AEC3"
+          strokeOpacity="0.15"
+          shapeRendering="crispEdges"
+        />
+      </g>
+      <path
+        d="M55.9212 56.4672C56.4679 58.6076 54.6268 60.4264 52.4177 60.4264C49.5571 60.4264 45.4075 60.4264 40.7902 60.4264C36.1729 60.4264 32.0233 60.4264 29.1627 60.4264C26.9535 60.4264 25.1125 58.6076 25.6592 56.4672C27.3976 49.6611 33.5129 44.6333 40.7902 44.6333C48.0674 44.6333 54.1828 49.6611 55.9212 56.4672Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="9.57344"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.38109e-08 -1 -1 -4.36121e-08 221.809 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="13.3196"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61546e-08 -1 -1 -4.13975e-08 212.402 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="9.57344"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61547e-08 -1 -1 -4.13975e-08 202.995 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="15.817"
+        height="5.55862"
+        rx="2.77931"
+        transform="matrix(4.61548e-08 -1 -1 -4.13974e-08 193.589 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="15.817"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61546e-08 -1 -1 -4.13975e-08 185.464 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="4.37048"
+        height="5.55861"
+        rx="2.18524"
+        transform="matrix(4.61547e-08 -1 -1 -4.13975e-08 176.057 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="12.279"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61546e-08 -1 -1 -4.13975e-08 167.933 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="8.53285"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61546e-08 -1 -1 -4.13975e-08 158.526 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="10.8222"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61546e-08 -1 -1 -4.13975e-08 149.12 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="14.9845"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61546e-08 -1 -1 -4.13975e-08 139.713 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="9.57344"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61547e-08 -1 -1 -4.13975e-08 131.589 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        width="7.70038"
+        height="5.55861"
+        rx="2.7793"
+        transform="matrix(4.61546e-08 -1 -1 -4.13975e-08 123.465 104.312)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="26.9906"
+        y="151.541"
+        width="18.6277"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 26.9906 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="35.9198"
+        y="151.541"
+        width="25.9168"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 35.9198 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="44.8488"
+        y="151.541"
+        width="18.6277"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 44.8488 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="53.778"
+        y="151.541"
+        width="30.7762"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 53.778 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="61.4897"
+        y="151.541"
+        width="30.7762"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 61.4897 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="70.4187"
+        y="151.541"
+        width="8.50395"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 70.4187 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="78.1304"
+        y="151.541"
+        width="23.8921"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 78.1304 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="87.0596"
+        y="151.541"
+        width="16.603"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 87.0596 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="95.9886"
+        y="151.541"
+        width="21.0574"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 95.9886 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="104.918"
+        y="151.541"
+        width="29.1564"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 104.918 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="112.63"
+        y="151.541"
+        width="18.6277"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 112.63 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="120.341"
+        y="151.541"
+        width="14.9832"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 120.341 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="129.27"
+        y="151.541"
+        width="14.9832"
+        height="5.27634"
+        rx="2.63817"
+        transform="rotate(-90 129.27 151.541)"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M198.337 137.887L198.682 138.079L198.785 138.075L199.642 137.835L199.739 138.091L199.671 138.307L199.485 138.426L199.022 138.402L198.36 138.071L198.337 137.887Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M199.883 135.121L199.957 135.361L200.79 135.421L200.849 134.929L201.01 134.857L201.054 134.677L200.79 134.737L200.498 135.098L199.883 135.121Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M201.584 132.508L201.719 133.367L202.054 133.427L202.085 133.582L201.845 133.746L202.292 134.04L203.162 133.785L203.231 133.483L203.778 133.204L203.988 132.559L204.145 132.421L203.983 132.191L204.512 131.924L204.444 131.846L204.2 131.859L204.178 132.042L203.85 132.04L203.844 131.795L203.738 131.692L203.56 131.824L203.565 131.945L203.297 132.027L202.802 132.002L202.159 132.551L201.584 132.508Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.27 131.315V131.633L192.382 131.805L192.462 131.797L192.6 131.593L192.52 131.501L192.489 131.274L192.382 131.193L192.27 131.315Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M197.828 131.324L198.234 131.756L198.115 131.87L197.827 131.829L197.47 131.569L197.49 131.397L197.828 131.324Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M190.967 141.451L191.256 142.329L191.249 142.607L190.827 142.976L190.764 143.577L192.388 143.589L192.916 143.745L193.351 143.698L193.098 143.439L193.099 142.698L193.598 142.681V142.392L193.192 142.378L193.111 141.694L192.94 141.696L192.848 141.628L192.748 141.632L192.614 141.844H192.1L191.98 141.746L192.016 141.607L191.875 141.44L190.967 141.451Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M190.792 141.211L190.939 141.367L191.13 141.22L191.074 141.068L191.027 141.065L190.792 141.211Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M175.474 145.692L175.638 145.818L175.014 146.573L174.795 146.771L174.871 147.634L175.352 148.111L174.948 148.686L174.642 148.794H174.292L174.39 149.243L173.842 149.396L173.974 149.773L173.645 150.627L174.05 150.897L173.831 151.337L173.459 151.813L173.656 152.146L173.175 152.209L172.781 151.814L172.715 150.582L172.102 148.491L172.288 147.76L171.893 146.825L172.156 145.612L172.397 145.378L172.338 145.201L172.647 144.97L173.337 145.009L173.723 145.345L174.169 145.351L174.626 145.578L174.491 145.835L174.524 146.094L175.17 146.07L175.474 145.692Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M174.074 152.631L174.096 153.026L174.468 152.999L174.785 152.828L174.249 152.738L174.074 152.631Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M190.291 129.961L190.236 130.054L190.284 130.12L190.481 130.087H190.648L190.83 130.212L191.217 130.155L191.501 130.017L191.574 129.924L191.563 129.804L191.307 129.648L190.965 129.651L190.936 129.81L190.575 129.953L190.291 129.961Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M214.024 146.367L213.994 148.117L213.664 148.315L213.635 148.487L214.085 148.733L215.195 148.561H215.766L215.976 148.314L217.236 148.117L218.136 148.339L218.076 148.635L218.196 148.931L218.887 148.832L218.916 148.98L218.466 149.251L218.616 149.349L218.946 149.251L218.856 150.065L219.486 150.459L219.847 150.361L220.027 150.508L221.077 150.385L222.068 149.078L222.428 149.004L223.148 147.919L223.328 146.982L222.878 146.514L223.058 146.415L222.698 145.503L222.308 145.281L222.368 144.048L222.008 143.826L221.918 143.136H221.738L221.137 144.763L220.807 144.788L220.057 144.171L220.477 143.258L219.697 143.135L218.827 143.332L218.586 143.899L218.196 143.973L218.167 143.578L216.576 144.368L216.606 144.664L216.366 144.935H215.765L214.474 145.378L214.024 146.367Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M219.486 151.077L219.336 151.57L219.366 151.915L219.816 151.89L220.326 151.249L219.486 151.077Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M197.971 131.175L197.886 131.293L198.284 131.72L198.423 131.683L198.651 131.878L198.75 131.536L198.998 131.568L198.988 131.47L198.58 131.179L198.503 131.35L197.971 131.175Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.49 130.569L191.459 130.611L192.027 131.088L192.235 130.839L192.227 130.74L192.045 130.56L191.49 130.569Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M208.474 134.305L208.363 134.469L208.651 134.914L208.659 135.262L208.712 135.355L209.049 135.36L209.241 135.21L209.379 135.279L209.407 135.49L209.518 135.434L209.525 135.163L209.432 135.154L209.373 134.925L209.138 134.918L209.08 134.79L209.224 134.634L209.226 134.556H208.808L208.474 134.305Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M188.683 129.023L188.628 129.133L189.21 129.446L189.249 129.45L189.286 129.363L189.368 129.316L189.237 129.196H189.148L189.025 129.083L188.683 129.023Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M187.75 137.145L188.058 137.125L188.563 137.707L188.094 137.996L187.755 137.924L187.299 137.929L187.225 138.147L186.843 138.162L186.738 138.046L186.874 137.691L187.75 137.145Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.898 130.807L192.911 131.151L193.053 131.392L193.587 131.4L193.828 131.261L194.064 131.184L194.006 130.965L194.059 130.848L193.939 130.797L193.774 130.808L193.645 130.914L193.102 130.918L192.898 130.807Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M194.993 140.727L195.354 140.721L195.261 140.979L195.169 141.043H195.058L194.978 140.869L194.993 140.727Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M188.437 138.884H188.617L188.627 138.469L188.853 138.2L188.843 137.734L188.637 137.729L188.285 137.954L188.432 138.183L188.437 138.884Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M215.597 138.867L215.354 139.108L215.553 139.159L215.666 139.031L215.597 138.867Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M171.518 142.56L172.214 142.313L172.444 142.331L172.598 142.852L173.658 143.14L173.834 143.58L174.271 143.625L174.457 144.003L174.326 144.344L173.614 144.389L173.352 144.937L172.794 144.928L172.619 144.901L172.296 145.156L172.137 145.144L171.59 144.11L171.741 143.925L171.795 143.194L171.659 142.759L171.518 142.56Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M176.215 147.117L176.744 146.288L176.764 145.591L177.75 145.072H178.303L178.737 144.473L178.815 143.322L178.638 143.015L179.683 142.237L179.723 141.378L178.302 140.811L176.587 140.374L175.778 140.309L175.995 139.936L175.936 139.37L175.759 139.322L175.498 139.746L175.361 139.886L175.009 139.759L173.826 140.099L173.432 139.694L173.495 139.271L173.123 139.58L172.712 139.399L172.67 139.447L172.671 139.594L173.025 139.749L172.493 140.206L172.158 140.204L171.817 139.921L171.432 139.931L171.385 140.266L171.606 140.485L171.345 141.166L171.041 141.185L170.556 141.435L170.438 141.925L170.858 142.292L170.935 142.221L171.23 142.156L171.482 142.503L172.204 142.25L172.484 142.263L172.677 142.82L173.706 143.086L173.884 143.53L174.322 143.573L174.531 143.997L174.39 144.375L174.574 144.572L174.548 144.866L175.042 144.828L175.494 145.294L175.459 145.621L175.727 145.806L175.084 146.6L176.215 147.117Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M169.902 134.721L169.796 134.694L169.787 134.861L169.918 134.969L170.008 134.861L169.902 134.721ZM170.115 134.983L169.967 135.05L170.106 135.211L170.18 135.13L170.115 134.983ZM170.589 135.104L170.434 135.097L170.45 135.177L170.564 135.312L170.662 135.224L170.589 135.104ZM170.516 134.943L170.262 134.855L170.213 134.647L170.311 134.613L170.409 134.774L170.507 134.835L170.516 134.943ZM170.27 134.519L170.139 134.492L170.115 134.358L169.976 134.318L170.066 134.244L170.229 134.291L170.351 134.352L170.27 134.519Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M208.46 133.958L208.591 134.105L209.034 134.107L208.989 133.907L208.46 133.958Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.65 145.212L192.832 145.257L192.806 145.681L192.993 145.702L193.423 145.386L193.939 145.431L194.076 145.149L194.729 144.662L193.945 143.926L193.935 143.806L193.848 143.785L193.611 143.964L192.993 143.976L192.907 144.604L192.664 144.649L192.65 145.212Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.832 128.317L192.959 128.487L192.908 128.623L192.916 128.731L192.963 128.86L193.225 128.738L193.551 128.745L193.779 128.822H194.359L194.528 128.491L194.63 128.366V128.283L194.266 127.866L193.944 127.762L193.682 127.737L193.454 127.797L193.462 127.984L193.145 128.311L192.832 128.317Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M166.937 136.326L166.933 136.577H167.004L167.246 136.209H167.082L166.937 136.326Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M163.017 120.204L163.185 120.411L163.27 120.689L163.691 120.775L163.987 120.515L164.24 120.62L164.956 120.671L165.462 120.498L165.546 121.069H165.842V120.827L166.137 120.844L166.875 121.554L167.359 121.796L167.106 122.125L167.212 122.211L168.159 122.367L168.18 122.714L168.433 122.748L168.496 122.229L168.897 122.142L169.192 122.506L169.824 122.748L170.14 122.8L170.351 122.592L170.372 122.263L170.751 122.073L170.877 122.35L170.539 122.835L170.582 123.077L170.771 122.835L171.15 122.558L171.171 122.194L170.961 121.917L171.024 121.692L171.53 121.484L171.762 121.623L171.804 122.835L172.162 122.576L172.373 122.68L172.078 123.095L172.457 123.164L173.005 122.471L173.468 122.869L173.279 123.579L172.815 123.787L172.373 123.614L171.573 123.752L171.657 123.977L171.447 124.254L170.794 124.376L170.056 124.843L169.403 125.553L169.318 125.778L169.761 125.917L169.929 126.263L170.54 126.765L171.509 127.111L171.299 127.907L171.278 128.132L171.531 128.271L171.868 127.907L171.91 127.214L172.437 127.197L172.69 126.799L172.733 126.194L173.407 125.12L174.25 125.362L174.692 125.865L174.502 126.366L174.84 126.522L175.661 126.072L175.893 127.301L176.652 128.045L176.673 128.426L175.831 128.599L175.431 128.945L174.588 128.789L174.167 128.772L173.429 129.24L173.871 129.153L174.42 129.067L174.525 129.171L174.378 129.552L174.399 129.898L174.652 130.037L174.905 129.985L175.032 129.829H175.2L174.926 130.245L174.399 130.262L174.167 130.539H173.872L173.788 130.331L174.209 129.985L173.703 130.124L173.68 129.535L173.535 129.467L173.092 129.622L173.05 129.917H172.038L171.174 130.402L170.015 130.714L169.889 130.575L170.473 129.865L170.141 129.605L169.93 129.275L169.501 129.008L169.041 128.977L168.216 128.506L162.235 127.704L162.136 127.374L161.588 126.959V126.612L161.672 126.301L161.63 126.128L161.419 125.954L161.377 125.677L161.925 125.365L161.588 123.877L161.124 123.86L160.703 123.409L163.017 120.203L163.017 120.204Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M160.954 125.704L160.81 125.929L160.86 126.088L160.954 126.136L160.932 126.201L160.831 126.224L160.86 126.461L160.968 126.55L161.054 126.473L160.946 126.243L161.01 126.06L161.168 125.888L161.053 125.729L160.954 125.704ZM161.429 127.052L161.3 127.094L161.537 127.318L161.595 127.585L161.833 127.791L162.034 127.762V127.49L161.79 127.366L161.429 127.052ZM174.407 121.373L174.257 121.496L174.388 121.666L175.008 121.727L174.613 121.388L174.407 121.373ZM166.867 119.323L166.885 119.6L166.21 120.17L166.38 120.632L166.867 120.525L167.149 120.186L167.861 119.97L168.442 119.939L167.992 119.538L167.767 119.676L167.598 119.63L167.504 119.461L167.297 119.291L166.867 119.323ZM167.748 118.506L167.599 118.722L168.33 118.938L168.593 118.614L168.705 118.83H168.893L169.249 118.507L168.818 118.414L168.649 118.307L168.423 118.492L167.748 118.506ZM169.024 118.938L168.443 119.138V119.292L169.193 119.523L169.024 119.677L169.137 119.877L169.605 119.707H170L170.187 119.953L170.506 119.691L170.431 119.444L170.169 119.521L170.131 119.213L170.263 119.028H170.131L169.925 119.136L169.831 119.197L169.888 119.413L169.738 119.506L169.513 119.491L169.456 119.213L169.024 118.938ZM169.793 118.46L169.736 118.614L170.093 118.752L170.355 118.629L170.336 118.537L169.793 118.46ZM170.074 118.198L169.812 118.275L169.83 118.383L170.412 118.352L170.393 118.244L170.074 118.198ZM171.331 118.46L171.294 118.567L171.2 118.675V118.829L171.556 118.783L171.931 119.045H172.062V118.783L171.687 118.444L171.331 118.46ZM172.288 118.768L172.438 118.907L172.306 119.092L172.4 119.292L172.813 119.107V118.968L172.569 118.737L172.288 118.768ZM172.832 118.414L172.85 118.66H173.357L173.488 118.752L173.47 118.86L173.019 118.906L173.339 119.261L173.77 119.322L174.37 119.106L173.507 118.043L173.245 118.181L173.263 118.366L172.963 118.274L172.832 118.414ZM168.462 120.155L167.749 120.309L167.336 120.602L167.374 120.926L168.124 121.111L167.955 121.419L167.411 121.142L167.261 121.373L167.617 121.573L167.599 121.896L168.142 122.02L168.799 121.989L168.911 121.819L169.398 122.266L169.736 122.174L169.793 121.865L170.036 122.004L170.074 121.696L169.773 121.542L169.792 120.571L169.53 120.402L169.249 120.71L168.462 120.155ZM170.75 120.833L170.506 120.741L170.375 120.88L170.637 121.219L170.656 121.542L171.219 121.265V120.864L171.425 120.695L171.219 120.571H170.881L170.75 120.833ZM171.95 120.695L171.556 120.957L171.65 121.28H171.894L172.006 121.111L172.175 121.249L172.345 121.234L172.795 120.926L171.95 120.695ZM171.912 120.186L171.818 120.339L172.231 120.463L172.344 120.324L171.912 120.186ZM171.669 119.6L171.256 119.646L171.012 119.831L171.462 119.846L171.331 120.123L171.425 120.247L171.556 120.232L171.875 119.816L171.669 119.6ZM172.382 119.493L172.157 119.554L172.194 119.8L172.569 120L172.587 120.154L172.475 120.247L172.532 120.555L173.976 120.94L174.37 121.047L174.764 120.77L174.295 120.462L173.864 120.554L173.264 120.508L173.039 120.323L172.982 119.815L172.608 119.661L172.382 119.493ZM173.563 121.095L173.15 121.064L172.662 121.218L172.4 121.511L172.476 122.312L173.282 122.343L174.051 122.651L174.595 123.16L175.008 123.144L174.895 123.622L174.52 124.13L174.107 124.284L173.807 124.238L173.657 124.13L173.432 124.376L173.526 124.623L173.845 124.638L174.239 124.484L174.577 125.193L175.421 125.64L176.002 125.039L175.515 124.392L175.797 124.13L176.191 124.67L176.903 124.161L176.772 123.93L176.285 124.054L175.947 123.298L176.266 122.867L175.628 122.313L175.272 122.513L174.935 121.912L174.222 121.989L174.035 121.265L173.454 121.588L173.397 121.989H173.078L173.115 121.635L173.563 121.095ZM173.807 119.631V119.77L173.394 119.847L173.507 120.001L173.975 120.155L174.501 120.201L174.876 120.417L175.251 120.247L174.988 120.031H175.326L175.532 119.846L176.039 119.785V119.692L175.757 119.539L175.794 119.369L176.582 119.477L177.745 119.107L177.314 118.999L177.426 118.876H178.326L178.476 118.752L176.656 118.228L176.225 118.105L175.756 118.382L175.231 118.028L174.949 118.013L174.892 118.306L174.536 118.044L174.123 118.151L174.199 118.321L174.818 118.429L174.781 118.675L175.118 118.845L175.944 118.675L175.963 118.906L175.288 119.168L174.875 118.906L174.5 118.937L174.875 119.369L174.687 119.446L174.405 119.246L174.199 119.354L174.387 119.646H174.706L174.631 119.924L174.368 119.892L174.031 119.599L173.807 119.631ZM172.135 123.872L171.778 124.239L171.756 124.644L172.069 124.497H172.448L172.716 124.699L172.963 124.533L172.135 123.872ZM176.493 128.646L175.599 129.344L175.689 129.509L176.783 129.839L176.94 129.619L176.85 129.252L176.492 129.289L176.291 129.105L176.626 128.83L176.493 128.646Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.032 141.382L191.904 141.37L192.081 141.575L192.074 141.726L192.139 141.774H192.572L192.696 141.574H192.874L192.945 141.634L193.188 141.628L193.26 142.324L193.679 142.335V142.388L194.807 142.803L194.859 142.884H195.095L195.069 142.593L194.643 142.426L194.669 142.205L194.852 141.854L195.272 141.843L194.912 140.868L194.918 140.453L195.488 139.727L195.495 139.625L195.41 139.587L195.413 139.389L195.309 139.382L195.204 139.273L193.483 139.209L193.167 139.46L192.65 139.182L192.468 139.273L192.337 140.179L192.01 140.385L191.912 140.567L191.929 140.836L191.34 141.229L191.184 141.171L191.205 141.246L191.032 141.382Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.563 139.198L191.957 139.546L192.113 139.382L192.361 139.39L192.414 139.23L192.657 139.106L193.163 139.39L193.455 139.154L194.588 139.195L193.537 138.311L193.678 138.239L193.698 138.083L193.459 137.991H193.109L192.545 138.448L192.525 138.635L192.078 138.623L192.064 138.703L191.772 138.679L191.509 139.087L191.563 139.198Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.169 139.783L191.164 139.883L191.568 139.891L191.582 140.747L191.212 140.739L190.998 140.603L190.833 140.679L190.825 140.717L190.911 140.751L190.935 140.927L190.707 141.087L190.756 141.171L191.009 141.011H191.13L191.169 141.107L191.33 141.163L191.846 140.807L191.836 140.547L191.943 140.335L192.274 140.135L192.363 139.458L192.128 139.459L191.856 139.763L191.169 139.783Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.638 129.91L189.269 130.23L189.277 130.262L189.428 130.224L189.565 130.378L189.795 130.312L189.954 130.413L190.019 130.382L190.216 130.131L190.166 130.093L189.972 130.089L189.878 129.932L189.638 129.91Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M186.183 139.385L186.545 139.176L186.995 139.111L187.455 139.192L187.22 138.903L187.152 138.727L187.22 138.204L186.81 138.22L186.624 138.076L186.233 138.084L186.047 138.108L186.067 138.461L185.969 138.494L185.851 138.67L186.154 138.959L186.183 139.385Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M173.745 152.307L173.384 152.954L174.008 153.008L174.019 152.577L173.745 152.307ZM173.623 152.206L173.351 152.45L173.318 152.738L172.793 152.495L172.235 151.839L172.07 151.605L172.3 151.363L172.278 151.057L172.016 150.967L171.808 150.842L171.852 150.671L172.125 150.608L172.18 149.62L171.754 149.422L171.476 144.277L171.548 144.175L172.092 145.199L172.267 145.202L172.323 145.365L172.092 145.594L171.825 146.827L172.204 147.776L172.029 148.495L172.647 150.608L172.712 151.844L173.154 152.262L173.623 152.206ZM171.82 149.62L171.711 149.754L171.766 149.988L171.875 149.997L171.93 149.701L171.82 149.62Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M190.054 139.214L190.326 139.419L190.307 139.735L191.801 139.706L191.923 139.595L191.494 139.219L191.431 139.083L191.704 138.667L191.518 138.391L191.363 138.323V138.183L191.543 138.087L191.553 137.651L191.41 137.638L191.408 137.867L190.78 138.822L190.396 138.838L190.133 138.986L190.054 139.214Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M206.345 128.578L206.052 129.178L205.649 129.161L205.223 129.92L205.584 130.295L204.84 131.133L204.458 131.081L204.202 131.343L204.266 131.5L204.563 131.518L204.712 131.797L205.01 131.849L205.925 132.81V133.299L206.371 133.526L206.86 133.456L207.477 133.753L208.221 133.928L208.582 133.893L208.987 133.857L209.837 133.404L210.114 133.439L210.219 133.644L210.454 133.701L210.773 134.085L210.561 134.469L210.688 134.731L211.049 134.836L211.113 135.15L211.538 135.186L211.602 135.028L212.218 134.766L212.601 134.783L213.047 135.185L213.345 135.08L213.536 135.097L213.622 135.29L213.771 135.307L213.983 135.063L214.833 134.801L215.599 134.05L215.854 133.334L215.833 132.862L215.514 132.81L215.705 132.635L215.663 132.356L214.855 131.692V131.36L215.088 131.116L215.322 131.028L215.343 130.836H214.748L214.641 131.098L214.364 131.046L214.024 130.749L214.236 130.295L214.534 130.033L214.811 130.05L214.768 130.452L214.917 130.556L215.278 130.26L215.406 130.242L215.364 130.016L215.704 129.684L215.96 129.701L216.108 129.317L216.283 129.242L216.301 129.002L216.131 128.858L216.117 128.48L216.443 128.462L216.422 127.488L216.193 127.599L216.109 127.849L215.727 127.848L214.622 127.341L213.823 126.557L213.013 126.55L212.806 126.696L213.069 127.186L212.977 127.645L212.651 127.755L212.467 127.744L212.453 128.198L212.645 128.233L212.985 128.111L213.431 128.286V128.46L213.112 128.478L212.857 128.932L212.623 128.949L211.794 129.839L210.923 130.154L210.328 130.189L209.924 129.962L209.35 130.207L208.733 130.049L208.584 129.718L207.543 129.665L206.99 128.932H206.757L206.569 128.592L206.345 128.578Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M213.91 135.482L213.708 135.528L213.563 135.675L213.684 135.867L213.862 135.88L214.064 135.734L214.112 135.542L213.91 135.482Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M171.097 137.524L170.923 137.51L169.77 138.285L169.648 138.557L169.491 138.571L169.561 139.174L169.159 139.977L169.596 140.278L170.155 140.307L170.539 140.767L171.097 140.781L171.08 141.125H171.289L171.515 140.494L171.305 140.279L171.358 139.878L171.794 139.849L171.742 138.916L170.764 138.658L170.537 138.156L171.097 137.524Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M168.022 137.883L168.139 138.071L168.235 138.174L168.106 138.485L167.861 138.345L167.46 138.045V137.847L168.022 137.883Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M168.315 135.258V135.346L168.765 135.353L168.978 135.252L169.011 135.326L169.452 135.413L169.845 135.702L169.755 135.803L169.771 135.918L170.098 135.985L170.426 135.864L170.573 135.743L170.36 135.655L169.265 135.131L168.881 135.097L168.315 135.258Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M182.418 136.887L182.257 136.962L182.372 137.037L182.51 136.981L182.418 136.887ZM182.813 137.039L182.708 137.115L182.783 137.227L182.962 137.162L182.813 137.039ZM182.584 137.252L182.449 137.317L182.594 137.475L182.708 137.427L182.584 137.252Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.585 132.7L195.689 132.762L195.367 133.011L195.213 133.007L195.099 132.941L195.114 132.819L195.348 132.807L195.585 132.7Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M190.951 129.598H191.326L191.527 129.715L191.898 129.463L191.537 129.254L191.18 129.113L190.936 129.149L190.604 129.323L190.951 129.598Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.489 128.427L189.791 128.387V128.213L190.044 128.179L190.182 128.293L190.329 128.306L190.557 128.225L190.761 128.272L190.94 128.399L190.965 128.874L191.144 129.069L190.908 129.096L190.516 129.297L190.549 129.364L190.9 129.631L190.875 129.765L190.549 129.899L190.247 129.906L190.174 130.032H190.019L189.945 129.899L189.676 129.845L189.668 129.624L189.532 129.563L189.543 129.414L189.503 129.308L189.309 129.163L189.35 128.935L189.561 128.854L189.489 128.427Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.965 127.297L189.614 127.613L189.601 127.82L189.761 128.16L190.012 128.121L189.98 127.843L190.153 127.686L190.15 127.562L190.028 127.305L189.965 127.297ZM190.147 127.878L190.043 127.896V128.022L190.153 128.092L190.251 128.072L190.227 127.952L190.147 127.878ZM190.472 127.757L190.379 127.776L190.276 127.853L190.32 128.009L190.446 128.049L190.316 128.092L190.291 128.147H190.487L190.546 128.059L190.471 128.029L190.495 127.952L190.585 127.856L190.56 127.773L190.472 127.757Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M197.977 137.646L197.929 137.877L198.264 137.873L198.269 137.533L198.146 137.471L197.977 137.646Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M173.24 136.497L173.166 136.626L173.256 136.724L173.367 136.644L173.24 136.497Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M171.89 136.191L171.443 135.952L171.16 135.87L171.104 136.311L171.16 136.307L171.235 136.424L171.332 136.332L171.615 136.271L171.862 136.313L171.89 136.191Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.72 132.538L189.375 132.444L187.939 132.664L187.626 132.858L187.817 133.663L187.246 133.681L186.902 134.132L186.085 134.292L186.087 134.619L188.781 136.299L189.24 136.331L190.772 135.355L190.619 135.197L190.332 135.166L190.159 134.93V133.954L190.044 133.859L190.064 133.607L189.757 133.356L189.719 133.088L189.853 133.009L189.795 132.726L189.72 132.538Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M169.106 140.012L168.706 140.215L168.677 140.516L168.597 140.615L168.849 140.812L168.74 140.909L168.765 141.157L169.216 141.245L169.899 140.586L169.897 140.357L169.57 140.339L169.106 140.012Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M166.126 140.173L166.073 140.363L165.976 140.443L166.043 140.541L166.215 140.486L166.297 140.369L166.244 140.247L166.126 140.173Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.433 126.756L192.959 126.742L192.659 126.892L192.655 127.003L192.85 127.153L193.455 127.236L193.433 126.756Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.423 126.815L192.295 126.851L192.423 126.869L192.481 126.924L192.55 126.856L192.481 126.759L192.423 126.815ZM192.477 126.955L192.295 127.022L192.232 127.11L192.295 127.168L192.526 127.098L192.637 127.038L192.477 126.955Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.785 133.612L194.011 133.617L194.451 133.716L194.66 133.721L194.919 133.545H195.04L195.26 133.644H195.538L195.588 133.641L195.764 134.054L195.814 134.187L195.861 134.386L195.778 134.436L195.635 134.377L195.47 133.939L195.321 133.93L195.31 134.079L195.409 134.337L196.202 135.137L196.218 135.48L195.988 135.698L193.819 135.678L193.785 133.612Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M196.727 137.174L196.706 136.768L197.041 136.449L197.132 136.506L197.297 136.956L198.089 137.436L197.945 137.58L197.366 137.174L196.727 137.174Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M187.562 130.987H186.484L186.266 130.907L186.161 130.913L186.034 131.128L186.079 131.35L186.491 131.381L186.544 131.522L186.364 132.346L186.372 132.494L186.664 132.623L187 132.642L187.674 132.506L188.003 132.169L188.01 131.825L188.594 131.394L188.624 131.204L188.093 131.197L187.562 130.987Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M184.792 134.348L184.644 134.418L184.712 134.474L184.792 134.348ZM184.278 134.361L184.094 134.399L184.186 134.512H184.323L184.278 134.361ZM183.841 134.248L183.726 134.343L183.887 134.456L183.978 134.286L183.841 134.248ZM188.639 131.829L188.505 131.867L188.534 131.965H188.729L188.811 131.891L188.639 131.829Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M196.117 138.351L196.732 137.233L197.344 137.236L197.886 137.62L197.848 137.937H198.269L198.312 138.127L198.992 138.459L199.411 138.476L198.614 139.175L197.518 139.45H197.247L196.763 139.114L196.572 139.048L196.201 138.603L195.957 138.606L195.928 138.402L196.117 138.351Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.504 124.913L192.68 124.976L192.788 125.141L192.68 125.256L192.136 125.74L192.043 125.995L192.168 126.365L192.586 126.62L193.145 126.404L193.595 126.353L194.014 125.804L193.703 125.205L193.407 124.631L193.454 124.261L193.268 124.236L193.22 123.966L192.969 123.633L192.692 123.789L192.583 124.153L192.289 124.009L191.879 123.927L191.788 124.014L191.945 124.13L192.232 124.126L192.463 124.43L192.504 124.913Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M175.683 151.899L175.461 151.879L175.239 152L175.4 152.142L175.683 151.899ZM175.905 151.808L175.832 152L175.622 152.152L175.634 152.202L175.992 152.09L176.14 151.939L175.905 151.808Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M188.58 129.173L188.393 129.21L188.019 129.542L187.907 129.548L187.757 129.462L187.66 129.481L187.586 129.671L187.039 129.683L187.054 129.782L187.428 129.985L187.862 130.268L187.855 130.606L187.623 130.937L188.125 131.134L188.634 131.146L188.791 130.999L189.113 131.005L189.202 131.072L189.524 131.054L189.689 130.881L189.479 130.679L189.464 130.55L189.508 130.408L189.404 130.285L189.224 130.328L189.202 130.218L189.598 129.861V129.646L189.368 129.585L189.228 129.506L188.58 129.173Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M175.191 139.043L175.686 139.295L175.427 139.714L175.333 139.811L175.059 139.682L175.066 139.23L175.191 139.043ZM201.014 144.601L200.821 144.611L200.808 144.748L200.937 144.77L201.13 144.696L201.014 144.601ZM198.747 142.664L198.811 142.781H198.914L198.966 142.633L198.747 142.664ZM173.494 136.852L173.404 136.92L173.471 137.03L173.598 136.999L173.494 136.852ZM190.055 131.122L189.889 131.257L189.874 131.38L190.009 131.448L190.061 131.442L190.091 131.263L190.055 131.122ZM173.031 136.393L172.905 136.435L172.949 136.527L173.098 136.448L173.069 136.423L173.031 136.393Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M190.779 139.79L190.768 139.962L190.291 139.954L189.999 140.414L190.686 141.025L190.855 140.909L190.85 140.79L190.734 140.745V140.661L190.997 140.525L191.23 140.669L191.489 140.674L191.483 139.95L191.075 139.934L191.07 139.783L190.779 139.79Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M187.372 127.13L187.217 127.321L187.279 127.397H187.636V127.525L187.543 127.627L187.605 127.895L187.806 128.213L187.961 128.506L188.209 128.583L188.317 128.736L188.302 128.876L188.147 128.953L188.132 129.016L188.24 129.067L188.147 129.169L187.929 129.246L187.51 129.208L186.858 129.45L186.641 129.361L187.262 129.068L187.184 129.03L186.858 129.004L187.06 128.762L187.091 128.558L187.355 128.533L187.308 128.137L186.998 128.125L186.905 128.036L186.92 127.743L186.734 127.755L186.92 127.246L187.262 127.041L187.372 127.13Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M186.721 127.984L186.442 128.01L186.426 128.214L186.612 128.316L186.814 128.278L186.892 128.164L186.721 127.984Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M196.622 130.929L196.898 131.224L197.244 131.353L197.456 131.352L197.821 131.272L197.912 131.155L196.834 130.826L196.622 130.929Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M187.221 138.716L187.316 138.897L187.563 139.213L187.7 139.209L188.074 139.035L188.048 138.05L187.758 137.981L187.353 137.99L187.221 138.716Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M176.798 120.301L176.683 120.45L176.891 120.619L176.799 120.788L177.098 121.107L177.466 121.013L177.949 120.976L178.502 121.464L178.87 122.27L178.571 122.776L178.985 122.72L179.215 122.832L179.238 123.076L178.732 123.095L179.008 123.32L179.353 123.376L178.594 124.201L178.502 124.708L178.663 125.12L178.548 125.364L178.755 125.889L179.146 126.246L179.261 126.227L179.514 126.171L179.536 126.471L179.697 126.658L179.996 126.64L180.226 125.946L180.916 125.252L181.951 124.915L182.595 124.258L182.894 124.37H183.515L184.021 123.958L184.642 123.752L184.711 123.433L184.32 123.152L183.975 123.058L183.791 122.664L184.228 122.458L184.919 122.758L185.149 122.552L184.781 122.383L185.563 121.52L185.425 121.145L185.057 121.126L185.195 120.789L185.655 120.62L186.598 119.945L186.323 119.701L185.264 119.776L184.712 120.227L185.034 119.645L184.666 119.57L184.459 119.87L184.161 119.664L183.332 119.739L183.563 119.439L184.919 119.401L184.574 119.026L183.102 118.801L182.504 118.877L182.527 119.121L181.906 118.952L181.929 118.783L181.491 118.858L181.399 119.046L181.859 119.177L181.376 119.458L181.031 119.14L180.548 119.027L180.479 119.327H179.996L179.811 119.009L179.052 118.915L178.638 119.084L178.616 119.308L178.087 119.252L177.765 119.364L177.788 119.627V119.758L177.19 119.852L176.914 119.702L176.729 119.946L177.005 120.19L177.58 120.133L177.626 120.284L177.188 120.453L176.798 120.301H176.798Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M178.639 123.227L178.777 123.396L178.708 123.602H178.57L178.385 123.433L178.431 123.302L178.639 123.227ZM184.39 122.758L184.781 122.851L184.758 123.114L184.344 122.945L184.252 122.851L184.39 122.758Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M184.054 137.425L184.043 137.502L184.628 137.495L184.658 137.424L184.645 137.352L184.477 137.408L184.054 137.425Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M184.352 138.087L184.609 138.41L184.944 138.173L185.288 138.161L185.574 138.47L185.817 138.601L185.908 138.456L185.989 138.419L185.983 138.1L185.822 137.722L185.326 137.767L184.713 137.727L184.709 137.855L184.352 138.087Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.971 139.43L189.932 139.566L190.049 139.618L190.16 139.55L190.122 139.41L189.971 139.43ZM190.322 139.794L190.317 139.89L190.701 139.906L190.696 139.798L190.322 139.794Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.498 131.856L192.488 131.948L192.88 132.109L193.067 132.167L192.969 132.251L192.751 132.269L192.72 132.35L192.795 132.489L193.04 132.595L193.146 132.603L193.16 132.365L193.32 132.207L192.883 131.787L192.941 131.644L193.043 131.641L193.199 131.743L193.297 131.703L193.328 131.56L193.693 131.602L193.804 131.344L193.613 131.454L193.052 131.442L192.688 131.596L192.498 131.856Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.348 132.752L193.486 132.756L193.543 132.825H193.744L193.877 132.785L193.922 132.829L193.833 132.924L193.442 132.936L193.371 132.859L193.295 132.822L193.348 132.752Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M166.118 136.955L166.62 137.254L167.126 136.742L167.04 136.635L166.867 136.63V136.33L166.738 136.266L166.346 136.361L166.496 136.643L166.118 136.955Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M184.198 137.852L184.316 138.043L184.649 137.81L184.652 137.738L184.26 137.692L184.198 137.852Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M173.746 138.514L174.357 138.965L174.114 139.194L174.095 139.33L174.414 139.598L174.406 139.856L173.851 140.029L173.519 139.662L173.59 139.222L173.448 138.895L173.746 138.514Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M167.19 136.766L167.972 136.742L168.204 136.966L168.059 136.939L167.781 136.949L167.417 137.228L167.261 137.51L167.159 137.466L167.158 137.157L166.933 137.034L167.19 136.766Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.559 130.308L191.261 130.509H190.958L190.922 130.683L191.06 130.712L191.13 130.628L191.239 130.706L191.326 130.955L191.924 131.182L191.983 131.127L191.377 130.617L191.438 130.524L192.015 130.506L192.073 130.356L191.697 130.365L191.559 130.308Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M170.854 135.842L171.145 135.866L171.11 136.157L171.081 136.311L170.742 136.295L170.682 136.369L170.578 136.363L170.541 136.204L170.899 136.179L170.877 136.014L170.713 135.959L170.854 135.842Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.654 129.925L191.556 130.05L191.564 130.242L191.72 130.307L192.202 130.319L192.873 129.858L192.876 129.756L192.803 129.727L192.319 129.906L191.654 129.925Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M210.751 138.751L210.727 138.909L211.302 139.696H211.469L212.666 141.328L213.145 141.368L213.384 140.797L213.001 140.601L212.929 140.286L210.751 138.751ZM216.423 140.927L216.614 141.118L216.49 141.405V141.46H216.772L216.872 140.742L216.964 140.763L217.129 141.418L217.287 141.453L217.437 141.173L217.287 140.749L217.163 140.565L217.554 140.333L217.462 140.23L217.088 140.428H216.989L216.806 140.209L216.864 140.113L217.172 139.99L217.638 140.106L217.779 140.099L218.128 139.833L217.987 139.717L217.663 139.922H217.455L217.139 139.799L216.915 139.806L216.666 140.134L216.507 140.701L216.423 140.927ZM218.509 139.643L218.351 139.957L218.6 140.224H218.683L218.792 140.046L218.85 139.985L218.742 139.889L218.584 139.841L218.509 139.643ZM219 140.675L218.659 140.736L218.559 140.825L218.642 140.941L218.866 140.873L219.007 140.805L219.215 140.941L219.307 140.88L219.141 140.715L219 140.675ZM213.347 141.562L213.114 141.692L213.164 141.801L213.905 141.937L214.278 141.992L214.436 142.128L214.86 142.156L215.06 142.292L215.243 142.258L215.409 142.135L215.101 142.019L214.836 141.835L214.146 141.699L213.347 141.562ZM215.767 142.156L215.584 142.238L215.692 142.334L215.958 142.252L215.767 142.156ZM216.082 142.095L216.115 142.224L216.306 142.265L216.381 142.19L216.298 142.087L216.082 142.095ZM216.54 142.436L216.307 142.464L216.515 142.607H216.681L216.54 142.436ZM216.606 142.211L216.556 142.293L216.93 142.34L217.221 142.204L217.055 142.163L216.789 142.224L216.689 142.156L216.606 142.211ZM217.828 142.259L217.396 142.553L217.437 142.628L217.62 142.6L217.836 142.436L218.26 142.388L218.177 142.273L217.828 142.259ZM220.01 140.253L219.657 140.285L219.431 140.421L219.525 140.575L219.909 140.633V140.691L219.666 140.852L219.783 141.186L219.901 141.193L220.002 140.864H220.19L220.269 141.186L221.185 141.804L221.209 142.287L221.522 142.563L221.663 142.557L221.694 140.852L221.162 140.55L220.66 140.827L220.48 140.917L220.182 140.762L220.175 140.273L220.01 140.253ZM215.759 139.223L215.563 139.821L214.504 140.113L214.186 139.81L214.032 139.844L214.32 140.749L214.75 140.788L215.325 140.966V141.143L215.588 141.104L215.971 140.671V140.317L216.187 139.963L216.426 140.002L216.139 139.511L216.095 139.194L215.759 139.223Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M186.813 128.335L186.736 128.749L186.053 128.953H185.836L185.681 128.864V128.788L186.023 128.609L185.93 128.456L185.945 128.239L186.24 128.251L186.376 127.992L186.358 128.222L186.587 128.371L186.813 128.335Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.764 133.267L195.63 133.614L195.804 134.03L196.002 133.422V133.292L195.764 133.267Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M206.394 138.437L206.782 138.282L207.012 137.604L207.002 136.771L208.32 135.611V135.335L208.591 135.249L208.581 134.931L208.288 134.467L208.456 134.218L208.822 134.493L209.292 134.511V134.665L209.146 134.794L209.177 134.863L209.429 134.871L209.481 135.103H209.555L209.743 134.828L209.837 134.106L210.151 133.925L210.161 133.677L210.036 133.479L209.837 133.47L209.059 133.89L209.108 134.159L208.562 134.158L208.369 133.965L208.264 133.976L208.299 134.244L207.118 134.175L206.385 133.909L206.346 133.581L205.858 133.334L205.852 132.826L205.517 132.514L204.747 132.574L204.831 132.847L205.208 133.096L204.556 134.184L204.12 134.211L204.048 134.342L204.478 134.666L204.457 134.994L204.018 134.988L203.97 135.151L204.335 135.138L204.345 135.267L204.084 135.379L204.251 135.637L204.575 135.723L204.774 135.603L204.868 135.388L204.983 135.346L205.119 135.457L205.078 135.733L204.984 135.862L205.005 136.085L206.394 138.437Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M197.37 132.369L197.238 132.9L196.692 133.271L196.726 133.447L197.26 133.476L198.11 134.04L198.586 134.029L198.599 133.899L198.773 133.747L199.016 133.859L199.049 133.834L198.577 133.323L198.354 133.312L198.057 133.001L198.116 132.772L198.207 132.762L198.238 132.661L197.834 132.314L197.37 132.369Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M197.822 131.88L197.719 131.968L197.729 132.107L197.857 132.254L198.313 132.661L198.244 132.823H198.165L198.125 132.986L198.383 133.255L198.621 133.272L199.097 133.809L199.364 133.825L199.572 133.948L199.582 134.192L200.406 134.583H200.713L200.901 134.452L201.139 134.444L201.278 134.705L202.167 134.806L202.194 134.539L202.488 134.452L202.502 134.357L202.267 134.096L201.745 133.754L202.019 133.551L202 133.461L201.656 133.418L201.511 132.473L201.494 132.255L200.562 131.965L200.15 132.041L199.919 132.272L199.714 132.261L199.655 132.302L199.199 132.277L198.623 131.935L198.409 131.744L198.311 131.763L198.134 131.928L197.822 131.88Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M184.008 124.939L183.843 124.862L183.619 124.977L183.427 125.122L183.433 125.203L183.681 125.228L183.666 125.373L183.578 125.445L183.599 125.492L183.848 125.505V125.74L184.206 125.791L184.418 125.889L184.657 125.897L185.066 125.731L185.382 125.39L185.388 125.16L185.195 125.028L185.035 124.916L184.962 124.959L184.853 125.074L184.729 125.061L184.604 124.95L184.443 124.963L184.21 125.121L184.069 125.244L183.991 125.189L183.986 125.052L184.064 125.01L184.008 124.939Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.584 130.434L189.532 130.542L189.546 130.66L189.748 130.853L190.066 130.844L190.768 131.509L191.207 131.612L191.466 131.811L191.527 132.266L191.666 132.2L191.786 131.952L191.757 131.774L191.962 131.759L191.992 131.658L191.412 131.432L190.862 130.991L190.643 130.728L190.59 130.478L190.87 130.423L190.798 130.258L190.627 130.14L190.478 130.135L190.272 130.181L190.077 130.403L189.96 130.466L189.778 130.375L189.584 130.434Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.29 132.23L191.168 132.176L190.749 132.23L190.763 132.322L191.14 132.477L191.197 132.527L191.296 132.539L191.29 132.23ZM190.032 131.565L189.808 131.658L189.837 132.014L190.017 132.039L190.151 131.934V131.596L190.032 131.565Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M169.845 136.132L169.55 136.193V136.26L169.722 136.34H169.902L170.016 136.233L169.845 136.132Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M196.067 133.455L195.859 134.047L195.849 134.137H196.177L196.543 133.874L196.552 133.774L196.403 133.649L196.671 133.468L196.632 133.299L196.558 133.313L196.335 133.444L196.067 133.455Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M217.582 131.775L217.444 131.888L217.501 132.047L217.621 132.054L217.703 132.4L217.8 132.486L217.97 132.36L217.985 131.979L217.789 131.809L217.582 131.775ZM218.303 131.455L218.043 131.627L217.985 131.844L218.162 131.944L218.419 131.725L218.456 131.48L218.303 131.455ZM218.002 131.124L217.589 131.509V131.694L217.844 131.67L218.244 131.383L218.511 131.343L218.576 131.405L218.578 131.595L218.645 131.695H218.768L218.94 131.522L219.013 131.296L219.361 131.289L219.701 130.957L219.523 130.405L219.442 130.113L219.62 129.993L219.215 129.495L219.123 129.436L218.939 129.495L218.892 129.701V129.868L218.99 129.961L219.022 130.4L218.771 130.652L218.626 130.579L218.512 130.785L218.488 130.977L218.577 131.091L218.52 131.177L218.334 131.05H218.205L218.091 131.104L218.002 131.124ZM218.699 128.12L218.569 128.214L218.634 128.413L218.748 128.506L218.74 128.812L218.594 128.858L218.481 129.064L218.812 129.436L219.03 129.376L219.071 129.282L218.837 129.11L218.982 128.957L219.136 128.977L219.472 129.161L219.508 128.955L219.667 128.717L219.891 128.532L219.649 128.443L219.557 128.299L219.436 128.365L219.331 128.471L219.104 128.432L218.87 128.305L218.699 128.12ZM219.919 127.914L219.693 128.174L219.709 128.3L219.822 128.26L220.088 127.987L219.919 127.914ZM220.219 127.535L220.138 127.715L220.146 127.834L220.284 127.761L220.413 127.549V127.469L220.219 127.535Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M196.23 139.369L196.455 139.727L196.185 140.188L196.15 140.328L197.497 141.008L197.915 140.472L197.704 140.332L197.7 139.627L197.964 139.391L197.542 139.506L197.223 139.509L196.724 139.166L196.567 139.111L196.275 139.133L196.224 139.203L196.23 139.369Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M203.504 130.588L203.477 130.762L203.498 130.87L204.235 131.071L203.588 131.284L203.515 131.234L203.375 131.307L203.382 131.347L203.456 131.375L203.91 131.384L204.14 131.328L204.435 131.024L204.805 131.076L205.251 130.573L204.058 130.441L203.893 130.767L203.685 130.585L203.504 130.588Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M212.274 137.503L212.62 137.804L213.263 137.415L213.32 136.802L212.987 136.989L212.815 136.91L212.58 136.884L212.449 136.809L212.386 136.812L212.214 137.042L212.242 137.148L212.416 137.227L212.395 137.443L212.274 137.503Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M198.502 142.453L198.541 142.558L198.708 142.58L198.773 142.442L198.502 142.453Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M215.471 130.247L215.627 130.3L215.674 130.744L215.983 130.759L216.274 130.481L216.173 130.408L216.185 130.11L216.452 129.846L216.316 129.646L216.405 129.563L216.454 129.356L216.299 129.299L216.167 129.354L216.004 129.758L215.74 129.739L215.435 130.033L215.471 130.247Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M216.322 130.518L216.845 130.866L216.934 131.202L216.916 131.383L216.661 131.617L216.441 131.627L216.191 131.188L216.096 130.978L216.197 130.914L216.173 130.827L216.049 130.781L216.322 130.518Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M198.976 133.896L198.786 133.811L198.654 133.92L198.668 134.136L198.975 134.232L198.976 133.896Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M198.418 129.857L198.765 129.737L199.152 129.725L199.179 130.208H198.952L198.779 130.439L199.005 130.746L199.34 130.9L199.37 131.075L199.493 131.042L199.606 130.933L199.793 130.966L199.887 131.12H200.127V130.922L199.98 130.571L199.913 130.286L200.34 130.132L200.915 130.209L201.275 130.505L202.09 130.439L202.544 130.966L203.078 130.988L203.225 130.79L203.412 130.757L203.439 130.538L203.719 130.527L203.866 130.67L204.013 130.385L205.281 130.528L205.495 130.297L205.134 129.935L205.615 129.08L206.002 129.102L206.269 128.575L205.735 128.531L205.428 128.29L204.582 128.37L203.493 127.511L203.108 127.789L201.944 127.358L200.515 127.928L200.475 128.334L200.809 128.652L200.158 128.952L199.313 128.937L199.136 128.725L198.473 128.695L197.846 129.024L197.832 129.474L198.418 129.857Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M211.85 134.983L211.645 135.067L211.475 135.472L211.759 135.767L211.712 136.093L211.759 136.109L212.232 135.922L212.866 136.5L212.851 136.864L212.989 136.925L213.33 136.699L213.302 136.52L212.318 135.758L212.327 135.642L212.45 135.572L212.365 135.377L211.958 135.323L211.85 134.983Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.838 132.88L195.844 133.014L195.774 133.219L196.013 133.235L196.028 132.945L195.838 132.88Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M173.487 137.128L173.427 137.232L173.524 137.317L173.651 137.262L173.487 137.128Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M207.203 138.095L207.224 138.282L207.245 138.419L207.121 138.436L207.184 138.743L207.371 138.829L207.661 138.692L207.578 138.369L207.599 138.249L207.329 138.045L207.203 138.095Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M185.177 138.863L186.106 139.369L186.083 138.986L185.803 138.716L185.529 138.518L185.177 138.863Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M194.249 146.188L194.507 146.026L194.629 146.03L194.776 146.18L194.761 146.33L194.513 146.404V146.463L194.24 146.45L194.174 146.288L194.249 146.188Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.413 127.709L192.203 127.738L192.22 127.899L192.548 127.919L192.673 128.002L192.705 128.147L192.807 128.262L193.107 128.251L193.394 127.953L193.377 127.775L192.836 127.706L192.413 127.709Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.309 129.492L189.384 129.546L189.47 129.552L189.489 129.414L189.464 129.336L189.344 129.383L189.309 129.492Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.459 127.288L192.836 127.205L192.73 127.43L192.55 127.474L192.457 127.381L192.363 127.236L192.261 127.297L192.203 127.547V127.683L192.423 127.653L192.879 127.66L193.429 127.743L193.649 127.691L193.636 127.489L193.459 127.288Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M190.242 133.955L190.374 133.937L190.413 133.689H190.479L190.749 133.328L191.415 133.486L191.597 133.716L192.251 133.96L192.592 133.843L192.559 133.725L192.41 133.608L192.427 133.527L192.669 133.36H193.148L193.33 133.558L193.715 133.604L193.765 136.148L193.479 136.139L191.751 135.407L191.564 135.493L190.855 135.348L190.662 135.141L190.381 135.109L190.238 134.901L190.242 133.955Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M187.556 132.869H186.579L186.387 133.215L185.947 133.388L185.583 134.191L184.874 134.537L183.878 135.875L184.855 135.859L184.893 135.466H185.142V134.93H186.004L186.023 134.238L186.847 134.081L187.192 133.624L187.729 133.608L187.556 132.869Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.685 129.794L193.948 130.123L193.926 130.31L194.02 130.313L194.242 130.006L193.975 129.736L193.823 129.685L193.685 129.794Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.172 131.015L192.049 131.158L192.084 131.246L192.231 131.268L192.347 131.139L192.172 131.015Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M199.738 142.569L199.558 142.918L199.249 143.363L198.709 143.394L198.477 143.616L198.516 144.293L198.181 144.611L198.219 145.15L198.503 145.415L198.838 145.383L199.173 145.182L199.096 144.864L199.868 143.775L199.714 143.637L199.868 143.373L200.036 143.415L200.087 143.309L199.933 142.77L199.842 142.548L199.738 142.569Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.854 131.195L192.569 131.271L192.583 131.468L192.649 131.538L192.988 131.41L192.854 131.195Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M185.117 137.253L185.377 137.107L186.826 137.1L186.491 135.201L186.873 135.192L188.723 136.343L188.971 136.372L188.878 137.012L187.714 137.098L186.817 137.644L186.654 138.018L186.03 138.04L185.871 137.667L185.393 137.694L185.411 137.572L185.117 137.253Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M211.34 137.791L211.105 137.485L211.275 137.291L211.114 137.05L210.963 137.026L210.934 136.622L210.708 136.264L210.641 136.35L210.49 136.56L210.3 136.583L210.206 136.482L210.158 136.209L210.016 135.991L209.437 135.546L209.58 135.47L209.606 135.148L209.817 134.858L209.909 134.137L210.215 133.967L210.225 133.704L210.409 133.754L210.698 134.095L210.484 134.47L210.628 134.765L210.986 134.879L211.051 135.2L211.532 135.261L211.399 135.448L210.793 135.642L210.727 135.961L211.172 136.427L211.191 136.676L211.087 136.762L211.096 136.84L211.428 137.236L211.437 137.648L211.34 137.791Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M206.633 128.585L207.125 128.052L207.716 128.275L208.118 128.363L208.611 127.994L208.276 127.794L208.496 127.54L209.153 127.73L209.38 128.034L209.791 128.043L210.006 127.912L210.449 127.898L210.545 128.032L211.28 128.062L211.745 127.675L212.389 127.73L212.352 128.257L212.634 128.309L212.98 128.181L213.346 128.329L213.337 128.403L213.072 128.41L212.795 128.883L212.58 128.9L211.745 129.791L210.891 130.098L210.357 130.132L209.914 129.898L209.347 130.145L208.789 130.004L208.631 129.673L207.573 129.613L207.032 128.864L206.769 128.85L206.633 128.585Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M183.885 135.93L184.069 136.126L184.031 136.976L184.299 136.819L184.491 136.787L184.759 136.866L185.065 137.212L185.353 137.055L186.751 137.039L186.406 135.134L186.776 135.133L186.086 134.702L186.087 134.982L185.213 134.983L185.209 135.517L184.958 135.516L184.925 135.911L183.885 135.93Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.305 132.744L191.164 132.767L191.169 132.895L191.296 132.93L191.352 132.891L191.305 132.744Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M201.49 144.367L201.362 144.505L201.387 144.653L201.658 144.473L201.49 144.367Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M205.161 138.972L205.186 139.152L205.327 139.194L205.353 139.035L205.161 138.972ZM205.341 139.352L205.328 139.574L205.431 139.616L205.522 139.468L205.341 139.352ZM205.367 139.786L205.277 139.86L205.38 139.934L205.509 139.86L205.367 139.786Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.919 143.016L196.183 143.24L196.177 143.527L196.228 143.648L196.578 143.341L196.537 142.95L196.35 142.833L196.184 142.147L195.895 142.139L196.026 142.633L195.919 143.016Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M161.263 132.396L161.672 133.445L161.482 133.532L161.503 133.74L161.862 133.966V134.383L162.306 134.731L162.116 133.706L161.862 133.028L161.926 132.559L162.137 132.576L162.222 132.732L162.137 133.132L163.237 134.886V135.512L164.125 136.363L165.098 136.728L165.5 136.537L166.071 136.919L166.41 136.641L166.261 136.328L166.748 136.207L166.896 136.276L167.044 136.155H167.276L167.699 135.546L167.488 135.39L166.663 135.546L166.473 135.998L165.986 136.068L165.415 135.877L165.161 135.217L165.353 134.384L164.961 134.185L164.774 133.385L164.617 133.331L164.332 133.567L164.003 133.424L163.875 132.891L162.575 132.78L161.903 132.368L161.263 132.396L161.263 132.396Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M211.616 138.605L211.786 138.916L211.824 139.32L212.052 139.608L212.551 139.854L212.648 139.791L212.792 139.768L212.771 139.615L212.591 139.258L212.327 138.801L212.305 138.881L211.987 138.869L211.758 138.602L211.616 138.605Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M214.275 139.81L214.53 140.051L215.51 139.774L215.704 139.165L216.14 139.139L216.54 138.903L216.022 138.596L215.904 138.426L215.648 138.811L215.742 139.032L215.586 139.216L215.293 139.154L214.581 139.58L214.6 139.826L214.275 139.81Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.413 145.353L195.64 145.507L196.177 145.241L196.263 144.845V144.193L197.123 143.619L197.271 143.623L197.791 143.216L197.71 142.375L196.359 142.515L196.41 142.781L196.607 142.921L196.663 143.378L196.198 143.749L196.086 143.541L196.106 143.267L195.838 143.029L195.18 143.279L195.793 143.533L195.813 144.273L195.408 144.764L195.413 145.353Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.638 145.952L191.922 145.968L192.088 146.106L192.483 146.11L192.58 145.195V144.597L192.833 144.555L192.929 143.927L193.572 143.911L193.799 143.757L193.415 143.745L192.893 143.803L192.332 143.637H190.753L190.794 144.002L191.32 144.634L191.229 144.958L191.234 145.128L191.638 145.952Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M226.33 145.849L226.3 145.972L226.69 146.416L226.9 146.49L226.93 146.318L226.33 145.849Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M188.621 137.678L188.837 137.673L189.032 137.436L189.358 137.388L189.706 137.561L190.448 137.578L191.021 137.388L191.237 137.237L191.253 137.038L191.653 136.709L191.759 135.983L191.496 135.533L190.822 135.399L189.264 136.389L189.043 136.372L188.948 137.06L188.153 137.124L188.621 137.678Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M188.679 138.876L189.011 138.889L189.411 139.252L189.605 139.296L189.758 139.235L189.989 139.209L190.068 138.945L190.384 138.776L190.726 138.763L191.352 137.825L191.341 137.613L191.052 137.431L190.474 137.639L189.699 137.63L189.331 137.44L189.067 137.487L188.93 137.682L188.92 138.231L188.699 138.486L188.679 138.876Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M168.052 136.995L168.237 137.026L168.243 137.335L168.028 137.838L167.446 137.791L167.317 137.549L167.49 137.255L167.817 137.007L168.052 136.995Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.4 128.454L189.017 128.607L189.098 128.667L189.106 128.821L189.025 128.808L188.936 128.694L188.722 128.971L189.051 129.027L189.173 129.132L189.238 129.134L189.281 128.895L189.489 128.824L189.4 128.454Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.238 123.892L193.409 123.79L193.393 123.676L193.285 123.625L193.301 123.485H193.394V123.408L192.99 123.319L192.385 123.37L192.324 123.587L192.184 123.549L192.091 123.421L191.795 123.433L191.764 123.675L191.625 123.727L191.547 123.599L190.926 124.007L191.05 124.121L190.818 124.21L190.29 125.064L190.104 125.166L190.119 125.243L190.305 125.319L190.259 125.485L189.948 125.472L189.855 125.383L189.654 125.574L189.529 125.65L189.498 125.829L189.39 125.88L189.11 125.931L188.971 126.289L189.064 126.875L189.172 127.143L189.296 127.245L189.576 127.232L189.979 126.914L190.134 126.697L190.181 127.016L190.445 126.633L190.46 125.562L190.675 125.452L190.739 124.861L191.39 124.096L191.701 124.007L191.84 123.867L192.306 123.956L192.538 124.07L192.616 123.752L193.005 123.56L193.238 123.892Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M190.937 120.569L190.797 120.455L190.488 120.578H189.919L189.83 120.848L190.149 121.077L190.288 121.061L190.488 120.782L190.657 120.881L190.537 121.077L190.477 121.364L190.616 121.544L190.916 121.135L191.305 120.749L191.155 120.643L190.937 120.569ZM191.106 120.077L190.857 120.266L191.006 120.454H191.275L191.385 120.577L191.714 120.716L192.093 120.536L192.353 120.356L192.263 120.208L192.003 120.086L191.814 120.225L191.685 120.094L191.585 120.102L191.455 120.332L191.266 120.176L191.245 120.07L191.106 120.077ZM191.675 120.922L191.475 121.069L191.306 121.176L191.385 121.29L191.545 121.331L191.805 121.232L191.925 121.109L191.815 120.962L191.675 120.922Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M206.412 133.578L206.451 133.872L207.134 134.125L208.23 134.191L208.188 133.975L207.456 133.811L206.835 133.509L206.412 133.578Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M226.87 150.09L226.959 150.904L226.839 151.274L226.389 151.545L226.419 151.866V152.211L226.539 152.334L227.77 151.471V151.274H227.47L227.049 150.115L226.87 150.09ZM225.97 151.866L226.21 152.235L225.549 152.753L225.489 153.024L225.039 153.073L224.289 153.64L223.598 153.369L223.538 153.172L224.799 152.728L225.97 151.866Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M200.253 136.218L200.878 135.924L200.989 135.493L200.852 135.429L200.908 134.967L201.028 134.91L201.155 135.074L201.916 135.398V135.578L200.995 136.684L200.571 136.695L200.253 136.218Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M168.293 138.202L168.17 138.517L168.578 138.603L168.83 138.644L168.874 138.4L169.145 138.289L169.386 138.39L169.481 138.514L169.596 138.503L169.686 138.278L169.385 138.177L169.157 138.075L168.929 138.202L168.657 138.314L168.38 138.223L168.293 138.202Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M168.669 140.955L168.505 141.09L168.516 141.306L169.949 143.436L171.437 144.218L171.667 143.904L171.722 143.212L171.602 142.781L171.197 142.224L170.956 142.287L170.846 142.385L170.365 141.935L170.485 141.405L171.044 141.108L171 140.83L170.431 140.812L170.136 140.408L169.972 140.363L169.983 140.606L169.25 141.316L168.703 141.208L168.669 140.955Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M221.772 140.87L221.741 142.556L222.039 142.543L222.43 142.17L222.759 142.183L222.971 142.337L223.041 142.813L223.714 143.103L223.887 143.051V142.877L223.346 142.51L223.08 142.008L223.291 141.925L223.135 141.648L222.822 141.642L222.743 141.346L221.913 140.889L221.772 140.87Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M224.321 141.335L224.241 141.35L224.192 141.528L224.038 141.609L223.575 141.676L223.593 141.818L224.081 141.798L224.39 141.64L224.371 141.366L224.321 141.335ZM224.117 140.919L224.042 141.006L224.45 141.299L224.505 141.472L224.616 141.461L224.629 141.284L224.505 141.193L224.117 140.919Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M216.409 137.369L216.337 137.482L216.296 137.622L215.892 138.04L215.916 138.126L216.086 138.107L216.612 137.628L216.409 137.369ZM217.064 137.21L217.056 137.555L217.209 137.682L217.266 137.927L217.42 137.954L217.493 137.801L217.372 137.728L217.34 137.296L217.064 137.21ZM217.502 137.343L217.493 137.649L217.582 137.768L217.735 137.622L217.695 137.356L217.502 137.343ZM217.598 137.077L217.752 137.243L217.825 137.402H217.962L217.938 137.13L217.784 137.044L217.598 137.077ZM217.898 137.702L217.93 137.901L217.646 138.087L217.412 138.107L217.161 138.327L217.17 138.427L217.404 138.367L217.566 138.281L217.704 138.566L217.946 138.705L218.044 138.678L218.132 138.592L217.939 138.433L218.052 138.36L218.182 138.446L218.27 138.327L218.182 138.18L218.165 137.855L217.898 137.702ZM216.579 135.675L216.361 135.801L216.337 136.2L216.677 136.738L216.791 136.811L216.936 136.731L217.186 136.764L217.234 136.944L217.42 136.957L217.509 136.857L217.396 136.731L217.258 136.625L216.967 136.599L216.813 136.393L216.991 136.173L217.007 135.981L216.886 135.735L216.579 135.675ZM216.693 136.864L216.757 137.051L216.87 137.111L216.952 137.025L216.822 136.878L216.693 136.864Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M202.346 134.08L202.566 134.346L202.545 134.483L202.253 134.578L202.231 134.801H202.566L202.681 134.724H203.319L203.895 135.137L203.968 134.939H204.397L204.407 134.69L203.968 134.346L204.062 134.157L204.512 134.132L205.119 133.101L204.784 132.886L204.659 132.525L205.474 132.465L204.993 131.907L204.737 131.85L204.632 131.954L204.553 131.958L204.072 132.207L204.229 132.423L204.052 132.577L203.831 133.239L203.288 133.522L203.214 133.832L202.346 134.08Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.9 128.901L192.971 129.009L192.988 129.123L192.929 129.235L192.794 129.447L192.679 129.489L192.531 129.437L192.442 129.44L192.227 129.506L191.982 129.447L191.584 129.217L191.195 129.047L191.038 128.852L191.008 128.393L191.313 128.178L191.71 128.07L191.84 128.059L191.871 128.139L192.04 128.194L192.506 128.202L192.65 128.198L192.887 128.494L192.828 128.615L192.853 128.758L192.899 128.901L192.9 128.901Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M172.562 136.233L172.339 136.172L172.159 136.263L172.249 136.349L172.554 136.385L172.562 136.233Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M186.087 131.417L186.035 132.014L185.885 132.125L185.9 132.192L186.005 132.333L185.937 132.506L186.05 132.537L186.312 132.512L186.297 132.34L186.469 131.54L186.431 131.43L186.087 131.417Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M184.163 133.154L184.071 133.249L184.163 133.343L184.3 133.287L184.163 133.154ZM181.156 131.816L181.041 131.911L181.247 132.005L181.27 131.874L181.156 131.816ZM181.776 131.76L181.638 131.835L181.753 131.91L181.937 131.872L181.776 131.76ZM181.867 132.024L181.799 132.175L181.89 132.269L182.005 132.194L181.867 132.024ZM182.418 132.325L182.372 132.42L182.441 132.476L182.625 132.382L182.418 132.325Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M174.314 144.403L174.5 144.569L174.478 144.919L175.014 144.892L175.419 145.315L175.387 145.693L175.124 146.016L174.588 146.034L174.566 145.854L174.719 145.557L174.193 145.288H173.756L173.428 145L173.667 144.444L174.314 144.403Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M199.766 134.713L199.722 134.99L199.852 135.07L199.971 135.062L200.015 134.713L199.912 134.653L199.766 134.713Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.96 129.787L192.938 129.889L192.448 130.221L192.858 130.711L193.12 130.861H193.592L193.748 130.755L193.957 130.733L194.112 130.809L194.388 130.553L194.335 130.425L194.055 130.366L193.864 130.359L193.873 130.139L193.619 129.814L192.96 129.787Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.399 130.266L192.226 130.372H192.142L192.084 130.518L192.289 130.712L192.303 130.866L192.216 130.965L192.516 131.22L192.841 131.14L192.814 130.763L192.399 130.266Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M218.829 121.878L218.978 122.297L219.276 122.367L219.573 121.982L219.403 121.72L219.467 121.493H219.913L219.807 121.668L219.849 122.297L219.211 123.59L219.275 123.869L219.253 124.341L220.443 125.755L220.677 125.808L220.698 124.655L220.932 124.481L220.676 124.027L220.889 123.834L220.421 123.328L220.166 123.345L220.081 122.507L220.74 122.367L220.782 122.122L221.123 122.053L221.314 122.193L221.547 121.425L221.951 120.866L222.27 120.726L222.546 120.743V120.481L222.1 120.411L221.483 119.992L221.781 119.713L221.525 119.241L221.738 119.066L221.993 119.346L222.631 119.538L223.332 119.591L223.418 119.346L223.057 119.05L223.46 118.596L222.546 118.334L222.312 118.718L222.014 118.403L220.335 117.931L218.74 118.158L218.507 118.263V118.368L218.847 118.508L218.805 118.84L218.188 118.63L216.828 119.067L216.594 118.666H215.658L215.233 119.032L213.724 118.753L212.342 118.98L212.172 119.329L212.384 119.381L212.363 119.644L211.024 119.766L211.11 120.115L209.876 119.94L210.174 119.486L208.919 119.434L209.026 119.906L208.623 120.063L208.282 119.801L206.901 119.993L206.37 120.395L206.348 120.639L206.008 120.656L205.966 120.377L207.05 119.608V119.084L206.349 118.927L205.435 119.171L205.052 118.857H204.882L204.67 119.206L204.84 119.363L203.627 119.905L202.586 120.551L201.948 121.267V121.563L202.628 121.79L202.288 122L201.565 121.79L201.268 122L200.821 121.581L200.736 121.738L201.225 122.995L201.352 123.031L201.693 122.891L201.863 122.995V123.222L201.544 123.118L201.352 123.24L201.48 123.467L201.374 124.06L200.715 124.113L200.672 123.92L201.055 123.728L201.14 123.204L200.715 122.75L200.566 121.964L199.886 121.877L199.822 122.156L199.95 122.296L199.674 122.489L199.78 123.013L200.184 123.153L200.269 123.537L199.865 123.327L198.823 123.17L198.695 123.449L197.866 123.693L197.738 123.519L196.654 124.008L196.633 124.34L196.207 124.392L196.335 124.148V123.904L195.909 123.782L195.633 123.869L195.866 124.236L196.036 124.481V124.673L195.717 124.621L195.654 124.568L195.335 124.847L195.505 125.092L194.782 125.074L195.016 125.319L194.953 125.424H194.57L194.293 125.267L194.23 124.83L193.784 124.69V124.516L194.719 124.673L195.23 124.708L195.442 124.446L195.251 124.167L193.89 123.73L193.421 123.825L193.26 123.938L193.31 124.196L193.51 124.225L193.463 124.631L194.079 125.811L193.634 126.386L193.604 126.516L193.83 126.646L193.626 126.755L193.49 126.757L193.516 127.264L193.703 127.48L193.705 127.69L193.945 127.708L194.311 127.821L194.698 128.256L194.703 128.37L194.577 128.546L194.866 128.533L195.147 128.599L195.528 129.039L196.466 129.109L196.425 129.631L196.102 129.857L196.169 129.945L195.85 130.225L195.765 130.487L195.956 130.714L196.573 130.888L196.828 130.766L198.465 131.272L198.529 131.132L198.189 130.87V130.538L197.976 130.486L198.019 130.207L198.359 129.875L197.749 129.503L197.791 128.985L198.444 128.635L199.209 128.67L199.337 128.863L200.124 128.898L200.698 128.636L200.4 128.374L200.464 127.884L201.952 127.291L203.096 127.711L203.479 127.432L204.605 128.305L205.456 128.236L205.754 128.48L206.561 128.549L207.093 127.956L207.773 128.2L208.134 128.253L208.495 127.991L208.176 127.816L208.453 127.467L209.24 127.677L209.409 127.956L209.75 127.974L209.962 127.851L210.536 127.834L210.6 127.956L211.259 127.991L211.705 127.607L212.62 127.695L212.896 127.607L212.981 127.188L212.704 126.682L212.981 126.489H213.852L214.681 127.293L215.744 127.782H216.063L216.105 127.572L216.487 127.38L216.53 128.515L216.19 128.532V128.811L216.381 129.004L216.345 129.254L216.487 129.301L216.572 129.127L216.7 129.162L216.785 129.231L217.167 129.162L217.549 128.253L217.592 127.118L217.102 126.209L216.486 125.599L216.188 125.634V125.826L215.465 125.599L215.742 125.11L215.976 123.818L216.953 123.573L217.421 123.329H217.931L217.803 123.469L217.931 123.644L218.377 123.26L218.633 123.277L218.59 123.05L218.186 122.98L218.463 122.159L218.828 121.878L218.829 121.878Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M192.214 127.952L192.087 128.143L192.544 128.147H192.637L192.619 128.039L192.548 127.971L192.214 127.952ZM220.696 125.954L220.591 126.06L220.6 126.226L220.697 126.22L220.858 125.987L220.696 125.954ZM224.185 119.495L223.986 119.601L223.939 119.737L224.032 119.824L224.244 119.765L224.455 119.824L224.573 119.852L224.561 119.534L224.185 119.495ZM195.975 119.523L196.121 119.57L196.019 119.714V119.917L195.8 120.025H195.568L195.437 119.893L195.451 119.75L195.553 119.642H195.757L195.975 119.523ZM196.529 119.391V119.534L196.674 119.63L196.878 119.619L197.053 119.487V119.391H196.893L196.762 119.427L196.66 119.331L196.529 119.391ZM197.359 119.403L197.462 119.583L197.666 119.594L197.811 119.547L197.739 119.379L197.549 119.343L197.359 119.403ZM198.189 119.164L198.029 119.14L197.884 119.26L197.956 119.368L198 119.535L198.19 119.416L198.234 119.284L198.189 119.164ZM199.077 120.432L199.033 120.6L198.698 120.839L197.985 120.971L197.401 121.761L197.299 121.989L197.882 122.109L197.969 121.822L198.144 121.379L198.596 121.187L198.975 120.948L199.251 120.852H199.397V120.529L199.077 120.432ZM197.199 122.18L197.592 122.216L197.723 122.587L198.058 122.874L197.942 123.065H197.738L197.548 122.886L197.126 122.874L196.951 122.682V122.551L197.213 122.491L197.199 122.18ZM203.346 118.099L203.157 118.003H202.938L202.894 118.111L202.662 118.219L202.487 118.266L202.458 118.41L202.866 118.434L203.346 118.099ZM203.797 118.135L203.695 118.314L203.491 118.303L203.17 118.494L203.083 118.734H203.287L203.404 118.578L203.68 118.745L203.943 118.65L204.132 118.518L204.059 118.314L203.957 118.171L203.797 118.135ZM204.22 118.267L204.322 118.602L204.482 118.913L204.657 118.662L204.992 118.602V118.422L204.774 118.291L204.22 118.267ZM212.213 117.73L212.44 117.886L212.602 117.832L212.649 117.613L212.317 117.426L212.099 117.543L211.568 117.583V117.778L211.008 117.785V118.105L211.662 118.502L211.833 118.4L211.795 118.12L212.213 118.034L212.128 117.902L211.976 117.777L212.213 117.73ZM212.82 117.543L212.971 117.777L213.56 117.723L213.722 117.551L213.684 117.403L213.522 117.348L213.371 117.442L212.934 117.52L212.82 117.543ZM212.782 118.455L212.487 118.393L212.318 118.541L212.241 118.744L212.64 118.713L212.944 118.588L212.782 118.455ZM220.411 117.107L220.165 117.044L219.88 117.13L219.738 117.302L219.919 117.497L220.393 117.325L220.488 117.24L220.411 117.107ZM220.502 126.36V126.652L220.616 126.685L220.697 126.579V126.353L220.502 126.36ZM217.194 125.303L217.186 125.728L217.841 126.553L218.075 127.27L218.488 127.908L218.65 127.954L218.787 127.861L218.852 127.708L218.261 127.183L218.277 126.91L218.407 126.864L218.439 126.705L217.283 125.37L217.194 125.303ZM221.756 123.981L221.594 123.994L221.692 124.107L221.894 124.22L221.951 124.167L221.756 123.981ZM222.071 124.061L222.095 124.174L222.346 124.234L222.37 124.154L222.071 124.061ZM223.445 124.495L223.551 124.649L223.727 124.639L223.762 124.533L223.445 124.495ZM225.219 124.736L225.36 124.948L225.466 124.852V124.707L225.219 124.736Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.13 140.292L195.367 140.47L195.357 140.662L194.988 140.668V140.457L195.13 140.292Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M199.036 134.314L199.629 134.988L199.82 135.112L199.906 135.414L200.819 135.473L200.922 135.517L200.819 135.89L200.22 136.178L199.342 136.395L198.875 136.767L198.319 136.503L197.982 136.743L197.513 136.119L197.192 135.999L197.075 135.855V135.542L195.905 134.389L195.861 134.185H196.198L196.607 133.896L196.622 133.752L196.505 133.657L196.74 133.501L197.237 133.525L198.086 134.101L198.586 134.083L198.619 134.184L199.036 134.314Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M224.87 141.644L224.975 141.882L225.16 142.029L225.216 141.988L225.197 141.831L224.987 141.623L224.87 141.644ZM225.382 141.999L225.394 142.156L225.512 142.247L225.623 142.191L225.524 142.024L225.382 141.999ZM225.53 142.389L225.431 142.475L225.535 142.633L225.659 142.663L225.653 142.557L225.53 142.389ZM225.771 142.298L225.857 142.471L226.024 142.632L226.116 142.511L225.992 142.339L225.771 142.298ZM226.203 142.557L226.252 142.77L226.37 142.901L226.469 142.735L226.203 142.557ZM226.338 143.033L226.295 143.094L226.437 143.247L226.536 143.252L226.475 143.053L226.338 143.033ZM226.024 143.337L225.875 143.393L226.005 143.54L226.116 143.489L226.024 143.337Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M200.588 141.564L200.537 141.648L200.678 141.743L200.782 141.648L200.588 141.564ZM201.31 140.929L201.155 141.014L201.271 141.162H201.426L201.31 140.929ZM201.374 141.299L201.271 141.395L201.348 141.49L201.489 141.511L201.502 141.31L201.374 141.299Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.784 138.066L193.534 137.946L193.307 137.58L193.319 137.239L193.635 137.018L193.65 136.202L193.858 136.206L193.834 135.753L196.017 135.769L196.329 135.512L197.002 136.391L196.634 136.745V137.286L196.183 138.075L196.082 138.259L195.719 137.835L195.454 138.11L195.154 138.176L194.181 138.096L193.757 138.219L193.784 138.066Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.737 124.061L191.903 124.185H192.213L192.384 124.453L192.431 124.912L192.012 125.154V125.396L191.717 125.728L191.546 125.74L191.313 126.059L191.329 126.365L191.732 126.607L191.701 126.747L191.546 126.938L191.314 127.104L191.329 127.652L190.972 127.754L190.848 127.971H190.677L190.584 127.588L190.195 127.103L190.514 126.668L190.536 125.592L190.756 125.494L190.81 124.879L191.437 124.147L191.737 124.061Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.802 127.205L191.624 127.32L191.714 127.489L191.872 127.364L191.802 127.205Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M212.59 139.875L212.658 139.906L212.809 139.896L212.796 139.803L212.673 139.819L212.59 139.875Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.49 130.09L191.275 130.195L190.874 130.266L190.955 130.455L191.235 130.458L191.494 130.281L191.49 130.09Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.578 129.754L191.637 129.796L191.644 129.868L192.29 129.856L192.767 129.689L192.759 129.518L192.668 129.552L192.537 129.494L192.456 129.491L192.245 129.56L191.957 129.504L191.578 129.754Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M184.649 138.445L185.127 138.822L185.468 138.485L185.255 138.212L184.961 138.236L184.649 138.445Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M184.612 137.566L184.045 137.555L184.15 137.762L184.208 137.634L184.92 137.695L184.999 137.693L185.332 137.702L185.344 137.582L185.039 137.284L184.7 136.91L184.489 136.838L184.327 136.872L183.994 137.069L183.918 137.18L183.894 137.29L184.017 137.362L184.426 137.357L184.689 137.299L184.719 137.404L184.695 137.544L184.612 137.566Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M199.71 137.819L200.08 137.703L200.211 137.767L200.197 138.035L199.856 138.827L198.011 140.438L197.797 140.318L197.782 139.638L198.06 139.378L198.649 139.23L199.512 138.486L199.738 138.322L199.802 138.082L199.71 137.819Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M174.43 138.998L174.602 139.127L174.87 138.992L175.113 138.998L175.082 139.075L174.98 139.249L174.964 139.682L174.477 139.843L174.501 139.566L174.187 139.327L174.203 139.204L174.43 138.998Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M196.053 138.304L195.854 138.376L195.917 138.659H196.166L196.503 139.058L196.232 139.087L196.163 139.189L196.156 139.338L195.344 139.326L195.261 139.223L194.694 139.197L193.651 138.322L193.755 138.271L194.198 138.162L195.166 138.223L195.496 138.162L195.714 137.923L196.053 138.304Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.455 140.102L189.552 140.062L189.625 140.11L189.552 140.202L189.464 140.174L189.455 140.102ZM189.65 139.85L189.797 139.83L189.845 139.906L189.773 139.97L189.7 139.962L189.65 139.85Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M166.691 137.282L167.089 137.444L167.083 137.188L166.879 137.086L166.691 137.282Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.878 132.651L195.849 132.827L196.087 132.908L196.077 133.394L196.315 133.389L196.554 133.242L196.644 133.23L197.185 132.879L197.294 132.369L196.212 132.459L196.098 132.663L195.878 132.651Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.387 145.403L195.175 145.432L195.084 145.635L195.246 145.756H195.443L195.61 145.561L195.387 145.403Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M191.32 137.264L191.331 137.06L191.732 136.742L191.84 135.962L191.573 135.545L191.76 135.467L193.57 136.236L193.559 136.99L193.24 137.212V137.601L193.449 137.931H193.08L192.469 138.423L192.453 138.572L192.002 138.567L191.997 138.635L191.739 138.607L191.563 138.336L191.431 138.283L191.448 138.2L191.614 138.097V137.613L191.385 137.584L191.108 137.416L191.32 137.264Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M188.142 139.005L188.369 138.897L188.363 138.183L188.216 137.989L188.122 138.054L188.142 139.005Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M211.39 135.503L211.664 135.79V136.14L211.758 136.179L212.194 136.008L212.28 136.031L212.8 136.521L212.781 136.855L212.611 136.832L212.46 136.754L212.346 136.762L212.148 137.033L212.186 137.181L212.346 137.251L212.337 137.414L212.224 137.461L211.835 137.243V137.048L211.675 137.041L211.609 137.126L211.575 137.997L211.826 138.371L212.271 138.72L212.252 138.822L212.015 138.814L211.798 138.55H211.57L211.286 138.363L211.201 138.168L211.324 138.005L211.366 137.857L211.5 137.664L211.494 137.22L211.167 136.835L211.153 136.788L211.259 136.701L211.235 136.396L210.8 135.947L210.851 135.688L211.39 135.503Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M202.943 131.459L203.291 131.107H203.422L203.468 131.186L203.307 131.281V131.359L203.413 131.421L203.921 131.446L204.087 131.388L204.162 131.4L204.213 131.533L204.515 131.558L204.667 131.818L204.621 131.897L204.561 131.901L204.501 131.802L204.37 131.794L204.143 131.819L204.128 131.993L203.901 131.98L203.912 131.761L203.746 131.628L203.494 131.798L203.499 131.91L203.277 131.972H203.146L203.156 131.587L202.943 131.459Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M199.869 131.166L199.817 131.347H199.466V131.593L199.843 131.795L199.726 132.073V132.202L199.883 132.223L200.091 131.999L200.56 131.913L201.561 132.223L201.574 132.447L202.133 132.49L202.757 131.956L202.68 131.784L202.263 131.71L201.093 131.09L201.04 130.865H200.598L200.402 131.165H200.207L199.869 131.166Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M189.808 132.527L190.275 132.373L190.429 132.455L190.435 132.554L190.363 132.631L190.374 132.767L190.446 132.798V133.042L190.363 133.155L190.374 133.228L190.688 133.318L190.435 133.639L190.336 133.634L190.319 133.892L190.209 133.906L190.115 133.838L190.137 133.576L189.829 133.332L189.79 133.12L189.939 133.024L189.808 132.527Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M194.436 131.433L194.211 131.319L194.086 131.238L193.877 131.311L193.733 131.609L193.95 131.57L194.103 131.475L194.439 131.55L194.249 131.699L193.742 131.679L193.555 131.846V131.928L193.675 132.009V132.099L193.625 132.205L193.674 132.295L193.834 132.23L193.993 132.369L193.953 132.467L193.894 132.532L193.982 132.614L194.419 132.687L194.726 132.581V132.426L194.875 132.45L195.232 132.621L195.618 132.572L195.787 132.442L195.896 132.474V132.621H196.045L196.173 132.418L197.304 132.32L197.797 132.271L197.666 132.132L197.664 131.943L197.763 131.847L197.403 131.611L197.422 131.407H197.224L196.896 131.276L196.707 131.439L196.013 131.422L195.597 131.219L195.198 131.248L194.753 131.466L194.436 131.433Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M173.509 137.869L173.419 137.937L173.322 137.949V138.047L173.501 138.182L173.575 138.084L173.62 137.973L173.605 137.881L173.509 137.869Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M216.248 133.974L215.948 134.161L215.932 134.519L216.191 134.765L216.256 134.719L216.248 133.974Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M196.336 142.453L197.686 142.318L197.354 141.794L197.336 141.292L197.443 141.052L196.037 140.332L195.597 140.391L195.444 140.484L195.43 140.694L195.331 140.986L195.228 141.086L195.08 141.097L195.355 141.849L195.826 142.075L196.236 142.083L196.336 142.453Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.247 128.79L193.002 128.903L193.063 129.115L192.836 129.505L192.838 129.676L192.945 129.732L193.628 129.759L193.819 129.63L194.024 129.686L194.317 130.005L194.103 130.32L194.358 130.381L194.692 130.067L194.883 130.095L195.061 130.196L194.905 130.364L195.116 130.633H195.341L195.457 130.454L195.696 130.414L195.702 130.269L195.259 130.213L195.273 130.056H195.703L196.166 129.754L196.371 129.608L196.405 129.149L195.491 129.082L195.116 128.651L194.857 128.578L194.543 128.589L194.402 128.874L193.759 128.881L193.55 128.803L193.247 128.79Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M195.17 140.236L195.426 140.432L195.587 140.348L196.022 140.29L196.097 140.296L196.124 140.162L196.37 139.741L196.163 139.391L195.494 139.394L195.49 139.538L195.58 139.609L195.566 139.753L195.17 140.236Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M162.217 127.769L162.132 128.046L161.837 127.89H161.69L161.605 128.184L160.572 130.072L160.846 131.716L161.184 131.855L161.247 132.305H161.943L162.617 132.72L163.944 132.824L164.091 133.378L164.302 133.499L164.597 133.257L164.829 133.344L165.04 134.14L165.397 134.33L165.693 133.88L166.599 133.343L167.188 133.568L167.694 133.602L167.715 133.343L168.769 133.36L168.979 133.551L169.021 133.983L168.895 134.225L169.042 134.64H169.359L169.675 134.242L169.549 134.052L169.423 133.637L169.613 133.169L170.476 132.564L171.129 132.408L171.045 131.906L171.951 131.109L172.857 130.988L172.71 130.573L173.595 130.158V129.604L173.51 129.57L173.193 129.656L173.151 129.995L172.1 130.006L171.276 130.452L169.982 130.797L169.776 130.591L170.363 129.866L170.073 129.641L169.876 129.335L169.467 129.067L169.023 129.037L168.184 128.57L162.217 127.769Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M155.484 120.527L155.776 120.973L155.964 120.939V120.784L155.484 120.527ZM153.833 124.452L153.819 124.66L154.002 124.626V124.533L153.833 124.452ZM153.553 124.545L153.187 124.695L153.244 124.857L153.384 124.764L153.665 124.66L153.553 124.545ZM152.034 124.741L151.781 124.694L151.739 124.787L151.767 124.96L152.034 124.741ZM151.499 124.73L151.26 124.649L151.175 124.776L151.33 124.903L151.499 124.73ZM157.509 119.944L156.799 120.081L156.946 120.733L157.718 120.904L157.759 121.041L156.611 121.333L155.964 122.208L156.194 123.134L156.569 123.34L156.862 123.117L156.946 123.254L156.59 123.597L155.212 124.112L154.335 124.283L154.314 124.541L156.339 124.061L157.174 123.871L157.946 123.1L158.803 122.637L158.364 123.237L158.845 123.289L159.659 122.997L159.806 123.477L160.369 123.58L160.954 124.043L160.995 124.385L160.911 124.471L161.016 124.797H161.162L161.183 124.247H161.35L161.391 125.602L161.809 125.31L161.516 123.904H161.078L160.598 123.407L162.957 120.148L160.619 118.656L158.009 119.067L157.905 119.719L158.468 119.994L158.259 120.44L157.509 119.944Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M175.041 146.639L174.868 146.791L174.94 147.603L175.485 147.732L176.177 147.166L175.041 146.639Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M202.836 131.957L203.097 131.968V131.604L202.85 131.487L203.266 131.059H203.435L203.604 131.22L204.047 131.082L203.435 130.911L203.412 130.807L203.266 130.836L203.123 131.039L202.507 131.022L202.054 130.5L201.259 130.564L200.88 130.258L200.355 130.186L199.975 130.312L200.196 130.911L200.198 131.112L200.359 131.115L200.556 130.808L201.08 130.814L201.158 131.049L202.282 131.657L202.717 131.739L202.836 131.957Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M173.494 137.391L173.39 137.453L173.472 137.576L173.607 137.514L173.494 137.391ZM173.367 137.63L173.27 137.709L173.307 137.758H173.427L173.464 137.678L173.367 137.63Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M170.82 137.948L170.857 138.127L171.132 138.198L171.195 137.869L171.485 137.624L171.775 137.901L172.443 138.05L173.008 137.953L173.393 138.34L173.683 138.488L173.365 138.883L173.471 139.183L173.289 139.366L173.101 139.495L172.692 139.327L172.598 139.405V139.643L172.897 139.759L172.457 140.147L172.167 140.128L171.875 139.866L171.813 138.883L170.817 138.605L170.636 138.173L170.82 137.948Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M212.661 137.847L212.762 137.975L212.78 138.123L213.045 138.147L213.366 137.797L213.669 137.727L213.83 137.37L213.755 136.795L213.443 136.445L213.114 136.23L212.695 135.644L212.995 135.234L212.565 134.832L212.221 134.82L211.911 134.956L212.004 135.28L212.417 135.34L212.527 135.59L212.382 135.668L212.391 135.729L213.36 136.502L213.398 136.729L213.339 137.446L212.661 137.847Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M227.534 144.246L227.429 144.36L227.473 144.489L227.525 144.518L227.621 144.417L227.534 144.246ZM227.586 144.597L227.595 144.69L227.708 144.719L227.787 144.683L227.708 144.582L227.586 144.597ZM227.752 145.428L227.699 145.493L227.778 145.565L227.909 145.529L227.752 145.428Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M198.02 136.797L198.142 137.092V137.38L198.434 137.597L200.497 136.912L200.517 136.724L200.186 136.24L199.356 136.456L198.88 136.838L198.327 136.571L198.02 136.797Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M200.357 137.515L200.538 137.68L200.781 137.56L200.869 137.536L200.757 137.447L200.543 137.499L200.357 137.515Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M194.82 144.688L194.151 145.191L193.992 145.502L193.463 145.448L193.022 145.768L192.73 145.744L192.753 145.303L192.649 145.273L192.577 146.176L192.057 146.172L191.9 146.021L191.671 146.019L191.88 146.509L192.253 146.796L191.987 147.049L192.159 147.367L192.559 147.491L192.877 147.27L193.788 147.274L193.853 147.208L194.258 147.15L195.626 146.039L195.62 145.69L195.474 145.844H195.255L194.989 145.662L195.124 145.388L195.357 145.349L195.336 144.785L194.82 144.688ZM194.499 145.963L194.627 145.959L194.834 146.143L194.828 146.355L194.586 146.455L194.57 146.526L194.2 146.529L194.084 146.301L194.19 146.134L194.499 145.963Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M193.161 143.382L193.429 143.685L193.844 143.706L193.991 143.772L194.426 143.776L194.801 143.348L195.848 142.966L195.94 142.629L195.818 142.147L195.272 141.894L194.907 141.914L194.725 142.242L194.73 142.392L195.16 142.563L195.185 142.933L194.816 142.95L194.725 142.825L193.697 142.467L193.667 142.742L193.181 142.754L193.161 143.382Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M194.016 143.906L194.775 144.605L195.357 144.726L195.747 144.227L195.717 143.566L195.084 143.3L194.846 143.388L194.492 143.828L194.001 143.824L194.016 143.906Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M81.9151 79.7183C82.223 77.5307 84.285 75.9565 86.3156 76.8257C92.3875 79.425 96.2189 85.8358 95.2561 92.678C94.1031 100.873 86.5102 106.583 78.2969 105.433C71.4419 104.472 66.3214 99.0365 65.4856 92.5005C65.2054 90.3096 67.2868 88.7604 69.4746 89.0668L76.4234 90.0401C78.6112 90.3466 80.6342 88.8216 80.942 86.634L81.9151 79.7183Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M78.6153 82.9361C79.0572 85.8966 76.2037 88.2707 73.366 87.3034L67.6339 85.3497C66.8873 85.0952 66.1348 84.6426 65.9977 83.8672C65.4532 80.7889 70.8623 76.7258 74.9947 75.895C76.5413 75.584 77.7131 76.8914 77.9457 78.4499L78.6153 82.9361Z"
+        fill="#9EC3D2"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="23.4318"
+        y="30.96"
+        width="35.1226"
+        height="35.0406"
+        rx="3.5"
+        stroke="#78AEC3"
+        strokeOpacity="0.15"
+      />
+      <rect
+        x="23.4318"
+        y="73.0747"
+        width="78.9568"
+        height="35.0406"
+        rx="3.5"
+        stroke="#78AEC3"
+        strokeOpacity="0.15"
+      />
+      <rect
+        x="67.266"
+        y="30.96"
+        width="35.1226"
+        height="35.0406"
+        rx="3.5"
+        stroke="#78AEC3"
+        strokeOpacity="0.15"
+      />
+      <rect y="0.56543" width="110.194" height="40.4886" rx="4" fill="#9FC4D2" fillOpacity="0.15" />
+      <rect
+        x="4.84982"
+        y="6.0166"
+        width="100.068"
+        height="1.6352"
+        rx="0.817602"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="4.84982"
+        y="11.4819"
+        width="100.068"
+        height="1.6352"
+        rx="0.817602"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="4.84982"
+        y="16.9473"
+        width="100.068"
+        height="1.6352"
+        rx="0.817601"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="4.84982"
+        y="22.4126"
+        width="100.068"
+        height="1.6352"
+        rx="0.817602"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="4.84982"
+        y="27.8779"
+        width="100.068"
+        height="1.6352"
+        rx="0.817601"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="4.84982"
+        y="33.3433"
+        width="100.068"
+        height="1.6352"
+        rx="0.817602"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <path
+        d="M9.49367 29.8618C9.49367 30.2951 9.14127 30.6483 8.70417 30.6483C8.26707 30.6483 7.91467 30.2951 7.91467 29.8618C7.91467 29.4284 8.26707 29.0752 8.70417 29.0752C9.14127 29.0752 9.49367 29.4284 9.49367 29.8618Z"
+        fill="#ADCAD6"
+        stroke="#ADCAD6"
+      />
+      <path
+        d="M32.9845 23.5791C32.9845 24.0124 32.6321 24.3656 32.195 24.3656C31.7579 24.3656 31.4055 24.0124 31.4055 23.5791C31.4055 23.1457 31.7579 22.7925 32.195 22.7925C32.6321 22.7925 32.9845 23.1457 32.9845 23.5791Z"
+        fill="#ADCAD6"
+        stroke="#ADCAD6"
+      />
+      <path
+        d="M47.19 34.9785C47.19 35.4118 46.8376 35.765 46.4005 35.765C45.9634 35.765 45.611 35.4118 45.611 34.9785C45.611 34.5451 45.9634 34.1919 46.4005 34.1919C46.8376 34.1919 47.19 34.5451 47.19 34.9785Z"
+        fill="#ADCAD6"
+        stroke="#ADCAD6"
+      />
+      <path
+        d="M62.554 20.8461C62.554 21.2795 62.2016 21.6327 61.7645 21.6327C61.3274 21.6327 60.975 21.2795 60.975 20.8461C60.975 20.4128 61.3274 20.0596 61.7645 20.0596C62.2016 20.0596 62.554 20.4128 62.554 20.8461Z"
+        fill="#ADCAD6"
+        stroke="#ADCAD6"
+      />
+      <path
+        d="M87.4915 19.5229C87.4915 19.9562 87.1391 20.3095 86.702 20.3095C86.2649 20.3095 85.9125 19.9562 85.9125 19.5229C85.9125 19.0896 86.2649 18.7363 86.702 18.7363C87.1391 18.7363 87.4915 19.0896 87.4915 19.5229Z"
+        fill="#ADCAD6"
+        stroke="#ADCAD6"
+      />
+      <path
+        d="M118.696 8.12104C118.696 8.55438 118.343 8.90762 117.906 8.90762C117.469 8.90762 117.117 8.55438 117.117 8.12104C117.117 7.6877 117.469 7.33447 117.906 7.33447C118.343 7.33447 118.696 7.6877 118.696 8.12104Z"
+        fill="#ADCAD6"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="24.3131"
+        y2="-0.5"
+        transform="matrix(0.966179 -0.257874 0.258971 0.965885 8.70416 29.8618)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="18.2055"
+        y2="-0.5"
+        transform="matrix(-0.780285 -0.625424 0.627155 -0.778894 46.4005 34.9785)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="20.875"
+        y2="-0.5"
+        transform="matrix(0.735999 -0.676982 0.678649 0.734463 46.4005 34.9785)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="24.9726"
+        y2="-0.5"
+        transform="matrix(-0.998595 0.0529848 -0.0532255 -0.998583 86.7021 19.5229)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="32.8408"
+        y2="-0.5"
+        transform="matrix(0.937793 -0.347194 0.348585 0.937277 86.7021 19.5229)"
+        stroke="#ADCAD6"
+      />
+      <rect
+        x="114.315"
+        y="141.011"
+        width="82.3417"
+        height="40.4886"
+        rx="4"
+        fill="#9FC4D2"
+        fillOpacity="0.15"
+      />
+      <rect
+        x="116.885"
+        y="146.877"
+        width="75.535"
+        height="1.63521"
+        rx="0.817604"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="116.885"
+        y="152.342"
+        width="75.535"
+        height="1.63519"
+        rx="0.817596"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="116.885"
+        y="157.808"
+        width="75.535"
+        height="1.63521"
+        rx="0.817604"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="116.885"
+        y="163.272"
+        width="75.535"
+        height="1.63519"
+        rx="0.817596"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="116.885"
+        y="168.738"
+        width="75.535"
+        height="1.63521"
+        rx="0.817604"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <rect
+        x="116.885"
+        y="174.203"
+        width="75.535"
+        height="1.63521"
+        rx="0.817604"
+        fill="#B5D5E5"
+        fillOpacity="0.35"
+      />
+      <ellipse
+        cx="1.2895"
+        cy="1.28657"
+        rx="1.2895"
+        ry="1.28657"
+        transform="matrix(1 0 0 -1 118.5 154.841)"
+        fill="#ADCAD6"
+      />
+      <ellipse cx="135.056" cy="168.416" rx="1.28951" ry="1.28657" fill="#ADCAD6" />
+      <ellipse
+        cx="1.28951"
+        cy="1.28657"
+        rx="1.28951"
+        ry="1.28657"
+        transform="matrix(1 0 0 -1 141.99 161.124)"
+        fill="#ADCAD6"
+      />
+      <ellipse
+        cx="1.2895"
+        cy="1.28658"
+        rx="1.2895"
+        ry="1.28658"
+        transform="matrix(1 0 0 -1 157.257 163.272)"
+        fill="#ADCAD6"
+      />
+      <ellipse
+        cx="1.2895"
+        cy="1.28657"
+        rx="1.2895"
+        ry="1.28657"
+        transform="matrix(1 0 0 -1 186.183 160.798)"
+        fill="#ADCAD6"
+      />
+      <ellipse
+        cx="1.28951"
+        cy="1.28658"
+        rx="1.28951"
+        ry="1.28658"
+        transform="matrix(1 0 0 -1 191.705 151.714)"
+        fill="#ADCAD6"
+      />
+      <ellipse
+        cx="1.28951"
+        cy="1.28657"
+        rx="1.28951"
+        ry="1.28657"
+        transform="matrix(1 0 0 -1 156.196 149.725)"
+        fill="#ADCAD6"
+      />
+      <ellipse cx="172.753" cy="173.532" rx="1.2895" ry="1.28657" fill="#ADCAD6" />
+      <ellipse
+        cx="1.2895"
+        cy="1.28658"
+        rx="1.2895"
+        ry="1.28658"
+        transform="matrix(1 0 0 -1 171.56 163.857)"
+        fill="#ADCAD6"
+      />
+      <g filter="url(#filter1_dd_12024_153157)">
+        <ellipse
+          cx="1.2895"
+          cy="1.28658"
+          rx="1.2895"
+          ry="1.28658"
+          transform="matrix(1 0 0 -1 198.675 157.517)"
+          fill="#ADCAD6"
+        />
+      </g>
+      <g filter="url(#filter2_dd_12024_153157)">
+        <ellipse
+          cx="1.2895"
+          cy="1.28658"
+          rx="1.2895"
+          ry="1.28658"
+          transform="matrix(1 0 0 -1 207.855 149.798)"
+          fill="#ADCAD6"
+        />
+      </g>
+      <line
+        y1="-0.5"
+        x2="24.3131"
+        y2="-0.5"
+        transform="matrix(0.966179 0.257874 0.258971 -0.965885 119.789 153.555)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="24.3131"
+        y2="-0.5"
+        transform="matrix(0.966179 -0.257874 0.258971 0.965885 135.056 168.416)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="18.2056"
+        y2="-0.5"
+        transform="matrix(-0.780285 0.625424 0.627155 0.778894 157.485 148.438)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="18.2055"
+        y2="-0.5"
+        transform="matrix(-0.780285 -0.625424 0.627155 -0.778894 172.753 173.532)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="20.875"
+        y2="-0.5"
+        transform="matrix(0.735999 0.676982 0.678648 -0.734463 157.485 148.438)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="20.875"
+        y2="-0.5"
+        transform="matrix(0.736 -0.676982 0.678649 0.734463 172.753 173.532)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="10.6307"
+        y2="-0.5"
+        transform="matrix(-0.519363 0.854554 -0.8556 -0.517638 192.994 150.427)"
+        stroke="#ADCAD6"
+      />
+      <line
+        y1="-0.5"
+        x2="27.846"
+        y2="-0.5"
+        transform="matrix(-0.973738 0.227669 -0.228653 -0.973508 199.964 156.23)"
+        stroke="#ADCAD6"
+      />
+      <g filter="url(#filter3_dd_12024_153157)">
+        <line
+          y1="-0.5"
+          x2="11.9942"
+          y2="-0.5"
+          transform="matrix(0.765426 -0.643524 0.645238 0.763982 199.964 156.23)"
+          stroke="#ADCAD6"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_12024_153157"
+          x="148.782"
+          y="113.689"
+          width="81.5216"
+          height="44.8999"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_12024_153157"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_12024_153157"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter1_dd_12024_153157"
+          x="193.675"
+          y="150.944"
+          width="12.579"
+          height="12.5732"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="2.5" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_12024_153157"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="2" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+          <feBlend
+            mode="normal"
+            in2="effect1_dropShadow_12024_153157"
+            result="effect2_dropShadow_12024_153157"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect2_dropShadow_12024_153157"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter2_dd_12024_153157"
+          x="202.855"
+          y="143.225"
+          width="12.579"
+          height="12.5732"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="2.5" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_12024_153157"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="2" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+          <feBlend
+            mode="normal"
+            in2="effect1_dropShadow_12024_153157"
+            result="effect2_dropShadow_12024_153157"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect2_dropShadow_12024_153157"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter3_dd_12024_153157"
+          x="194.319"
+          y="143.748"
+          width="19.8259"
+          height="18.4824"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="2.5" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_12024_153157"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="2" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+          <feBlend
+            mode="normal"
+            in2="effect1_dropShadow_12024_153157"
+            result="effect2_dropShadow_12024_153157"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect2_dropShadow_12024_153157"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  </div>
+);
diff --git a/src/plugins/workspace/public/components/__snapshots__/workspace_collaborators_app.test.tsx.snap b/src/plugins/workspace/public/components/__snapshots__/workspace_collaborators_app.test.tsx.snap
new file mode 100644
index 000000000000..3e685e88222f
--- /dev/null
+++ b/src/plugins/workspace/public/components/__snapshots__/workspace_collaborators_app.test.tsx.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkspaceCollaboratorsApp should render normally 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div />
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.test.tsx b/src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.test.tsx
index 17d0818f37b1..fdc56756dcf2 100644
--- a/src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.test.tsx
+++ b/src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.test.tsx
@@ -6,13 +6,14 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { AddCollaboratorsModal } from './add_collaborators_modal';
+import { DuplicateCollaboratorError } from './duplicate_collaborator_error';
 
 describe('AddCollaboratorsModal', () => {
   const defaultProps = {
     title: 'Add Collaborators',
     inputLabel: 'Collaborator ID',
     addAnotherButtonLabel: 'Add Another',
-    permissionType: 'readOnly',
+    permissionType: 'user' as const,
     onClose: jest.fn(),
     onAddCollaborators: jest.fn(),
   };
@@ -46,7 +47,7 @@ describe('AddCollaboratorsModal', () => {
     fireEvent.click(addCollaboratorsButton);
     await waitFor(() => {
       expect(defaultProps.onAddCollaborators).toHaveBeenCalledWith([
-        { collaboratorId: 'user1', accessLevel: 'readOnly', permissionType: 'readOnly' },
+        { collaboratorId: 'user1', accessLevel: 'readOnly', permissionType: 'user' },
       ]);
     });
   });
@@ -68,10 +69,60 @@ describe('AddCollaboratorsModal', () => {
     const instruction = {
       title: 'Instructions',
       detail: 'Follow these instructions to add collaborators',
+      link: 'foo',
     };
     const props = { ...defaultProps, instruction };
     render(<AddCollaboratorsModal {...props} />);
     expect(screen.getByText(instruction.title)).toBeInTheDocument();
     expect(screen.getByText(instruction.detail)).toBeInTheDocument();
+    expect(screen.getByText('Learn more in Documentation')).toBeInTheDocument();
+  });
+
+  it('should display consistent duplicate collaborators errors', async () => {
+    const mockOnAddCollaborators = () => {
+      throw new DuplicateCollaboratorError({ pendingAdded: ['user1'], existing: ['user2'] });
+    };
+    render(<AddCollaboratorsModal {...defaultProps} onAddCollaborators={mockOnAddCollaborators} />);
+    const collaboratorIdInput0 = screen.getByTestId('workspaceCollaboratorIdInput-0');
+    fireEvent.change(collaboratorIdInput0, { target: { value: 'user1' } });
+
+    fireEvent.click(screen.getByText('Add Another'));
+    const collaboratorIdInput1 = screen.getByTestId('workspaceCollaboratorIdInput-1');
+    fireEvent.change(collaboratorIdInput1, { target: { value: 'user1' } });
+
+    fireEvent.click(screen.getByText('Add Another'));
+    const collaboratorIdInput2 = screen.getByTestId('workspaceCollaboratorIdInput-2');
+    fireEvent.change(collaboratorIdInput2, { target: { value: 'user2' } });
+
+    const addCollaboratorsButton = screen.getByRole('button', { name: 'Add collaborators' });
+    fireEvent.click(addCollaboratorsButton);
+    await waitFor(() => {
+      expect(screen.getByText('This ID is already added to the list.')).toBeInTheDocument();
+      expect(screen.getByText('A collaborator with this ID already exists.')).toBeInTheDocument();
+    });
+  });
+
+  it('should disable "Add collaborators" button during onAddCollaborators execution', async () => {
+    const onAddCollaboratorsMock = jest.fn().mockReturnValue(
+      new Promise((resolve) => {
+        window.setTimeout(resolve, 1000);
+      })
+    );
+    render(<AddCollaboratorsModal {...defaultProps} onAddCollaborators={onAddCollaboratorsMock} />);
+    const collaboratorInput = screen.getByLabelText(defaultProps.inputLabel);
+    fireEvent.change(collaboratorInput, { target: { value: 'user1' } });
+    const addCollaboratorsButton = screen.getByRole('button', { name: 'Add collaborators' });
+
+    jest.useFakeTimers();
+    fireEvent.click(addCollaboratorsButton);
+    await waitFor(() => {
+      expect(addCollaboratorsButton).toBeDisabled();
+    });
+    jest.runAllTimers();
+    jest.useRealTimers();
+
+    await waitFor(() => {
+      expect(addCollaboratorsButton).not.toBeDisabled();
+    });
   });
 });
diff --git a/src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.tsx b/src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.tsx
index 6c69d17886a4..07d2d8a90054 100644
--- a/src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.tsx
+++ b/src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.tsx
@@ -6,6 +6,7 @@
 import {
   EuiAccordion,
   EuiHorizontalRule,
+  EuiLink,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -24,6 +25,21 @@ import {
   WorkspaceCollaboratorsPanel,
   WorkspaceCollaboratorInner,
 } from './workspace_collaborators_panel';
+import { DuplicateCollaboratorError } from './duplicate_collaborator_error';
+
+const DUPLICATE_COLLABORATOR_ERROR_MESSAGE = i18n.translate(
+  'workspace.addCollaboratorsModal.errors.duplicateCollaborator',
+  {
+    defaultMessage: 'A collaborator with this ID already exists.',
+  }
+);
+
+const DUPLICATE_COLLABORATOR_WITH_LIST_ERROR_MESSAGE = i18n.translate(
+  'workspace.addCollaboratorsModal.errors.duplicateCollaboratorWithList',
+  {
+    defaultMessage: 'This ID is already added to the list.',
+  }
+);
 
 export interface AddCollaboratorsModalProps {
   title: string;
@@ -34,7 +50,7 @@ export interface AddCollaboratorsModalProps {
   inputPlaceholder?: string;
   instruction?: {
     title: string;
-    detail: string;
+    detail: React.ReactNode;
     link?: string;
   };
   permissionType: WorkspaceCollaboratorPermissionType;
@@ -57,15 +73,60 @@ export const AddCollaboratorsModal = ({
   const [collaborators, setCollaborators] = useState<WorkspaceCollaboratorInner[]>([
     { id: 0, accessLevel: 'readOnly', collaboratorId: '' },
   ]);
-  const validCollaborators = collaborators.flatMap(({ collaboratorId, accessLevel }) => {
-    if (!collaboratorId) {
+  const [errors, setErrors] = useState<{ [key: number]: string }>({});
+
+  const validInnerCollaborators = collaborators.flatMap((collaborator) => {
+    if (!collaborator.collaboratorId) {
       return [];
     }
-    return { collaboratorId, accessLevel, permissionType };
+    return collaborator;
   });
+  const [isAdding, setIsAdding] = useState(false);
 
-  const handleAddCollaborators = () => {
-    onAddCollaborators(validCollaborators);
+  const handleAddCollaborators = async () => {
+    const collaboratorId2IdsMap = validInnerCollaborators.reduce<{
+      [key: string]: number[];
+    }>((previousValue, collaborator) => {
+      const key = collaborator.collaboratorId;
+      const existingIds = previousValue[key];
+
+      if (!existingIds) {
+        return {
+          ...previousValue,
+          [key]: [collaborator.id],
+        };
+      }
+      existingIds.push(collaborator.id);
+      return previousValue;
+    }, {});
+    setErrors({});
+    setIsAdding(true);
+    try {
+      await onAddCollaborators(
+        validInnerCollaborators.map(({ id, ...collaborator }) => ({
+          ...collaborator,
+          permissionType,
+        }))
+      );
+    } catch (error) {
+      if (error instanceof DuplicateCollaboratorError) {
+        const newErrors: { [key: number]: string } = {};
+        error.details.pendingAdded.forEach((collaboratorId) => {
+          collaboratorId2IdsMap[collaboratorId].slice(1).forEach((id) => {
+            newErrors[id] = DUPLICATE_COLLABORATOR_ERROR_MESSAGE;
+          });
+        });
+        error.details.existing.forEach((collaboratorId) => {
+          collaboratorId2IdsMap[collaboratorId].forEach((id) => {
+            newErrors[id] = DUPLICATE_COLLABORATOR_WITH_LIST_ERROR_MESSAGE;
+          });
+        });
+        setErrors(newErrors);
+        return;
+      }
+    } finally {
+      setIsAdding(false);
+    }
   };
 
   return (
@@ -91,6 +152,19 @@ export const AddCollaboratorsModal = ({
               <EuiSpacer size="xs" />
               <EuiSpacer size="s" />
               <EuiText size="xs">{instruction.detail}</EuiText>
+              {instruction.link && (
+                <>
+                  <EuiSpacer size="xs" />
+                  <EuiLink href={instruction.link} target="_blank" external>
+                    {i18n.translate(
+                      'workspace.addCollaboratorsModal.instruction.learnMoreLinkText',
+                      {
+                        defaultMessage: 'Learn more in Documentation',
+                      }
+                    )}
+                  </EuiLink>
+                </>
+              )}
             </EuiAccordion>
             <EuiHorizontalRule margin="xs" />
             <EuiSpacer size="s" />
@@ -103,6 +177,7 @@ export const AddCollaboratorsModal = ({
           description={inputDescription}
           collaboratorIdInputPlaceholder={inputPlaceholder}
           addAnotherButtonLabel={addAnotherButtonLabel}
+          errors={errors}
         />
       </EuiModalBody>
 
@@ -113,10 +188,12 @@ export const AddCollaboratorsModal = ({
           })}
         </EuiSmallButtonEmpty>
         <EuiSmallButton
-          disabled={validCollaborators.length === 0}
+          disabled={validInnerCollaborators.length === 0}
           type="submit"
           onClick={handleAddCollaborators}
           fill
+          isDisabled={isAdding}
+          isLoading={isAdding}
         >
           {i18n.translate('workspace.addCollaboratorsModal.addCollaboratorsButton', {
             defaultMessage: 'Add collaborators',
diff --git a/src/plugins/workspace/public/components/add_collaborators_modal/duplicate_collaborator_error.ts b/src/plugins/workspace/public/components/add_collaborators_modal/duplicate_collaborator_error.ts
new file mode 100644
index 000000000000..540450e77b84
--- /dev/null
+++ b/src/plugins/workspace/public/components/add_collaborators_modal/duplicate_collaborator_error.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export class DuplicateCollaboratorError {
+  constructor(
+    private _details: {
+      pendingAdded: string[];
+      existing: string[];
+    }
+  ) {}
+  public get details() {
+    return this._details;
+  }
+}
diff --git a/src/plugins/workspace/public/components/add_collaborators_modal/index.ts b/src/plugins/workspace/public/components/add_collaborators_modal/index.ts
index e0d031c693ef..c252c95f4af4 100644
--- a/src/plugins/workspace/public/components/add_collaborators_modal/index.ts
+++ b/src/plugins/workspace/public/components/add_collaborators_modal/index.ts
@@ -4,3 +4,7 @@
  */
 
 export { AddCollaboratorsModal, AddCollaboratorsModalProps } from './add_collaborators_modal';
+export {
+  DuplicateCollaboratorError,
+  CollaboratorDuplicateSource,
+} from './duplicate_collaborator_error';
diff --git a/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.test.tsx b/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.test.tsx
index e20d28b8d5d1..933221ab13ef 100644
--- a/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.test.tsx
+++ b/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.test.tsx
@@ -41,4 +41,9 @@ describe('WorkspaceCollaboratorInput', () => {
     fireEvent.click(deleteButton);
     expect(defaultProps.onDelete).toHaveBeenCalledWith(0);
   });
+
+  it('collaborator id input should be invalid when error passed', () => {
+    render(<WorkspaceCollaboratorInput {...defaultProps} error="error" />);
+    expect(screen.getByTestId('workspaceCollaboratorIdInput-0')).toBeInvalid();
+  });
 });
diff --git a/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.tsx b/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.tsx
index 93a53c3fbcc8..3d849992f169 100644
--- a/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.tsx
+++ b/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.tsx
@@ -20,6 +20,7 @@ export const COLLABORATOR_ID_INPUT_LABEL_ID = 'collaborator_id_input_label';
 
 export interface WorkspaceCollaboratorInputProps {
   index: number;
+  error?: string;
   collaboratorId?: string;
   accessLevel: WorkspaceCollaboratorAccessLevel;
   collaboratorIdInputPlaceholder?: string;
@@ -42,6 +43,7 @@ const isAccessLevelKey = (test: string): test is WorkspaceCollaboratorAccessLeve
 
 export const WorkspaceCollaboratorInput = ({
   index,
+  error,
   accessLevel,
   collaboratorId,
   onDelete,
@@ -79,6 +81,7 @@ export const WorkspaceCollaboratorInput = ({
           data-test-subj={`workspaceCollaboratorIdInput-${index}`}
           placeholder={collaboratorIdInputPlaceholder}
           aria-labelledby={COLLABORATOR_ID_INPUT_LABEL_ID}
+          isInvalid={!!error}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
diff --git a/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.test.tsx b/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.test.tsx
index f5e695cc59a7..45d50710c8e1 100644
--- a/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.test.tsx
+++ b/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.test.tsx
@@ -91,4 +91,12 @@ describe('WorkspaceCollaboratorsPanel', () => {
       { id: 3, collaboratorId: '', accessLevel: 'readOnly' },
     ]);
   });
+
+  it('should display error message if provided', () => {
+    render(
+      <WorkspaceCollaboratorsPanel {...defaultProps} errors={{ 2: 'A test error message' }} />
+    );
+
+    expect(screen.getByText('A test error message')).toBeInTheDocument();
+  });
 });
diff --git a/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.tsx b/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.tsx
index 4c71d1c6be0e..80ca9666ab16 100644
--- a/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.tsx
+++ b/src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.tsx
@@ -24,6 +24,7 @@ export interface WorkspaceCollaboratorInner
 
 export interface WorkspaceCollaboratorsPanelProps {
   label: string;
+  errors?: { [key: number]: string };
   description?: string;
   collaborators: WorkspaceCollaboratorInner[];
   onChange: (value: WorkspaceCollaboratorInner[]) => void;
@@ -33,6 +34,7 @@ export interface WorkspaceCollaboratorsPanelProps {
 
 export const WorkspaceCollaboratorsPanel = ({
   label,
+  errors,
   description,
   collaborators,
   addAnotherButtonLabel,
@@ -91,7 +93,12 @@ export const WorkspaceCollaboratorsPanel = ({
         </>
       )}
       {collaborators.map((item, index) => (
-        <EuiCompressedFormRow key={item.id} fullWidth>
+        <EuiCompressedFormRow
+          key={item.id}
+          fullWidth
+          error={errors?.[item.id]}
+          isInvalid={!!errors?.[item.id]}
+        >
           <WorkspaceCollaboratorInput
             index={index}
             accessLevel={item.accessLevel}
@@ -100,6 +107,7 @@ export const WorkspaceCollaboratorsPanel = ({
             onAccessLevelChange={handleAccessLevelChange}
             onDelete={handleDelete}
             collaboratorIdInputPlaceholder={collaboratorIdInputPlaceholder}
+            error={errors?.[item.id]}
           />
         </EuiCompressedFormRow>
       ))}
diff --git a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.test.tsx b/src/plugins/workspace/public/components/data_source_association/association_data_source_modal.test.tsx
similarity index 90%
rename from src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.test.tsx
rename to src/plugins/workspace/public/components/data_source_association/association_data_source_modal.test.tsx
index a1bf6502e7b4..9e50258ae9b8 100644
--- a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.test.tsx
+++ b/src/plugins/workspace/public/components/data_source_association/association_data_source_modal.test.tsx
@@ -18,7 +18,7 @@ import { AssociationDataSourceModalMode } from 'src/plugins/workspace/common/con
 
 const setupAssociationDataSourceModal = ({
   mode,
-  assignedConnections,
+  excludedConnectionIds,
   handleAssignDataSourceConnections,
 }: Partial<AssociationDataSourceModalProps> = {}) => {
   const coreServices = coreMock.createStart();
@@ -69,7 +69,7 @@ const setupAssociationDataSourceModal = ({
         notifications={coreServices.notifications}
         savedObjects={coreServices.savedObjects}
         closeModal={jest.fn()}
-        assignedConnections={assignedConnections ?? []}
+        excludedConnectionIds={excludedConnectionIds ?? []}
         handleAssignDataSourceConnections={handleAssignDataSourceConnections ?? jest.fn()}
       />
     </IntlProvider>
@@ -109,10 +109,10 @@ describe('AssociationDataSourceModal', () => {
 
   it('should display opensearch connections', async () => {
     setupAssociationDataSourceModal();
-    expect(screen.getByText('Associate OpenSearch connections')).toBeInTheDocument();
+    expect(screen.getByText('Associate OpenSearch data sources')).toBeInTheDocument();
     expect(
       screen.getByText(
-        'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
+        'Add data sources that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace.'
       )
     ).toBeInTheDocument();
     await waitFor(() => {
@@ -125,7 +125,7 @@ describe('AssociationDataSourceModal', () => {
     setupAssociationDataSourceModal({
       mode: AssociationDataSourceModalMode.DirectQueryConnections,
     });
-    expect(screen.getByText('Associate direct query connections')).toBeInTheDocument();
+    expect(screen.getByText('Associate direct query data sources')).toBeInTheDocument();
     await waitFor(() => {
       expect(screen.queryByRole('option', { name: 'dqc1' })).not.toBeInTheDocument();
       fireEvent.click(screen.getByRole('option', { name: 'Data Source 1' }));
@@ -135,18 +135,11 @@ describe('AssociationDataSourceModal', () => {
 
   it('should hide associated connections', async () => {
     setupAssociationDataSourceModal({
-      assignedConnections: [
-        {
-          id: 'ds2',
-          name: 'Data Source 2',
-          connectionType: DataSourceConnectionType.OpenSearchConnection,
-          type: 'OpenSearch',
-        },
-      ],
+      excludedConnectionIds: ['ds2'],
     });
     expect(
       screen.getByText(
-        'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
+        'Add data sources that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace.'
       )
     ).toBeInTheDocument();
     await waitFor(() => {
diff --git a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx b/src/plugins/workspace/public/components/data_source_association/association_data_source_modal.tsx
similarity index 85%
rename from src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
rename to src/plugins/workspace/public/components/data_source_association/association_data_source_modal.tsx
index eacef4f0deb2..8c093cdf46fa 100644
--- a/src/plugins/workspace/public/components/workspace_detail/association_data_source_modal.tsx
+++ b/src/plugins/workspace/public/components/data_source_association/association_data_source_modal.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Fragment, useEffect, useState, useCallback } from 'react';
+import { Fragment, useEffect, useState, useCallback, useRef } from 'react';
 import React from 'react';
 import {
   EuiText,
@@ -30,7 +30,7 @@ import { DataSourceConnection, DataSourceConnectionType } from '../../../common/
 import { HttpStart, NotificationsStart, SavedObjectsStart } from '../../../../../core/public';
 import { AssociationDataSourceModalMode } from '../../../common/constants';
 import { Logos } from '../../../../../core/common';
-import { ConnectionTypeIcon } from '../workspace_form';
+import { ConnectionTypeIcon } from '../workspace_form/connection_type_icon';
 
 const ConnectionIcon = ({
   connection: { connectionType, type },
@@ -129,20 +129,19 @@ const convertConnectionsToOptions = ({
   connections,
   showDirectQueryConnections,
   selectedConnectionIds,
-  assignedConnections,
+  excludedConnectionIds,
   logos,
 }: {
   connections: DataSourceConnection[];
-  assignedConnections: DataSourceConnection[];
+  excludedConnectionIds: string[];
   showDirectQueryConnections: boolean;
   selectedConnectionIds: string[];
   logos: Logos;
 }) => {
-  const assignedConnectionIds = assignedConnections.map(({ id }) => id);
   return connections
     .flatMap((connection) => {
       if (
-        assignedConnectionIds.includes(connection.id) ||
+        excludedConnectionIds.includes(connection.id) ||
         connection.connectionType === DataSourceConnectionType.DirectQueryConnection
       ) {
         return [];
@@ -173,20 +172,28 @@ export interface AssociationDataSourceModalProps {
   http: HttpStart | undefined;
   notifications: NotificationsStart | undefined;
   savedObjects: SavedObjectsStart;
-  assignedConnections: DataSourceConnection[];
+  excludedConnectionIds: string[];
   mode: AssociationDataSourceModalMode;
   closeModal: () => void;
-  handleAssignDataSourceConnections: (connections: DataSourceConnection[]) => void;
+  handleAssignDataSourceConnections: (connections: DataSourceConnection[]) => Promise<void> | void;
   logos: Logos;
 }
 
-export const AssociationDataSourceModal = ({
+export const AssociationDataSourceModal = (props: AssociationDataSourceModalProps) => {
+  return (
+    <EuiModal onClose={props.closeModal} style={{ width: 630 }}>
+      <AssociationDataSourceModalContent {...props} />
+    </EuiModal>
+  );
+};
+
+export const AssociationDataSourceModalContent = ({
   mode,
   http,
   notifications,
   closeModal,
   savedObjects,
-  assignedConnections,
+  excludedConnectionIds,
   handleAssignDataSourceConnections,
   logos,
 }: AssociationDataSourceModalProps) => {
@@ -194,6 +201,15 @@ export const AssociationDataSourceModal = ({
   const [selectedConnectionIds, setSelectedConnectionIds] = useState<string[]>([]);
   const [options, setOptions] = useState<DataSourceModalOption[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const mountedRef = useRef(false);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
   const handleSelectionChange = useCallback((newOptions: DataSourceModalOption[]) => {
     setSelectedConnectionIds(
@@ -201,10 +217,15 @@ export const AssociationDataSourceModal = ({
     );
   }, []);
 
-  const handleSaveButtonClick = useCallback(() => {
-    handleAssignDataSourceConnections(
+  const handleSaveButtonClick = useCallback(async () => {
+    setIsSaving(true);
+    const res = handleAssignDataSourceConnections(
       allConnections.filter((connection) => selectedConnectionIds.includes(connection.id))
     );
+    await Promise.resolve(res);
+    if (mountedRef.current) {
+      setIsSaving(false);
+    }
   }, [selectedConnectionIds, allConnections, handleAssignDataSourceConnections]);
 
   useEffect(() => {
@@ -223,27 +244,27 @@ export const AssociationDataSourceModal = ({
     setOptions(
       convertConnectionsToOptions({
         connections: allConnections,
-        assignedConnections,
+        excludedConnectionIds,
         selectedConnectionIds,
         showDirectQueryConnections: mode === AssociationDataSourceModalMode.DirectQueryConnections,
         logos,
       })
     );
-  }, [allConnections, assignedConnections, selectedConnectionIds, mode, logos]);
+  }, [allConnections, excludedConnectionIds, selectedConnectionIds, mode, logos]);
 
   return (
-    <EuiModal onClose={closeModal} style={{ width: 630 }}>
+    <>
       <EuiModalHeader>
         <EuiModalHeaderTitle>
           {mode === AssociationDataSourceModalMode.OpenSearchConnections ? (
             <FormattedMessage
-              id="workspace.detail.dataSources.associateModal.title.openSearchConnections"
-              defaultMessage="Associate OpenSearch connections"
+              id="workspace.detail.dataSources.associateModal.title.openSearchDataSources"
+              defaultMessage="Associate OpenSearch data sources"
             />
           ) : (
             <FormattedMessage
-              id="workspace.detail.dataSources.associateModal.title.directQueryConnections"
-              defaultMessage="Associate direct query connections"
+              id="workspace.detail.dataSources.associateModal.title.directQueryDataSources"
+              defaultMessage="Associate direct query data sources"
             />
           )}
         </EuiModalHeaderTitle>
@@ -252,7 +273,7 @@ export const AssociationDataSourceModal = ({
         <EuiText size="xs" color="subdued">
           <FormattedMessage
             id="workspace.detail.dataSources.associateModal.message"
-            defaultMessage="Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace."
+            defaultMessage="Add data sources that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace."
           />
         </EuiText>
         <EuiSpacer size="s" />
@@ -292,6 +313,7 @@ export const AssociationDataSourceModal = ({
           data-test-subj="workspace-detail-dataSources-associateModal-save-button"
           onClick={handleSaveButtonClick}
           isDisabled={selectedConnectionIds.length === 0}
+          isLoading={isSaving}
           fill
         >
           <FormattedMessage
@@ -300,6 +322,6 @@ export const AssociationDataSourceModal = ({
           />
         </EuiSmallButton>
       </EuiModalFooter>
-    </EuiModal>
+    </>
   );
 };
diff --git a/src/plugins/workspace/public/components/data_source_association/data_source_association.test.tsx b/src/plugins/workspace/public/components/data_source_association/data_source_association.test.tsx
new file mode 100644
index 000000000000..7d8cf2cec089
--- /dev/null
+++ b/src/plugins/workspace/public/components/data_source_association/data_source_association.test.tsx
@@ -0,0 +1,219 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import { coreMock } from '../../../../../core/public/mocks';
+import {
+  useOpenSearchDashboards,
+  toMountPoint,
+} from '../../../../opensearch_dashboards_react/public';
+import { DataSourceAssociation } from './data_source_association';
+import { AssociationDataSourceModalContent } from './association_data_source_modal';
+import { DataSourceConnectionType } from 'src/plugins/workspace/common/types';
+import { BehaviorSubject } from 'rxjs';
+import { IWorkspaceClient } from 'opensearch-dashboards/public';
+
+jest.mock('../../../../opensearch_dashboards_react/public', () => ({
+  ...jest.requireActual('../../../../opensearch_dashboards_react/public'),
+  useOpenSearchDashboards: jest.fn(),
+  toMountPoint: jest.fn(),
+}));
+
+jest.mock('./association_data_source_modal', () => ({
+  AssociationDataSourceModalContent: jest.fn(),
+}));
+
+describe('<DataSourceAssociation />', () => {
+  let servicesMock: ReturnType<typeof coreMock.createStart>;
+  beforeEach(() => {
+    servicesMock = coreMock.createStart();
+    (useOpenSearchDashboards as jest.Mock).mockImplementation(() => {
+      return { services: servicesMock };
+    });
+    (toMountPoint as jest.Mock).mockImplementation((node: React.ReactNode) => {
+      return () => render(<>{node}</>);
+    });
+    servicesMock.overlays.openModal.mockImplementation((fn) => {
+      fn();
+      return { close: jest.fn(), onClose: jest.fn() };
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders Associate data sources button', () => {
+    render(<DataSourceAssociation excludedDataSourceIds={[]} />);
+    expect(screen.getByText('Associate data sources')).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('workspaceAssociateDataSourceButton'));
+    expect(screen.getByText('OpenSearch data sources')).toBeInTheDocument();
+    expect(screen.getByText('Direct query data sources')).toBeInTheDocument();
+  });
+
+  it('should open association modal', async () => {
+    (AssociationDataSourceModalContent as jest.Mock).mockImplementation(() => (
+      <div>Mocked association data source modal</div>
+    ));
+    render(<DataSourceAssociation excludedDataSourceIds={[]} />);
+    fireEvent.click(screen.getByTestId('workspaceAssociateDataSourceButton'));
+    fireEvent.click(screen.getByText('OpenSearch data sources'));
+    expect(servicesMock.overlays.openModal).toHaveBeenCalled();
+    expect(screen.getByText('Mocked association data source modal')).toBeInTheDocument();
+  });
+
+  it('should associate data sources successfully', async () => {
+    const associateMock = jest
+      .fn()
+      .mockResolvedValue({ success: true, result: [{ id: 'id1' }, { id: 'id2' }] });
+    servicesMock.workspaces.client$ = new BehaviorSubject<IWorkspaceClient | null>({
+      associate: associateMock,
+      copy: jest.fn(),
+      dissociate: jest.fn(),
+      ui: jest.fn(),
+    });
+    servicesMock.workspaces.currentWorkspaceId$ = new BehaviorSubject<string>('workspace_test');
+
+    (AssociationDataSourceModalContent as jest.Mock).mockImplementation((props: any) => (
+      <button
+        onClick={() =>
+          props.handleAssignDataSourceConnections([
+            { id: 'id1', connectionType: DataSourceConnectionType.OpenSearchConnection },
+            { id: 'id2', connectionType: DataSourceConnectionType.OpenSearchConnection },
+          ])
+        }
+      >
+        Mocked association button
+      </button>
+    ));
+
+    render(<DataSourceAssociation excludedDataSourceIds={[]} />);
+    fireEvent.click(screen.getByTestId('workspaceAssociateDataSourceButton'));
+    fireEvent.click(screen.getByText('OpenSearch data sources'));
+    fireEvent.click(screen.getByText('Mocked association button'));
+    await waitFor(() => {
+      expect(associateMock).toHaveBeenCalled();
+      expect(servicesMock.notifications.toasts.addSuccess).toHaveBeenCalledWith(
+        expect.objectContaining({ title: '2 data sources been associated to the workspace' })
+      );
+    });
+  });
+
+  it('should associate data connections successfully', async () => {
+    const associateMock = jest
+      .fn()
+      .mockResolvedValue({ success: true, result: [{ id: 'id1' }, { id: 'id2' }] });
+    servicesMock.workspaces.client$ = new BehaviorSubject<IWorkspaceClient | null>({
+      associate: associateMock,
+      copy: jest.fn(),
+      dissociate: jest.fn(),
+      ui: jest.fn(),
+    });
+    servicesMock.workspaces.currentWorkspaceId$ = new BehaviorSubject<string>('workspace_test');
+
+    (AssociationDataSourceModalContent as jest.Mock).mockImplementation((props: any) => (
+      <button
+        onClick={() =>
+          props.handleAssignDataSourceConnections([
+            { id: 'id1', connectionType: DataSourceConnectionType.DataConnection },
+            { id: 'id2', connectionType: DataSourceConnectionType.DataConnection },
+          ])
+        }
+      >
+        Mocked association button
+      </button>
+    ));
+
+    render(<DataSourceAssociation excludedDataSourceIds={[]} />);
+    fireEvent.click(screen.getByTestId('workspaceAssociateDataSourceButton'));
+    fireEvent.click(screen.getByText('Direct query data sources'));
+    fireEvent.click(screen.getByText('Mocked association button'));
+    await waitFor(() => {
+      expect(associateMock).toHaveBeenCalled();
+      expect(servicesMock.notifications.toasts.addSuccess).toHaveBeenCalledWith(
+        expect.objectContaining({ title: '2 data sources been associated to the workspace' })
+      );
+    });
+  });
+
+  it('should display error toast when associate data source failed', async () => {
+    const associateMock = jest.fn().mockRejectedValue(new Error());
+    servicesMock.workspaces.client$ = new BehaviorSubject<IWorkspaceClient | null>({
+      associate: associateMock,
+      copy: jest.fn(),
+      dissociate: jest.fn(),
+      ui: jest.fn(),
+    });
+    servicesMock.workspaces.currentWorkspaceId$ = new BehaviorSubject<string>('workspace_test');
+
+    (AssociationDataSourceModalContent as jest.Mock).mockImplementation((props: any) => (
+      <button
+        onClick={() =>
+          props.handleAssignDataSourceConnections([
+            { id: 'id1', connectionType: DataSourceConnectionType.OpenSearchConnection },
+            { id: 'id2', connectionType: DataSourceConnectionType.OpenSearchConnection },
+          ])
+        }
+      >
+        Mocked association button
+      </button>
+    ));
+
+    render(<DataSourceAssociation excludedDataSourceIds={[]} />);
+    fireEvent.click(screen.getByTestId('workspaceAssociateDataSourceButton'));
+    fireEvent.click(screen.getByText('OpenSearch data sources'));
+    fireEvent.click(screen.getByText('Mocked association button'));
+    await waitFor(() => {
+      expect(associateMock).toHaveBeenCalled();
+      expect(servicesMock.notifications.toasts.addDanger).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'Failed to associate 2 data sources to the workspace' })
+      );
+    });
+  });
+
+  it('should display toast when associate data source partially success', async () => {
+    const associateMock = jest.fn().mockResolvedValue({
+      success: true,
+      // id1 failed to associate with error
+      result: [{ id: 'id1', error: new Error() }, { id: 'id2' }],
+    });
+    servicesMock.workspaces.client$ = new BehaviorSubject<IWorkspaceClient | null>({
+      associate: associateMock,
+      copy: jest.fn(),
+      dissociate: jest.fn(),
+      ui: jest.fn(),
+    });
+    servicesMock.workspaces.currentWorkspaceId$ = new BehaviorSubject<string>('workspace_test');
+
+    (AssociationDataSourceModalContent as jest.Mock).mockImplementation((props: any) => (
+      <button
+        onClick={() =>
+          props.handleAssignDataSourceConnections([
+            { id: 'id1', connectionType: DataSourceConnectionType.OpenSearchConnection },
+            { id: 'id2', connectionType: DataSourceConnectionType.OpenSearchConnection },
+          ])
+        }
+      >
+        Mocked association button
+      </button>
+    ));
+
+    render(<DataSourceAssociation excludedDataSourceIds={[]} />);
+    fireEvent.click(screen.getByTestId('workspaceAssociateDataSourceButton'));
+    fireEvent.click(screen.getByText('OpenSearch data sources'));
+    fireEvent.click(screen.getByText('Mocked association button'));
+    await waitFor(() => {
+      expect(associateMock).toHaveBeenCalled();
+      expect(servicesMock.notifications.toasts.addDanger).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'Failed to associate 1 data source to the workspace' })
+      );
+      expect(servicesMock.notifications.toasts.addSuccess).toHaveBeenCalledWith(
+        expect.objectContaining({ title: '1 data source been associated to the workspace' })
+      );
+    });
+  });
+});
diff --git a/src/plugins/workspace/public/components/data_source_association/data_source_association.tsx b/src/plugins/workspace/public/components/data_source_association/data_source_association.tsx
new file mode 100644
index 000000000000..d55461733575
--- /dev/null
+++ b/src/plugins/workspace/public/components/data_source_association/data_source_association.tsx
@@ -0,0 +1,194 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiIcon,
+  EuiPopover,
+} from '@elastic/eui';
+import React, { useCallback, useState, useRef } from 'react';
+import { i18n } from '@osd/i18n';
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
+import { OverlayRef } from '../../../../../../src/core/public';
+import {
+  toMountPoint,
+  useOpenSearchDashboards,
+} from '../../../../opensearch_dashboards_react/public';
+import { AssociationDataSourceModalContent } from './association_data_source_modal';
+import { AssociationDataSourceModalMode } from '../../../common/constants';
+import { DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
+import {
+  DATA_CONNECTION_SAVED_OBJECT_TYPE,
+  DATA_SOURCE_SAVED_OBJECT_TYPE,
+} from '../../../../data_source/common';
+
+interface Props {
+  excludedDataSourceIds: string[];
+  onComplete?: () => void;
+  onError?: () => void;
+}
+
+export const DataSourceAssociation = ({ excludedDataSourceIds, onComplete, onError }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const associationModalRef = useRef<OverlayRef>();
+
+  const {
+    chrome,
+    savedObjects,
+    http,
+    notifications,
+    overlays,
+    workspaces,
+  } = useOpenSearchDashboards().services;
+  const workspaceClient = useObservable(workspaces?.client$ ?? of(null));
+  const currentWorkspaceId = useObservable(workspaces?.currentWorkspaceId$ ?? of(null));
+
+  const closePopover = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const openPopover = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const onAssociateDataSource = useCallback(
+    async (ds: DataSourceConnection[]) => {
+      const dataSourceObjects = ds
+        .filter((d) => d.connectionType === DataSourceConnectionType.OpenSearchConnection)
+        .map((d) => ({ id: d.id, type: DATA_SOURCE_SAVED_OBJECT_TYPE }));
+      const dataConnectionObjects = ds
+        .filter((d) => d.connectionType === DataSourceConnectionType.DataConnection)
+        .map((d) => ({ id: d.id, type: DATA_CONNECTION_SAVED_OBJECT_TYPE }));
+      const objects = [...dataSourceObjects, ...dataConnectionObjects];
+      if (workspaceClient && currentWorkspaceId) {
+        let failedCount = 0;
+        try {
+          const res = await workspaceClient.associate(objects, currentWorkspaceId);
+
+          if (res.success) {
+            failedCount = res.result.filter((r) => !!r.error).length;
+          } else {
+            // If failed to workspaceClient.associate, all data sources association is failed
+            failedCount = objects.length;
+          }
+          if (onComplete) {
+            onComplete();
+          }
+        } catch (e) {
+          failedCount = objects.length;
+          if (onError) {
+            onError();
+          }
+        } finally {
+          associationModalRef.current?.close();
+        }
+
+        if (failedCount > 0) {
+          notifications?.toasts.addDanger({
+            id: 'workspace_data_source_association_failed',
+            title: i18n.translate('workspace.dataSource.association.failedTitle', {
+              defaultMessage:
+                'Failed to associate {failedCount, plural, one {# data source} other {# data sources}} to the workspace',
+              values: { failedCount },
+            }),
+          });
+        }
+        if (failedCount < objects.length) {
+          notifications?.toasts.addSuccess({
+            id: 'workspace_data_source_association_succeed',
+            title: i18n.translate('workspace.dataSource.association.succeedTitle', {
+              defaultMessage:
+                '{succeedCount, plural, one {# data source} other {# data sources}} been associated to the workspace',
+              values: { succeedCount: objects.length - failedCount },
+            }),
+          });
+        }
+      }
+    },
+    [workspaceClient, currentWorkspaceId, notifications, onComplete, onError]
+  );
+
+  const showAssociationModal = useCallback(
+    (mode: AssociationDataSourceModalMode) => {
+      closePopover();
+      if (overlays && savedObjects && chrome) {
+        associationModalRef.current = overlays.openModal(
+          toMountPoint(
+            <AssociationDataSourceModalContent
+              http={http}
+              savedObjects={savedObjects}
+              notifications={notifications}
+              excludedConnectionIds={excludedDataSourceIds}
+              closeModal={() => associationModalRef.current?.close()}
+              handleAssignDataSourceConnections={onAssociateDataSource}
+              mode={mode}
+              logos={chrome.logos}
+            />
+          )
+        );
+      }
+    },
+    [
+      overlays,
+      chrome,
+      http,
+      notifications,
+      savedObjects,
+      closePopover,
+      excludedDataSourceIds,
+      onAssociateDataSource,
+    ]
+  );
+
+  const button = (
+    <EuiButton
+      data-test-subj="workspaceAssociateDataSourceButton"
+      size="s"
+      fill
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={openPopover}
+    >
+      <EuiIcon type="plusInCircle" />{' '}
+      {i18n.translate('workspace.dataSources.associationButton.label', {
+        defaultMessage: 'Associate data sources',
+      })}
+    </EuiButton>
+  );
+
+  const items = [
+    <EuiContextMenuItem
+      key="opensearchDataSources"
+      onClick={() => showAssociationModal(AssociationDataSourceModalMode.OpenSearchConnections)}
+    >
+      {i18n.translate('workspace.dataSources.associationButton.opensearch.label', {
+        defaultMessage: 'OpenSearch data sources',
+      })}
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="directQueryDataSources"
+      onClick={() => showAssociationModal(AssociationDataSourceModalMode.DirectQueryConnections)}
+    >
+      {i18n.translate('workspace.dataSources.associationButton.directQuery.label', {
+        defaultMessage: 'Direct query data sources',
+      })}
+    </EuiContextMenuItem>,
+  ];
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenuPanel items={items} />
+    </EuiPopover>
+  );
+};
diff --git a/src/plugins/workspace/public/components/global_search/page_item.test.tsx b/src/plugins/workspace/public/components/global_search/page_item.test.tsx
new file mode 100644
index 000000000000..486d600738c4
--- /dev/null
+++ b/src/plugins/workspace/public/components/global_search/page_item.test.tsx
@@ -0,0 +1,268 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { GlobalSearchPageItem } from './page_item';
+import { coreMock } from '../../../../../core/public/mocks';
+import { BehaviorSubject } from 'rxjs';
+import { WorkspaceUseCase } from '../../types';
+import {
+  ChromeNavLink,
+  ChromeRegistrationNavLink,
+  NavGroupItemInMap,
+} from 'opensearch-dashboards/public';
+
+import { NavGroupType } from '../../../../../core/public';
+
+describe('PageItem', () => {
+  const currentWorkspace = {
+    id: 'foo',
+    name: 'Workspace 1',
+  };
+
+  const link = {
+    id: 'appId',
+    title: 'App 1',
+    navGroup: {
+      title: 'Essential',
+      type: undefined,
+      description: '',
+    },
+    category: {
+      id: 'observability',
+      label: 'Observability',
+    },
+  } as ChromeRegistrationNavLink & ChromeNavLink & { navGroup: NavGroupItemInMap };
+
+  const coreStartMock = coreMock.createStart();
+  const { application, http } = coreStartMock;
+
+  const registeredUseCases = new BehaviorSubject([
+    {
+      id: 'foo',
+      title: 'Foo',
+      features: [{ id: 'system-feature', title: 'System feature' }],
+      systematic: true,
+      description: '',
+    } as WorkspaceUseCase,
+  ]);
+
+  const assignMock = jest.fn();
+
+  // Mock window.location.assign
+  Object.defineProperty(window, 'location', {
+    value: {
+      assign: assignMock,
+    },
+    writable: true,
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the page item correctly', () => {
+    const { getByText } = render(
+      <GlobalSearchPageItem
+        currentWorkspace={currentWorkspace}
+        link={link}
+        http={http}
+        application={application}
+        registeredUseCases$={registeredUseCases}
+        search="abc"
+      />
+    );
+
+    // workspace name and link title
+    expect(getByText('Workspace 1')).toBeInTheDocument();
+    expect(getByText('App 1')).toBeInTheDocument();
+  });
+
+  it('renders the page item correctly for non workspace pages', () => {
+    const settingsLink = {
+      ...link,
+      navGroup: {
+        id: 'settings',
+        title: 'Settings',
+        description: 'Settings',
+        type: NavGroupType.SYSTEM,
+        navLinks: [],
+      },
+    };
+    const { getByText } = render(
+      <GlobalSearchPageItem
+        currentWorkspace={currentWorkspace}
+        link={settingsLink}
+        http={http}
+        application={application}
+        registeredUseCases$={registeredUseCases}
+        search="abc"
+      />
+    );
+
+    // workspace name and link title
+    expect(getByText('Settings')).toBeInTheDocument();
+    expect(getByText('App 1')).toBeInTheDocument();
+  });
+
+  it('renders the page item correctly for non workspace landing page', () => {
+    const settingsLink = {
+      ...link,
+      navGroup: {
+        id: 'settings',
+        title: 'Settings',
+        description: 'Settings',
+        type: NavGroupType.SYSTEM,
+        navLinks: [],
+      },
+      id: 'app_landing',
+      title: 'Overview',
+    };
+
+    const { getByText } = render(
+      <GlobalSearchPageItem
+        currentWorkspace={currentWorkspace}
+        link={settingsLink}
+        http={http}
+        application={application}
+        registeredUseCases$={registeredUseCases}
+        search="abc"
+      />
+    );
+
+    // nav group title and page title
+    expect(getByText('Settings')).toBeInTheDocument();
+    expect(getByText('Settings Overview')).toBeInTheDocument();
+  });
+
+  it('renders the page item correctly for non workspace overview page', () => {
+    const settingsLink = {
+      ...link,
+      category: { label: 'Security Analytics', id: 'sa' },
+      id: 'sa_overview',
+      title: 'Overview',
+    };
+
+    const { getByText } = render(
+      <GlobalSearchPageItem
+        currentWorkspace={currentWorkspace}
+        link={settingsLink}
+        http={http}
+        application={application}
+        registeredUseCases$={registeredUseCases}
+        search="abc"
+      />
+    );
+
+    // workspace name and link title
+    expect(getByText('Workspace 1')).toBeInTheDocument();
+    expect(getByText('Security Analytics')).toBeInTheDocument();
+    expect(getByText('Overview')).toBeInTheDocument();
+  });
+
+  it('click on the item will navigate to corresponding page', () => {
+    const settingsLink = {
+      ...link,
+      category: { label: 'Security Analytics', id: 'sa' },
+      id: 'sa_overview',
+      title: 'Overview',
+    };
+
+    const callbackFn = jest.fn();
+
+    const { getByText, getByTestId } = render(
+      <GlobalSearchPageItem
+        currentWorkspace={currentWorkspace}
+        link={settingsLink}
+        http={http}
+        application={application}
+        registeredUseCases$={registeredUseCases}
+        search="abc"
+        callback={callbackFn}
+      />
+    );
+
+    // workspace name and link title
+    expect(getByText('Workspace 1')).toBeInTheDocument();
+    expect(getByText('Security Analytics')).toBeInTheDocument();
+    expect(getByText('Overview')).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('global-search-item-sa_overview'));
+    expect(application.navigateToApp).toBeCalledWith('sa_overview');
+    expect(callbackFn).toBeCalled();
+  });
+
+  it('click on the item will navigate to correctly page for data source out of workspace', () => {
+    const navLink = {
+      ...link,
+      href: 'http://localhost:5601/w/foo/app/data_source',
+      navGroup: {
+        id: 'admin',
+        description: '',
+        title: 'Data administration',
+        type: NavGroupType.SYSTEM,
+        navLinks: [],
+      },
+      id: 'data_source',
+      title: 'Data source',
+    };
+
+    const callbackFn = jest.fn();
+
+    const { getByText, getByTestId } = render(
+      <GlobalSearchPageItem
+        currentWorkspace={currentWorkspace}
+        link={navLink}
+        http={http}
+        application={application}
+        registeredUseCases$={registeredUseCases}
+        search="abc"
+        callback={callbackFn}
+      />
+    );
+
+    expect(getByText('Data administration')).toBeInTheDocument();
+    expect(getByText('Data source')).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('global-search-item-data_source'));
+    expect(application.navigateToApp).not.toHaveBeenCalled();
+    expect(assignMock).toHaveBeenCalledWith('http://localhost:5601/app/data_source');
+  });
+
+  it('click on the item will navigate to correctly page for data source in a workspace', () => {
+    const navLink = {
+      ...link,
+      href: 'http://localhost:5601/w/foo/app/data_source',
+      navGroup: {
+        id: 'sa',
+        description: '',
+        title: 'Security Analytics',
+        navLinks: [],
+      },
+      id: 'data_source',
+      title: 'Data source',
+    };
+
+    const callbackFn = jest.fn();
+
+    const { getByText, getByTestId } = render(
+      <GlobalSearchPageItem
+        currentWorkspace={currentWorkspace}
+        link={navLink}
+        http={http}
+        application={application}
+        registeredUseCases$={registeredUseCases}
+        search="abc"
+        callback={callbackFn}
+      />
+    );
+
+    expect(getByText('Data source')).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('global-search-item-data_source'));
+    expect(application.navigateToApp).toBeCalledWith('data_source');
+  });
+});
diff --git a/src/plugins/workspace/public/components/global_search/page_item.tsx b/src/plugins/workspace/public/components/global_search/page_item.tsx
new file mode 100644
index 000000000000..c3295f0bc671
--- /dev/null
+++ b/src/plugins/workspace/public/components/global_search/page_item.tsx
@@ -0,0 +1,123 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHighlight,
+  EuiIcon,
+  EuiSimplifiedBreadcrumbs,
+} from '@elastic/eui';
+import {
+  ApplicationStart,
+  ChromeNavLink,
+  ChromeRegistrationNavLink,
+  HttpStart,
+  NavGroupItemInMap,
+  WorkspaceObject,
+} from 'opensearch-dashboards/public';
+import React from 'react';
+import { BehaviorSubject } from 'rxjs';
+import { useObservable } from 'react-use';
+import { WorkspaceTitleDisplay } from '../workspace_name/workspace_name';
+import { WorkspaceUseCase } from '../../types';
+import { NavGroupType } from '../../../../../core/public';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+
+interface Props {
+  currentWorkspace: WorkspaceObject | null;
+  link: ChromeRegistrationNavLink & ChromeNavLink & { navGroup: NavGroupItemInMap };
+  application: ApplicationStart;
+  http: HttpStart;
+  registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
+  search: string;
+  callback?: () => void;
+}
+
+export const GlobalSearchPageItem = ({
+  link,
+  currentWorkspace,
+  application,
+  http,
+  registeredUseCases$,
+  search,
+  callback,
+}: Props) => {
+  const availableUseCases = useObservable(registeredUseCases$);
+  const breadcrumbs = [];
+  const isPageOutOfWorkspace = link.navGroup.type === NavGroupType.SYSTEM;
+
+  const navGroupElement = (navGroup: NavGroupItemInMap) => (
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      {navGroup.icon && (
+        <EuiFlexItem>
+          <EuiIcon type={navGroup.icon} color="text" />
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem>{navGroup.title}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  if (currentWorkspace && !isPageOutOfWorkspace) {
+    breadcrumbs.push({
+      text: (
+        <WorkspaceTitleDisplay
+          workspace={currentWorkspace}
+          availableUseCases={availableUseCases || []}
+        />
+      ),
+    });
+  } else {
+    breadcrumbs.push({ text: navGroupElement(link.navGroup) });
+  }
+  const appId = link.id.toLowerCase();
+  const isLanding = appId.endsWith('landing');
+  const text = (
+    <EuiHighlight search={search} highlightAll={true}>
+      {isLanding ? `${link.navGroup.title} ${link.title}` : link.title}
+    </EuiHighlight>
+  );
+
+  const isOverviewPage = appId.endsWith('overview');
+  if (isOverviewPage && link.category) {
+    breadcrumbs.push({ text: link.category.label });
+  }
+
+  if (link.parentNavLinkId) {
+    const parentNavLinkTitle = link.navGroup.navLinks.find(
+      (navLink) => navLink.id === link.parentNavLinkId
+    )?.title;
+    breadcrumbs.push({ text: parentNavLinkTitle });
+  }
+
+  const onNavItemClick = () => {
+    callback?.();
+    if (isPageOutOfWorkspace && currentWorkspace) {
+      // remove workspace information in the URL, special handling for data source which could visible both in/out workspace
+      const urlWithoutWorkspace = formatUrlWithWorkspaceId(link.href, '', http.basePath);
+      window.location.assign(urlWithoutWorkspace);
+      return;
+    }
+    application.navigateToApp(link.id);
+  };
+
+  breadcrumbs.push({
+    text,
+    onClick: () => {},
+  });
+
+  return (
+    <div
+      key={link.id}
+      aria-hidden="true"
+      data-test-subj={`global-search-item-${link.id}`}
+      onClick={() => {
+        onNavItemClick();
+      }}
+    >
+      <EuiSimplifiedBreadcrumbs breadcrumbs={breadcrumbs} hideTrailingSeparator responsive />
+    </div>
+  );
+};
diff --git a/src/plugins/workspace/public/components/global_search/search_pages_command.test.tsx b/src/plugins/workspace/public/components/global_search/search_pages_command.test.tsx
new file mode 100644
index 000000000000..d3ddf66b24c4
--- /dev/null
+++ b/src/plugins/workspace/public/components/global_search/search_pages_command.test.tsx
@@ -0,0 +1,125 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { searchPages } from './search_pages_command';
+import { WorkspaceUseCase } from '../../types';
+import { BehaviorSubject } from 'rxjs';
+import { coreMock } from '../../../../../core/public/mocks';
+import { NavGroupItemInMap, WorkspaceObject } from 'opensearch-dashboards/public';
+
+describe('<SearchPagesCommand />', () => {
+  const registeredUseCases = new BehaviorSubject([
+    {
+      id: 'foo',
+      title: 'Foo',
+      features: [{ id: 'system-feature', title: 'System feature' }],
+      systematic: true,
+      description: '',
+    } as WorkspaceUseCase,
+  ]);
+
+  const currentWorkspace: WorkspaceObject = {
+    id: 'mock-workspace',
+    name: 'mock-workspace',
+    features: ['use-case-foo-group'],
+  };
+
+  const navGroup: Record<string, NavGroupItemInMap> = {
+    'foo-group': {
+      id: 'foo-group',
+      title: 'Foo Group',
+      description: 'Foo Group description',
+      navLinks: [
+        {
+          id: 'foo-group-link1',
+          title: 'Foo Group Link 1',
+        },
+        {
+          id: 'foo-group-link2',
+          title: 'Foo Group Link 2',
+        },
+        {
+          id: 'foo-group-link3',
+          title: 'Foo Group Link 3',
+          hidden: true,
+        },
+      ],
+    },
+    dataAdministration: {
+      id: 'dataAdministration',
+      title: 'Data Administration',
+      description: 'Data Administration description',
+      navLinks: [
+        {
+          id: 'dataAdministration-link1',
+          title: 'Data Administration Link 1',
+        },
+        {
+          id: 'dataAdministration-link1',
+          title: 'Data Administration Link 2',
+        },
+      ],
+    },
+    settingsAndSetup: {
+      id: 'settingsAndSetup',
+      title: 'Settings and Setup',
+      description: 'Settings and Setup description',
+      navLinks: [
+        {
+          id: 'settingsAndSetup-link1',
+          title: 'Settings and Setup Link 1',
+        },
+        {
+          id: 'settingsAndSetup-link1',
+          title: 'Settings and Setup Link 2',
+        },
+      ],
+    },
+  };
+
+  const mock = coreMock.createStart();
+  const coreStartMock = {
+    ...mock,
+    chrome: {
+      ...mock.chrome,
+      navGroup: {
+        ...mock.chrome.navGroup,
+        getNavGroupsMap$: () => new BehaviorSubject(navGroup),
+      },
+    },
+    workspaces: {
+      ...mock.workspaces,
+      currentWorkspace$: new BehaviorSubject<WorkspaceObject | null>(currentWorkspace),
+    },
+  };
+
+  const callbackFn = jest.fn();
+
+  it('search return empty result', async () => {
+    const searchResult = await searchPages('bar', registeredUseCases, coreStartMock, callbackFn);
+
+    expect(searchResult).toHaveLength(0);
+  });
+
+  it('search return matched result', async () => {
+    const searchResult = await searchPages('foo', registeredUseCases, coreStartMock, callbackFn);
+
+    expect(searchResult).toHaveLength(2);
+  });
+
+  it('search return pages out of workspace', async () => {
+    let searchResult = await searchPages('Settings', registeredUseCases, coreStartMock, callbackFn);
+
+    expect(searchResult).toHaveLength(2);
+
+    searchResult = await searchPages(
+      'Administration',
+      registeredUseCases,
+      coreStartMock,
+      callbackFn
+    );
+    expect(searchResult).toHaveLength(2);
+  });
+});
diff --git a/src/plugins/workspace/public/components/global_search/search_pages_command.tsx b/src/plugins/workspace/public/components/global_search/search_pages_command.tsx
new file mode 100644
index 000000000000..0aa73a11088b
--- /dev/null
+++ b/src/plugins/workspace/public/components/global_search/search_pages_command.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChromeNavLink, ChromeRegistrationNavLink, CoreStart } from 'opensearch-dashboards/public';
+import { first } from 'rxjs/operators';
+import React, { ReactNode } from 'react';
+import { BehaviorSubject } from 'rxjs';
+import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
+import { GlobalSearchPageItem } from './page_item';
+import { DEFAULT_NAV_GROUPS, NavGroupType } from '../../../../../core/public';
+import { WorkspaceUseCase } from '../../types';
+
+export const searchPages = async (
+  query: string,
+  registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>,
+  coreStart?: CoreStart,
+  callback?: () => void
+): Promise<ReactNode[]> => {
+  if (coreStart) {
+    const currentWorkspace = await coreStart.workspaces.currentWorkspace$.pipe(first()).toPromise();
+
+    const navGroupMap = await coreStart.chrome.navGroup
+      .getNavGroupsMap$()
+      .pipe(first())
+      .toPromise();
+
+    const allAvailableCaseId = Object.entries(DEFAULT_NAV_GROUPS)
+      .filter(([key, value]) => {
+        return value.type === NavGroupType.SYSTEM;
+      })
+      .map(([key, value]) => key);
+
+    allAvailableCaseId.push(
+      getFirstUseCaseOfFeatureConfigs(currentWorkspace?.features || []) || ''
+    );
+
+    const searchResult = allAvailableCaseId.flatMap((useCaseId) => {
+      const navGroup = navGroupMap[useCaseId];
+      if (navGroup) {
+        const links = navGroup.navLinks as Array<ChromeRegistrationNavLink & ChromeNavLink>;
+        // parent nav links are not clickable
+        const parentNavLinkIds = links.map((link) => link.parentNavLinkId).filter((link) => !!link);
+        return links
+          .filter(
+            (link) =>
+              !link.hidden &&
+              !link.disabled &&
+              link.title &&
+              link.title.toLowerCase().includes(query.toLowerCase()) &&
+              !parentNavLinkIds.includes(link.id)
+          )
+          .map((link) => ({
+            ...link,
+            navGroup,
+          }));
+      }
+      return [];
+    });
+
+    const pages = searchResult.slice(0, 10).map((link) => {
+      return (
+        <GlobalSearchPageItem
+          link={link}
+          search={query}
+          currentWorkspace={currentWorkspace}
+          application={coreStart.application}
+          http={coreStart.http}
+          registeredUseCases$={registeredUseCases$}
+          callback={callback}
+        />
+      );
+    });
+
+    return pages;
+  }
+  return [];
+};
diff --git a/src/plugins/workspace/public/components/use_case_overview/get_started_cards.tsx b/src/plugins/workspace/public/components/use_case_overview/get_started_cards.tsx
index f9ff96efd0f0..a4a880cd45fe 100644
--- a/src/plugins/workspace/public/components/use_case_overview/get_started_cards.tsx
+++ b/src/plugins/workspace/public/components/use_case_overview/get_started_cards.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiI18n } from '@elastic/eui';
+import { EuiI18n, EuiIcon, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
 
@@ -11,6 +11,7 @@ interface GetStartCard {
   id: string;
   title: string;
   description: string;
+  icon: React.JSX.Element;
   footer: React.JSX.Element;
   navigateAppId: string;
   order: number;
@@ -23,43 +24,48 @@ const DASHBOARDS_APP_ID = 'dashboards';
 export const getStartedCards: GetStartCard[] = [
   {
     id: 'get_start_discover',
-    title: i18n.translate('workspace.essential_overview.discover.card.title', {
-      defaultMessage: 'Explore data',
-    }),
+    icon: <EuiIcon type="compass" size="l" color="primary" />,
+    title: '',
     description: i18n.translate('workspace.essential_overview.discover.card.description', {
-      defaultMessage: 'Explore data to uncover insights.',
+      defaultMessage: 'Explore data to uncover and discover insights.',
     }),
     footer: (
-      <EuiI18n token="workspace.essential_overview.discover.card.footer" default="Discover" />
+      <EuiTextColor color="subdued">
+        <EuiI18n token="workspace.essential_overview.discover.card.footer" default="Discover" />
+      </EuiTextColor>
     ),
     navigateAppId: DISCOVER_APP_ID,
     order: 20,
   },
   {
     id: 'get_start_visualization',
-    title: i18n.translate('workspace.essential_overview.visualize.card.title', {
-      defaultMessage: 'Visualize data',
-    }),
+    icon: <EuiIcon type="lineChart" size="l" color="primary" />,
+    title: '',
     description: i18n.translate('workspace.essential_overview.visualize.card.description', {
       defaultMessage: 'Gain deeper insights by visualizing and aggregating your data.',
     }),
     footer: (
-      <EuiI18n token="workspace.essential_overview.visualize.card.footer" default="Visualize" />
+      <EuiTextColor color="subdued">
+        <EuiI18n
+          token="workspace.essential_overview.visualize.card.footer"
+          default="Visualizations"
+        />
+      </EuiTextColor>
     ),
     navigateAppId: VISUALIZE_APP_ID,
     order: 30,
   },
   {
     id: 'get_start_dashboards',
-    title: i18n.translate('workspace.essential_overview.dashboards.card.title', {
-      defaultMessage: 'Explore your data at a glance',
-    }),
+    icon: <EuiIcon type="dashboard" size="l" color="primary" />,
+    title: '',
     description: i18n.translate('workspace.essential_overview.dashboards.card.description', {
-      defaultMessage:
-        'Monitor and understand your data connections using dynamic data visualization tools.',
+      defaultMessage: 'Monitor and explore your data using dynamic data visualization tools.',
     }),
     footer: (
-      <EuiI18n token="workspace.essential_overview.dashboards.card.footer" default="Dashboards" />
+      <EuiTextColor color="subdued">
+        <EuiI18n token="workspace.essential_overview.dashboards.card.footer" default="Dashboards" />
+      </EuiTextColor>
     ),
     navigateAppId: DASHBOARDS_APP_ID,
     order: 40,
diff --git a/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss b/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss
index 607b5eef6863..b17f2136af5c 100644
--- a/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss
+++ b/src/plugins/workspace/public/components/use_case_overview/setup_overview.scss
@@ -1,3 +1,24 @@
-.analyticsGettingStartedWorkspaceCardsIcon {
-  color: $euiColorMediumShade;
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.usecaseOverviewGettingStartedCard {
+  // Hide titles as they take up space even when empty
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  .euiCard__title {
+    display: none;
+  }
+
+  // Remove margins from description as titles are hidden and icons as they're at the top
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  .euiCard__description,
+  .euiCard__icon {
+    margin-top: 0;
+  }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  .euiCard__footer {
+    margin-top: $euiSizeS;
+  }
 }
diff --git a/src/plugins/workspace/public/components/use_case_overview/setup_overview.test.tsx b/src/plugins/workspace/public/components/use_case_overview/setup_overview.test.tsx
index ea0a12b930cf..7b6fa9b13e33 100644
--- a/src/plugins/workspace/public/components/use_case_overview/setup_overview.test.tsx
+++ b/src/plugins/workspace/public/components/use_case_overview/setup_overview.test.tsx
@@ -75,22 +75,16 @@ describe('Setup use case overview', () => {
     expect(firstCall[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
-          "selectable": Object {
-            "children": <EuiI18n
-              default="Discover"
-              token="workspace.essential_overview.discover.card.footer"
-            />,
-            "isSelected": false,
-            "onClick": [Function],
-          },
-          "titleElement": "h4",
-          "titleSize": "s",
+          "className": "usecaseOverviewGettingStartedCard",
         },
-        "description": "Explore data to uncover insights.",
+        "description": "Explore data to uncover and discover insights.",
+        "getFooter": [Function],
+        "getIcon": [Function],
         "id": "get_start_discover",
         "kind": "card",
+        "onClick": [Function],
         "order": 20,
-        "title": "Explore data",
+        "title": "",
       }
     `);
   });
@@ -137,17 +131,16 @@ describe('Setup use case overview', () => {
     expect(firstCall[0].getContent()).toMatchInlineSnapshot(`
       Object {
         "cardProps": Object {
-          "layout": "horizontal",
-          "titleElement": "h4",
-          "titleSize": "s",
+          "className": "usecaseOverviewGettingStartedCard",
         },
         "description": "Gain visibility into system health, performance, and reliability through monitoring of logs, metrics and traces.",
+        "getFooter": [Function],
         "getIcon": [Function],
         "id": "observability",
         "kind": "card",
         "onClick": [Function],
         "order": 4000,
-        "title": "Observability",
+        "title": "",
       }
     `);
   });
diff --git a/src/plugins/workspace/public/components/use_case_overview/setup_overview.tsx b/src/plugins/workspace/public/components/use_case_overview/setup_overview.tsx
index 5688e1108c31..4cb4859c40e4 100644
--- a/src/plugins/workspace/public/components/use_case_overview/setup_overview.tsx
+++ b/src/plugins/workspace/public/components/use_case_overview/setup_overview.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { CoreStart } from 'opensearch-dashboards/public';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, EuiTextColor } from '@elastic/eui';
 import { first } from 'rxjs/operators';
 import {
   ContentManagementPluginSetup,
@@ -76,16 +76,13 @@ export const registerEssentialOverviewContent = (
         order: card.order,
         description: card.description,
         title: card.title,
+        onClick: () => {
+          core.application.navigateToApp(card.navigateAppId);
+        },
+        getFooter: () => card.footer,
+        getIcon: () => card.icon,
         cardProps: {
-          titleElement: 'h4',
-          titleSize: 's',
-          selectable: {
-            onClick: () => {
-              core.application.navigateToApp(card.navigateAppId);
-            },
-            children: card.footer,
-            isSelected: false,
-          },
+          className: 'usecaseOverviewGettingStartedCard',
         },
       }),
     });
@@ -135,19 +132,13 @@ export const registerAnalyticsAllOverviewContent = (
       getContent: () => ({
         id: card.id,
         kind: 'card',
-        getIcon: () =>
-          React.createElement(EuiIcon, {
-            size: 'xl',
-            type: card.icon || 'wsSelector',
-            className: 'analyticsGettingStartedWorkspaceCardsIcon',
-          }),
+        getIcon: () => <EuiIcon type={card.icon || 'wsSelector'} size="l" color="primary" />,
         order: card.order || index,
         description: card.description,
-        title: card.title,
+        title: '',
+        getFooter: () => <EuiTextColor color="subdued">{card.title}</EuiTextColor>,
         cardProps: {
-          titleElement: 'h4',
-          titleSize: 's',
-          layout: 'horizontal',
+          className: 'usecaseOverviewGettingStartedCard',
         },
         onClick: async () => {
           const navGroups = await core.chrome.navGroup.getNavGroupsMap$().pipe(first()).toPromise();
diff --git a/src/plugins/workspace/public/components/utils/workspace.test.ts b/src/plugins/workspace/public/components/utils/workspace.test.ts
index b3436b108654..4a3ef5cab5c3 100644
--- a/src/plugins/workspace/public/components/utils/workspace.test.ts
+++ b/src/plugins/workspace/public/components/utils/workspace.test.ts
@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { navigateToWorkspaceDetail, navigateToWorkspacePageWithUseCase } from './workspace';
-import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+import { navigateToWorkspacePageWithUseCase } from './workspace';
 jest.mock('../../../../../core/public/utils');
 
 import { coreMock } from '../../../../../core/public/mocks';
@@ -12,57 +11,12 @@ import { coreMock } from '../../../../../core/public/mocks';
 const coreStartMock = coreMock.createStart();
 let mockNavigateToUrl = jest.fn();
 
-const defaultUrl = 'localhost://';
-
 describe('workspace utils', () => {
   beforeEach(() => {
     mockNavigateToUrl = jest.fn();
     coreStartMock.application.navigateToUrl = mockNavigateToUrl;
   });
 
-  describe('navigateToWorkspaceDetail', () => {
-    it('should redirect if newUrl is returned', () => {
-      // @ts-ignore
-      formatUrlWithWorkspaceId.mockImplementation(() => 'localhost:5601/w/id/app/workspace_detail');
-      navigateToWorkspaceDetail(
-        { application: coreStartMock.application, http: coreStartMock.http },
-        'id'
-      );
-      expect(mockNavigateToUrl).toHaveBeenCalledWith(
-        'localhost:5601/w/id/app/workspace_detail#/?tab=details'
-      );
-    });
-
-    it('should redirect to collaborators if newUrl is returned and tab id is collaborators', () => {
-      // @ts-ignore
-      formatUrlWithWorkspaceId.mockImplementation(() => 'localhost:5601/w/id/app/workspace_detail');
-      navigateToWorkspaceDetail(
-        { application: coreStartMock.application, http: coreStartMock.http },
-        'id',
-        'collaborators'
-      );
-      expect(mockNavigateToUrl).toHaveBeenCalledWith(
-        'localhost:5601/w/id/app/workspace_detail#/?tab=collaborators'
-      );
-    });
-
-    it('should not redirect if newUrl is not returned', () => {
-      Object.defineProperty(window, 'location', {
-        value: {
-          href: defaultUrl,
-        },
-        writable: true,
-      });
-      // @ts-ignore
-      formatUrlWithWorkspaceId.mockImplementation(() => '');
-      navigateToWorkspaceDetail(
-        { application: coreStartMock.application, http: coreStartMock.http },
-        ''
-      );
-      expect(mockNavigateToUrl).not.toBeCalled();
-    });
-  });
-
   describe('navigateToWorkspacePageWithUseCase', () => {
     it('should redirect if newUrl is returned', () => {
       coreStartMock.application.getUrlForApp.mockImplementation(
diff --git a/src/plugins/workspace/public/components/utils/workspace.ts b/src/plugins/workspace/public/components/utils/workspace.ts
index 8611726b4d88..68aba6d0ce0b 100644
--- a/src/plugins/workspace/public/components/utils/workspace.ts
+++ b/src/plugins/workspace/public/components/utils/workspace.ts
@@ -3,30 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  WORKSPACE_CREATE_APP_ID,
-  WORKSPACE_DETAIL_APP_ID,
-  WORKSPACE_LIST_APP_ID,
-} from '../../../common/constants';
 import { CoreStart } from '../../../../../core/public';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
-import { DetailTab } from '../workspace_form/constants';
 
 type Core = Pick<CoreStart, 'application' | 'http'>;
 
-export const navigateToWorkspaceDetail = (
-  { application, http }: Core,
-  workspaceId: string,
-  tabId: string = DetailTab.Details
-) => {
-  navigateToAppWithinWorkspace(
-    { application, http },
-    workspaceId,
-    WORKSPACE_DETAIL_APP_ID,
-    `/?tab=${tabId}`
-  );
-};
-
 export const navigateToWorkspacePageWithUseCase = (
   application: Core['application'],
   useCaseTitle: string,
diff --git a/src/plugins/workspace/public/components/workspace_collaborators/__snapshots__/workspace_collaborators.test.tsx.snap b/src/plugins/workspace/public/components/workspace_collaborators/__snapshots__/workspace_collaborators.test.tsx.snap
new file mode 100644
index 000000000000..ee482aebbac2
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_collaborators/__snapshots__/workspace_collaborators.test.tsx.snap
@@ -0,0 +1,1575 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkspaceCollaborators should render normally  1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+        data-test-subj="workspace-collaborators-panel"
+      >
+        <div
+          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <div>
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+            >
+              <div
+                class="euiFlexItem euiSearchBar__searchHolder"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                      class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+                      placeholder="Search..."
+                      type="search"
+                      value=""
+                    />
+                    <div
+                      class="euiFormControlLayoutIcons"
+                    >
+                      <span
+                        class="euiFormControlLayoutCustomIcon"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="euiFormControlLayoutCustomIcon__icon"
+                          data-euiicon-type="search"
+                        />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero euiSearchBar__filtersHolder"
+              >
+                <div
+                  class="euiFilterGroup"
+                >
+                  <div
+                    class="euiPopover euiPopover--anchorDownCenter"
+                    id="field_value_selection_0"
+                  >
+                    <div
+                      class="euiPopover__anchor"
+                    >
+                      <button
+                        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                        >
+                          <span
+                            class="euiButtonContent__icon"
+                            color="inherit"
+                            data-euiicon-type="arrowDown"
+                          />
+                          <span
+                            class="euiButtonEmpty__text"
+                          >
+                            <span
+                              class="euiFilterButton__textShift"
+                              data-text="Type"
+                              title="Type"
+                            >
+                              Type
+                            </span>
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    class="euiPopover euiPopover--anchorDownCenter"
+                    id="field_value_selection_1"
+                  >
+                    <div
+                      class="euiPopover__anchor"
+                    >
+                      <button
+                        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                        >
+                          <span
+                            class="euiButtonContent__icon"
+                            color="inherit"
+                            data-euiicon-type="arrowDown"
+                          />
+                          <span
+                            class="euiButtonEmpty__text"
+                          >
+                            <span
+                              class="euiFilterButton__textShift"
+                              data-text="Access level"
+                              title="Access level"
+                            >
+                              Access level
+                            </span>
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--m"
+            />
+            <div
+              class="euiBasicTable"
+            >
+              <div>
+                <div
+                  class="euiTableHeaderMobile"
+                >
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                  >
+                    <div
+                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                    >
+                      <div
+                        class="euiCheckbox"
+                      >
+                        <input
+                          aria-label="Select all rows"
+                          class="euiCheckbox__input"
+                          id="_selection_column-checkbox_generated-id"
+                          type="checkbox"
+                        />
+                        <div
+                          class="euiCheckbox__square"
+                        />
+                        <label
+                          class="euiCheckbox__label"
+                          for="_selection_column-checkbox_generated-id"
+                        >
+                          Select all rows
+                        </label>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                    />
+                  </div>
+                </div>
+                <table
+                  class="euiTable euiTable--compressed euiTable--responsive"
+                  id="__table_generated-id"
+                  tabindex="-1"
+                >
+                  <caption
+                    class="euiScreenReaderOnly euiTableCaption"
+                  />
+                  <thead>
+                    <tr>
+                      <th
+                        class="euiTableHeaderCellCheckbox"
+                        scope="col"
+                      >
+                        <div
+                          class="euiTableCellContent"
+                        >
+                          <div
+                            class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                          >
+                            <input
+                              aria-label="Select all rows"
+                              class="euiCheckbox__input"
+                              data-test-subj="checkboxSelectAll"
+                              id="_selection_column-checkbox_generated-id"
+                              type="checkbox"
+                            />
+                            <div
+                              class="euiCheckbox__square"
+                            />
+                          </div>
+                        </div>
+                      </th>
+                      <th
+                        class="euiTableHeaderCell"
+                        data-test-subj="tableHeaderCell_primaryId_0"
+                        role="columnheader"
+                        scope="col"
+                        style="width: 30%;"
+                      >
+                        <span
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                            title="ID"
+                          >
+                            ID
+                          </span>
+                        </span>
+                      </th>
+                      <th
+                        class="euiTableHeaderCell"
+                        data-test-subj="tableHeaderCell_displayedType_1"
+                        role="columnheader"
+                        scope="col"
+                        style="width: 30%;"
+                      >
+                        <span
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                            title="Type"
+                          >
+                            Type
+                          </span>
+                        </span>
+                      </th>
+                      <th
+                        class="euiTableHeaderCell"
+                        data-test-subj="tableHeaderCell_accessLevel_2"
+                        role="columnheader"
+                        scope="col"
+                        style="width: 30%;"
+                      >
+                        <span
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                            title="Access level"
+                          >
+                            Access level
+                          </span>
+                        </span>
+                      </th>
+                      <th
+                        class="euiTableHeaderCell"
+                        data-test-subj="tableHeaderCell_Actions_3"
+                        role="columnheader"
+                        scope="col"
+                        style="width: 10%;"
+                      >
+                        <span
+                          class="euiTableCellContent euiTableCellContent--alignRight"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                            title="Actions"
+                          >
+                            Actions
+                          </span>
+                        </span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      class="euiTableRow euiTableRow-isSelectable"
+                    >
+                      <td
+                        class="euiTableRowCellCheckbox"
+                      >
+                        <div
+                          class="euiTableCellContent"
+                        >
+                          <div
+                            class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                          >
+                            <input
+                              aria-label="Select this row"
+                              class="euiCheckbox__input"
+                              data-test-subj="checkboxSelectRow-0"
+                              id="_selection_column_0-checkbox"
+                              title="Select this row"
+                              type="checkbox"
+                            />
+                            <div
+                              class="euiCheckbox__square"
+                            />
+                          </div>
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          ID
+                        </div>
+                        <div
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                          >
+                            admin
+                          </span>
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Type
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--overflowingContent"
+                        >
+                          —
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Access level
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--overflowingContent"
+                        >
+                          Admin
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 10%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Actions
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                        >
+                          <div
+                            class="euiPopover euiPopover--anchorDownLeft"
+                            id="workspace-detail-add-collaborator-action"
+                          >
+                            <div
+                              class="euiPopover__anchor"
+                            >
+                              <button
+                                aria-label="workspace-collaborator-table-actions"
+                                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                data-test-subj="workspace-detail-collaborator-table-actions-box"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  color="inherit"
+                                  data-euiicon-type="boxesHorizontal"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr
+                      class="euiTableRow euiTableRow-isSelectable"
+                    >
+                      <td
+                        class="euiTableRowCellCheckbox"
+                      >
+                        <div
+                          class="euiTableCellContent"
+                        >
+                          <div
+                            class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                          >
+                            <input
+                              aria-label="Select this row"
+                              class="euiCheckbox__input"
+                              data-test-subj="checkboxSelectRow-1"
+                              id="_selection_column_1-checkbox"
+                              title="Select this row"
+                              type="checkbox"
+                            />
+                            <div
+                              class="euiCheckbox__square"
+                            />
+                          </div>
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          ID
+                        </div>
+                        <div
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                          >
+                            foo
+                          </span>
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Type
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--overflowingContent"
+                        >
+                          —
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Access level
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--overflowingContent"
+                        >
+                          Read and write
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 10%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Actions
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                        >
+                          <div
+                            class="euiPopover euiPopover--anchorDownLeft"
+                            id="workspace-detail-add-collaborator-action"
+                          >
+                            <div
+                              class="euiPopover__anchor"
+                            >
+                              <button
+                                aria-label="workspace-collaborator-table-actions"
+                                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                data-test-subj="workspace-detail-collaborator-table-actions-box"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  color="inherit"
+                                  data-euiicon-type="boxesHorizontal"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr
+                      class="euiTableRow euiTableRow-isSelectable"
+                    >
+                      <td
+                        class="euiTableRowCellCheckbox"
+                      >
+                        <div
+                          class="euiTableCellContent"
+                        >
+                          <div
+                            class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                          >
+                            <input
+                              aria-label="Select this row"
+                              class="euiCheckbox__input"
+                              data-test-subj="checkboxSelectRow-2"
+                              id="_selection_column_2-checkbox"
+                              title="Select this row"
+                              type="checkbox"
+                            />
+                            <div
+                              class="euiCheckbox__square"
+                            />
+                          </div>
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          ID
+                        </div>
+                        <div
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                          >
+                            bar
+                          </span>
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Type
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--overflowingContent"
+                        >
+                          —
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 30%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Access level
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--overflowingContent"
+                        >
+                          Read only
+                        </div>
+                      </td>
+                      <td
+                        class="euiTableRowCell"
+                        style="width: 10%;"
+                      >
+                        <div
+                          class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                        >
+                          Actions
+                        </div>
+                        <div
+                          class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                        >
+                          <div
+                            class="euiPopover euiPopover--anchorDownLeft"
+                            id="workspace-detail-add-collaborator-action"
+                          >
+                            <div
+                              class="euiPopover__anchor"
+                            >
+                              <button
+                                aria-label="workspace-collaborator-table-actions"
+                                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                data-test-subj="workspace-detail-collaborator-table-actions-box"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  color="inherit"
+                                  data-euiicon-type="boxesHorizontal"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div>
+                <div
+                  class="euiSpacer euiSpacer--m"
+                />
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <div
+                      class="euiPopover euiPopover--anchorUpRight"
+                    >
+                      <div
+                        class="euiPopover__anchor"
+                      >
+                        <button
+                          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                          data-test-subj="tablePaginationPopoverButton"
+                          type="button"
+                        >
+                          <span
+                            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                          >
+                            <span
+                              class="euiButtonContent__icon"
+                              color="inherit"
+                              data-euiicon-type="arrowDown"
+                            />
+                            <span
+                              class="euiButtonEmpty__text"
+                            >
+                              Rows per page
+                              : 
+                              10
+                            </span>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <nav
+                      class="euiPagination"
+                    >
+                      <button
+                        aria-label="Previous page"
+                        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                        data-test-subj="pagination-button-previous"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="euiButtonIcon__icon"
+                          color="inherit"
+                          data-euiicon-type="arrowLeft"
+                        />
+                      </button>
+                      <ul
+                        class="euiPagination__list"
+                      >
+                        <li
+                          class="euiPagination__item"
+                        >
+                          <button
+                            aria-controls="__table_generated-id"
+                            aria-current="true"
+                            aria-label="Page 1 of 1"
+                            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                            data-test-subj="pagination-button-0"
+                            disabled=""
+                            type="button"
+                          >
+                            <span
+                              class="euiButtonContent euiButtonEmpty__content"
+                            >
+                              <span
+                                class="euiButtonEmpty__text"
+                              >
+                                1
+                              </span>
+                            </span>
+                          </button>
+                        </li>
+                      </ul>
+                      <button
+                        aria-label="Next page"
+                        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                        data-test-subj="pagination-button-next"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="euiButtonIcon__icon"
+                          color="inherit"
+                          data-euiicon-type="arrowRight"
+                        />
+                      </button>
+                    </nav>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        data-test-subj="confirm-modal-container"
+      />
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiPage euiPage--paddingMedium euiPage--grow"
+      data-test-subj="workspace-collaborators-panel"
+    >
+      <div
+        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          >
+            <div
+              class="euiFlexItem euiSearchBar__searchHolder"
+            >
+              <div
+                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+              >
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <input
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                    class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+                    placeholder="Search..."
+                    type="search"
+                    value=""
+                  />
+                  <div
+                    class="euiFormControlLayoutIcons"
+                  >
+                    <span
+                      class="euiFormControlLayoutCustomIcon"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiFormControlLayoutCustomIcon__icon"
+                        data-euiicon-type="search"
+                      />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero euiSearchBar__filtersHolder"
+            >
+              <div
+                class="euiFilterGroup"
+              >
+                <div
+                  class="euiPopover euiPopover--anchorDownCenter"
+                  id="field_value_selection_0"
+                >
+                  <div
+                    class="euiPopover__anchor"
+                  >
+                    <button
+                      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                      >
+                        <span
+                          class="euiButtonContent__icon"
+                          color="inherit"
+                          data-euiicon-type="arrowDown"
+                        />
+                        <span
+                          class="euiButtonEmpty__text"
+                        >
+                          <span
+                            class="euiFilterButton__textShift"
+                            data-text="Type"
+                            title="Type"
+                          >
+                            Type
+                          </span>
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="euiPopover euiPopover--anchorDownCenter"
+                  id="field_value_selection_1"
+                >
+                  <div
+                    class="euiPopover__anchor"
+                  >
+                    <button
+                      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                      >
+                        <span
+                          class="euiButtonContent__icon"
+                          color="inherit"
+                          data-euiicon-type="arrowDown"
+                        />
+                        <span
+                          class="euiButtonEmpty__text"
+                        >
+                          <span
+                            class="euiFilterButton__textShift"
+                            data-text="Access level"
+                            title="Access level"
+                          >
+                            Access level
+                          </span>
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--m"
+          />
+          <div
+            class="euiBasicTable"
+          >
+            <div>
+              <div
+                class="euiTableHeaderMobile"
+              >
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <div
+                      class="euiCheckbox"
+                    >
+                      <input
+                        aria-label="Select all rows"
+                        class="euiCheckbox__input"
+                        id="_selection_column-checkbox_generated-id"
+                        type="checkbox"
+                      />
+                      <div
+                        class="euiCheckbox__square"
+                      />
+                      <label
+                        class="euiCheckbox__label"
+                        for="_selection_column-checkbox_generated-id"
+                      >
+                        Select all rows
+                      </label>
+                    </div>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  />
+                </div>
+              </div>
+              <table
+                class="euiTable euiTable--compressed euiTable--responsive"
+                id="__table_generated-id"
+                tabindex="-1"
+              >
+                <caption
+                  class="euiScreenReaderOnly euiTableCaption"
+                />
+                <thead>
+                  <tr>
+                    <th
+                      class="euiTableHeaderCellCheckbox"
+                      scope="col"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <div
+                          class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                        >
+                          <input
+                            aria-label="Select all rows"
+                            class="euiCheckbox__input"
+                            data-test-subj="checkboxSelectAll"
+                            id="_selection_column-checkbox_generated-id"
+                            type="checkbox"
+                          />
+                          <div
+                            class="euiCheckbox__square"
+                          />
+                        </div>
+                      </div>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_primaryId_0"
+                      role="columnheader"
+                      scope="col"
+                      style="width: 30%;"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="ID"
+                        >
+                          ID
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_displayedType_1"
+                      role="columnheader"
+                      scope="col"
+                      style="width: 30%;"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Type"
+                        >
+                          Type
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_accessLevel_2"
+                      role="columnheader"
+                      scope="col"
+                      style="width: 30%;"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Access level"
+                        >
+                          Access level
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_Actions_3"
+                      role="columnheader"
+                      scope="col"
+                      style="width: 10%;"
+                    >
+                      <span
+                        class="euiTableCellContent euiTableCellContent--alignRight"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Actions"
+                        >
+                          Actions
+                        </span>
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    class="euiTableRow euiTableRow-isSelectable"
+                  >
+                    <td
+                      class="euiTableRowCellCheckbox"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <div
+                          class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                        >
+                          <input
+                            aria-label="Select this row"
+                            class="euiCheckbox__input"
+                            data-test-subj="checkboxSelectRow-0"
+                            id="_selection_column_0-checkbox"
+                            title="Select this row"
+                            type="checkbox"
+                          />
+                          <div
+                            class="euiCheckbox__square"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        ID
+                      </div>
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                        >
+                          admin
+                        </span>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Type
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--overflowingContent"
+                      >
+                        —
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Access level
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--overflowingContent"
+                      >
+                        Admin
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 10%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Actions
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiPopover euiPopover--anchorDownLeft"
+                          id="workspace-detail-add-collaborator-action"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <button
+                              aria-label="workspace-collaborator-table-actions"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              data-test-subj="workspace-detail-collaborator-table-actions-box"
+                              type="button"
+                            >
+                              <span
+                                aria-hidden="true"
+                                class="euiButtonIcon__icon"
+                                color="inherit"
+                                data-euiicon-type="boxesHorizontal"
+                              />
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr
+                    class="euiTableRow euiTableRow-isSelectable"
+                  >
+                    <td
+                      class="euiTableRowCellCheckbox"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <div
+                          class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                        >
+                          <input
+                            aria-label="Select this row"
+                            class="euiCheckbox__input"
+                            data-test-subj="checkboxSelectRow-1"
+                            id="_selection_column_1-checkbox"
+                            title="Select this row"
+                            type="checkbox"
+                          />
+                          <div
+                            class="euiCheckbox__square"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        ID
+                      </div>
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                        >
+                          foo
+                        </span>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Type
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--overflowingContent"
+                      >
+                        —
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Access level
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--overflowingContent"
+                      >
+                        Read and write
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 10%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Actions
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiPopover euiPopover--anchorDownLeft"
+                          id="workspace-detail-add-collaborator-action"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <button
+                              aria-label="workspace-collaborator-table-actions"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              data-test-subj="workspace-detail-collaborator-table-actions-box"
+                              type="button"
+                            >
+                              <span
+                                aria-hidden="true"
+                                class="euiButtonIcon__icon"
+                                color="inherit"
+                                data-euiicon-type="boxesHorizontal"
+                              />
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr
+                    class="euiTableRow euiTableRow-isSelectable"
+                  >
+                    <td
+                      class="euiTableRowCellCheckbox"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <div
+                          class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                        >
+                          <input
+                            aria-label="Select this row"
+                            class="euiCheckbox__input"
+                            data-test-subj="checkboxSelectRow-2"
+                            id="_selection_column_2-checkbox"
+                            title="Select this row"
+                            type="checkbox"
+                          />
+                          <div
+                            class="euiCheckbox__square"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        ID
+                      </div>
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                        >
+                          bar
+                        </span>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Type
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--overflowingContent"
+                      >
+                        —
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 30%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Access level
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--overflowingContent"
+                      >
+                        Read only
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                      style="width: 10%;"
+                    >
+                      <div
+                        class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                      >
+                        Actions
+                      </div>
+                      <div
+                        class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                      >
+                        <div
+                          class="euiPopover euiPopover--anchorDownLeft"
+                          id="workspace-detail-add-collaborator-action"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <button
+                              aria-label="workspace-collaborator-table-actions"
+                              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                              data-test-subj="workspace-detail-collaborator-table-actions-box"
+                              type="button"
+                            >
+                              <span
+                                aria-hidden="true"
+                                class="euiButtonIcon__icon"
+                                color="inherit"
+                                data-euiicon-type="boxesHorizontal"
+                              />
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+              >
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <div
+                    class="euiPopover euiPopover--anchorUpRight"
+                  >
+                    <div
+                      class="euiPopover__anchor"
+                    >
+                      <button
+                        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                        data-test-subj="tablePaginationPopoverButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                        >
+                          <span
+                            class="euiButtonContent__icon"
+                            color="inherit"
+                            data-euiicon-type="arrowDown"
+                          />
+                          <span
+                            class="euiButtonEmpty__text"
+                          >
+                            Rows per page
+                            : 
+                            10
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <nav
+                    class="euiPagination"
+                  >
+                    <button
+                      aria-label="Previous page"
+                      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                      data-test-subj="pagination-button-previous"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="arrowLeft"
+                      />
+                    </button>
+                    <ul
+                      class="euiPagination__list"
+                    >
+                      <li
+                        class="euiPagination__item"
+                      >
+                        <button
+                          aria-controls="__table_generated-id"
+                          aria-current="true"
+                          aria-label="Page 1 of 1"
+                          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                          data-test-subj="pagination-button-0"
+                          disabled=""
+                          type="button"
+                        >
+                          <span
+                            class="euiButtonContent euiButtonEmpty__content"
+                          >
+                            <span
+                              class="euiButtonEmpty__text"
+                            >
+                              1
+                            </span>
+                          </span>
+                        </button>
+                      </li>
+                    </ul>
+                    <button
+                      aria-label="Next page"
+                      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                      data-test-subj="pagination-button-next"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="arrowRight"
+                      />
+                    </button>
+                  </nav>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test-subj="confirm-modal-container"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`WorkspaceCollaborators should return null if currentWorkspace is null 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        data-test-subj="confirm-modal-container"
+      />
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      data-test-subj="confirm-modal-container"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/plugins/workspace/public/components/workspace_collaborators/workspace_collaborators.test.tsx b/src/plugins/workspace/public/components/workspace_collaborators/workspace_collaborators.test.tsx
new file mode 100644
index 000000000000..e0017e4a9169
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_collaborators/workspace_collaborators.test.tsx
@@ -0,0 +1,170 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { coreMock } from '../../../../../core/public/mocks';
+import { WorkspaceCollaborators } from './workspace_collaborators';
+import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
+import { of } from 'rxjs';
+import ReactDOM from 'react-dom';
+import { fireEvent } from '@testing-library/react';
+import { WorkspaceCollaboratorPermissionType } from '../../types';
+
+const workspaceClientUpdateMock = jest.fn();
+const addDangerMock = jest.fn();
+const coreStartMock = coreMock.createStart();
+
+const mockOverlays = coreStartMock.overlays;
+
+const setup = ({
+  permissionEnabled = true,
+  workspaceClientUpdate = workspaceClientUpdateMock,
+}: {
+  permissionEnabled?: boolean;
+  workspaceClientUpdate?: jest.Mock;
+}) => {
+  const collaboratorTypes: WorkspaceCollaboratorPermissionType[] = [];
+  const services = {
+    ...coreStartMock,
+    application: {
+      capabilities: {
+        ...coreStartMock.application.capabilities,
+        workspaces: {
+          ...coreStartMock.application.capabilities.workspaces,
+          permissionEnabled,
+        },
+      },
+    },
+    workspaces: {
+      ...coreStartMock.workspaces,
+      currentWorkspace$: of({
+        id: 'test',
+        name: 'current-workspace-name',
+        features: ['use-case-observability'],
+        permissions: {
+          library_write: {
+            users: ['admin'],
+            groups: ['foo'],
+          },
+          write: {
+            users: ['admin'],
+          },
+          library_read: {
+            users: ['bar'],
+          },
+          read: {
+            users: ['bar'],
+            groups: ['foo'],
+          },
+        },
+      }),
+    },
+    workspaceClient: {
+      update: workspaceClientUpdate,
+    },
+    navigationUI: {
+      HeaderControl: () => null,
+    },
+    collaboratorTypes: {
+      getTypes$: () => of(collaboratorTypes),
+    },
+    notifications: {
+      ...coreStartMock.notifications,
+      toasts: {
+        ...coreStartMock.notifications.toasts,
+        addDanger: addDangerMock,
+      },
+    },
+  };
+  const renderResult = render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <>
+        <WorkspaceCollaborators />
+        <div data-test-subj="confirm-modal-container" />
+      </>
+    </OpenSearchDashboardsContextProvider>
+  );
+  return {
+    renderResult,
+  };
+};
+
+describe('WorkspaceCollaborators', () => {
+  beforeEach(() => {
+    mockOverlays.openModal.mockClear();
+  });
+  it('should return null if currentWorkspace is null', () => {
+    const { renderResult } = setup({ permissionEnabled: false });
+    expect(renderResult.queryByTestId('workspace-collaborators-panel')).not.toBeInTheDocument();
+    expect(renderResult).toMatchSnapshot();
+  });
+
+  it('should render normally ', () => {
+    const { renderResult } = setup({ permissionEnabled: true });
+    expect(renderResult.getByTestId('workspace-collaborators-panel')).toBeInTheDocument();
+    expect(renderResult).toMatchSnapshot();
+  });
+
+  it('should call workspaceClient.update when handleSubmitPermissionSettings is called', async () => {
+    const { renderResult } = setup({ permissionEnabled: true });
+    mockOverlays.openModal.mockReturnValue({
+      onClose: Promise.resolve(),
+      close: async () => {
+        ReactDOM.unmountComponentAtNode(renderResult.getByTestId('confirm-modal-container'));
+      },
+    });
+
+    fireEvent.click(renderResult.getByTestId('checkboxSelectRow-0'));
+    const deleteCollaborator = renderResult.getByText('Delete 1 collaborator');
+    fireEvent.click(deleteCollaborator);
+    expect(mockOverlays.openModal).toHaveBeenCalled();
+    mockOverlays.openModal.mock.calls[0][0](renderResult.getByTestId('confirm-modal-container'));
+    await waitFor(() => {
+      expect(renderResult.getByText('Confirm')).toBeInTheDocument();
+    });
+    jest.useFakeTimers();
+    fireEvent.click(renderResult.getByText('Confirm'));
+    expect(workspaceClientUpdateMock).toHaveBeenCalledWith(
+      'test',
+      {},
+      {
+        permissions: {
+          library_read: { users: ['bar'] },
+          library_write: { groups: ['foo'] },
+          read: { groups: ['foo'], users: ['bar'] },
+        },
+      }
+    );
+    mockOverlays.openModal.mock.calls[0][0](renderResult.getByTestId('confirm-modal-container'));
+    const modal = renderResult.queryByTestId('confirm-modal-container');
+    if (modal) {
+      ReactDOM.unmountComponentAtNode(modal);
+    }
+  });
+
+  it('should call notification add danger if update is failed', async () => {
+    const workspaceClientUpdate = jest.fn().mockRejectedValue('error');
+    const { renderResult } = setup({ permissionEnabled: true, workspaceClientUpdate });
+    mockOverlays.openModal.mockReturnValue({
+      onClose: Promise.resolve(),
+      close: async () => {
+        ReactDOM.unmountComponentAtNode(renderResult.getByTestId('confirm-modal-container'));
+      },
+    });
+
+    fireEvent.click(renderResult.getByTestId('checkboxSelectRow-0'));
+    const deleteCollaborator = renderResult.getByText('Delete 1 collaborator');
+    fireEvent.click(deleteCollaborator);
+    expect(mockOverlays.openModal).toHaveBeenCalled();
+    mockOverlays.openModal.mock.calls[0][0](renderResult.getByTestId('confirm-modal-container'));
+    await waitFor(() => {
+      expect(renderResult.getByText('Confirm')).toBeInTheDocument();
+    });
+    jest.useFakeTimers();
+    fireEvent.click(renderResult.getByText('Confirm'));
+    expect(addDangerMock).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_collaborators/workspace_collaborators.tsx b/src/plugins/workspace/public/components/workspace_collaborators/workspace_collaborators.tsx
new file mode 100644
index 000000000000..399127a594c8
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_collaborators/workspace_collaborators.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPage, EuiPanel } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { CoreStart } from '../../../../../core/public';
+import {
+  NavigationPublicPluginStart,
+  TopNavControlDescriptionData,
+} from '../../../../navigation/public';
+import { WorkspacePermissionSetting } from '../workspace_form/types';
+import { WorkspaceCollaboratorTable } from '../workspace_form/workspace_collaborator_table';
+import { WorkspaceCollaboratorTypesService } from '../../services/workspace_collaborator_types_service';
+import { AddCollaboratorButton } from '../workspace_form/add_collaborator_button';
+import {
+  convertPermissionSettingsToPermissions,
+  convertPermissionsToPermissionSettings,
+} from '../workspace_form';
+import { WorkspaceAttributeWithPermission } from '../../../../../core/types';
+import { WorkspaceClient } from '../../workspace_client';
+
+export const WorkspaceCollaborators = () => {
+  const {
+    services: {
+      workspaces,
+      application,
+      navigationUI: { HeaderControl },
+      workspaceClient,
+      collaboratorTypes,
+      notifications,
+    },
+  } = useOpenSearchDashboards<{
+    CoreStart: CoreStart;
+    navigationUI: NavigationPublicPluginStart['ui'];
+    collaboratorTypes: WorkspaceCollaboratorTypesService;
+    workspaceClient: WorkspaceClient;
+  }>();
+
+  const displayedCollaboratorTypes = useObservable(collaboratorTypes.getTypes$()) ?? [];
+
+  const currentWorkspace = useObservable(
+    workspaces ? workspaces.currentWorkspace$ : of(null)
+  ) as WorkspaceAttributeWithPermission;
+
+  const permissionSettings = convertPermissionsToPermissionSettings(
+    currentWorkspace?.permissions ?? {}
+  );
+
+  const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
+
+  const handleSubmitPermissionSettings = async (settings: WorkspacePermissionSetting[]) => {
+    const showErrorNotification = (errorText?: string) => {
+      notifications?.toasts.addDanger({
+        title: i18n.translate('workspace.collaborators.update.failed.message', {
+          defaultMessage: 'Failed to update workspace collaborators',
+        }),
+        ...(errorText ? { text: errorText } : {}),
+      });
+    };
+
+    try {
+      const result = await workspaceClient.update(
+        currentWorkspace.id,
+        {},
+        {
+          permissions: convertPermissionSettingsToPermissions(settings),
+        }
+      );
+
+      if (!result.success) {
+        showErrorNotification(result.error);
+      }
+      return result;
+    } catch (error) {
+      showErrorNotification(error instanceof Error ? error.message : JSON.stringify(error));
+      return {
+        success: false as const,
+        error: error instanceof Error ? error.message : JSON.stringify(error),
+      };
+    }
+  };
+
+  if (!currentWorkspace || !isPermissionEnabled) {
+    return null;
+  }
+  return (
+    <EuiPage data-test-subj="workspace-collaborators-panel">
+      <HeaderControl
+        controls={[
+          {
+            description: i18n.translate('workspace.collaborators.description', {
+              defaultMessage: 'Manage workspace access and permissions.',
+            }),
+          } as TopNavControlDescriptionData,
+        ]}
+        setMountPoint={application.setAppDescriptionControls}
+      />
+      <HeaderControl
+        controls={[
+          {
+            renderComponent: (
+              <AddCollaboratorButton
+                permissionSettings={permissionSettings}
+                displayedTypes={displayedCollaboratorTypes}
+                handleSubmitPermissionSettings={handleSubmitPermissionSettings}
+              />
+            ),
+          },
+        ]}
+        setMountPoint={application?.setAppRightControls}
+      />
+      <EuiPanel>
+        <WorkspaceCollaboratorTable
+          permissionSettings={permissionSettings}
+          displayedCollaboratorTypes={displayedCollaboratorTypes}
+          handleSubmitPermissionSettings={handleSubmitPermissionSettings}
+        />
+      </EuiPanel>
+    </EuiPage>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_collaborators_app.test.tsx b/src/plugins/workspace/public/components/workspace_collaborators_app.test.tsx
new file mode 100644
index 000000000000..c6c1bfecc385
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_collaborators_app.test.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { coreMock } from '../../../../core/public/mocks';
+import { WorkspaceCollaboratorsApp } from './workspace_collaborators_app';
+import { OpenSearchDashboardsContextProvider } from '../../../../plugins/opensearch_dashboards_react/public';
+import { of } from 'rxjs';
+
+const setup = () => {
+  const coreStartMock = coreMock.createStart();
+  const services = {
+    ...coreStartMock,
+    navigationUI: {
+      HeaderControl: () => null,
+    },
+    collaboratorTypes: {
+      getTypes$: () => of([]),
+    },
+  };
+  const renderResult = render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceCollaboratorsApp />
+    </OpenSearchDashboardsContextProvider>
+  );
+  return {
+    renderResult,
+  };
+};
+
+describe('WorkspaceCollaboratorsApp', () => {
+  it('should render normally', () => {
+    const { renderResult } = setup();
+    expect(renderResult).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_collaborators_app.tsx b/src/plugins/workspace/public/components/workspace_collaborators_app.tsx
new file mode 100644
index 000000000000..ea5e66e3ff17
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_collaborators_app.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WorkspaceCollaborators } from './workspace_collaborators/workspace_collaborators';
+
+import { WorkspaceClient } from '../workspace_client';
+
+export const WorkspaceCollaboratorsApp = () => {
+  const {
+    services: { chrome },
+  } = useOpenSearchDashboards<{ CoreStart: CoreStart; workspaceClient: WorkspaceClient }>();
+
+  /**
+   * set breadcrumbs to chrome
+   */
+  useEffect(() => {
+    chrome?.setBreadcrumbs([
+      {
+        text: i18n.translate('workspace.collaborators.title', {
+          defaultMessage: 'Collaborators',
+        }),
+      },
+    ]);
+  }, [chrome]);
+
+  return (
+    <I18nProvider>
+      <WorkspaceCollaborators />
+    </I18nProvider>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx
index f654ea327fd4..a03a124024e7 100644
--- a/src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/creator_details_panel.tsx
@@ -73,6 +73,7 @@ export const CreatorDetailsPanel = ({
                 color={color}
                 onChange={onColorChange}
                 compressed
+                mode="swatch"
                 button={
                   <EuiFormControlLayout
                     icon={{
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
index 95797ffe81c8..6fa536f95dd0 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
@@ -18,6 +18,7 @@ import {
 import { DataSourceEngineType } from '../../../../data_source/common/data_sources';
 import { DataSourceConnectionType } from '../../../common/types';
 import * as utils from '../../utils';
+import * as workspaceUtilsExports from '../utils/workspace';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -113,8 +114,15 @@ jest.spyOn(utils, 'fetchDataSourceConnections').mockImplementation(async (passed
 const WorkspaceCreator = ({
   isDashboardAdmin = false,
   dataSourceEnabled = false,
+  isPermissionEnabled = true,
   ...props
-}: Partial<WorkspaceCreatorProps & { isDashboardAdmin: boolean; dataSourceEnabled?: boolean }>) => {
+}: Partial<
+  WorkspaceCreatorProps & {
+    isDashboardAdmin: boolean;
+    dataSourceEnabled?: boolean;
+    isPermissionEnabled?: boolean;
+  }
+>) => {
   const { Provider } = createOpenSearchDashboardsReactContext({
     ...mockCoreStart,
     ...{
@@ -123,7 +131,7 @@ const WorkspaceCreator = ({
         capabilities: {
           ...mockCoreStart.application.capabilities,
           workspaces: {
-            permissionEnabled: true,
+            permissionEnabled: isPermissionEnabled,
           },
           dashboards: {
             isDashboardAdmin,
@@ -273,8 +281,12 @@ describe('WorkspaceCreator', () => {
         dataSources: [],
         dataConnections: [],
         permissions: {
-          library_write: { users: ['%me%'] },
-          write: { users: ['%me%'] },
+          library_write: {
+            users: ['%me%'],
+          },
+          write: {
+            users: ['%me%'],
+          },
         },
       }
     );
@@ -328,43 +340,6 @@ describe('WorkspaceCreator', () => {
     expect(notificationToastsAddSuccess).not.toHaveBeenCalled();
   });
 
-  it('create workspace with customized permissions', async () => {
-    const { getByTestId } = render(<WorkspaceCreator />);
-
-    // Ensure workspace create form rendered
-    await waitFor(() => {
-      expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
-    });
-    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
-    fireEvent.input(nameInput, {
-      target: { value: 'test workspace name' },
-    });
-    fireEvent.click(getByTestId('workspaceUseCase-observability'));
-    fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-addNew'));
-    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
-    expect(workspaceClientCreate).toHaveBeenCalledWith(
-      expect.objectContaining({
-        name: 'test workspace name',
-      }),
-      {
-        dataConnections: [],
-        dataSources: [],
-        permissions: {
-          write: {
-            users: ['%me%'],
-          },
-          library_write: {
-            users: ['%me%'],
-          },
-        },
-      }
-    );
-    await waitFor(() => {
-      expect(notificationToastsAddSuccess).toHaveBeenCalled();
-    });
-    expect(notificationToastsAddDanger).not.toHaveBeenCalled();
-  });
-
   it('create workspace with customized selected dataSources', async () => {
     Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
       configurable: true,
@@ -391,7 +366,7 @@ describe('WorkspaceCreator', () => {
     await waitFor(() => {
       expect(
         getByText(
-          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
+          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace.'
         )
       ).toBeInTheDocument();
       expect(getByText(dataSourcesList[0].title)).toBeInTheDocument();
@@ -404,18 +379,10 @@ describe('WorkspaceCreator', () => {
       expect.objectContaining({
         name: 'test workspace name',
       }),
-      {
+      expect.objectContaining({
         dataConnections: [],
         dataSources: ['id1'],
-        permissions: {
-          library_write: {
-            users: ['%me%'],
-          },
-          write: {
-            users: ['%me%'],
-          },
-        },
-      }
+      })
     );
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
@@ -449,7 +416,7 @@ describe('WorkspaceCreator', () => {
     await waitFor(() => {
       expect(
         getByText(
-          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
+          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace.'
         )
       ).toBeInTheDocument();
       expect(getByText(dataSourcesList[2].title)).toBeInTheDocument();
@@ -462,17 +429,40 @@ describe('WorkspaceCreator', () => {
       expect.objectContaining({
         name: 'test workspace name',
       }),
-      {
+      expect.objectContaining({
         dataConnections: ['id3'],
         dataSources: [],
-        permissions: {
-          library_write: {
-            users: ['%me%'],
-          },
-          write: {
-            users: ['%me%'],
-          },
-        },
+      })
+    );
+    await waitFor(() => {
+      expect(notificationToastsAddSuccess).toHaveBeenCalled();
+    });
+    expect(notificationToastsAddDanger).not.toHaveBeenCalled();
+  });
+
+  it('should not include permissions parameter if permissions not enabled', async () => {
+    const { getByTestId } = render(
+      <WorkspaceCreator isDashboardAdmin={true} isPermissionEnabled={false} />
+    );
+
+    // Ensure workspace create form rendered
+    await waitFor(() => {
+      expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
+    });
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    fireEvent.click(getByTestId('workspaceUseCase-observability'));
+
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'test workspace name',
+      }),
+      {
+        dataConnections: [],
+        dataSources: [],
       }
     );
     await waitFor(() => {
@@ -510,8 +500,8 @@ describe('WorkspaceCreator', () => {
     });
   });
 
-  it('should redirect to workspace use case landing page after created successfully', async () => {
-    const { getByTestId } = render(<WorkspaceCreator />);
+  it('should redirect to workspace use case landing page if permission not enabled', async () => {
+    const { getByTestId } = render(<WorkspaceCreator isPermissionEnabled={false} />);
 
     // Ensure workspace create form rendered
     await waitFor(() => {
@@ -529,4 +519,32 @@ describe('WorkspaceCreator', () => {
     });
     jest.useRealTimers();
   });
+
+  it('should redirect to workspace setting collaborators page if permission enabled', async () => {
+    const { getByTestId } = render(<WorkspaceCreator />);
+    const navigateToCollaboratorsMock = jest.fn();
+    jest
+      .spyOn(workspaceUtilsExports, 'navigateToAppWithinWorkspace')
+      .mockImplementation(navigateToCollaboratorsMock);
+
+    // Ensure workspace create form rendered
+    await waitFor(() => {
+      expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
+    });
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    jest.useFakeTimers();
+    jest.runAllTimers();
+    await waitFor(() => {
+      expect(navigateToCollaboratorsMock).toHaveBeenCalledWith(
+        expect.anything(),
+        'successResult',
+        'workspace_collaborators'
+      );
+    });
+    jest.useRealTimers();
+  });
 });
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
index 9b51ba22d0fe..b2b219ac7864 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
@@ -7,22 +7,34 @@ import React, { useCallback, useState, useMemo } from 'react';
 import { EuiPage, EuiPageBody, EuiPageContent, euiPaletteColorBlind } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { BehaviorSubject } from 'rxjs';
-
 import { useLocation } from 'react-router-dom';
+
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { WorkspaceFormSubmitData, WorkspaceOperationType } from '../workspace_form';
-import { WORKSPACE_DETAIL_APP_ID } from '../../../common/constants';
+import { PermissionModeId } from '../../../../../core/public';
+import {
+  CURRENT_USER_PLACEHOLDER,
+  WORKSPACE_COLLABORATORS_APP_ID,
+  WORKSPACE_DETAIL_APP_ID,
+} from '../../../common/constants';
+import {
+  WorkspaceFormSubmitData,
+  WorkspaceOperationType,
+  WorkspacePermissionItemType,
+  convertPermissionSettingsToPermissions,
+  WorkspacePermissionSetting,
+} from '../workspace_form';
 import { getUseCaseFeatureConfig } from '../../../common/utils';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 import { WorkspaceClient } from '../../workspace_client';
-import { convertPermissionSettingsToPermissions } from '../workspace_form';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { WorkspaceUseCase } from '../../types';
 import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
 import { useFormAvailableUseCases } from '../workspace_form/use_form_available_use_cases';
 import { NavigationPublicPluginStart } from '../../../../../plugins/navigation/public';
 import { DataSourceConnectionType } from '../../../common/types';
+import { navigateToAppWithinWorkspace } from '../utils/workspace';
 import { WorkspaceCreatorForm } from './workspace_creator_form';
+import { optionIdToWorkspacePermissionModesMap } from '../workspace_form/constants';
 
 export interface WorkspaceCreatorProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
@@ -46,8 +58,8 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
     navigationUI: NavigationPublicPluginStart['ui'];
   }>();
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
-
   const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
+
   const { isOnlyAllowEssential, availableUseCases } = useFormAvailableUseCases({
     savedObjects,
     registeredUseCases$,
@@ -73,8 +85,20 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
             features: [getUseCaseFeatureConfig(defaultSelectedUseCase.id)],
           }
         : {}),
+      ...(isPermissionEnabled
+        ? {
+            permissionSettings: [
+              {
+                id: 1,
+                type: WorkspacePermissionItemType.User,
+                userId: CURRENT_USER_PLACEHOLDER,
+                modes: optionIdToWorkspacePermissionModesMap[PermissionModeId.Owner],
+              },
+            ] as WorkspacePermissionSetting[],
+          }
+        : {}),
     };
-  }, [location.search, availableUseCases]);
+  }, [location.search, availableUseCases, isPermissionEnabled]);
 
   const handleWorkspaceFormSubmit = useCallback(
     async (data: WorkspaceFormSubmitData) => {
@@ -102,7 +126,11 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
         result = await workspaceClient.create(attributes, {
           dataSources: selectedDataSourceIds,
           dataConnections: selectedDataConnectionIds,
-          permissions: convertPermissionSettingsToPermissions(permissionSettings),
+          ...(isPermissionEnabled
+            ? {
+                permissions: convertPermissionSettingsToPermissions(permissionSettings),
+              }
+            : {}),
         });
         if (result?.success) {
           notifications?.toasts.addSuccess({
@@ -117,6 +145,14 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
               ?.features[0].id;
             // Redirect page after one second, leave one second time to show create successful toast.
             window.setTimeout(() => {
+              if (isPermissionEnabled) {
+                navigateToAppWithinWorkspace(
+                  { application, http },
+                  newWorkspaceId,
+                  WORKSPACE_COLLABORATORS_APP_ID
+                );
+                return;
+              }
               window.location.href = formatUrlWithWorkspaceId(
                 application.getUrlForApp(useCaseLandingAppId || WORKSPACE_DETAIL_APP_ID, {
                   absolute: true,
@@ -142,7 +178,15 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
         setIsFormSubmitting(false);
       }
     },
-    [notifications?.toasts, http, application, workspaceClient, isFormSubmitting, availableUseCases]
+    [
+      notifications?.toasts,
+      http,
+      application,
+      workspaceClient,
+      isFormSubmitting,
+      availableUseCases,
+      isPermissionEnabled,
+    ]
   );
 
   const isFormReadyToRender =
@@ -177,7 +221,6 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
               savedObjects={savedObjects}
               onSubmit={handleWorkspaceFormSubmit}
               operationType={WorkspaceOperationType.Create}
-              permissionEnabled={isPermissionEnabled}
               dataSourceManagement={dataSourceManagement}
               availableUseCases={availableUseCases}
               defaultValues={defaultWorkspaceFormValues}
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.test.tsx
index 0b17d9adae7e..d27d41e7ef7d 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.test.tsx
@@ -66,6 +66,6 @@ describe('WorkspaceForm', () => {
   it('should not display data source panel when data source is disabled', () => {
     const { queryByText } = setup(true, undefined);
 
-    expect(queryByText('Associate data source')).not.toBeInTheDocument();
+    expect(queryByText('Associate data sources')).not.toBeInTheDocument();
   });
 });
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
index 52e2dd4e840e..89af611784e4 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
@@ -3,24 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useRef } from 'react';
-import {
-  EuiSpacer,
-  EuiForm,
-  EuiText,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiDescribedFormGroup,
-  EuiPanel,
-} from '@elastic/eui';
+import React from 'react';
+import { EuiSpacer, EuiForm, EuiText, EuiFlexItem, EuiFlexGroup, EuiPanel } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
   useWorkspaceForm,
-  WorkspacePermissionSettingPanel,
   WorkspaceUseCase,
   WorkspaceFormErrorCallout,
   SelectDataSourcePanel,
-  usersAndPermissionsCreatePageTitle,
   WorkspaceFormProps,
 } from '../workspace_form';
 
@@ -38,8 +28,6 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
   const {
     application,
     savedObjects,
-    defaultValues,
-    permissionEnabled,
     dataSourceManagement: isDataSourceEnabled,
     availableUseCases,
   } = props;
@@ -53,13 +41,9 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
     handleFormSubmit,
     handleColorChange,
     handleUseCaseChange,
-    setPermissionSettings,
     setSelectedDataSourceConnections,
   } = useWorkspaceForm(props);
 
-  const disabledUserOrGroupInputIdsRef = useRef(
-    defaultValues?.permissionSettings?.map((item) => item.id) ?? []
-  );
   const isDashboardAdmin = application?.capabilities?.dashboards?.isDashboardAdmin ?? false;
 
   return (
@@ -112,7 +96,7 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
                 <EuiText size="xs">
                   {i18n.translate('workspace.creator.form.associateDataSourceDescription', {
                     defaultMessage:
-                      'Add at least one data source that will be available in the workspace. If a selected OpenSearch connection has related Direct Query connections, they will also be available in the workspace.',
+                      'Add at least one data source that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace.',
                   })}
                 </EuiText>
                 <SelectDataSourcePanel
@@ -123,50 +107,8 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
                   showDataSourceManagement={true}
                 />
               </EuiPanel>
-              <EuiSpacer size="s" />
-              <EuiSpacer size="s" />
             </>
           )}
-          {permissionEnabled && (
-            <EuiPanel>
-              <EuiText
-                {...generateRightSidebarScrollProps(RightSidebarScrollField.Collaborators)}
-                size="s"
-              >
-                <h2>{usersAndPermissionsCreatePageTitle}</h2>
-              </EuiText>
-              <EuiText size="xs">
-                {i18n.translate('workspace.creator.form.usersAndPermissionsDescription', {
-                  defaultMessage: 'Manage access and permissions',
-                })}
-              </EuiText>
-              <EuiSpacer size="m" />
-              <EuiDescribedFormGroup
-                title={
-                  <h4 {...generateRightSidebarScrollProps(RightSidebarScrollField.Name)}>
-                    {i18n.translate('workspace.creator.collaborators.panel.fields.name.title', {
-                      defaultMessage: 'Workspace access',
-                    })}
-                  </h4>
-                }
-                description={i18n.translate(
-                  'workspace.creator.collaborators.panel.fields.name.description',
-                  {
-                    defaultMessage:
-                      'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
-                  }
-                )}
-              >
-                <WorkspacePermissionSettingPanel
-                  errors={formErrors.permissionSettings?.fields}
-                  onChange={setPermissionSettings}
-                  permissionSettings={formData.permissionSettings}
-                  disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
-                  data-test-subj={`workspaceForm-permissionSettingPanel`}
-                />
-              </EuiDescribedFormGroup>
-            </EuiPanel>
-          )}
         </EuiForm>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
@@ -175,7 +117,6 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
             <WorkspaceFormSummaryPanel
               formData={formData}
               availableUseCases={availableUseCases}
-              permissionEnabled={permissionEnabled}
               formId={formId}
               application={application}
               isSubmitting={props.isSubmitting}
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx
index cac0c18b0287..9f21fdaeba88 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.test.tsx
@@ -7,10 +7,8 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { WorkspaceFormSummaryPanel, FieldSummaryItem } from './workspace_form_summary_panel';
 import { RightSidebarScrollField } from './utils';
-import { WorkspacePermissionItemType } from '../workspace_form';
 import { applicationServiceMock } from '../../../../../../src/core/public/mocks';
 import { DataSourceConnectionType } from '../../../common/types';
-import { WorkspacePermissionMode } from '../../../common/constants';
 
 describe('WorkspaceFormSummaryPanel', () => {
   const formData = {
@@ -38,25 +36,11 @@ describe('WorkspaceFormSummaryPanel', () => {
         type: '',
         connectionType: DataSourceConnectionType.OpenSearchConnection,
       },
-    ],
-    permissionSettings: [
-      {
-        id: 1,
-        type: WorkspacePermissionItemType.User,
-        userId: 'user1',
-        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
-      },
       {
-        id: 2,
-        type: WorkspacePermissionItemType.Group,
-        group: 'group1',
-        modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
-      },
-      {
-        id: 3,
-        type: WorkspacePermissionItemType.User,
-        userId: 'user2',
-        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+        id: 'data-source-4',
+        name: 'Data Source 4',
+        type: '',
+        connectionType: DataSourceConnectionType.OpenSearchConnection,
       },
     ],
   };
@@ -84,7 +68,6 @@ describe('WorkspaceFormSummaryPanel', () => {
       <WorkspaceFormSummaryPanel
         formData={formData}
         availableUseCases={availableUseCases}
-        permissionEnabled
         formId="id"
         application={applicationMock}
         isSubmitting={false}
@@ -100,12 +83,6 @@ describe('WorkspaceFormSummaryPanel', () => {
     expect(screen.getByText('Data Source 1')).toBeInTheDocument();
     expect(screen.getByText('Data Source 2')).toBeInTheDocument();
     expect(screen.getByText('Data Source 3')).toBeInTheDocument();
-    expect(screen.getByText('user1')).toBeInTheDocument();
-    expect(screen.getByText('Admin')).toBeInTheDocument();
-    expect(screen.getByText('group1')).toBeInTheDocument();
-    expect(screen.getByText('Read only')).toBeInTheDocument();
-    expect(screen.getByText('+1 more')).toBeInTheDocument();
-    expect(screen.queryByText('user2')).toBeNull();
     expect(screen.getByText('Cancel')).toBeInTheDocument();
     expect(screen.getByText('Create workspace')).toBeInTheDocument();
   });
@@ -116,12 +93,10 @@ describe('WorkspaceFormSummaryPanel', () => {
         formData={{
           name: '',
           selectedDataSourceConnections: [],
-          permissionSettings: [],
           features: [],
           useCase: undefined,
         }}
         availableUseCases={availableUseCases}
-        permissionEnabled
         formId="id"
         application={applicationMock}
         isSubmitting={false}
@@ -150,12 +125,6 @@ describe('WorkspaceFormSummaryPanel', () => {
       'workspaceFormRightSideBarSummary-dataSource-Value'
     );
     expect(dataSourcesPlaceholder).toHaveTextContent('—');
-
-    // Permissions placeholder
-    const permissionsPlaceholder = screen.getByTestId(
-      'workspaceFormRightSideBarSummary-collaborators-Value'
-    );
-    expect(permissionsPlaceholder).toHaveTextContent('—');
   });
 
   it('renders all items when expanded and hide some items when click show less', () => {
@@ -163,23 +132,23 @@ describe('WorkspaceFormSummaryPanel', () => {
       <WorkspaceFormSummaryPanel
         formData={formData}
         availableUseCases={availableUseCases}
-        permissionEnabled
         formId="id"
         application={applicationMock}
         isSubmitting={false}
         dataSourceEnabled
       />
     );
-    expect(screen.getByText('user1')).toBeInTheDocument();
-    expect(screen.getByText('group1')).toBeInTheDocument();
-    expect(screen.queryByText('user2')).toBeNull();
+    expect(screen.getByText('Data Source 1')).toBeInTheDocument();
+    expect(screen.getByText('Data Source 2')).toBeInTheDocument();
+    expect(screen.getByText('Data Source 3')).toBeInTheDocument();
+    expect(screen.queryByText('Data Source 4')).toBeNull();
     fireEvent.click(screen.getByText('+1 more'));
 
-    expect(screen.getByText('user2')).toBeInTheDocument();
+    expect(screen.getByText('Data Source 4')).toBeInTheDocument();
     expect(screen.getByText('Show less')).toBeInTheDocument();
 
     fireEvent.click(screen.getByText('Show less'));
-    expect(screen.queryByText('user2')).toBeNull();
+    expect(screen.queryByText('Data Source 4')).toBeNull();
   });
 
   it('should hide "Data sources" if data source not enabled', () => {
@@ -187,7 +156,6 @@ describe('WorkspaceFormSummaryPanel', () => {
       <WorkspaceFormSummaryPanel
         formData={formData}
         availableUseCases={availableUseCases}
-        permissionEnabled
         formId="id"
         application={applicationMock}
         isSubmitting={false}
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
index fd1647ab87e6..27cbca4e802d 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
@@ -22,7 +22,6 @@ import { WorkspaceUseCase } from '../../types';
 import { RightSidebarScrollField, RIGHT_SIDEBAR_SCROLL_KEY } from './utils';
 import { WorkspaceCreateActionPanel } from './workspace_create_action_panel';
 import { WorkspacePermissionMode } from '../../../common/constants';
-import { getPermissionModeName } from '../workspace_form/utils';
 
 const SCROLL_FIELDS = {
   [RightSidebarScrollField.Name]: i18n.translate('workspace.form.summary.panel.name.title', {
@@ -54,11 +53,6 @@ const SCROLL_FIELDS = {
   ),
 };
 
-interface UserAndGroups {
-  key: string;
-  modes: WorkspacePermissionMode[] | undefined;
-}
-
 export const FieldSummaryItem = ({
   field,
   children,
@@ -138,30 +132,9 @@ export const ExpandableTextList = ({
   );
 };
 
-const mapUserAndGroupToList = (userAndGroups: UserAndGroups[]) => {
-  return userAndGroups.map((userAndGroup) => {
-    return (
-      <EuiFlexGroup
-        key={userAndGroup.key}
-        gutterSize="none"
-        justifyContent="spaceBetween"
-        alignItems="center"
-      >
-        <EuiFlexItem grow={false}>{userAndGroup.key}</EuiFlexItem>
-        {userAndGroup.modes && (
-          <EuiFlexItem grow={false}>
-            <em>{getPermissionModeName(userAndGroup.modes)}</em>
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    );
-  });
-};
-
 interface WorkspaceFormSummaryPanelProps {
-  formData: WorkspaceFormDataState;
+  formData: Omit<WorkspaceFormDataState, 'permissionSettings'>;
   availableUseCases: WorkspaceUseCase[];
-  permissionEnabled?: boolean;
   formId: string;
   application: ApplicationStart;
   isSubmitting: boolean;
@@ -171,23 +144,12 @@ interface WorkspaceFormSummaryPanelProps {
 export const WorkspaceFormSummaryPanel = ({
   formData,
   availableUseCases,
-  permissionEnabled,
   formId,
   application,
   isSubmitting,
   dataSourceEnabled,
 }: WorkspaceFormSummaryPanelProps) => {
   const useCase = availableUseCases.find((item) => item.id === formData.useCase);
-  const userAndGroups: UserAndGroups[] = formData.permissionSettings.flatMap((setting) => {
-    const modesExist = 'modes' in setting && !!setting.modes;
-    if ('userId' in setting && !!setting.userId && modesExist) {
-      return [{ key: setting.userId, modes: setting.modes }];
-    }
-    if ('group' in setting && !!setting.group && modesExist) {
-      return [{ key: setting.group, modes: setting.modes }];
-    }
-    return [];
-  });
   const useCaseIcon = useCase?.icon || 'logoOpenSearch';
 
   return (
@@ -229,16 +191,6 @@ export const WorkspaceFormSummaryPanel = ({
           )}
         </FieldSummaryItem>
       )}
-      {permissionEnabled && (
-        <FieldSummaryItem bottomGap={false} field={RightSidebarScrollField.Collaborators}>
-          {userAndGroups.length > 0 && (
-            <ExpandableTextList
-              items={mapUserAndGroupToList(userAndGroups)}
-              collapseDisplayCount={2}
-            />
-          )}
-        </FieldSummaryItem>
-      )}
       <WorkspaceCreateActionPanel
         formData={formData}
         formId={formId}
diff --git a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
index 0b7f2ad1ef6f..76acc578aeae 100644
--- a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <span
-                  color=""
+                  color="#54B399"
                   data-euiicon-type="wsObservability"
                 />
               </div>
@@ -40,40 +40,6 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="euiFlexItem"
-        >
-          <div
-            class="euiText euiText--medium"
-          >
-            <h4>
-              Owners
-            </h4>
-            <p
-              style="display: inline-flex;"
-            >
-              user1
-                
-              <button
-                aria-label="MoveToTeamMember"
-                class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft"
-                title="+1 more"
-              >
-                <span
-                  class="euiBadge__content"
-                >
-                  <span
-                    class="euiBadge__text"
-                  >
-                    +
-                    1
-                     more
-                  </span>
-                </span>
-              </button>
-            </p>
-          </div>
-        </div>
         <div
           class="euiFlexItem"
         >
@@ -84,7 +50,7 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
               Last updated
             </h4>
             <p>
-              Invalid date
+              1000-01-01T00:00:00-04:56
             </p>
           </div>
         </div>
@@ -124,415 +90,360 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
       class="euiSpacer euiSpacer--m"
     />
     <div
-      class="euiPageBody euiPageBody--borderRadiusNone"
+      class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+      role="main"
     >
-      <div
-        data-test-subj="workspaceTabs"
+      <form
+        class="euiForm"
+        id="generated-id"
       >
         <div
-          class="euiTabs euiTabs--small"
-          role="tablist"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
-          <button
-            aria-controls="generated-id"
-            aria-selected="true"
-            class="euiTab euiTab-isSelected"
-            id="details"
-            role="tab"
-            type="button"
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <span
-              class="euiTab__content"
+            <h2
+              class="euiTitle euiTitle--medium"
             >
               Details
-            </span>
-          </button>
-          <button
-            aria-controls="generated-id"
-            aria-selected="false"
-            class="euiTab"
-            id="dataSources"
-            role="tab"
-            type="button"
-          >
-            <span
-              class="euiTab__content"
-            >
-              Data sources
-            </span>
-          </button>
-          <button
-            aria-controls="generated-id"
-            aria-selected="false"
-            class="euiTab"
-            id="collaborators"
-            role="tab"
-            type="button"
+            </h2>
+          </div>
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <span
-              class="euiTab__content"
+            <button
+              class="euiButton euiButton--primary euiButton--small"
+              data-test-subj="workspaceForm-workspaceDetails-edit"
+              style="min-width: 30px;"
+              type="button"
             >
-              Collaborators
-            </span>
-          </button>
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Edit
+                </span>
+              </span>
+            </button>
+          </div>
         </div>
+        <hr
+          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
         <div
-          aria-labelledby="details"
-          id="generated-id"
-          role="tabpanel"
+          class="euiDescribedFormGroup"
+          role="group"
         >
           <div
-            class="euiSpacer euiSpacer--m"
-          />
-          <form
-            class="euiForm"
-            id="generated-id"
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
-              class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+              class="euiFlexItem"
+            >
+              <h3
+                class="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+              >
+                Name
+              </h3>
+            </div>
+            <div
+              class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                class="euiFormRow euiFormRow--compressed"
+                id="generated-id-row"
               >
                 <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                  class="euiFormRow__labelWrapper"
                 >
-                  <h2
-                    class="euiTitle euiTitle--small"
+                  <label
+                    aria-invalid="false"
+                    class="euiFormLabel euiFormRow__label"
+                    for="generated-id"
                   >
-                    Details
-                  </h2>
+                    Name
+                  </label>
                 </div>
                 <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                  class="euiFormRow__fieldWrapper"
                 >
-                  <button
-                    class="euiButton euiButton--primary euiButton--small"
-                    data-test-subj="workspaceForm-workspaceDetails-edit"
-                    type="button"
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--readOnly"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-describedby="generated-id-help-0"
+                        class="euiFieldText euiFieldText--compressed"
+                        data-test-subj="workspaceForm-workspaceDetails-nameInputText"
+                        id="generated-id"
+                        placeholder="Enter a name"
+                        readonly=""
+                        type="text"
+                        value="foo"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help-0"
                   >
                     <span
-                      class="euiButtonContent euiButton__content"
+                      class="euiTextColor euiTextColor--subdued"
                     >
-                      <span
-                        class="euiButton__text"
-                      >
-                        Edit
-                      </span>
+                      37 characters left.
                     </span>
-                  </button>
+                    <br />
+                    Use a unique name for the workspace. Valid characters are a-z, A-Z, 0-9, (), [], _ (underscore), - (hyphen) and (space).
+                  </div>
                 </div>
               </div>
-              <div
-                class="euiText euiText--small"
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiDescribedFormGroup"
+          role="group"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem"
+            >
+              <h3
+                class="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
               >
-                Manage workspace access and permissions.
-              </div>
-              <hr
-                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-              />
+                Description - 
+                <i>
+                  optional
+                </i>
+              </h3>
               <div
-                class="euiDescribedFormGroup"
-                role="group"
+                class="euiText euiText--small euiDescribedFormGroup__description"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  class="euiTextColor euiTextColor--subdued"
                 >
-                  <div
-                    class="euiFlexItem"
-                  >
-                    <h3
-                      class="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                    >
-                      Name
-                    </h3>
-                  </div>
-                  <div
-                    class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
-                  >
-                    <div
-                      class="euiFormRow euiFormRow--compressed"
-                      id="generated-id-row"
-                    >
-                      <div
-                        class="euiFormRow__labelWrapper"
-                      >
-                        <label
-                          aria-invalid="false"
-                          class="euiFormLabel euiFormRow__label"
-                          for="generated-id"
-                        >
-                          Name
-                        </label>
-                      </div>
-                      <div
-                        class="euiFormRow__fieldWrapper"
-                      >
-                        <div
-                          class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--readOnly"
-                        >
-                          <div
-                            class="euiFormControlLayout__childrenWrapper"
-                          >
-                            <input
-                              aria-describedby="generated-id-help-0"
-                              class="euiFieldText euiFieldText--compressed"
-                              data-test-subj="workspaceForm-workspaceDetails-nameInputText"
-                              id="generated-id"
-                              placeholder="Enter a name"
-                              readonly=""
-                              type="text"
-                              value="foo"
-                            />
-                          </div>
-                        </div>
-                        <div
-                          class="euiFormHelpText euiFormRow__text"
-                          id="generated-id-help-0"
-                        >
-                          <span
-                            class="euiTextColor euiTextColor--subdued"
-                          >
-                            37 characters left.
-                          </span>
-                          <br />
-                          Use a unique name for the workspace. Valid characters are a-z, A-Z, 0-9, (), [], _ (underscore), - (hyphen) and (space).
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                  Describe the workspace.
                 </div>
               </div>
+            </div>
+            <div
+              class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+            >
               <div
-                class="euiDescribedFormGroup"
-                role="group"
+                class="euiFormRow euiFormRow--compressed"
+                id="generated-id-row"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  class="euiFormRow__labelWrapper"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <label
+                    aria-invalid="false"
+                    class="euiFormLabel euiFormRow__label"
+                    for="generated-id"
                   >
-                    <h3
-                      class="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                    >
-                      Description - 
-                      <i>
-                        optional
-                      </i>
-                    </h3>
-                    <div
-                      class="euiText euiText--small euiDescribedFormGroup__description"
-                    >
-                      <div
-                        class="euiTextColor euiTextColor--subdued"
-                      >
-                        Describe the workspace.
-                      </div>
-                    </div>
-                  </div>
+                    Description - 
+                    <i>
+                      optional
+                    </i>
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <textarea
+                    aria-describedby="generated-id-help-0"
+                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+                    data-test-subj="workspaceForm-workspaceDetails-descriptionInputText"
+                    id="generated-id"
+                    placeholder="Describe the workspace"
+                    readonly=""
+                    rows="4"
+                  >
+                    this is my foo workspace description
+                  </textarea>
                   <div
-                    class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    class="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help-0"
                   >
-                    <div
-                      class="euiFormRow euiFormRow--compressed"
-                      id="generated-id-row"
+                    <span
+                      class="euiTextColor euiTextColor--subdued"
                     >
-                      <div
-                        class="euiFormRow__labelWrapper"
-                      >
-                        <label
-                          aria-invalid="false"
-                          class="euiFormLabel euiFormRow__label"
-                          for="generated-id"
-                        >
-                          Description - 
-                          <i>
-                            optional
-                          </i>
-                        </label>
-                      </div>
-                      <div
-                        class="euiFormRow__fieldWrapper"
-                      >
-                        <textarea
-                          aria-describedby="generated-id-help-0"
-                          class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
-                          data-test-subj="workspaceForm-workspaceDetails-descriptionInputText"
-                          id="generated-id"
-                          placeholder="Describe the workspace"
-                          readonly=""
-                          rows="4"
-                        >
-                          this is my foo workspace description
-                        </textarea>
-                        <div
-                          class="euiFormHelpText euiFormRow__text"
-                          id="generated-id-help-0"
-                        >
-                          <span
-                            class="euiTextColor euiTextColor--subdued"
-                          >
-                            164 characters left.
-                          </span>
-                        </div>
-                      </div>
-                    </div>
+                      164 characters left.
+                    </span>
                   </div>
                 </div>
               </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiDescribedFormGroup"
+          role="group"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem"
+            >
+              <h3
+                class="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+              >
+                Use case
+              </h3>
+            </div>
+            <div
+              class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+            >
               <div
-                class="euiDescribedFormGroup"
-                role="group"
+                class="euiFormRow euiFormRow--compressed"
+                id="generated-id-row"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  class="euiFormRow__labelWrapper"
                 >
-                  <div
-                    class="euiFlexItem"
+                  <label
+                    aria-invalid="false"
+                    class="euiFormLabel euiFormRow__label"
+                    for="generated-id"
                   >
-                    <h3
-                      class="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                    >
-                      Use case
-                    </h3>
-                  </div>
+                    Use case
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
                   <div
-                    class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
                   >
                     <div
-                      class="euiFormRow euiFormRow--compressed"
-                      id="generated-id-row"
+                      class="euiPopover__anchor"
                     >
-                      <div
-                        class="euiFormRow__labelWrapper"
-                      >
-                        <label
-                          aria-invalid="false"
-                          class="euiFormLabel euiFormRow__label"
-                          for="generated-id"
-                        >
-                          Use case
-                        </label>
-                      </div>
-                      <div
-                        class="euiFormRow__fieldWrapper"
-                      >
+                      <div>
+                        <input
+                          id="generated-id"
+                          type="hidden"
+                          value="observability"
+                        />
                         <div
-                          class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
+                          class="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
-                            class="euiPopover__anchor"
+                            class="euiFormControlLayout__childrenWrapper"
                           >
-                            <div>
-                              <input
-                                id="generated-id"
-                                type="hidden"
-                                value="observability"
-                              />
-                              <div
-                                class="euiFormControlLayout euiFormControlLayout--compressed"
+                            <span
+                              class="euiScreenReaderOnly"
+                              id="generated-id"
+                            >
+                              Select an option: Observability, is selected
+                            </span>
+                            <button
+                              aria-describedby="generated-id-help-0"
+                              aria-haspopup="true"
+                              aria-labelledby="generated-id generated-id"
+                              class="euiSuperSelectControl euiSuperSelectControl--compressed"
+                              disabled=""
+                              readonly=""
+                              type="button"
+                            >
+                              Observability
+                            </button>
+                            <div
+                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                            >
+                              <span
+                                class="euiFormControlLayoutCustomIcon"
                               >
-                                <div
-                                  class="euiFormControlLayout__childrenWrapper"
-                                >
-                                  <span
-                                    class="euiScreenReaderOnly"
-                                    id="generated-id"
-                                  >
-                                    Select an option: Observability, is selected
-                                  </span>
-                                  <button
-                                    aria-describedby="generated-id-help-0"
-                                    aria-haspopup="true"
-                                    aria-labelledby="generated-id generated-id"
-                                    class="euiSuperSelectControl euiSuperSelectControl--compressed"
-                                    disabled=""
-                                    readonly=""
-                                    type="button"
-                                  >
-                                    Observability
-                                  </button>
-                                  <div
-                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                  >
-                                    <span
-                                      class="euiFormControlLayoutCustomIcon"
-                                    >
-                                      <span
-                                        aria-hidden="true"
-                                        class="euiFormControlLayoutCustomIcon__icon"
-                                        data-euiicon-type="arrowDown"
-                                      />
-                                    </span>
-                                  </div>
-                                </div>
-                              </div>
+                                <span
+                                  aria-hidden="true"
+                                  class="euiFormControlLayoutCustomIcon__icon"
+                                  data-euiicon-type="arrowDown"
+                                />
+                              </span>
                             </div>
                           </div>
                         </div>
-                        <div
-                          class="euiFormHelpText euiFormRow__text"
-                          id="generated-id-help-0"
-                        >
-                          You can only choose use cases with more features than the current use case.
-                        </div>
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help-0"
+                  >
+                    You can only choose use cases with more features than the current use case.
+                  </div>
                 </div>
               </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiDescribedFormGroup"
+          role="group"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem"
+            >
+              <h3
+                class="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+              >
+                Workspace icon color
+              </h3>
               <div
-                class="euiDescribedFormGroup"
-                role="group"
+                class="euiText euiText--small euiDescribedFormGroup__description"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  class="euiTextColor euiTextColor--subdued"
                 >
-                  <div
-                    class="euiFlexItem"
+                  The background color of the icon that represents the workspace.
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+            >
+              <div
+                class="euiFormRow euiFormRow--compressed"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    aria-invalid="false"
+                    class="euiFormLabel euiFormRow__label"
+                    for="generated-id"
                   >
-                    <h3
-                      class="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-                    >
-                      Workspace icon color
-                    </h3>
-                    <div
-                      class="euiText euiText--small euiDescribedFormGroup__description"
-                    >
-                      <div
-                        class="euiTextColor euiTextColor--subdued"
-                      >
-                        The background color of the icon that represents the workspace.
-                      </div>
-                    </div>
-                  </div>
+                    Workspace icon color
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
                   <div
-                    class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
+                    class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
                   >
                     <div
-                      class="euiFormRow euiFormRow--compressed"
-                      id="generated-id-row"
+                      class="euiPopover__anchor"
                     >
                       <div
-                        class="euiFormRow__labelWrapper"
-                      >
-                        <label
-                          aria-invalid="false"
-                          class="euiFormLabel euiFormRow__label"
-                          for="generated-id"
-                        >
-                          Workspace icon color
-                        </label>
-                      </div>
-                      <div
-                        class="euiFormRow__fieldWrapper"
+                        class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--readOnly"
                       >
                         <div
-                          class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiColorPicker__popoverAnchor"
+                          class="euiFormControlLayout__childrenWrapper"
                         >
                           <div
-                            class="euiPopover__anchor"
+                            style="color: rgb(84, 179, 153);"
                           >
                             <div
                               class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--readOnly"
@@ -540,39 +451,28 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
-                                <div>
-                                  <div
-                                    class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--readOnly"
+                                <input
+                                  aria-label="Press the down key to open a popover containing color options"
+                                  autocomplete="off"
+                                  class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--compressed"
+                                  data-test-subj="euiColorPickerAnchor workspaceForm-workspaceDetails-colorPicker"
+                                  id="generated-id"
+                                  readonly=""
+                                  type="text"
+                                  value="#54B399"
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
                                   >
-                                    <div
-                                      class="euiFormControlLayout__childrenWrapper"
-                                    >
-                                      <input
-                                        aria-label="Press the down key to open a popover containing color options"
-                                        autocomplete="off"
-                                        class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFieldText--compressed"
-                                        data-test-subj="euiColorPickerAnchor workspaceForm-workspaceDetails-colorPicker"
-                                        id="generated-id"
-                                        placeholder="Transparent"
-                                        readonly=""
-                                        type="text"
-                                        value=""
-                                      />
-                                      <div
-                                        class="euiFormControlLayoutIcons"
-                                      >
-                                        <span
-                                          class="euiFormControlLayoutCustomIcon"
-                                        >
-                                          <span
-                                            aria-hidden="true"
-                                            class="euiFormControlLayoutCustomIcon__icon"
-                                            data-euiicon-type="stopSlash"
-                                          />
-                                        </span>
-                                      </div>
-                                    </div>
-                                  </div>
+                                    <span
+                                      aria-hidden="true"
+                                      class="euiFormControlLayoutCustomIcon__icon"
+                                      data-euiicon-type="swatchInput"
+                                    />
+                                  </span>
                                 </div>
                               </div>
                             </div>
@@ -584,12 +484,9 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-          </form>
+          </div>
         </div>
-      </div>
+      </form>
     </div>
   </div>
 </div>
diff --git a/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.test.tsx b/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.test.tsx
deleted file mode 100644
index ad27f6915349..000000000000
--- a/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.test.tsx
+++ /dev/null
@@ -1,427 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
-import { coreMock } from '../../../../../core/public/mocks';
-import { createOpenSearchDashboardsReactContext } from '../../../../opensearch_dashboards_react/public';
-import { WorkspaceFormProvider, WorkspaceOperationType } from '../workspace_form';
-import {
-  SelectDataSourceDetailPanel,
-  SelectDataSourceDetailPanelProps,
-} from './select_data_source_panel';
-import * as utils from '../../utils';
-import { IntlProvider } from 'react-intl';
-import { DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
-
-const mockCoreStart = coreMock.createStart();
-
-const workspaceObject = {
-  id: 'foo_id',
-  name: 'foo',
-  description: 'this is my foo workspace description',
-  features: ['use-case-observability', 'workspace_detail'],
-};
-
-const dataSources = [
-  {
-    id: 'ds-1',
-    title: 'Data Source 1',
-    auth: {},
-    description: 'ds-1-description',
-    dataSourceEngineType: 'OpenSearch',
-    workspaces: ['foo_id'],
-  },
-  {
-    id: 'ds-2',
-    title: 'Data Source 2',
-    auth: {},
-    description: 'ds-2-description',
-    dataSourceEngineType: 'OpenSearch',
-    workspaces: ['foo_id'],
-  },
-];
-
-const dataSourceConnectionsMock = [
-  {
-    id: 'ds1',
-    name: 'Data Source 1',
-    connectionType: DataSourceConnectionType.OpenSearchConnection,
-    type: 'OpenSearch',
-    relatedConnections: [
-      {
-        id: 'ds1-dqc1',
-        name: 'dqc1',
-        parentId: 'ds1',
-        connectionType: DataSourceConnectionType.DirectQueryConnection,
-        type: 'Amazon S3',
-      },
-    ],
-  },
-  {
-    id: 'ds1-dqc1',
-    name: 'dqc1',
-    parentId: 'ds1',
-    connectionType: DataSourceConnectionType.DirectQueryConnection,
-    type: 'Amazon S3',
-  },
-  {
-    id: 'ds2',
-    name: 'Data Source 2',
-    connectionType: DataSourceConnectionType.OpenSearchConnection,
-    type: 'OpenSearch',
-  },
-];
-
-jest.spyOn(utils, 'getDataSourcesList').mockResolvedValue(dataSources);
-
-const defaultValues = {
-  id: workspaceObject.id,
-  name: workspaceObject.name,
-  features: workspaceObject.features,
-};
-
-const defaultProps = {
-  savedObjects: mockCoreStart.savedObjects,
-  detailTitle: 'Data sources',
-  isDashboardAdmin: true,
-  currentWorkspace: workspaceObject,
-};
-
-const notificationToastsAddSuccess = jest.fn();
-const notificationToastsAddDanger = jest.fn();
-
-const success = jest.fn().mockResolvedValue({
-  success: true,
-});
-const failed = jest.fn().mockResolvedValue({});
-
-const selectDataSourceDetailPanel = ({
-  action,
-  selectedDataSourceConnections,
-  ...props
-}: {
-  action?: Function;
-  selectedDataSourceConnections?: DataSourceConnection[];
-} & Partial<SelectDataSourceDetailPanelProps>) => {
-  const { Provider } = createOpenSearchDashboardsReactContext({
-    ...mockCoreStart,
-    ...{
-      notifications: {
-        ...mockCoreStart.notifications,
-        toasts: {
-          ...mockCoreStart.notifications.toasts,
-          addDanger: notificationToastsAddDanger,
-          addSuccess: notificationToastsAddSuccess,
-        },
-      },
-      workspaceClient: {
-        update: action,
-      },
-    },
-  });
-
-  return (
-    <IntlProvider locale="en">
-      <WorkspaceFormProvider
-        application={mockCoreStart.application}
-        savedObjects={mockCoreStart.savedObjects}
-        operationType={WorkspaceOperationType.Update}
-        permissionEnabled={true}
-        onSubmit={jest.fn()}
-        defaultValues={{ ...defaultValues, selectedDataSourceConnections }}
-        availableUseCases={[]}
-      >
-        <Provider>
-          <SelectDataSourceDetailPanel
-            {...defaultProps}
-            savedObjects={mockCoreStart.savedObjects}
-            chrome={mockCoreStart.chrome}
-            {...props}
-          />
-        </Provider>
-      </WorkspaceFormProvider>
-    </IntlProvider>
-  );
-};
-
-describe('SelectDataSourceDetailPanel', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should show message when no data sources are assigned', async () => {
-    const { getByText, getAllByText } = render(selectDataSourceDetailPanel(defaultProps));
-    await waitFor(() => {
-      expect(getByText('No data sources to display')).toBeInTheDocument();
-      expect(
-        getByText('There are no data sources associated with the workspace.')
-      ).toBeInTheDocument();
-      expect(getAllByText('Associate OpenSearch connections')).toHaveLength(2);
-    });
-  });
-
-  it('should not show assocition button when user is not OSD admin', async () => {
-    const { getByText, queryByText } = render(
-      selectDataSourceDetailPanel({
-        ...defaultProps,
-        isDashboardAdmin: false,
-      })
-    );
-    await waitFor(() => {
-      expect(
-        getByText('Contact your administrator to associate data sources with the workspace.')
-      ).toBeInTheDocument();
-      expect(queryByText('Associate OpenSearch connections')).toBeNull();
-    });
-  });
-
-  it('should not show remove associations button when user is not OSD admin', async () => {
-    const { queryByTestId } = render(
-      selectDataSourceDetailPanel({
-        ...defaultProps,
-        isDashboardAdmin: false,
-      })
-    );
-    await waitFor(() => {
-      expect(queryByTestId('workspace-detail-dataSources-table-action-Remove')).toBeNull();
-    });
-  });
-
-  it('should switch toggle button', async () => {
-    const { getByText } = render(selectDataSourceDetailPanel(defaultProps));
-    await waitFor(() => {
-      const dqcButton = getByText('Direct query connections');
-      expect(dqcButton).toBeInTheDocument();
-      fireEvent.click(dqcButton);
-    });
-  });
-
-  it('should success to associate data sources', async () => {
-    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-      configurable: true,
-      value: 600,
-    });
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
-      configurable: true,
-      value: 600,
-    });
-    jest.spyOn(utils, 'getDataSourcesList').mockResolvedValue([]);
-    jest
-      .spyOn(utils, 'fetchDataSourceConnections')
-      .mockResolvedValueOnce(dataSourceConnectionsMock);
-    const { getByText, getByTestId, getAllByRole } = render(
-      selectDataSourceDetailPanel({
-        ...defaultProps,
-        action: success,
-      })
-    );
-    const associationButton = getAllByRole('button', {
-      name: 'Associate OpenSearch connections',
-    })[0];
-    await waitFor(() => {
-      expect(associationButton).toBeInTheDocument();
-    });
-    fireEvent.click(associationButton);
-    await waitFor(() => {
-      expect(
-        getByText(
-          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
-        )
-      ).toBeInTheDocument();
-      expect(getByText('Data Source 2')).toBeInTheDocument();
-    });
-    fireEvent.click(getByText('Data Source 2'));
-    await waitFor(() => {
-      const button = getByTestId('workspace-detail-dataSources-associateModal-save-button');
-      expect(button).toBeInTheDocument();
-      expect(button).toBeEnabled();
-      fireEvent.click(getByTestId('workspace-detail-dataSources-associateModal-save-button'));
-    });
-    expect(notificationToastsAddSuccess).toHaveBeenCalled();
-  });
-
-  it('should fail to associate data sources', async () => {
-    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-      configurable: true,
-      value: 600,
-    });
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
-      configurable: true,
-      value: 600,
-    });
-    jest.spyOn(utils, 'getDataSourcesList').mockResolvedValue([]);
-    jest
-      .spyOn(utils, 'fetchDataSourceConnections')
-      .mockResolvedValueOnce(dataSourceConnectionsMock);
-    const { getByText, getByTestId, getAllByRole } = render(
-      selectDataSourceDetailPanel({
-        ...defaultProps,
-        action: failed,
-      })
-    );
-    const associationButton = getAllByRole('button', {
-      name: 'Associate OpenSearch connections',
-    })[0];
-    await waitFor(() => {
-      expect(associationButton).toBeInTheDocument();
-    });
-    fireEvent.click(associationButton);
-    await waitFor(() => {
-      expect(
-        getByText(
-          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
-        )
-      ).toBeInTheDocument();
-      expect(getByText('Data Source 2')).toBeInTheDocument();
-    });
-    fireEvent.click(getByText('Data Source 2'));
-    await waitFor(() => {
-      const button = getByTestId('workspace-detail-dataSources-associateModal-save-button');
-      expect(button).toBeInTheDocument();
-      expect(button).toBeEnabled();
-      fireEvent.click(getByTestId('workspace-detail-dataSources-associateModal-save-button'));
-    });
-    expect(notificationToastsAddDanger).toHaveBeenCalled();
-  });
-
-  it('should close associate data sources modal', async () => {
-    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-      configurable: true,
-      value: 600,
-    });
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
-      configurable: true,
-      value: 600,
-    });
-    jest.spyOn(utils, 'getDataSourcesList').mockResolvedValue([]);
-    jest.spyOn(utils, 'fetchDataSourceConnections').mockResolvedValueOnce([]);
-    const { getByText, queryByText, getAllByRole } = render(
-      selectDataSourceDetailPanel(defaultProps)
-    );
-    const associationButton = getAllByRole('button', {
-      name: 'Associate OpenSearch connections',
-    })[0];
-    await waitFor(() => {
-      expect(associationButton).toBeInTheDocument();
-    });
-    fireEvent.click(associationButton);
-    await waitFor(() => {
-      expect(
-        getByText(
-          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
-        )
-      ).toBeInTheDocument();
-    });
-    fireEvent.click(getByText('Close'));
-    expect(
-      queryByText(
-        'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
-      )
-    ).toBeNull();
-  });
-
-  it('should success to remove data associations', async () => {
-    const { getByText, getByTestId, getByRole } = render(
-      selectDataSourceDetailPanel({
-        ...defaultProps,
-        selectedDataSourceConnections: [dataSourceConnectionsMock[0]],
-        action: success,
-      })
-    );
-    await waitFor(() => {
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-    });
-    const removeButton = getByTestId('workspace-detail-dataSources-table-actions-remove');
-    fireEvent.click(removeButton);
-    const confirmButton = getByRole('button', { name: 'Remove 1 association' });
-    expect(confirmButton).toBeInTheDocument();
-    fireEvent.click(confirmButton);
-    await waitFor(() => {
-      expect(notificationToastsAddSuccess).toHaveBeenCalled();
-    });
-  });
-
-  it('should fail to remove data associations', async () => {
-    const { getByText, getByTestId, getByRole } = render(
-      selectDataSourceDetailPanel({
-        ...defaultProps,
-        selectedDataSourceConnections: [dataSourceConnectionsMock[0]],
-        action: failed,
-      })
-    );
-    await waitFor(() => {
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-    });
-    const removeButton = getByTestId('workspace-detail-dataSources-table-actions-remove');
-    fireEvent.click(removeButton);
-    const confirmButton = getByRole('button', { name: 'Remove 1 association' });
-    expect(confirmButton).toBeInTheDocument();
-    fireEvent.click(confirmButton);
-    await waitFor(() => {
-      expect(notificationToastsAddDanger).toHaveBeenCalled();
-    });
-  });
-
-  it('should remove selected data sources successfully', async () => {
-    const { getByText, queryByTestId, getAllByRole, getByRole } = render(
-      selectDataSourceDetailPanel({
-        ...defaultProps,
-        selectedDataSourceConnections: [dataSourceConnectionsMock[0]],
-        action: success,
-      })
-    );
-    await waitFor(() => {
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-    });
-    expect(queryByTestId('workspace-detail-dataSources-table-bulkRemove')).toBeNull();
-    const checkbox = getAllByRole('checkbox')[0];
-
-    // Simulate clicking the checkbox
-    fireEvent.click(checkbox);
-    expect(getByText('Remove 1 association')).toBeInTheDocument();
-    fireEvent.click(getByText('Remove 1 association'));
-    fireEvent.click(getByRole('button', { name: 'Remove 1 association' }));
-    await waitFor(() => {
-      expect(notificationToastsAddSuccess).toHaveBeenCalled();
-    });
-  });
-
-  it('should handle input in the search box', async () => {
-    const { getByText, queryByText } = render(
-      selectDataSourceDetailPanel({
-        ...defaultProps,
-        selectedDataSourceConnections: dataSourceConnectionsMock,
-      })
-    );
-    await waitFor(() => {
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-      expect(getByText('Data Source 2')).toBeInTheDocument();
-    });
-
-    const searchInput = screen.getByPlaceholderText('Search...');
-    // Simulate typing in the search input
-    fireEvent.change(searchInput, { target: { value: 'Data Source 1' } });
-
-    await waitFor(() => {
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-      expect(queryByText('Data Source 2')).toBeNull();
-    });
-  });
-
-  it('should show loading message when loading', async () => {
-    const { queryByText, getByText, rerender } = render(
-      selectDataSourceDetailPanel({ loading: false })
-    );
-    await waitFor(() => {
-      expect(queryByText('Loading data sources...')).not.toBeInTheDocument();
-    });
-
-    rerender(selectDataSourceDetailPanel({ loading: true }));
-    await waitFor(() => {
-      expect(getByText('Loading data sources...')).toBeInTheDocument();
-    });
-  });
-});
diff --git a/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx b/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx
deleted file mode 100644
index 3bb4f612d3a3..000000000000
--- a/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useCallback, useState } from 'react';
-import {
-  EuiText,
-  EuiTitle,
-  EuiPanel,
-  EuiSpacer,
-  EuiFlexItem,
-  EuiTextAlign,
-  EuiFlexGroup,
-  EuiSmallButton,
-  EuiHorizontalRule,
-  EuiLoadingSpinner,
-  EuiButtonGroup,
-  EuiIcon,
-  EuiButtonGroupOptionProps,
-} from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-import { FormattedMessage } from 'react-intl';
-import { useUpdateEffect } from 'react-use';
-import { DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
-import { WorkspaceClient } from '../../workspace_client';
-import { WorkspaceDetailConnectionTable } from './workspace_detail_connection_table';
-import { AssociationDataSourceModal } from './association_data_source_modal';
-import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import {
-  CoreStart,
-  SavedObjectsStart,
-  WorkspaceObject,
-  ChromeStart,
-} from '../../../../../core/public';
-import {
-  convertPermissionSettingsToPermissions,
-  isWorkspacePermissionSetting,
-  useWorkspaceFormContext,
-} from '../workspace_form';
-import { AssociationDataSourceModalMode } from '../../../common/constants';
-
-const toggleButtons: EuiButtonGroupOptionProps[] = [
-  {
-    id: AssociationDataSourceModalMode.OpenSearchConnections,
-    label: i18n.translate('workspace.detail.dataSources.openSearchConnections', {
-      defaultMessage: 'OpenSearch connections',
-    }),
-  },
-  {
-    id: AssociationDataSourceModalMode.DirectQueryConnections,
-    label: i18n.translate('workspace.detail.dataSources.directQueryConnections', {
-      defaultMessage: 'Direct query connections',
-    }),
-  },
-];
-export interface SelectDataSourceDetailPanelProps {
-  savedObjects: SavedObjectsStart;
-  detailTitle: string;
-  isDashboardAdmin: boolean;
-  currentWorkspace: WorkspaceObject;
-  chrome: ChromeStart;
-  loading?: boolean;
-}
-
-export const SelectDataSourceDetailPanel = ({
-  savedObjects,
-  detailTitle,
-  isDashboardAdmin,
-  currentWorkspace,
-  chrome,
-  loading = false,
-}: SelectDataSourceDetailPanelProps) => {
-  const {
-    services: { notifications, workspaceClient, http },
-  } = useOpenSearchDashboards<{ CoreStart: CoreStart; workspaceClient: WorkspaceClient }>();
-  const { formData, setSelectedDataSourceConnections } = useWorkspaceFormContext();
-  const [isLoading, setIsLoading] = useState(loading);
-  const [isVisible, setIsVisible] = useState(false);
-  const [toggleIdSelected, setToggleIdSelected] = useState(toggleButtons[0].id);
-
-  const handleAssignDataSourceConnections = async (
-    newAssignedDataSourceConnections: DataSourceConnection[]
-  ) => {
-    try {
-      setIsLoading(true);
-      setIsVisible(false);
-      const {
-        permissionSettings,
-        selectedDataSourceConnections,
-        useCase,
-        ...attributes
-      } = formData;
-
-      const savedDataSourceConnections = [
-        ...formData.selectedDataSourceConnections,
-        ...newAssignedDataSourceConnections,
-      ];
-
-      const result = await workspaceClient.update(currentWorkspace.id, attributes, {
-        dataSources: savedDataSourceConnections
-          .filter(
-            ({ connectionType }) => connectionType === DataSourceConnectionType.OpenSearchConnection
-          )
-          .map(({ id }) => id),
-        // Todo: Make permissions be an optional parameter when update workspace
-        permissions: convertPermissionSettingsToPermissions(
-          permissionSettings.filter(isWorkspacePermissionSetting)
-        ),
-      });
-      if (result?.success) {
-        notifications?.toasts.addSuccess({
-          title: i18n.translate('workspace.detail.dataSources.assign.success', {
-            defaultMessage:
-              '{numberOfAssignedDataSources, plural, one {The data source has} other {# data sources have}} been associated to the workspace.',
-            values: { numberOfAssignedDataSources: newAssignedDataSourceConnections.length },
-          }),
-        });
-        setSelectedDataSourceConnections(savedDataSourceConnections);
-      } else {
-        throw new Error(result?.error ? result?.error : 'Associate OpenSearch connections failed.');
-      }
-    } catch (error) {
-      notifications?.toasts.addDanger({
-        title: i18n.translate('workspace.detail.dataSources.assign.failed', {
-          defaultMessage:
-            'Failed to associate {numberOfAssignedDataSources, plural, one {the data source} other {# data sources}} to the workspace.',
-          values: { numberOfAssignedDataSources: newAssignedDataSourceConnections.length },
-        }),
-        text: error instanceof Error ? error.message : JSON.stringify(error),
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleUnassignDataSources = useCallback(
-    async (unAssignedDataSources: DataSourceConnection[]) => {
-      try {
-        setIsLoading(true);
-        const {
-          permissionSettings,
-          selectedDataSourceConnections,
-          useCase,
-          ...attributes
-        } = formData;
-        const savedDataSourceConnections = selectedDataSourceConnections.filter(
-          ({ id }) => !unAssignedDataSources.some((item) => item.id === id)
-        );
-
-        const result = await workspaceClient.update(currentWorkspace.id, attributes, {
-          dataSources: savedDataSourceConnections
-            .filter(
-              ({ connectionType }) =>
-                connectionType === DataSourceConnectionType.OpenSearchConnection
-            )
-            .map(({ id }) => id),
-          // Todo: Make permissions be an optional parameter when update workspace
-          permissions: convertPermissionSettingsToPermissions(
-            permissionSettings.filter(isWorkspacePermissionSetting)
-          ),
-        });
-        if (result?.success) {
-          notifications?.toasts.addSuccess({
-            title: i18n.translate('workspace.detail.dataSources.unassign.success', {
-              defaultMessage:
-                '{numberOfUnAssignedDataSources, plural, one {# association has} other {# associations have}} been removed.',
-              values: { numberOfUnAssignedDataSources: unAssignedDataSources.length },
-            }),
-          });
-          setSelectedDataSourceConnections(savedDataSourceConnections);
-        } else {
-          throw new Error(
-            result?.error ? result?.error : 'Remove associated OpenSearch connections failed.'
-          );
-        }
-      } catch (error) {
-        notifications?.toasts.addDanger({
-          title: i18n.translate('workspace.detail.dataSources.unassign.failed', {
-            defaultMessage:
-              'Failed to remove {numberOfUnAssignedDataSources, plural, one {# associated OpenSearch association} other {# associated OpenSearch associations}}.',
-            values: { numberOfUnAssignedDataSources: unAssignedDataSources.length },
-          }),
-          text: error instanceof Error ? error.message : JSON.stringify(error),
-        });
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      currentWorkspace.id,
-      formData,
-      notifications?.toasts,
-      setSelectedDataSourceConnections,
-      workspaceClient,
-    ]
-  );
-
-  const associationButton = (
-    <EuiSmallButton
-      onClick={() => setIsVisible(true)}
-      isLoading={isLoading}
-      data-test-subj="workspace-detail-dataSources-assign-button"
-    >
-      {toggleIdSelected === AssociationDataSourceModalMode.OpenSearchConnections
-        ? i18n.translate('workspace.detail.dataSources.opensearchConnections.assign.button', {
-            defaultMessage: 'Associate OpenSearch connections',
-          })
-        : i18n.translate('workspace.detail.dataSources.directQueryConnections.assign.button', {
-            defaultMessage: 'Associate direct query connections',
-          })}
-    </EuiSmallButton>
-  );
-
-  const loadingMessage = (
-    <div style={{ textAlign: 'center', marginTop: '2rem' }}>
-      <EuiLoadingSpinner size="xl" />
-      <EuiSpacer size="m" />
-      <EuiText>
-        <FormattedMessage
-          id="workspace.detail.dataSources.loading.message"
-          defaultMessage="Loading data sources..."
-        />
-      </EuiText>
-    </div>
-  );
-
-  const noAssociationMessage = (
-    <EuiTextAlign textAlign="center">
-      <EuiIcon type="unlink" size="xl" />
-      <EuiSpacer />
-      <EuiTitle>
-        <h3>
-          <FormattedMessage
-            id="workspace.detail.dataSources.noAssociation.title"
-            defaultMessage="No data sources to display"
-          />
-        </h3>
-      </EuiTitle>
-      <EuiSpacer />
-      <EuiText color="subdued">
-        <FormattedMessage
-          id="workspace.detail.dataSources.noAssociation.message"
-          defaultMessage="There are no data sources associated with the workspace."
-        />
-      </EuiText>
-      {isDashboardAdmin ? (
-        <>
-          <EuiSpacer />
-          {associationButton}
-        </>
-      ) : (
-        <EuiText color="subdued">
-          <FormattedMessage
-            id="workspace.detail.dataSources.noAssociation.noAdmin.message"
-            defaultMessage="Contact your administrator to associate data sources with the workspace."
-          />
-        </EuiText>
-      )}
-    </EuiTextAlign>
-  );
-
-  const renderTableContent = () => {
-    if (isLoading) {
-      return loadingMessage;
-    }
-    if (formData.selectedDataSourceConnections.length === 0) {
-      return noAssociationMessage;
-    }
-    return (
-      <WorkspaceDetailConnectionTable
-        isDashboardAdmin={isDashboardAdmin}
-        connectionType={toggleIdSelected}
-        dataSourceConnections={formData.selectedDataSourceConnections}
-        handleUnassignDataSources={handleUnassignDataSources}
-      />
-    );
-  };
-
-  useUpdateEffect(() => {
-    setIsLoading(loading);
-  }, [loading]);
-
-  return (
-    <EuiPanel>
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="s">
-            <h2>{detailTitle}</h2>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem>
-              <EuiButtonGroup
-                legend="dataSourceGroup"
-                options={toggleButtons}
-                idSelected={toggleIdSelected}
-                onChange={(id) => setToggleIdSelected(id)}
-              />
-            </EuiFlexItem>
-            {isDashboardAdmin && <EuiFlexItem grow={false}>{associationButton}</EuiFlexItem>}
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiHorizontalRule margin="m" />
-      {renderTableContent()}
-      {isVisible && (
-        <AssociationDataSourceModal
-          http={http}
-          notifications={notifications}
-          savedObjects={savedObjects}
-          closeModal={() => setIsVisible(false)}
-          assignedConnections={formData.selectedDataSourceConnections}
-          handleAssignDataSourceConnections={handleAssignDataSourceConnections}
-          mode={toggleIdSelected as AssociationDataSourceModalMode}
-          logos={chrome.logos}
-        />
-      )}
-    </EuiPanel>
-  );
-};
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx
index a92b03e423d0..cd6e692b1815 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx
@@ -29,22 +29,22 @@ describe('WorkspaceBottomBar', () => {
     expect(screen.getByText('2 Unsaved change(s)')).toBeInTheDocument();
     expect(screen.getByText('2 error(s)')).toBeInTheDocument();
     expect(screen.getByText('Discard changes')).toBeInTheDocument();
-    expect(screen.getByText('Save changes')).toBeInTheDocument();
+    expect(screen.getByText('Save')).toBeInTheDocument();
   });
 
   test('disables the save button when there are no changes', () => {
     render(<WorkspaceBottomBar {...defaultProps} numberOfChanges={0} />);
-    const saveButton = screen.getByRole('button', { name: 'Save changes' });
+    const saveButton = screen.getByRole('button', { name: 'Save' });
     expect(saveButton).toBeDisabled();
   });
 
-  test('calls handleResetForm when discard changes button is clicked', () => {
+  test('calls handleResetForm when discard button is clicked', () => {
     render(<WorkspaceBottomBar {...defaultProps} />);
     fireEvent.click(screen.getByText('Discard changes'));
     expect(mockHandleResetForm).toHaveBeenCalled();
   });
 
-  test('calls handleSubmit when save changes button is clicked', () => {
+  test('calls handleSubmit when save button is clicked', () => {
     const handleSubmit = jest.fn();
     render(
       <form id="testForm" onSubmit={handleSubmit}>
@@ -52,24 +52,24 @@ describe('WorkspaceBottomBar', () => {
       </form>
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
 
     // Assuming handleSubmit is called during form submission
     expect(handleSubmit).toHaveBeenCalled();
   });
 
-  it('should disable the "Save changes" button when name exceeds the maximum length', () => {
+  it('should disable the "Save" button when name exceeds the maximum length', () => {
     const longName = 'a'.repeat(MAX_WORKSPACE_NAME_LENGTH + 1);
     render(
       <form id="testForm">
         <WorkspaceBottomBar {...defaultProps} formData={{ name: longName }} />
       </form>
     );
-    const saveChangesButton = screen.getByText('Save changes');
+    const saveChangesButton = screen.getByText('Save');
     expect(saveChangesButton.closest('button')).toBeDisabled();
   });
 
-  it('should disable the "Save changes" button when description exceeds the maximum length', () => {
+  it('should disable the "Save" button when description exceeds the maximum length', () => {
     const longDescription = 'a'.repeat(MAX_WORKSPACE_DESCRIPTION_LENGTH + 1);
     render(
       <form id="testForm">
@@ -79,19 +79,19 @@ describe('WorkspaceBottomBar', () => {
         />
       </form>
     );
-    const saveChangesButton = screen.getByText('Save changes');
+    const saveChangesButton = screen.getByText('Save');
     expect(saveChangesButton.closest('button')).toBeDisabled();
   });
 
-  it('should enable the "Save changes" button when name and description are within the maximum length', () => {
+  it('should enable the "Save" button when name and description are within the maximum length', () => {
     render(<WorkspaceBottomBar {...defaultProps} />);
-    const saveChangesButton = screen.getByText('Save changes');
+    const saveChangesButton = screen.getByText('Save');
     expect(saveChangesButton.closest('button')).not.toBeDisabled();
   });
 
-  it('should enable the "Save changes" button when name and description are empty', () => {
+  it('should enable the "Save" button when name and description are empty', () => {
     render(<WorkspaceBottomBar {...defaultProps} formData={{}} />);
-    const saveChangesButton = screen.getByText('Save changes');
+    const saveChangesButton = screen.getByText('Save');
     expect(saveChangesButton.closest('button')).not.toBeDisabled();
   });
 });
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx
index 11f27d9f8586..4e489cff0e7f 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx
@@ -82,6 +82,7 @@ export const WorkspaceBottomBar = ({
                 color="ghost"
                 onClick={handleResetForm}
                 data-test-subj="workspaceForm-bottomBar-cancelButton"
+                iconGap="s"
               >
                 {i18n.translate('workspace.form.bottomBar.disCardChanges', {
                   defaultMessage: 'Discard changes',
@@ -98,9 +99,12 @@ export const WorkspaceBottomBar = ({
                 data-test-subj="workspaceForm-bottomBar-updateButton"
                 isLoading={isFormSubmitting}
                 isDisabled={saveChangesButtonDisabled}
+                iconType="check"
+                iconGap="s"
+                minWidth="60px"
               >
                 {i18n.translate('workspace.form.bottomBar.saveChanges', {
-                  defaultMessage: 'Save changes',
+                  defaultMessage: 'Save',
                 })}
               </EuiSmallButton>
             </EuiFlexItem>
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
index f6902d427b36..be98fd944939 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
@@ -3,26 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { MemoryRouter } from 'react-router-dom';
-import { PublicAppInfo, WorkspaceObject } from 'opensearch-dashboards/public';
-import { coreMock } from '../../../../../core/public/mocks';
+import { WorkspaceObject } from 'opensearch-dashboards/public';
+import { coreMock, workspacesServiceMock } from '../../../../../core/public/mocks';
 import { createOpenSearchDashboardsReactContext } from '../../../../opensearch_dashboards_react/public';
 import { createMockedRegisteredUseCases$ } from '../../mocks';
 import { WorkspaceDetail } from './workspace_detail';
 import { WorkspaceFormProvider, WorkspaceOperationType } from '../workspace_form';
 import { DataSourceConnectionType } from '../../../common/types';
-import * as utilsExports from '../../utils';
 import { IntlProvider } from 'react-intl';
-import { of } from 'rxjs';
-
-// all applications
-const PublicAPPInfoMap = new Map([
-  ['alerting', { id: 'alerting', title: 'alerting' }],
-  ['home', { id: 'home', title: 'home' }],
-]);
+import { DEFAULT_WORKSPACE } from '../../../common/constants';
 
 const mockCoreStart = coreMock.createStart();
 
@@ -31,8 +24,9 @@ const workspaceObject = {
   name: 'foo',
   description: 'this is my foo workspace description',
   features: ['use-case-observability', 'workspace_detail'],
-  color: '',
+  color: '#54B399',
   reserved: false,
+  lastUpdatedTime: '1000',
   permissions: { write: { users: ['user1', 'user2'] } },
 };
 
@@ -67,13 +61,13 @@ const defaultValues = {
   ],
 };
 
-const createWorkspacesSetupContractMockWithValue = (workspace?: WorkspaceObject) => {
-  const currentWorkspace = workspace ? workspace : workspaceObject;
-  const currentWorkspaceId$ = new BehaviorSubject<string>(currentWorkspace.id);
-  const workspaceList$ = new BehaviorSubject<WorkspaceObject[]>([currentWorkspace]);
-  const currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>(currentWorkspace);
+const createWorkspacesSetupContractMockWithValue = () => {
+  const currentWorkspaceId$ = new BehaviorSubject<string>(workspaceObject.id);
+  const workspaceList$ = new BehaviorSubject<WorkspaceObject[]>([workspaceObject]);
+  const currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>(workspaceObject);
   const initialized$ = new BehaviorSubject<boolean>(true);
   return {
+    ...workspacesServiceMock.createStartContract(),
     currentWorkspaceId$,
     workspaceList$,
     currentWorkspace$,
@@ -85,34 +79,30 @@ const deleteFn = jest.fn().mockReturnValue({
   success: true,
 });
 
+const submitFn = jest.fn();
+const onAppLeaveFn = jest.fn();
+
 const WorkspaceDetailPage = (props: any) => {
-  const workspacesService = props.workspacesService || createWorkspacesSetupContractMockWithValue();
   const values = props.defaultValues || defaultValues;
-  const permissionEnabled = props.permissionEnabled ?? true;
-  const dataSourceManagement =
-    props.dataSourceEnabled !== false
-      ? {
-          ui: {
-            getDataSourceMenu: jest.fn(),
-          },
-        }
-      : undefined;
+  const mockHeaderControl =
+    (props.header as Function) ||
+    (() => {
+      return null;
+    });
 
+  mockCoreStart.uiSettings.set(DEFAULT_WORKSPACE, 'notFoo');
   const { Provider } = createOpenSearchDashboardsReactContext({
     ...mockCoreStart,
     ...{
       application: {
         ...mockCoreStart.application,
-        applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(PublicAPPInfoMap as any),
+        // applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(PublicAPPInfoMap as any),
         capabilities: {
           ...mockCoreStart.application.capabilities,
-          workspaces: {
-            permissionEnabled,
-          },
           dashboards: { isDashboardAdmin: true },
         },
       },
-      workspaces: workspacesService,
+      workspaces: createWorkspacesSetupContractMockWithValue(),
       savedObjects: {
         ...mockCoreStart.savedObjects,
         client: {
@@ -123,17 +113,8 @@ const WorkspaceDetailPage = (props: any) => {
           delete: deleteFn,
         },
       },
-      dataSourceManagement,
       navigationUI: {
-        HeaderControl: ({ controls }) => {
-          if (props.showDeleteModal) {
-            controls?.[0]?.run?.();
-          }
-          return null;
-        },
-      },
-      collaboratorTypes: {
-        getTypes$: jest.fn().mockReturnValue(of([])),
+        HeaderControl: mockHeaderControl,
       },
     },
   });
@@ -148,10 +129,10 @@ const WorkspaceDetailPage = (props: any) => {
           savedObjects={mockCoreStart.savedObjects}
           operationType={WorkspaceOperationType.Update}
           permissionEnabled={true}
-          onSubmit={jest.fn()}
+          onSubmit={submitFn}
           defaultValues={values}
           availableUseCases={[]}
-          onAppLeave={jest.fn()}
+          onAppLeave={onAppLeaveFn}
         >
           <Provider>
             <WorkspaceDetail registeredUseCases$={registeredUseCases$} {...props} />
@@ -192,108 +173,91 @@ describe('WorkspaceDetail', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('default selected tab is Details', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    render(WorkspaceDetailPage({ workspacesService: workspaceService }));
-    expect(document.querySelector('#details')).toHaveClass('euiTab-isSelected');
-    expect(screen.queryByTestId('workspaceTabs')).not.toBeNull();
+  it('should show current workspace information', async () => {
+    const { getByText, getAllByText, getByDisplayValue } = render(WorkspaceDetailPage({}));
+    expect(getAllByText('Observability').length).toEqual(2);
+    expect(getByText(workspaceObject.id)).toBeInTheDocument();
+    expect(getByText('Details')).toBeInTheDocument();
+    expect(getByDisplayValue(workspaceObject.name)).toBeInTheDocument();
+    expect(getByText(workspaceObject.description)).toBeInTheDocument();
+    expect(getByDisplayValue(workspaceObject.color)).toBeInTheDocument();
   });
 
-  it('click on Collaborators tab when permission control enabled', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText } = render(WorkspaceDetailPage({ workspacesService: workspaceService }));
-    fireEvent.click(getByText('Collaborators'));
-    expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected');
+  it('can edit current workspace', async () => {
+    const { getByTestId } = render(WorkspaceDetailPage({}));
+    const editButton = getByTestId('workspaceForm-workspaceDetails-edit');
+    expect(editButton).toBeInTheDocument();
+    fireEvent.click(editButton);
+
+    expect(getByTestId('workspaceForm-workspaceDetails-discardChanges')).toBeInTheDocument();
+
+    const input = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.change(input, {
+      target: { value: 'newName' },
+    });
+
+    const saveButton = getByTestId('workspaceForm-bottomBar-updateButton');
+    expect(saveButton).toBeInTheDocument();
+    fireEvent.click(editButton);
+    waitFor(() => {
+      expect(submitFn).toHaveBeenCalled();
+    });
   });
 
-  it('click on Data sources tab when dataSource enabled', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText } = render(WorkspaceDetailPage({ workspacesService: workspaceService }));
-    fireEvent.click(getByText('Data sources'));
-    expect(document.querySelector('#dataSources')).toHaveClass('euiTab-isSelected');
-    await waitFor(() => {
-      expect(getByText('Loading data sources...')).toBeInTheDocument();
+  it('should show navigate modal when number of changes > 1 and leave current page', async () => {
+    const { getByText, getByTestId } = render(WorkspaceDetailPage({}));
+    fireEvent.click(getByText('Edit'));
+    const input = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.change(input, {
+      target: { value: 'newName' },
     });
+    expect(getByText('1 Unsaved change(s)')).toBeInTheDocument();
+
+    // Leave current page
+    fireEvent(window, new Event('beforeunload'));
+    expect(onAppLeaveFn).toHaveBeenCalled();
   });
 
   it('delete button will been shown at page header', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    const mockHeaderControl = ({ controls }) => {
+      return controls?.[0]?.run?.() ?? null;
+    };
     const { getByText, getByTestId } = render(
       WorkspaceDetailPage({
-        workspacesService: workspaceService,
         showDeleteModal: true,
+        header: mockHeaderControl,
       })
     );
     expect(getByText('Delete workspace')).toBeInTheDocument();
     const input = getByTestId('delete-workspace-modal-input');
     fireEvent.change(input, {
-      target: { value: 'delete' },
+      target: { value: workspaceObject.name },
     });
     const confirmButton = getByTestId('delete-workspace-modal-confirm');
     fireEvent.click(confirmButton);
   });
 
-  it('click on Collaborators tab when permission control and dataSource disabled', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { queryByText } = render(
-      WorkspaceDetailPage({
-        workspacesService: workspaceService,
-        permissionEnabled: false,
-        dataSourceEnabled: false,
-      })
-    );
-    expect(queryByText('Collaborators')).toBeNull();
-    expect(queryByText('Data Sources')).toBeNull();
-  });
-
-  it('click on tab button will show navigate modal when number of changes > 1', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText, getByTestId, queryByText } = render(
-      WorkspaceDetailPage({ workspacesService: workspaceService })
-    );
-    fireEvent.click(getByText('Edit'));
-    expect(getByTestId('workspaceForm-workspaceDetails-discardChanges')).toBeInTheDocument();
-    const input = getByTestId('workspaceForm-workspaceDetails-nameInputText');
-    fireEvent.change(input, {
-      target: { value: 'newName' },
-    });
-    fireEvent.click(getByText('Collaborators'));
-    expect(getByText('Any unsaved changes will be lost.')).toBeInTheDocument();
-    fireEvent.click(getByText('Cancel'));
-    expect(queryByText('Any unsaved changes will be lost.')).toBeNull();
-    fireEvent.click(getByText('Collaborators'));
-    const button = getByText('Confirm');
-    fireEvent.click(button);
-    expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected');
+  it('set default workspace button will been shown at page header', async () => {
+    const mockHeaderControl = ({ controls }) => {
+      return controls?.[1]?.label ?? null;
+    };
+    const { getByText } = render(WorkspaceDetailPage({ header: mockHeaderControl }));
+    expect(getByText('Set as default')).toBeInTheDocument();
   });
 
-  it('click on badge button will navigate to Collaborators tab when number of changes > 0', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText, getByTestId } = render(
-      WorkspaceDetailPage({ workspacesService: workspaceService })
-    );
-    expect(getByText('+1 more')).toBeInTheDocument();
-
-    fireEvent.click(getByText('Edit'));
-    expect(getByTestId('workspaceForm-workspaceDetails-discardChanges')).toBeInTheDocument();
-    const input = getByTestId('workspaceForm-workspaceDetails-nameInputText');
-    fireEvent.change(input, {
-      target: { value: 'newName' },
-    });
-
-    fireEvent.click(getByText('+1 more'));
-    expect(getByText('Any unsaved changes will be lost.')).toBeInTheDocument();
-
-    fireEvent.click(getByText('Confirm'));
-    expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected');
-  });
+  it('Workspace overview button will been shown at page header', async () => {
+    const mockHeaderControlLabel = ({ controls }) => {
+      return controls?.[2]?.label ?? null;
+    };
+    const { getByText } = render(WorkspaceDetailPage({ header: mockHeaderControlLabel }));
+    expect(getByText('Workspace overview')).toBeInTheDocument();
 
-  it('click on badge button will navigate to Collaborators tab when number of changes = 0', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText } = render(WorkspaceDetailPage({ workspacesService: workspaceService }));
-    expect(getByText('+1 more')).toBeInTheDocument();
-    fireEvent.click(getByText('+1 more'));
-    expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected');
+    const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation(jest.fn());
+    const mockHeaderControl = ({ controls }) => {
+      return controls?.[2]?.run?.() ?? null;
+    };
+    render(WorkspaceDetailPage({ header: mockHeaderControl }));
+    expect(windowOpenSpy).toBeCalled();
   });
 
   it('will not render xss content', async () => {
@@ -311,34 +275,4 @@ describe('WorkspaceDetail', () => {
     expect(alertSpy).toBeCalledTimes(0);
     alertSpy.mockRestore();
   });
-
-  it('should show loaded data sources', async () => {
-    jest.spyOn(utilsExports, 'fetchDataSourceConnectionsByDataSourceIds').mockResolvedValue([
-      {
-        id: 'dqc-1',
-        name: 'dqc-1-title',
-        description: 'dqc-1-description',
-        type: 'Amazon S3',
-        parentId: 'ds-1',
-        connectionType: DataSourceConnectionType.DirectQueryConnection,
-      },
-      {
-        id: 'dqc-2',
-        name: 'dqc-1-title',
-        description: 'dqc-1-description',
-        type: 'Amazon S3',
-        parentId: 'ds-1',
-        connectionType: DataSourceConnectionType.DirectQueryConnection,
-      },
-    ]);
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText, getByRole } = render(
-      WorkspaceDetailPage({ workspacesService: workspaceService })
-    );
-    fireEvent.click(getByText('Data sources'));
-    await waitFor(() => {
-      expect(getByText('ds-1-title')).toBeInTheDocument();
-      expect(getByRole('button', { name: '2' })).toBeInTheDocument();
-    });
-  });
 });
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
index e027c7d5f586..b2f0ada5f1a5 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
@@ -4,35 +4,21 @@
  */
 
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-  EuiPage,
-  EuiSpacer,
-  EuiPageBody,
-  EuiPageContent,
-  EuiConfirmModal,
-  EuiTabbedContent,
-} from '@elastic/eui';
+import { EuiPage, EuiSpacer, EuiPageContent } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { useObservable } from 'react-use';
 import { BehaviorSubject, of } from 'rxjs';
-import { useHistory, useLocation } from 'react-router-dom';
 import { WorkspaceUseCase } from '../../types';
-import { WorkspaceDetailForm, useWorkspaceFormContext } from '../workspace_form';
+import { useWorkspaceFormContext } from '../workspace_form';
 import { WorkspaceDetailPanel } from './workspace_detail_panel';
 import { DeleteWorkspaceModal } from '../delete_workspace_modal';
 import { DEFAULT_WORKSPACE, WORKSPACE_LIST_APP_ID } from '../../../common/constants';
 import { cleanWorkspaceId } from '../../../../../core/public/utils';
-import { DetailTab, DetailTabTitles, WorkspaceOperationType } from '../workspace_form/constants';
+import { WorkspaceOperationType } from '../workspace_form/constants';
 import { CoreStart, WorkspaceAttribute } from '../../../../../core/public';
-import {
-  fetchDataSourceConnectionsByDataSourceIds,
-  fulfillRelatedConnections,
-  getFirstUseCaseOfFeatureConfigs,
-  getUseCaseUrl,
-} from '../../utils';
+import { getFirstUseCaseOfFeatureConfigs, getUseCaseUrl } from '../../utils';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
-import { SelectDataSourceDetailPanel } from './select_data_source_panel';
 import { WorkspaceBottomBar } from './workspace_bottom_bar';
 import {
   NavigationPublicPluginStart,
@@ -40,6 +26,7 @@ import {
   TopNavControlDescriptionData,
   TopNavControlIconData,
 } from '../../../../navigation/public';
+import { WorkspaceDetailForm } from './workspace_detail_form';
 
 export interface WorkspaceDetailProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
@@ -74,27 +61,18 @@ export const WorkspaceDetail = (props: WorkspaceDetailPropsWithFormSubmitting) =
     numberOfErrors,
     handleResetForm,
     numberOfChanges,
-    setIsEditing,
     formData,
-    setSelectedDataSourceConnections,
     onAppLeave,
   } = useWorkspaceFormContext();
   const [deletedWorkspace, setDeletedWorkspace] = useState<WorkspaceAttribute | null>(null);
-  const [selectedTabId, setSelectedTabId] = useState<string>(DetailTab.Details);
-  const [modalVisible, setModalVisible] = useState(false);
-  const [tabId, setTabId] = useState<string>(DetailTab.Details);
-  const [isDQCFilled, setIsDQCFilled] = useState(false);
   const [isSettingDefaultWorkspace, setIsSettingDefaultWorkspace] = useState(false);
 
   const availableUseCases = useObservable(props.registeredUseCases$, []);
   const isDashboardAdmin = !!application?.capabilities?.dashboards?.isDashboardAdmin;
   const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
-  const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
   const currentUseCase = availableUseCases.find(
     (useCase) => useCase.id === getFirstUseCaseOfFeatureConfigs(currentWorkspace?.features ?? [])
   );
-  const history = useHistory();
-  const location = useLocation();
   //  default workspace state
   const [isDefaultWorkspace, setIsDefaultWorkspace] = useState<boolean>(false);
 
@@ -102,43 +80,10 @@ export const WorkspaceDetail = (props: WorkspaceDetailPropsWithFormSubmitting) =
     setIsDefaultWorkspace(uiSettings?.get(DEFAULT_WORKSPACE) === currentWorkspace?.id);
   }, [currentWorkspace?.id, uiSettings]);
 
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const tab = params.get('tab');
-    if (tab) {
-      setSelectedTabId(tab);
-    }
-  }, [location.search]);
-
-  useEffect(() => {
-    if (selectedTabId !== DetailTab.DataSources || isDQCFilled || !http || !notifications) {
-      return;
-    }
-    fetchDataSourceConnectionsByDataSourceIds(
-      formData.selectedDataSourceConnections.map(({ id }) => id),
-      http
-    )
-      .then((directQueryConnections) => {
-        setSelectedDataSourceConnections(
-          fulfillRelatedConnections(formData.selectedDataSourceConnections, directQueryConnections)
-        );
-      })
-      .finally(() => {
-        setIsDQCFilled(true);
-      });
-  }, [
-    http,
-    isDQCFilled,
-    selectedTabId,
-    notifications,
-    setSelectedDataSourceConnections,
-    formData.selectedDataSourceConnections,
-  ]);
-
   // When user has unsaved changes and navigates to other page, will show a confirm modal.
   useEffect(() => {
     onAppLeave((actions) => {
-      if (!props.isFormSubmitting && isEditing && numberOfChanges > 0) {
+      if (isEditing && numberOfChanges > 0) {
         return actions.confirm(
           i18n.translate('workspace.detail.navigate.message', {
             defaultMessage: 'Any unsaved changes will be lost.',
@@ -151,7 +96,7 @@ export const WorkspaceDetail = (props: WorkspaceDetailPropsWithFormSubmitting) =
       }
       return actions.default();
     });
-  }, [handleResetForm, isEditing, numberOfChanges, onAppLeave, props.isFormSubmitting]);
+  }, [handleResetForm, isEditing, numberOfChanges, onAppLeave]);
 
   const handleSetDefaultWorkspace = useCallback(
     async (workspace: WorkspaceAttribute) => {
@@ -183,215 +128,119 @@ export const WorkspaceDetail = (props: WorkspaceDetailPropsWithFormSubmitting) =
     return null;
   }
 
-  const useCaseUrl = getUseCaseUrl(currentUseCase, currentWorkspace, application, http);
+  const useCaseUrl = getUseCaseUrl(currentUseCase, currentWorkspace.id, application, http);
 
-  const handleTabClick = (tab: any) => {
-    if (numberOfChanges > 0) {
-      setTabId(tab.id);
-      setModalVisible(true);
-      return;
-    }
-    history.push(`?tab=${tab.id}`);
-    setIsEditing(false);
-    setSelectedTabId(tab.id);
-  };
-
-  const handleBadgeClick = () => {
-    if (selectedTabId !== DetailTab.Collaborators && numberOfChanges > 0) {
-      setTabId(DetailTab.Collaborators);
-      setModalVisible(true);
-      return;
-    }
-    history.push(`?tab=${DetailTab.Collaborators}`);
-    setSelectedTabId(DetailTab.Collaborators);
-  };
+  return (
+    <EuiPage direction="column">
+      {currentWorkspace.description && (
+        <HeaderControl
+          controls={[
+            {
+              description: currentWorkspace.description,
+            } as TopNavControlDescriptionData,
+          ]}
+          setMountPoint={application.setAppDescriptionControls}
+        />
+      )}
+      <HeaderControl
+        controls={[
+          ...(isDashboardAdmin
+            ? [
+                {
+                  run: () => setDeletedWorkspace(currentWorkspace),
+                  color: 'danger',
+                  iconType: 'trash',
+                  ariaLabel: i18n.translate('workspace.detail.delete.button', {
+                    defaultMessage: 'Delete workspace',
+                  }),
+                  testId: 'workspace-detail-delete-button',
+                  controlType: 'icon',
+                  display: 'base',
+                  tooltip: i18n.translate('workspace.detail.delete.button.tooltip', {
+                    defaultMessage: 'Delete workspace',
+                  }),
+                } as TopNavControlIconData,
+              ]
+            : []),
+          isDefaultWorkspace
+            ? ({
+                label: i18n.translate('workspace.detail.defaultWorkspace.badge', {
+                  defaultMessage: 'Default',
+                }),
+                iconType: 'flag',
+                testId: 'workspace-detail-default-workspace-badge',
+                controlType: 'button',
+                isDisabled: true,
+                tooltip: i18n.translate('workspace.detail.defaultWorkspace.badge.tooltip', {
+                  defaultMessage: 'Default workspace',
+                }),
+              } as TopNavControlButtonData)
+            : ({
+                run: () => handleSetDefaultWorkspace(currentWorkspace),
+                label: i18n.translate('workspace.detail.setDefaultWorkspace.button', {
+                  defaultMessage: 'Set as default',
+                }),
+                isLoading: isSettingDefaultWorkspace,
+                testId: 'workspace-detail-set-as-default-button',
+                controlType: 'button',
+                tooltip: i18n.translate('workspace.detail.setDefaultWorkspace.button.tooltip', {
+                  defaultMessage: 'Set as default',
+                }),
+              } as TopNavControlButtonData),
+          {
+            run: () => {
+              window.open(useCaseUrl, '_blank', 'noopener noreferrer');
+            },
+            iconType: 'popout',
+            label: i18n.translate('workspace.detail.WorkspaceOverview.button', {
+              defaultMessage: 'Workspace overview',
+            }),
+            testId: 'workspace-detail-workspace-overview-button',
+            controlType: 'button',
+            iconSide: 'right',
+            tooltip: i18n.translate('workspace.detail.WorkspaceOverview.button.tooltip', {
+              defaultMessage: 'Workspace overview',
+            }),
+          } as TopNavControlButtonData,
+        ]}
+        setMountPoint={application.setAppRightControls}
+      />
 
-  const createDetailTab = (id: DetailTab, detailTitle: string) => ({
-    id,
-    name: detailTitle,
-    content: (
-      <>
-        <EuiSpacer size="m" />
+      <EuiPageContent>
+        <WorkspaceDetailPanel
+          currentUseCase={currentUseCase}
+          currentWorkspace={currentWorkspace}
+          dateFormat={uiSettings.get('dateFormat')}
+        />
+      </EuiPageContent>
+      <EuiSpacer size="m" />
+      <EuiPageContent>
         <WorkspaceDetailForm
           application={application}
           operationType={WorkspaceOperationType.Update}
           savedObjects={savedObjects}
-          detailTab={id}
           dataSourceManagement={dataSourceManagement}
           availableUseCases={availableUseCases}
-          detailTitle={detailTitle}
         />
-      </>
-    ),
-  });
-
-  const detailTabs = [
-    createDetailTab(DetailTab.Details, DetailTabTitles.details),
-    ...(dataSourceManagement
-      ? [
-          {
-            id: DetailTab.DataSources,
-            name: DetailTabTitles.dataSources,
-            content: (
-              <>
-                <EuiSpacer size="m" />
-                <SelectDataSourceDetailPanel
-                  loading={!isDQCFilled}
-                  savedObjects={savedObjects}
-                  detailTitle={DetailTabTitles.dataSources}
-                  isDashboardAdmin={isDashboardAdmin}
-                  currentWorkspace={currentWorkspace}
-                  chrome={chrome}
-                />
-              </>
-            ),
-          },
-        ]
-      : []),
-    ...(isPermissionEnabled
-      ? [createDetailTab(DetailTab.Collaborators, DetailTabTitles.collaborators)]
-      : []),
-  ];
-
-  return (
-    <>
-      <EuiPage direction="column">
-        {currentWorkspace.description && (
-          <HeaderControl
-            controls={[
-              {
-                description: currentWorkspace.description,
-              } as TopNavControlDescriptionData,
-            ]}
-            setMountPoint={application.setAppDescriptionControls}
-          />
-        )}
-        <HeaderControl
-          controls={[
-            ...(isDashboardAdmin
-              ? [
-                  {
-                    run: () => setDeletedWorkspace(currentWorkspace),
-                    color: 'danger',
-                    iconType: 'trash',
-                    ariaLabel: i18n.translate('workspace.detail.delete.button', {
-                      defaultMessage: 'Delete workspace',
-                    }),
-                    testId: 'workspace-detail-delete-button',
-                    controlType: 'icon',
-                    display: 'base',
-                    tooltip: i18n.translate('workspace.detail.delete.button.tooltip', {
-                      defaultMessage: 'Delete workspace',
-                    }),
-                  } as TopNavControlIconData,
-                ]
-              : []),
-            isDefaultWorkspace
-              ? ({
-                  label: i18n.translate('workspace.detail.defaultWorkspace.badge', {
-                    defaultMessage: 'Default',
-                  }),
-                  iconType: 'flag',
-                  testId: 'workspace-detail-default-workspace-badge',
-                  controlType: 'button',
-                  isDisabled: true,
-                  tooltip: i18n.translate('workspace.detail.defaultWorkspace.badge.tooltip', {
-                    defaultMessage: 'Default workspace',
-                  }),
-                } as TopNavControlButtonData)
-              : ({
-                  run: () => handleSetDefaultWorkspace(currentWorkspace),
-                  label: i18n.translate('workspace.detail.setDefaultWorkspace.button', {
-                    defaultMessage: 'Set as default',
-                  }),
-                  isLoading: isSettingDefaultWorkspace,
-                  testId: 'workspace-detail-set-as-default-button',
-                  controlType: 'button',
-                  tooltip: i18n.translate('workspace.detail.setDefaultWorkspace.button.tooltip', {
-                    defaultMessage: 'Set as default',
-                  }),
-                } as TopNavControlButtonData),
-            {
-              run: () => {
-                window.open(useCaseUrl, '_blank', 'noopener noreferrer');
-              },
-              iconType: 'popout',
-              label: i18n.translate('workspace.detail.viewWorkspace.button', {
-                defaultMessage: 'View workspace',
-              }),
-              testId: 'workspace-detail-view-workspace-button',
-              controlType: 'button',
-              iconSide: 'right',
-              tooltip: i18n.translate('workspace.detail.viewWorkspace.button.tooltip', {
-                defaultMessage: 'View workspace',
-              }),
-            } as TopNavControlButtonData,
-          ]}
-          setMountPoint={application.setAppRightControls}
+      </EuiPageContent>
+      {deletedWorkspace && (
+        <DeleteWorkspaceModal
+          selectedWorkspaces={[deletedWorkspace]}
+          typeTextToConfirm={deletedWorkspace.name}
+          onClose={() => setDeletedWorkspace(null)}
+          onDeleteSuccess={() => {
+            window.setTimeout(() => {
+              window.location.assign(
+                cleanWorkspaceId(
+                  application.getUrlForApp(WORKSPACE_LIST_APP_ID, {
+                    absolute: false,
+                  })
+                )
+              );
+            }, 1000);
+          }}
         />
-
-        <EuiPageContent>
-          <WorkspaceDetailPanel
-            handleBadgeClick={handleBadgeClick}
-            currentUseCase={currentUseCase}
-            currentWorkspace={currentWorkspace}
-            dateFormat={uiSettings.get('dateFormat')}
-          />
-        </EuiPageContent>
-        <EuiSpacer size="m" />
-        <EuiPageBody>
-          <EuiTabbedContent
-            data-test-subj="workspaceTabs"
-            tabs={detailTabs}
-            selectedTab={detailTabs[detailTabs.findIndex((tab) => tab.id === selectedTabId)]}
-            onTabClick={handleTabClick}
-            size="s"
-          />
-        </EuiPageBody>
-        {deletedWorkspace && (
-          <DeleteWorkspaceModal
-            selectedWorkspaces={[deletedWorkspace]}
-            typeTextToConfirm={deletedWorkspace.name}
-            onClose={() => setDeletedWorkspace(null)}
-            onDeleteSuccess={() => {
-              window.setTimeout(() => {
-                window.location.assign(
-                  cleanWorkspaceId(
-                    application.getUrlForApp(WORKSPACE_LIST_APP_ID, {
-                      absolute: false,
-                    })
-                  )
-                );
-              }, 1000);
-            }}
-          />
-        )}
-        {modalVisible && (
-          <EuiConfirmModal
-            data-test-subj="workspaceForm-cancelModal"
-            title={i18n.translate('workspace.detail.cancelModal.title', {
-              defaultMessage: 'Navigate away?',
-            })}
-            onCancel={() => setModalVisible(false)}
-            onConfirm={() => {
-              handleResetForm();
-              setModalVisible(false);
-              history.push(`?tab=${tabId}`);
-              setSelectedTabId(tabId);
-            }}
-            cancelButtonText={i18n.translate('workspace.detail.cancelButtonText', {
-              defaultMessage: 'Cancel',
-            })}
-            confirmButtonText={i18n.translate('workspace.detail.confirmButtonText', {
-              defaultMessage: 'Confirm',
-            })}
-          >
-            {i18n.translate('workspace.detail.cancelModal.body', {
-              defaultMessage: 'Any unsaved changes will be lost.',
-            })}
-          </EuiConfirmModal>
-        )}
-      </EuiPage>
+      )}
       {isEditing && (
         <WorkspaceBottomBar
           formId={formId}
@@ -402,6 +251,6 @@ export const WorkspaceDetail = (props: WorkspaceDetailPropsWithFormSubmitting) =
           isFormSubmitting={props.isFormSubmitting}
         />
       )}
-    </>
+    </EuiPage>
   );
 };
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.test.tsx
deleted file mode 100644
index 62e8294010d2..000000000000
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.test.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { fireEvent, render } from '@testing-library/react';
-import { DataSourceConnectionType } from '../../../common/types';
-import React from 'react';
-import { AssociationDataSourceModalMode } from '../../../common/constants';
-import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { WorkspaceDetailConnectionTable } from './workspace_detail_connection_table';
-
-jest.mock('../../../../opensearch_dashboards_react/public', () => ({
-  ...jest.requireActual('../../../../opensearch_dashboards_react/public'),
-  useOpenSearchDashboards: jest.fn(),
-}));
-const handleUnassignDataSources = jest.fn();
-const dataSourceConnectionsMock = [
-  {
-    id: 'ds1',
-    name: 'Data Source 1',
-    description: 'with relationship',
-    connectionType: DataSourceConnectionType.OpenSearchConnection,
-    type: 'OpenSearch',
-    relatedConnections: [
-      {
-        id: 'ds1-dqc1',
-        name: 'dqc1',
-        parentId: 'ds1',
-        connectionType: DataSourceConnectionType.DirectQueryConnection,
-        type: 'Amazon S3',
-      },
-      {
-        id: 'ds1-dqc2',
-        name: 'dqc2',
-        parentId: 'ds1',
-        connectionType: DataSourceConnectionType.DirectQueryConnection,
-        type: 'Prometheus',
-      },
-    ],
-  },
-  {
-    id: 'ds1-dqc1',
-    name: 'dqc1',
-    parentId: 'ds1',
-    connectionType: DataSourceConnectionType.DirectQueryConnection,
-    type: 'Amazon S3',
-  },
-  {
-    id: 'ds1-dqc2',
-    name: 'dqc2',
-    parentId: 'ds1',
-    connectionType: DataSourceConnectionType.DirectQueryConnection,
-    type: 'Prometheus',
-  },
-  {
-    id: 'ds2',
-    name: 'Data Source 2',
-    description: 'with no relationship',
-    connectionType: DataSourceConnectionType.OpenSearchConnection,
-    type: 'OpenSearch',
-  },
-];
-
-describe('WorkspaceDetailConnectionTable', () => {
-  beforeEach(() => {
-    const mockPrepend = jest.fn().mockImplementation((path) => path);
-    const mockHttp = {
-      basePath: {
-        prepend: mockPrepend,
-      },
-    };
-    (useOpenSearchDashboards as jest.Mock).mockImplementation(() => ({
-      services: {
-        http: mockHttp,
-      },
-    }));
-  });
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-  describe('OpenSearch connections', () => {
-    it('renders the table with OpenSearch connections', () => {
-      const { getByText, queryByText } = render(
-        <WorkspaceDetailConnectionTable
-          isDashboardAdmin={true}
-          connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
-          dataSourceConnections={dataSourceConnectionsMock}
-          handleUnassignDataSources={handleUnassignDataSources}
-        />
-      );
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-      expect(getByText('with relationship')).toBeInTheDocument();
-      expect(getByText('2')).toBeInTheDocument();
-
-      expect(getByText('Data Source 2')).toBeInTheDocument();
-      expect(getByText('with no relationship')).toBeInTheDocument();
-
-      expect(queryByText('dqc1')).toBeNull();
-      expect(queryByText('dqc2')).toBeNull();
-    });
-
-    it('should show dqc popover when click the Related connections number ', () => {
-      const { getByText } = render(
-        <WorkspaceDetailConnectionTable
-          isDashboardAdmin={true}
-          connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
-          dataSourceConnections={dataSourceConnectionsMock}
-          handleUnassignDataSources={handleUnassignDataSources}
-        />
-      );
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-      expect(getByText('2')).toBeInTheDocument();
-      fireEvent.click(getByText('2'));
-      expect(getByText('dqc1')).toBeInTheDocument();
-      expect(getByText('dqc2')).toBeInTheDocument();
-    });
-
-    it('should remove selected OpenSearch connections by dashboard admin', () => {
-      const { getByText, queryByTestId, getAllByRole, getByRole } = render(
-        <WorkspaceDetailConnectionTable
-          isDashboardAdmin={true}
-          connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
-          dataSourceConnections={dataSourceConnectionsMock}
-          handleUnassignDataSources={handleUnassignDataSources}
-        />
-      );
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-      expect(queryByTestId('workspace-detail-dataSources-table-bulkRemove')).toBeNull();
-      const checkbox = getAllByRole('checkbox');
-      expect(checkbox.length).toBeGreaterThan(3);
-
-      // Simulate clicking the checkbox
-      fireEvent.click(checkbox[0]);
-      expect(getByText('Remove 2 associations')).toBeInTheDocument();
-      fireEvent.click(getByText('Remove 2 associations'));
-      fireEvent.click(getByRole('button', { name: 'Remove 2 associations' }));
-      expect(handleUnassignDataSources).toHaveBeenCalled();
-    });
-
-    it('should remove single OpenSearch connections by dashboard admin', () => {
-      const { queryAllByTestId, getByText, getByRole } = render(
-        <WorkspaceDetailConnectionTable
-          isDashboardAdmin={true}
-          connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
-          dataSourceConnections={dataSourceConnectionsMock}
-          handleUnassignDataSources={handleUnassignDataSources}
-        />
-      );
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-      const buttons = queryAllByTestId('workspace-detail-dataSources-table-actions-remove');
-      expect(buttons).toHaveLength(2);
-
-      fireEvent.click(buttons[0]);
-      fireEvent.click(getByRole('button', { name: 'Cancel' }));
-      fireEvent.click(buttons[0]);
-      fireEvent.click(getByRole('button', { name: 'Remove 1 association' }));
-      expect(handleUnassignDataSources).toHaveBeenCalled();
-    });
-
-    it('should hide remove action iif user is not dashboard admin', () => {
-      const { queryByText, queryByTestId, getAllByRole } = render(
-        <WorkspaceDetailConnectionTable
-          isDashboardAdmin={false}
-          connectionType={AssociationDataSourceModalMode.OpenSearchConnections}
-          dataSourceConnections={dataSourceConnectionsMock}
-          handleUnassignDataSources={handleUnassignDataSources}
-        />
-      );
-      expect(queryByText('Action')).toBeNull();
-      expect(queryByTestId('workspace-detail-dataSources-table-actions-remove')).toBeNull();
-
-      const checkbox = getAllByRole('checkbox');
-      expect(checkbox[0]).toBeDisabled();
-    });
-  });
-
-  describe('Direct query connections', () => {
-    it('renders the table with Direct query connections', () => {
-      const { getByText, queryByText, getByTestId } = render(
-        <WorkspaceDetailConnectionTable
-          isDashboardAdmin={true}
-          connectionType={AssociationDataSourceModalMode.DirectQueryConnections}
-          dataSourceConnections={dataSourceConnectionsMock}
-          handleUnassignDataSources={handleUnassignDataSources}
-        />
-      );
-      expect(getByText('Data Source 1')).toBeInTheDocument();
-      expect(getByText('with relationship')).toBeInTheDocument();
-      expect(getByText('2')).toBeInTheDocument();
-
-      expect(queryByText('Data Source 2')).toBeNull();
-      expect(queryByText('dqc1')).toBeNull();
-      expect(queryByText('dqc2')).toBeNull();
-
-      const expandButton = getByTestId('workspace-detail-dataSources-table-dqc-ds1-expand-button');
-      expect(expandButton).toBeInTheDocument();
-      fireEvent.click(expandButton);
-      expect(getByText('dqc1')).toBeInTheDocument();
-      expect(getByText('dqc2')).toBeInTheDocument();
-      fireEvent.click(expandButton);
-      expect(queryByText('dqc1')).toBeNull();
-      expect(queryByText('dqc2')).toBeNull();
-    });
-  });
-});
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.tsx
deleted file mode 100644
index 22ee2afb64b9..000000000000
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
-import { EuiConfirmModal, EuiInMemoryTable, EuiSearchBarProps, EuiSmallButton } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-import { DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
-import { AssociationDataSourceModalMode } from '../../../common/constants';
-import { DataSourceConnectionTable } from '../workspace_form';
-
-interface WorkspaceDetailConnectionTableProps {
-  isDashboardAdmin: boolean;
-  connectionType: string;
-  dataSourceConnections: DataSourceConnection[];
-  handleUnassignDataSources: (dataSources: DataSourceConnection[]) => void;
-}
-
-export const WorkspaceDetailConnectionTable = ({
-  isDashboardAdmin,
-  connectionType,
-  dataSourceConnections,
-  handleUnassignDataSources,
-}: WorkspaceDetailConnectionTableProps) => {
-  const [selectedItems, setSelectedItems] = useState<DataSourceConnection[]>([]);
-  const [modalVisible, setModalVisible] = useState(false);
-  const tableRef = useRef<EuiInMemoryTable<DataSourceConnection>>();
-
-  useEffect(() => {
-    // Reset selected items when connectionType changes
-    setSelectedItems([]);
-  }, [connectionType]);
-
-  const openSearchConnections = useMemo(() => {
-    return dataSourceConnections.filter((dsc) =>
-      connectionType === AssociationDataSourceModalMode.OpenSearchConnections
-        ? dsc.connectionType === DataSourceConnectionType.OpenSearchConnection
-        : dsc.connectionType === DataSourceConnectionType.DataConnection ||
-          (dsc?.relatedConnections && dsc.relatedConnections?.length > 0)
-    );
-  }, [connectionType, dataSourceConnections]);
-
-  const renderToolsLeft = useCallback(() => {
-    return selectedItems.length > 0 && !modalVisible
-      ? [
-          <EuiSmallButton
-            color="danger"
-            onClick={() => setModalVisible(true)}
-            data-test-subj="workspace-detail-dataSources-table-bulkRemove"
-          >
-            {i18n.translate('workspace.detail.dataSources.table.remove.button', {
-              defaultMessage:
-                'Remove {numberOfSelect, plural, one {# association} other {# associations}}',
-              values: { numberOfSelect: selectedItems.length },
-            })}
-          </EuiSmallButton>,
-        ]
-      : [];
-  }, [selectedItems, modalVisible]);
-
-  const search: EuiSearchBarProps = {
-    toolsLeft: renderToolsLeft(),
-    box: {
-      incremental: true,
-    },
-    filters: [
-      {
-        type: 'field_value_selection',
-        field: 'type',
-        name: 'Type',
-        multiSelect: 'or',
-        options: Array.from(
-          new Set(openSearchConnections.map(({ type }) => type).filter(Boolean))
-        ).map((type) => ({
-          value: type!,
-          name: type!,
-        })),
-      },
-    ],
-  };
-
-  return (
-    <>
-      {
-        <DataSourceConnectionTable
-          isDashboardAdmin={isDashboardAdmin}
-          dataSourceConnections={openSearchConnections}
-          connectionType={connectionType}
-          onUnlinkDataSource={(item) => {
-            setSelectedItems([item]);
-            setModalVisible(true);
-          }}
-          onSelectionChange={setSelectedItems}
-          tableProps={{
-            search,
-            pagination: {
-              initialPageSize: 10,
-              pageSizeOptions: [10, 20, 30],
-            },
-          }}
-          /* Unmount table after connection type */
-          key={connectionType}
-          ref={tableRef}
-        />
-      }
-      {modalVisible && (
-        <EuiConfirmModal
-          data-test-subj="workspaceForm-cancelModal"
-          title={i18n.translate('workspace.detail.dataSources.modal.title', {
-            defaultMessage:
-              'Remove {numberOfSelect, plural, one {# association} other {# associations}}',
-            values: { numberOfSelect: selectedItems.length },
-          })}
-          onCancel={() => {
-            setModalVisible(false);
-            tableRef.current?.setSelection([]);
-          }}
-          onConfirm={() => {
-            setModalVisible(false);
-            handleUnassignDataSources(selectedItems);
-          }}
-          cancelButtonText={i18n.translate('workspace.detail.dataSources.modal.cancelButton', {
-            defaultMessage: 'Cancel',
-          })}
-          confirmButtonText={i18n.translate('workspace.detail.dataSources.Modal.confirmButton', {
-            defaultMessage:
-              'Remove {numberOfSelect, plural, one {# association} other {# associations}}',
-            values: { numberOfSelect: selectedItems.length },
-          })}
-          buttonColor="danger"
-          defaultFocusedButton="confirm"
-        />
-      )}
-    </>
-  );
-};
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail_form.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_form.tsx
new file mode 100644
index 000000000000..21be1b673602
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_form.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiSpacer,
+  EuiForm,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiSmallButton,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+
+import { i18n } from '@osd/i18n';
+import { WorkspaceFormProps } from '../workspace_form/types';
+import { WorkspaceFormErrorCallout } from '../workspace_form/workspace_form_error_callout';
+import { useWorkspaceFormContext } from '../workspace_form/workspace_form_context';
+import { WorkspaceDetailFormContent } from './workspace_detail_form_content';
+
+export const WorkspaceDetailForm = (props: Omit<WorkspaceFormProps, 'onAppLeave'>) => {
+  const { availableUseCases } = props;
+  const {
+    formId,
+    isEditing,
+    formErrors,
+    setIsEditing,
+    numberOfErrors,
+    handleResetForm,
+    handleFormSubmit,
+  } = useWorkspaceFormContext();
+
+  return (
+    <EuiForm
+      id={formId}
+      onSubmit={(event) => {
+        handleFormSubmit(event);
+      }}
+      component="form"
+    >
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="m">
+            <h2>
+              {i18n.translate('workspace.detail.form.title', {
+                defaultMessage: 'Details',
+              })}
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {isEditing ? (
+            <EuiSmallButton
+              onClick={handleResetForm}
+              data-test-subj="workspaceForm-workspaceDetails-discardChanges"
+            >
+              {i18n.translate('workspace.detail.button.discardChanges', {
+                defaultMessage: 'Discard changes',
+              })}
+            </EuiSmallButton>
+          ) : (
+            <EuiSmallButton
+              onClick={() => setIsEditing((prevIsEditing) => !prevIsEditing)}
+              data-test-subj="workspaceForm-workspaceDetails-edit"
+              minWidth="30px"
+            >
+              {i18n.translate('workspace.detail.button.edit', {
+                defaultMessage: 'Edit',
+              })}
+            </EuiSmallButton>
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiHorizontalRule margin="m" />
+      {numberOfErrors > 0 && (
+        <>
+          <WorkspaceFormErrorCallout errors={formErrors} />
+          <EuiSpacer />
+        </>
+      )}
+      <WorkspaceDetailFormContent availableUseCases={availableUseCases} />
+    </EuiForm>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_form_content.tsx
similarity index 89%
rename from src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx
rename to src/plugins/workspace/public/components/workspace_detail/workspace_detail_form_content.tsx
index 3aa957592a59..ad797641a0cd 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_form_content.tsx
@@ -18,25 +18,25 @@ import {
   detailsColorHelpText,
   detailsDescriptionIntroduction,
   detailsUseCaseHelpText,
-} from './constants';
+} from '../workspace_form/constants';
 import { CoreStart } from '../../../../../core/public';
 import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
 import { DEFAULT_NAV_GROUPS } from '../../../../../core/public';
-import { useWorkspaceFormContext } from './workspace_form_context';
+import { useWorkspaceFormContext } from '../workspace_form/workspace_form_context';
 import { WorkspaceUseCase as WorkspaceUseCaseObject } from '../../types';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { WorkspaceNameField } from './fields/workspace_name_field';
-import { WorkspaceDescriptionField } from './fields/workspace_description_field';
+import { WorkspaceNameField } from '../workspace_form/fields/workspace_name_field';
+import { WorkspaceDescriptionField } from '../workspace_form/fields/workspace_description_field';
 
-interface WorkspaceDetailFormDetailsProps {
+interface WorkspaceDetailFormContentProps {
   availableUseCases: Array<
     Pick<WorkspaceUseCaseObject, 'id' | 'title' | 'description' | 'systematic'>
   >;
 }
 
-export const WorkspaceDetailFormDetails = ({
+export const WorkspaceDetailFormContent = ({
   availableUseCases,
-}: WorkspaceDetailFormDetailsProps) => {
+}: WorkspaceDetailFormContentProps) => {
   const {
     setName,
     formData,
@@ -108,6 +108,7 @@ export const WorkspaceDetailFormDetails = ({
           helpText={detailsUseCaseHelpText}
         >
           <EuiCompressedSuperSelect
+            hasDividers={true}
             options={options}
             valueOfSelected={value}
             onChange={(id) => {
@@ -129,6 +130,7 @@ export const WorkspaceDetailFormDetails = ({
           error={formErrors.color?.message}
         >
           <EuiCompressedColorPicker
+            mode="swatch"
             color={formData.color}
             onChange={handleColorChange}
             readOnly={!isEditing}
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail_panel.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_panel.tsx
index 009d47eaf45c..1530a3b10bec 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_panel.tsx
@@ -4,29 +4,16 @@
  */
 
 import React from 'react';
-import {
-  EuiText,
-  EuiCopy,
-  EuiBadge,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiButtonIcon,
-  EuiIcon,
-} from '@elastic/eui';
+import { EuiText, EuiCopy, EuiFlexItem, EuiFlexGroup, EuiButtonIcon, EuiIcon } from '@elastic/eui';
 import moment from 'moment';
 import { i18n } from '@osd/i18n';
 import { WorkspaceUseCase } from '../../types';
 import { WorkspaceObject } from '../../../../../core/public';
-import { WorkspaceAttributeWithPermission } from '../../../../../core/types';
 
 const detailUseCase = i18n.translate('workspace.detail.useCase', {
   defaultMessage: 'Use case',
 });
 
-const detailOwners = i18n.translate('workspace.detail.owners', {
-  defaultMessage: 'Owners',
-});
-
 const detailLastUpdated = i18n.translate('workspace.detail.lastUpdated', {
   defaultMessage: 'Last updated',
 });
@@ -35,24 +22,16 @@ const detailID = i18n.translate('workspace.detail.id', {
   defaultMessage: 'ID',
 });
 
-function getOwners(currentWorkspace: WorkspaceAttributeWithPermission) {
-  const { groups = [], users = [] } = currentWorkspace?.permissions?.write || {};
-  return [...groups, ...users];
-}
-
 interface WorkspaceDetailPanelProps {
-  handleBadgeClick: () => void;
   currentUseCase: WorkspaceUseCase | undefined;
   currentWorkspace: WorkspaceObject;
   dateFormat: string;
 }
 export const WorkspaceDetailPanel = ({
   currentUseCase,
-  handleBadgeClick,
   currentWorkspace,
   dateFormat,
 }: WorkspaceDetailPanelProps) => {
-  const owners = getOwners(currentWorkspace);
   const formatDate = (lastUpdatedTime: string) => {
     return moment(lastUpdatedTime).format(dateFormat);
   };
@@ -74,23 +53,6 @@ export const WorkspaceDetailPanel = ({
           )}
         </EuiText>
       </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiText>
-          <h4>{detailOwners}</h4>
-          <p style={{ display: 'inline-flex' }}>
-            {owners?.at(0)}&nbsp;&nbsp;
-            {owners && owners.length > 1 && (
-              <EuiBadge
-                onClick={handleBadgeClick}
-                onClickAriaLabel="MoveToTeamMember"
-                color="hollow"
-              >
-                +{owners?.length - 1} more
-              </EuiBadge>
-            )}
-          </p>
-        </EuiText>
-      </EuiFlexItem>
       <EuiFlexItem>
         <EuiText>
           <h4>{detailLastUpdated}</h4>
diff --git a/src/plugins/workspace/public/components/workspace_detail_app.tsx b/src/plugins/workspace/public/components/workspace_detail_app.tsx
index a393026552a5..7304c4d19a47 100644
--- a/src/plugins/workspace/public/components/workspace_detail_app.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail_app.tsx
@@ -20,8 +20,6 @@ import {
 } from './workspace_form';
 import { DataSourceConnectionType } from '../../common/types';
 import { WorkspaceClient } from '../workspace_client';
-import { formatUrlWithWorkspaceId } from '../../../../core/public/utils';
-import { WORKSPACE_DETAIL_APP_ID } from '../../common/constants';
 import { getDataSourcesList, mergeDataSourcesWithConnections } from '../utils';
 import { WorkspaceAttributeWithPermission } from '../../../../core/types';
 
@@ -71,7 +69,7 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailPropsWithOnAppLeave) =>
     chrome?.setBreadcrumbs([
       {
         text: i18n.translate('workspace.detail.title', {
-          defaultMessage: 'Workspace settings',
+          defaultMessage: 'Workspace details',
         }),
       },
     ]);
@@ -92,7 +90,7 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailPropsWithOnAppLeave) =>
   }, [currentWorkspace, savedObjects, http, notifications]);
 
   const handleWorkspaceFormSubmit = useCallback(
-    async (data: WorkspaceFormSubmitData, refresh?: boolean) => {
+    async (data: WorkspaceFormSubmitData) => {
       let result;
       if (isFormSubmitting) {
         return;
@@ -121,28 +119,15 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailPropsWithOnAppLeave) =>
           dataSources: selectedDataSourceIds,
           permissions: convertPermissionSettingsToPermissions(permissionSettings),
         });
+        setIsFormSubmitting(false);
         if (result?.success) {
           notifications?.toasts.addSuccess({
             title: i18n.translate('workspace.update.success', {
               defaultMessage: 'Update workspace successfully',
             }),
           });
-          setIsFormSubmitting(false);
-          if (application && http && refresh) {
-            // Redirect page after one second, leave one second time to show update successful toast.
-            window.setTimeout(() => {
-              window.location.href = formatUrlWithWorkspaceId(
-                application.getUrlForApp(WORKSPACE_DETAIL_APP_ID, {
-                  absolute: true,
-                }),
-                currentWorkspace.id,
-                http.basePath
-              );
-            }, 1000);
-          }
-          return;
+          return result;
         } else {
-          setIsFormSubmitting(false);
           throw new Error(result?.error ? result?.error : 'update workspace failed');
         }
       } catch (error) {
@@ -156,7 +141,7 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailPropsWithOnAppLeave) =>
         return;
       }
     },
-    [isFormSubmitting, currentWorkspace, notifications?.toasts, workspaceClient, application, http]
+    [isFormSubmitting, currentWorkspace, notifications?.toasts, workspaceClient]
   );
 
   if (!workspaces || !application || !http || !savedObjects || !currentWorkspaceFormData) {
diff --git a/src/plugins/workspace/public/components/workspace_form/__snapshots__/add_collaborator_button.test.tsx.snap b/src/plugins/workspace/public/components/workspace_form/__snapshots__/add_collaborator_button.test.tsx.snap
index 98482f3f71b1..33aaf83531e2 100644
--- a/src/plugins/workspace/public/components/workspace_form/__snapshots__/add_collaborator_button.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_form/__snapshots__/add_collaborator_button.test.tsx.snap
@@ -19,17 +19,21 @@ Object {
             type="button"
           >
             <span
-              class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <span
                 class="euiButtonContent__icon"
                 color="inherit"
-                data-euiicon-type="arrowDown"
+                data-euiicon-type="plusInCircle"
               />
               <span
                 class="euiButton__text"
               >
                 Add collaborators
+                  
+                <span
+                  data-euiicon-type="arrowDown"
+                />
               </span>
             </span>
           </button>
@@ -52,17 +56,21 @@ Object {
           type="button"
         >
           <span
-            class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+            class="euiButtonContent euiButton__content"
           >
             <span
               class="euiButtonContent__icon"
               color="inherit"
-              data-euiicon-type="arrowDown"
+              data-euiicon-type="plusInCircle"
             />
             <span
               class="euiButton__text"
             >
               Add collaborators
+                
+              <span
+                data-euiicon-type="arrowDown"
+              />
             </span>
           </span>
         </button>
diff --git a/src/plugins/workspace/public/components/workspace_form/__snapshots__/workspace_collaborator_table.test.tsx.snap b/src/plugins/workspace/public/components/workspace_form/__snapshots__/workspace_collaborator_table.test.tsx.snap
index caaa8456ecdb..5b2f52bb91b5 100644
--- a/src/plugins/workspace/public/components/workspace_form/__snapshots__/workspace_collaborator_table.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_form/__snapshots__/workspace_collaborator_table.test.tsx.snap
@@ -7,20 +7,20 @@ Object {
     <div>
       <div>
         <div
-          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
         >
           <div
             class="euiFlexItem euiSearchBar__searchHolder"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                  class="euiFieldSearch euiFieldSearch--fullWidth"
+                  class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                   placeholder="Search..."
                   type="search"
                   value=""
@@ -55,7 +55,7 @@ Object {
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
                     type="button"
                   >
                     <span
@@ -89,7 +89,7 @@ Object {
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
                     type="button"
                   >
                     <span
@@ -119,7 +119,7 @@ Object {
           </div>
         </div>
         <div
-          class="euiSpacer euiSpacer--l"
+          class="euiSpacer euiSpacer--m"
         />
         <div
           class="euiBasicTable"
@@ -160,7 +160,7 @@ Object {
               </div>
             </div>
             <table
-              class="euiTable euiTable--responsive"
+              class="euiTable euiTable--compressed euiTable--responsive"
               id="__table_generated-id"
               tabindex="-1"
             >
@@ -197,6 +197,7 @@ Object {
                     data-test-subj="tableHeaderCell_primaryId_0"
                     role="columnheader"
                     scope="col"
+                    style="width: 30%;"
                   >
                     <span
                       class="euiTableCellContent"
@@ -214,6 +215,7 @@ Object {
                     data-test-subj="tableHeaderCell_displayedType_1"
                     role="columnheader"
                     scope="col"
+                    style="width: 30%;"
                   >
                     <span
                       class="euiTableCellContent"
@@ -231,6 +233,7 @@ Object {
                     data-test-subj="tableHeaderCell_accessLevel_2"
                     role="columnheader"
                     scope="col"
+                    style="width: 30%;"
                   >
                     <span
                       class="euiTableCellContent"
@@ -248,9 +251,10 @@ Object {
                     data-test-subj="tableHeaderCell_Actions_3"
                     role="columnheader"
                     scope="col"
+                    style="width: 10%;"
                   >
                     <span
-                      class="euiTableCellContent"
+                      class="euiTableCellContent euiTableCellContent--alignRight"
                     >
                       <span
                         class="euiTableCellContent__text"
@@ -291,6 +295,7 @@ Object {
                   </td>
                   <td
                     class="euiTableRowCell"
+                    style="width: 30%;"
                   >
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -309,6 +314,7 @@ Object {
                   </td>
                   <td
                     class="euiTableRowCell"
+                    style="width: 30%;"
                   >
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -316,17 +322,14 @@ Object {
                       Type
                     </div>
                     <div
-                      class="euiTableCellContent"
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      <span
-                        class="euiTableCellContent__text"
-                      >
-                        User
-                      </span>
+                      User
                     </div>
                   </td>
                   <td
                     class="euiTableRowCell"
+                    style="width: 30%;"
                   >
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -334,17 +337,14 @@ Object {
                       Access level
                     </div>
                     <div
-                      class="euiTableCellContent"
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
                     >
-                      <span
-                        class="euiTableCellContent__text"
-                      >
-                        Admin
-                      </span>
+                      Admin
                     </div>
                   </td>
                   <td
                     class="euiTableRowCell"
+                    style="width: 10%;"
                   >
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -352,7 +352,7 @@ Object {
                       Actions
                     </div>
                     <div
-                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                      class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
                     >
                       <div
                         class="euiPopover euiPopover--anchorDownLeft"
@@ -362,6 +362,7 @@ Object {
                           class="euiPopover__anchor"
                         >
                           <button
+                            aria-label="workspace-collaborator-table-actions"
                             class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
                             data-test-subj="workspace-detail-collaborator-table-actions-box"
                             type="button"
@@ -406,6 +407,7 @@ Object {
                   </td>
                   <td
                     class="euiTableRowCell"
+                    style="width: 30%;"
                   >
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -424,50 +426,155 @@ Object {
                   </td>
                   <td
                     class="euiTableRowCell"
+                    style="width: 30%;"
                   >
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                     >
                       Type
                     </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Group
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                    style="width: 30%;"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Access level
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Read only
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                    style="width: 10%;"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Actions
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                    >
+                      <div
+                        class="euiPopover euiPopover--anchorDownLeft"
+                        id="workspace-detail-add-collaborator-action"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <button
+                            aria-label="workspace-collaborator-table-actions"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            data-test-subj="workspace-detail-collaborator-table-actions-box"
+                            type="button"
+                          >
+                            <span
+                              aria-hidden="true"
+                              class="euiButtonIcon__icon"
+                              color="inherit"
+                              data-euiicon-type="boxesHorizontal"
+                            />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr
+                  class="euiTableRow euiTableRow-isSelectable"
+                >
+                  <td
+                    class="euiTableRowCellCheckbox"
+                  >
                     <div
                       class="euiTableCellContent"
                     >
-                      <span
-                        class="euiTableCellContent__text"
+                      <div
+                        class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
                       >
-                        Group
-                      </span>
+                        <input
+                          aria-label="Select this row"
+                          class="euiCheckbox__input"
+                          data-test-subj="checkboxSelectRow-2"
+                          id="_selection_column_2-checkbox"
+                          title="Select this row"
+                          type="checkbox"
+                        />
+                        <div
+                          class="euiCheckbox__square"
+                        />
+                      </div>
                     </div>
                   </td>
                   <td
                     class="euiTableRowCell"
+                    style="width: 30%;"
                   >
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                     >
-                      Access level
+                      ID
                     </div>
                     <div
                       class="euiTableCellContent"
                     >
                       <span
                         class="euiTableCellContent__text"
-                      >
-                        Read only
-                      </span>
+                      />
                     </div>
                   </td>
                   <td
                     class="euiTableRowCell"
+                    style="width: 30%;"
                   >
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                     >
-                      Actions
+                      Type
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      —
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                    style="width: 30%;"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Access level
                     </div>
                     <div
                       class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      —
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                    style="width: 10%;"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Actions
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
                     >
                       <div
                         class="euiPopover euiPopover--anchorDownLeft"
@@ -477,6 +584,7 @@ Object {
                           class="euiPopover__anchor"
                         >
                           <button
+                            aria-label="workspace-collaborator-table-actions"
                             class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
                             data-test-subj="workspace-detail-collaborator-table-actions-box"
                             type="button"
@@ -609,20 +717,20 @@ Object {
   "container": <div>
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
         >
           <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <input
                 aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                class="euiFieldSearch euiFieldSearch--fullWidth"
+                class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                 placeholder="Search..."
                 type="search"
                 value=""
@@ -657,7 +765,7 @@ Object {
                 class="euiPopover__anchor"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
                   type="button"
                 >
                   <span
@@ -691,7 +799,7 @@ Object {
                 class="euiPopover__anchor"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
                   type="button"
                 >
                   <span
@@ -721,7 +829,7 @@ Object {
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -762,7 +870,7 @@ Object {
             </div>
           </div>
           <table
-            class="euiTable euiTable--responsive"
+            class="euiTable euiTable--compressed euiTable--responsive"
             id="__table_generated-id"
             tabindex="-1"
           >
@@ -799,6 +907,7 @@ Object {
                   data-test-subj="tableHeaderCell_primaryId_0"
                   role="columnheader"
                   scope="col"
+                  style="width: 30%;"
                 >
                   <span
                     class="euiTableCellContent"
@@ -816,6 +925,7 @@ Object {
                   data-test-subj="tableHeaderCell_displayedType_1"
                   role="columnheader"
                   scope="col"
+                  style="width: 30%;"
                 >
                   <span
                     class="euiTableCellContent"
@@ -833,6 +943,7 @@ Object {
                   data-test-subj="tableHeaderCell_accessLevel_2"
                   role="columnheader"
                   scope="col"
+                  style="width: 30%;"
                 >
                   <span
                     class="euiTableCellContent"
@@ -850,9 +961,10 @@ Object {
                   data-test-subj="tableHeaderCell_Actions_3"
                   role="columnheader"
                   scope="col"
+                  style="width: 10%;"
                 >
                   <span
-                    class="euiTableCellContent"
+                    class="euiTableCellContent euiTableCellContent--alignRight"
                   >
                     <span
                       class="euiTableCellContent__text"
@@ -893,6 +1005,7 @@ Object {
                 </td>
                 <td
                   class="euiTableRowCell"
+                  style="width: 30%;"
                 >
                   <div
                     class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -911,6 +1024,7 @@ Object {
                 </td>
                 <td
                   class="euiTableRowCell"
+                  style="width: 30%;"
                 >
                   <div
                     class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -918,17 +1032,14 @@ Object {
                     Type
                   </div>
                   <div
-                    class="euiTableCellContent"
+                    class="euiTableCellContent euiTableCellContent--overflowingContent"
                   >
-                    <span
-                      class="euiTableCellContent__text"
-                    >
-                      User
-                    </span>
+                    User
                   </div>
                 </td>
                 <td
                   class="euiTableRowCell"
+                  style="width: 30%;"
                 >
                   <div
                     class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -936,17 +1047,14 @@ Object {
                     Access level
                   </div>
                   <div
-                    class="euiTableCellContent"
+                    class="euiTableCellContent euiTableCellContent--overflowingContent"
                   >
-                    <span
-                      class="euiTableCellContent__text"
-                    >
-                      Admin
-                    </span>
+                    Admin
                   </div>
                 </td>
                 <td
                   class="euiTableRowCell"
+                  style="width: 10%;"
                 >
                   <div
                     class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -954,7 +1062,7 @@ Object {
                     Actions
                   </div>
                   <div
-                    class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
                   >
                     <div
                       class="euiPopover euiPopover--anchorDownLeft"
@@ -964,6 +1072,7 @@ Object {
                         class="euiPopover__anchor"
                       >
                         <button
+                          aria-label="workspace-collaborator-table-actions"
                           class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
                           data-test-subj="workspace-detail-collaborator-table-actions-box"
                           type="button"
@@ -1008,6 +1117,7 @@ Object {
                 </td>
                 <td
                   class="euiTableRowCell"
+                  style="width: 30%;"
                 >
                   <div
                     class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
@@ -1026,50 +1136,155 @@ Object {
                 </td>
                 <td
                   class="euiTableRowCell"
+                  style="width: 30%;"
                 >
                   <div
                     class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                   >
                     Type
                   </div>
+                  <div
+                    class="euiTableCellContent euiTableCellContent--overflowingContent"
+                  >
+                    Group
+                  </div>
+                </td>
+                <td
+                  class="euiTableRowCell"
+                  style="width: 30%;"
+                >
+                  <div
+                    class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                  >
+                    Access level
+                  </div>
+                  <div
+                    class="euiTableCellContent euiTableCellContent--overflowingContent"
+                  >
+                    Read only
+                  </div>
+                </td>
+                <td
+                  class="euiTableRowCell"
+                  style="width: 10%;"
+                >
+                  <div
+                    class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                  >
+                    Actions
+                  </div>
+                  <div
+                    class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                  >
+                    <div
+                      class="euiPopover euiPopover--anchorDownLeft"
+                      id="workspace-detail-add-collaborator-action"
+                    >
+                      <div
+                        class="euiPopover__anchor"
+                      >
+                        <button
+                          aria-label="workspace-collaborator-table-actions"
+                          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                          data-test-subj="workspace-detail-collaborator-table-actions-box"
+                          type="button"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="euiButtonIcon__icon"
+                            color="inherit"
+                            data-euiicon-type="boxesHorizontal"
+                          />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="euiTableRow euiTableRow-isSelectable"
+              >
+                <td
+                  class="euiTableRowCellCheckbox"
+                >
                   <div
                     class="euiTableCellContent"
                   >
-                    <span
-                      class="euiTableCellContent__text"
+                    <div
+                      class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
                     >
-                      Group
-                    </span>
+                      <input
+                        aria-label="Select this row"
+                        class="euiCheckbox__input"
+                        data-test-subj="checkboxSelectRow-2"
+                        id="_selection_column_2-checkbox"
+                        title="Select this row"
+                        type="checkbox"
+                      />
+                      <div
+                        class="euiCheckbox__square"
+                      />
+                    </div>
                   </div>
                 </td>
                 <td
                   class="euiTableRowCell"
+                  style="width: 30%;"
                 >
                   <div
                     class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                   >
-                    Access level
+                    ID
                   </div>
                   <div
                     class="euiTableCellContent"
                   >
                     <span
                       class="euiTableCellContent__text"
-                    >
-                      Read only
-                    </span>
+                    />
                   </div>
                 </td>
                 <td
                   class="euiTableRowCell"
+                  style="width: 30%;"
                 >
                   <div
                     class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                   >
-                    Actions
+                    Type
+                  </div>
+                  <div
+                    class="euiTableCellContent euiTableCellContent--overflowingContent"
+                  >
+                    —
+                  </div>
+                </td>
+                <td
+                  class="euiTableRowCell"
+                  style="width: 30%;"
+                >
+                  <div
+                    class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                  >
+                    Access level
                   </div>
                   <div
                     class="euiTableCellContent euiTableCellContent--overflowingContent"
+                  >
+                    —
+                  </div>
+                </td>
+                <td
+                  class="euiTableRowCell"
+                  style="width: 10%;"
+                >
+                  <div
+                    class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                  >
+                    Actions
+                  </div>
+                  <div
+                    class="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
                   >
                     <div
                       class="euiPopover euiPopover--anchorDownLeft"
@@ -1079,6 +1294,7 @@ Object {
                         class="euiPopover__anchor"
                       >
                         <button
+                          aria-label="workspace-collaborator-table-actions"
                           class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
                           data-test-subj="workspace-detail-collaborator-table-actions-box"
                           type="button"
diff --git a/src/plugins/workspace/public/components/workspace_form/add_collaborator_button.test.tsx b/src/plugins/workspace/public/components/workspace_form/add_collaborator_button.test.tsx
index f5466a1f0996..82d4bae43c66 100644
--- a/src/plugins/workspace/public/components/workspace_form/add_collaborator_button.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/add_collaborator_button.test.tsx
@@ -7,6 +7,8 @@ import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import { AddCollaboratorButton } from './add_collaborator_button';
+import { WorkspacePermissionSetting } from './types';
+import { DuplicateCollaboratorError } from '../add_collaborators_modal';
 
 describe('AddCollaboratorButton', () => {
   const mockProps = {
@@ -24,7 +26,7 @@ describe('AddCollaboratorButton', () => {
         type: 'group',
         group: 'group',
       },
-    ],
+    ] as WorkspacePermissionSetting[],
     handleSubmitPermissionSettings: jest.fn(),
   };
 
@@ -105,4 +107,65 @@ describe('AddCollaboratorButton', () => {
       { id: 2, modes: ['library_read', 'read'], type: 'user', userId: '2' },
     ]);
   });
+
+  it('should throw DuplicateCollaboratorError with consistent details', async () => {
+    let errorCached: DuplicateCollaboratorError | undefined;
+    const mockOnAdd = jest.fn(async ({ onAddCollaborators }) => {
+      try {
+        await onAddCollaborators([
+          {
+            accessLevel: 'readOnly',
+            collaboratorId: 'admin',
+            permissionType: 'user',
+          },
+          {
+            accessLevel: 'readOnly',
+            collaboratorId: 'group',
+            permissionType: 'group',
+          },
+          {
+            accessLevel: 'readOnly',
+            collaboratorId: 'new-user',
+            permissionType: 'user',
+          },
+          {
+            accessLevel: 'readOnly',
+            collaboratorId: 'new-user',
+            permissionType: 'user',
+          },
+        ]);
+      } catch (e) {
+        errorCached = e;
+      }
+    });
+    const displayedTypes = [
+      {
+        name: 'add user',
+        buttonLabel: 'add user',
+        onAdd: mockOnAdd,
+        id: 'user',
+      },
+      {
+        name: 'add group',
+        buttonLabel: 'add group',
+        onAdd: mockOnAdd,
+        id: 'group',
+      },
+    ];
+    const { getByTestId, getByText } = render(
+      <AddCollaboratorButton {...mockProps} displayedTypes={displayedTypes} />
+    );
+    const button = getByTestId('add-collaborator-button');
+    fireEvent.click(button);
+    expect(getByTestId('add-collaborator-popover')).toBeInTheDocument();
+    const addUserButton = getByText('add user');
+    fireEvent.click(addUserButton);
+    await mockOnAdd.mock.results;
+
+    expect(errorCached).toBeInstanceOf(DuplicateCollaboratorError);
+    if (errorCached instanceof DuplicateCollaboratorError) {
+      expect(errorCached.details.pendingAdded).toEqual(['new-user']);
+      expect(errorCached.details.existing).toEqual(['admin', 'group']);
+    }
+  });
 });
diff --git a/src/plugins/workspace/public/components/workspace_form/add_collaborator_button.tsx b/src/plugins/workspace/public/components/workspace_form/add_collaborator_button.tsx
index fe957574603b..ab4dab59af9f 100644
--- a/src/plugins/workspace/public/components/workspace_form/add_collaborator_button.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/add_collaborator_button.tsx
@@ -4,27 +4,46 @@
  */
 
 import React, { useState, useRef, useCallback } from 'react';
-import { EuiPopover, EuiContextMenu, EuiButton, EuiContextMenuPanelDescriptor } from '@elastic/eui';
+import {
+  EuiPopover,
+  EuiContextMenu,
+  EuiSmallButton,
+  EuiContextMenuPanelDescriptor,
+  EuiIcon,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { WorkspaceCollaboratorType } from '../../services/workspace_collaborator_types_service';
 import { WorkspaceCollaborator } from '../../types';
 import { PermissionSetting } from './workspace_collaborator_table';
-import { generateNextPermissionSettingsId } from './utils';
+import { generateNextPermissionSettingsId, hasSameUserIdOrGroup } from './utils';
 import { accessLevelNameToWorkspacePermissionModesMap } from '../../constants';
 import { WorkspacePermissionItemType } from './constants';
 import { WorkspacePermissionSetting } from './types';
+import { DuplicateCollaboratorError } from '../add_collaborators_modal';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { CoreStart, IWorkspaceResponse } from '../../../../../core/public';
 
 interface Props {
   displayedTypes: WorkspaceCollaboratorType[];
   permissionSettings: PermissionSetting[];
-  handleSubmitPermissionSettings: (permissionSettings: WorkspacePermissionSetting[]) => void;
+  handleSubmitPermissionSettings: (
+    permissionSettings: WorkspacePermissionSetting[]
+  ) => Promise<IWorkspaceResponse<boolean>>;
+  fill?: boolean;
 }
 
 export const AddCollaboratorButton = ({
   displayedTypes,
   permissionSettings,
   handleSubmitPermissionSettings,
+  fill = true,
 }: Props) => {
+  const {
+    services: { notifications },
+  } = useOpenSearchDashboards<{
+    CoreStart: CoreStart;
+  }>();
+
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const nextIdRef = useRef(generateNextPermissionSettingsId(permissionSettings));
@@ -36,8 +55,9 @@ export const AddCollaboratorButton = ({
   }, []);
 
   const onAddCollaborators = async (collaborators: WorkspaceCollaborator[]) => {
+    const uniqueCollaboratorIds = new Set();
     const addedSettings = collaborators.map(({ permissionType, accessLevel, collaboratorId }) => ({
-      type: permissionType as WorkspacePermissionItemType,
+      type: permissionType,
       modes: accessLevelNameToWorkspacePermissionModesMap[accessLevel],
       id: nextIdGenerator(),
       ...(permissionType === WorkspacePermissionItemType.User
@@ -47,9 +67,46 @@ export const AddCollaboratorButton = ({
         : {
             group: collaboratorId,
           }),
-    }));
-    const newPermissionSettings = [...permissionSettings, ...addedSettings];
-    handleSubmitPermissionSettings(newPermissionSettings as WorkspacePermissionSetting[]);
+      collaboratorId,
+    })) as Array<WorkspacePermissionSetting & { collaboratorId: string }>;
+    const existingDuplicateSettings = addedSettings.filter((permissionSettingToAdd) =>
+      hasSameUserIdOrGroup(permissionSettings, permissionSettingToAdd)
+    );
+    const pendingAddedDuplicateCollaboratorIds = Array.from(
+      new Set(
+        collaborators.flatMap(({ collaboratorId }) => {
+          if (uniqueCollaboratorIds.has(collaboratorId)) {
+            return [collaboratorId];
+          }
+          uniqueCollaboratorIds.add(collaboratorId);
+          return [];
+        })
+      )
+    );
+    if (pendingAddedDuplicateCollaboratorIds.length > 0 || existingDuplicateSettings.length > 0) {
+      throw new DuplicateCollaboratorError({
+        pendingAdded: pendingAddedDuplicateCollaboratorIds,
+        existing: Array.from(
+          new Set(existingDuplicateSettings.map((setting) => setting.collaboratorId))
+        ),
+      });
+    }
+    const newPermissionSettings = [
+      ...permissionSettings,
+      ...addedSettings.map(({ collaboratorId, ...rest }) => rest),
+    ];
+    const result = await handleSubmitPermissionSettings(
+      newPermissionSettings as WorkspacePermissionSetting[]
+    );
+    if (result?.success) {
+      if (notifications) {
+        notifications.toasts.addSuccess({
+          title: i18n.translate('workspace.collaborator.add.success.message', {
+            defaultMessage: 'Collaborators added successfully',
+          }),
+        });
+      }
+    }
   };
 
   const panelItems = displayedTypes.map(({ id, buttonLabel, onAdd }) => ({
@@ -66,18 +123,19 @@ export const AddCollaboratorButton = ({
       id="add-collaborator-popover"
       data-test-subj="add-collaborator-popover"
       button={
-        <EuiButton
-          iconSide="right"
-          iconType="arrowDown"
-          fill
+        <EuiSmallButton
+          iconSide="left"
+          iconType="plusInCircle"
           onClick={() => setIsPopoverOpen((prev) => !prev)}
-          size="s"
           data-test-subj="add-collaborator-button"
+          fill={fill}
         >
           {i18n.translate('workspace.workspaceDetail.collaborator.add', {
             defaultMessage: 'Add collaborators',
           })}
-        </EuiButton>
+          &nbsp;&nbsp;
+          <EuiIcon type="arrowDown" />
+        </EuiSmallButton>
       }
       isOpen={isPopoverOpen}
       closePopover={() => setIsPopoverOpen(false)}
diff --git a/src/plugins/workspace/public/components/workspace_form/constants.ts b/src/plugins/workspace/public/components/workspace_form/constants.ts
index 4e1da05cb0a8..3609facf1566 100644
--- a/src/plugins/workspace/public/components/workspace_form/constants.ts
+++ b/src/plugins/workspace/public/components/workspace_form/constants.ts
@@ -102,24 +102,6 @@ export const detailsColorHelpText = i18n.translate(
   }
 );
 
-export enum DetailTab {
-  Details = 'details',
-  DataSources = 'dataSources',
-  Collaborators = 'collaborators',
-}
-
-export const DetailTabTitles: { [key in DetailTab]: string } = {
-  [DetailTab.Details]: i18n.translate('workspace.detail.tabTitle.details', {
-    defaultMessage: 'Details',
-  }),
-  [DetailTab.DataSources]: i18n.translate('workspace.detail.tabTitle.dataSources', {
-    defaultMessage: 'Data sources',
-  }),
-  [DetailTab.Collaborators]: i18n.translate('workspace.detail.tabTitle.collaborators', {
-    defaultMessage: 'Collaborators',
-  }),
-};
-
 export const PERMISSION_TYPE_LABEL_ID = 'workspace-form-permission-type-label';
 export const PERMISSION_COLLABORATOR_LABEL_ID = 'workspace-form-permission-collaborator-label';
 export const PERMISSION_ACCESS_LEVEL_LABEL_ID = 'workspace-form-permission-access-level-label';
diff --git a/src/plugins/workspace/public/components/workspace_form/index.ts b/src/plugins/workspace/public/components/workspace_form/index.ts
index fef18d7c8c5e..6b967722bf51 100644
--- a/src/plugins/workspace/public/components/workspace_form/index.ts
+++ b/src/plugins/workspace/public/components/workspace_form/index.ts
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { WorkspaceDetailForm } from './workspace_detail_form';
 export { SelectDataSourcePanel } from './select_data_source_panel';
 export { WorkspaceFormErrorCallout } from './workspace_form_error_callout';
 export { WorkspaceUseCase } from './workspace_use_case';
@@ -14,11 +13,14 @@ export { ConnectionTypeIcon } from './connection_type_icon';
 export { DataSourceConnectionTable } from './data_source_connection_table';
 export { WorkspaceUseCaseFlyout } from './workspace_use_case_flyout';
 
-export { WorkspaceFormSubmitData, WorkspaceFormProps, WorkspaceFormDataState } from './types';
+export {
+  WorkspaceFormSubmitData,
+  WorkspaceFormProps,
+  WorkspaceFormDataState,
+  WorkspacePermissionSetting,
+} from './types';
 export {
   WorkspaceOperationType,
-  DetailTab,
-  DetailTabTitles,
   WorkspacePermissionItemType,
   usersAndPermissionsCreatePageTitle,
   selectDataSourceTitle,
diff --git a/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.test.tsx b/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.test.tsx
index 6ec5c23a1b87..c648a5203438 100644
--- a/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.test.tsx
@@ -155,7 +155,7 @@ describe('SelectDataSourcePanel', () => {
     await waitFor(() => {
       expect(
         getByText(
-          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
+          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace.'
         )
       ).toBeInTheDocument();
       expect(getByText(assignedDataSourcesConnections[1].name)).toBeInTheDocument();
@@ -218,14 +218,14 @@ describe('SelectDataSourcePanel', () => {
     await waitFor(() => {
       expect(
         getByText(
-          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
+          'Add data sources that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace.'
         )
       ).toBeInTheDocument();
     });
     fireEvent.click(getByText('Close'));
     expect(
       queryByText(
-        'Add data sources that will be available in the workspace. If a selected data source has related Direct Query connection, they will also be available in the workspace.'
+        'Add data sources that will be available in the workspace. If a selected data source has related Direct Query data sources, they will also be available in the workspace.'
       )
     ).toBeNull();
   });
diff --git a/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx b/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx
index 5a769110a9b4..5c2da02e9fb7 100644
--- a/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/select_data_source_panel.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   EuiSpacer,
   EuiFlexItem,
@@ -17,7 +17,7 @@ import { i18n } from '@osd/i18n';
 import { SavedObjectsStart, CoreStart } from '../../../../../core/public';
 import { DataSourceConnection } from '../../../common/types';
 import { WorkspaceFormError } from './types';
-import { AssociationDataSourceModal } from '../workspace_detail/association_data_source_modal';
+import { AssociationDataSourceModal } from '../data_source_association/association_data_source_modal';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { WorkspaceClient } from '../../workspace_client';
 import { AssociationDataSourceModalMode } from '../../../common/constants';
@@ -46,6 +46,10 @@ export const SelectDataSourcePanel = ({
     services: { notifications, http, chrome },
   } = useOpenSearchDashboards<{ CoreStart: CoreStart; workspaceClient: WorkspaceClient }>();
 
+  const excludedConnectionIds = useMemo(() => assignedDataSourceConnections.map((c) => c.id), [
+    assignedDataSourceConnections,
+  ]);
+
   const handleAssignDataSourceConnections = (newDataSourceConnections: DataSourceConnection[]) => {
     setModalVisible(false);
     onChange([...assignedDataSourceConnections, ...newDataSourceConnections]);
@@ -75,7 +79,7 @@ export const SelectDataSourcePanel = ({
       data-test-subj={testingId}
     >
       {i18n.translate('workspace.form.selectDataSourcePanel.addNew', {
-        defaultMessage: 'Associate OpenSearch connections',
+        defaultMessage: 'Associate OpenSearch data sources',
       })}
     </EuiSmallButton>
   );
@@ -92,7 +96,7 @@ export const SelectDataSourcePanel = ({
       data-test-subj={testingId}
     >
       {i18n.translate('workspace.form.selectDataSourcePanel.addNewDQCs', {
-        defaultMessage: 'Associate direct query connections',
+        defaultMessage: 'Associate direct query data sources',
       })}
     </EuiSmallButton>
   );
@@ -187,7 +191,7 @@ export const SelectDataSourcePanel = ({
       {modalVisible && chrome && (
         <AssociationDataSourceModal
           savedObjects={savedObjects}
-          assignedConnections={assignedDataSourceConnections}
+          excludedConnectionIds={excludedConnectionIds}
           closeModal={() => setModalVisible(false)}
           handleAssignDataSourceConnections={handleAssignDataSourceConnections}
           http={http}
diff --git a/src/plugins/workspace/public/components/workspace_form/types.ts b/src/plugins/workspace/public/components/workspace_form/types.ts
index 43c960f274d5..7cc6dbb4c300 100644
--- a/src/plugins/workspace/public/components/workspace_form/types.ts
+++ b/src/plugins/workspace/public/components/workspace_form/types.ts
@@ -79,7 +79,10 @@ export type WorkspaceFormErrors = {
 export interface WorkspaceFormProps {
   application: ApplicationStart;
   savedObjects: SavedObjectsStart;
-  onSubmit?: (formData: WorkspaceFormSubmitData, refresh?: boolean) => void;
+  onSubmit?: (
+    formData: WorkspaceFormSubmitData,
+    refresh?: boolean
+  ) => Promise<{ result: boolean; success: true } | undefined>;
   defaultValues?: Partial<WorkspaceFormSubmitData>;
   operationType: WorkspaceOperationType;
   permissionEnabled?: boolean;
diff --git a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts
index 52d65091cb89..19b9299c52dc 100644
--- a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts
+++ b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.test.ts
@@ -10,9 +10,18 @@ import { WorkspacePermissionMode } from '../../../common/constants';
 import { WorkspaceOperationType, WorkspacePermissionItemType } from './constants';
 import { WorkspaceFormSubmitData, WorkspaceFormErrorCode } from './types';
 import { useWorkspaceForm } from './use_workspace_form';
+import { waitFor } from '@testing-library/dom';
 
-const setup = (defaultValues?: WorkspaceFormSubmitData, permissionEnabled = false) => {
-  const onSubmitMock = jest.fn();
+const setup = ({
+  defaultValues,
+  permissionEnabled = false,
+  onSubmit,
+}: {
+  defaultValues: WorkspaceFormSubmitData;
+  permissionEnabled?: boolean;
+  onSubmit?: jest.Mock;
+}) => {
+  const onSubmitMock = onSubmit ?? jest.fn();
   const renderResult = renderHook(useWorkspaceForm, {
     initialProps: {
       application: applicationServiceMock.createStartContract(),
@@ -31,8 +40,10 @@ const setup = (defaultValues?: WorkspaceFormSubmitData, permissionEnabled = fals
 describe('useWorkspaceForm', () => {
   it('should return invalid workspace name error and not call onSubmit when invalid name', async () => {
     const { renderResult, onSubmitMock } = setup({
-      id: 'foo',
-      name: '~',
+      defaultValues: {
+        id: 'foo',
+        name: '~',
+      },
     });
     expect(renderResult.result.current.formErrors).toEqual({});
 
@@ -51,8 +62,9 @@ describe('useWorkspaceForm', () => {
   });
   it('should return "Use case is required. Select a use case." and not call onSubmit', async () => {
     const { renderResult, onSubmitMock } = setup({
-      id: 'foo',
-      name: 'test-workspace-name',
+      defaultValues: {
+        name: 'test-workspace-name',
+      },
     });
     expect(renderResult.result.current.formErrors).toEqual({});
 
@@ -70,13 +82,13 @@ describe('useWorkspaceForm', () => {
     expect(onSubmitMock).not.toHaveBeenCalled();
   });
   it('should return "Add workspace owner." and not call onSubmit', async () => {
-    const { renderResult, onSubmitMock } = setup(
-      {
+    const { renderResult, onSubmitMock } = setup({
+      defaultValues: {
         id: 'foo',
         name: 'test-workspace-name',
       },
-      true
-    );
+      permissionEnabled: true,
+    });
     expect(renderResult.result.current.formErrors).toEqual({});
 
     act(() => {
@@ -111,9 +123,11 @@ describe('useWorkspaceForm', () => {
   });
   it('should call onSubmit with workspace name and features', async () => {
     const { renderResult, onSubmitMock } = setup({
-      id: 'foo',
-      name: 'test-workspace-name',
-      features: ['use-case-observability'],
+      defaultValues: {
+        id: 'foo',
+        name: 'test-workspace-name',
+        features: ['use-case-observability'],
+      },
     });
     expect(renderResult.result.current.formErrors).toEqual({});
 
@@ -124,15 +138,16 @@ describe('useWorkspaceForm', () => {
       expect.objectContaining({
         name: 'test-workspace-name',
         features: ['use-case-observability'],
-      }),
-      true
+      })
     );
   });
   it('should update selected use case', () => {
     const { renderResult } = setup({
-      id: 'foo',
-      name: 'test-workspace-name',
-      features: ['use-case-observability'],
+      defaultValues: {
+        id: 'foo',
+        name: 'test-workspace-name',
+        features: ['use-case-observability'],
+      },
     });
 
     expect(renderResult.result.current.formData.useCase).toBe('observability');
@@ -144,9 +159,11 @@ describe('useWorkspaceForm', () => {
 
   it('should reset workspace form', () => {
     const { renderResult } = setup({
-      id: 'test',
-      name: 'current-workspace-name',
-      features: ['use-case-observability'],
+      defaultValues: {
+        id: 'test',
+        name: 'current-workspace-name',
+        features: ['use-case-observability'],
+      },
     });
     expect(renderResult.result.current.formData.name).toBe('current-workspace-name');
 
@@ -160,4 +177,22 @@ describe('useWorkspaceForm', () => {
     });
     expect(renderResult.result.current.formData.name).toBe('current-workspace-name');
   });
+
+  it('should call setPermissionSettings if onSubmit successfully', async () => {
+    const onSubmitMock = jest.fn().mockResolvedValue({ success: true });
+    const { renderResult } = setup({
+      defaultValues: {
+        id: 'test',
+        name: 'current-workspace-name',
+        features: ['use-case-observability'],
+      },
+      onSubmit: onSubmitMock,
+    });
+    act(() => {
+      renderResult.result.current.handleSubmitPermissionSettings([]);
+    });
+    await waitFor(() => {
+      expect(renderResult.result.current.formData.permissionSettings).toStrictEqual([]);
+    });
+  });
 });
diff --git a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
index a2c2cee12066..d9e4a24f3399 100644
--- a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
+++ b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
@@ -16,12 +16,7 @@ import {
   WorkspacePermissionSetting,
   WorkspaceFormDataState,
 } from './types';
-import {
-  generatePermissionSettingsState,
-  getNumberOfChanges,
-  getNumberOfErrors,
-  validateWorkspaceForm,
-} from './utils';
+import { getNumberOfChanges, getNumberOfErrors, validateWorkspaceForm } from './utils';
 import { WorkspacePermissionItemType } from './constants';
 
 const workspaceHtmlIdGenerator = htmlIdGenerator();
@@ -29,7 +24,6 @@ const workspaceHtmlIdGenerator = htmlIdGenerator();
 export const useWorkspaceForm = ({
   application,
   defaultValues,
-  operationType,
   onSubmit,
   permissionEnabled,
   onAppLeave,
@@ -40,9 +34,6 @@ export const useWorkspaceForm = ({
   const [color, setColor] = useState(defaultValues?.color);
   const defaultValuesRef = useRef(defaultValues);
   const [isEditing, setIsEditing] = useState(false);
-  const initialPermissionSettingsRef = useRef(
-    generatePermissionSettingsState(operationType, defaultValues?.permissionSettings)
-  );
 
   const [featureConfigs, setFeatureConfigs] = useState<string[]>(defaultValues?.features ?? []);
   const selectedUseCase = useMemo(() => getFirstUseCaseOfFeatureConfigs(featureConfigs), [
@@ -50,7 +41,7 @@ export const useWorkspaceForm = ({
   ]);
   const [permissionSettings, setPermissionSettings] = useState<
     WorkspaceFormDataState['permissionSettings']
-  >(initialPermissionSettingsRef.current);
+  >(defaultValues?.permissionSettings ?? []);
 
   const [selectedDataSourceConnections, setSelectedDataSourceConnections] = useState<
     DataSourceConnection[]
@@ -77,11 +68,7 @@ export const useWorkspaceForm = ({
   getFormDataRef.current = getFormData;
   const formData = getFormData();
   const numberOfChanges = defaultValuesRef.current
-    ? getNumberOfChanges(formData, {
-        ...defaultValuesRef.current,
-        // The user form will insert some empty permission rows, should ignore these rows not treated as user new added.
-        permissionSettings: initialPermissionSettingsRef.current,
-      })
+    ? getNumberOfChanges(formData, defaultValuesRef.current)
     : 0;
 
   if (!formIdRef.current) {
@@ -102,8 +89,19 @@ export const useWorkspaceForm = ({
     [setFeatureConfigs]
   );
 
+  const getSubmitFormData = (submitFormData: WorkspaceFormDataState) => {
+    return {
+      name: submitFormData.name!,
+      description: submitFormData.description,
+      color: submitFormData.color || '#FFFFFF',
+      features: submitFormData.features,
+      permissionSettings: submitFormData.permissionSettings as WorkspacePermissionSetting[],
+      selectedDataSourceConnections: submitFormData.selectedDataSourceConnections,
+    };
+  };
+
   const handleFormSubmit = useCallback<FormEventHandler>(
-    (e) => {
+    async (e) => {
       e.preventDefault();
       const currentFormData = getFormDataRef.current();
       currentFormData.permissionSettings = currentFormData.permissionSettings.filter(
@@ -120,35 +118,25 @@ export const useWorkspaceForm = ({
         return;
       }
 
-      onSubmit?.(
-        {
-          name: currentFormData.name!,
-          description: currentFormData.description,
-          color: currentFormData.color || '#FFFFFF',
-          features: currentFormData.features,
-          permissionSettings: currentFormData.permissionSettings as WorkspacePermissionSetting[],
-          selectedDataSourceConnections: currentFormData.selectedDataSourceConnections,
-        },
-        true
-      );
+      const submitFormData = getSubmitFormData(currentFormData);
+      const result = await onSubmit?.(submitFormData);
+      if (result?.success) {
+        defaultValuesRef.current = submitFormData;
+        setIsEditing(false);
+      }
     },
     [onSubmit, permissionEnabled]
   );
 
-  const handleSubmitPermissionSettings = (settings: WorkspacePermissionSetting[]) => {
-    setPermissionSettings(settings);
+  const handleSubmitPermissionSettings = async (settings: WorkspacePermissionSetting[]) => {
     const currentFormData = getFormDataRef.current();
-    onSubmit?.(
-      {
-        name: currentFormData.name!,
-        description: currentFormData.description,
-        color: currentFormData.color || '#FFFFFF',
-        features: currentFormData.features,
-        permissionSettings: settings,
-        selectedDataSourceConnections: currentFormData.selectedDataSourceConnections,
-      },
-      false
-    );
+    const result = await onSubmit?.({
+      ...getSubmitFormData(currentFormData),
+      permissionSettings: settings,
+    });
+    if (result) {
+      setPermissionSettings(settings);
+    }
   };
 
   const handleColorChange = useCallback<Required<EuiColorPickerProps>['onChange']>((text) => {
@@ -161,7 +149,6 @@ export const useWorkspaceForm = ({
     setDescription(resetValues?.description ?? '');
     setColor(resetValues?.color);
     setFeatureConfigs(resetValues?.features ?? []);
-    setPermissionSettings(initialPermissionSettingsRef.current);
     setFormErrors({});
     setIsEditing(false);
   }, []);
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.test.ts b/src/plugins/workspace/public/components/workspace_form/utils.test.ts
index e387393c4a31..aee0a1e1ca56 100644
--- a/src/plugins/workspace/public/components/workspace_form/utils.test.ts
+++ b/src/plugins/workspace/public/components/workspace_form/utils.test.ts
@@ -186,7 +186,7 @@ describe('validateWorkspaceForm', () => {
   it('should return error if color is invalid', () => {
     expect(validateWorkspaceForm({ color: 'QWERTY' }, false).color).toEqual({
       code: WorkspaceFormErrorCode.InvalidColor,
-      message: 'Color is invalid. Enter a valid color.',
+      message: 'Color is invalid. Choose a valid color.',
     });
   });
   it('should return error if use case is empty', () => {
@@ -553,79 +553,6 @@ describe('getNumberOfChanges', () => {
       )
     ).toEqual(1);
   });
-  it('should return consistent permission settings changes count', () => {
-    expect(
-      getNumberOfChanges(
-        {
-          name: 'foo',
-          permissionSettings: [
-            {
-              id: 0,
-              type: WorkspacePermissionItemType.User,
-              userId: 'user-1',
-              modes: [WorkspacePermissionMode.Write, WorkspacePermissionMode.LibraryWrite],
-            },
-          ],
-        },
-        {
-          name: 'foo',
-          permissionSettings: [
-            {
-              id: 0,
-              type: WorkspacePermissionItemType.User,
-              userId: 'user-1',
-              modes: [WorkspacePermissionMode.Write, WorkspacePermissionMode.LibraryWrite],
-            },
-          ],
-        }
-      )
-    ).toEqual(0);
-    // for remove permission setting
-    expect(
-      getNumberOfChanges(
-        {
-          name: 'foo',
-          permissionSettings: [
-            {
-              id: 0,
-              type: WorkspacePermissionItemType.User,
-              userId: 'user-1',
-              modes: [WorkspacePermissionMode.Write, WorkspacePermissionMode.LibraryWrite],
-            },
-            {
-              id: 1,
-              type: WorkspacePermissionItemType.Group,
-              group: 'group-1',
-              modes: [WorkspacePermissionMode.Write, WorkspacePermissionMode.LibraryWrite],
-            },
-          ],
-        },
-        {
-          name: 'foo',
-          /**
-           * These include three changes:
-           * 1.Remove permission setting#0
-           * 2.Modify permission setting#1
-           * 3.Add permission setting#2
-           */
-          permissionSettings: [
-            {
-              id: 1,
-              type: WorkspacePermissionItemType.Group,
-              group: 'group-1',
-              modes: [WorkspacePermissionMode.Read, WorkspacePermissionMode.LibraryWrite],
-            },
-            {
-              id: 2,
-              type: WorkspacePermissionItemType.User,
-              userId: 'user-1',
-              modes: [WorkspacePermissionMode.Write, WorkspacePermissionMode.LibraryWrite],
-            },
-          ],
-        }
-      )
-    ).toEqual(3);
-  });
 });
 
 describe('isWorkspacePermissionSetting', () => {
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.ts b/src/plugins/workspace/public/components/workspace_form/utils.ts
index a1fdb319e1aa..1233bfbc0d53 100644
--- a/src/plugins/workspace/public/components/workspace_form/utils.ts
+++ b/src/plugins/workspace/public/components/workspace_form/utils.ts
@@ -4,14 +4,13 @@
  */
 
 import { i18n } from '@osd/i18n';
-
+import { euiPaletteColorBlind } from '@elastic/eui';
 import type { SavedObjectPermissions } from '../../../../../core/types';
-import { CURRENT_USER_PLACEHOLDER, WorkspacePermissionMode } from '../../../common/constants';
+import { WorkspacePermissionMode } from '../../../common/constants';
 import { isUseCaseFeatureConfig } from '../../utils';
 import {
   optionIdToWorkspacePermissionModesMap,
   permissionModeOptions,
-  WorkspaceOperationType,
   WorkspacePermissionItemType,
 } from './constants';
 
@@ -85,7 +84,7 @@ export const hasSameUserIdOrGroup = (
 export const getPermissionModeId = (modes: WorkspacePermissionMode[]) => {
   for (const key in optionIdToWorkspacePermissionModesMap) {
     if (optionIdToWorkspacePermissionModesMap[key].every((mode) => modes?.includes(mode))) {
-      return key;
+      return key as PermissionModeId;
     }
   }
   return PermissionModeId.Read;
@@ -336,11 +335,11 @@ export const validateWorkspaceForm = (
       }),
     };
   }
-  if (color && !validateWorkspaceColor(color)) {
+  if (color && (!validateWorkspaceColor(color) || !euiPaletteColorBlind().includes(color))) {
     formErrors.color = {
       code: WorkspaceFormErrorCode.InvalidColor,
       message: i18n.translate('workspace.form.features.invalidColor', {
-        defaultMessage: 'Color is invalid. Enter a valid color.',
+        defaultMessage: 'Color is invalid. Choose a valid color.',
       }),
     };
   }
@@ -382,49 +381,6 @@ export const generateNextPermissionSettingsId = (permissionSettings: Array<{ id:
     : Math.max(...permissionSettings.map(({ id }) => id)) + 1;
 };
 
-/**
- *
- * Generate permission settings state with provided operation type and  permission settings,
- * It will always return current user as an Owner and an empty user group permission settings
- * when operation type is create or no users and groups in provided permission settings.
- * It will append current user to result permission settings if no user in provided permission settings.
- * It will append an empty permission group to result permission settings if no user group in provided permission settings.
- * It will always return original permission settings if both user or user group in provided permission settings.
- *
- * @param operationType
- * @param permissionSettings
- * @returns
- */
-export const generatePermissionSettingsState = (
-  operationType: WorkspaceOperationType,
-  permissionSettings?: WorkspacePermissionSetting[]
-): WorkspacePermissionSetting[] => {
-  const emptyUserPermission: WorkspaceUserPermissionSetting = {
-    id: 1,
-    type: WorkspacePermissionItemType.User,
-    userId: '',
-    modes: optionIdToWorkspacePermissionModesMap[PermissionModeId.Owner],
-  };
-  const emptyUserGroupPermission: WorkspaceUserGroupPermissionSetting = {
-    id: 2,
-    type: WorkspacePermissionItemType.Group,
-    group: '',
-    modes: optionIdToWorkspacePermissionModesMap[PermissionModeId.Read],
-  };
-
-  if (operationType === WorkspaceOperationType.Create) {
-    return [
-      {
-        ...emptyUserPermission,
-        userId: CURRENT_USER_PLACEHOLDER,
-      },
-      emptyUserGroupPermission,
-    ];
-  }
-
-  return [...(permissionSettings ?? [])];
-};
-
 interface PermissionSettingLike
   extends Omit<Partial<WorkspaceUserPermissionSetting>, 'type'>,
     Omit<Partial<WorkspaceUserGroupPermissionSetting>, 'type'> {
@@ -490,25 +446,5 @@ export const getNumberOfChanges = (
   ) {
     count++;
   }
-  // Count all new added permission settings
-  count +=
-    newFormData.permissionSettings?.reduce((prevNewAddedCount, setting) => {
-      if (!initialFormData.permissionSettings?.find((item) => item.id === setting.id)) {
-        prevNewAddedCount += 1;
-      }
-      return prevNewAddedCount;
-    }, 0) ?? 0;
-  count +=
-    initialFormData.permissionSettings?.reduce((prevDeletedAndModifiedCount, setting) => {
-      const newSetting = newFormData.permissionSettings?.find((item) => item.id === setting.id);
-      if (!newSetting) {
-        // Count all delete permission settings
-        prevDeletedAndModifiedCount += 1;
-      } else if (!isSamePermissionSetting(newSetting, setting)) {
-        // Count all modified permission settings
-        prevDeletedAndModifiedCount += 1;
-      }
-      return prevDeletedAndModifiedCount;
-    }, 0) ?? 0;
   return count;
 };
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_collaborator_table.test.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_collaborator_table.test.tsx
index 1b4e514e62c8..bb891d4d16fc 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_collaborator_table.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_collaborator_table.test.tsx
@@ -4,26 +4,67 @@
  */
 
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-
-import { WorkspaceCollaboratorTable } from './workspace_collaborator_table';
+import { fireEvent, render, waitFor, within } from '@testing-library/react';
+import ReactDOM from 'react-dom';
+import { WorkspaceCollaboratorTable, getDisplayedType } from './workspace_collaborator_table';
 import { createOpenSearchDashboardsReactContext } from '../../../../opensearch_dashboards_react/public';
 import { coreMock } from '../../../../../core/public/mocks';
 
 const mockCoreStart = coreMock.createStart();
+const displayedCollaboratorTypes = [
+  {
+    id: 'user',
+    name: 'User',
+    buttonLabel: 'Add Users',
+    onAdd: async () => {},
+    getDisplayedType: ({ permissionType }) => (permissionType === 'user' ? 'User' : undefined),
+  },
+  {
+    id: 'group',
+    name: 'Group',
+    buttonLabel: 'Add Groups',
+    onAdd: async () => {},
+    getDisplayedType: ({ permissionType }) => (permissionType === 'group' ? 'Group' : undefined),
+  },
+];
+
+const mockOverlays = mockCoreStart.overlays;
 
-const mockOverlays = {
-  openModal: jest.fn(),
-};
+const { Provider } = createOpenSearchDashboardsReactContext(mockCoreStart);
 
-const { Provider } = createOpenSearchDashboardsReactContext({
-  ...mockCoreStart,
-  overlays: mockOverlays,
+describe('getDisplayedTypes', () => {
+  it('should return undefined if not match any collaborator type', () => {
+    expect(
+      getDisplayedType(displayedCollaboratorTypes, { permissionType: 'unknown' })
+    ).toBeUndefined();
+  });
+  it('should return "User"', () => {
+    expect(
+      getDisplayedType(displayedCollaboratorTypes, {
+        collaboratorId: 'foo',
+        permissionType: 'user',
+        accessLevel: 'readOnly',
+      })
+    ).toEqual('User');
+  });
+  it('should return "Group"', () => {
+    expect(
+      getDisplayedType(displayedCollaboratorTypes, {
+        collaboratorId: 'foo',
+        permissionType: 'group',
+        accessLevel: 'readOnly',
+      })
+    ).toEqual('Group');
+  });
 });
 
 describe('WorkspaceCollaboratorTable', () => {
+  beforeEach(() => {
+    mockOverlays.openModal.mockClear();
+  });
+
   const mockProps = {
-    displayedCollaboratorTypes: [],
+    displayedCollaboratorTypes,
     permissionSettings: [
       {
         id: 0,
@@ -37,6 +78,11 @@ describe('WorkspaceCollaboratorTable', () => {
         type: 'group',
         group: 'group',
       },
+      {
+        id: 2,
+        modes: ['library_read', 'read'],
+        type: 'unknown',
+      },
     ],
     handleSubmitPermissionSettings: jest.fn(),
   };
@@ -86,6 +132,87 @@ describe('WorkspaceCollaboratorTable', () => {
     expect(mockOverlays.openModal).toHaveBeenCalled();
   });
 
+  it('should disable delete confirm button when submitting', async () => {
+    const permissionSettings = [
+      {
+        id: 0,
+        modes: ['library_write', 'write'],
+        type: 'user',
+        userId: 'admin',
+      },
+    ];
+    const handleSubmitPermissionSettingsMock = () =>
+      new Promise<void>((resolve) => {
+        setTimeout(resolve, 1000);
+      });
+
+    const { getByText, getByTestId, queryByText } = render(
+      <Provider>
+        <>
+          <WorkspaceCollaboratorTable
+            {...mockProps}
+            handleSubmitPermissionSettings={handleSubmitPermissionSettingsMock}
+            permissionSettings={permissionSettings}
+          />
+          <div data-test-subj="confirm-modal-container" />
+        </>
+      </Provider>
+    );
+
+    mockOverlays.openModal.mockReturnValue({
+      onClose: Promise.resolve(),
+      close: async () => {
+        ReactDOM.unmountComponentAtNode(getByTestId('confirm-modal-container'));
+      },
+    });
+    const action = getByTestId('workspace-detail-collaborator-table-actions-box');
+    fireEvent.click(action);
+    const deleteCollaborator = getByText('Delete collaborator');
+    fireEvent.click(deleteCollaborator);
+
+    mockOverlays.openModal.mock.calls[0][0](getByTestId('confirm-modal-container'));
+    await waitFor(() => {
+      expect(getByText('Confirm')).toBeInTheDocument();
+    });
+    jest.useFakeTimers();
+    fireEvent.click(getByText('Confirm'));
+    await waitFor(() => {
+      expect(getByText('Confirm').closest('button')).toBeDisabled();
+    });
+    jest.runAllTimers();
+    jest.useRealTimers();
+    await waitFor(() => {
+      expect(queryByText('Confirm')).toBe(null);
+    });
+  });
+
+  it('should openModal when clicking one selection delete', () => {
+    const permissionSettings = [
+      {
+        id: 0,
+        modes: ['library_write', 'write'],
+        type: 'user',
+        userId: 'admin',
+      },
+      {
+        id: 1,
+        modes: ['library_read', 'read'],
+        type: 'group',
+        group: 'group',
+      },
+    ];
+
+    const { getByText, getByTestId } = render(
+      <Provider>
+        <WorkspaceCollaboratorTable {...mockProps} permissionSettings={permissionSettings} />
+      </Provider>
+    );
+    fireEvent.click(getByTestId('checkboxSelectRow-0'));
+    const deleteCollaborator = getByText('Delete 1 collaborator');
+    fireEvent.click(deleteCollaborator);
+    expect(mockOverlays.openModal).toHaveBeenCalled();
+  });
+
   it('should openModal when clicking multi selection delete', () => {
     const permissionSettings = [
       {
@@ -114,7 +241,7 @@ describe('WorkspaceCollaboratorTable', () => {
     expect(mockOverlays.openModal).toHaveBeenCalled();
   });
 
-  it('should openModal when clicking action tools when multi selection', () => {
+  it('should openModal and show warning text when changing last admin to a less permission level', async () => {
     const permissionSettings = [
       {
         id: 0,
@@ -130,17 +257,105 @@ describe('WorkspaceCollaboratorTable', () => {
       },
     ];
 
-    const { getByText, getByTestId } = render(
+    const handleSubmitPermissionSettingsMock = jest.fn();
+
+    const { getByText, getByTestId, getByRole } = render(
       <Provider>
-        <WorkspaceCollaboratorTable {...mockProps} permissionSettings={permissionSettings} />
+        <WorkspaceCollaboratorTable
+          {...mockProps}
+          permissionSettings={permissionSettings}
+          handleSubmitPermissionSettings={handleSubmitPermissionSettingsMock}
+        />
+        <div data-test-subj="modal-container" />
       </Provider>
     );
+
+    mockOverlays.openModal.mockReturnValue({
+      onClose: Promise.resolve(),
+      close: async () => {
+        ReactDOM.unmountComponentAtNode(getByTestId('modal-container'));
+      },
+    });
+
     fireEvent.click(getByTestId('checkboxSelectRow-0'));
     fireEvent.click(getByTestId('checkboxSelectRow-1'));
     const actions = getByTestId('workspace-detail-collaborator-table-actions');
     fireEvent.click(actions);
-    const changeAccessLevel = getByText('Change access level');
-    fireEvent.click(changeAccessLevel);
-    expect(mockOverlays.openModal).toHaveBeenCalled();
+    fireEvent.click(getByText('Change access level'));
+    await waitFor(() => {
+      fireEvent.click(within(getByRole('dialog')).getByText('Read only'));
+    });
+    mockOverlays.openModal.mock.calls[0][0](getByTestId('modal-container'));
+    await waitFor(() => {
+      expect(getByText('Confirm')).toBeInTheDocument();
+    });
+    expect(
+      getByText(
+        'By changing the last administrator to a lesser access, only application administrators will be able to manage this workspace'
+      )
+    ).toBeInTheDocument();
+    jest.useFakeTimers();
+    fireEvent.click(getByText('Confirm'));
+
+    await waitFor(() => {
+      expect(handleSubmitPermissionSettingsMock).toHaveBeenCalledWith([
+        { id: 0, modes: ['library_read', 'read'], type: 'user', userId: 'admin' },
+        { group: 'group', id: 1, modes: ['library_read', 'read'], type: 'group' },
+      ]);
+    });
+    jest.runAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('should disable change access level confirm button when submitting', async () => {
+    const permissionSettings = [
+      {
+        id: 0,
+        modes: ['library_write', 'write'],
+        type: 'user',
+        userId: 'admin',
+      },
+    ];
+    const handleSubmitPermissionSettingsMock = () =>
+      new Promise<void>((resolve) => {
+        setTimeout(resolve, 1000);
+      });
+
+    const { getByText, getByTestId, getByRole } = render(
+      <Provider>
+        <>
+          <WorkspaceCollaboratorTable
+            {...mockProps}
+            handleSubmitPermissionSettings={handleSubmitPermissionSettingsMock}
+            permissionSettings={permissionSettings}
+          />
+          <div data-test-subj="confirm-modal-container" />
+        </>
+      </Provider>
+    );
+    mockOverlays.openModal.mockReturnValue({
+      onClose: Promise.resolve(),
+      close: async () => {
+        ReactDOM.unmountComponentAtNode(getByTestId('confirm-modal-container'));
+      },
+    });
+    const action = getByTestId('workspace-detail-collaborator-table-actions-box');
+    fireEvent.click(action);
+    fireEvent.click(getByText('Change access level'));
+    await waitFor(() => {
+      fireEvent.click(within(getByRole('dialog')).getByText('Read only'));
+    });
+
+    mockOverlays.openModal.mock.calls[0][0](getByTestId('confirm-modal-container'));
+    await waitFor(() => {
+      expect(getByText('Confirm')).toBeInTheDocument();
+    });
+    jest.useFakeTimers();
+    fireEvent.click(getByText('Confirm'));
+    await waitFor(() => {
+      expect(getByText('Confirm').closest('button')).toBeDisabled();
+    });
+    jest.runAllTimers();
+    jest.useRealTimers();
   });
 });
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_collaborator_table.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_collaborator_table.tsx
index 0b510cb1f597..d0b00739e922 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_collaborator_table.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_collaborator_table.tsx
@@ -17,48 +17,166 @@ import {
   EuiEmptyPrompt,
   EuiContextMenuPanelDescriptor,
   EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiConfirmModalProps,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
+import { useMountedState } from 'react-use';
 import { WorkspacePermissionSetting } from './types';
-import { WorkspacePermissionItemType, permissionModeOptions, typeOptions } from './constants';
-import { getPermissionModeId } from './utils';
+import { WorkspacePermissionItemType } from './constants';
+import { getPermissionModeId, isWorkspacePermissionSetting } from './utils';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { PermissionModeId, IWorkspaceResponse } from '../../../../../core/public';
 import { AddCollaboratorButton } from './add_collaborator_button';
 import { WorkspaceCollaboratorType } from '../../services/workspace_collaborator_types_service';
 import {
   WORKSPACE_ACCESS_LEVEL_NAMES,
   accessLevelNameToWorkspacePermissionModesMap,
 } from '../../constants';
-import { WorkspaceCollaboratorAccessLevel } from '../../types';
+import { WorkspaceCollaborator, WorkspaceCollaboratorAccessLevel } from '../../types';
+import { BackgroundPic } from '../../assets/background_pic';
 
 export type PermissionSetting = Pick<WorkspacePermissionSetting, 'id'> &
   Partial<WorkspacePermissionSetting>;
 
+// TODO: Update PermissionModeId to align with WorkspaceCollaboratorAccessLevel
+const permissionModeId2WorkspaceAccessLevelMap: {
+  [key in PermissionModeId]: WorkspaceCollaboratorAccessLevel;
+} = {
+  [PermissionModeId.Owner]: 'admin',
+  [PermissionModeId.Read]: 'readOnly',
+  [PermissionModeId.ReadAndWrite]: 'readAndWrite',
+};
+
+const deletionModalConfirmButton = i18n.translate(
+  'workspace.detail.collaborator.delete.modal.confirm',
+  {
+    defaultMessage: 'Confirm',
+  }
+);
+
+const deletionModalCancelButton = i18n.translate(
+  'workspace.detail.collaborator.delete.modal.cancel',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
+
+const deletionModalWarning = i18n.translate(
+  'workspace.workspace.detail.collaborator.modal.delete.warning',
+  {
+    defaultMessage:
+      'By removing the last administrator, only application administrators will be able to manage this workspace',
+  }
+);
+
+const changeAccessModalWarning = i18n.translate(
+  'workspace.workspace.detail.collaborator.modal.changeAccessLevel.warning',
+  {
+    defaultMessage:
+      'By changing the last administrator to a lesser access, only application administrators will be able to manage this workspace',
+  }
+);
+
+const deletionModalConfirm = i18n.translate('workspace.detail.collaborator.modal.delete.confirm', {
+  defaultMessage: 'Delete collaborator? The collaborators will not have access to the workspace.',
+});
+
+const BaseConfirmModal = ({
+  onCancel,
+  onConfirm,
+  ...restProps
+}: React.PropsWithChildren<
+  EuiConfirmModalProps & {
+    onConfirm: () => Promise<void>;
+    onCancel: () => void;
+  }
+>) => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const isMounted = useMountedState();
+  return (
+    <EuiConfirmModal
+      {...restProps}
+      onCancel={onCancel}
+      onConfirm={async () => {
+        setIsProcessing(true);
+        try {
+          await onConfirm();
+        } finally {
+          if (isMounted()) {
+            setIsProcessing(false);
+          }
+        }
+      }}
+      confirmButtonDisabled={isProcessing}
+      isLoading={isProcessing}
+    />
+  );
+};
+
+const convertPermissionSettingToWorkspaceCollaborator = (
+  permissionSetting: WorkspacePermissionSetting
+) => ({
+  collaboratorId:
+    permissionSetting.type === WorkspacePermissionItemType.User
+      ? permissionSetting.userId
+      : permissionSetting.group,
+  permissionType: permissionSetting.type,
+  accessLevel:
+    permissionModeId2WorkspaceAccessLevelMap[getPermissionModeId(permissionSetting.modes)],
+});
+
+export const getDisplayedType = (
+  supportCollaboratorTypes: WorkspaceCollaboratorType[],
+  collaborator: WorkspaceCollaborator
+) => {
+  for (const collaboratorType of supportCollaboratorTypes) {
+    const displayedType = collaboratorType.getDisplayedType?.(collaborator);
+    if (displayedType) {
+      return displayedType;
+    }
+  }
+};
+
 interface Props {
   permissionSettings: PermissionSetting[];
   displayedCollaboratorTypes: WorkspaceCollaboratorType[];
-  handleSubmitPermissionSettings: (permissionSettings: WorkspacePermissionSetting[]) => void;
+  handleSubmitPermissionSettings: (
+    permissionSettings: WorkspacePermissionSetting[]
+  ) => Promise<IWorkspaceResponse<boolean>>;
 }
 
+type PermissionSettingWithAccessLevelAndDisplayedType = PermissionSetting & {
+  accessLevel?: string;
+  displayedType?: string;
+};
+
 export const WorkspaceCollaboratorTable = ({
   permissionSettings,
   displayedCollaboratorTypes,
   handleSubmitPermissionSettings,
 }: Props) => {
   const [selection, setSelection] = useState<PermissionSetting[]>([]);
-  const { overlays } = useOpenSearchDashboards();
+  const {
+    overlays,
+    services: { notifications },
+  } = useOpenSearchDashboards();
 
-  const items = useMemo(() => {
+  const items: PermissionSettingWithAccessLevelAndDisplayedType[] = useMemo(() => {
     return permissionSettings.map((setting) => {
+      const collaborator = isWorkspacePermissionSetting(setting)
+        ? convertPermissionSettingToWorkspaceCollaborator(setting)
+        : undefined;
       const basicSettings = {
         ...setting,
         // This is used for table display and search match.
-        displayedType:
-          typeOptions.find((option) => option.value === setting.type)?.inputDisplay ?? '',
-        accessLevel:
-          permissionModeOptions.find(
-            (option) => option.value === getPermissionModeId(setting.modes ?? [])
-          )?.inputDisplay ?? '',
+        displayedType: collaborator
+          ? getDisplayedType(displayedCollaboratorTypes, collaborator)
+          : undefined,
+        accessLevel: collaborator
+          ? WORKSPACE_ACCESS_LEVEL_NAMES[collaborator.accessLevel]
+          : undefined,
       };
       // Unique primary key and filter null value
       if (setting.type === WorkspacePermissionItemType.User) {
@@ -75,55 +193,126 @@ export const WorkspaceCollaboratorTable = ({
       }
       return basicSettings;
     });
-  }, [permissionSettings]);
+  }, [permissionSettings, displayedCollaboratorTypes]);
+
+  const adminCollaboratorsNum = useMemo(() => {
+    const admins = items.filter((item) => item.accessLevel === WORKSPACE_ACCESS_LEVEL_NAMES.admin);
+    return admins.length;
+  }, [items]);
 
   const emptyStateMessage = useMemo(() => {
     return (
-      <EuiEmptyPrompt
-        title={
-          <h3>
-            {i18n.translate('workspace.workspaceDetail.collaborator.emptyState.title', {
-              defaultMessage: 'Your workspace doesn’t have any collaborators.',
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiEmptyPrompt
+            title={
+              <h3>
+                {i18n.translate('workspace.workspaceDetail.collaborator.emptyState.title', {
+                  defaultMessage: 'Your workspace doesn’t have any collaborators.',
+                })}
+              </h3>
+            }
+            titleSize="s"
+            body={i18n.translate('workspace.workspaceDetail.collaborator.emptyState.body', {
+              defaultMessage:
+                'Currently you’re the only user who has access to the workspace as an owner. Share this workspace by adding collaborators.',
             })}
-          </h3>
-        }
-        titleSize="s"
-        body={i18n.translate('workspace.workspaceDetail.collaborator.emptyState.body', {
-          defaultMessage:
-            'Currently you’re the only user who has access to the workspace as an owner. Share this workspace by adding collaborators.',
-        })}
-        actions={
-          <AddCollaboratorButton
-            displayedTypes={displayedCollaboratorTypes}
-            permissionSettings={permissionSettings}
-            handleSubmitPermissionSettings={handleSubmitPermissionSettings}
+            actions={
+              <AddCollaboratorButton
+                displayedTypes={displayedCollaboratorTypes}
+                permissionSettings={permissionSettings}
+                handleSubmitPermissionSettings={handleSubmitPermissionSettings}
+                fill={false}
+              />
+            }
           />
-        }
-      />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <BackgroundPic />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     );
   }, [displayedCollaboratorTypes, permissionSettings, handleSubmitPermissionSettings]);
 
-  const openDeleteConfirmModal = ({ onConfirm }: { onConfirm: () => void }) => {
+  const openDeleteConfirmModal = ({
+    onConfirm,
+    selections,
+  }: {
+    onConfirm: () => Promise<void>;
+    selections: PermissionSettingWithAccessLevelAndDisplayedType[];
+  }) => {
+    const adminOfSelection = selections.filter(
+      (item) => item.accessLevel === WORKSPACE_ACCESS_LEVEL_NAMES.admin
+    ).length;
+    const shouldShowWarning =
+      adminCollaboratorsNum === adminOfSelection && adminCollaboratorsNum !== 0;
     const modal = overlays.openModal(
-      <EuiConfirmModal
+      <BaseConfirmModal
+        data-test-subj="delete-confirm-modal"
         title={i18n.translate('workspace.detail.collaborator.actions.delete', {
           defaultMessage: 'Delete collaborator',
         })}
         onCancel={() => modal.close()}
         onConfirm={onConfirm}
-        cancelButtonText="Cancel"
-        confirmButtonText="Confirm"
+        cancelButtonText={deletionModalCancelButton}
+        confirmButtonText={deletionModalConfirmButton}
       >
-        <EuiText>
+        <EuiText color={shouldShowWarning ? 'danger' : 'default'}>
+          <p>{shouldShowWarning ? deletionModalWarning : deletionModalConfirm}</p>
+        </EuiText>
+      </BaseConfirmModal>
+    );
+    return modal;
+  };
+
+  const openChangeAccessLevelModal = ({
+    onConfirm,
+    selections,
+    type,
+  }: {
+    onConfirm: () => Promise<void>;
+    selections: PermissionSettingWithAccessLevelAndDisplayedType[];
+    type: WorkspaceCollaboratorAccessLevel;
+  }) => {
+    let shouldShowWarning = false;
+    if (type !== 'admin') {
+      const adminOfSelection = selections.filter(
+        (item) => item.accessLevel === WORKSPACE_ACCESS_LEVEL_NAMES.admin
+      ).length;
+      shouldShowWarning = adminCollaboratorsNum - adminOfSelection < 1 && adminCollaboratorsNum > 0;
+    }
+
+    const modal = overlays.openModal(
+      <BaseConfirmModal
+        data-test-subj="change-access-confirm-modal"
+        title={i18n.translate('workspace.detail.collaborator.table.change.access.level', {
+          defaultMessage: 'Change access level',
+        })}
+        onCancel={() => {
+          modal.close();
+        }}
+        onConfirm={onConfirm}
+        cancelButtonText={deletionModalCancelButton}
+        confirmButtonText={deletionModalConfirmButton}
+      >
+        <EuiText color={shouldShowWarning ? 'danger' : 'default'}>
           <p>
-            {i18n.translate('workspace.detail.collaborator.delete.confirm', {
-              defaultMessage:
-                'Delete collaborator? The collaborators will not have access to the workspace.',
-            })}
+            {shouldShowWarning
+              ? changeAccessModalWarning
+              : i18n.translate('workspace.detail.collaborator.changeAccessLevel.confirmation', {
+                  defaultMessage:
+                    'Do you want to change access level of {numCollaborators} collaborator{pluralSuffix} to "{accessLevel}"?',
+                  values: {
+                    numCollaborators: selections.length,
+                    pluralSuffix: selections.length > 1 ? 's' : '',
+                    accessLevel: type,
+                  },
+                })}
           </p>
         </EuiText>
-      </EuiConfirmModal>
+      </BaseConfirmModal>
     );
+
     return modal;
   };
 
@@ -134,24 +323,45 @@ export const WorkspaceCollaboratorTable = ({
 
     const onClick = () => {
       const modal = openDeleteConfirmModal({
-        onConfirm: () => {
+        onConfirm: async () => {
           let newSettings = permissionSettings;
           selection.forEach(({ id }) => {
             newSettings = newSettings.filter((_item) => _item.id !== id);
           });
-          handleSubmitPermissionSettings(newSettings as WorkspacePermissionSetting[]);
-          setSelection([]);
-          modal.close();
+          const result = await handleSubmitPermissionSettings(
+            newSettings as WorkspacePermissionSetting[]
+          );
+          if (result?.success) {
+            notifications?.toasts?.addSuccess({
+              title: i18n.translate('workspace.collaborator.delete.success.message', {
+                defaultMessage:
+                  'Delete collaborator{pluralSuffix, select, true {} other {s}} successfully.',
+                values: {
+                  pluralSuffix: selection.length === 1,
+                },
+              }),
+            });
+            setSelection([]);
+            modal.close();
+          }
         },
+        selections: selection,
       });
     };
 
     return (
-      <EuiButton color="danger" iconType="trash" onClick={onClick}>
-        {i18n.translate('workspace.detail.collaborator.delete', {
-          defaultMessage: 'Delete {num} collaborators',
+      <EuiButton
+        color="danger"
+        iconType="trash"
+        onClick={onClick}
+        data-test-subj="confirm-delete-button"
+        size="s"
+      >
+        {i18n.translate('workspace.detail.collaborator.delete.button.info', {
+          defaultMessage: 'Delete {num} collaborator{pluralSuffix, select, true {} other {s}}',
           values: {
             num: selection.length,
+            pluralSuffix: selection.length === 1,
           },
         })}
       </EuiButton>
@@ -168,6 +378,7 @@ export const WorkspaceCollaboratorTable = ({
         isTableAction={false}
         selection={selection}
         handleSubmitPermissionSettings={handleSubmitPermissionSettings}
+        openChangeAccessLevelModal={openChangeAccessLevelModal}
       />
     );
   };
@@ -176,64 +387,83 @@ export const WorkspaceCollaboratorTable = ({
     box: {
       incremental: true,
     },
+    compressed: true,
     filters: [
       {
         type: 'field_value_selection',
         field: 'displayedType',
+        compressed: true,
         name: 'Type',
-        multiSelect: false,
-        options: Array.from(new Set(items.map(({ displayedType }) => displayedType ?? ''))).map(
-          (item) => ({
-            value: item,
-            name: item,
-          })
-        ),
+        multiSelect: 'or',
+        options: Array.from(
+          new Set(items.flatMap(({ displayedType }) => (!!displayedType ? [displayedType] : [])))
+        ).map((item) => ({
+          value: item,
+          name: item,
+        })),
       },
       {
         type: 'field_value_selection',
         field: 'accessLevel',
+        compressed: true,
         name: 'Access level',
-        multiSelect: false,
-        options: Array.from(new Set(items.map(({ accessLevel }) => accessLevel ?? ''))).map(
-          (item) => ({
-            value: item,
-            name: item,
-          })
-        ),
+        multiSelect: 'or',
+        options: Array.from(
+          new Set(items.flatMap(({ accessLevel }) => (!!accessLevel ? [accessLevel] : [])))
+        ).map((item) => ({
+          value: item,
+          name: item,
+        })),
       },
     ],
     toolsLeft: renderToolsLeft(),
     toolsRight: renderToolsRight(),
   };
 
-  const columns: Array<EuiBasicTableColumn<PermissionSetting>> = [
+  const columns: Array<EuiBasicTableColumn<PermissionSettingWithAccessLevelAndDisplayedType>> = [
     {
       field: 'primaryId',
-      name: 'ID',
+      name: i18n.translate('workspace.collaborator.id.name', {
+        defaultMessage: 'ID',
+      }),
+      width: '30%',
     },
     {
       field: 'displayedType',
-      name: 'Type',
+      name: i18n.translate('workspace.collaborator.type.name', {
+        defaultMessage: 'Type',
+      }),
+      render: (displayedType: string) => displayedType || <>&mdash;</>,
+      width: '30%',
     },
     {
       field: 'accessLevel',
-      name: 'Access level',
+      name: i18n.translate('workspace.collaborator.access.level.name', {
+        defaultMessage: 'Access level',
+      }),
+      render: (accessLevel: string) => accessLevel || <>&mdash;</>,
+      width: '30%',
     },
     {
-      name: 'Actions',
+      name: i18n.translate('workspace.collaborator.actions.name', {
+        defaultMessage: 'Actions',
+      }),
       field: '',
-      render: (item: PermissionSetting) => (
+      width: '10%',
+      align: 'right',
+      render: (item: PermissionSettingWithAccessLevelAndDisplayedType) => (
         <Actions
           isTableAction={true}
           selection={[item]}
           permissionSettings={permissionSettings}
           handleSubmitPermissionSettings={handleSubmitPermissionSettings}
           openDeleteConfirmModal={openDeleteConfirmModal}
+          openChangeAccessLevelModal={openChangeAccessLevelModal}
         />
       ),
     },
   ];
-  const selectionValue: EuiTableSelectionType<PermissionSetting> = {
+  const selectionValue: EuiTableSelectionType<PermissionSettingWithAccessLevelAndDisplayedType> = {
     onSelectionChange: (newSelection) => setSelection(newSelection),
   };
 
@@ -241,6 +471,7 @@ export const WorkspaceCollaboratorTable = ({
     <EuiInMemoryTable
       items={items}
       columns={columns}
+      compressed={true}
       search={search}
       itemId="id"
       pagination={true}
@@ -257,62 +488,82 @@ const Actions = ({
   permissionSettings,
   handleSubmitPermissionSettings,
   openDeleteConfirmModal,
+  openChangeAccessLevelModal,
 }: {
   isTableAction: boolean;
-  selection?: PermissionSetting[];
+  selection?: PermissionSettingWithAccessLevelAndDisplayedType[];
   permissionSettings: PermissionSetting[];
-  handleSubmitPermissionSettings: (permissionSettings: WorkspacePermissionSetting[]) => void;
-  openDeleteConfirmModal?: ({ onConfirm }: { onConfirm: () => void }) => { close: () => void };
+  handleSubmitPermissionSettings: (
+    permissionSettings: WorkspacePermissionSetting[]
+  ) => Promise<IWorkspaceResponse<boolean>>;
+  openDeleteConfirmModal?: ({
+    onConfirm,
+    selections,
+  }: {
+    onConfirm: () => Promise<void>;
+    selections: PermissionSettingWithAccessLevelAndDisplayedType[];
+  }) => { close: () => void };
+  openChangeAccessLevelModal?: ({
+    onConfirm,
+    selections,
+    type,
+  }: {
+    onConfirm: () => Promise<void>;
+    selections: PermissionSettingWithAccessLevelAndDisplayedType[];
+    type: WorkspaceCollaboratorAccessLevel;
+  }) => { close: () => void };
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const { overlays } = useOpenSearchDashboards();
+  const {
+    services: { notifications },
+  } = useOpenSearchDashboards();
 
   const accessLevelOptions = (Object.keys(
     WORKSPACE_ACCESS_LEVEL_NAMES
   ) as WorkspaceCollaboratorAccessLevel[]).map((level) => ({
     name: WORKSPACE_ACCESS_LEVEL_NAMES[level],
-    onClick: async () => {
+    onClick: () => {
       setIsPopoverOpen(false);
-      if (selection) {
-        const modal = overlays.openModal(
-          <EuiConfirmModal
-            title={i18n.translate('workspace.detail.collaborator.table.change.access.level', {
-              defaultMessage: 'Change access level',
-            })}
-            onCancel={() => modal.close()}
-            onConfirm={() => {
-              let newSettings = permissionSettings;
-              selection.forEach(({ id }) => {
-                newSettings = newSettings.map((item) =>
-                  id === item.id
-                    ? {
-                        ...item,
-                        modes: accessLevelNameToWorkspacePermissionModesMap[level],
-                      }
-                    : item
-                );
-              });
-              handleSubmitPermissionSettings(newSettings as WorkspacePermissionSetting[]);
-              modal.close();
-            }}
-            cancelButtonText="Cancel"
-            confirmButtonText="Confirm"
-          >
-            <EuiText>
-              <p>
-                {i18n.translate('workspace.detail.collaborator.changeAccessLevel.confirmation', {
+      if (selection && openChangeAccessLevelModal) {
+        const modal = openChangeAccessLevelModal({
+          onConfirm: async () => {
+            let newSettings = permissionSettings;
+            selection.forEach(({ id }) => {
+              newSettings = newSettings.map((item) =>
+                id === item.id
+                  ? {
+                      ...item,
+                      modes: accessLevelNameToWorkspacePermissionModesMap[level],
+                    }
+                  : item
+              );
+            });
+
+            const result = await handleSubmitPermissionSettings(
+              newSettings as WorkspacePermissionSetting[]
+            );
+
+            if (result?.success) {
+              notifications?.toasts?.addSuccess({
+                title: i18n.translate('workspace.detail.collaborator.change.access.success.title', {
+                  defaultMessage: 'The access level changed',
+                }),
+                text: i18n.translate('workspace.detail.collaborator.change.access.success.body', {
                   defaultMessage:
-                    'Do you want to change access level to {numCollaborators} collaborator{pluralSuffix} to "{accessLevel}"?',
+                    'The access level is changed to {level} for {num} collaborator{pluralSuffix, select, true {} other {s}}.',
                   values: {
-                    numCollaborators: selection.length,
-                    pluralSuffix: selection.length > 1 ? 's' : '',
-                    accessLevel: WORKSPACE_ACCESS_LEVEL_NAMES[level],
+                    level: WORKSPACE_ACCESS_LEVEL_NAMES[level],
+                    num: selection.length,
+                    pluralSuffix: selection.length === 1 ? '' : 's',
                   },
-                })}
-              </p>
-            </EuiText>
-          </EuiConfirmModal>
-        );
+                }),
+              });
+            }
+            modal.close();
+          },
+          selections: selection,
+          type: level,
+        });
       }
     },
     icon: '',
@@ -336,14 +587,28 @@ const Actions = ({
             setIsPopoverOpen(false);
             if (selection && openDeleteConfirmModal) {
               const modal = openDeleteConfirmModal({
-                onConfirm: () => {
+                onConfirm: async () => {
                   let newSettings = permissionSettings;
                   selection.forEach(({ id }) => {
                     newSettings = newSettings.filter((_item) => _item.id !== id);
                   });
-                  handleSubmitPermissionSettings(newSettings as WorkspacePermissionSetting[]);
+                  const result = await handleSubmitPermissionSettings(
+                    newSettings as WorkspacePermissionSetting[]
+                  );
+                  if (result?.success) {
+                    notifications?.toasts?.addSuccess({
+                      title: i18n.translate('workspace.detail.collaborator.delete.success', {
+                        defaultMessage:
+                          'Delete collaborator{pluralSuffix, select, true {} other {s}} successfully.',
+                        values: {
+                          pluralSuffix: selection.length === 1,
+                        },
+                      }),
+                    });
+                  }
                   modal.close();
                 },
+                selections: selection,
               });
             }
           },
@@ -361,6 +626,7 @@ const Actions = ({
 
   const button = isTableAction ? (
     <EuiButtonIcon
+      aria-label="workspace-collaborator-table-actions"
       iconType="boxesHorizontal"
       onClick={() => setIsPopoverOpen(true)}
       data-test-subj="workspace-detail-collaborator-table-actions-box"
@@ -368,6 +634,7 @@ const Actions = ({
   ) : (
     <EuiButton
       iconType="arrowDown"
+      size="s"
       iconSide="right"
       onClick={() => setIsPopoverOpen(true)}
       data-test-subj="workspace-detail-collaborator-table-actions"
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx
deleted file mode 100644
index 1466ef3bae66..000000000000
--- a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import {
-  EuiSpacer,
-  EuiForm,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTitle,
-  EuiText,
-  EuiPanel,
-  EuiSmallButton,
-  EuiHorizontalRule,
-} from '@elastic/eui';
-
-import { i18n } from '@osd/i18n';
-import { useObservable } from 'react-use';
-import { WorkspaceFormProps } from './types';
-import { DetailTab } from './constants';
-import { WorkspaceFormErrorCallout } from './workspace_form_error_callout';
-import { useWorkspaceFormContext } from './workspace_form_context';
-import { WorkspaceDetailFormDetails } from './workspace_detail_form_details';
-import { WorkspaceCollaboratorTable } from './workspace_collaborator_table';
-import { WorkspaceCollaboratorTypesService } from '../../services/workspace_collaborator_types_service';
-import { AddCollaboratorButton } from './add_collaborator_button';
-import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-
-interface WorkspaceDetailedFormProps extends Omit<WorkspaceFormProps, 'onAppLeave'> {
-  detailTab?: DetailTab;
-  detailTitle?: string;
-}
-
-export const WorkspaceDetailForm = (props: WorkspaceDetailedFormProps) => {
-  const { detailTab, detailTitle, availableUseCases } = props;
-  const {
-    formId,
-    formData,
-    isEditing,
-    formErrors,
-    setIsEditing,
-    numberOfErrors,
-    handleResetForm,
-    handleFormSubmit,
-    handleSubmitPermissionSettings,
-  } = useWorkspaceFormContext();
-
-  const {
-    services: { collaboratorTypes },
-  } = useOpenSearchDashboards<{ collaboratorTypes: WorkspaceCollaboratorTypesService }>();
-
-  const displayedCollaboratorTypes = useObservable(collaboratorTypes.getTypes$()) ?? [];
-
-  return (
-    <EuiForm
-      id={formId}
-      onSubmit={(event) => {
-        handleFormSubmit(event);
-      }}
-      component="form"
-    >
-      <EuiPanel>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="s">
-              <h2>{detailTitle}</h2>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            {detailTab === DetailTab.Collaborators ? (
-              <AddCollaboratorButton
-                displayedTypes={displayedCollaboratorTypes}
-                permissionSettings={formData.permissionSettings}
-                handleSubmitPermissionSettings={handleSubmitPermissionSettings}
-              />
-            ) : isEditing ? (
-              <EuiSmallButton
-                onClick={handleResetForm}
-                data-test-subj="workspaceForm-workspaceDetails-discardChanges"
-              >
-                {i18n.translate('workspace.detail.button.discardChanges', {
-                  defaultMessage: 'Discard changes',
-                })}
-              </EuiSmallButton>
-            ) : (
-              <EuiSmallButton
-                onClick={() => setIsEditing((prevIsEditing) => !prevIsEditing)}
-                data-test-subj="workspaceForm-workspaceDetails-edit"
-              >
-                {i18n.translate('workspace.detail.button.edit', {
-                  defaultMessage: 'Edit',
-                })}
-              </EuiSmallButton>
-            )}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiText size="s">
-          {i18n.translate('workspace.detail.collaborator.description', {
-            defaultMessage: 'Manage workspace access and permissions.',
-          })}
-        </EuiText>
-        {detailTab === DetailTab.Collaborators ? (
-          <EuiSpacer size="m" />
-        ) : (
-          <EuiHorizontalRule margin="m" />
-        )}
-        {numberOfErrors > 0 && (
-          <>
-            <WorkspaceFormErrorCallout errors={formErrors} />
-            <EuiSpacer />
-          </>
-        )}
-        {detailTab === DetailTab.Details && (
-          <WorkspaceDetailFormDetails availableUseCases={availableUseCases} />
-        )}
-        {detailTab === DetailTab.Collaborators && (
-          <WorkspaceCollaboratorTable
-            permissionSettings={formData.permissionSettings}
-            displayedCollaboratorTypes={displayedCollaboratorTypes}
-            handleSubmitPermissionSettings={handleSubmitPermissionSettings}
-          />
-        )}
-      </EuiPanel>
-      <EuiSpacer />
-    </EuiForm>
-  );
-};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form_context.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form_context.tsx
index 0ec3bffebc77..45d77f7aef5f 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_form_context.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_form_context.tsx
@@ -32,7 +32,9 @@ interface WorkspaceFormContextProps {
   >;
   setSelectedDataSourceConnections: React.Dispatch<React.SetStateAction<DataSourceConnection[]>>;
   onAppLeave: AppMountParameters['onAppLeave'];
-  handleSubmitPermissionSettings: (permissionSettings: WorkspacePermissionSetting[]) => void;
+  handleSubmitPermissionSettings: (
+    permissionSettings: WorkspacePermissionSetting[]
+  ) => Promise<void>;
 }
 
 const initialContextValue: WorkspaceFormContextProps = {} as WorkspaceFormContextProps;
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.test.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.test.tsx
index d8a582ce97eb..193eef5ab6fc 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.test.tsx
@@ -58,7 +58,7 @@ describe('WorkspaceFormErrorCallout', () => {
       },
     });
 
-    expect(renderResult.getByText('Color: Enter a valid color.')).toBeInTheDocument();
+    expect(renderResult.getByText('Color: Choose a valid color.')).toBeInTheDocument();
   });
 
   it('should render use case suggestion', () => {
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.tsx
index 2c32fde1d100..4dd9f9141da3 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_form_error_callout.tsx
@@ -44,7 +44,7 @@ const getSuggestionFromErrorCode = (error: WorkspaceFormError) => {
       });
     case WorkspaceFormErrorCode.InvalidColor:
       return i18n.translate('workspace.form.errorCallout.invalidColor', {
-        defaultMessage: 'Enter a valid color.',
+        defaultMessage: 'Choose a valid color.',
       });
     default:
       return error.message;
diff --git a/src/plugins/workspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap b/src/plugins/workspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap
index a9e8913a921d..bfca9170fa36 100644
--- a/src/plugins/workspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_initial/__snapshots__/workspace_initial.test.tsx.snap
@@ -11,6 +11,10 @@ exports[`WorkspaceInitial render workspace initial page normally when user is OS
     >
       <span
         data-euiicon-type="logoOpenSearch"
+        style="position: fixed;"
+      />
+      <div
+        class="euiSpacer euiSpacer--xl"
       />
       <div
         class="euiSpacer euiSpacer--l"
@@ -20,7 +24,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is OS
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="width: 1264px;"
+          style="max-width: 1264px; width: 100%;"
         >
           <div
             class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -41,7 +45,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is OS
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
                 <div
                   class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -104,17 +108,17 @@ exports[`WorkspaceInitial render workspace initial page normally when user is OS
               </div>
             </div>
             <div
-              class="euiFlexItem"
+              class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive eui-xScroll"
               >
                 <div
                   class="euiFlexItem"
                 >
                   <div
                     class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
-                    style="height: 416px; min-width: 235px;"
+                    style="height: 416px; min-width: 240px;"
                   >
                     <div
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner workspace-initial-use-case-card__observability"
@@ -241,7 +245,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is OS
                 >
                   <div
                     class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
-                    style="height: 416px; min-width: 235px;"
+                    style="height: 416px; min-width: 240px;"
                   >
                     <div
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner workspace-initial-use-case-card__security-analytics"
@@ -368,7 +372,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is OS
                 >
                   <div
                     class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
-                    style="height: 416px; min-width: 235px;"
+                    style="height: 416px; min-width: 240px;"
                   >
                     <div
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner workspace-initial-use-case-card__essentials"
@@ -495,7 +499,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is OS
                 >
                   <div
                     class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
-                    style="height: 416px; min-width: 235px;"
+                    style="height: 416px; min-width: 240px;"
                   >
                     <div
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner workspace-initial-use-case-card__search"
@@ -732,6 +736,10 @@ exports[`WorkspaceInitial render workspace initial page normally when user is no
     >
       <span
         data-euiicon-type="logoOpenSearch"
+        style="position: fixed;"
+      />
+      <div
+        class="euiSpacer euiSpacer--xl"
       />
       <div
         class="euiSpacer euiSpacer--l"
@@ -741,7 +749,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is no
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="width: 1264px;"
+          style="max-width: 1264px; width: 100%;"
         >
           <div
             class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -762,7 +770,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is no
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
                 <div
                   class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -792,17 +800,17 @@ exports[`WorkspaceInitial render workspace initial page normally when user is no
               </div>
             </div>
             <div
-              class="euiFlexItem"
+              class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive eui-xScroll"
               >
                 <div
                   class="euiFlexItem"
                 >
                   <div
                     class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
-                    style="height: 416px; min-width: 235px;"
+                    style="height: 416px; min-width: 240px;"
                   >
                     <div
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner workspace-initial-use-case-card__observability"
@@ -905,7 +913,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is no
                 >
                   <div
                     class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
-                    style="height: 416px; min-width: 235px;"
+                    style="height: 416px; min-width: 240px;"
                   >
                     <div
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner workspace-initial-use-case-card__security-analytics"
@@ -1008,7 +1016,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is no
                 >
                   <div
                     class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
-                    style="height: 416px; min-width: 235px;"
+                    style="height: 416px; min-width: 240px;"
                   >
                     <div
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner workspace-initial-use-case-card__essentials"
@@ -1111,7 +1119,7 @@ exports[`WorkspaceInitial render workspace initial page normally when user is no
                 >
                   <div
                     class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero euiSplitPanel"
-                    style="height: 416px; min-width: 235px;"
+                    style="height: 416px; min-width: 240px;"
                   >
                     <div
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner workspace-initial-use-case-card__search"
diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.scss b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.scss
index 99fd7c1f37e0..56a762a0fca0 100644
--- a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.scss
+++ b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.scss
@@ -17,4 +17,5 @@
   margin: auto;
   padding-left: 48px;
   padding-right: 48px;
+  width: 100%;
 }
diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
index 4d049a8dd892..bcdb26d60005 100644
--- a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
+++ b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
@@ -157,7 +157,12 @@ export const WorkspaceInitial = ({ registeredUseCases$ }: WorkspaceInitialProps)
       </EuiFlexItem>
       <EuiSpacer size="l" />
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup direction="row" justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexGroup
+          direction="row"
+          justifyContent="spaceBetween"
+          alignItems="center"
+          gutterSize="m"
+        >
           <EuiFlexItem grow={false}>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <EuiIcon type="wsSelector" size="m" />
@@ -181,8 +186,8 @@ export const WorkspaceInitial = ({ registeredUseCases$ }: WorkspaceInitialProps)
           <EuiFlexItem grow={false}>{isDashboardAdmin && createWorkspacePopover}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="m">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="m" className="eui-xScroll">
           {useCaseCards}
         </EuiFlexGroup>
       </EuiFlexItem>
@@ -241,15 +246,15 @@ export const WorkspaceInitial = ({ registeredUseCases$ }: WorkspaceInitialProps)
   return (
     <EuiPage style={{ minHeight: '100vh' }}>
       <EuiPageBody>
-        <EuiIcon type="logoOpenSearch" size="xl" />
+        <EuiIcon type="logoOpenSearch" size="xl" style={{ position: 'fixed' }} />
+        <EuiSpacer size="xl" />
         <EuiSpacer size="l" />
         <EuiFlexGroup
           direction="column"
           alignItems="center"
-          justifyContent="flexStart"
           className="workspace-initial__flex-group-responsive"
         >
-          <EuiFlexItem grow={false} style={{ width: '1264px' }}>
+          <EuiFlexItem grow={false} style={{ maxWidth: '1264px', width: '100%' }}>
             {content}
           </EuiFlexItem>
         </EuiFlexGroup>
diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_use_case_card.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_use_case_card.tsx
index c38e253239c6..2e0843cd1d22 100644
--- a/src/plugins/workspace/public/components/workspace_initial/workspace_use_case_card.tsx
+++ b/src/plugins/workspace/public/components/workspace_initial/workspace_use_case_card.tsx
@@ -91,7 +91,7 @@ export const WorkspaceUseCaseCard = ({
     return (
       <Fragment key={workspace.id}>
         <EuiContextMenuItem
-          href={getUseCaseUrl(useCase, workspace, application, http)}
+          href={getUseCaseUrl(useCase, workspace.id, application, http)}
           icon={<EuiIcon type={useCaseIcon} color={workspace.color} size="m" />}
           toolTipContent={workspace.name}
           size="s"
@@ -111,7 +111,7 @@ export const WorkspaceUseCaseCard = ({
   };
 
   return (
-    <EuiSplitPanel.Outer style={{ height: '416px', minWidth: '235px' }}>
+    <EuiSplitPanel.Outer style={{ height: '416px', minWidth: '240px' }}>
       <EuiSplitPanel.Inner
         paddingSize="m"
         grow={!hasWorkspaces}
diff --git a/src/plugins/workspace/public/components/workspace_list/__snapshots__/default_workspace.test.tsx.snap b/src/plugins/workspace/public/components/workspace_list/__snapshots__/default_workspace.test.tsx.snap
index 57c41452231e..1c2c3a3d01cb 100644
--- a/src/plugins/workspace/public/components/workspace_list/__snapshots__/default_workspace.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_list/__snapshots__/default_workspace.test.tsx.snap
@@ -212,9 +212,10 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                       <span
                         class=""
                       >
-                        <button
+                        <a
                           class="euiLink euiLink--primary"
-                          type="button"
+                          href="http://localhost/w/id1/undefined"
+                          rel="noreferrer"
                         >
                           <div
                             class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -229,7 +230,7 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                               </div>
                             </div>
                           </div>
-                        </button>
+                        </a>
                       </span>
                     </div>
                   </td>
@@ -380,9 +381,10 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                       <span
                         class=""
                       >
-                        <button
+                        <a
                           class="euiLink euiLink--primary"
-                          type="button"
+                          href="http://localhost/w/id2/undefined"
+                          rel="noreferrer"
                         >
                           <div
                             class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -397,7 +399,7 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                               </div>
                             </div>
                           </div>
-                        </button>
+                        </a>
                       </span>
                     </div>
                   </td>
@@ -548,9 +550,10 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                       <span
                         class=""
                       >
-                        <button
+                        <a
                           class="euiLink euiLink--primary"
-                          type="button"
+                          href="http://localhost/w/id3/undefined"
+                          rel="noreferrer"
                         >
                           <div
                             class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -565,7 +568,7 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                               </div>
                             </div>
                           </div>
-                        </button>
+                        </a>
                       </span>
                     </div>
                   </td>
diff --git a/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap b/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
index 31b7c92abcbf..99a5203b3cc0 100644
--- a/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
@@ -12,20 +12,20 @@ exports[`WorkspaceList should render title and table normally 1`] = `
     >
       <div>
         <div
-          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
         >
           <div
             class="euiFlexItem euiSearchBar__searchHolder"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                  class="euiFieldSearch euiFieldSearch--fullWidth"
+                  class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                   placeholder="Search..."
                   type="search"
                   value=""
@@ -60,7 +60,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
                     type="button"
                   >
                     <span
@@ -90,7 +90,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
           </div>
         </div>
         <div
-          class="euiSpacer euiSpacer--l"
+          class="euiSpacer euiSpacer--m"
         />
         <div
           class="euiBasicTable"
@@ -357,9 +357,10 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                       <span
                         class=""
                       >
-                        <button
+                        <a
                           class="euiLink euiLink--primary"
-                          type="button"
+                          href="http://localhost/w/id1/workspace_detail"
+                          rel="noreferrer"
                         >
                           <div
                             class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -374,7 +375,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                               </div>
                             </div>
                           </div>
-                        </button>
+                        </a>
                       </span>
                     </div>
                   </td>
@@ -529,9 +530,10 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                       <span
                         class=""
                       >
-                        <button
+                        <a
                           class="euiLink euiLink--primary"
-                          type="button"
+                          href="http://localhost/w/id2/discover"
+                          rel="noreferrer"
                         >
                           <div
                             class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -546,7 +548,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                               </div>
                             </div>
                           </div>
-                        </button>
+                        </a>
                       </span>
                     </div>
                   </td>
@@ -701,9 +703,10 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                       <span
                         class=""
                       >
-                        <button
+                        <a
                           class="euiLink euiLink--primary"
-                          type="button"
+                          href="http://localhost/w/id3/discover"
+                          rel="noreferrer"
                         >
                           <div
                             class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -718,7 +721,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                               </div>
                             </div>
                           </div>
-                        </button>
+                        </a>
                       </span>
                     </div>
                   </td>
diff --git a/src/plugins/workspace/public/components/workspace_list/index.test.tsx b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
index f7d031b4115b..ff4ad0647dfc 100644
--- a/src/plugins/workspace/public/components/workspace_list/index.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
@@ -9,7 +9,7 @@ import { of } from 'rxjs';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import { I18nProvider } from '@osd/i18n/react';
 import { coreMock } from '../../../../../core/public/mocks';
-import { navigateToWorkspaceDetail } from '../utils/workspace';
+import { navigateToAppWithinWorkspace } from '../utils/workspace';
 import { createMockedRegisteredUseCases$ } from '../../mocks';
 import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
 import { WorkspaceList } from './index';
@@ -110,6 +110,7 @@ function getWrapWorkspaceListInContext(
       isDashboardAdmin,
     },
   };
+  coreStartMock.application.getUrlForApp.mockImplementation((id) => `http://localhost/${id}`);
 
   const mockHeaderControl = ({ controls }) => {
     return controls?.[0].description ?? controls?.[0].renderComponent ?? null;
@@ -191,9 +192,9 @@ describe('WorkspaceList', () => {
 
   it('should be able to switch workspace after clicking name', async () => {
     const { getByText } = render(getWrapWorkspaceListInContext());
-    const nameLink = getByText('name1');
+    const nameLink = getByText('name2');
     fireEvent.click(nameLink);
-    expect(navigateToWorkspaceDetail).toBeCalled();
+    expect(nameLink.closest('a')).toHaveAttribute('href', 'http://localhost/w/id2/discover');
   });
 
   it('should be able to perform the time format transformation', async () => {
@@ -233,7 +234,7 @@ describe('WorkspaceList', () => {
     fireEvent.click(operationIcons);
     const editIcon = getByText('Edit');
     fireEvent.click(editIcon);
-    expect(navigateToWorkspaceDetail).toBeCalled();
+    expect(navigateToAppWithinWorkspace).toBeCalled();
   });
 
   it('should be able to call delete modal after clicking delete button', async () => {
@@ -281,12 +282,10 @@ describe('WorkspaceList', () => {
 
   it('should render data source badge when more than two data sources', async () => {
     const { getByTestId } = render(getWrapWorkspaceListInContext());
-    expect(navigateToWorkspaceDetail).not.toHaveBeenCalled();
     await waitFor(() => {
-      const badge = getByTestId('workspaceList-more-dataSources-badge');
+      const badge = getByTestId('workspaceList-more-id1-badge');
       expect(badge).toBeInTheDocument();
-      fireEvent.click(badge);
+      expect(badge.closest('a')).toHaveAttribute('href', 'http://localhost/w/id1/dataSources');
     });
-    expect(navigateToWorkspaceDetail).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/plugins/workspace/public/components/workspace_list/index.tsx b/src/plugins/workspace/public/components/workspace_list/index.tsx
index 65287a8ba89d..158713186c0d 100644
--- a/src/plugins/workspace/public/components/workspace_list/index.tsx
+++ b/src/plugins/workspace/public/components/workspace_list/index.tsx
@@ -32,16 +32,25 @@ import { startCase } from 'lodash';
 import { useLocation } from 'react-router-dom';
 import { WorkspaceAttribute, WorkspaceAttributeWithPermission } from '../../../../../core/public';
 import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public';
-import { navigateToWorkspaceDetail } from '../utils/workspace';
-import { DetailTab } from '../workspace_form/constants';
+import { navigateToAppWithinWorkspace } from '../utils/workspace';
 
-import { DEFAULT_WORKSPACE, WORKSPACE_CREATE_APP_ID } from '../../../common/constants';
+import {
+  DEFAULT_WORKSPACE,
+  WORKSPACE_CREATE_APP_ID,
+  WORKSPACE_DETAIL_APP_ID,
+} from '../../../common/constants';
 
 import { DeleteWorkspaceModal } from '../delete_workspace_modal';
-import { getDataSourcesList, extractUseCaseTitleFromFeatures } from '../../utils';
+import {
+  getDataSourcesList,
+  extractUseCaseTitleFromFeatures,
+  getFirstUseCaseOfFeatureConfigs,
+  getUseCaseUrl,
+} from '../../utils';
 import { WorkspaceUseCase } from '../../types';
 import { NavigationPublicPluginStart } from '../../../../../plugins/navigation/public';
 import { DataSourceAttributesWithWorkspaces } from '../../types';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 
 export interface WorkspaceListProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
@@ -232,14 +241,25 @@ export const WorkspaceListInner = ({
   };
 
   const handleSwitchWorkspace = useCallback(
-    (id: string, tab?: DetailTab) => {
+    (workspaceId: string, appId: string) => {
       if (application && http) {
-        navigateToWorkspaceDetail({ application, http }, id, tab);
+        navigateToAppWithinWorkspace({ application, http }, workspaceId, appId);
       }
     },
     [application, http]
   );
 
+  const getItemUseCaseUrl = useCallback(
+    (item: WorkspaceAttributeWithPermission) => {
+      if (application && http) {
+        const useCaseId = getFirstUseCaseOfFeatureConfigs(item?.features || []);
+        const itemUseCase = registeredUseCases?.find((useCase) => useCase.id === useCaseId);
+        return getUseCaseUrl(itemUseCase, item.id, application, http);
+      }
+    },
+    [application, http, registeredUseCases]
+  );
+
   const handleSetDefaultWorkspace = useCallback(
     async (item: WorkspaceAttribute) => {
       const set = await uiSettings?.set(DEFAULT_WORKSPACE, item.id);
@@ -267,9 +287,11 @@ export const WorkspaceListInner = ({
   const renderDataWithMoreBadge = (
     data: string[],
     maxDisplayedAmount: number,
-    workspaceId: string,
-    tab: DetailTab
+    workspaceId: string
   ) => {
+    if (!application || !http) {
+      return null;
+    }
     const amount = data.length;
     const mostDisplayedTitles = data.slice(0, maxDisplayedAmount).join(',');
     return amount <= maxDisplayedAmount ? (
@@ -281,11 +303,13 @@ export const WorkspaceListInner = ({
           color="hollow"
           iconType="popout"
           iconSide="right"
-          onClick={() => handleSwitchWorkspace(workspaceId, tab)}
-          iconOnClick={() => handleSwitchWorkspace(workspaceId, tab)}
-          iconOnClickAriaLabel="Open workspace detail"
-          onClickAriaLabel="Open workspace detail"
-          data-test-subj={`workspaceList-more-${tab}-badge`}
+          data-test-subj={`workspaceList-more-${workspaceId}-badge`}
+          href={formatUrlWithWorkspaceId(
+            application.getUrlForApp('dataSources', { absolute: false }),
+            workspaceId,
+            http.basePath
+          )}
+          target="_blank"
         >
           + {amount - maxDisplayedAmount} more
         </EuiBadge>
@@ -323,7 +347,7 @@ export const WorkspaceListInner = ({
     return (
       isDashboardAdmin && (
         <>
-          <EuiButton color="danger" iconType="trash" onClick={onClick}>
+          <EuiButton color="danger" iconType="trash" onClick={onClick} size="s">
             Delete {selection.length} Workspace
           </EuiButton>
           {deletedWorkspaces && deletedWorkspaces.length > 0 && (
@@ -346,6 +370,7 @@ export const WorkspaceListInner = ({
       incremental: true,
     },
     query,
+    compressed: true,
     onChange: (args) => setQuery((args.query as unknown) as EuiSearchBarProps['query']),
     filters: [
       {
@@ -354,6 +379,7 @@ export const WorkspaceListInner = ({
         name: 'Use Case',
         multiSelect: false,
         options: useCaseFilterOptions,
+        compressed: true,
       },
     ],
     toolsLeft: renderToolsLeft(),
@@ -367,7 +393,7 @@ export const WorkspaceListInner = ({
       sortable: true,
       render: (name: string, item: WorkspaceAttributeWithPermission) => (
         <span>
-          <EuiLink onClick={() => handleSwitchWorkspace(item.id)}>
+          <EuiLink href={getItemUseCaseUrl(item)}>
             <EuiFlexGroup gutterSize="xs" alignItems="center">
               <EuiFlexItem>
                 <EuiText size="s">{name}</EuiText>
@@ -453,7 +479,7 @@ export const WorkspaceListInner = ({
         defaultMessage: 'Data sources',
       }),
       render: (dataSources: string[], item: WorkspaceAttributeWithPermission) => {
-        return renderDataWithMoreBadge(dataSources, 2, item.id, DetailTab.DataSources);
+        return renderDataWithMoreBadge(dataSources, 2, item.id);
       },
     },
   ];
@@ -484,7 +510,7 @@ export const WorkspaceListInner = ({
         defaultMessage: 'Edit workspace',
       }),
       'data-test-subj': 'workspace-list-edit-icon',
-      onClick: ({ id }: WorkspaceAttribute) => handleSwitchWorkspace(id),
+      onClick: ({ id }: WorkspaceAttribute) => handleSwitchWorkspace(id, WORKSPACE_DETAIL_APP_ID),
     },
     {
       name: (
diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx
index 71a7632d6f08..f70d5efb23a0 100644
--- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx
@@ -83,7 +83,7 @@ describe('<WorkspaceMenu />', () => {
     const selectButton = screen.getByTestId('workspace-select-button');
     fireEvent.click(selectButton);
 
-    expect(screen.getByText(`viewed ${moment(1234567890).fromNow()}`)).toBeInTheDocument();
+    expect(screen.getByText(`Viewed ${moment(1234567890).fromNow()}`)).toBeInTheDocument();
   });
 
   it('should be able to display empty state when the workspace list is empty', () => {
diff --git a/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx b/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
index 389ffb04ea0d..cf8ce3324233 100644
--- a/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
+++ b/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
@@ -27,18 +27,6 @@ import { WorkspaceUseCase } from '../../types';
 import { validateWorkspaceColor } from '../../../common/utils';
 import { getFirstUseCaseOfFeatureConfigs, getUseCaseUrl } from '../../utils';
 
-function sortBy<T>(getkey: (item: T) => number | undefined) {
-  return (a: T, b: T): number => {
-    const aValue = getkey(a);
-    const bValue = getkey(b);
-
-    if (aValue === undefined) return 1;
-    if (bValue === undefined) return -1;
-
-    return bValue - aValue;
-  };
-}
-
 const searchFieldPlaceholder = i18n.translate('workspace.menu.search.placeholder', {
   defaultMessage: 'Search workspace name',
 });
@@ -48,7 +36,7 @@ const getValidWorkspaceColor = (color?: string) =>
 
 interface UpdatedWorkspaceObject extends WorkspaceObject {
   accessTimeStamp?: number;
-  accessTime?: string;
+  accessTimeDescription?: string;
 }
 interface Props {
   coreStart: CoreStart;
@@ -57,6 +45,21 @@ interface Props {
   isInTwoLines?: boolean;
 }
 
+const sortByRecentVisitedAndAlphabetical = (
+  ws1: UpdatedWorkspaceObject,
+  ws2: UpdatedWorkspaceObject
+) => {
+  // First, sort by accessTimeStamp in descending order (if both have timestamps)
+  if (ws1?.accessTimeStamp && ws2?.accessTimeStamp) {
+    return ws2.accessTimeStamp - ws1.accessTimeStamp;
+  }
+  // If one has a timestamp and the other does not, prioritize the one with the timestamp
+  if (ws1.accessTimeStamp) return -1;
+  if (ws2.accessTimeStamp) return 1;
+  // If neither has a timestamp, sort alphabetically by name
+  return ws1.name.localeCompare(ws2.name);
+};
+
 export const WorkspacePickerContent = ({
   coreStart,
   registeredUseCases$,
@@ -72,18 +75,23 @@ export const WorkspacePickerContent = ({
     const recentWorkspaces = recentWorkspaceManager.getRecentWorkspaces();
     const updatedList = workspaceList.map((workspace) => {
       const recentWorkspace = recentWorkspaces.find((recent) => recent.id === workspace.id);
-
-      if (recentWorkspace) {
-        return {
-          ...workspace,
-          accessTimeStamp: recentWorkspace.timestamp,
-          accessTime: `viewed ${moment(recentWorkspace.timestamp).fromNow()}`,
-        };
-      }
-      return workspace as UpdatedWorkspaceObject;
+      return {
+        ...workspace,
+        accessTimeStamp: recentWorkspace?.timestamp,
+        accessTimeDescription: recentWorkspace
+          ? i18n.translate('workspace.picker.accessTime.description', {
+              defaultMessage: 'Viewed {timeLabel}',
+              values: {
+                timeLabel: moment(recentWorkspace.timestamp).fromNow(),
+              },
+            })
+          : i18n.translate('workspace.picker.accessTime.not.visited', {
+              defaultMessage: 'Not visited recently',
+            }),
+      };
     });
 
-    return updatedList.sort(sortBy((workspace) => workspace.accessTimeStamp));
+    return updatedList.sort(sortByRecentVisitedAndAlphabetical);
   }, [workspaceList]);
 
   const queryFromList = ({ list, query }: { list: UpdatedWorkspaceObject[]; query: string }) => {
@@ -146,7 +154,12 @@ export const WorkspacePickerContent = ({
   const getWorkspaceLists = (filterWorkspaceList: UpdatedWorkspaceObject[]) => {
     const listItems = filterWorkspaceList.map((workspace: UpdatedWorkspaceObject) => {
       const useCase = getUseCase(workspace);
-      const useCaseURL = getUseCaseUrl(useCase, workspace, coreStart.application, coreStart.http);
+      const useCaseURL = getUseCaseUrl(
+        useCase,
+        workspace.id,
+        coreStart.application,
+        coreStart.http
+      );
 
       return (
         <>
@@ -181,7 +194,7 @@ export const WorkspacePickerContent = ({
                       </EuiFlexItem>
                       <EuiFlexItem grow={1} style={{ position: 'absolute', right: '0px' }}>
                         <EuiText size="s" color="subdued">
-                          <small> {workspace.accessTime}</small>
+                          <small> {workspace.accessTimeDescription}</small>
                         </EuiText>
                       </EuiFlexItem>
                     </EuiFlexGroup>
@@ -206,7 +219,7 @@ export const WorkspacePickerContent = ({
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiText size="s" color="subdued">
-                      <small> {workspace.accessTime}</small>
+                      <small> {workspace.accessTimeDescription}</small>
                     </EuiText>
                   </EuiFlexItem>
                 </EuiFlexGroup>
diff --git a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss
index b62ea9dde66a..9ac8ef1fa86e 100644
--- a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss
+++ b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss
@@ -1,3 +1,38 @@
 .workspaceNameLabel {
   background-color: $euiSideNavBackgroundColor;
 }
+
+.workspaceSelectorPopoverButton:hover,
+.workspaceSelectorPopoverButton:focus {
+  transition: none !important;
+  transform: none !important;
+}
+
+/* Trying to show the border label:
+     * The following style is referenced from data souce selector
+     * see file src/plugins/data_source_management/public/components/popover_button/popover_button.scss
+*/
+.workspaceSelectorPopoverButtonContainer {
+  position: relative;
+  background-color: $euiSideNavBackgroundColor;
+  border: 1px solid $euiColorMediumShade;
+  border-radius: 4px;
+
+  &::before {
+    content: attr(data-label);
+    position: absolute;
+    top: -0.2rem;
+    left: $euiSizeS;
+    font-size: 0.4rem;
+    line-height: 0.4rem;
+    padding: 0 $euiSizeXS;
+
+    /* update
+     * Delete the line-gradient and set the background color to euiSideNavBackgroundColor directly
+     */
+    background-color: $euiSideNavBackgroundColor;
+    color: $euiTextColor;
+    z-index: 0;
+    text-transform: uppercase;
+  }
+}
diff --git a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.test.tsx b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.test.tsx
index 5b8b05a6506a..6f0b4136698d 100644
--- a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.test.tsx
@@ -10,13 +10,8 @@ import { WorkspaceSelector } from './workspace_selector';
 import { coreMock } from '../../../../../core/public/mocks';
 import { CoreStart, DEFAULT_NAV_GROUPS, WorkspaceObject } from '../../../../../core/public';
 import { BehaviorSubject } from 'rxjs';
-import { IntlProvider } from 'react-intl';
 import { recentWorkspaceManager } from '../../recent_workspace_manager';
-jest.mock('@osd/i18n', () => ({
-  i18n: {
-    translate: (id: string, { defaultMessage }: { defaultMessage: string }) => defaultMessage,
-  },
-}));
+import { I18nProvider } from '@osd/i18n/react';
 describe('<WorkspaceSelector />', () => {
   let coreStartMock: CoreStart;
   const navigateToApp = jest.fn();
@@ -52,9 +47,9 @@ describe('<WorkspaceSelector />', () => {
 
   const WorkspaceSelectorCreatorComponent = () => {
     return (
-      <IntlProvider locale="en">
+      <I18nProvider>
         <WorkspaceSelector coreStart={coreStartMock} registeredUseCases$={registeredUseCases$} />
-      </IntlProvider>
+      </I18nProvider>
     );
   };
 
@@ -68,6 +63,7 @@ describe('<WorkspaceSelector />', () => {
     expect(screen.getByTestId('workspace-selector-current-title')).toBeInTheDocument();
     expect(screen.getByTestId('workspace-selector-current-name')).toBeInTheDocument();
   });
+
   it('should display a list of workspaces in the dropdown', () => {
     jest
       .spyOn(recentWorkspaceManager, 'getRecentWorkspaces')
@@ -82,11 +78,11 @@ describe('<WorkspaceSelector />', () => {
     const selectButton = screen.getByTestId('workspace-selector-button');
     fireEvent.click(selectButton);
 
-    expect(screen.getByTestId('workspace-menu-item-workspace-1')).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-workspace-2')).toBeInTheDocument();
+    expect(screen.getByText('workspace 1')).toBeInTheDocument();
+    expect(screen.getByText('workspace 2')).toBeInTheDocument();
   });
 
-  it('should display viewed xx ago for recent workspaces', () => {
+  it('should display viewed xx ago for recent workspaces, and Not visited recently for never-visited workspace', () => {
     jest
       .spyOn(recentWorkspaceManager, 'getRecentWorkspaces')
       .mockReturnValue([{ id: 'workspace-1', timestamp: 1234567890 }]);
@@ -95,13 +91,12 @@ describe('<WorkspaceSelector />', () => {
       { id: 'workspace-1', name: 'workspace 1', features: [] },
       { id: 'workspace-2', name: 'workspace 2', features: [] },
     ]);
-
     render(<WorkspaceSelectorCreatorComponent />);
-
     const selectButton = screen.getByTestId('workspace-selector-button');
     fireEvent.click(selectButton);
 
-    expect(screen.getByText(`viewed ${moment(1234567890).fromNow()}`)).toBeInTheDocument();
+    expect(screen.getByText(`Viewed ${moment(1234567890).fromNow()}`)).toBeInTheDocument();
+    expect(screen.getByText('Not visited recently')).toBeInTheDocument();
   });
 
   it('should be able to display empty state when the workspace list is empty', () => {
@@ -127,8 +122,8 @@ describe('<WorkspaceSelector />', () => {
 
     const searchInput = screen.getByRole('searchbox');
     fireEvent.change(searchInput, { target: { value: 'works' } });
-    expect(screen.getByTestId('workspace-menu-item-workspace-1')).toBeInTheDocument();
-    expect(screen.queryByText('workspace-menu-item-workspace-1')).not.toBeInTheDocument();
+    expect(screen.getByText('workspace 1')).toBeInTheDocument();
+    expect(screen.queryByText('test 2')).not.toBeInTheDocument();
   });
 
   it('should be able to display empty state when seach is not found', () => {
diff --git a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx
index e3a530ce507f..5374f3f2aea6 100644
--- a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx
+++ b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.tsx
@@ -64,35 +64,21 @@ export const WorkspaceSelector = ({ coreStart, registeredUseCases$ }: Props) =>
   const closePopover = () => {
     setPopover(false);
   };
+
   const button = currentWorkspace ? (
-    <EuiPanel
-      paddingSize="none"
-      color="transparent"
-      hasBorder={false}
-      hasShadow={false}
-      data-test-subj="workspace-selector-button"
-      onClick={onButtonClick}
-    >
-      <EuiText
-        size="xs"
-        // TODO: Use standard OuiComponent to achieve the label looks
-        style={{
-          position: 'relative',
-          bottom: '-10px',
-          zIndex: 1,
-          padding: '0 5px',
-        }}
+    <div className="workspaceSelectorPopoverButtonContainer" data-label="Workspace">
+      <EuiPanel
+        className="workspaceSelectorPopoverButton"
+        data-test-subj="workspace-selector-button"
+        paddingSize="s"
+        color="transparent"
+        hasBorder={false}
+        hasShadow={false}
+        onClick={onButtonClick}
       >
-        <small className="workspaceNameLabel">
-          {i18n.translate('workspace.left.nav.selector.label', {
-            defaultMessage: 'WORKSPACE',
-          })}
-        </small>
-      </EuiText>
-      <EuiPanel paddingSize="s" borderRadius="m" color="transparent" hasBorder>
-        <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+        <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>
           <EuiFlexItem>
-            <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+            <EuiFlexGroup gutterSize="s" justifyContent="flexStart" responsive={false}>
               <EuiFlexItem grow={false}>
                 <EuiIcon
                   size="l"
@@ -100,14 +86,14 @@ export const WorkspaceSelector = ({ coreStart, registeredUseCases$ }: Props) =>
                   color={getValidWorkspaceColor(currentWorkspace.color)}
                 />
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiFlexGroup direction="column" gutterSize="none">
-                  <EuiFlexItem grow={false} style={{ maxWidth: '130px' }}>
+              <EuiFlexItem>
+                <EuiFlexGroup direction="column" gutterSize="none" responsive={false}>
+                  <EuiFlexItem style={{ maxWidth: '130px' }}>
                     <EuiText size="s" data-test-subj="workspace-selector-current-name">
                       <h4 className="eui-textTruncate">{currentWorkspace.name}</h4>
                     </EuiText>
                   </EuiFlexItem>
-                  <EuiFlexItem>
+                  <EuiFlexItem grow={false}>
                     <EuiText
                       size="xs"
                       color="subdued"
@@ -125,7 +111,7 @@ export const WorkspaceSelector = ({ coreStart, registeredUseCases$ }: Props) =>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPanel>
-    </EuiPanel>
+    </div>
   ) : (
     <EuiButton onClick={onButtonClick}>Select a Workspace</EuiButton>
   );
diff --git a/src/plugins/workspace/public/plugin.test.ts b/src/plugins/workspace/public/plugin.test.ts
index 35622684c8f3..a4ed941ad094 100644
--- a/src/plugins/workspace/public/plugin.test.ts
+++ b/src/plugins/workspace/public/plugin.test.ts
@@ -25,8 +25,8 @@ import { navigationPluginMock } from '../../navigation/public/mocks';
 import * as registerDefaultCollaboratorTypesExports from './register_default_collaborator_types';
 import { AddCollaboratorsModal } from './components/add_collaborators_modal';
 
-// Expect 6 app registrations: create, fatal error, detail, initial, navigation, and list apps.
-const registrationAppNumber = 6;
+// Expect 6 app registrations: create, fatal error, detail, initial, navigation, collaborator and list apps.
+const registrationAppNumber = 7;
 
 describe('Workspace plugin', () => {
   const getMockDependencies = () => ({
diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
index e54f189d2516..0dbf5fe0bb02 100644
--- a/src/plugins/workspace/public/plugin.ts
+++ b/src/plugins/workspace/public/plugin.ts
@@ -30,6 +30,7 @@ import {
   WORKSPACE_LIST_APP_ID,
   WORKSPACE_INITIAL_APP_ID,
   WORKSPACE_NAVIGATION_APP_ID,
+  WORKSPACE_COLLABORATORS_APP_ID,
 } from '../common/constants';
 import { getWorkspaceIdFromUrl } from '../../../core/public/utils';
 import { Services, WorkspaceUseCase, WorkspacePluginSetup } from './types';
@@ -68,13 +69,10 @@ import {
   setAnalyticsAllOverviewSection,
 } from './components/use_case_overview/setup_overview';
 import { UserDefaultWorkspace } from './components/workspace_list/default_workspace';
-import {
-  WorkspaceCollaboratorTypesService,
-  UseCaseService,
-  WorkspaceCollaboratorType,
-} from './services';
+import { WorkspaceCollaboratorTypesService, UseCaseService } from './services';
 import { AddCollaboratorsModal } from './components/add_collaborators_modal';
 import { registerDefaultCollaboratorTypes } from './register_default_collaborator_types';
+import { searchPages } from './components/global_search/search_pages_command';
 
 type WorkspaceAppType = (
   params: AppMountParameters,
@@ -110,6 +108,7 @@ export class WorkspacePlugin
   private useCase = new UseCaseService();
   private workspaceClient?: WorkspaceClient;
   private collaboratorTypes = new WorkspaceCollaboratorTypesService();
+  private collaboratorsAppUpdater$ = new BehaviorSubject<AppUpdater>(() => undefined);
 
   private _changeSavedObjectCurrentWorkspace() {
     if (this.coreStart) {
@@ -387,6 +386,24 @@ export class WorkspacePlugin
       },
     });
 
+    /**
+     * register workspace collaborators page
+     */
+    core.application.register({
+      id: WORKSPACE_COLLABORATORS_APP_ID,
+      title: i18n.translate('workspace.settings.workspaceCollaborators', {
+        defaultMessage: 'Collaborators',
+      }),
+      navLinkStatus: core.chrome.navGroup.getNavGroupEnabled()
+        ? AppNavLinkStatus.visible
+        : AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const { renderCollaboratorsApp } = await import('./application');
+        return mountWorkspaceApp(params, renderCollaboratorsApp);
+      },
+      updater$: this.collaboratorsAppUpdater$,
+    });
+
     // workspace initial page
     core.application.register({
       id: WORKSPACE_INITIAL_APP_ID,
@@ -418,7 +435,7 @@ export class WorkspacePlugin
           const currentUseCase = availableUseCases.find(
             (useCase) => useCase.id === getFirstUseCaseOfFeatureConfigs(workspace?.features ?? [])
           );
-          const useCaseUrl = getUseCaseUrl(currentUseCase, workspace, application, http);
+          const useCaseUrl = getUseCaseUrl(currentUseCase, workspace.id, application, http);
           application.navigateToUrl(useCaseUrl);
         } else {
           application.navigateToApp('home');
@@ -542,6 +559,13 @@ export class WorkspacePlugin
       },
     ]);
 
+    core.chrome.globalSearch.registerSearchCommand({
+      id: 'pagesSearch',
+      type: 'PAGES',
+      run: async (query: string, callback: () => void) =>
+        searchPages(query, this.registeredUseCases$, this.coreStart, callback),
+    });
+
     if (workspaceId) {
       core.chrome.registerCollapsibleNavHeader(() => {
         if (!this.coreStart) {
@@ -570,6 +594,10 @@ export class WorkspacePlugin
 
   public start(core: CoreStart, { contentManagement, navigation }: WorkspacePluginStartDeps) {
     this.coreStart = core;
+    const isPermissionEnabled = core?.application?.capabilities.workspaces.permissionEnabled;
+    this.collaboratorsAppUpdater$.next(() => {
+      return { status: isPermissionEnabled ? AppStatus.accessible : AppStatus.inaccessible };
+    });
 
     this.currentWorkspaceIdSubscription = this._changeSavedObjectCurrentWorkspace();
 
diff --git a/src/plugins/workspace/public/register_default_collaborator_types.test.tsx b/src/plugins/workspace/public/register_default_collaborator_types.test.tsx
index 3a711dc87a7e..5ebac9732015 100644
--- a/src/plugins/workspace/public/register_default_collaborator_types.test.tsx
+++ b/src/plugins/workspace/public/register_default_collaborator_types.test.tsx
@@ -48,7 +48,7 @@ describe('generateOnAddCallback', () => {
     title: 'Test Title',
     inputLabel: 'Test Input Label',
     addAnotherButtonLabel: 'Test Add Another Button Label',
-    permissionType: 'test',
+    permissionType: 'user' as const,
   };
 
   beforeEach(() => {
@@ -127,4 +127,30 @@ describe('registerDefaultCollaboratorTypes', () => {
     expect(groupType?.name).toBe('Group');
     expect(groupType?.buttonLabel).toBe('Add Groups');
   });
+
+  it('should return consistent displayed types', () => {
+    registerDefaultCollaboratorTypes({ collaboratorTypesService, getStartServices });
+
+    const registeredTypes = collaboratorTypesService.getTypes$().getValue();
+    expect(registeredTypes).toHaveLength(2);
+
+    const userType = registeredTypes.find((type) => type.id === 'user');
+    const groupType = registeredTypes.find((type) => type.id === 'group');
+    const adminUserCollaborator = {
+      permissionType: 'user' as const,
+      collaboratorId: '',
+      accessLevel: 'admin' as const,
+    };
+    const adminGroupCollaborator = {
+      permissionType: 'group' as const,
+      collaboratorId: '',
+      accessLevel: 'admin' as const,
+    };
+
+    expect(userType?.getDisplayedType?.(adminUserCollaborator)).toBe('User');
+    expect(userType?.getDisplayedType?.(adminGroupCollaborator)).toBeUndefined();
+
+    expect(groupType?.getDisplayedType?.(adminUserCollaborator)).toBeUndefined();
+    expect(groupType?.getDisplayedType?.(adminGroupCollaborator)).toBe('Group');
+  });
 });
diff --git a/src/plugins/workspace/public/register_default_collaborator_types.tsx b/src/plugins/workspace/public/register_default_collaborator_types.tsx
index 09fe96ae4db4..0f917acdeecd 100644
--- a/src/plugins/workspace/public/register_default_collaborator_types.tsx
+++ b/src/plugins/workspace/public/register_default_collaborator_types.tsx
@@ -55,6 +55,12 @@ export const registerDefaultCollaboratorTypes = ({
       buttonLabel: i18n.translate('workspace.collaboratorType.defaultUser.buttonLabel', {
         defaultMessage: 'Add Users',
       }),
+      getDisplayedType: ({ permissionType }) =>
+        permissionType === 'user'
+          ? i18n.translate('workspace.collaboratorType.defaultUser.displayedType', {
+              defaultMessage: 'User',
+            })
+          : undefined,
       onAdd: generateOnAddCallback({
         getStartServices,
         title: i18n.translate('workspace.collaboratorType.defaultUser.modalTitle', {
@@ -86,6 +92,12 @@ export const registerDefaultCollaboratorTypes = ({
       buttonLabel: i18n.translate('workspace.collaboratorType.defaultGroup.buttonLabel', {
         defaultMessage: 'Add Groups',
       }),
+      getDisplayedType: ({ permissionType }) =>
+        permissionType === 'group'
+          ? i18n.translate('workspace.collaboratorType.defaultGroup.displayedType', {
+              defaultMessage: 'Group',
+            })
+          : undefined,
       onAdd: generateOnAddCallback({
         getStartServices,
         title: i18n.translate('workspace.collaboratorType.defaultGroup.modalTitle', {
diff --git a/src/plugins/workspace/public/services/use_case_service.test.ts b/src/plugins/workspace/public/services/use_case_service.test.ts
index 43ca03490505..d55ddfaa5df6 100644
--- a/src/plugins/workspace/public/services/use_case_service.test.ts
+++ b/src/plugins/workspace/public/services/use_case_service.test.ts
@@ -65,11 +65,18 @@ const setupUseCaseStart = (options?: { navGroupEnabled?: boolean }) => {
 
 describe('UseCaseService', () => {
   describe('#setup', () => {
-    it('should add manage workspace category to current use case', async () => {
+    it('should add manage workspace category to current use case and register collaborators when permission is enabled', async () => {
       const useCaseService = new UseCaseService();
       const coreSetup = coreMock.createSetup();
       const navGroupMap$ = new BehaviorSubject<Record<string, NavGroupItemInMap>>({});
       const coreStartMock = coreMock.createStart();
+      coreStartMock.application.capabilities = {
+        ...coreStartMock.application.capabilities,
+        workspaces: {
+          ...coreStartMock.application.capabilities.workspaces,
+          permissionEnabled: true,
+        },
+      };
       coreSetup.getStartServices.mockResolvedValue([coreStartMock, {}, {}]);
       coreStartMock.chrome.navGroup.getNavGroupsMap$.mockReturnValue(navGroupMap$);
       useCaseService.setup(coreSetup);
@@ -88,31 +95,37 @@ describe('UseCaseService', () => {
       await waitFor(() => {
         expect(coreSetup.chrome.navGroup.addNavLinksToGroup).toBeCalledWith(navGroupInfo, [
           {
-            id: 'objects',
+            id: WORKSPACE_DETAIL_APP_ID,
             category: DEFAULT_APP_CATEGORIES.manageWorkspace,
             order: 100,
+            title: 'Workspace details',
           },
           {
-            id: 'dataSources',
+            id: 'workspace_collaborators',
             category: DEFAULT_APP_CATEGORIES.manageWorkspace,
             order: 200,
+            title: 'Collaborators',
           },
           {
-            id: 'indexPatterns',
+            id: 'dataSources',
             category: DEFAULT_APP_CATEGORIES.manageWorkspace,
             order: 300,
           },
           {
-            id: 'import_sample_data',
+            id: 'indexPatterns',
             category: DEFAULT_APP_CATEGORIES.manageWorkspace,
             order: 400,
-            title: 'Sample data',
           },
           {
-            id: WORKSPACE_DETAIL_APP_ID,
+            id: 'objects',
             category: DEFAULT_APP_CATEGORIES.manageWorkspace,
             order: 500,
-            title: 'Workspace settings',
+          },
+          {
+            id: 'import_sample_data',
+            category: DEFAULT_APP_CATEGORIES.manageWorkspace,
+            order: 600,
+            title: 'Sample data',
           },
         ]);
       });
diff --git a/src/plugins/workspace/public/services/use_case_service.ts b/src/plugins/workspace/public/services/use_case_service.ts
index 443f32323f74..f78997837654 100644
--- a/src/plugins/workspace/public/services/use_case_service.ts
+++ b/src/plugins/workspace/public/services/use_case_service.ts
@@ -16,7 +16,11 @@ import {
   DEFAULT_NAV_GROUPS,
   ALL_USE_CASE_ID,
 } from '../../../../core/public';
-import { WORKSPACE_DETAIL_APP_ID, WORKSPACE_USE_CASES } from '../../common/constants';
+import {
+  WORKSPACE_DETAIL_APP_ID,
+  WORKSPACE_USE_CASES,
+  WORKSPACE_COLLABORATORS_APP_ID,
+} from '../../common/constants';
 import {
   convertNavGroupToWorkspaceUseCase,
   getFirstUseCaseOfFeatureConfigs,
@@ -41,6 +45,8 @@ export class UseCaseService {
    */
   private async registerManageWorkspaceCategory(setupDeps: UseCaseServiceSetupDeps) {
     const [coreStart] = await setupDeps.getStartServices();
+    const isPermissionEnabled = coreStart?.application?.capabilities.workspaces.permissionEnabled;
+
     this.workspaceAndManageWorkspaceCategorySubscription?.unsubscribe();
     this.workspaceAndManageWorkspaceCategorySubscription = combineLatest([
       setupDeps.workspaces.currentWorkspace$,
@@ -65,34 +71,46 @@ export class UseCaseService {
         if (navGroupInfo) {
           setupDeps.chrome.navGroup.addNavLinksToGroup(navGroupInfo, [
             {
-              id: 'objects',
+              id: WORKSPACE_DETAIL_APP_ID,
               category: DEFAULT_APP_CATEGORIES.manageWorkspace,
               order: 100,
+              title: i18n.translate('workspace.settings.workspaceDetails', {
+                defaultMessage: 'Workspace details',
+              }),
             },
+            ...(isPermissionEnabled
+              ? [
+                  {
+                    id: WORKSPACE_COLLABORATORS_APP_ID,
+                    category: DEFAULT_APP_CATEGORIES.manageWorkspace,
+                    order: 200,
+                    title: i18n.translate('workspace.settings.workspaceCollaborators', {
+                      defaultMessage: 'Collaborators',
+                    }),
+                  },
+                ]
+              : []),
             {
               id: 'dataSources',
               category: DEFAULT_APP_CATEGORIES.manageWorkspace,
-              order: 200,
+              order: 300,
             },
             {
               id: 'indexPatterns',
               category: DEFAULT_APP_CATEGORIES.manageWorkspace,
-              order: 300,
+              order: 400,
             },
             {
-              id: 'import_sample_data',
+              id: 'objects',
               category: DEFAULT_APP_CATEGORIES.manageWorkspace,
-              order: 400,
-              title: i18n.translate('workspace.left.sampleData.label', {
-                defaultMessage: 'Sample data',
-              }),
+              order: 500,
             },
             {
-              id: WORKSPACE_DETAIL_APP_ID,
+              id: 'import_sample_data',
               category: DEFAULT_APP_CATEGORIES.manageWorkspace,
-              order: 500,
-              title: i18n.translate('workspace.settings.workspaceSettings', {
-                defaultMessage: 'Workspace settings',
+              order: 600,
+              title: i18n.translate('workspace.left.sampleData.label', {
+                defaultMessage: 'Sample data',
               }),
             },
           ]);
diff --git a/src/plugins/workspace/public/utils.test.ts b/src/plugins/workspace/public/utils.test.ts
index 25e8d3085d43..9e717ba00c57 100644
--- a/src/plugins/workspace/public/utils.test.ts
+++ b/src/plugins/workspace/public/utils.test.ts
@@ -16,6 +16,7 @@ import {
   prependWorkspaceToBreadcrumbs,
   getIsOnlyAllowEssentialUseCase,
   mergeDataSourcesWithConnections,
+  getUseCaseUrl,
 } from './utils';
 import { WorkspaceAvailability } from '../../../core/public';
 import { coreMock } from '../../../core/public/mocks';
@@ -841,3 +842,17 @@ describe('workspace utils: mergeDataSourcesWithConnections', () => {
     ]);
   });
 });
+
+describe('workspace utils: getUseCaseUrl', () => {
+  it('should get use case url', () => {
+    startMock.application.getUrlForApp.mockImplementation((id) => `http://localhost/${id}`);
+    const url = getUseCaseUrl(useCaseMock, 'foo', startMock.application, startMock.http);
+    expect(url).toEqual('http://localhost/w/foo/bar');
+  });
+
+  it('should return workspace detail url when there is no use case', () => {
+    startMock.application.getUrlForApp.mockImplementation((id) => `http://localhost/${id}`);
+    const url = getUseCaseUrl(undefined, 'foo', startMock.application, startMock.http);
+    expect(url).toEqual('http://localhost/w/foo/workspace_detail');
+  });
+});
diff --git a/src/plugins/workspace/public/utils.ts b/src/plugins/workspace/public/utils.ts
index 70fef7bfb65d..5eda2c887749 100644
--- a/src/plugins/workspace/public/utils.ts
+++ b/src/plugins/workspace/public/utils.ts
@@ -491,7 +491,7 @@ export function prependWorkspaceToBreadcrumbs(
 
 export const getUseCaseUrl = (
   useCase: WorkspaceUseCase | undefined,
-  workspace: WorkspaceObject,
+  workspaceId: string,
   application: ApplicationStart,
   http: HttpSetup
 ): string => {
@@ -500,7 +500,7 @@ export const getUseCaseUrl = (
     application.getUrlForApp(appId, {
       absolute: false,
     }),
-    workspace.id,
+    workspaceId,
     http.basePath
   );
   return useCaseURL;
diff --git a/src/plugins/workspace/public/workspace_client.ts b/src/plugins/workspace/public/workspace_client.ts
index 5b5b3ca95ed8..608f9a0fd59b 100644
--- a/src/plugins/workspace/public/workspace_client.ts
+++ b/src/plugins/workspace/public/workspace_client.ts
@@ -11,9 +11,11 @@ import {
   WorkspaceAttribute,
   WorkspacesSetup,
   IWorkspaceClient,
+  IWorkspaceResponse as IResponse,
 } from '../../../core/public';
 import { WorkspacePermissionMode } from '../common/constants';
 import { SavedObjectPermissions, WorkspaceAttributeWithPermission } from '../../../core/types';
+import { DataSourceAssociation } from './components/data_source_association/data_source_association';
 
 const WORKSPACES_API_BASE_URL = '/api/workspaces';
 
@@ -23,16 +25,6 @@ const join = (...uriComponents: Array<string | undefined>) =>
     .map(encodeURIComponent)
     .join('/');
 
-type IResponse<T> =
-  | {
-      result: T;
-      success: true;
-    }
-  | {
-      success: false;
-      error?: string;
-    };
-
 interface WorkspaceFindOptions {
   page?: number;
   perPage?: number;
@@ -72,7 +64,7 @@ export class WorkspaceClient implements IWorkspaceClient {
    * Add a non-throw-error fetch method,
    * so that consumers only need to care about
    * if the success is false instead of wrapping the call with a try catch
-   * and judge the error both in catch clause and if(!success) cluase.
+   * and judge the error both in catch clause and if(!success) clause.
    */
   private safeFetch = async <T = any>(
     path: string,
@@ -348,6 +340,40 @@ export class WorkspaceClient implements IWorkspaceClient {
     return result;
   }
 
+  public async associate(savedObjects: Array<{ id: string; type: string }>, workspaceId: string) {
+    const path = this.getPath('_associate');
+    const body = {
+      savedObjects,
+      workspaceId,
+    };
+    const result = await this.safeFetch<Array<{ id: string; type: string }>>(path, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+
+    return result;
+  }
+
+  public async dissociate(savedObjects: Array<{ id: string; type: string }>, workspaceId: string) {
+    const path = this.getPath('_dissociate');
+    const body = {
+      savedObjects,
+      workspaceId,
+    };
+    const result = await this.safeFetch<Array<{ id: string; type: string }>>(path, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+
+    return result;
+  }
+
+  ui() {
+    return {
+      DataSourceAssociation,
+    };
+  }
+
   public stop() {
     this.workspaces.workspaceList$.unsubscribe();
     this.workspaces.currentWorkspaceId$.unsubscribe();
diff --git a/src/plugins/workspace/server/permission_control/client.ts b/src/plugins/workspace/server/permission_control/client.ts
index c6e147f3609c..1d3940c56265 100644
--- a/src/plugins/workspace/server/permission_control/client.ts
+++ b/src/plugins/workspace/server/permission_control/client.ts
@@ -16,7 +16,11 @@ import {
   HttpAuth,
 } from '../../../../core/server';
 import { WORKSPACE_SAVED_OBJECTS_CLIENT_WRAPPER_ID } from '../../common/constants';
-import { getPrincipalsFromRequest } from '../../../../core/server/utils';
+import {
+  ACLAuditorStateKey,
+  getACLAuditor,
+  getPrincipalsFromRequest,
+} from '../../../../core/server/utils';
 
 export type SavedObjectsPermissionControlContract = Pick<
   SavedObjectsPermissionControl,
@@ -57,6 +61,7 @@ export class SavedObjectsPermissionControl {
     request: OpenSearchDashboardsRequest,
     savedObjects: SavedObjectsBulkGetObject[]
   ) {
+    const ACLAuditor = getACLAuditor(request);
     const requestKey = request.uuid;
     const savedObjectsToGet = savedObjects.filter(
       (savedObject) =>
@@ -66,6 +71,8 @@ export class SavedObjectsPermissionControl {
       savedObjectsToGet.length > 0
         ? (await this.getScopedClient?.(request)?.bulkGet(savedObjectsToGet))?.saved_objects || []
         : [];
+    // System request, -1 * savedObjectsToGet.length for compensation.
+    ACLAuditor?.increment(ACLAuditorStateKey.DATABASE_OPERATION, -1 * savedObjectsToGet.length);
 
     const retrievedSavedObjectsMap: { [key: string]: SavedObject } = {};
     retrievedSavedObjects.forEach((savedObject) => {
diff --git a/src/plugins/workspace/server/plugin.test.ts b/src/plugins/workspace/server/plugin.test.ts
index b9a402c306f9..c3f47042d340 100644
--- a/src/plugins/workspace/server/plugin.test.ts
+++ b/src/plugins/workspace/server/plugin.test.ts
@@ -6,7 +6,12 @@
 import { OnPostAuthHandler, OnPreRoutingHandler } from 'src/core/server';
 import { coreMock, httpServerMock, uiSettingsServiceMock } from '../../../core/server/mocks';
 import { WorkspacePlugin } from './plugin';
-import { getWorkspaceState, updateWorkspaceState } from '../../../core/server/utils';
+import {
+  getACLAuditor,
+  getClientCallAuditor,
+  getWorkspaceState,
+  updateWorkspaceState,
+} from '../../../core/server/utils';
 import * as serverUtils from '../../../core/server/utils/auth_info';
 import * as utilsExports from './utils';
 import { SavedObjectsPermissionControl } from './permission_control/client';
@@ -44,7 +49,7 @@ describe('Workspace server plugin', () => {
         },
       }
     `);
-    expect(setupMock.savedObjects.addClientWrapper).toBeCalledTimes(4);
+    expect(setupMock.savedObjects.addClientWrapper).toBeCalledTimes(5);
 
     let registerSwitcher;
     let result;
@@ -111,7 +116,7 @@ describe('Workspace server plugin', () => {
       },
     });
     let registerOnPostAuthFn: OnPostAuthHandler = () => httpServerMock.createResponseFactory().ok();
-    setupMock.http.registerOnPostAuth.mockImplementation((fn) => {
+    setupMock.http.registerOnPostAuth.mockImplementationOnce((fn) => {
       registerOnPostAuthFn = fn;
       return fn;
     });
@@ -132,7 +137,7 @@ describe('Workspace server plugin', () => {
       expect(toolKitMock.next).toBeCalledTimes(1);
     });
 
-    it('with yml config', async () => {
+    it('with configuring user as OSD admin', async () => {
       jest
         .spyOn(serverUtils, 'getPrincipalsFromRequest')
         .mockImplementation(() => ({ users: [`user1`] }));
@@ -148,10 +153,56 @@ describe('Workspace server plugin', () => {
         httpServerMock.createResponseFactory(),
         toolKitMock
       );
+
+      expect(getWorkspaceState(requestWithWorkspaceInUrl)).toEqual({
+        isDashboardAdmin: true,
+      });
+      expect(toolKitMock.next).toBeCalledTimes(1);
+    });
+
+    it('with configuring wildcard * and anyone will be OSD admin', async () => {
+      jest
+        .spyOn(serverUtils, 'getPrincipalsFromRequest')
+        .mockImplementation(() => ({ users: [`user1`] }));
+      jest.spyOn(utilsExports, 'getOSDAdminConfigFromYMLConfig').mockResolvedValue([[], ['*']]);
+
+      await workspacePlugin.setup(setupMock);
+      const toolKitMock = httpServerMock.createToolkit();
+
+      await registerOnPostAuthFn(
+        requestWithWorkspaceInUrl,
+        httpServerMock.createResponseFactory(),
+        toolKitMock
+      );
+
+      expect(getWorkspaceState(requestWithWorkspaceInUrl)).toEqual({
+        isDashboardAdmin: true,
+      });
+      expect(toolKitMock.next).toBeCalledTimes(1);
+    });
+
+    it('without configuring yml config and anyone will be not OSD admin', async () => {
+      jest
+        .spyOn(serverUtils, 'getPrincipalsFromRequest')
+        .mockImplementation(() => ({ users: [`user1`] }));
+      jest.spyOn(utilsExports, 'getOSDAdminConfigFromYMLConfig').mockResolvedValue([[], []]);
+
+      await workspacePlugin.setup(setupMock);
+      const toolKitMock = httpServerMock.createToolkit();
+
+      await registerOnPostAuthFn(
+        requestWithWorkspaceInUrl,
+        httpServerMock.createResponseFactory(),
+        toolKitMock
+      );
+
+      expect(getWorkspaceState(requestWithWorkspaceInUrl)).toEqual({
+        isDashboardAdmin: false,
+      });
       expect(toolKitMock.next).toBeCalledTimes(1);
     });
 
-    it('uninstall security plugin', async () => {
+    it('uninstall security plugin and anyone will be OSD admin', async () => {
       jest.spyOn(serverUtils, 'getPrincipalsFromRequest').mockImplementation(() => ({}));
 
       await workspacePlugin.setup(setupMock);
@@ -162,6 +213,10 @@ describe('Workspace server plugin', () => {
         httpServerMock.createResponseFactory(),
         toolKitMock
       );
+
+      expect(getWorkspaceState(requestWithWorkspaceInUrl)).toEqual({
+        isDashboardAdmin: true,
+      });
       expect(toolKitMock.next).toBeCalledTimes(1);
     });
 
@@ -180,6 +235,68 @@ describe('Workspace server plugin', () => {
       preResponseFn(requestWithWorkspaceInUrl, { statusCode: 200 }, toolKitMock);
       expect(clearSavedObjectsCacheMock).toHaveBeenCalled();
     });
+
+    describe('#ACL auditor', () => {
+      it('should initialize 2 auditors when permission control is enabled', async () => {
+        const coreSetupMock = coreMock.createSetup();
+        await workspacePlugin.setup(coreSetupMock);
+        const toolKitMock = httpServerMock.createToolkit();
+
+        const postAuthFn = coreSetupMock.http.registerOnPostAuth.mock.calls[1][0];
+        const mockedRequest = httpServerMock.createOpenSearchDashboardsRequest();
+
+        postAuthFn(mockedRequest, httpServerMock.createResponseFactory(), toolKitMock);
+        expect(getACLAuditor(mockedRequest)).toBeTruthy();
+        expect(getClientCallAuditor(mockedRequest)).toBeTruthy();
+      });
+
+      it('should clean up 2 auditors when permission control is enabled and non dashboard admin', async () => {
+        const coreSetupMock = coreMock.createSetup();
+        await workspacePlugin.setup(coreSetupMock);
+        const toolKitMock = httpServerMock.createToolkit();
+
+        const postAuthFn = coreSetupMock.http.registerOnPostAuth.mock.calls[1][0];
+        const preResponse = coreSetupMock.http.registerOnPreResponse.mock.calls[1][0];
+
+        const nonDashboardAdminRequest = httpServerMock.createOpenSearchDashboardsRequest();
+        postAuthFn(nonDashboardAdminRequest, httpServerMock.createResponseFactory(), toolKitMock);
+        const aclAuditorForNonDashboardAdmin = getACLAuditor(nonDashboardAdminRequest);
+        let checkoutSpy;
+        if (aclAuditorForNonDashboardAdmin) {
+          checkoutSpy = jest.spyOn(aclAuditorForNonDashboardAdmin, 'checkout');
+        }
+
+        preResponse(nonDashboardAdminRequest, { statusCode: 200 }, toolKitMock);
+
+        expect(checkoutSpy).toBeCalled();
+        expect(getACLAuditor(nonDashboardAdminRequest)).toBeFalsy();
+        expect(getClientCallAuditor(nonDashboardAdminRequest)).toBeFalsy();
+      });
+
+      it('should not checkout when request user is dashboard admin', async () => {
+        const coreSetupMock = coreMock.createSetup();
+        await workspacePlugin.setup(coreSetupMock);
+        const toolKitMock = httpServerMock.createToolkit();
+
+        const postAuthFn = coreSetupMock.http.registerOnPostAuth.mock.calls[1][0];
+        const preResponse = coreSetupMock.http.registerOnPreResponse.mock.calls[1][0];
+
+        // request flow for dashboard admin
+        const dashboardAdminRequest = httpServerMock.createOpenSearchDashboardsRequest();
+        updateWorkspaceState(dashboardAdminRequest, {
+          isDashboardAdmin: true,
+        });
+        postAuthFn(dashboardAdminRequest, httpServerMock.createResponseFactory(), toolKitMock);
+        const aclAuditorForDashboardAdmin = getACLAuditor(dashboardAdminRequest);
+        let checkoutSpy;
+        if (aclAuditorForDashboardAdmin) {
+          checkoutSpy = jest.spyOn(aclAuditorForDashboardAdmin, 'checkout');
+        }
+        preResponse(dashboardAdminRequest, { statusCode: 200 }, toolKitMock);
+
+        expect(checkoutSpy).toBeCalledTimes(0);
+      });
+    });
   });
 
   describe('#setUpRedirectPage', () => {
diff --git a/src/plugins/workspace/server/plugin.ts b/src/plugins/workspace/server/plugin.ts
index 42ca77e922e4..6c82097fda3d 100644
--- a/src/plugins/workspace/server/plugin.ts
+++ b/src/plugins/workspace/server/plugin.ts
@@ -25,6 +25,7 @@ import {
   WORKSPACE_INITIAL_APP_ID,
   WORKSPACE_NAVIGATION_APP_ID,
   DEFAULT_WORKSPACE,
+  PRIORITY_FOR_REPOSITORY_WRAPPER,
 } from '../common/constants';
 import { IWorkspaceClientImpl, WorkspacePluginSetup, WorkspacePluginStart } from './types';
 import { WorkspaceClient } from './workspace_client';
@@ -32,8 +33,13 @@ import { registerRoutes } from './routes';
 import { WorkspaceSavedObjectsClientWrapper } from './saved_objects';
 import {
   cleanWorkspaceId,
+  cleanUpACLAuditor,
+  cleanUpClientCallAuditor,
+  getACLAuditor,
   getWorkspaceIdFromUrl,
   getWorkspaceState,
+  initializeACLAuditor,
+  initializeClientCallAuditor,
   updateWorkspaceState,
 } from '../../../core/server/utils';
 import { WorkspaceConflictSavedObjectsClientWrapper } from './saved_objects/saved_objects_wrapper_for_check_workspace_conflict';
@@ -45,6 +51,7 @@ import { getOSDAdminConfigFromYMLConfig, updateDashboardAdminStateForRequest } f
 import { WorkspaceIdConsumerWrapper } from './saved_objects/workspace_id_consumer_wrapper';
 import { WorkspaceUiSettingsClientWrapper } from './saved_objects/workspace_ui_settings_client_wrapper';
 import { uiSettings } from './ui_settings';
+import { RepositoryWrapper } from './saved_objects/repository_wrapper';
 
 export class WorkspacePlugin implements Plugin<WorkspacePluginSetup, WorkspacePluginStart> {
   private readonly logger: Logger;
@@ -106,10 +113,36 @@ export class WorkspacePlugin implements Plugin<WorkspacePluginSetup, WorkspacePl
       this.workspaceSavedObjectsClientWrapper.wrapperFactory
     );
 
+    core.savedObjects.addClientWrapper(
+      PRIORITY_FOR_REPOSITORY_WRAPPER,
+      // Give a symbol here so this wrapper won't be bypassed
+      Symbol('repository_wrapper').toString(),
+      new RepositoryWrapper().wrapperFactory
+    );
+
     core.http.registerOnPreResponse((request, _response, toolkit) => {
       this.permissionControl?.clearSavedObjectsCache(request);
       return toolkit.next();
     });
+
+    // Initialize ACL auditor in request.
+    core.http.registerOnPostAuth((request, response, toolkit) => {
+      initializeACLAuditor(request, this.logger);
+      initializeClientCallAuditor(request);
+      return toolkit.next();
+    });
+
+    // Clean up auditor before response.
+    core.http.registerOnPreResponse((request, response, toolkit) => {
+      const { isDashboardAdmin } = getWorkspaceState(request);
+      if (!isDashboardAdmin) {
+        // Only checkout auditor when current login user is not dashboard admin
+        getACLAuditor(request)?.checkout();
+      }
+      cleanUpACLAuditor(request);
+      cleanUpClientCallAuditor(request);
+      return toolkit.next();
+    });
   }
 
   private setUpRedirectPage(core: CoreSetup) {
@@ -117,7 +150,7 @@ export class WorkspacePlugin implements Plugin<WorkspacePluginSetup, WorkspacePl
       const path = request.url.pathname;
       if (path === '/') {
         const workspaceListResponse = await this.client?.list(
-          { request, logger: this.logger },
+          { request },
           { page: 1, perPage: 100 }
         );
         const basePath = core.http.basePath.serverBasePath;
diff --git a/src/plugins/workspace/server/routes/index.ts b/src/plugins/workspace/server/routes/index.ts
index 599bc1e82f59..8a599812f0dc 100644
--- a/src/plugins/workspace/server/routes/index.ts
+++ b/src/plugins/workspace/server/routes/index.ts
@@ -283,6 +283,58 @@ export function registerRoutes({
     })
   );
 
+  router.post(
+    {
+      path: `${WORKSPACES_API_BASE_URL}/_associate`,
+      validate: {
+        body: schema.object({
+          workspaceId: schema.string(),
+          savedObjects: schema.arrayOf(
+            schema.object({ id: schema.string(), type: schema.string() })
+          ),
+        }),
+      },
+    },
+    router.handleLegacyErrors(async (context, req, res) => {
+      const { workspaceId, savedObjects } = req.body;
+
+      const result = await client.associate(
+        {
+          request: req,
+        },
+        workspaceId,
+        savedObjects
+      );
+      return res.ok({ body: result });
+    })
+  );
+
+  router.post(
+    {
+      path: `${WORKSPACES_API_BASE_URL}/_dissociate`,
+      validate: {
+        body: schema.object({
+          workspaceId: schema.string(),
+          savedObjects: schema.arrayOf(
+            schema.object({ id: schema.string(), type: schema.string() })
+          ),
+        }),
+      },
+    },
+    router.handleLegacyErrors(async (context, req, res) => {
+      const { workspaceId, savedObjects } = req.body;
+
+      const result = await client.dissociate(
+        {
+          request: req,
+        },
+        workspaceId,
+        savedObjects
+      );
+      return res.ok({ body: result });
+    })
+  );
+
   // duplicate saved objects among workspaces
   registerDuplicateRoute(router, logger, client, maxImportExportSize);
 }
diff --git a/src/plugins/workspace/server/saved_objects/repository_wrapper.test.ts b/src/plugins/workspace/server/saved_objects/repository_wrapper.test.ts
new file mode 100644
index 000000000000..63ad0b0dfb77
--- /dev/null
+++ b/src/plugins/workspace/server/saved_objects/repository_wrapper.test.ts
@@ -0,0 +1,146 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { httpServerMock, savedObjectsClientMock, coreMock } from '../../../../core/server/mocks';
+import { RepositoryWrapper } from './repository_wrapper';
+import {
+  ACLAuditorStateKey,
+  getACLAuditor,
+  initializeACLAuditor,
+} from '../../../../core/server/utils';
+import { loggerMock } from '@osd/logging/target/mocks';
+
+describe('RepositoryWrapper', () => {
+  const getMockedObjects = () => {
+    const requestHandlerContext = coreMock.createRequestHandlerContext();
+    const wrapperInstance = new RepositoryWrapper();
+    const mockedClient = savedObjectsClientMock.create();
+    const mockedRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    const mockedLogger = loggerMock.create();
+    initializeACLAuditor(mockedRequest, mockedLogger);
+    const wrapperClient = wrapperInstance.wrapperFactory({
+      client: mockedClient,
+      typeRegistry: requestHandlerContext.savedObjects.typeRegistry,
+      request: mockedRequest,
+    });
+    return {
+      client: wrapperClient,
+      request: mockedRequest,
+      ACLAuditorInstance: getACLAuditor(mockedRequest),
+    };
+  };
+  describe('create', () => {
+    it('should increment 1 in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.create('dashboard', {
+        name: 'foo',
+      });
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(1);
+    });
+  });
+
+  describe('bulkCreate', () => {
+    it('should increment objects.length in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.bulkCreate([
+        {
+          type: 'foo',
+          id: 'foo',
+          attributes: {},
+        },
+        {
+          type: 'bar',
+          id: 'bar',
+          attributes: {},
+        },
+      ]);
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(2);
+    });
+  });
+
+  describe('get', () => {
+    it('should increment 1 in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.get('foo', 'bar');
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(1);
+    });
+  });
+
+  describe('bulkGet', () => {
+    it('should increment objects.length in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.bulkGet([
+        {
+          type: 'foo',
+          id: 'foo',
+        },
+        {
+          type: 'bar',
+          id: 'bar',
+        },
+      ]);
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(2);
+    });
+  });
+
+  describe('delete', () => {
+    it('should increment 1 in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.delete('foo', 'bar');
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(1);
+    });
+  });
+
+  describe('update', () => {
+    it('should increment 1 in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.update('foo', 'bar', {});
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(1);
+    });
+  });
+
+  describe('bulkUpdate', () => {
+    it('should increment objects.length in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.bulkUpdate([
+        {
+          type: 'foo',
+          id: 'foo',
+          attributes: {},
+        },
+        {
+          type: 'bar',
+          id: 'bar',
+          attributes: {},
+        },
+      ]);
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(2);
+    });
+  });
+
+  describe('deleteByWorkspace', () => {
+    it('should increment 1 in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.deleteByWorkspace('foo');
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(1);
+    });
+  });
+
+  describe('addToWorkspaces', () => {
+    it('should increment 1 in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.addToWorkspaces('foo', 'bar', ['foo']);
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(1);
+    });
+  });
+
+  describe('deleteFromWorkspaces', () => {
+    it('should increment 1 in ACLAuditor', async () => {
+      const { ACLAuditorInstance, client } = getMockedObjects();
+      await client.deleteFromWorkspaces('foo', 'bar', ['foo']);
+      expect(ACLAuditorInstance?.getState()[ACLAuditorStateKey.DATABASE_OPERATION]).toEqual(1);
+    });
+  });
+});
diff --git a/src/plugins/workspace/server/saved_objects/repository_wrapper.ts b/src/plugins/workspace/server/saved_objects/repository_wrapper.ts
new file mode 100644
index 000000000000..fb86d19b8b7c
--- /dev/null
+++ b/src/plugins/workspace/server/saved_objects/repository_wrapper.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ACLAuditorStateKey, getACLAuditor } from '../../../../core/server/utils';
+import { SavedObjectsClientWrapperFactory } from '../../../../core/server';
+
+export class RepositoryWrapper {
+  public wrapperFactory: SavedObjectsClientWrapperFactory = (wrapperOptions) => {
+    const ACLAuditDecorator = function <T extends (...args: any[]) => any>(
+      fn: T,
+      getCount: (args: Parameters<T>) => number = () => 1
+    ): T {
+      return function (...args: Parameters<T>): ReturnType<T> {
+        const result = fn.apply(wrapperOptions.client, args);
+        const ACLAuditor = getACLAuditor(wrapperOptions.request);
+        ACLAuditor?.increment(ACLAuditorStateKey.DATABASE_OPERATION, getCount(args));
+        return result;
+      } as T;
+    };
+
+    return {
+      ...wrapperOptions.client,
+      get: ACLAuditDecorator(wrapperOptions.client.get),
+      checkConflicts: wrapperOptions.client.checkConflicts,
+      find: wrapperOptions.client.find,
+      bulkGet: ACLAuditDecorator(wrapperOptions.client.bulkGet, (args) => args[0]?.length || 0),
+      errors: wrapperOptions.client.errors,
+      addToNamespaces: wrapperOptions.client.addToNamespaces,
+      deleteFromNamespaces: wrapperOptions.client.deleteFromNamespaces,
+      create: ACLAuditDecorator(wrapperOptions.client.create),
+      bulkCreate: ACLAuditDecorator(
+        wrapperOptions.client.bulkCreate,
+        (args) => args[0]?.length || 0
+      ),
+      delete: ACLAuditDecorator(wrapperOptions.client.delete),
+      update: ACLAuditDecorator(wrapperOptions.client.update),
+      bulkUpdate: ACLAuditDecorator(
+        wrapperOptions.client.bulkUpdate,
+        (args) => args[0]?.length || 0
+      ),
+      deleteByWorkspace: ACLAuditDecorator(wrapperOptions.client.deleteByWorkspace),
+      addToWorkspaces: ACLAuditDecorator(wrapperOptions.client.addToWorkspaces),
+      deleteFromWorkspaces: ACLAuditDecorator(wrapperOptions.client.deleteFromWorkspaces),
+    };
+  };
+
+  constructor() {}
+}
diff --git a/src/plugins/workspace/server/saved_objects/workspace_saved_objects_client_wrapper.test.ts b/src/plugins/workspace/server/saved_objects/workspace_saved_objects_client_wrapper.test.ts
index 5fcb124f5323..e9f5c5c2a409 100644
--- a/src/plugins/workspace/server/saved_objects/workspace_saved_objects_client_wrapper.test.ts
+++ b/src/plugins/workspace/server/saved_objects/workspace_saved_objects_client_wrapper.test.ts
@@ -3,10 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { getWorkspaceState, updateWorkspaceState } from '../../../../core/server/utils';
-import { SavedObjectsErrorHelpers } from '../../../../core/server';
+import { loggerMock } from '@osd/logging/target/mocks';
+import {
+  getACLAuditor,
+  getWorkspaceState,
+  initializeACLAuditor,
+  initializeClientCallAuditor,
+  updateWorkspaceState,
+} from '../../../../core/server/utils';
+import {
+  SavedObject,
+  SavedObjectsBulkGetObject,
+  SavedObjectsClientWrapperOptions,
+  SavedObjectsErrorHelpers,
+} from '../../../../core/server';
 import { WorkspaceSavedObjectsClientWrapper } from './workspace_saved_objects_client_wrapper';
-import { httpServerMock } from '../../../../core/server/mocks';
+import { httpServerMock, savedObjectsClientMock, coreMock } from '../../../../core/server/mocks';
 import {
   DATA_SOURCE_SAVED_OBJECT_TYPE,
   DATA_CONNECTION_SAVED_OBJECT_TYPE,
@@ -17,7 +29,7 @@ const NO_DASHBOARD_ADMIN = 'no_dashboard_admin';
 const DATASOURCE_ADMIN = 'dataSource_admin';
 
 const generateWorkspaceSavedObjectsClientWrapper = (role = NO_DASHBOARD_ADMIN) => {
-  const savedObjectsStore = [
+  const savedObjectsStore: SavedObject[] = [
     {
       type: 'dashboard',
       id: 'foo',
@@ -26,6 +38,7 @@ const generateWorkspaceSavedObjectsClientWrapper = (role = NO_DASHBOARD_ADMIN) =
         bar: 'baz',
       },
       permissions: {},
+      references: [],
     },
     {
       type: 'dashboard',
@@ -35,6 +48,7 @@ const generateWorkspaceSavedObjectsClientWrapper = (role = NO_DASHBOARD_ADMIN) =
         bar: 'baz',
       },
       permissions: {},
+      references: [],
     },
     {
       type: 'dashboard',
@@ -44,106 +58,129 @@ const generateWorkspaceSavedObjectsClientWrapper = (role = NO_DASHBOARD_ADMIN) =
         bar: 'baz',
       },
       permissions: {},
+      references: [],
     },
-    { type: 'workspace', id: 'workspace-1', attributes: { name: 'Workspace - 1' } },
+    { type: 'workspace', id: 'workspace-1', attributes: { name: 'Workspace - 1' }, references: [] },
     {
       type: 'workspace',
       id: 'not-permitted-workspace',
       attributes: { name: 'Not permitted workspace' },
+      references: [],
     },
     {
       type: DATA_SOURCE_SAVED_OBJECT_TYPE,
       id: 'global-data-source',
       attributes: { title: 'Global data source' },
+      references: [],
     },
     {
       type: DATA_CONNECTION_SAVED_OBJECT_TYPE,
       id: 'global-data-connection',
       attributes: { title: 'Global data connection' },
+      references: [],
     },
     {
       type: DATA_SOURCE_SAVED_OBJECT_TYPE,
       id: 'global-data-source-empty-workspaces',
       attributes: { title: 'Global data source empty workspaces' },
       workspaces: [],
+      references: [],
     },
     {
       type: DATA_CONNECTION_SAVED_OBJECT_TYPE,
       id: 'global-data-connection-empty-workspaces',
       attributes: { title: 'Global data connection empty workspaces' },
       workspaces: [],
+      references: [],
     },
     {
       type: DATA_SOURCE_SAVED_OBJECT_TYPE,
       id: 'workspace-1-data-source',
       attributes: { title: 'Workspace 1 data source' },
       workspaces: ['workspace-1'],
+      references: [],
     },
     {
       type: DATA_CONNECTION_SAVED_OBJECT_TYPE,
       id: 'workspace-1-data-connection',
       attributes: { title: 'Workspace 1 data connection' },
       workspaces: ['workspace-1'],
+      references: [],
     },
     {
       type: DATA_SOURCE_SAVED_OBJECT_TYPE,
       id: 'workspace-2-data-source',
       attributes: { title: 'Workspace 2 data source' },
       workspaces: ['mock-request-workspace-id'],
+      references: [],
     },
     {
       type: DATA_CONNECTION_SAVED_OBJECT_TYPE,
       id: 'workspace-2-data-connection',
       attributes: { title: 'Workspace 2 data connection' },
       workspaces: ['mock-request-workspace-id'],
+      references: [],
+    },
+    {
+      type: 'workspace',
+      id: 'foo',
+      references: [],
+      attributes: {},
     },
   ];
-  const clientMock = {
-    get: jest.fn().mockImplementation(async (type, id) => {
-      if (type === 'config') {
-        return {
-          type: 'config',
-        };
-      }
-      if (id === 'unknown-error-dashboard') {
-        throw new Error('Unknown error');
-      }
-      return (
-        savedObjectsStore.find((item) => item.type === type && item.id === id) ||
-        SavedObjectsErrorHelpers.createGenericNotFoundError()
-      );
-    }),
-    create: jest.fn(),
-    bulkCreate: jest.fn(),
-    checkConflicts: jest.fn(),
-    delete: jest.fn(),
-    update: jest.fn(),
-    bulkUpdate: jest.fn(),
-    bulkGet: jest.fn().mockImplementation((savedObjectsToFind) => {
+  const clientMock = savedObjectsClientMock.create();
+  clientMock.get.mockImplementation(async (type, id) => {
+    if (type === 'config') {
+      return {
+        type: 'config',
+        id,
+        attributes: {},
+        references: [],
+      };
+    }
+    if (id === 'unknown-error-dashboard') {
+      throw new Error('Unknown error');
+    }
+
+    const findItem = savedObjectsStore.find((item) => item.type === type && item.id === id);
+    if (findItem) {
+      return findItem;
+    }
+
+    throw SavedObjectsErrorHelpers.createGenericNotFoundError();
+  });
+  clientMock.bulkGet.mockImplementation(
+    async (savedObjectsToFind: SavedObjectsBulkGetObject[] | undefined) => {
       return {
         saved_objects: savedObjectsStore.filter((item) =>
-          savedObjectsToFind.find(
+          savedObjectsToFind?.find(
             (itemToFind) => itemToFind.type === item.type && itemToFind.id === item.id
           )
         ),
       };
-    }),
-    find: jest.fn().mockImplementation(({ type, workspaces }) => {
-      const savedObjects = savedObjectsStore.filter(
+    }
+  );
+  clientMock.find.mockImplementation(async ({ type, workspaces }) => {
+    const savedObjects = savedObjectsStore
+      .filter(
         (item) =>
           item.type === type &&
           (!workspaces || item.workspaces?.some((workspaceId) => workspaces.includes(workspaceId)))
-      );
-      return {
-        saved_objects: savedObjects,
-        total: savedObjects.length,
-      };
-    }),
-    deleteByWorkspace: jest.fn(),
-    addToWorkspaces: jest.fn(),
-    deleteFromWorkspaces: jest.fn(),
-  };
+      )
+      .map((item) => ({
+        ...item,
+        score: 1,
+      }));
+    return {
+      per_page: 10,
+      page: 1,
+      saved_objects: savedObjects,
+      total: savedObjects.length,
+    };
+  });
   const requestMock = httpServerMock.createOpenSearchDashboardsRequest();
+  initializeACLAuditor(requestMock, loggerMock.create());
+  initializeClientCallAuditor(requestMock);
   updateWorkspaceState(requestMock, { requestWorkspaceId: 'mock-request-workspace-id' });
   if (role === DASHBOARD_ADMIN) {
     updateWorkspaceState(requestMock, { isDashboardAdmin: true });
@@ -152,10 +189,12 @@ const generateWorkspaceSavedObjectsClientWrapper = (role = NO_DASHBOARD_ADMIN) =
     updateWorkspaceState(requestMock, { isDataSourceAdmin: true });
   }
 
-  const wrapperOptions = {
+  const coreHandleMock = coreMock.createStart();
+
+  const wrapperOptions: SavedObjectsClientWrapperOptions = {
     client: clientMock,
     request: requestMock,
-    typeRegistry: {},
+    typeRegistry: coreHandleMock.savedObjects.getTypeRegistry(),
   };
   const permissionControlMock = {
     setup: jest.fn(),
@@ -171,14 +210,19 @@ const generateWorkspaceSavedObjectsClientWrapper = (role = NO_DASHBOARD_ADMIN) =
       return { users: ['user-1'] };
     }),
     addToCacheAllowlist: jest.fn(),
+    clearSavedObjectsCache: jest.fn(),
   };
 
   const wrapper = new WorkspaceSavedObjectsClientWrapper(permissionControlMock);
-  const scopedClientMock = {
-    find: jest.fn().mockImplementation(async () => ({
-      saved_objects: [{ id: 'workspace-1', type: 'workspace' }],
-    })),
-  };
+  const scopedClientMock = savedObjectsClientMock.create();
+  scopedClientMock.find.mockImplementation(async () => ({
+    total: 1,
+    per_page: 1,
+    page: 1,
+    saved_objects: [
+      { id: 'workspace-1', type: 'workspace', score: 1, attributes: {}, references: [] },
+    ],
+  }));
   wrapper.setScopedClient(() => scopedClientMock);
   return {
     wrapper: wrapper.wrapperFactory(wrapperOptions),
@@ -377,11 +421,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
         expect(errorCatched?.message).toEqual('Invalid workspace permission');
       });
       it('should throw error if unable to get object when override', async () => {
-        const {
-          wrapper,
-          permissionControlMock,
-          requestMock,
-        } = generateWorkspaceSavedObjectsClientWrapper();
+        const { wrapper, permissionControlMock } = generateWorkspaceSavedObjectsClientWrapper();
         permissionControlMock.validate.mockResolvedValueOnce({ success: true, result: false });
         let errorCatched;
         try {
@@ -550,7 +590,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
       it('should return saved object if no need to validate permission', async () => {
         const { wrapper, permissionControlMock } = generateWorkspaceSavedObjectsClientWrapper();
         const result = await wrapper.get('config', 'config-1');
-        expect(result).toEqual({ type: 'config' });
+        expect(result).toEqual(expect.objectContaining({ type: 'config' }));
         expect(permissionControlMock.validate).not.toHaveBeenCalled();
       });
       it("should call permission validate with object's workspace and throw permission error", async () => {
@@ -577,11 +617,10 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
       });
       it('should call permission validateSavedObjectsACL with object', async () => {
         const { wrapper, permissionControlMock } = generateWorkspaceSavedObjectsClientWrapper();
-        let errorCatched;
         try {
           await wrapper.get('dashboard', 'not-permitted-dashboard');
         } catch (e) {
-          errorCatched = e;
+          // Add 1 line to pass no-empty lint check
         }
         expect(permissionControlMock.validateSavedObjectsACL).toHaveBeenCalledWith(
           [
@@ -604,7 +643,14 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
         const getArgs = ['workspace', 'foo', {}] as const;
         const result = await wrapper.get(...getArgs);
         expect(clientMock.get).toHaveBeenCalledWith(...getArgs);
-        expect(result).toMatchInlineSnapshot(`[Error: Not Found]`);
+        expect(result).toMatchInlineSnapshot(`
+          Object {
+            "attributes": Object {},
+            "id": "foo",
+            "references": Array [],
+            "type": "workspace",
+          }
+        `);
       });
 
       it('should validate data source or data connection workspace field', async () => {
@@ -629,23 +675,27 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
         );
 
         let result = await wrapper.get('data-source', 'workspace-2-data-source');
-        expect(result).toEqual({
-          attributes: {
-            title: 'Workspace 2 data source',
-          },
-          id: 'workspace-2-data-source',
-          type: 'data-source',
-          workspaces: ['mock-request-workspace-id'],
-        });
+        expect(result).toEqual(
+          expect.objectContaining({
+            attributes: {
+              title: 'Workspace 2 data source',
+            },
+            id: 'workspace-2-data-source',
+            type: 'data-source',
+            workspaces: ['mock-request-workspace-id'],
+          })
+        );
         result = await wrapper.get('data-connection', 'workspace-2-data-connection');
-        expect(result).toEqual({
-          attributes: {
-            title: 'Workspace 2 data connection',
-          },
-          id: 'workspace-2-data-connection',
-          type: 'data-connection',
-          workspaces: ['mock-request-workspace-id'],
-        });
+        expect(result).toEqual(
+          expect.objectContaining({
+            attributes: {
+              title: 'Workspace 2 data connection',
+            },
+            id: 'workspace-2-data-connection',
+            type: 'data-connection',
+            workspaces: ['mock-request-workspace-id'],
+          })
+        );
       });
 
       it('should not validate data source or data connection when not in workspace', async () => {
@@ -657,6 +707,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
           id: 'workspace-1-data-source',
           attributes: { title: 'Workspace 1 data source' },
           workspaces: ['workspace-1'],
+          references: [],
         });
         result = await wrapper.get('data-connection', 'workspace-1-data-connection');
         expect(result).toEqual({
@@ -664,6 +715,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
           id: 'workspace-1-data-connection',
           attributes: { title: 'Workspace 1 data connection' },
           workspaces: ['workspace-1'],
+          references: [],
         });
       });
 
@@ -675,6 +727,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
           id: 'workspace-1-data-source',
           attributes: { title: 'Workspace 1 data source' },
           workspaces: ['workspace-1'],
+          references: [],
         });
       });
 
@@ -746,11 +799,10 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
       });
       it('should call permission validateSavedObjectsACL with object', async () => {
         const { wrapper, permissionControlMock } = generateWorkspaceSavedObjectsClientWrapper();
-        let errorCatched;
         try {
           await wrapper.bulkGet([{ type: 'dashboard', id: 'not-permitted-dashboard' }]);
         } catch (e) {
-          errorCatched = e;
+          // Add 1 line to pass no-empty lint check
         }
         expect(permissionControlMock.validateSavedObjectsACL).toHaveBeenCalledWith(
           [
@@ -831,6 +883,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
               id: 'workspace-2-data-source',
               type: 'data-source',
               workspaces: ['mock-request-workspace-id'],
+              references: [],
             },
           ],
         });
@@ -850,6 +903,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
               id: 'workspace-2-data-connection',
               type: 'data-connection',
               workspaces: ['mock-request-workspace-id'],
+              references: [],
             },
           ],
         });
@@ -873,6 +927,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
               id: 'workspace-1-data-source',
               type: 'data-source',
               workspaces: ['workspace-1'],
+              references: [],
             },
           ],
         });
@@ -892,6 +947,7 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
               id: 'workspace-1-data-connection',
               type: 'data-connection',
               workspaces: ['workspace-1'],
+              references: [],
             },
           ],
         });
@@ -1010,9 +1066,14 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
         const { wrapper, clientMock } = generateWorkspaceSavedObjectsClientWrapper(
           DATASOURCE_ADMIN
         );
-        clientMock.find.mockImplementation(() => ({
+        clientMock.find.mockImplementation(async () => ({
+          total: 2,
+          per_page: 10,
+          page: 1,
           saved_objects: [
             {
+              score: 1,
+              references: [],
               id: 'global_config',
               type: 'config',
               attributes: {
@@ -1020,8 +1081,11 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
               },
             },
             {
+              score: 1,
+              references: [],
               id: 'user_config',
               type: 'config',
+              attributes: {},
             },
           ],
         }));
@@ -1286,4 +1350,22 @@ describe('WorkspaceSavedObjectsClientWrapper', () => {
       });
     });
   });
+
+  describe('ACLAuditor', () => {
+    it('should check out once after multiple parallel client calls all finished', async () => {
+      const { wrapper, requestMock } = generateWorkspaceSavedObjectsClientWrapper();
+      const auditor = getACLAuditor(requestMock);
+      let checkSpy;
+      if (auditor) {
+        checkSpy = jest.spyOn(auditor, 'checkout');
+      }
+
+      await Promise.all([
+        wrapper.get('workspace', 'foo'),
+        wrapper.get('workspace', 'foo'),
+        wrapper.get('workspace', 'foo'),
+      ]);
+      expect(checkSpy).toBeCalledTimes(1);
+    });
+  });
 });
diff --git a/src/plugins/workspace/server/saved_objects/workspace_saved_objects_client_wrapper.ts b/src/plugins/workspace/server/saved_objects/workspace_saved_objects_client_wrapper.ts
index 876f333be95e..162f7a488ad2 100644
--- a/src/plugins/workspace/server/saved_objects/workspace_saved_objects_client_wrapper.ts
+++ b/src/plugins/workspace/server/saved_objects/workspace_saved_objects_client_wrapper.ts
@@ -5,7 +5,13 @@
 
 import { i18n } from '@osd/i18n';
 
-import { getWorkspaceState } from '../../../../core/server/utils';
+import {
+  ACLAuditorStateKey,
+  CLIENT_CALL_AUDITOR_KEY,
+  getACLAuditor,
+  getClientCallAuditor,
+  getWorkspaceState,
+} from '../../../../core/server/utils';
 import {
   OpenSearchDashboardsRequest,
   SavedObject,
@@ -27,6 +33,7 @@ import {
   SavedObjectsServiceStart,
   SavedObjectsClientContract,
   SavedObjectsDeleteByWorkspaceOptions,
+  SavedObjectsFindResult,
 } from '../../../../core/server';
 import { SavedObjectsPermissionControlContract } from '../permission_control/client';
 import {
@@ -236,12 +243,16 @@ export class WorkspaceSavedObjectsClientWrapper {
   }
 
   public wrapperFactory: SavedObjectsClientWrapperFactory = (wrapperOptions) => {
+    const ACLAuditor = getACLAuditor(wrapperOptions.request);
+    const clientCallAuditor = getClientCallAuditor(wrapperOptions.request);
     const deleteWithWorkspacePermissionControl = async (
       type: string,
       id: string,
       options: SavedObjectsDeleteOptions = {}
     ) => {
       const objectToDeleted = await wrapperOptions.client.get(type, id, options);
+      // System request, -1 for compensation.
+      ACLAuditor?.increment(ACLAuditorStateKey.DATABASE_OPERATION, -1);
       if (
         !(await this.validateWorkspacesAndSavedObjectsPermissions(
           objectToDeleted,
@@ -250,8 +261,10 @@ export class WorkspaceSavedObjectsClientWrapper {
           [WorkspacePermissionMode.Write]
         ))
       ) {
+        ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
         throw generateSavedObjectsPermissionError();
       }
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, 1);
       return await wrapperOptions.client.delete(type, id, options);
     };
 
@@ -279,10 +292,14 @@ export class WorkspaceSavedObjectsClientWrapper {
       options: SavedObjectsUpdateOptions = {}
     ): Promise<SavedObjectsUpdateResponse<T>> => {
       const objectToUpdate = await wrapperOptions.client.get<T>(type, id, options);
+      // System request, -1 for compensation.
+      ACLAuditor?.increment(ACLAuditorStateKey.DATABASE_OPERATION, -1);
       const permitted = await validateUpdateWithWorkspacePermission(objectToUpdate);
       if (!permitted) {
+        ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
         throw generateSavedObjectsPermissionError();
       }
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, 1);
       return await wrapperOptions.client.update(type, id, attributes, options);
     };
 
@@ -291,6 +308,8 @@ export class WorkspaceSavedObjectsClientWrapper {
       options?: SavedObjectsBulkUpdateOptions
     ): Promise<SavedObjectsBulkUpdateResponse<T>> => {
       const objectsToUpdate = await wrapperOptions.client.bulkGet<T>(objects, options);
+      // System request, -1 * objects.length for compensation.
+      ACLAuditor?.increment(ACLAuditorStateKey.DATABASE_OPERATION, -1 * objects.length);
       this.permissionControl.addToCacheAllowlist(
         wrapperOptions.request,
         getWorkspacesFromSavedObjects(objectsToUpdate.saved_objects)
@@ -299,10 +318,12 @@ export class WorkspaceSavedObjectsClientWrapper {
       for (const object of objectsToUpdate.saved_objects) {
         const permitted = await validateUpdateWithWorkspacePermission(object);
         if (!permitted) {
+          ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
           throw generateSavedObjectsPermissionError();
         }
       }
 
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, objects.length);
       return await wrapperOptions.client.bulkUpdate(objects, options);
     };
 
@@ -344,6 +365,8 @@ export class WorkspaceSavedObjectsClientWrapper {
             let rawObject;
             try {
               rawObject = await wrapperOptions.client.get(type, id);
+              // System request, -1 for compensation.
+              ACLAuditor?.increment(ACLAuditorStateKey.DATABASE_OPERATION, -1);
             } catch (error) {
               // If object is not found, we will skip the validation of this object.
               if (SavedObjectsErrorHelpers.isNotFoundError(error as Error)) {
@@ -365,12 +388,15 @@ export class WorkspaceSavedObjectsClientWrapper {
                 false
               ))
             ) {
+              ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
               throw generateWorkspacePermissionError();
             }
           }
         }
       }
 
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, objects.length);
+
       return await wrapperOptions.client.bulkCreate(objects, options);
     };
 
@@ -396,6 +422,7 @@ export class WorkspaceSavedObjectsClientWrapper {
           [WorkspacePermissionMode.LibraryWrite]
         ))
       ) {
+        ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, options.workspaces?.length ?? 0);
         throw generateWorkspacePermissionError();
       }
 
@@ -406,21 +433,25 @@ export class WorkspaceSavedObjectsClientWrapper {
        * it has permission to any of the workspaces that the object associates with.
        *
        */
-      if (
-        options?.overwrite &&
-        options.id &&
-        !hasTargetWorkspaces &&
-        !(await this.validateWorkspacesAndSavedObjectsPermissions(
-          await wrapperOptions.client.get(type, options.id),
-          wrapperOptions.request,
-          [WorkspacePermissionMode.LibraryWrite],
-          [WorkspacePermissionMode.Write],
-          false
-        ))
-      ) {
-        throw generateWorkspacePermissionError();
+      if (options?.overwrite && options.id && !hasTargetWorkspaces) {
+        const object = await wrapperOptions.client.get(type, options.id);
+        // System request, -1 for compensation.
+        ACLAuditor?.increment(ACLAuditorStateKey.DATABASE_OPERATION, -1);
+        if (
+          !(await this.validateWorkspacesAndSavedObjectsPermissions(
+            object,
+            wrapperOptions.request,
+            [WorkspacePermissionMode.LibraryWrite],
+            [WorkspacePermissionMode.Write],
+            false
+          ))
+        ) {
+          ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
+          throw generateWorkspacePermissionError();
+        }
       }
 
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, 1);
       return await wrapperOptions.client.create(type, attributes, options);
     };
 
@@ -433,6 +464,7 @@ export class WorkspaceSavedObjectsClientWrapper {
 
       if (validateIsWorkspaceDataSourceAndConnectionObjectType(objectToGet.type)) {
         if (isDataSourceAdmin) {
+          ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, 1);
           return objectToGet;
         }
         const hasPermission = this.validateDataSourcePermissions(
@@ -440,6 +472,7 @@ export class WorkspaceSavedObjectsClientWrapper {
           wrapperOptions.request
         );
         if (!hasPermission) {
+          ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
           throw generateDataSourcePermissionError();
         }
       }
@@ -453,8 +486,10 @@ export class WorkspaceSavedObjectsClientWrapper {
           false
         ))
       ) {
+        ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
         throw generateSavedObjectsPermissionError();
       }
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, 1);
       return objectToGet;
     };
 
@@ -472,6 +507,7 @@ export class WorkspaceSavedObjectsClientWrapper {
         if (validateIsWorkspaceDataSourceAndConnectionObjectType(object.type)) {
           const hasPermission = this.validateDataSourcePermissions(object, wrapperOptions.request);
           if (!hasPermission) {
+            ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
             throw generateDataSourcePermissionError();
           }
         }
@@ -485,10 +521,14 @@ export class WorkspaceSavedObjectsClientWrapper {
             false
           ))
         ) {
+          ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
           throw generateSavedObjectsPermissionError();
         }
       }
-
+      ACLAuditor?.increment(
+        ACLAuditorStateKey.VALIDATE_SUCCESS,
+        objectToBulkGet.saved_objects.length
+      );
       return objectToBulkGet;
     };
 
@@ -540,7 +580,7 @@ export class WorkspaceSavedObjectsClientWrapper {
         return {
           ...findResult,
           total: finalSavedObjects.length,
-          saved_objects: finalSavedObjects,
+          saved_objects: finalSavedObjects as Array<SavedObjectsFindResult<T>>,
         };
       } else if (!options.workspaces && !options.ACLSearchParams) {
         options.workspaces = permittedWorkspaceIds;
@@ -577,9 +617,11 @@ export class WorkspaceSavedObjectsClientWrapper {
           WorkspacePermissionMode.LibraryWrite,
         ]))
       ) {
+        ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
         throw generateWorkspacePermissionError();
       }
 
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, 1);
       return await wrapperOptions.client.deleteByWorkspace(workspace, options);
     };
 
@@ -591,8 +633,10 @@ export class WorkspaceSavedObjectsClientWrapper {
     ) => {
       // Only dashboard admin can assign data source to workspace
       if (validateIsWorkspaceDataSourceAndConnectionObjectType(type)) {
+        ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
         throw generateOSDAdminPermissionError();
       }
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, 1);
       // In current version, only the type is data-source and data-connection that will call addToWorkspaces
       return await wrapperOptions.client.addToWorkspaces(type, id, targetWorkspaces, options);
     };
@@ -605,8 +649,10 @@ export class WorkspaceSavedObjectsClientWrapper {
     ) => {
       // Only dashboard admin can unassign data source and data-connection to workspace
       if (validateIsWorkspaceDataSourceAndConnectionObjectType(type)) {
+        ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_FAILURE, 1);
         throw generateOSDAdminPermissionError();
       }
+      ACLAuditor?.increment(ACLAuditorStateKey.VALIDATE_SUCCESS, 1);
       // In current version, only the type is data-source and data-connection will that call deleteFromWorkspaces
       return await wrapperOptions.client.deleteFromWorkspaces(type, id, targetWorkspaces, options);
     };
@@ -616,23 +662,65 @@ export class WorkspaceSavedObjectsClientWrapper {
       return wrapperOptions.client;
     }
 
+    const ACLAuditDecorator = function <T extends (...args: any[]) => any>(fn: T): T {
+      return function (...args: Parameters<T>): ReturnType<T> {
+        clientCallAuditor?.increment(CLIENT_CALL_AUDITOR_KEY.incoming);
+        const result = fn.apply(wrapperOptions.client, args);
+        if (result instanceof Promise) {
+          result.then(
+            () => {
+              clientCallAuditor?.increment(CLIENT_CALL_AUDITOR_KEY.outgoing);
+              try {
+                const checkoutInfo = JSON.stringify([fn.name, ...args]);
+                if (clientCallAuditor?.isAsyncClientCallsBalanced()) {
+                  ACLAuditor?.checkout(checkoutInfo);
+                }
+              } catch (e) {
+                if (clientCallAuditor?.isAsyncClientCallsBalanced()) {
+                  ACLAuditor?.checkout();
+                }
+              }
+            },
+            /**
+             * The catch here is required because unhandled promise will make server crashed,
+             * and we will reset the auditor state when catch an error.
+             */
+            () => {
+              clientCallAuditor?.increment(CLIENT_CALL_AUDITOR_KEY.outgoing);
+              if (clientCallAuditor?.isAsyncClientCallsBalanced()) {
+                ACLAuditor?.reset();
+              }
+            }
+          );
+        } else {
+          // The decorator is used to decorate async functions so the branch here won't be picked.
+          // But we still need to keep it in case there are sync calls in the future.
+          clientCallAuditor?.increment(CLIENT_CALL_AUDITOR_KEY.outgoing);
+          if (clientCallAuditor?.isAsyncClientCallsBalanced()) {
+            ACLAuditor?.checkout();
+          }
+        }
+        return result;
+      } as T;
+    };
+
     return {
       ...wrapperOptions.client,
-      get: getWithWorkspacePermissionControl,
+      get: ACLAuditDecorator(getWithWorkspacePermissionControl),
       checkConflicts: wrapperOptions.client.checkConflicts,
       find: findWithWorkspacePermissionControl,
-      bulkGet: bulkGetWithWorkspacePermissionControl,
+      bulkGet: ACLAuditDecorator(bulkGetWithWorkspacePermissionControl),
       errors: wrapperOptions.client.errors,
       addToNamespaces: wrapperOptions.client.addToNamespaces,
       deleteFromNamespaces: wrapperOptions.client.deleteFromNamespaces,
-      create: createWithWorkspacePermissionControl,
-      bulkCreate: bulkCreateWithWorkspacePermissionControl,
-      delete: deleteWithWorkspacePermissionControl,
-      update: updateWithWorkspacePermissionControl,
-      bulkUpdate: bulkUpdateWithWorkspacePermissionControl,
-      deleteByWorkspace: deleteByWorkspaceWithPermissionControl,
-      addToWorkspaces: addToWorkspacesWithPermissionControl,
-      deleteFromWorkspaces: deleteFromWorkspacesWithPermissionControl,
+      create: ACLAuditDecorator(createWithWorkspacePermissionControl),
+      bulkCreate: ACLAuditDecorator(bulkCreateWithWorkspacePermissionControl),
+      delete: ACLAuditDecorator(deleteWithWorkspacePermissionControl),
+      update: ACLAuditDecorator(updateWithWorkspacePermissionControl),
+      bulkUpdate: ACLAuditDecorator(bulkUpdateWithWorkspacePermissionControl),
+      deleteByWorkspace: ACLAuditDecorator(deleteByWorkspaceWithPermissionControl),
+      addToWorkspaces: ACLAuditDecorator(addToWorkspacesWithPermissionControl),
+      deleteFromWorkspaces: ACLAuditDecorator(deleteFromWorkspacesWithPermissionControl),
     };
   };
 
diff --git a/src/plugins/workspace/server/types.ts b/src/plugins/workspace/server/types.ts
index d9b998cc3344..8a268e655bdd 100644
--- a/src/plugins/workspace/server/types.ts
+++ b/src/plugins/workspace/server/types.ts
@@ -122,6 +122,46 @@ export interface IWorkspaceClientImpl {
    * @public
    */
   destroy(): Promise<IResponse<boolean>>;
+
+  /**
+   * Associates a list of objects with the given workspace ID.
+   *
+   * This method takes a workspace ID and an array of objects, where each object contains
+   * an `id` and `type`. It attempts to associate each object with the specified workspace.
+   * If the association succeeds, the object is included in the result without an error.
+   * If there is an issue associating an object, an error message is returned for that object.
+   *
+   * @returns A promise that resolves to a response object containing an array of results for each object.
+   *          Each result will include the object's `id` and, if there was an error during association, an `error` field
+   *          with the error message.
+   *
+   * @public
+   */
+  associate(
+    requestDetail: IRequestDetail,
+    workspaceId: string,
+    objects: Array<{ id: string; type: string }>
+  ): Promise<IResponse<Array<{ id: string; error?: string }>>>;
+
+  /**
+   * Dissociates a list of objects from the given workspace ID.
+   *
+   * This method takes a workspace ID and an array of objects, where each object contains
+   * an `id` and `type`. It attempts to dissociate each object from the specified workspace.
+   * If the dissociation succeeds, the object is included in the result without an error.
+   * If there is an issue dissociating an object, an error message is returned for that object.
+   *
+   * @returns A promise that resolves to a response object containing an array of results for each object.
+   *          Each result will include the object's `id` and, if there was an error during dissociation, an `error` field
+   *          with the error message.
+   *
+   * @public
+   */
+  dissociate(
+    requestDetail: IRequestDetail,
+    workspaceId: string,
+    objects: Array<{ id: string; type: string }>
+  ): Promise<IResponse<Array<{ id: string; error?: string }>>>;
 }
 
 export type IResponse<T> =
diff --git a/src/plugins/workspace/server/utils.test.ts b/src/plugins/workspace/server/utils.test.ts
index f57c92fb4cdc..3f140668d4b2 100644
--- a/src/plugins/workspace/server/utils.test.ts
+++ b/src/plugins/workspace/server/utils.test.ts
@@ -21,6 +21,7 @@ import {
 import { getWorkspaceState } from '../../../core/server/utils';
 import { Observable, of } from 'rxjs';
 import { DEFAULT_DATA_SOURCE_UI_SETTINGS_ID } from '../../data_source_management/common';
+import { OSD_ADMIN_WILDCARD_MATCH_ALL } from '../common/constants';
 
 describe('workspace utils', () => {
   it('should generate id with the specified size', () => {
@@ -76,13 +77,23 @@ describe('workspace utils', () => {
     expect(getWorkspaceState(mockRequest)?.isDashboardAdmin).toBe(true);
   });
 
-  it('should be dashboard admin when configGroups and configUsers are []', () => {
+  it('should not be dashboard admin when configGroups and configUsers are []', () => {
     const mockRequest = httpServerMock.createOpenSearchDashboardsRequest();
-    const groups: string[] = ['user1'];
-    const users: string[] = [];
+    const groups: string[] = [];
+    const users: string[] = ['user1'];
     const configGroups: string[] = [];
     const configUsers: string[] = [];
     updateDashboardAdminStateForRequest(mockRequest, groups, users, configGroups, configUsers);
+    expect(getWorkspaceState(mockRequest)?.isDashboardAdmin).toBe(false);
+  });
+
+  it('should be dashboard admin when configGroups or configUsers include wildcard *', () => {
+    const mockRequest = httpServerMock.createOpenSearchDashboardsRequest();
+    const groups: string[] = [];
+    const users: string[] = ['user1'];
+    const configGroups: string[] = [];
+    const configUsers: string[] = [OSD_ADMIN_WILDCARD_MATCH_ALL];
+    updateDashboardAdminStateForRequest(mockRequest, groups, users, configGroups, configUsers);
     expect(getWorkspaceState(mockRequest)?.isDashboardAdmin).toBe(true);
   });
 
diff --git a/src/plugins/workspace/server/utils.ts b/src/plugins/workspace/server/utils.ts
index 01943e576cf0..0fab0ce56176 100644
--- a/src/plugins/workspace/server/utils.ts
+++ b/src/plugins/workspace/server/utils.ts
@@ -20,6 +20,7 @@ import {
   CURRENT_USER_PLACEHOLDER,
   WorkspacePermissionMode,
   WORKSPACE_DATA_SOURCE_AND_CONNECTION_OBJECT_TYPES,
+  OSD_ADMIN_WILDCARD_MATCH_ALL,
 } from '../common/constants';
 import { PermissionModeId } from '../../../core/server';
 
@@ -39,17 +40,15 @@ export const updateDashboardAdminStateForRequest = (
 ) => {
   // If the security plugin is not installed, login defaults to OSD Admin
   if (!groups.length && !users.length) {
-    updateWorkspaceState(request, { isDashboardAdmin: true });
-    return;
+    return updateWorkspaceState(request, { isDashboardAdmin: true });
   }
-  // If groups/users are not configured or [], login defaults to OSD Admin
-  if (!configGroups.length && !configUsers.length) {
-    updateWorkspaceState(request, { isDashboardAdmin: true });
-    return;
+  // If user config contains wildcard characters '*', login defaults to OSD Admin
+  if (configUsers.includes(OSD_ADMIN_WILDCARD_MATCH_ALL)) {
+    return updateWorkspaceState(request, { isDashboardAdmin: true });
   }
   const groupMatchAny = groups.some((group) => configGroups.includes(group));
   const userMatchAny = users.some((user) => configUsers.includes(user));
-  updateWorkspaceState(request, {
+  return updateWorkspaceState(request, {
     isDashboardAdmin: groupMatchAny || userMatchAny,
   });
 };
diff --git a/src/plugins/workspace/server/workspace_client.ts b/src/plugins/workspace/server/workspace_client.ts
index 2df7bc3dba38..d7d7ad890250 100644
--- a/src/plugins/workspace/server/workspace_client.ts
+++ b/src/plugins/workspace/server/workspace_client.ts
@@ -392,12 +392,67 @@ export class WorkspaceClient implements IWorkspaceClientImpl {
       };
     }
   }
+
+  public async associate(
+    requestDetail: IRequestDetail,
+    workspaceId: string,
+    objects: Array<{ id: string; type: string }>
+  ): Promise<IResponse<Array<{ id: string; error?: string }>>> {
+    const savedObjectClient = this.getSavedObjectClientsFromRequestDetail(requestDetail);
+    const promises = objects.map(async (obj) => {
+      try {
+        await savedObjectClient.addToWorkspaces(obj.type, obj.id, [workspaceId]);
+        return {
+          id: obj.id,
+        };
+      } catch (e) {
+        return {
+          id: obj.id,
+          error: this.formatError(e),
+        };
+      }
+    });
+    const result = await Promise.all(promises);
+    return {
+      success: true,
+      result,
+    };
+  }
+
+  public async dissociate(
+    requestDetail: IRequestDetail,
+    workspaceId: string,
+    objects: Array<{ id: string; type: string }>
+  ): Promise<IResponse<Array<{ id: string; error?: string }>>> {
+    const savedObjectClient = this.getSavedObjectClientsFromRequestDetail(requestDetail);
+    const promises = objects.map(async (obj) => {
+      try {
+        await savedObjectClient.deleteFromWorkspaces(obj.type, obj.id, [workspaceId]);
+        return {
+          id: obj.id,
+        };
+      } catch (e) {
+        return {
+          id: obj.id,
+          error: this.formatError(e),
+        };
+      }
+    });
+    const result = await Promise.all(promises);
+    return {
+      success: true,
+      result,
+    };
+  }
+
   public setSavedObjects(savedObjects: SavedObjectsServiceStart) {
     this.savedObjects = savedObjects;
   }
+
   public setUiSettings(uiSettings: UiSettingsServiceStart) {
     this.uiSettings = uiSettings;
   }
+
   public async destroy(): Promise<IResponse<boolean>> {
     return {
       success: true,
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 114143885ee3..603ba9f9a6e8 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.15.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.17.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 e552a2e5e3f1..93ade7122be3 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.15.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.17.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 a85769bad717..d7b4bb09ead4 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.15.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.17.0",
     "@osd/plugin-helpers": "1.0.0",
     "react": "^16.14.0",
     "typescript": "4.0.2"
diff --git a/yarn.lock b/yarn.lock
index d70f5b1e50e3..0b85b731e947 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1407,10 +1407,10 @@
   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.15.0":
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.15.0.tgz#bec1bcb15cee9bcc31c71920b1b491d0cb60a8d9"
-  integrity sha512-xa/ygOlmNnQy+LcSgsbr9WCL8jt6HzWoJcV4tI0uPo1j7GNTyi6IccE30CXjmUEqh3Fce82ghKzBuWGreJXGeQ==
+"@elastic/eui@npm:@opensearch-project/oui@1.17.0":
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.17.0.tgz#8a09f9f03f82eaf9404e59ac961b663748baba68"
+  integrity sha512-lr8S88sOUrMElO4w38laRsASLcCvXuASLVFZG7giFL31O6AkwGbII/Dux5jH26OdQ9T7CshPDZ5y/h3pyuSbUQ==
   dependencies:
     "@types/chroma-js" "^2.4.0"
     "@types/react-beautiful-dnd" "^13.1.3"
@@ -11404,10 +11404,10 @@ json-stringify-safe@5.0.1, json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json11@^1.0.4, json11@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/json11/-/json11-1.1.2.tgz#35ffd3ee5073b0cc09ef826b0a0dc005ebef2b5b"
-  integrity sha512-5r1RHT1/Gr/jsI/XZZj/P6F11BKM8xvTaftRuiLkQI9Z2PFDukM82Ysxw8yDszb3NJP/NKnRlSGmhUdG99rlBw==
+json11@^1.0.4, json11@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/json11/-/json11-2.0.0.tgz#06c4ad0a40b50c5de99a87f6d3028593137e5641"
+  integrity sha512-VuKJKUSPEJape+daTm70Nx7vdcdorf4S6LCyN2z0jUVH4UrQ4ftXo2kC0bnHpCREmxHuHqCNVPA75BjI3CB6Ag==
 
 json5@^1.0.1:
   version "1.0.2"